@contentful/f36-tabs - npm Package Compare versions

Comparing version 4.0.1-next-v4-9789.2434 to 4.0.1-next-v4-9898.2438

dist/main.js

@@ -1,2 +0,244 @@
-var e=b(require("@babel/runtime/helpers/extends")),t=require("react"),a=b(t),{useCallback:r}=t,{Button:o}=require("@contentful/f36-button"),{cx:l,css:n}=require("emotion"),i=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:l,defaultTab:n,...i},s){const c={"data-test-id":o,style:l,...i};return a.createElement(m,{defaultTab:n},a.createElement("div",e({},c,{ref:s}),r))}const v=a.forwardRef(y);function h({testId:t="cf-ui-tab-panel",className:r,children:o,id:l,...n},i){const{selectedTab:s}=p(),c={"aria-labelledby":`${l}-control-tab`};return s===l?a.createElement("div",e({},c,n,{id:l,role:"tabpanel","data-test-id":t,className:r,ref:i}),o):null}const g=a.forwardRef(h),x={tabs:{display:"flex"},tab:{borderRadius:0,whiteSpace:"nowrap",color:i.gray500,display:"flex",height:"100%",minHeight:i.spacing2Xl,position:"relative",padding:`0 ${i.spacingM}`,fontFamily:i.fontStackPrimary,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 S({children:t,className:i,isDisabled:s=!1,panelId:c,onSelect:d,style:b,testId:u="cf-ui-tab",...f},m){const{selectedTab:y,setSelectedTab:v}=p(),h=c===y,g=(({className:e,isSelected:t,isDisabled:a})=>({tab:l(n(x.tab,""),e,{[n(x.tabSelected,"")]:t,[n(x.tabDisabled,"")]:a})}))({className:i,isSelected:h,isDisabled:s}),S=r((e=>{d&&!s&&(v(c),d(c,e))}),[s,c,d,v]),T={className:g.tab,onClick:S,style:b,testId:u,tabIndex:h?0:-1};return T["aria-selected"]=h,T.role="tab",T["aria-controls"]=c,a.createElement(o,e({isDisabled:s},T,f,{variant:"transparent",id:`${c}-control-tab`,ref:m}),t)}const T=a.forwardRef(S);function w({className:t,children:r,variant:o="default",testId:i="cf-ui-tab-list",style:d,...b},u){const f=(({className:e,variant:t})=>({tabList:l(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:v,handleArrowsKeyDown:h}=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&&v<e.length){const t=e[v];t.focus({preventScroll:!0}),y(t.getAttribute("aria-controls"))}}}),[v,y]);const g={"data-test-id":i,className:f.tabList,style:d,role:"tablist",onKeyDown:h,...b};return a.createElement("div",e({},g,{ref:s(m,u)}),r)}const D=a.forwardRef(w),N=v;var q,E;N.Panel=g,N.Tab=T,N.List=D,q=module.exports,E=u,Object.keys(E).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(q,e,{enumerable:!0,get:function(){return E[e]}})}));
+var $i6D7q$react = require("react");
+var $i6D7q$contentfulf36button = require("@contentful/f36-button");
+var $i6D7q$emotion = require("emotion");
+var $i6D7q$contentfulf36tokens = require("@contentful/f36-tokens");
+var $i6D7q$contentfulf36core = require("@contentful/f36-core");
+var $i6D7q$contentfulf36utils = require("@contentful/f36-utils");
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+$parcel$export(module.exports, "Tabs", () => $470e8cad6d77736a$export$b2539bed5023c21c);
+$parcel$export(module.exports, "Tab", () => $21a6177df3ca9ba9$export$3e41faf802a29e71);
+$parcel$export(module.exports, "TabPanel", () => $80bef30a0866b17b$export$3d96ec278d3efce4);
+
+
+const $3291376e2918239a$export$cfa7aa87c26e7d1f = /*#__PURE__*/ $parcel$interopDefault($i6D7q$react).createContext({
+    selectedTab: '',
+    setSelectedTab: undefined
+});
+const $3291376e2918239a$export$4e8dfaf499804552 = ({ defaultTab: defaultTab , children: children  })=>{
+    const [selectedTab, setSelectedTab] = $parcel$interopDefault($i6D7q$react).useState(defaultTab);
+    return(/*#__PURE__*/ $parcel$interopDefault($i6D7q$react).createElement($3291376e2918239a$export$cfa7aa87c26e7d1f.Provider, {
+        value: {
+            selectedTab: selectedTab,
+            setSelectedTab: setSelectedTab
+        }
+    }, children));
+};
+function $3291376e2918239a$export$5c3d36c3adf0ba92() {
+    return $parcel$interopDefault($i6D7q$react).useContext($3291376e2918239a$export$cfa7aa87c26e7d1f);
+}
+
+
+function $cf29f0cafdabeb7c$var$_Tabs({ className: className , children: children , testId: testId = 'cf-ui-tabs' , style: style , defaultTab: defaultTab , ...otherProps }, ref) {
+    const elementProps = {
+        'data-test-id': testId,
+        style: style,
+        ...otherProps
+    };
+    return(/*#__PURE__*/ $parcel$interopDefault($i6D7q$react).createElement($3291376e2918239a$export$4e8dfaf499804552, {
+        defaultTab: defaultTab
+    }, /*#__PURE__*/ $parcel$interopDefault($i6D7q$react).createElement("div", {
+        ...elementProps,
+        ref: ref
+    }, children)));
+}
+const $cf29f0cafdabeb7c$export$b2539bed5023c21c = /*#__PURE__*/ $parcel$interopDefault($i6D7q$react).forwardRef($cf29f0cafdabeb7c$var$_Tabs);
+
+
+
+
+function $80bef30a0866b17b$var$_TabPanel({ testId: testId = 'cf-ui-tab-panel' , className: className , children: children , id: id , ...otherProps }, ref) {
+    const { selectedTab: selectedTab  } = $3291376e2918239a$export$5c3d36c3adf0ba92();
+    const elementProps = {
+        'aria-labelledby': `${id}-control-tab`
+    };
+    return selectedTab === id ? /*#__PURE__*/ $parcel$interopDefault($i6D7q$react).createElement("div", {
+        ...elementProps,
+        ...otherProps,
+        id: id,
+        role: "tabpanel",
+        "data-test-id": testId,
+        className: className,
+        ref: ref
+    }, children) : null;
+}
+const $80bef30a0866b17b$export$3d96ec278d3efce4 = /*#__PURE__*/ $parcel$interopDefault($i6D7q$react).forwardRef($80bef30a0866b17b$var$_TabPanel);
+
+
+
+
+
+
+
+const $7c6a6125fbb32321$var$styles = {
+    tabs: {
+        display: 'flex'
+    },
+    tab: {
+        borderRadius: 0,
+        whiteSpace: 'nowrap',
+        color: $parcel$interopDefault($i6D7q$contentfulf36tokens).gray500,
+        display: 'flex',
+        height: '100%',
+        minHeight: $parcel$interopDefault($i6D7q$contentfulf36tokens).spacing2Xl,
+        position: 'relative',
+        padding: `0 ${$parcel$interopDefault($i6D7q$contentfulf36tokens).spacingM}`,
+        fontFamily: $parcel$interopDefault($i6D7q$contentfulf36tokens).fontStackPrimary,
+        border: 'none',
+        '&:before': {
+            content: '""',
+            position: 'absolute',
+            background: $parcel$interopDefault($i6D7q$contentfulf36tokens).colorPrimary,
+            opacity: '0',
+            bottom: '0',
+            left: '0',
+            right: '0',
+            height: '2px'
+        },
+        '&:hover:before, &:hover:focus': {
+            opacity: '0.5'
+        }
+    },
+    tabSelected: {
+        color: $parcel$interopDefault($i6D7q$contentfulf36tokens).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 ${$parcel$interopDefault($i6D7q$contentfulf36tokens).gray200}`
+        }
+    },
+    tabDividerHorizontal: {
+        boxShadow: `inset 0 -2px 0px 0px ${$parcel$interopDefault($i6D7q$contentfulf36tokens).gray200}`
+    }
+};
+const $7c6a6125fbb32321$export$916c8b0fccbb37d2 = ({ className: className , isSelected: isSelected , isDisabled: isDisabled  })=>({
+        tab: $i6D7q$emotion.cx(/*#__PURE__*/ $i6D7q$emotion.css($7c6a6125fbb32321$var$styles.tab), className, {
+            [/*#__PURE__*/ $i6D7q$emotion.css($7c6a6125fbb32321$var$styles.tabSelected)]: isSelected,
+            [/*#__PURE__*/ $i6D7q$emotion.css($7c6a6125fbb32321$var$styles.tabDisabled)]: isDisabled
+        })
+    })
+;
+const $7c6a6125fbb32321$export$dd5afd2190fb792c = ({ className: className , variant: variant  })=>({
+        tabList: $i6D7q$emotion.cx(/*#__PURE__*/ $i6D7q$emotion.css($7c6a6125fbb32321$var$styles.tabs), className, {
+            [/*#__PURE__*/ $i6D7q$emotion.css($7c6a6125fbb32321$var$styles.tabDividerHorizontal)]: variant === 'horizontal-divider',
+            [/*#__PURE__*/ $i6D7q$emotion.css($7c6a6125fbb32321$var$styles.tabDividerVertical)]: variant === 'vertical-divider'
+        })
+    })
+;
+
+
+
+function $21a6177df3ca9ba9$var$_Tab({ children: children , className: className , isDisabled: isDisabled = false , panelId: panelId , onSelect: onSelect , style: style , testId: testId = 'cf-ui-tab' , ...otherProps }, ref) {
+    const { selectedTab: selectedTab , setSelectedTab: setSelectedTab  } = $3291376e2918239a$export$5c3d36c3adf0ba92();
+    const isSelected = panelId === selectedTab;
+    const styles = $7c6a6125fbb32321$export$916c8b0fccbb37d2({
+        className: className,
+        isSelected: isSelected,
+        isDisabled: isDisabled
+    });
+    const handleClick = $i6D7q$react.useCallback((e)=>{
+        if (onSelect && !isDisabled) {
+            setSelectedTab(panelId);
+            onSelect(panelId, e);
+        }
+    }, [
+        isDisabled,
+        panelId,
+        onSelect,
+        setSelectedTab
+    ]);
+    const elementProps = {
+        className: styles.tab,
+        onClick: handleClick,
+        style: style,
+        testId: testId,
+        tabIndex: isSelected ? 0 : -1
+    };
+    elementProps['aria-selected'] = isSelected;
+    elementProps['role'] = 'tab';
+    elementProps['aria-controls'] = panelId;
+    return(/*#__PURE__*/ $parcel$interopDefault($i6D7q$react).createElement($i6D7q$contentfulf36button.Button, {
+        isDisabled: isDisabled,
+        ...elementProps,
+        ...otherProps,
+        variant: "transparent",
+        id: `${panelId}-control-tab`,
+        ref: ref
+    }, children));
+}
+const $21a6177df3ca9ba9$export$3e41faf802a29e71 = /*#__PURE__*/ $parcel$interopDefault($i6D7q$react).forwardRef($21a6177df3ca9ba9$var$_Tab);
+
+
+
+
+
+
+
+const $b6b9b34af6da3acf$var$TABLIST_ITEMS_SELECTOR = '[role="tab"]:not(:disabled)';
+function $b6b9b34af6da3acf$var$_TabList({ className: className , children: children , variant: variant = 'default' , testId: testId = 'cf-ui-tab-list' , style: style , ...otherProps }, ref) {
+    const styles = $7c6a6125fbb32321$export$dd5afd2190fb792c({
+        className: className,
+        variant: variant
+    });
+    const listRef = $parcel$interopDefault($i6D7q$react).useRef(null);
+    const { setSelectedTab: setSelectedTab  } = $3291376e2918239a$export$5c3d36c3adf0ba92();
+    const { focusedIndex: focusedIndex , handleArrowsKeyDown: handleArrowsKeyDown  } = $i6D7q$contentfulf36utils.useArrowKeyNavigation({
+        itemsContainerRef: listRef,
+        itemsSelector: $b6b9b34af6da3acf$var$TABLIST_ITEMS_SELECTOR,
+        keyType: 'horizontal'
+    });
+    $parcel$interopDefault($i6D7q$react).useEffect(()=>{
+        if (listRef.current) {
+            const availableElements = listRef.current.querySelectorAll($b6b9b34af6da3acf$var$TABLIST_ITEMS_SELECTOR);
+            if (availableElements.length > 0 && focusedIndex < availableElements.length) {
+                const focusedElement = availableElements[focusedIndex];
+                focusedElement.focus({
+                    preventScroll: true
+                });
+                setSelectedTab(focusedElement.getAttribute('aria-controls'));
+            }
+        }
+    }, [
+        focusedIndex,
+        setSelectedTab
+    ]);
+    const elementProps = {
+        'data-test-id': testId,
+        className: styles.tabList,
+        style: style,
+        role: 'tablist',
+        onKeyDown: handleArrowsKeyDown,
+        ...otherProps
+    };
+    return(/*#__PURE__*/ $parcel$interopDefault($i6D7q$react).createElement("div", {
+        ...elementProps,
+        ref: $i6D7q$contentfulf36core.mergeRefs(listRef, ref)
+    }, children));
+}
+const $b6b9b34af6da3acf$export$e51a686c67fdaa2d = /*#__PURE__*/ $parcel$interopDefault($i6D7q$react).forwardRef($b6b9b34af6da3acf$var$_TabList);
+
+
+const $470e8cad6d77736a$export$b2539bed5023c21c = $cf29f0cafdabeb7c$export$b2539bed5023c21c;
+$470e8cad6d77736a$export$b2539bed5023c21c.Panel = $80bef30a0866b17b$export$3d96ec278d3efce4;
+$470e8cad6d77736a$export$b2539bed5023c21c.Tab = $21a6177df3ca9ba9$export$3e41faf802a29e71;
+$470e8cad6d77736a$export$b2539bed5023c21c.List = $b6b9b34af6da3acf$export$e51a686c67fdaa2d;
+
+
+
+
+
+
 //# sourceMappingURL=main.js.map

dist/module.js

@@ -1,2 +0,235 @@
-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};
+import $bRQGI$react, {useCallback as $bRQGI$useCallback} from "react";
+import {Button as $bRQGI$Button} from "@contentful/f36-button";
+import {cx as $bRQGI$cx, css as $bRQGI$css} from "emotion";
+import $bRQGI$contentfulf36tokens from "@contentful/f36-tokens";
+import {mergeRefs as $bRQGI$mergeRefs} from "@contentful/f36-core";
+import {useArrowKeyNavigation as $bRQGI$useArrowKeyNavigation} from "@contentful/f36-utils";
+
+
+
+const $a7eb953172310c17$export$cfa7aa87c26e7d1f = /*#__PURE__*/ $bRQGI$react.createContext({
+    selectedTab: '',
+    setSelectedTab: undefined
+});
+const $a7eb953172310c17$export$4e8dfaf499804552 = ({ defaultTab: defaultTab , children: children  })=>{
+    const [selectedTab, setSelectedTab] = $bRQGI$react.useState(defaultTab);
+    return(/*#__PURE__*/ $bRQGI$react.createElement($a7eb953172310c17$export$cfa7aa87c26e7d1f.Provider, {
+        value: {
+            selectedTab: selectedTab,
+            setSelectedTab: setSelectedTab
+        }
+    }, children));
+};
+function $a7eb953172310c17$export$5c3d36c3adf0ba92() {
+    return $bRQGI$react.useContext($a7eb953172310c17$export$cfa7aa87c26e7d1f);
+}
+
+
+function $e945c042934d1a39$var$_Tabs({ className: className , children: children , testId: testId = 'cf-ui-tabs' , style: style , defaultTab: defaultTab , ...otherProps }, ref) {
+    const elementProps = {
+        'data-test-id': testId,
+        style: style,
+        ...otherProps
+    };
+    return(/*#__PURE__*/ $bRQGI$react.createElement($a7eb953172310c17$export$4e8dfaf499804552, {
+        defaultTab: defaultTab
+    }, /*#__PURE__*/ $bRQGI$react.createElement("div", {
+        ...elementProps,
+        ref: ref
+    }, children)));
+}
+const $e945c042934d1a39$export$b2539bed5023c21c = /*#__PURE__*/ $bRQGI$react.forwardRef($e945c042934d1a39$var$_Tabs);
+
+
+
+
+function $d6d8bf4e9289a98d$var$_TabPanel({ testId: testId = 'cf-ui-tab-panel' , className: className , children: children , id: id , ...otherProps }, ref) {
+    const { selectedTab: selectedTab  } = $a7eb953172310c17$export$5c3d36c3adf0ba92();
+    const elementProps = {
+        'aria-labelledby': `${id}-control-tab`
+    };
+    return selectedTab === id ? /*#__PURE__*/ $bRQGI$react.createElement("div", {
+        ...elementProps,
+        ...otherProps,
+        id: id,
+        role: "tabpanel",
+        "data-test-id": testId,
+        className: className,
+        ref: ref
+    }, children) : null;
+}
+const $d6d8bf4e9289a98d$export$3d96ec278d3efce4 = /*#__PURE__*/ $bRQGI$react.forwardRef($d6d8bf4e9289a98d$var$_TabPanel);
+
+
+
+
+
+
+
+const $2d211d11b0c380b0$var$styles = {
+    tabs: {
+        display: 'flex'
+    },
+    tab: {
+        borderRadius: 0,
+        whiteSpace: 'nowrap',
+        color: $bRQGI$contentfulf36tokens.gray500,
+        display: 'flex',
+        height: '100%',
+        minHeight: $bRQGI$contentfulf36tokens.spacing2Xl,
+        position: 'relative',
+        padding: `0 ${$bRQGI$contentfulf36tokens.spacingM}`,
+        fontFamily: $bRQGI$contentfulf36tokens.fontStackPrimary,
+        border: 'none',
+        '&:before': {
+            content: '""',
+            position: 'absolute',
+            background: $bRQGI$contentfulf36tokens.colorPrimary,
+            opacity: '0',
+            bottom: '0',
+            left: '0',
+            right: '0',
+            height: '2px'
+        },
+        '&:hover:before, &:hover:focus': {
+            opacity: '0.5'
+        }
+    },
+    tabSelected: {
+        color: $bRQGI$contentfulf36tokens.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 ${$bRQGI$contentfulf36tokens.gray200}`
+        }
+    },
+    tabDividerHorizontal: {
+        boxShadow: `inset 0 -2px 0px 0px ${$bRQGI$contentfulf36tokens.gray200}`
+    }
+};
+const $2d211d11b0c380b0$export$916c8b0fccbb37d2 = ({ className: className , isSelected: isSelected , isDisabled: isDisabled  })=>({
+        tab: $bRQGI$cx(/*#__PURE__*/ $bRQGI$css($2d211d11b0c380b0$var$styles.tab), className, {
+            [/*#__PURE__*/ $bRQGI$css($2d211d11b0c380b0$var$styles.tabSelected)]: isSelected,
+            [/*#__PURE__*/ $bRQGI$css($2d211d11b0c380b0$var$styles.tabDisabled)]: isDisabled
+        })
+    })
+;
+const $2d211d11b0c380b0$export$dd5afd2190fb792c = ({ className: className , variant: variant  })=>({
+        tabList: $bRQGI$cx(/*#__PURE__*/ $bRQGI$css($2d211d11b0c380b0$var$styles.tabs), className, {
+            [/*#__PURE__*/ $bRQGI$css($2d211d11b0c380b0$var$styles.tabDividerHorizontal)]: variant === 'horizontal-divider',
+            [/*#__PURE__*/ $bRQGI$css($2d211d11b0c380b0$var$styles.tabDividerVertical)]: variant === 'vertical-divider'
+        })
+    })
+;
+
+
+
+function $195464ecd03ec7f8$var$_Tab({ children: children , className: className , isDisabled: isDisabled = false , panelId: panelId , onSelect: onSelect , style: style , testId: testId = 'cf-ui-tab' , ...otherProps }, ref) {
+    const { selectedTab: selectedTab , setSelectedTab: setSelectedTab  } = $a7eb953172310c17$export$5c3d36c3adf0ba92();
+    const isSelected = panelId === selectedTab;
+    const styles = $2d211d11b0c380b0$export$916c8b0fccbb37d2({
+        className: className,
+        isSelected: isSelected,
+        isDisabled: isDisabled
+    });
+    const handleClick = $bRQGI$useCallback((e)=>{
+        if (onSelect && !isDisabled) {
+            setSelectedTab(panelId);
+            onSelect(panelId, e);
+        }
+    }, [
+        isDisabled,
+        panelId,
+        onSelect,
+        setSelectedTab
+    ]);
+    const elementProps = {
+        className: styles.tab,
+        onClick: handleClick,
+        style: style,
+        testId: testId,
+        tabIndex: isSelected ? 0 : -1
+    };
+    elementProps['aria-selected'] = isSelected;
+    elementProps['role'] = 'tab';
+    elementProps['aria-controls'] = panelId;
+    return(/*#__PURE__*/ $bRQGI$react.createElement($bRQGI$Button, {
+        isDisabled: isDisabled,
+        ...elementProps,
+        ...otherProps,
+        variant: "transparent",
+        id: `${panelId}-control-tab`,
+        ref: ref
+    }, children));
+}
+const $195464ecd03ec7f8$export$3e41faf802a29e71 = /*#__PURE__*/ $bRQGI$react.forwardRef($195464ecd03ec7f8$var$_Tab);
+
+
+
+
+
+
+
+const $be9278d4857608a1$var$TABLIST_ITEMS_SELECTOR = '[role="tab"]:not(:disabled)';
+function $be9278d4857608a1$var$_TabList({ className: className , children: children , variant: variant = 'default' , testId: testId = 'cf-ui-tab-list' , style: style , ...otherProps }, ref) {
+    const styles = $2d211d11b0c380b0$export$dd5afd2190fb792c({
+        className: className,
+        variant: variant
+    });
+    const listRef = $bRQGI$react.useRef(null);
+    const { setSelectedTab: setSelectedTab  } = $a7eb953172310c17$export$5c3d36c3adf0ba92();
+    const { focusedIndex: focusedIndex , handleArrowsKeyDown: handleArrowsKeyDown  } = $bRQGI$useArrowKeyNavigation({
+        itemsContainerRef: listRef,
+        itemsSelector: $be9278d4857608a1$var$TABLIST_ITEMS_SELECTOR,
+        keyType: 'horizontal'
+    });
+    $bRQGI$react.useEffect(()=>{
+        if (listRef.current) {
+            const availableElements = listRef.current.querySelectorAll($be9278d4857608a1$var$TABLIST_ITEMS_SELECTOR);
+            if (availableElements.length > 0 && focusedIndex < availableElements.length) {
+                const focusedElement = availableElements[focusedIndex];
+                focusedElement.focus({
+                    preventScroll: true
+                });
+                setSelectedTab(focusedElement.getAttribute('aria-controls'));
+            }
+        }
+    }, [
+        focusedIndex,
+        setSelectedTab
+    ]);
+    const elementProps = {
+        'data-test-id': testId,
+        className: styles.tabList,
+        style: style,
+        role: 'tablist',
+        onKeyDown: handleArrowsKeyDown,
+        ...otherProps
+    };
+    return(/*#__PURE__*/ $bRQGI$react.createElement("div", {
+        ...elementProps,
+        ref: $bRQGI$mergeRefs(listRef, ref)
+    }, children));
+}
+const $be9278d4857608a1$export$e51a686c67fdaa2d = /*#__PURE__*/ $bRQGI$react.forwardRef($be9278d4857608a1$var$_TabList);
+
+
+const $d1cc35bceec6a2de$export$b2539bed5023c21c = $e945c042934d1a39$export$b2539bed5023c21c;
+$d1cc35bceec6a2de$export$b2539bed5023c21c.Panel = $d6d8bf4e9289a98d$export$3d96ec278d3efce4;
+$d1cc35bceec6a2de$export$b2539bed5023c21c.Tab = $195464ecd03ec7f8$export$3e41faf802a29e71;
+$d1cc35bceec6a2de$export$b2539bed5023c21c.List = $be9278d4857608a1$export$e51a686c67fdaa2d;
+
+
+
+
+
+
+export {$d1cc35bceec6a2de$export$b2539bed5023c21c as Tabs, $195464ecd03ec7f8$export$3e41faf802a29e71 as Tab, $d6d8bf4e9289a98d$export$3d96ec278d3efce4 as TabPanel};
 //# sourceMappingURL=module.js.map

package.json

 {
   "name": "@contentful/f36-tabs",
-  "version": "4.0.1-next-v4-9789.2434+754dee05",
+  "version": "4.0.1-next-v4-9898.2438+c14d4c99",
   "description": "Forma 36: Tabs component",
   "scripts": {
-    "build": "parcel build index.ts"
+    "build": "parcel build"
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@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",
+    "@contentful/f36-button": "4.0.1-next-v4-9898.2438+c14d4c99",
+    "@contentful/f36-core": "4.0.1-next-v4-9898.2438+c14d4c99",
+    "@contentful/f36-tokens": "4.0.1-next-v4-9898.2438+c14d4c99",
+    "@contentful/f36-utils": "4.0.1-next-v4-9898.2438+c14d4c99",
     "emotion": "^10.0.17"
@@ -36,3 +37,3 @@ },
   },
-  "gitHead": "754dee05f9e188f1492231120e4449a9e4f1992d"
+  "gitHead": "c14d4c99c0a87c8905dbe90d5f1dc38dd12d1008"
 }

README.md

 # @contentful/f36-tabs
 
 This package is part of the pre-release. This means it is unsupported and subject to breaking changes without warning.
-Please use official, supported version of the library [forma-36](https://github.com/contentful/forma-36/tree/master/packages/forma-36-react-components), [NPM](https://www.npmjs.com/package/@contentful/forma-36-react-components)
+
+Please use official, supported version of the library [forma-36](https://github.com/contentful/forma-36/tree/master/packages/forma-36-react-components), [NPM](https://www.npmjs.com/package/@contentful/forma-36-react-components).

New alerts

License Policy Violation

License

This 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 risk

This 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

License

This 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 risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Lines of code

754

increased by101.07%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

6

increased by20%

Worsened metrics

Total package byte prevSize

66990

decreased by-22.14%

Dependency count

7

increased by16.67%

Dependency changes

• + Added@contentful/f36-utils@4.0.1-next-v4-9898.2438+c14d4c99

• Updated@contentful/f36-button@4.0.1-next-v4-9898.2438+c14d4c99

• Updated@contentful/f36-core@4.0.1-next-v4-9898.2438+c14d4c99

• Updated@contentful/f36-tokens@4.0.1-next-v4-9898.2438+c14d4c99