@contentful/f36-tabs
Advanced tools
Comparing version 4.0.1-next-v4-9789.2434 to 4.0.1-next-v4-9898.2438
244
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 |
@@ -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 |
{ | ||
"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" | ||
} |
# @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). |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis 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 riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
License Policy Violation
LicenseThis 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 riskThis 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
QualityThis 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
754
2
6
66990
7