@artsy/palette 19.1.2 → 19.1.3

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# v19.1.3 (Mon Mar 21 2022)
+
+#### 🐛  Bug Fix
+
+- fix(tabs): cached tabs rendering [#1144](https://github.com/artsy/palette/pull/1144) ([@dzucconi](https://github.com/dzucconi))
+- fix(tabs): improves tabs rendering (still problematic) ([@dzucconi](https://github.com/dzucconi))
+- fix(join): prefers the provided child key; fallsback to index if missing ([@dzucconi](https://github.com/dzucconi))
+- fix(basetabs): adds display name ([@dzucconi](https://github.com/dzucconi))
+
+#### Authors: 1
+
+- Damon ([@dzucconi](https://github.com/dzucconi))
+
+---
+
 # v19.1.2 (Fri Mar 18 2022)
 
 #### 🐛  Bug Fix

package/dist/elements/BaseTabs/BaseTabs.js

@@ -63,4 +63,5 @@ var BaseTabs = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, forwardedRef)
   })));
 });
 exports.BaseTabs = BaseTabs;
+BaseTabs.displayName = "BaseTabs";
 //# sourceMappingURL=BaseTabs.js.map

package/dist/elements/BaseTabs/BaseTabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/BaseTabs/BaseTabs.tsx"],"names":["BaseTabs","forwardedRef","fill","defaultSeparator","separator","children","rest","v2","v3","cells","map","child","i","undefined"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAaA;AACO,IAAMA,QAEZ,gBAAG,uBACF,gBAA2DC,YAA3D,EAA4E;AAAA,MAAzEC,IAAyE,QAAzEA,IAAyE;AAAA,MAAxDC,gBAAwD,QAAnEC,SAAmE;AAAA,MAAtCC,QAAsC,QAAtCA,QAAsC;AAAA,MAAzBC,IAAyB;;AAC1E,MAAMF,SAAS,GAAG,2BAAe;AAC/BG,IAAAA,EAAE,EAAEJ,gBAAF,aAAEA,gBAAF,cAAEA,gBAAF,gBAAsB,6BAAC,QAAD;AAAK,MAAA,EAAE,EAAE;AAAT,MADO;AAE/BK,IAAAA,EAAE,EAAEL;AAF2B,GAAf,CAAlB;AAKA,MAAMM,KAAK,GAAG,oBAAQ;AAAA,WAAM,sCAAgBJ,QAAhB,CAAN;AAAA,GAAR,EAAyC,CAACA,QAAD,CAAzC,CAAd;AAEA,sBACE,6BAAC,sCAAD;AACE,IAAA,GAAG,EAAEJ,YADP;AAEE,IAAA,YAAY,EAAC,WAFf;AAGE,IAAA,iBAAiB,EAAC;AAHpB,KAIMK,IAJN,gBAME,6BAAC,UAAD;AAAM,IAAA,SAAS,EAAEF;AAAjB,KACGK,KAAK,CAACC,GAAN,CAAU,UAACC,KAAD,EAAQC,CAAR,EAAc;AACvB,wBACE,6BAAC,QAAD;AACE,MAAA,GAAG,EAAEA,CADP;AAEE,MAAA,OAAO,EAAC,aAFV;AAGE,MAAA,SAAS,EAAC,QAHZ;AAIE,MAAA,IAAI,EAAEV,IAAI,GAAG,CAAH,GAAOW;AAJnB,OAMGF,KANH,CADF;AAUD,GAXA,CADH,CANF,CADF;AAuBD,CAhCC,CAFG","sourcesContent":["import React, { forwardRef, useMemo } from \"react\"\nimport { flattenChildren } from \"../../helpers/flattenChildren\"\nimport { useThemeConfig } from \"../../Theme\"\nimport { Box, BoxProps } from \"../Box\"\nimport { HorizontalOverflow } from \"../HorizontalOverflow/HorizontalOverflow\"\nimport { Join } from \"../Join\"\n\n/** Extends `Box` */\nexport type BaseTabsProps = BoxProps & {\n  /**\n   * Enable if tabs should fill the width of the container\n   * (as opposed to left-align)\n   */\n  fill?: boolean\n  separator?: JSX.Element\n  children: React.ReactNode\n}\n\n/** Extends `Box`, provides configurable gutter */\nexport const BaseTabs: React.ForwardRefExoticComponent<\n  BaseTabsProps & React.RefAttributes<HTMLDivElement>\n> = forwardRef(\n  ({ fill, separator: defaultSeparator, children, ...rest }, forwardedRef) => {\n    const separator = useThemeConfig({\n      v2: defaultSeparator ?? <Box mx={1} />,\n      v3: defaultSeparator,\n    })\n\n    const cells = useMemo(() => flattenChildren(children), [children])\n\n    return (\n      <HorizontalOverflow\n        ref={forwardedRef}\n        borderBottom=\"1px solid\"\n        borderBottomColor=\"black10\"\n        {...rest}\n      >\n        <Join separator={separator!}>\n          {cells.map((child, i) => {\n            return (\n              <Box\n                key={i}\n                display=\"inline-flex\"\n                textAlign=\"center\"\n                flex={fill ? 1 : undefined}\n              >\n                {child}\n              </Box>\n            )\n          })}\n        </Join>\n      </HorizontalOverflow>\n    )\n  }\n)\n"],"file":"BaseTabs.js"}
+{"version":3,"sources":["../../../src/elements/BaseTabs/BaseTabs.tsx"],"names":["BaseTabs","forwardedRef","fill","defaultSeparator","separator","children","rest","v2","v3","cells","map","child","i","undefined","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAaA;AACO,IAAMA,QAEZ,gBAAG,uBACF,gBAA2DC,YAA3D,EAA4E;AAAA,MAAzEC,IAAyE,QAAzEA,IAAyE;AAAA,MAAxDC,gBAAwD,QAAnEC,SAAmE;AAAA,MAAtCC,QAAsC,QAAtCA,QAAsC;AAAA,MAAzBC,IAAyB;;AAC1E,MAAMF,SAAS,GAAG,2BAAe;AAC/BG,IAAAA,EAAE,EAAEJ,gBAAF,aAAEA,gBAAF,cAAEA,gBAAF,gBAAsB,6BAAC,QAAD;AAAK,MAAA,EAAE,EAAE;AAAT,MADO;AAE/BK,IAAAA,EAAE,EAAEL;AAF2B,GAAf,CAAlB;AAKA,MAAMM,KAAK,GAAG,oBAAQ;AAAA,WAAM,sCAAgBJ,QAAhB,CAAN;AAAA,GAAR,EAAyC,CAACA,QAAD,CAAzC,CAAd;AAEA,sBACE,6BAAC,sCAAD;AACE,IAAA,GAAG,EAAEJ,YADP;AAEE,IAAA,YAAY,EAAC,WAFf;AAGE,IAAA,iBAAiB,EAAC;AAHpB,KAIMK,IAJN,gBAME,6BAAC,UAAD;AAAM,IAAA,SAAS,EAAEF;AAAjB,KACGK,KAAK,CAACC,GAAN,CAAU,UAACC,KAAD,EAAQC,CAAR,EAAc;AACvB,wBACE,6BAAC,QAAD;AACE,MAAA,GAAG,EAAEA,CADP;AAEE,MAAA,OAAO,EAAC,aAFV;AAGE,MAAA,SAAS,EAAC,QAHZ;AAIE,MAAA,IAAI,EAAEV,IAAI,GAAG,CAAH,GAAOW;AAJnB,OAMGF,KANH,CADF;AAUD,GAXA,CADH,CANF,CADF;AAuBD,CAhCC,CAFG;;AAqCPX,QAAQ,CAACc,WAAT,GAAuB,UAAvB","sourcesContent":["import React, { forwardRef, useMemo } from \"react\"\nimport { flattenChildren } from \"../../helpers/flattenChildren\"\nimport { useThemeConfig } from \"../../Theme\"\nimport { Box, BoxProps } from \"../Box\"\nimport { HorizontalOverflow } from \"../HorizontalOverflow/HorizontalOverflow\"\nimport { Join } from \"../Join\"\n\n/** Extends `Box` */\nexport type BaseTabsProps = BoxProps & {\n  /**\n   * Enable if tabs should fill the width of the container\n   * (as opposed to left-align)\n   */\n  fill?: boolean\n  separator?: JSX.Element\n  children: React.ReactNode\n}\n\n/** Extends `Box`, provides configurable gutter */\nexport const BaseTabs: React.ForwardRefExoticComponent<\n  BaseTabsProps & React.RefAttributes<HTMLDivElement>\n> = forwardRef(\n  ({ fill, separator: defaultSeparator, children, ...rest }, forwardedRef) => {\n    const separator = useThemeConfig({\n      v2: defaultSeparator ?? <Box mx={1} />,\n      v3: defaultSeparator,\n    })\n\n    const cells = useMemo(() => flattenChildren(children), [children])\n\n    return (\n      <HorizontalOverflow\n        ref={forwardedRef}\n        borderBottom=\"1px solid\"\n        borderBottomColor=\"black10\"\n        {...rest}\n      >\n        <Join separator={separator!}>\n          {cells.map((child, i) => {\n            return (\n              <Box\n                key={i}\n                display=\"inline-flex\"\n                textAlign=\"center\"\n                flex={fill ? 1 : undefined}\n              >\n                {child}\n              </Box>\n            )\n          })}\n        </Join>\n      </HorizontalOverflow>\n    )\n  }\n)\n\nBaseTabs.displayName = \"BaseTabs\"\n"],"file":"BaseTabs.js"}

package/dist/elements/Join/Join.js

@@ -35,18 +35,16 @@ var Join = function Join(_ref) {
   var separator = _ref.separator,
       children = _ref.children;
   var elements = (0, _flattenChildren.flattenChildren)(children);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, elements.reduce(function (acc, element, currentIndex) {
-    acc.push(
-    /*#__PURE__*/
-    // @ts-expect-error  MIGRATE_STRICT_MODE
-    _react.default.cloneElement(element, {
-      key: "join-".concat(currentIndex)
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, elements.reduce(function (acc, element, index) {
+    // Prefer provided child key, fallback to index
+    var key = typeof element.key !== "undefined" ? element.key : index;
+    acc.push( /*#__PURE__*/_react.default.cloneElement(element, {
+      key: key
     }));
 
-    if (currentIndex !== elements.length - 1) {
-      acc.push( // @ts-expect-error  MIGRATE_STRICT_MODE
-      separator && /*#__PURE__*/_react.default.cloneElement(separator, {
-        key: "join-sep-".concat(currentIndex)
+    if (index !== elements.length - 1) {
+      acc.push(separator && /*#__PURE__*/_react.default.cloneElement(separator, {
+        key: key
       }));
     }
 

package/dist/elements/Join/Join.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Join/Join.tsx"],"names":["Join","separator","children","elements","reduce","acc","element","currentIndex","push","React","cloneElement","key","length"],"mappings":";;;;;;;AAAA;;AACA;;;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,IAAyB,GAAG,SAA5BA,IAA4B,OAA6B;AAAA,MAA1BC,SAA0B,QAA1BA,SAA0B;AAAA,MAAfC,QAAe,QAAfA,QAAe;AACpE,MAAMC,QAAQ,GAAG,sCAAgBD,QAAhB,CAAjB;AAEA,sBACE,4DACGC,QAAQ,CAACC,MAAT,CAAgB,UAACC,GAAD,EAAMC,OAAN,EAAeC,YAAf,EAAgC;AAC/CF,IAAAA,GAAG,CAACG,IAAJ;AAAA;AACE;AACAC,mBAAMC,YAAN,CAAmBJ,OAAnB,EAA4B;AAC1BK,MAAAA,GAAG,iBAAUJ,YAAV;AADuB,KAA5B,CAFF;;AAOA,QAAIA,YAAY,KAAKJ,QAAQ,CAACS,MAAT,GAAkB,CAAvC,EAA0C;AACxCP,MAAAA,GAAG,CAACG,IAAJ,EACE;AACAP,MAAAA,SAAS,iBACPQ,eAAMC,YAAN,CAAmBT,SAAnB,EAA8B;AAC5BU,QAAAA,GAAG,qBAAcJ,YAAd;AADyB,OAA9B,CAHJ;AAOD;;AAED,WAAOF,GAAP;AACD,GAnBA,EAmBE,EAnBF,CADH,CADF;AAwBD,CA3BM","sourcesContent":["import React from \"react\"\nimport { flattenChildren } from \"../../helpers/flattenChildren\"\n\ninterface JoinProps {\n  separator: React.ReactElement<any>\n}\n\n/**\n * `Join` is a higher order component that renders a separator component\n * between each of `Join`'s direct children.\n *\n * @example\n *\n *  <Join separator={<SomeComponent/>}>\n *    <child1/>\n *    <child2/>\n *    <child3/>\n *  </Join>\n *\n * which renders\n *\n * <child1/>\n * <SomeComponent/>\n * <child2/>\n * <SomeComponent/>\n * <child3/>\n */\nexport const Join: React.FC<JoinProps> = ({ separator, children }) => {\n  const elements = flattenChildren(children)\n\n  return (\n    <>\n      {elements.reduce((acc, element, currentIndex) => {\n        acc.push(\n          // @ts-expect-error  MIGRATE_STRICT_MODE\n          React.cloneElement(element, {\n            key: `join-${currentIndex}`,\n          })\n        )\n\n        if (currentIndex !== elements.length - 1) {\n          acc.push(\n            // @ts-expect-error  MIGRATE_STRICT_MODE\n            separator &&\n              React.cloneElement(separator, {\n                key: `join-sep-${currentIndex}`,\n              })\n          )\n        }\n\n        return acc\n      }, [])}\n    </>\n  )\n}\n"],"file":"Join.js"}
+{"version":3,"sources":["../../../src/elements/Join/Join.tsx"],"names":["Join","separator","children","elements","reduce","acc","element","index","key","push","React","cloneElement","length"],"mappings":";;;;;;;AAAA;;AACA;;;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,IAAyB,GAAG,SAA5BA,IAA4B,OAA6B;AAAA,MAA1BC,SAA0B,QAA1BA,SAA0B;AAAA,MAAfC,QAAe,QAAfA,QAAe;AACpE,MAAMC,QAAQ,GAAG,sCAAgBD,QAAhB,CAAjB;AAEA,sBACE,4DACGC,QAAQ,CAACC,MAAT,CAAgB,UAACC,GAAD,EAAMC,OAAN,EAAeC,KAAf,EAAyB;AACxC;AACA,QAAMC,GAAG,GAAG,OAAOF,OAAO,CAACE,GAAf,KAAuB,WAAvB,GAAqCF,OAAO,CAACE,GAA7C,GAAmDD,KAA/D;AAEAF,IAAAA,GAAG,CAACI,IAAJ,eAASC,eAAMC,YAAN,CAAmBL,OAAnB,EAA4B;AAAEE,MAAAA,GAAG,EAAHA;AAAF,KAA5B,CAAT;;AAEA,QAAID,KAAK,KAAKJ,QAAQ,CAACS,MAAT,GAAkB,CAAhC,EAAmC;AACjCP,MAAAA,GAAG,CAACI,IAAJ,CAASR,SAAS,iBAAIS,eAAMC,YAAN,CAAmBV,SAAnB,EAA8B;AAAEO,QAAAA,GAAG,EAAHA;AAAF,OAA9B,CAAtB;AACD;;AAED,WAAOH,GAAP;AACD,GAXA,EAWE,EAXF,CADH,CADF;AAgBD,CAnBM","sourcesContent":["import React from \"react\"\nimport { flattenChildren } from \"../../helpers/flattenChildren\"\n\ninterface JoinProps {\n  separator: React.ReactElement<any>\n}\n\n/**\n * `Join` is a higher order component that renders a separator component\n * between each of `Join`'s direct children.\n *\n * @example\n *\n *  <Join separator={<SomeComponent/>}>\n *    <child1/>\n *    <child2/>\n *    <child3/>\n *  </Join>\n *\n * which renders\n *\n * <child1/>\n * <SomeComponent/>\n * <child2/>\n * <SomeComponent/>\n * <child3/>\n */\nexport const Join: React.FC<JoinProps> = ({ separator, children }) => {\n  const elements = flattenChildren(children)\n\n  return (\n    <>\n      {elements.reduce((acc, element, index) => {\n        // Prefer provided child key, fallback to index\n        const key = typeof element.key !== \"undefined\" ? element.key : index\n\n        acc.push(React.cloneElement(element, { key }))\n\n        if (index !== elements.length - 1) {\n          acc.push(separator && React.cloneElement(separator, { key }))\n        }\n\n        return acc\n      }, [] as typeof elements)}\n    </>\n  )\n}\n"],"file":"Join.js"}

package/dist/elements/Tabs/Tabs.js

@@ -71,7 +71,7 @@ var useTabs = function useTabs(_ref) {
   (0, _useUpdateEffect.useUpdateEffect)(function () {
     activeTab.current = tabs[initialTabIndex];
     setActiveTabIndex(initialTabIndex);
-  }, [initialTabIndex]); // Ref of the tabs viewport
+  }, [initialTabIndex, tabs]); // Ref of the tabs viewport
 
   var ref = (0, _react.useRef)(null); // Scroll to active tab when `activeTabIndex` changes
 

package/dist/elements/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Tabs/Tabs.tsx"],"names":["useTabs","children","initialTabIndex","onChange","tabs","map","child","ref","activeTabIndex","setActiveTabIndex","activeTab","current","tab","position","offsetLeft","scrollTo","left","behavior","handleClick","index","tabIndex","name","props","data","Tabs","rest","textVariant","v2","v3","i","defaultProps","mb","Tab"],"mappings":"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","sourcesContent":["import { TextVariant } from \"@artsy/palette-tokens/dist/typography/types\"\nimport React, {\n  createRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport { flattenChildren } from \"../../helpers/flattenChildren\"\nimport { useThemeConfig } from \"../../Theme\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { BaseTabs, BaseTabsProps } from \"../BaseTabs\"\nimport { BaseTab } from \"../BaseTabs\"\nimport { Clickable } from \"../Clickable\"\n\nexport interface TabLike extends JSX.Element {\n  props: TabProps\n}\n\nexport interface TabInfo extends TabProps {\n  /** Index of the newly selected Tab */\n  tabIndex: number\n  /**\n   * Arbitrary data that can be associated with a Tab.\n   * Will be passed to the parent <Tabs>'s onChange handler.\n   */\n  data: any\n}\n\nexport interface TabsProps extends BaseTabsProps {\n  /** Space or visual divider between tabs */\n  separator?: JSX.Element\n  /** Index of the Tab that should be pre-selected */\n  initialTabIndex?: number\n  /** @deprecated */\n  autoScroll?: boolean\n  /** Function that will be called when a new Tab is selected */\n  onChange?: (tabInfo?: TabInfo) => void\n}\n\n/** Tabs functionality */\nexport const useTabs = ({\n  children,\n  initialTabIndex = 0,\n  onChange,\n}: TabsProps) => {\n  const tabs = useMemo(\n    () =>\n      flattenChildren<TabLike>(children).map((child) => ({\n        child,\n        ref: createRef<HTMLButtonElement | null>(),\n      })),\n    [children]\n  )\n\n  const [activeTabIndex, setActiveTabIndex] = useState<number>(initialTabIndex)\n\n  // Wraps active tab in a ref to prevent re-rendering.\n  // This means that we need to update the active tab before the index state change\n  // to catch the re-render.\n  const activeTab = useRef(tabs[activeTabIndex])\n\n  // If the `initialTabIndex` changes; update the active one\n  useUpdateEffect(() => {\n    activeTab.current = tabs[initialTabIndex]\n    setActiveTabIndex(initialTabIndex)\n  }, [initialTabIndex])\n\n  // Ref of the tabs viewport\n  const ref = useRef<HTMLDivElement | null>(null)\n\n  // Scroll to active tab when `activeTabIndex` changes\n  useEffect(() => {\n    if (!ref.current) return\n    const tab = activeTab.current.ref.current\n    if (!tab) return\n    const position = tab.offsetLeft\n    ref.current.scrollTo?.({ left: position, behavior: \"smooth\" })\n  }, [activeTabIndex])\n\n  const handleClick = useCallback(\n    (index: number) => {\n      return () => {\n        if (index === activeTabIndex) return\n\n        activeTab.current = tabs[index]\n        setActiveTabIndex(index)\n\n        if (!onChange) return\n\n        onChange({\n          tabIndex: index,\n          name: tabs[index].child.props.name,\n          data: tabs[index].child.props.data ?? {},\n        })\n      }\n    },\n    [activeTabIndex, onChange, tabs]\n  )\n\n  return {\n    activeTab,\n    activeTabIndex,\n    handleClick,\n    ref,\n    tabs,\n  }\n}\n\n/** A tab bar navigation component */\nexport const Tabs: React.FC<TabsProps> = ({\n  children,\n  initialTabIndex = 0,\n  onChange,\n  ...rest\n}) => {\n  const textVariant: TextVariant = useThemeConfig({\n    v2: \"mediumText\",\n    v3: \"sm\",\n  })\n\n  const { tabs, activeTab, activeTabIndex, handleClick, ref } = useTabs({\n    children,\n    initialTabIndex,\n    onChange,\n  })\n\n  return (\n    <>\n      <BaseTabs ref={ref} {...rest}>\n        {tabs.map((tab, i) => {\n          return (\n            <Clickable\n              key={i}\n              ref={tab.ref as any}\n              aria-selected={i === activeTabIndex}\n              onClick={handleClick(i)}\n              flex={1}\n            >\n              <BaseTab active={i === activeTabIndex} variant={textVariant}>\n                <span>{tab.child.props.name}</span>\n              </BaseTab>\n            </Clickable>\n          )\n        })}\n      </BaseTabs>\n\n      {activeTab.current.child}\n    </>\n  )\n}\n\nTabs.defaultProps = {\n  mb: 2,\n}\n\nexport interface TabProps {\n  /** Display name of the Tab */\n  name: string | JSX.Element\n  /**\n   * Arbitrary data that can be associated with a Tab.\n   * Will be passed to the parent <Tabs>'s onChange handler.\n   */\n  data?: any\n}\n\n/**\n * An individual tab.\n * Does nothing on its own; props are dealt with inside of Tabs.\n */\nexport const Tab: React.FC<TabProps> = ({ children }) => <>{children}</>\n"],"file":"Tabs.js"}
+{"version":3,"sources":["../../../src/elements/Tabs/Tabs.tsx"],"names":["useTabs","children","initialTabIndex","onChange","tabs","map","child","ref","activeTabIndex","setActiveTabIndex","activeTab","current","tab","position","offsetLeft","scrollTo","left","behavior","handleClick","index","tabIndex","name","props","data","Tabs","rest","textVariant","v2","v3","i","defaultProps","mb","Tab"],"mappings":"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","sourcesContent":["import { TextVariant } from \"@artsy/palette-tokens/dist/typography/types\"\nimport React, {\n  createRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport { flattenChildren } from \"../../helpers/flattenChildren\"\nimport { useThemeConfig } from \"../../Theme\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { BaseTabs, BaseTabsProps } from \"../BaseTabs\"\nimport { BaseTab } from \"../BaseTabs\"\nimport { Clickable } from \"../Clickable\"\n\nexport interface TabLike extends JSX.Element {\n  props: TabProps\n}\n\nexport interface TabInfo extends TabProps {\n  /** Index of the newly selected Tab */\n  tabIndex: number\n  /**\n   * Arbitrary data that can be associated with a Tab.\n   * Will be passed to the parent <Tabs>'s onChange handler.\n   */\n  data: any\n}\n\nexport interface TabsProps extends BaseTabsProps {\n  /** Space or visual divider between tabs */\n  separator?: JSX.Element\n  /** Index of the Tab that should be pre-selected */\n  initialTabIndex?: number\n  /** @deprecated */\n  autoScroll?: boolean\n  /** Function that will be called when a new Tab is selected */\n  onChange?: (tabInfo?: TabInfo) => void\n}\n\n/** Tabs functionality */\nexport const useTabs = ({\n  children,\n  initialTabIndex = 0,\n  onChange,\n}: TabsProps) => {\n  const tabs = useMemo(\n    () =>\n      flattenChildren<TabLike>(children).map((child) => ({\n        child,\n        ref: createRef<HTMLButtonElement | null>(),\n      })),\n    [children]\n  )\n\n  const [activeTabIndex, setActiveTabIndex] = useState<number>(initialTabIndex)\n\n  // Wraps active tab in a ref to prevent re-rendering.\n  // This means that we need to update the active tab before the index state change\n  // to catch the re-render.\n  const activeTab = useRef(tabs[activeTabIndex])\n\n  // If the `initialTabIndex` changes; update the active one\n  useUpdateEffect(() => {\n    activeTab.current = tabs[initialTabIndex]\n    setActiveTabIndex(initialTabIndex)\n  }, [initialTabIndex, tabs])\n\n  // Ref of the tabs viewport\n  const ref = useRef<HTMLDivElement | null>(null)\n\n  // Scroll to active tab when `activeTabIndex` changes\n  useEffect(() => {\n    if (!ref.current) return\n    const tab = activeTab.current.ref.current\n    if (!tab) return\n    const position = tab.offsetLeft\n    ref.current.scrollTo?.({ left: position, behavior: \"smooth\" })\n  }, [activeTabIndex])\n\n  const handleClick = useCallback(\n    (index: number) => {\n      return () => {\n        if (index === activeTabIndex) return\n\n        activeTab.current = tabs[index]\n        setActiveTabIndex(index)\n\n        if (!onChange) return\n\n        onChange({\n          tabIndex: index,\n          name: tabs[index].child.props.name,\n          data: tabs[index].child.props.data ?? {},\n        })\n      }\n    },\n    [activeTabIndex, onChange, tabs]\n  )\n\n  return {\n    activeTab,\n    activeTabIndex,\n    handleClick,\n    ref,\n    tabs,\n  }\n}\n\n/** A tab bar navigation component */\nexport const Tabs: React.FC<TabsProps> = ({\n  children,\n  initialTabIndex = 0,\n  onChange,\n  ...rest\n}) => {\n  const textVariant: TextVariant = useThemeConfig({\n    v2: \"mediumText\",\n    v3: \"sm\",\n  })\n\n  const { tabs, activeTab, activeTabIndex, handleClick, ref } = useTabs({\n    children,\n    initialTabIndex,\n    onChange,\n  })\n\n  return (\n    <>\n      <BaseTabs ref={ref} {...rest}>\n        {tabs.map((tab, i) => {\n          return (\n            <Clickable\n              key={i}\n              ref={tab.ref as any}\n              aria-selected={i === activeTabIndex}\n              onClick={handleClick(i)}\n              flex={1}\n            >\n              <BaseTab active={i === activeTabIndex} variant={textVariant}>\n                <span>{tab.child.props.name}</span>\n              </BaseTab>\n            </Clickable>\n          )\n        })}\n      </BaseTabs>\n\n      {activeTab.current.child}\n    </>\n  )\n}\n\nTabs.defaultProps = {\n  mb: 2,\n}\n\nexport interface TabProps {\n  /** Display name of the Tab */\n  name: string | JSX.Element\n  /**\n   * Arbitrary data that can be associated with a Tab.\n   * Will be passed to the parent <Tabs>'s onChange handler.\n   */\n  data?: any\n}\n\n/**\n * An individual tab.\n * Does nothing on its own; props are dealt with inside of Tabs.\n */\nexport const Tab: React.FC<TabProps> = ({ children }) => <>{children}</>\n"],"file":"Tabs.js"}

package/dist/elements/Tabs/Tabs.story.d.ts

@@ -26,3 +26,4 @@ export declare const InitialAutoScroll: {
         };
     };
 };
+export declare const Cached: () => JSX.Element;

package/dist/elements/Tabs/Tabs.story.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithData = exports.InitialAutoScroll = exports.Default = exports.Counts = exports.ConditionalTabs = exports.AutoScrolling = void 0;
+exports.default = exports.WithData = exports.InitialAutoScroll = exports.Default = exports.Counts = exports.ConditionalTabs = exports.Cached = exports.AutoScrolling = void 0;
 
 var _addonActions = require("@storybook/addon-actions");
 
@@ -23,6 +23,8 @@ var _Box = require("../Box");
 
 var _useCursor2 = require("use-cursor");
 
+var _Button = require("../Button");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -266,5 +268,31 @@ InitialAutoScroll.story = {
       disable: true
     }
   }
+}; // FIXME: Currently renders one step behind
+
+var Cached = function Cached() {
+  var _useState5 = (0, _react.useState)(1),
+      _useState6 = _slicedToArray(_useState5, 2),
+      count = _useState6[0],
+      setCount = _useState6[1];
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    variant: "secondaryOutline",
+    size: "small",
+    mb: 1,
+    onClick: function onClick() {
+      setCount(function (prevCount) {
+        return prevCount + 1;
+      });
+    }
+  }, "Increment count \u2014 count: ", count), /*#__PURE__*/_react.default.createElement(_.Tabs, null, /*#__PURE__*/_react.default.createElement(_.Tab, {
+    name: "First"
+  }, "First \u2014 count: ", count), /*#__PURE__*/_react.default.createElement(_.Tab, {
+    name: "Second"
+  }, "Second \u2014 count: ", count), /*#__PURE__*/_react.default.createElement(_.Tab, {
+    name: "Third"
+  }, "Third \u2014 count: ", count)));
 };
+
+exports.Cached = Cached;
 //# sourceMappingURL=Tabs.story.js.map

package/dist/elements/Tabs/Tabs.story.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Tabs/Tabs.story.tsx"],"names":["title","Default","initialTabIndex","separator","justifyContent","WithData","data","setData","name","JSON","stringify","Counts","ConditionalTabs","AutoScrolling","max","index","handleNext","interval","setInterval","clearInterval","story","parameters","chromatic","disable","InitialAutoScroll","key","setKey"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAEC,MAAAA,eAAe,EAAE;AAAnB,KAFM,EAGN;AAAEC,MAAAA,SAAS,eAAE,6BAAC,iBAAD;AAAa,QAAA,EAAE,EAAE,CAAjB;AAAoB,QAAA,IAAI,EAAC,SAAzB;AAAmC,QAAA,KAAK,EAAC;AAAzC;AAAb,KAHM,EAIN;AAAEC,MAAAA,cAAc,EAAE;AAAlB,KAJM;AADV,kBAQE,6BAAC,MAAD;AAAM,IAAA,QAAQ,EAAE,0BAAO,UAAP;AAAhB,kBACE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,sBADF,eAEE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,4BAFF,eAGE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,gBAHF,eAIE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,6BAJF,CARF,CADF;AAiBD,CAlBM;;;AAAMH,O;;AAoBN,IAAMI,QAAQ,GAAG,SAAXA,QAAW,GAAM;AAC5B,kBAAwB,qBAAS,EAAT,CAAxB;AAAA;AAAA,MAAOC,IAAP;AAAA,MAAaC,OAAb;;AACA,sBACE,yEACE,6BAAC,MAAD;AAAM,IAAA,QAAQ,EAAEA;AAAhB,kBACE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC,UAAV;AAAqB,IAAA,IAAI,EAAE;AAAEC,MAAAA,IAAI,EAAE;AAAR;AAA3B,sBADF,eAKE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC,gBAAV;AAA2B,IAAA,IAAI,EAAE;AAAEA,MAAAA,IAAI,EAAE;AAAR;AAAjC,4BALF,eASE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC,IAAV;AAAe,IAAA,IAAI,EAAE;AAAEA,MAAAA,IAAI,EAAE;AAAR;AAArB,gBATF,eAaE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC,iBAAV;AAA4B,IAAA,IAAI,EAAE;AAAEA,MAAAA,IAAI,EAAE;AAAR;AAAlC,6BAbF,eAiBE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,qBAjBF,CADF,eAqBE,0CAAMC,IAAI,CAACC,SAAL,CAAeJ,IAAf,EAAqB,IAArB,EAA2B,CAA3B,CAAN,CArBF,CADF;AAyBD,CA3BM;;;;AA6BA,IAAMK,MAAM,GAAG,SAATA,MAAS,GAAM;AAC1B,sBACE,6BAAC,MAAD;AAAM,IAAA,QAAQ,EAAE,0BAAO,UAAP;AAAhB,kBACE,6BAAC,KAAD;AACE,IAAA,IAAI,eACF,sFACW,6BAAC,QAAD,cADX;AAFJ,IADF,eAQE,6BAAC,KAAD;AACE,IAAA,IAAI,eACF,4FACiB,6BAAC,QAAD,cADjB;AAFJ,IARF,eAeE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,IAfF,eAgBE,6BAAC,KAAD;AACE,IAAA,IAAI,eACF,6FACkB,6BAAC,QAAD,cADlB;AAFJ,IAhBF,CADF;AA0BD,CA3BM;;;AAAMA,M;;AA6BN,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AACnC,sBACE,6BAAC,MAAD;AAAM,IAAA,QAAQ,EAAE,0BAAO,UAAP;AAAhB,kBACE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,aADF,EAEG,sBAAS,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,cAFZ,eAGE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,aAHF,CADF;AAOD,CARM;;;AAAMA,e;;AAUN,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,GAAM;AACjC,mBAA+C,2BAAU;AAAEC,IAAAA,GAAG,EAAE;AAAP,GAAV,CAA/C;AAAA,MAAeZ,eAAf,cAAQa,KAAR;AAAA,MAAgCC,UAAhC,cAAgCA,UAAhC;;AAEA,wBAAU,YAAM;AACd,QAAMC,QAAQ,GAAGC,WAAW,CAACF,UAAD,EAAa,GAAb,CAA5B;AACA,WAAO;AAAA,aAAMG,aAAa,CAACF,QAAD,CAAnB;AAAA,KAAP;AACD,GAHD,EAGG,CAACD,UAAD,CAHH;AAKA,sBACE,yEACE,6BAAC,MAAD;AAAM,IAAA,eAAe,EAAEd,eAAvB;AAAwC,IAAA,QAAQ,EAAE,0BAAO,UAAP;AAAlD,kBACE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,aADF,eAEE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,cAFF,eAGE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,aAHF,eAIE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,cAJF,eAKE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,aALF,eAME,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,aANF,eAOE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,eAPF,eAQE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,cARF,eASE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,cATF,eAUE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,aAVF,eAWE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,gBAXF,eAYE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,gBAZF,eAaE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,kBAbF,eAcE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,kBAdF,eAeE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,iBAfF,CADF,eAmBE,0CAAMO,IAAI,CAACC,SAAL,CAAe;AAAER,IAAAA,eAAe,EAAfA;AAAF,GAAf,CAAN,CAnBF,CADF;AAuBD,CA/BM;;;AAiCPW,aAAa,CAACO,KAAd,GAAsB;AACpBC,EAAAA,UAAU,EAAE;AAAEC,IAAAA,SAAS,EAAE;AAAEC,MAAAA,OAAO,EAAE;AAAX;AAAb;AADQ,CAAtB;;AAIO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,GAAM;AACrC,mBAAsB,qBAAS,CAAT,CAAtB;AAAA;AAAA,MAAOC,GAAP;AAAA,MAAYC,MAAZ;;AAEA,wBAAU,YAAM;AACd,QAAMT,QAAQ,GAAGC,WAAW,CAAC,YAAM;AACjCQ,MAAAA,MAAM,CAAC,UAACD,GAAD;AAAA,eAASA,GAAG,GAAG,CAAf;AAAA,OAAD,CAAN;AACD,KAF2B,EAEzB,GAFyB,CAA5B;AAIA,WAAO;AAAA,aAAMN,aAAa,CAACF,QAAD,CAAnB;AAAA,KAAP;AACD,GAND,EAMG,EANH;AAQA,sBACE,yEACE,6BAAC,QAAD;AAAK,IAAA,EAAE,EAAC,SAAR;AAAkB,IAAA,MAAM,EAAE,IAA1B;AAAgC,IAAA,CAAC,EAAE;AAAnC,4EAEE,wCAFF,+CAIE,wCAJF,eAKYQ,GALZ,CADF,eASE,6BAAC,MAAD;AAAM,IAAA,QAAQ,EAAE,0BAAO,UAAP,CAAhB;AAAoC,IAAA,eAAe,EAAE;AAArD,kBACE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,aADF,eAEE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,cAFF,eAGE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,aAHF,eAIE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,cAJF,eAKE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,aALF,eAME,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,aANF,eAOE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,eAPF,eAQE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,cARF,eASE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,cATF,eAUE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,aAVF,eAWE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,gBAXF,eAYE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,gBAZF,eAaE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,kBAbF,eAcE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,kBAdF,eAeE,6BAAC,KAAD;AAAK,IAAA,IAAI,EAAC;AAAV,qDAfF,CATF,eA6BE,6BAAC,QAAD;AAAK,IAAA,EAAE,EAAC,SAAR;AAAkB,IAAA,MAAM,EAAE;AAA1B,IA7BF,CADF;AAiCD,CA5CM;;;AA8CPD,iBAAiB,CAACJ,KAAlB,GAA0B;AACxBC,EAAAA,UAAU,EAAE;AAAEC,IAAAA,SAAS,EAAE;AAAEC,MAAAA,OAAO,EAAE;AAAX;AAAb;AADY,CAA1B","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useEffect, useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { ChevronIcon } from \"../../svgs\"\nimport { Sup } from \"../Sup\"\nimport { Tab, Tabs, TabsProps } from \"./\"\nimport { Box } from \"../Box\"\nimport { useCursor } from \"use-cursor\"\n\nexport default {\n  title: \"Components/Tabs\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<TabsProps>>\n      states={[\n        {},\n        { initialTabIndex: 2 },\n        { separator: <ChevronIcon mx={2} fill=\"black30\" width=\"12px\" /> },\n        { justifyContent: \"center\" },\n      ]}\n    >\n      <Tabs onChange={action(\"onChange\")}>\n        <Tab name=\"Overview\">Overview panel</Tab>\n        <Tab name=\"Works for sale\">Works for sale panel</Tab>\n        <Tab name=\"CV\">CV panel</Tab>\n        <Tab name=\"Auction results\">Auction results panel</Tab>\n      </Tabs>\n    </States>\n  )\n}\n\nexport const WithData = () => {\n  const [data, setData] = useState({})\n  return (\n    <>\n      <Tabs onChange={setData as any}>\n        <Tab name=\"Overview\" data={{ name: \"Overview\" }}>\n          Overview panel\n        </Tab>\n\n        <Tab name=\"Works for sale\" data={{ name: \"Works for sale\" }}>\n          Works for sale panel\n        </Tab>\n\n        <Tab name=\"CV\" data={{ name: \"CV\" }}>\n          CV panel\n        </Tab>\n\n        <Tab name=\"Auction results\" data={{ name: \"Auction results\" }}>\n          Auction results panel\n        </Tab>\n\n        <Tab name=\"No data\">No data panel</Tab>\n      </Tabs>\n\n      <pre>{JSON.stringify(data, null, 2)}</pre>\n    </>\n  )\n}\n\nexport const Counts = () => {\n  return (\n    <Tabs onChange={action(\"onChange\")}>\n      <Tab\n        name={\n          <>\n            Overview <Sup>123</Sup>\n          </>\n        }\n      />\n      <Tab\n        name={\n          <>\n            Works for sale <Sup>123</Sup>\n          </>\n        }\n      />\n      <Tab name=\"CV\" />\n      <Tab\n        name={\n          <>\n            Auction results <Sup>123</Sup>\n          </>\n        }\n      />\n    </Tabs>\n  )\n}\n\nexport const ConditionalTabs = () => {\n  return (\n    <Tabs onChange={action(\"onChange\")}>\n      <Tab name=\"First\">First</Tab>\n      {false && <Tab name=\"Second\">Second</Tab>}\n      <Tab name=\"Third\">Third</Tab>\n    </Tabs>\n  )\n}\n\nexport const AutoScrolling = () => {\n  const { index: initialTabIndex, handleNext } = useCursor({ max: 15 })\n\n  useEffect(() => {\n    const interval = setInterval(handleNext, 500)\n    return () => clearInterval(interval)\n  }, [handleNext])\n\n  return (\n    <>\n      <Tabs initialTabIndex={initialTabIndex} onChange={action(\"onChange\")}>\n        <Tab name=\"First\">First</Tab>\n        <Tab name=\"Second\">Second</Tab>\n        <Tab name=\"Third\">Third</Tab>\n        <Tab name=\"Fourth\">Fourth</Tab>\n        <Tab name=\"Fifth\">Fifth</Tab>\n        <Tab name=\"Sixth\">Sixth</Tab>\n        <Tab name=\"Seventh\">Seventh</Tab>\n        <Tab name=\"Eighth\">Eighth</Tab>\n        <Tab name=\"Nineth\">Nineth</Tab>\n        <Tab name=\"Tenth\">Tenth</Tab>\n        <Tab name=\"Eleventh\">Eleventh</Tab>\n        <Tab name=\"Twelveth\">Twelveth</Tab>\n        <Tab name=\"Thirteenth\">Thirteenth</Tab>\n        <Tab name=\"Fourteenth\">Fourteenth</Tab>\n        <Tab name=\"Fifteenth\">Fifteenth</Tab>\n      </Tabs>\n\n      <pre>{JSON.stringify({ initialTabIndex })}</pre>\n    </>\n  )\n}\n\nAutoScrolling.story = {\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const InitialAutoScroll = () => {\n  const [key, setKey] = useState(1)\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setKey((key) => key + 1)\n    }, 500)\n\n    return () => clearInterval(interval)\n  }, [])\n\n  return (\n    <>\n      <Box bg=\"black10\" height={1000} p={2}>\n        The vertical scroll of this page should be at the top.\n        <br />\n        Scroll down to see the tabs.\n        <br />\n        Render: #{key}\n      </Box>\n\n      <Tabs onChange={action(\"onChange\")} initialTabIndex={14}>\n        <Tab name=\"First\">First</Tab>\n        <Tab name=\"Second\">Second</Tab>\n        <Tab name=\"Third\">Third</Tab>\n        <Tab name=\"Fourth\">Fourth</Tab>\n        <Tab name=\"Fifth\">Fifth</Tab>\n        <Tab name=\"Sixth\">Sixth</Tab>\n        <Tab name=\"Seventh\">Seventh</Tab>\n        <Tab name=\"Eighth\">Eighth</Tab>\n        <Tab name=\"Nineth\">Nineth</Tab>\n        <Tab name=\"Tenth\">Tenth</Tab>\n        <Tab name=\"Eleventh\">Eleventh</Tab>\n        <Tab name=\"Twelveth\">Twelveth</Tab>\n        <Tab name=\"Thirteenth\">Thirteenth</Tab>\n        <Tab name=\"Fourteenth\">Fourteenth</Tab>\n        <Tab name=\"Fifteenth\">\n          This tab should be active &amp; visible on mount.\n        </Tab>\n      </Tabs>\n\n      <Box bg=\"black10\" height={1000} />\n    </>\n  )\n}\n\nInitialAutoScroll.story = {\n  parameters: { chromatic: { disable: true } },\n}\n"],"file":"Tabs.story.js"}
+{"version":3,"sources":["../../../src/elements/Tabs/Tabs.story.tsx"],"names":["title","Default","initialTabIndex","separator","justifyContent","WithData","data","setData","name","JSON","stringify","Counts","ConditionalTabs","AutoScrolling","max","index","handleNext","interval","setInterval","clearInterval","story","parameters","chromatic","disable","InitialAutoScroll","key","setKey","Cached","count","setCount","prevCount"],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useEffect, useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { ChevronIcon } from \"../../svgs\"\nimport { Sup } from \"../Sup\"\nimport { Tab, Tabs, TabsProps } from \"./\"\nimport { Box } from \"../Box\"\nimport { useCursor } from \"use-cursor\"\nimport { Button } from \"../Button\"\n\nexport default {\n  title: \"Components/Tabs\",\n}\n\nexport const Default = () => {\n  return (\n    <States<Partial<TabsProps>>\n      states={[\n        {},\n        { initialTabIndex: 2 },\n        { separator: <ChevronIcon mx={2} fill=\"black30\" width=\"12px\" /> },\n        { justifyContent: \"center\" },\n      ]}\n    >\n      <Tabs onChange={action(\"onChange\")}>\n        <Tab name=\"Overview\">Overview panel</Tab>\n        <Tab name=\"Works for sale\">Works for sale panel</Tab>\n        <Tab name=\"CV\">CV panel</Tab>\n        <Tab name=\"Auction results\">Auction results panel</Tab>\n      </Tabs>\n    </States>\n  )\n}\n\nexport const WithData = () => {\n  const [data, setData] = useState({})\n  return (\n    <>\n      <Tabs onChange={setData as any}>\n        <Tab name=\"Overview\" data={{ name: \"Overview\" }}>\n          Overview panel\n        </Tab>\n\n        <Tab name=\"Works for sale\" data={{ name: \"Works for sale\" }}>\n          Works for sale panel\n        </Tab>\n\n        <Tab name=\"CV\" data={{ name: \"CV\" }}>\n          CV panel\n        </Tab>\n\n        <Tab name=\"Auction results\" data={{ name: \"Auction results\" }}>\n          Auction results panel\n        </Tab>\n\n        <Tab name=\"No data\">No data panel</Tab>\n      </Tabs>\n\n      <pre>{JSON.stringify(data, null, 2)}</pre>\n    </>\n  )\n}\n\nexport const Counts = () => {\n  return (\n    <Tabs onChange={action(\"onChange\")}>\n      <Tab\n        name={\n          <>\n            Overview <Sup>123</Sup>\n          </>\n        }\n      />\n      <Tab\n        name={\n          <>\n            Works for sale <Sup>123</Sup>\n          </>\n        }\n      />\n      <Tab name=\"CV\" />\n      <Tab\n        name={\n          <>\n            Auction results <Sup>123</Sup>\n          </>\n        }\n      />\n    </Tabs>\n  )\n}\n\nexport const ConditionalTabs = () => {\n  return (\n    <Tabs onChange={action(\"onChange\")}>\n      <Tab name=\"First\">First</Tab>\n      {false && <Tab name=\"Second\">Second</Tab>}\n      <Tab name=\"Third\">Third</Tab>\n    </Tabs>\n  )\n}\n\nexport const AutoScrolling = () => {\n  const { index: initialTabIndex, handleNext } = useCursor({ max: 15 })\n\n  useEffect(() => {\n    const interval = setInterval(handleNext, 500)\n    return () => clearInterval(interval)\n  }, [handleNext])\n\n  return (\n    <>\n      <Tabs initialTabIndex={initialTabIndex} onChange={action(\"onChange\")}>\n        <Tab name=\"First\">First</Tab>\n        <Tab name=\"Second\">Second</Tab>\n        <Tab name=\"Third\">Third</Tab>\n        <Tab name=\"Fourth\">Fourth</Tab>\n        <Tab name=\"Fifth\">Fifth</Tab>\n        <Tab name=\"Sixth\">Sixth</Tab>\n        <Tab name=\"Seventh\">Seventh</Tab>\n        <Tab name=\"Eighth\">Eighth</Tab>\n        <Tab name=\"Nineth\">Nineth</Tab>\n        <Tab name=\"Tenth\">Tenth</Tab>\n        <Tab name=\"Eleventh\">Eleventh</Tab>\n        <Tab name=\"Twelveth\">Twelveth</Tab>\n        <Tab name=\"Thirteenth\">Thirteenth</Tab>\n        <Tab name=\"Fourteenth\">Fourteenth</Tab>\n        <Tab name=\"Fifteenth\">Fifteenth</Tab>\n      </Tabs>\n\n      <pre>{JSON.stringify({ initialTabIndex })}</pre>\n    </>\n  )\n}\n\nAutoScrolling.story = {\n  parameters: { chromatic: { disable: true } },\n}\n\nexport const InitialAutoScroll = () => {\n  const [key, setKey] = useState(1)\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setKey((key) => key + 1)\n    }, 500)\n\n    return () => clearInterval(interval)\n  }, [])\n\n  return (\n    <>\n      <Box bg=\"black10\" height={1000} p={2}>\n        The vertical scroll of this page should be at the top.\n        <br />\n        Scroll down to see the tabs.\n        <br />\n        Render: #{key}\n      </Box>\n\n      <Tabs onChange={action(\"onChange\")} initialTabIndex={14}>\n        <Tab name=\"First\">First</Tab>\n        <Tab name=\"Second\">Second</Tab>\n        <Tab name=\"Third\">Third</Tab>\n        <Tab name=\"Fourth\">Fourth</Tab>\n        <Tab name=\"Fifth\">Fifth</Tab>\n        <Tab name=\"Sixth\">Sixth</Tab>\n        <Tab name=\"Seventh\">Seventh</Tab>\n        <Tab name=\"Eighth\">Eighth</Tab>\n        <Tab name=\"Nineth\">Nineth</Tab>\n        <Tab name=\"Tenth\">Tenth</Tab>\n        <Tab name=\"Eleventh\">Eleventh</Tab>\n        <Tab name=\"Twelveth\">Twelveth</Tab>\n        <Tab name=\"Thirteenth\">Thirteenth</Tab>\n        <Tab name=\"Fourteenth\">Fourteenth</Tab>\n        <Tab name=\"Fifteenth\">\n          This tab should be active &amp; visible on mount.\n        </Tab>\n      </Tabs>\n\n      <Box bg=\"black10\" height={1000} />\n    </>\n  )\n}\n\nInitialAutoScroll.story = {\n  parameters: { chromatic: { disable: true } },\n}\n\n// FIXME: Currently renders one step behind\nexport const Cached = () => {\n  const [count, setCount] = useState(1)\n\n  return (\n    <>\n      <Button\n        variant=\"secondaryOutline\"\n        size=\"small\"\n        mb={1}\n        onClick={() => {\n          setCount((prevCount) => prevCount + 1)\n        }}\n      >\n        Increment count — count: {count}\n      </Button>\n\n      <Tabs>\n        <Tab name=\"First\">First — count: {count}</Tab>\n        <Tab name=\"Second\">Second — count: {count}</Tab>\n        <Tab name=\"Third\">Third — count: {count}</Tab>\n      </Tabs>\n    </>\n  )\n}\n"],"file":"Tabs.story.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "19.1.2",
+  "version": "19.1.3",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -178,5 +178,5 @@
       "<rootDir>/www/"
     ]
   },
-  "gitHead": "1ac04b164dde75c892d17b5a50658515803349c2"
+  "gitHead": "d51f2e8629a509c8e50e92bf47321f6f904b4626"
 }