@contentful/f36-tabs - npm Package Compare versions

Comparing version 4.0.1-next-v4-8206.2342 to 4.0.1-next-v4-8286.2343

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: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

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

dist/types.d.ts

 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;

package.json

 {
   "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"
 }

src/Tabs.styles.ts

@@ -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',

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

Improved metrics

Total package byte prevSize

86870

increased by8.63%

Number of package files

18

increased by12.5%

Lines of code

369

increased by19.81%

Dependency changes

• Updated@contentful/f36-button@4.0.1-next-v4-8286.2343+9cb5f555

• Updated@contentful/f36-core@4.0.1-next-v4-8286.2343+9cb5f555

• Updated@contentful/f36-tokens@4.0.1-next-v4-8286.2343+9cb5f555