@contentful/f36-tabs
Advanced tools
Comparing version 4.0.1-next-v4-8206.2342 to 4.0.1-next-v4-8286.2343
@@ -1,2 +0,2 @@ | ||
var e=c(require("@babel/runtime/helpers/extends")),t=require("react"),a=c(t),{useCallback:r}=t,{Box:i}=require("@contentful/f36-core"),{css:o,cx:n}=require("emotion"),s=c(require("@contentful/f36-tokens"));function l(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={};l(d,"Tabs",(()=>y)),l(d,"Tab",(()=>v)),l(d,"TabPanel",(()=>m));const b={tabs:{display:"flex"},tab:{boxSizing:"border-box",whiteSpace:"nowrap",alignItems:"center",color:s.gray500,display:"flex",height:"100%",minHeight:s.spacing2Xl,position:"relative",cursor:"pointer",padding:`0 ${s.spacingM}`,fontSize:s.fontSizeM,fontFamily:s.fontStackPrimary,fontWeight:s.fontWeightMedium,outline:"none",textDecoration:"none","&:before":{content:'""',position:"absolute",background:s.colorPrimary,opacity:"0",bottom:"0",left:"0",right:"0",height:"2px"},"&:hover:before, &:hover:focus, &:last-child":{opacity:"0.5"}},tabSelected:{color:s.colorPrimary,"&:before, &:hover:before, &:hover:focus":{opacity:"1"}},tabDisabled:{opacity:"0.5",cursor:"not-allowed","&:before, &:hover:before, &:hover:focus":{opacity:"0"}},tabDividerVertical:{"& > *:not(:first-child)":{boxShadow:`inset 1px 0 0px 0px ${s.gray200}`}},tabDividerHorizontal:{boxShadow:`inset 0 -2px 0px 0px ${s.gray200}`}};function f({className:t,children:r,variant:s="default",testId:l="cf-ui-tabs",role:c="tablist",style:d,...f},u){const p={testId:l,className:(({className:e,variant:t})=>({tabs:n(o(b.tabs,""),e,{[o(b.tabDividerHorizontal,"")]:"horizontal-divider"===t,[o(b.tabDividerVertical,"")]:"vertical-divider"===t})}))({className:t,variant:s}).tabs,style:d,...f};return"navigation"===c?a.createElement(i,e({as:"nav"},p,{role:"navigation",ref:u}),r):a.createElement(i,e({as:"div"},p,{role:"tablist",ref:u}),r)}const u=a.forwardRef(f);function p({testId:t="cf-ui-tab-panel",className:r,children:o,id:n,...s},l){return a.createElement(i,e({as:"div"},s,{id:n,role:"tabpanel",testId:t,className:r,ref:l}),o)}const m=a.forwardRef(p);function h({children:t,className:s,isDisabled:l=!1,href:c,id:d,onSelect:f,isSelected:u=!1,style:p,tabIndex:m=0,testId:h="cf-ui-tab",...v},y){const g=(({className:e,isSelected:t,isDisabled:a})=>({tab:n(o(b.tab,""),e,{[o(b.tabSelected,"")]:t,[o(b.tabDisabled,"")]:a})}))({className:s,isSelected:u,isDisabled:l}),x=r((e=>{f&&!l&&f(d,e)}),[l,d,f]),S=r((e=>{f&&"Enter"===e.key&&(f(d,e),e.preventDefault())}),[d,f]),D={className:g.tab,onClick:x,onKeyPress:S,style:p,testId:h,tabIndex:m};return l&&(D["aria-disabled"]=!0),c?(D.href=c,u&&(D["aria-current"]="page"),a.createElement(i,e({as:"a"},D,v,{ref:y}),t)):(D["aria-selected"]=u,D.role="tab",D["aria-controls"]=d,a.createElement(i,e({as:"div"},D,v,{ref:y}),t))}const v=a.forwardRef(h),y=u;var g,x;y.Panel=m,y.Tab=v,g=module.exports,x=d,Object.keys(x).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(g,e,{enumerable:!0,get:function(){return x[e]}})})); | ||
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]}})})); | ||
//# sourceMappingURL=main.js.map |
@@ -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 i}from"emotion";import s 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",(()=>h)),n(l,"Tab",(()=>u)),n(l,"TabPanel",(()=>m));const c={tabs:{display:"flex"},tab:{boxSizing:"border-box",whiteSpace:"nowrap",alignItems:"center",color:s.gray500,display:"flex",height:"100%",minHeight:s.spacing2Xl,position:"relative",cursor:"pointer",padding:`0 ${s.spacingM}`,fontSize:s.fontSizeM,fontFamily:s.fontStackPrimary,fontWeight:s.fontWeightMedium,outline:"none",textDecoration:"none","&:before":{content:'""',position:"absolute",background:s.colorPrimary,opacity:"0",bottom:"0",left:"0",right:"0",height:"2px"},"&:hover:before, &:hover:focus, &:last-child":{opacity:"0.5"}},tabSelected:{color:s.colorPrimary,"&:before, &:hover:before, &:hover:focus":{opacity:"1"}},tabDisabled:{opacity:"0.5",cursor:"not-allowed","&:before, &:hover:before, &:hover:focus":{opacity:"0"}},tabDividerVertical:{"& > *:not(:first-child)":{boxShadow:`inset 1px 0 0px 0px ${s.gray200}`}},tabDividerHorizontal:{boxShadow:`inset 0 -2px 0px 0px ${s.gray200}`}};function b({className:a,children:s,variant:n="default",testId:l="cf-ui-tabs",role:b="tablist",style:d,...f},m){const p={testId:l,className:(({className:e,variant:t})=>({tabs:o(i(c.tabs,""),e,{[i(c.tabDividerHorizontal,"")]:"horizontal-divider"===t,[i(c.tabDividerVertical,"")]:"vertical-divider"===t})}))({className:a,variant:n}).tabs,style:d,...f};return"navigation"===b?t.createElement(r,e({as:"nav"},p,{role:"navigation",ref:m}),s):t.createElement(r,e({as:"div"},p,{role:"tablist",ref:m}),s)}const d=t.forwardRef(b);function f({testId:a="cf-ui-tab-panel",className:o,children:i,id:s,...n},l){return t.createElement(r,e({as:"div"},n,{id:s,role:"tabpanel",testId:a,className:o,ref:l}),i)}const m=t.forwardRef(f);function p({children:s,className:n,isDisabled:l=!1,href:b,id:d,onSelect:f,isSelected:m=!1,style:p,tabIndex:u=0,testId:h="cf-ui-tab",...v},y){const g=(({className:e,isSelected:t,isDisabled:a})=>({tab:o(i(c.tab,""),e,{[i(c.tabSelected,"")]:t,[i(c.tabDisabled,"")]:a})}))({className:n,isSelected:m,isDisabled:l}),x=a((e=>{f&&!l&&f(d,e)}),[l,d,f]),S=a((e=>{f&&"Enter"===e.key&&(f(d,e),e.preventDefault())}),[d,f]),D={className:g.tab,onClick:x,onKeyPress:S,style:p,testId:h,tabIndex:u};return l&&(D["aria-disabled"]=!0),b?(D.href=b,m&&(D["aria-current"]="page"),t.createElement(r,e({as:"a"},D,v,{ref:y}),s)):(D["aria-selected"]=m,D.role="tab",D["aria-controls"]=d,t.createElement(r,e({as:"div"},D,v,{ref:y}),s))}const u=t.forwardRef(p),h=d;h.Panel=m,h.Tab=u;export{h as Tabs,u as Tab,m 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{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}; | ||
//# sourceMappingURL=module.js.map |
import React from "react"; | ||
import { CommonProps } from "@contentful/f36-core"; | ||
export interface TabsProps extends CommonProps { | ||
variant?: 'default' | 'horizontal-divider' | 'vertical-divider'; | ||
role?: 'navigation' | 'tablist'; | ||
children?: React.ReactNode; | ||
/** | ||
* default active Tab | ||
*/ | ||
defaultTab: string; | ||
} | ||
@@ -15,7 +17,10 @@ declare const _Tabs1: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>; | ||
export interface TabProps extends CommonProps { | ||
id: string; | ||
/** | ||
* Takes id of the TabPanel it controls | ||
*/ | ||
panelId: string; | ||
/** | ||
* onSelect is run when the Tab is selected | ||
*/ | ||
onSelect?: (id: string, e: React.SyntheticEvent) => void; | ||
isSelected?: boolean; | ||
href?: string; | ||
target?: string; | ||
isDisabled?: boolean; | ||
@@ -25,6 +30,15 @@ tabIndex?: number; | ||
} | ||
export const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLDivElement>>; | ||
export const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement>>; | ||
interface TabListProps extends CommonProps { | ||
/** | ||
* visual variant of TabList | ||
*/ | ||
variant?: 'default' | 'horizontal-divider' | 'vertical-divider'; | ||
children?: React.ReactNode; | ||
} | ||
declare const TabList: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>; | ||
type CompoundTabs = typeof _Tabs1 & { | ||
Panel: typeof TabPanel; | ||
Tab: typeof Tab; | ||
List: typeof TabList; | ||
}; | ||
@@ -31,0 +45,0 @@ export const Tabs: CompoundTabs; |
{ | ||
"name": "@contentful/f36-tabs", | ||
"version": "4.0.1-next-v4-8206.2342+e2bcb083", | ||
"version": "4.0.1-next-v4-8286.2343+9cb5f555", | ||
"description": "Forma 36: Tabs component", | ||
@@ -10,5 +10,5 @@ "scripts": { | ||
"@babel/runtime": "^7.6.2", | ||
"@contentful/f36-button": "4.0.1-next-v4-8206.2342+e2bcb083", | ||
"@contentful/f36-core": "4.0.1-next-v4-8206.2342+e2bcb083", | ||
"@contentful/f36-tokens": "4.0.1-next-v4-8206.2342+e2bcb083", | ||
"@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", | ||
"emotion": "^10.0.17" | ||
@@ -37,3 +37,3 @@ }, | ||
}, | ||
"gitHead": "e2bcb083a02466b2403ecf87303a5a3fb4df0ac6" | ||
"gitHead": "9cb5f555d4dde1429f567aff39990db555756e65" | ||
} |
@@ -25,2 +25,4 @@ import { css, cx } from 'emotion'; | ||
textDecoration: 'none', | ||
backgroundColor: 'transparent', | ||
border: 'none', | ||
'&:before': { | ||
@@ -36,3 +38,3 @@ content: '""', | ||
}, | ||
'&:hover:before, &:hover:focus, &:last-child': { | ||
'&:hover:before, &:hover:focus': { | ||
opacity: '0.5', | ||
@@ -50,5 +52,2 @@ }, | ||
cursor: 'not-allowed', | ||
'&:before, &:hover:before, &:hover:focus': { | ||
opacity: '0', | ||
}, | ||
} as CSSObject, | ||
@@ -73,3 +72,3 @@ tabDividerVertical: { | ||
export const getTabsStyles = ({ className, variant }) => ({ | ||
tabs: cx(css(styles.tabs), className, { | ||
tabList: cx(css(styles.tabs), className, { | ||
[css(styles.tabDividerHorizontal)]: variant === 'horizontal-divider', | ||
@@ -76,0 +75,0 @@ [css(styles.tabDividerVertical)]: variant === 'vertical-divider', |
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
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
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
86870
18
369