@contentful/f36-tabs - npm Package Compare versions

Comparing version 4.0.1-next-v4-8739.2354 to 4.0.1-next-v4-8753.2355

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

dist/module.js

		@@ -1,2 +0,2 @@
		import e from"@babel/runtime/helpers/esm/extends";import t,{useCallback as a}from"react";import{Button as o}from"@contentful/f36-button";import{css as r,cx as n}from"emotion";import i from"@contentful/f36-tokens";import{mergeRefs as s}from"@contentful/f36-core";import{useArrowKeyNavigation as l}from"@contentful/f36-utils";function c(e,t,a,o){Object.defineProperty(e,t,{get:a,set:o,enumerable:!0,configurable:!0})}var d={};c(d,"Tabs",(()=>w)),c(d,"Tab",(()=>x)),c(d,"TabPanel",(()=>y));const b=t.createContext({selectedTab:"",setSelectedTab:void 0}),f=({defaultTab:e,children:a})=>{const[o,r]=t.useState(e);return t.createElement(b.Provider,{value:{selectedTab:o,setSelectedTab:r}},a)};function u(){return t.useContext(b)}function m({className:a,children:o,testId:r="cf-ui-tabs",style:n,defaultTab:i,...s},l){const c={testId:r,style:n,...s};return t.createElement(f,{defaultTab:i},t.createElement("div",e({},c,{ref:l}),o))}const p=t.forwardRef(m);function h({testId:a="cf-ui-tab-panel",className:o,children:r,id:n,...i},s){const{selectedTab:l}=u(),c={"aria-labelledby":`${n}-control-tab`};return l===n?t.createElement("div",e({},c,i,{id:n,role:"tabpanel","data-test-id":a,className:o,ref:s}),r):null}const y=t.forwardRef(h),v={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 g({children:i,className:s,isDisabled:l=!1,panelId:c,onSelect:d,style:b,testId:f="cf-ui-tab",...m},p){const{selectedTab:h,setSelectedTab:y}=u(),g=c===h,x=(({className:e,isSelected:t,isDisabled:a})=>({tab:n(r(v.tab,""),e,{[r(v.tabSelected,"")]:t,[r(v.tabDisabled,"")]:a})}))({className:s,isSelected:g,isDisabled:l}),S=a((e=>{d&&!l&&(y(c),d(c,e))}),[l,c,d,y]),T={className:x.tab,onClick:S,style:b,testId:f,tabIndex:g?0:-1};return T["aria-selected"]=g,T.role="tab",T["aria-controls"]=c,t.createElement(o,e({isDisabled:l},T,m,{id:`${c}-control-tab`,ref:p}),i)}const x=t.forwardRef(g);function S({className:a,children:o,variant:i="default",testId:c="cf-ui-tab-list",style:d,...b},f){const m=(({className:e,variant:t})=>({tabList:n(r(v.tabs,""),e,{[r(v.tabDividerHorizontal,"")]:"horizontal-divider"===t,[r(v.tabDividerVertical,"")]:"vertical-divider"===t})}))({className:a,variant:i}),p=t.useRef(null),{setSelectedTab:h}=u(),{focusedIndex:y,handleArrowsKeyDown:g}=l({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&&y<e.length){const t=e[y];t.focus({preventScroll:!0}),h(t.getAttribute("aria-controls"))}}}),[y,h]);const x={testId:c,className:m.tabList,style:d,role:"tablist",onKeyDown:g,...b};return t.createElement("div",e({},x,{ref:s(p,f)}),o)}const T=t.forwardRef(S),w=p;w.Panel=y,w.Tab=x,w.List=T;export{w as Tabs,x as Tab,y as TabPanel};
		import e from"@babel/runtime/helpers/esm/extends";import t,{useCallback as a}from"react";import{Button as o}from"@contentful/f36-button";import{cx as r,css as n}from"emotion";import i from"@contentful/f36-tokens";import{mergeRefs as s}from"@contentful/f36-core";import{useArrowKeyNavigation as l}from"@contentful/f36-utils";function c(e,t,a,o){Object.defineProperty(e,t,{get:a,set:o,enumerable:!0,configurable:!0})}var d={};c(d,"Tabs",(()=>w)),c(d,"Tab",(()=>x)),c(d,"TabPanel",(()=>y));const b=t.createContext({selectedTab:"",setSelectedTab:void 0}),f=({defaultTab:e,children:a})=>{const[o,r]=t.useState(e);return t.createElement(b.Provider,{value:{selectedTab:o,setSelectedTab:r}},a)};function u(){return t.useContext(b)}function m({className:a,children:o,testId:r="cf-ui-tabs",style:n,defaultTab:i,...s},l){const c={testId:r,style:n,...s};return t.createElement(f,{defaultTab:i},t.createElement("div",e({},c,{ref:l}),o))}const p=t.forwardRef(m);function h({testId:a="cf-ui-tab-panel",className:o,children:r,id:n,...i},s){const{selectedTab:l}=u(),c={"aria-labelledby":`${n}-control-tab`};return l===n?t.createElement("div",e({},c,i,{id:n,role:"tabpanel","data-test-id":a,className:o,ref:s}),r):null}const y=t.forwardRef(h),v={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 g({children:i,className:s,isDisabled:l=!1,panelId:c,onSelect:d,style:b,testId:f="cf-ui-tab",...m},p){const{selectedTab:h,setSelectedTab:y}=u(),g=c===h,x=(({className:e,isSelected:t,isDisabled:a})=>({tab:r(n(v.tab,""),e,{[n(v.tabSelected,"")]:t,[n(v.tabDisabled,"")]:a})}))({className:s,isSelected:g,isDisabled:l}),S=a((e=>{d&&!l&&(y(c),d(c,e))}),[l,c,d,y]),T={className:x.tab,onClick:S,style:b,testId:f,tabIndex:g?0:-1};return T["aria-selected"]=g,T.role="tab",T["aria-controls"]=c,t.createElement(o,e({isDisabled:l},T,m,{id:`${c}-control-tab`,ref:p}),i)}const x=t.forwardRef(g);function S({className:a,children:o,variant:i="default",testId:c="cf-ui-tab-list",style:d,...b},f){const m=(({className:e,variant:t})=>({tabList:r(n(v.tabs,""),e,{[n(v.tabDividerHorizontal,"")]:"horizontal-divider"===t,[n(v.tabDividerVertical,"")]:"vertical-divider"===t})}))({className:a,variant:i}),p=t.useRef(null),{setSelectedTab:h}=u(),{focusedIndex:y,handleArrowsKeyDown:g}=l({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&&y<e.length){const t=e[y];t.focus({preventScroll:!0}),h(t.getAttribute("aria-controls"))}}}),[y,h]);const x={testId:c,className:m.tabList,style:d,role:"tablist",onKeyDown:g,...b};return t.createElement("div",e({},x,{ref:s(p,f)}),o)}const T=t.forwardRef(S),w=p;w.Panel=y,w.Tab=x,w.List=T;export{w as Tabs,x as Tab,y as TabPanel};
		//# sourceMappingURL=module.js.map

package.json

		{
		"name": "@contentful/f36-tabs",
		"version": "4.0.1-next-v4-8739.2354+3a30cdc0",
		"version": "4.0.1-next-v4-8753.2355+1ad78234",
		"description": "Forma 36: Tabs component",
		@@ -10,5 +10,5 @@ "scripts": {
		"@babel/runtime": "^7.6.2",
		"@contentful/f36-button": "4.0.1-next-v4-8739.2354+3a30cdc0",
		"@contentful/f36-core": "4.0.1-next-v4-8739.2354+3a30cdc0",
		"@contentful/f36-tokens": "4.0.1-next-v4-8739.2354+3a30cdc0",
		"@contentful/f36-button": "4.0.1-next-v4-8753.2355+1ad78234",
		"@contentful/f36-core": "4.0.1-next-v4-8753.2355+1ad78234",
		"@contentful/f36-tokens": "4.0.1-next-v4-8753.2355+1ad78234",
		"emotion": "^10.0.17"
		@@ -37,3 +37,3 @@ },
		},
		"gitHead": "3a30cdc0deaec8ad8c2c5f443a8bc7a0103c1396"
		"gitHead": "1ad782344d0565027c87f3410e020d825f8ec134"
		}

@contentful/f36-tabs - npm Package Compare versions

New alerts

Fixed alerts

Dependency changes