Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@contentful/f36-tabs
Advanced tools
@contentful/f36-tabs - npm Package Compare versions
Comparing version 4.0.1-next-v4-9780.2433 to 4.0.1-next-v4-9789.2434
@@ -1,2 +0,2 @@ | ||
| import e from"@babel/runtime/helpers/esm/extends";import t,{useCallback as a}from"react";import{Button as r}from"@contentful/f36-button";import{cx as o,css as s}from"emotion";import l from"@contentful/f36-tokens";import{mergeRefs as i}from"@contentful/f36-core";import{useArrowKeyNavigation as n}from"@contentful/f36-utils";function c(e,t,a,r){Object.defineProperty(e,t,{get:a,set:r,enumerable:!0,configurable:!0})}var d={};c(d,"Tabs",(()=>w)),c(d,"Tab",(()=>g)),c(d,"TabPanel",(()=>h));const b=t.createContext({selectedTab:"",setSelectedTab:void 0}),f=({defaultTab:e,children:a})=>{const[r,o]=t.useState(e);return t.createElement(b.Provider,{value:{selectedTab:r,setSelectedTab:o}},a)};function u(){return t.useContext(b)}function m({className:a,children:r,testId:o="cf-ui-tabs",style:s,defaultTab:l,...i},n){const c={"data-test-id":o,style:s,...i};return t.createElement(f,{defaultTab:l},t.createElement("div",e({},c,{ref:n}),r))}const p=t.forwardRef(m);function y({testId:a="cf-ui-tab-panel",className:r,children:o,id:s,...l},i){const{selectedTab:n}=u(),c={"aria-labelledby":`${s}-control-tab`};return n===s?t.createElement("div",e({},c,l,{id:s,role:"tabpanel","data-test-id":a,className:r,ref:i}),o):null}const h=t.forwardRef(y),v={tabs:{display:"flex"},tab:{borderRadius:0,whiteSpace:"nowrap",color:l.gray500,display:"flex",height:"100%",minHeight:l.spacing2Xl,position:"relative",padding:`0 ${l.spacingM}`,fontFamily:l.fontStackPrimary,border:"none","&:before":{content:'""',position:"absolute",background:l.colorPrimary,opacity:"0",bottom:"0",left:"0",right:"0",height:"2px"},"&:hover:before, &:hover:focus":{opacity:"0.5"}},tabSelected:{color:l.colorPrimary,"&:before, &:hover:before, &:hover:focus":{opacity:"1"}},tabDisabled:{opacity:"0.5",cursor:"not-allowed"},tabDividerVertical:{"& > *:not(:first-child)":{boxShadow:`inset 1px 0 0px 0px ${l.gray200}`}},tabDividerHorizontal:{boxShadow:`inset 0 -2px 0px 0px ${l.gray200}`}};function T({children:l,className:i,isDisabled:n=!1,panelId:c,onSelect:d,style:b,testId:f="cf-ui-tab",...m},p){const{selectedTab:y,setSelectedTab:h}=u(),T=c===y,g=(({className:e,isSelected:t,isDisabled:a})=>({tab:o(s(v.tab,""),e,{[s(v.tabSelected,"")]:t,[s(v.tabDisabled,"")]:a})}))({className:i,isSelected:T,isDisabled:n}),x=a((e=>{d&&!n&&(h(c),d(c,e))}),[n,c,d,h]),S={className:g.tab,onClick:x,style:b,testId:f,tabIndex:T?0:-1};return S["aria-selected"]=T,S.role="tab",S["aria-controls"]=c,t.createElement(r,e({isDisabled:n},S,m,{variant:"transparent",id:`${c}-control-tab`,ref:p}),l)}const g=t.forwardRef(T);function x({className:a,children:r,variant:l="default",testId:c="cf-ui-tab-list",style:d,...b},f){const m=(({className:e,variant:t})=>({tabList:o(s(v.tabs,""),e,{[s(v.tabDividerHorizontal,"")]:"horizontal-divider"===t,[s(v.tabDividerVertical,"")]:"vertical-divider"===t})}))({className:a,variant:l}),p=t.useRef(null),{setSelectedTab:y}=u(),{focusedIndex:h,handleArrowsKeyDown:T}=n({itemsContainerRef:p,itemsSelector:'[role="tab"]:not(:disabled)',keyType:"horizontal"});t.useEffect((()=>{if(p.current){const e=p.current.querySelectorAll('[role="tab"]:not(:disabled)');if(e.length>0&&h<e.length){const t=e[h];t.focus({preventScroll:!0}),y(t.getAttribute("aria-controls"))}}}),[h,y]);const g={"data-test-id":c,className:m.tabList,style:d,role:"tablist",onKeyDown:T,...b};return t.createElement("div",e({},g,{ref:i(p,f)}),r)}const S=t.forwardRef(x),w=p;w.Panel=h,w.Tab=g,w.List=S;export{w as Tabs,g as Tab,h as TabPanel}; | ||
| import e from"@babel/runtime/helpers/esm/extends";import t,{useCallback as a}from"react";import{Button as r}from"@contentful/f36-button";import{css as o,cx as s}from"emotion";import l from"@contentful/f36-tokens";import{mergeRefs as i}from"@contentful/f36-core";import{useArrowKeyNavigation as n}from"@contentful/f36-utils";function c(e,t,a,r){Object.defineProperty(e,t,{get:a,set:r,enumerable:!0,configurable:!0})}var d={};c(d,"Tabs",(()=>w)),c(d,"Tab",(()=>g)),c(d,"TabPanel",(()=>h));const b=t.createContext({selectedTab:"",setSelectedTab:void 0}),f=({defaultTab:e,children:a})=>{const[r,o]=t.useState(e);return t.createElement(b.Provider,{value:{selectedTab:r,setSelectedTab:o}},a)};function u(){return t.useContext(b)}function m({className:a,children:r,testId:o="cf-ui-tabs",style:s,defaultTab:l,...i},n){const c={"data-test-id":o,style:s,...i};return t.createElement(f,{defaultTab:l},t.createElement("div",e({},c,{ref:n}),r))}const p=t.forwardRef(m);function y({testId:a="cf-ui-tab-panel",className:r,children:o,id:s,...l},i){const{selectedTab:n}=u(),c={"aria-labelledby":`${s}-control-tab`};return n===s?t.createElement("div",e({},c,l,{id:s,role:"tabpanel","data-test-id":a,className:r,ref:i}),o):null}const h=t.forwardRef(y),v={tabs:{display:"flex"},tab:{borderRadius:0,whiteSpace:"nowrap",color:l.gray500,display:"flex",height:"100%",minHeight:l.spacing2Xl,position:"relative",padding:`0 ${l.spacingM}`,fontFamily:l.fontStackPrimary,border:"none","&:before":{content:'""',position:"absolute",background:l.colorPrimary,opacity:"0",bottom:"0",left:"0",right:"0",height:"2px"},"&:hover:before, &:hover:focus":{opacity:"0.5"}},tabSelected:{color:l.colorPrimary,"&:before, &:hover:before, &:hover:focus":{opacity:"1"}},tabDisabled:{opacity:"0.5",cursor:"not-allowed"},tabDividerVertical:{"& > *:not(:first-child)":{boxShadow:`inset 1px 0 0px 0px ${l.gray200}`}},tabDividerHorizontal:{boxShadow:`inset 0 -2px 0px 0px ${l.gray200}`}};function T({children:l,className:i,isDisabled:n=!1,panelId:c,onSelect:d,style:b,testId:f="cf-ui-tab",...m},p){const{selectedTab:y,setSelectedTab:h}=u(),T=c===y,g=(({className:e,isSelected:t,isDisabled:a})=>({tab:s(o(v.tab,""),e,{[o(v.tabSelected,"")]:t,[o(v.tabDisabled,"")]:a})}))({className:i,isSelected:T,isDisabled:n}),x=a((e=>{d&&!n&&(h(c),d(c,e))}),[n,c,d,h]),S={className:g.tab,onClick:x,style:b,testId:f,tabIndex:T?0:-1};return S["aria-selected"]=T,S.role="tab",S["aria-controls"]=c,t.createElement(r,e({isDisabled:n},S,m,{variant:"transparent",id:`${c}-control-tab`,ref:p}),l)}const g=t.forwardRef(T);function x({className:a,children:r,variant:l="default",testId:c="cf-ui-tab-list",style:d,...b},f){const m=(({className:e,variant:t})=>({tabList:s(o(v.tabs,""),e,{[o(v.tabDividerHorizontal,"")]:"horizontal-divider"===t,[o(v.tabDividerVertical,"")]:"vertical-divider"===t})}))({className:a,variant:l}),p=t.useRef(null),{setSelectedTab:y}=u(),{focusedIndex:h,handleArrowsKeyDown:T}=n({itemsContainerRef:p,itemsSelector:'[role="tab"]:not(:disabled)',keyType:"horizontal"});t.useEffect((()=>{if(p.current){const e=p.current.querySelectorAll('[role="tab"]:not(:disabled)');if(e.length>0&&h<e.length){const t=e[h];t.focus({preventScroll:!0}),y(t.getAttribute("aria-controls"))}}}),[h,y]);const g={"data-test-id":c,className:m.tabList,style:d,role:"tablist",onKeyDown:T,...b};return t.createElement("div",e({},g,{ref:i(p,f)}),r)}const S=t.forwardRef(x),w=p;w.Panel=h,w.Tab=g,w.List=S;export{w as Tabs,g as Tab,h as TabPanel}; | ||
| //# sourceMappingURL=module.js.map |
| { | ||
| "name": "@contentful/f36-tabs", | ||
| "version": "4.0.1-next-v4-9780.2433+b48659cd", | ||
| "version": "4.0.1-next-v4-9789.2434+754dee05", | ||
| "description": "Forma 36: Tabs component", | ||
@@ -10,5 +10,5 @@ "scripts": { | ||
| "@babel/runtime": "^7.6.2", | ||
| "@contentful/f36-button": "4.0.1-next-v4-9780.2433+b48659cd", | ||
| "@contentful/f36-core": "4.0.1-next-v4-9780.2433+b48659cd", | ||
| "@contentful/f36-tokens": "4.0.1-next-v4-9780.2433+b48659cd", | ||
| "@contentful/f36-button": "4.0.1-next-v4-9789.2434+754dee05", | ||
| "@contentful/f36-core": "4.0.1-next-v4-9789.2434+754dee05", | ||
| "@contentful/f36-tokens": "4.0.1-next-v4-9789.2434+754dee05", | ||
| "emotion": "^10.0.17" | ||
@@ -37,3 +37,3 @@ }, | ||
| }, | ||
| "gitHead": "b48659cde12f05a9347a236338f9faa6bef22dfd" | ||
| "gitHead": "754dee05f9e188f1492231120e4449a9e4f1992d" | ||
| } |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
No metric changes