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

@contentful/f36-tabs

Package Overview
Dependencies
Maintainers
106
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-8286.2343 to 4.0.1-next-v4-8377.2344

2

dist/module.js

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

import e from"@babel/runtime/helpers/esm/extends";import t,{useCallback as a}from"react";import{Box as r}from"@contentful/f36-core";import{css as o,cx as s}from"emotion";import i from"@contentful/f36-tokens";function n(e,t,a,r){Object.defineProperty(e,t,{get:a,set:r,enumerable:!0,configurable:!0})}var l={};n(l,"Tabs",(()=>T)),n(l,"Tab",(()=>y)),n(l,"TabPanel",(()=>p));const c=t.createContext({selectedTab:"",setSelectedTab:void 0}),d=({defaultTab:e,children:a})=>{const[r,o]=t.useState(e);return t.createElement(c.Provider,{value:{selectedTab:r,setSelectedTab:o}},a)};function b(){return t.useContext(c)}function f({className:a,children:o,testId:s="cf-ui-tabs",style:i,defaultTab:n,...l},c){const b={testId:s,style:i,...l};return t.createElement(d,{defaultTab:n},t.createElement(r,e({as:"div"},b,{ref:c}),o))}const u=t.forwardRef(f);function m({testId:a="cf-ui-tab-panel",className:o,children:s,id:i,...n},l){const{selectedTab:c}=b(),d={"aria-labelledby":`${i}-control-tab`};return c===i?t.createElement(r,e({as:"div"},d,n,{id:i,role:"tabpanel",testId:a,className:o,ref:l}),s):null}const p=t.forwardRef(m),h={tabs:{display:"flex"},tab:{boxSizing:"border-box",whiteSpace:"nowrap",alignItems:"center",color:i.gray500,display:"flex",height:"100%",minHeight:i.spacing2Xl,position:"relative",cursor:"pointer",padding:`0 ${i.spacingM}`,fontSize:i.fontSizeM,fontFamily:i.fontStackPrimary,fontWeight:i.fontWeightMedium,outline:"none",textDecoration:"none",backgroundColor:"transparent",border:"none","&:before":{content:'""',position:"absolute",background:i.colorPrimary,opacity:"0",bottom:"0",left:"0",right:"0",height:"2px"},"&:hover:before, &:hover:focus":{opacity:"0.5"}},tabSelected:{color:i.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 ${i.gray200}`}},tabDividerHorizontal:{boxShadow:`inset 0 -2px 0px 0px ${i.gray200}`}};function v({children:i,className:n,isDisabled:l=!1,panelId:c,onSelect:d,style:f,tabIndex:u=0,testId:m="cf-ui-tab",...p},v){const{selectedTab:y,setSelectedTab:x}=b(),g=c===y,T=(({className:e,isSelected:t,isDisabled:a})=>({tab:s(o(h.tab,""),e,{[o(h.tabSelected,"")]:t,[o(h.tabDisabled,"")]:a})}))({className:n,isSelected:g,isDisabled:l}),S=a((e=>{d&&!l&&(x(c),d(c,e))}),[l,c,d]),I=a((e=>{d&&"Enter"===e.key&&(x(c),d(c,e),e.preventDefault())}),[c,d]),D={className:T.tab,onClick:S,onKeyPress:I,style:f,testId:m,tabIndex:u};return l&&(D["aria-disabled"]=!0),D["aria-selected"]=g,D.role="tab",D["aria-controls"]=c,t.createElement(r,e({as:"button"},D,p,{id:`${c}-control-tab`,ref:v}),i)}const y=t.forwardRef(v);function x({className:a,children:i,variant:n="default",testId:l="cf-ui-tab-list",style:c,...d},b){const f={testId:l,className:(({className:e,variant:t})=>({tabList:s(o(h.tabs,""),e,{[o(h.tabDividerHorizontal,"")]:"horizontal-divider"===t,[o(h.tabDividerVertical,"")]:"vertical-divider"===t})}))({className:a,variant:n}).tabList,style:c,...d};return t.createElement(r,e({as:"div"},f,{role:"tablist",ref:b}),i)}const g=t.forwardRef(x),T=u;T.Panel=p,T.Tab=y,T.List=g;export{T as Tabs,y as Tab,p as TabPanel};
import e from"@babel/runtime/helpers/esm/extends";import t,{useCallback as a}from"react";import{Box as r}from"@contentful/f36-core";import{cx as o,css as s}from"emotion";import i from"@contentful/f36-tokens";function n(e,t,a,r){Object.defineProperty(e,t,{get:a,set:r,enumerable:!0,configurable:!0})}var l={};n(l,"Tabs",(()=>T)),n(l,"Tab",(()=>y)),n(l,"TabPanel",(()=>p));const c=t.createContext({selectedTab:"",setSelectedTab:void 0}),d=({defaultTab:e,children:a})=>{const[r,o]=t.useState(e);return t.createElement(c.Provider,{value:{selectedTab:r,setSelectedTab:o}},a)};function b(){return t.useContext(c)}function f({className:a,children:o,testId:s="cf-ui-tabs",style:i,defaultTab:n,...l},c){const b={testId:s,style:i,...l};return t.createElement(d,{defaultTab:n},t.createElement(r,e({as:"div"},b,{ref:c}),o))}const u=t.forwardRef(f);function m({testId:a="cf-ui-tab-panel",className:o,children:s,id:i,...n},l){const{selectedTab:c}=b(),d={"aria-labelledby":`${i}-control-tab`};return c===i?t.createElement(r,e({as:"div"},d,n,{id:i,role:"tabpanel",testId:a,className:o,ref:l}),s):null}const p=t.forwardRef(m),h={tabs:{display:"flex"},tab:{boxSizing:"border-box",whiteSpace:"nowrap",alignItems:"center",color:i.gray500,display:"flex",height:"100%",minHeight:i.spacing2Xl,position:"relative",cursor:"pointer",padding:`0 ${i.spacingM}`,fontSize:i.fontSizeM,fontFamily:i.fontStackPrimary,fontWeight:i.fontWeightMedium,outline:"none",textDecoration:"none",backgroundColor:"transparent",border:"none","&:before":{content:'""',position:"absolute",background:i.colorPrimary,opacity:"0",bottom:"0",left:"0",right:"0",height:"2px"},"&:hover:before, &:hover:focus":{opacity:"0.5"}},tabSelected:{color:i.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 ${i.gray200}`}},tabDividerHorizontal:{boxShadow:`inset 0 -2px 0px 0px ${i.gray200}`}};function v({children:i,className:n,isDisabled:l=!1,panelId:c,onSelect:d,style:f,tabIndex:u=0,testId:m="cf-ui-tab",...p},v){const{selectedTab:y,setSelectedTab:x}=b(),g=c===y,T=(({className:e,isSelected:t,isDisabled:a})=>({tab:o(s(h.tab,""),e,{[s(h.tabSelected,"")]:t,[s(h.tabDisabled,"")]:a})}))({className:n,isSelected:g,isDisabled:l}),S=a((e=>{d&&!l&&(x(c),d(c,e))}),[l,c,d]),I=a((e=>{d&&"Enter"===e.key&&(x(c),d(c,e),e.preventDefault())}),[c,d]),D={className:T.tab,onClick:S,onKeyPress:I,style:f,testId:m,tabIndex:u};return l&&(D["aria-disabled"]=!0),D["aria-selected"]=g,D.role="tab",D["aria-controls"]=c,t.createElement(r,e({as:"button"},D,p,{id:`${c}-control-tab`,ref:v}),i)}const y=t.forwardRef(v);function x({className:a,children:i,variant:n="default",testId:l="cf-ui-tab-list",style:c,...d},b){const f={testId:l,className:(({className:e,variant:t})=>({tabList:o(s(h.tabs,""),e,{[s(h.tabDividerHorizontal,"")]:"horizontal-divider"===t,[s(h.tabDividerVertical,"")]:"vertical-divider"===t})}))({className:a,variant:n}).tabList,style:c,...d};return t.createElement(r,e({as:"div"},f,{role:"tablist",ref:b}),i)}const g=t.forwardRef(x),T=u;T.Panel=p,T.Tab=y,T.List=g;export{T as Tabs,y as Tab,p as TabPanel};
//# sourceMappingURL=module.js.map
{
"name": "@contentful/f36-tabs",
"version": "4.0.1-next-v4-8286.2343+9cb5f555",
"version": "4.0.1-next-v4-8377.2344+34888bc6",
"description": "Forma 36: Tabs component",

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

"@babel/runtime": "^7.6.2",
"@contentful/f36-button": "4.0.1-next-v4-8286.2343+9cb5f555",
"@contentful/f36-core": "4.0.1-next-v4-8286.2343+9cb5f555",
"@contentful/f36-tokens": "4.0.1-next-v4-8286.2343+9cb5f555",
"@contentful/f36-button": "4.0.1-next-v4-8377.2344+34888bc6",
"@contentful/f36-core": "4.0.1-next-v4-8377.2344+34888bc6",
"@contentful/f36-tokens": "4.0.1-next-v4-8377.2344+34888bc6",
"emotion": "^10.0.17"

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

},
"gitHead": "9cb5f555d4dde1429f567aff39990db555756e65"
"gitHead": "34888bc67ea8ca6538e86cf9066b3fc28cf70d9f"
}
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