Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@contentful/f36-tabs

Package Overview
Dependencies
Maintainers
105
Versions
343
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@contentful/f36-tabs - npm Package Compare versions

Comparing version 4.0.1-next-v4-8879.2361 to 4.0.1-next-v4-8904.2363

2

dist/main.js

@@ -1,2 +0,2 @@

var e=b(require("@babel/runtime/helpers/extends")),t=require("react"),a=b(t),{useCallback:r}=t,{Button:o}=require("@contentful/f36-button"),{css:n,cx:i}=require("emotion"),l=b(require("@contentful/f36-tokens")),{mergeRefs:s}=require("@contentful/f36-core"),{useArrowKeyNavigation:c}=require("@contentful/f36-utils");function d(e,t,a,r){Object.defineProperty(e,t,{get:a,set:r,enumerable:!0,configurable:!0})}function b(e){return e&&e.__esModule?e.default:e}var u={};d(u,"Tabs",(()=>N)),d(u,"Tab",(()=>T)),d(u,"TabPanel",(()=>g));const f=a.createContext({selectedTab:"",setSelectedTab:void 0}),m=({defaultTab:e,children:t})=>{const[r,o]=a.useState(e);return a.createElement(f.Provider,{value:{selectedTab:r,setSelectedTab:o}},t)};function p(){return a.useContext(f)}function y({className:t,children:r,testId:o="cf-ui-tabs",style:n,defaultTab:i,...l},s){const c={testId:o,style:n,...l};return a.createElement(m,{defaultTab:i},a.createElement("div",e({},c,{ref:s}),r))}const h=a.forwardRef(y);function v({testId:t="cf-ui-tab-panel",className:r,children:o,id:n,...i},l){const{selectedTab:s}=p(),c={"aria-labelledby":`${n}-control-tab`};return s===n?a.createElement("div",e({},c,i,{id:n,role:"tabpanel","data-test-id":t,className:r,ref:l}),o):null}const g=a.forwardRef(v),x={tabs:{display:"flex"},tab:{boxSizing:"border-box",whiteSpace:"nowrap",alignItems:"center",color:l.gray500,display:"flex",height:"100%",minHeight:l.spacing2Xl,position:"relative",cursor:"pointer",padding:`0 ${l.spacingM}`,fontSize:l.fontSizeM,fontFamily:l.fontStackPrimary,fontWeight:l.fontWeightMedium,outline:"none",textDecoration:"none",backgroundColor:"transparent",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 S({children:t,className:l,isDisabled:s=!1,panelId:c,onSelect:d,style:b,testId:u="cf-ui-tab",...f},m){const{selectedTab:y,setSelectedTab:h}=p(),v=c===y,g=(({className:e,isSelected:t,isDisabled:a})=>({tab:i(n(x.tab,""),e,{[n(x.tabSelected,"")]:t,[n(x.tabDisabled,"")]:a})}))({className:l,isSelected:v,isDisabled:s}),S=r((e=>{d&&!s&&(h(c),d(c,e))}),[s,c,d,h]),T={className:g.tab,onClick:S,style:b,testId:u,tabIndex:v?0:-1};return T["aria-selected"]=v,T.role="tab",T["aria-controls"]=c,a.createElement(o,e({isDisabled:s},T,f,{id:`${c}-control-tab`,ref:m}),t)}const T=a.forwardRef(S);function w({className:t,children:r,variant:o="default",testId:l="cf-ui-tab-list",style:d,...b},u){const f=(({className:e,variant:t})=>({tabList:i(n(x.tabs,""),e,{[n(x.tabDividerHorizontal,"")]:"horizontal-divider"===t,[n(x.tabDividerVertical,"")]:"vertical-divider"===t})}))({className:t,variant:o}),m=a.useRef(null),{setSelectedTab:y}=p(),{focusedIndex:h,handleArrowsKeyDown:v}=c({itemsContainerRef:m,itemsSelector:'[role="tab"]:not(:disabled)',keyType:"horizontal"});a.useEffect((()=>{if(m.current){const e=m.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={testId:l,className:f.tabList,style:d,role:"tablist",onKeyDown:v,...b};return a.createElement("div",e({},g,{ref:s(m,u)}),r)}const D=a.forwardRef(w),N=h;var I,k;N.Panel=g,N.Tab=T,N.List=D,I=module.exports,k=u,Object.keys(k).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(I,e,{enumerable:!0,get:function(){return k[e]}})}));
var e=b(require("@babel/runtime/helpers/extends")),t=require("react"),a=b(t),{useCallback:r}=t,{Button:o}=require("@contentful/f36-button"),{cx:n,css:i}=require("emotion"),l=b(require("@contentful/f36-tokens")),{mergeRefs:s}=require("@contentful/f36-core"),{useArrowKeyNavigation:c}=require("@contentful/f36-utils");function d(e,t,a,r){Object.defineProperty(e,t,{get:a,set:r,enumerable:!0,configurable:!0})}function b(e){return e&&e.__esModule?e.default:e}var u={};d(u,"Tabs",(()=>N)),d(u,"Tab",(()=>T)),d(u,"TabPanel",(()=>g));const f=a.createContext({selectedTab:"",setSelectedTab:void 0}),m=({defaultTab:e,children:t})=>{const[r,o]=a.useState(e);return a.createElement(f.Provider,{value:{selectedTab:r,setSelectedTab:o}},t)};function p(){return a.useContext(f)}function y({className:t,children:r,testId:o="cf-ui-tabs",style:n,defaultTab:i,...l},s){const c={testId:o,style:n,...l};return a.createElement(m,{defaultTab:i},a.createElement("div",e({},c,{ref:s}),r))}const h=a.forwardRef(y);function v({testId:t="cf-ui-tab-panel",className:r,children:o,id:n,...i},l){const{selectedTab:s}=p(),c={"aria-labelledby":`${n}-control-tab`};return s===n?a.createElement("div",e({},c,i,{id:n,role:"tabpanel","data-test-id":t,className:r,ref:l}),o):null}const g=a.forwardRef(v),x={tabs:{display:"flex"},tab:{boxSizing:"border-box",whiteSpace:"nowrap",alignItems:"center",color:l.gray500,display:"flex",height:"100%",minHeight:l.spacing2Xl,position:"relative",cursor:"pointer",padding:`0 ${l.spacingM}`,fontSize:l.fontSizeM,fontFamily:l.fontStackPrimary,fontWeight:l.fontWeightMedium,outline:"none",textDecoration:"none",backgroundColor:"transparent",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 S({children:t,className:l,isDisabled:s=!1,panelId:c,onSelect:d,style:b,testId:u="cf-ui-tab",...f},m){const{selectedTab:y,setSelectedTab:h}=p(),v=c===y,g=(({className:e,isSelected:t,isDisabled:a})=>({tab:n(i(x.tab,""),e,{[i(x.tabSelected,"")]:t,[i(x.tabDisabled,"")]:a})}))({className:l,isSelected:v,isDisabled:s}),S=r((e=>{d&&!s&&(h(c),d(c,e))}),[s,c,d,h]),T={className:g.tab,onClick:S,style:b,testId:u,tabIndex:v?0:-1};return T["aria-selected"]=v,T.role="tab",T["aria-controls"]=c,a.createElement(o,e({isDisabled:s},T,f,{id:`${c}-control-tab`,ref:m}),t)}const T=a.forwardRef(S);function w({className:t,children:r,variant:o="default",testId:l="cf-ui-tab-list",style:d,...b},u){const f=(({className:e,variant:t})=>({tabList:n(i(x.tabs,""),e,{[i(x.tabDividerHorizontal,"")]:"horizontal-divider"===t,[i(x.tabDividerVertical,"")]:"vertical-divider"===t})}))({className:t,variant:o}),m=a.useRef(null),{setSelectedTab:y}=p(),{focusedIndex:h,handleArrowsKeyDown:v}=c({itemsContainerRef:m,itemsSelector:'[role="tab"]:not(:disabled)',keyType:"horizontal"});a.useEffect((()=>{if(m.current){const e=m.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={testId:l,className:f.tabList,style:d,role:"tablist",onKeyDown:v,...b};return a.createElement("div",e({},g,{ref:s(m,u)}),r)}const D=a.forwardRef(w),N=h;var I,k;N.Panel=g,N.Tab=T,N.List=D,I=module.exports,k=u,Object.keys(k).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(I,e,{enumerable:!0,get:function(){return k[e]}})}));
//# sourceMappingURL=main.js.map
{
"name": "@contentful/f36-tabs",
"version": "4.0.1-next-v4-8879.2361+ee39c787",
"version": "4.0.1-next-v4-8904.2363+6c461df0",
"description": "Forma 36: Tabs component",

@@ -10,5 +10,5 @@ "scripts": {

"@babel/runtime": "^7.6.2",
"@contentful/f36-button": "4.0.1-next-v4-8879.2361+ee39c787",
"@contentful/f36-core": "4.0.1-next-v4-8879.2361+ee39c787",
"@contentful/f36-tokens": "4.0.1-next-v4-8879.2361+ee39c787",
"@contentful/f36-button": "4.0.1-next-v4-8904.2363+6c461df0",
"@contentful/f36-core": "4.0.1-next-v4-8904.2363+6c461df0",
"@contentful/f36-tokens": "4.0.1-next-v4-8904.2363+6c461df0",
"emotion": "^10.0.17"

@@ -37,3 +37,3 @@ },

},
"gitHead": "ee39c7876324bfadc940bfe7c54c603aab4e0791"
"gitHead": "6c461df0e9a2d6ef0053b1d4b489e5ab3947bc92"
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc