@contentful/f36-tabs - npm Package Compare versions

Comparing version 4.0.1-next-v4-8377.2344 to 4.0.1-next-v4-8455.2348

dist/main.js

		@@ -1,2 +0,2 @@
		var e=c(require("@babel/runtime/helpers/extends")),t=require("react"),a=c(t),{useCallback:r}=t,{Box:o}=require("@contentful/f36-core"),{cx:n,css:i}=require("emotion"),l=c(require("@contentful/f36-tokens"));function s(e,t,a,r){Object.defineProperty(e,t,{get:a,set:r,enumerable:!0,configurable:!0})}function c(e){return e&&e.__esModule?e.default:e}var d={};s(d,"Tabs",(()=>I)),s(d,"Tab",(()=>g)),s(d,"TabPanel",(()=>y));const b=a.createContext({selectedTab:"",setSelectedTab:void 0}),u=({defaultTab:e,children:t})=>{const[r,o]=a.useState(e);return a.createElement(b.Provider,{value:{selectedTab:r,setSelectedTab:o}},t)};function f(){return a.useContext(b)}function m({className:t,children:r,testId:n="cf-ui-tabs",style:i,defaultTab:l,...s},c){const d={testId:n,style:i,...s};return a.createElement(u,{defaultTab:l},a.createElement(o,e({as:"div"},d,{ref:c}),r))}const p=a.forwardRef(m);function v({testId:t="cf-ui-tab-panel",className:r,children:n,id:i,...l},s){const{selectedTab:c}=f(),d={"aria-labelledby":`${i}-control-tab`};return c===i?a.createElement(o,e({as:"div"},d,l,{id:i,role:"tabpanel",testId:t,className:r,ref:s}),n):null}const y=a.forwardRef(v),h={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 x({children:t,className:l,isDisabled:s=!1,panelId:c,onSelect:d,style:b,tabIndex:u=0,testId:m="cf-ui-tab",...p},v){const{selectedTab:y,setSelectedTab:x}=f(),g=c===y,S=(({className:e,isSelected:t,isDisabled:a})=>({tab:n(i(h.tab,""),e,{[i(h.tabSelected,"")]:t,[i(h.tabDisabled,"")]:a})}))({className:l,isSelected:g,isDisabled:s}),T=r((e=>{d&&!s&&(x(c),d(c,e))}),[s,c,d]),I=r((e=>{d&&"Enter"===e.key&&(x(c),d(c,e),e.preventDefault())}),[c,d]),D={className:S.tab,onClick:T,onKeyPress:I,style:b,testId:m,tabIndex:u};return s&&(D["aria-disabled"]=!0),D["aria-selected"]=g,D.role="tab",D["aria-controls"]=c,a.createElement(o,e({as:"button"},D,p,{id:`${c}-control-tab`,ref:v}),t)}const g=a.forwardRef(x);function S({className:t,children:r,variant:l="default",testId:s="cf-ui-tab-list",style:c,...d},b){const u={testId:s,className:(({className:e,variant:t})=>({tabList:n(i(h.tabs,""),e,{[i(h.tabDividerHorizontal,"")]:"horizontal-divider"===t,[i(h.tabDividerVertical,"")]:"vertical-divider"===t})}))({className:t,variant:l}).tabList,style:c,...d};return a.createElement(o,e({as:"div"},u,{role:"tablist",ref:b}),r)}const T=a.forwardRef(S),I=p;var D,N;I.Panel=y,I.Tab=g,I.List=T,D=module.exports,N=d,Object.keys(N).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(D,e,{enumerable:!0,get:function(){return N[e]}})}));
		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]}})}));
		//# 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{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};
		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

dist/types.d.ts

		@@ -18,3 +18,3 @@ import React from "react";
		/**
		* Takes id of the TabPanel it controls
		* Takes id of the TabPanel it panelId
		*/
		@@ -27,3 +27,2 @@ panelId: string;
		isDisabled?: boolean;
		tabIndex?: number;
		children: React.ReactNode;
		@@ -30,0 +29,0 @@ }

package.json

		{
		"name": "@contentful/f36-tabs",
		"version": "4.0.1-next-v4-8377.2344+34888bc6",
		"version": "4.0.1-next-v4-8455.2348+839d9049",
		"description": "Forma 36: Tabs component",
		@@ -10,5 +10,5 @@ "scripts": {
		"@babel/runtime": "^7.6.2",
		"@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",
		"@contentful/f36-button": "4.0.1-next-v4-8455.2348+839d9049",
		"@contentful/f36-core": "4.0.1-next-v4-8455.2348+839d9049",
		"@contentful/f36-tokens": "4.0.1-next-v4-8455.2348+839d9049",
		"emotion": "^10.0.17"
		@@ -37,3 +37,3 @@ },
		},
		"gitHead": "34888bc67ea8ca6538e86cf9066b3fc28cf70d9f"
		"gitHead": "839d9049e81b4e3816af95725a488d8848464300"
		}

dist/main.js.map