@artsy/palette 18.6.0 → 18.7.0

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# v18.7.0 (Thu Nov 11 2021)
+
+#### 🚀  Enhancement
+
+- feat(button): improves support for icon buttons [#1071](https://github.com/artsy/palette/pull/1071) ([@dzucconi](https://github.com/dzucconi))
+
+#### 🐛  Bug Fix
+
+- fix(button): fixes alignment for icons ([@dzucconi](https://github.com/dzucconi))
+- fix(color): supports currentColor ([@dzucconi](https://github.com/dzucconi))
+
+#### Authors: 1
+
+- Damon ([@dzucconi](https://github.com/dzucconi))
+
+---
+
+# v18.6.1 (Thu Nov 11 2021)
+
+#### 🐛  Bug Fix
+
+- fix(tabs): avoids scrolling on mount [#1070](https://github.com/artsy/palette/pull/1070) ([@dzucconi](https://github.com/dzucconi))
+- fix(tabs): avoids scrolling on mount ([@dzucconi](https://github.com/dzucconi))
+- feat: forwards refs ([@dzucconi](https://github.com/dzucconi))
+
+#### 🔩 Dependency Updates
+
+- chore(deps): bump prismjs from 1.24.1 to 1.25.0 [#1039](https://github.com/artsy/palette/pull/1039) ([@dependabot[bot]](https://github.com/dependabot[bot]))
+
+#### Authors: 2
+
+- [@dependabot[bot]](https://github.com/dependabot[bot])
+- Damon ([@dzucconi](https://github.com/dzucconi))
+
+---
+
 # v18.6.0 (Wed Nov 03 2021)
 
 #### 🚀  Enhancement

package/dist/elements/BaseTabs/BaseTabs.d.ts

@@ -11,4 +11,4 @@ export declare type BaseTabsProps = BoxProps & {
     children: React.ReactNode;
 };
 /** Extends `Box`, provides configurable gutter */
-export declare const BaseTabs: React.FC<BaseTabsProps>;
+export declare const BaseTabs: React.ForwardRefExoticComponent<BaseTabsProps & React.RefAttributes<HTMLDivElement>>;

package/dist/elements/BaseTabs/BaseTabs.js

@@ -30,7 +30,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 /** Extends `Box`, provides configurable gutter */
-var BaseTabs = function BaseTabs(_ref) {
+var BaseTabs = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, forwardedRef) {
   var fill = _ref.fill,
       defaultSeparator = _ref.separator,
       children = _ref.children,
@@ -46,6 +46,7 @@ var BaseTabs = function BaseTabs(_ref) {
     return (0, _flattenChildren.flattenChildren)(children);
   }, [children]);
   return /*#__PURE__*/_react.default.createElement(_HorizontalOverflow.HorizontalOverflow, _extends({
+    ref: forwardedRef,
     borderBottom: "1px solid",
     borderBottomColor: "black10"
   }, rest), /*#__PURE__*/_react.default.createElement(_Join.Join, {
@@ -58,8 +59,6 @@ var BaseTabs = function BaseTabs(_ref) {
       flex: fill ? 1 : undefined
     }, child);
   })));
-};
-
+});
 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","fill","defaultSeparator","separator","children","rest","v2","v3","cells","map","child","i","undefined"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAaA;AACO,IAAMA,QAAiC,GAAG,SAApCA,QAAoC,OAK3C;AAAA,MAJJC,IAII,QAJJA,IAII;AAAA,MAHOC,gBAGP,QAHJC,SAGI;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADDC,IACC;;AACJ,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,YAAY,EAAC,WADf;AAEE,IAAA,iBAAiB,EAAC;AAFpB,KAGMC,IAHN,gBAKE,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,CALF,CADF;AAsBD,CAnCM;;;AAAMV,Q","sourcesContent":["import React, { 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.FC<BaseTabsProps> = ({\n  fill,\n  separator: defaultSeparator,\n  children,\n  ...rest\n}) => {\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      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"],"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"],"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"}

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

@@ -25,3 +25,4 @@ export declare const WithBoxProps: {
 };
 export declare const Loading: () => JSX.Element;
 export declare const As: () => JSX.Element;
+export declare const WithIcon: () => JSX.Element;

package/dist/elements/Button/Button.story.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.As = exports.Loading = exports.WithBoxProps = exports.NativeButtonProps = exports.Variants = exports.Sizes = exports._States = exports.default = void 0;
+exports.WithIcon = exports.As = exports.Loading = exports.WithBoxProps = exports.NativeButtonProps = exports.Variants = exports.Sizes = exports._States = exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -13,6 +13,8 @@ var _storybookStates = require("storybook-states");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
+var _ = require("../..");
+
 var _Box = require("../Box");
 
 var _Flex = require("../Flex");
@@ -205,4 +207,30 @@ var As = function As() {
 
 exports.As = As;
 As.displayName = "As";
+
+var WithIcon = function WithIcon() {
+  return /*#__PURE__*/_react.default.createElement(_storybookStates.States, {
+    states: [{}, {
+      focus: true
+    }, {
+      hover: true
+    }, {
+      loading: true
+    }, {
+      disabled: true
+    }, {
+      loading: true,
+      disabled: true
+    }]
+  }, /*#__PURE__*/_react.default.createElement(_index.Button, {
+    variant: "secondaryOutline",
+    size: "small"
+  }, /*#__PURE__*/_react.default.createElement(_.BellIcon, {
+    fill: "currentColor",
+    mr: 0.5
+  }), "Create an Alert"));
+};
+
+exports.WithIcon = WithIcon;
+WithIcon.displayName = "WithIcon";
 //# sourceMappingURL=Button.story.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Button/Button.story.tsx"],"names":["title","_States","focus","hover","loading","disabled","story","name","Sizes","BUTTON_SIZE_NAMES","map","size","_Demo","Flex","displayName","Variants","BUTTON_VARIANT_NAMES","variant","props","NativeButtonProps","autoFocus","children","tabIndex","onClick","event","preventDefault","WithBoxProps","Loading","setLoading","handleClick","setTimeout","As","as"],"mappings":"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","sourcesContent":["import React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport styled from \"styled-components\"\nimport { Box } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { ButtonProps } from \"./Button\"\nimport { Button, BUTTON_SIZE_NAMES, BUTTON_VARIANT_NAMES } from \"./index\"\n\nexport default { title: \"Components/Button\" }\n\nexport const _States = () => {\n  return (\n    <States<ButtonProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { loading: true },\n        { disabled: true },\n        { loading: true, disabled: true },\n      ]}\n    >\n      <Button>Label</Button>\n    </States>\n  )\n}\n\n_States.story = {\n  name: \"States\",\n}\n\nexport const Sizes = () => {\n  return (\n    <States<ButtonProps> states={BUTTON_SIZE_NAMES.map((size) => ({ size }))}>\n      <Button>Label</Button>\n    </States>\n  )\n}\n\nconst _Demo = styled(Flex)``\n_Demo.displayName = \"Button\"\n\nexport const Variants = () => {\n  return (\n    <States<ButtonProps>\n      states={BUTTON_VARIANT_NAMES.map((variant) => ({ variant }))}\n    >\n      {(props) => (\n        <_Demo>\n          <Button {...props}>Label</Button>\n\n          <Spacer mx={0.5} />\n\n          <Button {...props} focus>\n            Label\n          </Button>\n\n          <Spacer mx={0.5} />\n\n          <Button {...props} hover>\n            Label\n          </Button>\n\n          <Spacer mx={0.5} />\n\n          <Button {...props} loading>\n            Label\n          </Button>\n\n          <Spacer mx={0.5} />\n\n          <Button {...props} disabled>\n            Label\n          </Button>\n        </_Demo>\n      )}\n    </States>\n  )\n}\n\nexport const NativeButtonProps = () => {\n  return (\n    <States<ButtonProps>\n      states={[\n        { autoFocus: true, children: \"autofocused\" },\n        { tabIndex: -1, children: \"not focusable with keyboard\" },\n        {\n          onClick: (event) => {\n            event.preventDefault()\n          },\n          children: \"correctly typed click event\",\n        },\n      ]}\n    >\n      <Button>Label</Button>\n    </States>\n  )\n}\n\nNativeButtonProps.story = {\n  name: \"Native button tag props\",\n}\n\nexport const WithBoxProps = () => {\n  return (\n    <States>\n      <Box border=\"1px dotted\" borderColor=\"black100\">\n        <Button display=\"block\" width=\"100%\" my={2}>\n          full width\n        </Button>\n\n        <Button display=\"block\" width=\"100%\" my={2}>\n          with collapsing\n        </Button>\n\n        <Button display=\"block\" width=\"100%\" my={2}>\n          margins\n        </Button>\n      </Box>\n    </States>\n  )\n}\n\nWithBoxProps.story = {\n  name: \"with BoxProps\",\n}\n\nexport const Loading = () => {\n  const [loading, setLoading] = useState(false)\n\n  const handleClick = () => {\n    if (loading) return\n    setLoading(true)\n    setTimeout(() => {\n      setLoading(false)\n    }, 1000)\n  }\n  return (\n    <States>\n      <Button loading={loading} onClick={handleClick}>\n        click to load\n      </Button>\n    </States>\n  )\n}\n\nexport const As = () => {\n  return (\n    <States states={[{}, { as: \"div\", children: \"This is a div\" }]}>\n      {/* @ts-ignore */}\n      <Button as=\"a\" href=\"#example\">\n        This is an anchor tag with an href\n      </Button>\n    </States>\n  )\n}\n"],"file":"Button.story.js"}
+{"version":3,"sources":["../../../src/elements/Button/Button.story.tsx"],"names":["title","_States","focus","hover","loading","disabled","story","name","Sizes","BUTTON_SIZE_NAMES","map","size","_Demo","Flex","displayName","Variants","BUTTON_VARIANT_NAMES","variant","props","NativeButtonProps","autoFocus","children","tabIndex","onClick","event","preventDefault","WithBoxProps","Loading","setLoading","handleClick","setTimeout","As","as","WithIcon"],"mappings":"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","sourcesContent":["import React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport styled from \"styled-components\"\nimport { BellIcon } from \"../..\"\nimport { Box } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { ButtonProps } from \"./Button\"\nimport { Button, BUTTON_SIZE_NAMES, BUTTON_VARIANT_NAMES } from \"./index\"\n\nexport default { title: \"Components/Button\" }\n\nexport const _States = () => {\n  return (\n    <States<ButtonProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { loading: true },\n        { disabled: true },\n        { loading: true, disabled: true },\n      ]}\n    >\n      <Button>Label</Button>\n    </States>\n  )\n}\n\n_States.story = {\n  name: \"States\",\n}\n\nexport const Sizes = () => {\n  return (\n    <States<ButtonProps> states={BUTTON_SIZE_NAMES.map((size) => ({ size }))}>\n      <Button>Label</Button>\n    </States>\n  )\n}\n\nconst _Demo = styled(Flex)``\n_Demo.displayName = \"Button\"\n\nexport const Variants = () => {\n  return (\n    <States<ButtonProps>\n      states={BUTTON_VARIANT_NAMES.map((variant) => ({ variant }))}\n    >\n      {(props) => (\n        <_Demo>\n          <Button {...props}>Label</Button>\n\n          <Spacer mx={0.5} />\n\n          <Button {...props} focus>\n            Label\n          </Button>\n\n          <Spacer mx={0.5} />\n\n          <Button {...props} hover>\n            Label\n          </Button>\n\n          <Spacer mx={0.5} />\n\n          <Button {...props} loading>\n            Label\n          </Button>\n\n          <Spacer mx={0.5} />\n\n          <Button {...props} disabled>\n            Label\n          </Button>\n        </_Demo>\n      )}\n    </States>\n  )\n}\n\nexport const NativeButtonProps = () => {\n  return (\n    <States<ButtonProps>\n      states={[\n        { autoFocus: true, children: \"autofocused\" },\n        { tabIndex: -1, children: \"not focusable with keyboard\" },\n        {\n          onClick: (event) => {\n            event.preventDefault()\n          },\n          children: \"correctly typed click event\",\n        },\n      ]}\n    >\n      <Button>Label</Button>\n    </States>\n  )\n}\n\nNativeButtonProps.story = {\n  name: \"Native button tag props\",\n}\n\nexport const WithBoxProps = () => {\n  return (\n    <States>\n      <Box border=\"1px dotted\" borderColor=\"black100\">\n        <Button display=\"block\" width=\"100%\" my={2}>\n          full width\n        </Button>\n\n        <Button display=\"block\" width=\"100%\" my={2}>\n          with collapsing\n        </Button>\n\n        <Button display=\"block\" width=\"100%\" my={2}>\n          margins\n        </Button>\n      </Box>\n    </States>\n  )\n}\n\nWithBoxProps.story = {\n  name: \"with BoxProps\",\n}\n\nexport const Loading = () => {\n  const [loading, setLoading] = useState(false)\n\n  const handleClick = () => {\n    if (loading) return\n    setLoading(true)\n    setTimeout(() => {\n      setLoading(false)\n    }, 1000)\n  }\n  return (\n    <States>\n      <Button loading={loading} onClick={handleClick}>\n        click to load\n      </Button>\n    </States>\n  )\n}\n\nexport const As = () => {\n  return (\n    <States states={[{}, { as: \"div\", children: \"This is a div\" }]}>\n      {/* @ts-ignore */}\n      <Button as=\"a\" href=\"#example\">\n        This is an anchor tag with an href\n      </Button>\n    </States>\n  )\n}\n\nexport const WithIcon = () => {\n  return (\n    <States<ButtonProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { loading: true },\n        { disabled: true },\n        { loading: true, disabled: true },\n      ]}\n    >\n      <Button variant=\"secondaryOutline\" size=\"small\">\n        <BellIcon fill=\"currentColor\" mr={0.5} />\n        Create an Alert\n      </Button>\n    </States>\n  )\n}\n"],"file":"Button.story.js"}

package/dist/elements/Button/v3/Button.js

@@ -70,11 +70,15 @@ var ButtonV3 = /*#__PURE__*/_react.default.forwardRef(function (_ref, forwardedR
   }), /*#__PURE__*/_react.default.createElement(_Text.Text, {
     lineHeight: 1,
     variant: _tokens.BUTTON_TEXT_SIZES[size],
-    opacity: loading ? 0 : 1
+    opacity: loading ? 0 : 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
   }, children));
 });
 
 exports.ButtonV3 = ButtonV3;
+ButtonV3.displayName = "Button";
 ButtonV3.defaultProps = {
   size: "medium",
   variant: "primaryBlack"

package/dist/elements/Button/v3/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/Button/v3/Button.tsx"],"names":["ButtonV3","React","forwardRef","forwardedRef","children","loading","color","size","onClick","rest","ref","handleClick","event","current","blur","BUTTON_TEXT_SIZES","defaultProps","variant","Container","styled","button","boxMixin","prop","variants","BUTTON_SIZES","props","hover","BUTTON_VARIANTS","focus","css","disabled","default","THEME_V3","mediaQueries"],"mappings":"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","sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport React, { useEffect, useRef } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { THEME_V3 } from \"../../../themes\"\nimport { boxMixin } from \"../../Box\"\nimport { Spinner } from \"../../Spinner\"\nimport { Text } from \"../../Text\"\nimport { ButtonProps } from \"../Button\"\nimport { BUTTON_SIZES, BUTTON_TEXT_SIZES, BUTTON_VARIANTS } from \"./tokens\"\n\nexport const ButtonV3: React.ForwardRefExoticComponent<\n  ButtonProps & { ref?: React.Ref<HTMLElement> }\n> = React.forwardRef(\n  ({ children, loading, color, size, onClick, ...rest }, forwardedRef) => {\n    const ref = useRef<HTMLButtonElement | null>(null)\n\n    const handleClick = (\n      event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n    ) => {\n      if (!loading && onClick) {\n        onClick(event)\n      }\n    }\n\n    useEffect(() => {\n      if (loading && ref.current !== null) {\n        ref.current!.blur()\n      }\n    }, [loading])\n\n    return (\n      <Container\n        ref={composeRefs(ref, forwardedRef) as any}\n        onClick={handleClick}\n        size={size}\n        loading={loading}\n        tabIndex={loading ? -1 : 0}\n        {...rest}\n      >\n        {loading && <Spinner size={size} color=\"currentColor\" />}\n\n        <Text\n          lineHeight={1}\n          variant={BUTTON_TEXT_SIZES[size!]}\n          opacity={loading ? 0 : 1}\n        >\n          {children}\n        </Text>\n      </Container>\n    )\n  }\n)\n\nButtonV3.defaultProps = {\n  size: \"medium\",\n  variant: \"primaryBlack\",\n}\n\ntype ContainerProps = Pick<\n  ButtonProps,\n  \"size\" | \"inline\" | \"loading\" | \"hover\" | \"focus\" | \"disabled\"\n>\n\nconst Container = styled.button<ContainerProps>`\n  display: inline-flex;\n  cursor: pointer;\n  position: relative;\n  white-space: nowrap;\n  font-weight: normal;\n  text-decoration: none;\n  align-items: center;\n  text-align: center;\n  justify-content: center;\n  border: 1px solid;\n  transition: color 0.25s ease, border-color 0.25s ease,\n    background-color 0.25s ease, box-shadow 0.25s ease;\n\n  ${boxMixin};\n\n  /* Handle sizing */\n  ${variant({ prop: \"size\", variants: BUTTON_SIZES })}\n\n  ${(props) => {\n    // Handle props driven states\n    if (props.hover) {\n      return variant({ variants: BUTTON_VARIANTS.hover })\n    }\n\n    if (props.focus) {\n      return css`\n        outline: 0;\n        ${variant({ variants: BUTTON_VARIANTS.focus })}\n      `\n    }\n\n    if (props.loading) {\n      return css`\n        cursor: auto;\n        transition: none;\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.loading })}\n      `\n    }\n\n    if (props.disabled) {\n      return css`\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      `\n    }\n\n    return variant({ variants: BUTTON_VARIANTS.default })\n  }}\n\n  ${() => {\n    // Handle pseudo classes\n    return css`\n      @media ${THEME_V3.mediaQueries.hover} {\n        &:hover {\n          ${variant({ variants: BUTTON_VARIANTS.hover })}\n        }\n      }\n\n      &:focus {\n        outline: 0;\n        ${variant({ variants: BUTTON_VARIANTS.focus })}\n      }\n\n      &:disabled {\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      }\n    `\n  }};\n`\n"],"file":"Button.js"}
+{"version":3,"sources":["../../../../src/elements/Button/v3/Button.tsx"],"names":["ButtonV3","React","forwardRef","forwardedRef","children","loading","color","size","onClick","rest","ref","handleClick","event","current","blur","BUTTON_TEXT_SIZES","displayName","defaultProps","variant","Container","styled","button","boxMixin","prop","variants","BUTTON_SIZES","props","hover","BUTTON_VARIANTS","focus","css","disabled","default","THEME_V3","mediaQueries"],"mappings":"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","sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport React, { useEffect, useRef } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { THEME_V3 } from \"../../../themes\"\nimport { boxMixin } from \"../../Box\"\nimport { Spinner } from \"../../Spinner\"\nimport { Text } from \"../../Text\"\nimport { ButtonProps } from \"../Button\"\nimport { BUTTON_SIZES, BUTTON_TEXT_SIZES, BUTTON_VARIANTS } from \"./tokens\"\n\nexport const ButtonV3: React.ForwardRefExoticComponent<\n  ButtonProps & { ref?: React.Ref<HTMLElement> }\n> = React.forwardRef(\n  ({ children, loading, color, size, onClick, ...rest }, forwardedRef) => {\n    const ref = useRef<HTMLButtonElement | null>(null)\n\n    const handleClick = (\n      event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n    ) => {\n      if (!loading && onClick) {\n        onClick(event)\n      }\n    }\n\n    useEffect(() => {\n      if (loading && ref.current !== null) {\n        ref.current!.blur()\n      }\n    }, [loading])\n\n    return (\n      <Container\n        ref={composeRefs(ref, forwardedRef) as any}\n        onClick={handleClick}\n        size={size}\n        loading={loading}\n        tabIndex={loading ? -1 : 0}\n        {...rest}\n      >\n        {loading && <Spinner size={size} color=\"currentColor\" />}\n\n        <Text\n          lineHeight={1}\n          variant={BUTTON_TEXT_SIZES[size!]}\n          opacity={loading ? 0 : 1}\n          display=\"flex\"\n          alignItems=\"center\"\n          justifyContent=\"center\"\n        >\n          {children}\n        </Text>\n      </Container>\n    )\n  }\n)\n\nButtonV3.displayName = \"Button\"\n\nButtonV3.defaultProps = {\n  size: \"medium\",\n  variant: \"primaryBlack\",\n}\n\ntype ContainerProps = Pick<\n  ButtonProps,\n  \"size\" | \"inline\" | \"loading\" | \"hover\" | \"focus\" | \"disabled\"\n>\n\nconst Container = styled.button<ContainerProps>`\n  display: inline-flex;\n  cursor: pointer;\n  position: relative;\n  white-space: nowrap;\n  font-weight: normal;\n  text-decoration: none;\n  align-items: center;\n  text-align: center;\n  justify-content: center;\n  border: 1px solid;\n  transition: color 0.25s ease, border-color 0.25s ease,\n    background-color 0.25s ease, box-shadow 0.25s ease;\n\n  ${boxMixin};\n\n  /* Handle sizing */\n  ${variant({ prop: \"size\", variants: BUTTON_SIZES })}\n\n  ${(props) => {\n    // Handle props driven states\n    if (props.hover) {\n      return variant({ variants: BUTTON_VARIANTS.hover })\n    }\n\n    if (props.focus) {\n      return css`\n        outline: 0;\n        ${variant({ variants: BUTTON_VARIANTS.focus })}\n      `\n    }\n\n    if (props.loading) {\n      return css`\n        cursor: auto;\n        transition: none;\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.loading })}\n      `\n    }\n\n    if (props.disabled) {\n      return css`\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      `\n    }\n\n    return variant({ variants: BUTTON_VARIANTS.default })\n  }}\n\n  ${() => {\n    // Handle pseudo classes\n    return css`\n      @media ${THEME_V3.mediaQueries.hover} {\n        &:hover {\n          ${variant({ variants: BUTTON_VARIANTS.hover })}\n        }\n      }\n\n      &:focus {\n        outline: 0;\n        ${variant({ variants: BUTTON_VARIANTS.focus })}\n      }\n\n      &:disabled {\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      }\n    `\n  }};\n`\n"],"file":"Button.js"}

package/dist/elements/HorizontalOverflow/HorizontalOverflow.d.ts

@@ -3,4 +3,4 @@ import { BoxProps } from "../Box";
 export declare type HorizontalOverflowProps = BoxProps & {
     children: React.ReactNode;
 };
-export declare const HorizontalOverflow: React.FC<HorizontalOverflowProps>;
+export declare const HorizontalOverflow: React.ForwardRefExoticComponent<HorizontalOverflowProps & React.RefAttributes<HTMLDivElement>>;

package/dist/elements/HorizontalOverflow/HorizontalOverflow.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.HorizontalOverflow = void 0;
 
+var _composeReactRefs = _interopRequireDefault(require("@seznam/compose-react-refs"));
+
 var _themeGet = require("@styled-system/theme-get");
 
 var _react = _interopRequireWildcard(require("react"));
@@ -21,12 +23,12 @@ var _splitProps = require("../../utils/splitProps");
 
 var _Box = require("../Box");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -61,8 +63,7 @@ var Rail = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "HorizontalOverflow__Rail",
   componentId: "yzjfm6-2"
 })(["white-space:nowrap;min-width:100%;height:100%;"]);
-
-var HorizontalOverflow = function HorizontalOverflow(_ref2) {
+var HorizontalOverflow = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, forwardedRef) {
   var children = _ref2.children,
       rest = _objectWithoutProperties(_ref2, ["children"]);
 
@@ -100,17 +101,20 @@ var HorizontalOverflow = function HorizontalOverflow(_ref2) {
     setAtEnd(false);
   };
 
-  return /*#__PURE__*/_react.default.createElement(Overlay, _extends({
-    atEnd: atEnd
-  }, boxProps), /*#__PURE__*/_react.default.createElement(Viewport, {
-    ref: ref,
-    onScroll: updateAtEnd
-  }, /*#__PURE__*/_react.default.createElement(Rail, _extends({
-    display: "inline-flex",
-    verticalAlign: "top"
-  }, railProps), children)));
-};
-
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    _react.default.createElement(Overlay, _extends({
+      atEnd: atEnd
+    }, boxProps), /*#__PURE__*/_react.default.createElement(Viewport, {
+      ref: (0, _composeReactRefs.default)(ref, forwardedRef),
+      onScroll: updateAtEnd
+    }, /*#__PURE__*/_react.default.createElement(Rail, _extends({
+      display: "inline-flex",
+      verticalAlign: "top"
+    }, railProps), children)))
+  );
+});
 exports.HorizontalOverflow = HorizontalOverflow;
 HorizontalOverflow.displayName = "HorizontalOverflow";
 //# sourceMappingURL=HorizontalOverflow.js.map

package/dist/elements/HorizontalOverflow/HorizontalOverflow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/HorizontalOverflow/HorizontalOverflow.tsx"],"names":["splitRailProps","padding","justifyContent","border","Overlay","Box","atEnd","Viewport","visuallyDisableScrollbar","Rail","HorizontalOverflow","children","rest","ref","updateAtEnd","window","addEventListener","removeEventListener","railProps","boxProps","setAtEnd","current","scrollLeft","scrollWidth","clientWidth"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAQA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,cAAc,GAAG,4BACrB,2BAAQC,qBAAR,EAAiBC,4BAAjB,EAAiCC,oBAAjC,CADqB,CAAvB;AAIA,IAAMC,OAAO,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,+QAWA,wBAAS,SAAT,CAXA,EAsBE;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,SAAgBA,KAAK,GAAG,CAAH,GAAO,CAA5B;AAAA,CAtBF,CAAb;AA0BA,IAAMC,QAAQ,GAAG,+BAAOF,QAAP,CAAH;AAAA;AAAA;AAAA,0EAIVG,0BAJU,CAAd;AAOA,IAAMC,IAAI,GAAG,+BAAOJ,QAAP,CAAH;AAAA;AAAA;AAAA,sDAAV;;AAQO,IAAMK,kBAAqD,GAAG,SAAxDA,kBAAwD,QAG/D;AAAA,MAFJC,QAEI,SAFJA,QAEI;AAAA,MADDC,IACC;;AACJ,MAAMC,GAAG,GAAG,oBAAZ;AAEA,wBAAU,YAAM;AACdC,IAAAA,WAAW;AACXC,IAAAA,MAAM,CAACC,gBAAP,CAAwB,QAAxB,EAAkCF,WAAlC;AACA,WAAO,YAAM;AACXC,MAAAA,MAAM,CAACE,mBAAP,CAA2B,QAA3B,EAAqCH,WAArC;AACD,KAFD;AAGD,GAND,EAMG,EANH;;AAHI,wBAW0Bd,cAAc,CAACY,IAAD,CAXxC;AAAA;AAAA,MAWGM,SAXH;AAAA,MAWcC,QAXd;;AAAA,kBAasB,qBAAS,KAAT,CAbtB;AAAA;AAAA,MAaGb,KAbH;AAAA,MAaUc,QAbV;;AAeJ,MAAMN,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAI,CAACD,GAAG,CAACQ,OAAT,EAAkB;AADM,uBAKpBR,GALoB,CAItBQ,OAJsB;AAAA,QAIXC,UAJW,gBAIXA,UAJW;AAAA,QAICC,WAJD,gBAICA,WAJD;AAAA,QAIcC,WAJd,gBAIcA,WAJd;;AAOxB,QAAIF,UAAU,GAAGE,WAAb,KAA6BD,WAAjC,EAA8C;AAC5CH,MAAAA,QAAQ,CAAC,IAAD,CAAR;AACA;AACD;;AAEDA,IAAAA,QAAQ,CAAC,KAAD,CAAR;AACD,GAbD;;AAeA,sBACE,6BAAC,OAAD;AAAS,IAAA,KAAK,EAAEd;AAAhB,KAA2Ba,QAA3B,gBACE,6BAAC,QAAD;AAAU,IAAA,GAAG,EAAEN,GAAf;AAA2B,IAAA,QAAQ,EAAEC;AAArC,kBACE,6BAAC,IAAD;AAAM,IAAA,OAAO,EAAC,aAAd;AAA4B,IAAA,aAAa,EAAC;AAA1C,KAAoDI,SAApD,GACGP,QADH,CADF,CADF,CADF;AASD,CA1CM;;;AAAMD,kB","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport {\n  border,\n  compose,\n  justifyContent,\n  JustifyContentProps,\n  padding,\n  PaddingProps,\n} from \"styled-system\"\nimport { visuallyDisableScrollbar } from \"../..\"\nimport { splitProps } from \"../../utils/splitProps\"\nimport { Box, BoxProps } from \"../Box\"\n\nconst splitRailProps = splitProps<PaddingProps & JustifyContentProps>(\n  compose(padding, justifyContent, border)\n)\n\nconst Overlay = styled(Box)<{ atEnd: boolean }>`\n  position: relative;\n\n  /* Fade-out gradient */\n  &::after {\n    display: block;\n    content: \"\";\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: ${themeGet(\"space.6\")};\n    z-index: 1;\n    pointer-events: none;\n    background: linear-gradient(\n      to right,\n      rgba(255, 255, 255, 0) 0%,\n      rgba(255, 255, 255, 1) 100%\n    );\n\n    /* Hide when scrolled all the way over */\n    transition: opacity 250ms;\n    opacity: ${({ atEnd }) => (atEnd ? 0 : 1)};\n  }\n`\n\nconst Viewport = styled(Box)`\n  height: 100%;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  ${visuallyDisableScrollbar}\n`\n\nconst Rail = styled(Box)`\n  white-space: nowrap;\n  min-width: 100%;\n  height: 100%;\n`\n\nexport type HorizontalOverflowProps = BoxProps & { children: React.ReactNode }\n\nexport const HorizontalOverflow: React.FC<HorizontalOverflowProps> = ({\n  children,\n  ...rest\n}) => {\n  const ref = useRef<HTMLDivElement | null>()\n\n  useEffect(() => {\n    updateAtEnd()\n    window.addEventListener(\"resize\", updateAtEnd)\n    return () => {\n      window.removeEventListener(\"resize\", updateAtEnd)\n    }\n  }, [])\n\n  const [railProps, boxProps] = splitRailProps(rest)\n\n  const [atEnd, setAtEnd] = useState(false)\n\n  const updateAtEnd = () => {\n    if (!ref.current) return\n\n    const {\n      current: { scrollLeft, scrollWidth, clientWidth },\n    } = ref\n\n    if (scrollLeft + clientWidth === scrollWidth) {\n      setAtEnd(true)\n      return\n    }\n\n    setAtEnd(false)\n  }\n\n  return (\n    <Overlay atEnd={atEnd} {...boxProps}>\n      <Viewport ref={ref as any} onScroll={updateAtEnd}>\n        <Rail display=\"inline-flex\" verticalAlign=\"top\" {...railProps}>\n          {children}\n        </Rail>\n      </Viewport>\n    </Overlay>\n  )\n}\n"],"file":"HorizontalOverflow.js"}
+{"version":3,"sources":["../../../src/elements/HorizontalOverflow/HorizontalOverflow.tsx"],"names":["splitRailProps","padding","justifyContent","border","Overlay","Box","atEnd","Viewport","visuallyDisableScrollbar","Rail","HorizontalOverflow","forwardedRef","children","rest","ref","updateAtEnd","window","addEventListener","removeEventListener","railProps","boxProps","setAtEnd","current","scrollLeft","scrollWidth","clientWidth","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAQA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,cAAc,GAAG,4BACrB,2BAAQC,qBAAR,EAAiBC,4BAAjB,EAAiCC,oBAAjC,CADqB,CAAvB;AAIA,IAAMC,OAAO,GAAG,+BAAOC,QAAP,CAAH;AAAA;AAAA;AAAA,+QAWA,wBAAS,SAAT,CAXA,EAsBE;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,SAAgBA,KAAK,GAAG,CAAH,GAAO,CAA5B;AAAA,CAtBF,CAAb;AA0BA,IAAMC,QAAQ,GAAG,+BAAOF,QAAP,CAAH;AAAA;AAAA;AAAA,0EAIVG,0BAJU,CAAd;AAOA,IAAMC,IAAI,GAAG,+BAAOJ,QAAP,CAAH;AAAA;AAAA;AAAA,sDAAV;AAQO,IAAMK,kBAEZ,gBAAG,uBAAW,iBAAwBC,YAAxB,EAAyC;AAAA,MAAtCC,QAAsC,SAAtCA,QAAsC;AAAA,MAAzBC,IAAyB;;AACtD,MAAMC,GAAG,GAAG,oBAAZ;AAEA,wBAAU,YAAM;AACdC,IAAAA,WAAW;AACXC,IAAAA,MAAM,CAACC,gBAAP,CAAwB,QAAxB,EAAkCF,WAAlC;AACA,WAAO,YAAM;AACXC,MAAAA,MAAM,CAACE,mBAAP,CAA2B,QAA3B,EAAqCH,WAArC;AACD,KAFD;AAGD,GAND,EAMG,EANH;;AAHsD,wBAWxBf,cAAc,CAACa,IAAD,CAXU;AAAA;AAAA,MAW/CM,SAX+C;AAAA,MAWpCC,QAXoC;;AAAA,kBAa5B,qBAAS,KAAT,CAb4B;AAAA;AAAA,MAa/Cd,KAb+C;AAAA,MAaxCe,QAbwC;;AAetD,MAAMN,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAI,CAACD,GAAG,CAACQ,OAAT,EAAkB;AADM,uBAKpBR,GALoB,CAItBQ,OAJsB;AAAA,QAIXC,UAJW,gBAIXA,UAJW;AAAA,QAICC,WAJD,gBAICA,WAJD;AAAA,QAIcC,WAJd,gBAIcA,WAJd;;AAOxB,QAAIF,UAAU,GAAGE,WAAb,KAA6BD,WAAjC,EAA8C;AAC5CH,MAAAA,QAAQ,CAAC,IAAD,CAAR;AACA;AACD;;AAEDA,IAAAA,QAAQ,CAAC,KAAD,CAAR;AACD,GAbD;;AAeA;AAAA;AACE;AACA,iCAAC,OAAD;AAAS,MAAA,KAAK,EAAEf;AAAhB,OAA2Bc,QAA3B,gBACE,6BAAC,QAAD;AACE,MAAA,GAAG,EAAE,+BAAYN,GAAZ,EAAiBH,YAAjB,CADP;AAEE,MAAA,QAAQ,EAAEI;AAFZ,oBAIE,6BAAC,IAAD;AAAM,MAAA,OAAO,EAAC,aAAd;AAA4B,MAAA,aAAa,EAAC;AAA1C,OAAoDI,SAApD,GACGP,QADH,CAJF,CADF;AAFF;AAaD,CA3CG,CAFG;;AA+CPF,kBAAkB,CAACgB,WAAnB,GAAiC,oBAAjC","sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport React, { forwardRef, useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport {\n  border,\n  compose,\n  justifyContent,\n  JustifyContentProps,\n  padding,\n  PaddingProps,\n} from \"styled-system\"\nimport { visuallyDisableScrollbar } from \"../..\"\nimport { splitProps } from \"../../utils/splitProps\"\nimport { Box, BoxProps } from \"../Box\"\n\nconst splitRailProps = splitProps<PaddingProps & JustifyContentProps>(\n  compose(padding, justifyContent, border)\n)\n\nconst Overlay = styled(Box)<{ atEnd: boolean }>`\n  position: relative;\n\n  /* Fade-out gradient */\n  &::after {\n    display: block;\n    content: \"\";\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    width: ${themeGet(\"space.6\")};\n    z-index: 1;\n    pointer-events: none;\n    background: linear-gradient(\n      to right,\n      rgba(255, 255, 255, 0) 0%,\n      rgba(255, 255, 255, 1) 100%\n    );\n\n    /* Hide when scrolled all the way over */\n    transition: opacity 250ms;\n    opacity: ${({ atEnd }) => (atEnd ? 0 : 1)};\n  }\n`\n\nconst Viewport = styled(Box)`\n  height: 100%;\n  overflow-x: auto;\n  -webkit-overflow-scrolling: touch;\n  ${visuallyDisableScrollbar}\n`\n\nconst Rail = styled(Box)`\n  white-space: nowrap;\n  min-width: 100%;\n  height: 100%;\n`\n\nexport type HorizontalOverflowProps = BoxProps & { children: React.ReactNode }\n\nexport const HorizontalOverflow: React.ForwardRefExoticComponent<\n  HorizontalOverflowProps & React.RefAttributes<HTMLDivElement>\n> = forwardRef(({ children, ...rest }, forwardedRef) => {\n  const ref = useRef<HTMLDivElement | null>()\n\n  useEffect(() => {\n    updateAtEnd()\n    window.addEventListener(\"resize\", updateAtEnd)\n    return () => {\n      window.removeEventListener(\"resize\", updateAtEnd)\n    }\n  }, [])\n\n  const [railProps, boxProps] = splitRailProps(rest)\n\n  const [atEnd, setAtEnd] = useState(false)\n\n  const updateAtEnd = () => {\n    if (!ref.current) return\n\n    const {\n      current: { scrollLeft, scrollWidth, clientWidth },\n    } = ref\n\n    if (scrollLeft + clientWidth === scrollWidth) {\n      setAtEnd(true)\n      return\n    }\n\n    setAtEnd(false)\n  }\n\n  return (\n    // @ts-ignore\n    <Overlay atEnd={atEnd} {...boxProps}>\n      <Viewport\n        ref={composeRefs(ref, forwardedRef) as any}\n        onScroll={updateAtEnd}\n      >\n        <Rail display=\"inline-flex\" verticalAlign=\"top\" {...railProps}>\n          {children}\n        </Rail>\n      </Viewport>\n    </Overlay>\n  )\n})\n\nHorizontalOverflow.displayName = \"HorizontalOverflow\"\n"],"file":"HorizontalOverflow.js"}

package/dist/elements/Stepper/Stepper.js

@@ -77,9 +77,11 @@ var Stepper = function Stepper(_ref) {
       tabs = _useTabs.tabs,
       activeTab = _useTabs.activeTab,
       activeTabIndex = _useTabs.activeTabIndex,
-      handleClick = _useTabs.handleClick;
+      handleClick = _useTabs.handleClick,
+      ref = _useTabs.ref;
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_BaseTabs.BaseTabs, _extends({
+    ref: ref,
     separator: tokens.joinSeparator,
     fill: tokens.fill
   }, rest), tabs.map(function (tab, i) {
@@ -110,7 +112,7 @@ var Stepper = function Stepper(_ref) {
       fill: "green100",
       ml: 1
     })), tokens.inlineSeparator));
-  })), activeTab.child);
+  })), activeTab.current.child);
 };
 /** StepProps */
 

package/dist/elements/Stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Stepper/Stepper.tsx"],"names":["Stepper","currentStepIndex","disableNavigation","initialTabIndex","children","fill","rest","tokens","v2","joinSeparator","inlineSeparator","verticalAlignment","horizontalAlignment","checkAlignment","textVariant","v3","tabs","activeTab","activeTabIndex","handleClick","map","tab","i","Clickable","ref","undefined","child","props","name","Step","defaultProps","mb"],"mappings":"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","sourcesContent":["import { TextVariant } from \"@artsy/palette-tokens/dist/typography/types\"\nimport React from \"react\"\nimport { CheckIcon } from \"../../svgs/CheckIcon\"\nimport { ChevronIcon } from \"../../svgs/ChevronIcon\"\nimport { useThemeConfig } from \"../../Theme\"\nimport { BaseTab, BaseTabs } from \"../BaseTabs\"\nimport { Box } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { TabProps, TabsProps, useTabs } from \"../Tabs\"\n\nexport interface StepperProps extends TabsProps {\n  /** The step user currently is at (e.g. previous steps completed) */\n  currentStepIndex: number\n  /** Prevents the tabs from being directly clickable */\n  disableNavigation?: boolean\n}\n\n/** Stepper */\nexport const Stepper: React.FC<StepperProps> = ({\n  currentStepIndex,\n  disableNavigation,\n  initialTabIndex = 0,\n  children,\n  fill,\n  ...rest\n}) => {\n  const tokens = useThemeConfig({\n    v2: {\n      fill,\n      joinSeparator: <ChevronIcon fill=\"black30\" width={12} mx={2} />,\n      inlineSeparator: null,\n      verticalAlignment: \"center\",\n      horizontalAlignment: \"center\",\n      checkAlignment: \"left\",\n      textVariant: \"mediumText\" as TextVariant,\n    },\n    v3: {\n      fill: true,\n      joinSeparator: null,\n      inlineSeparator: <ChevronIcon fill=\"black60\" height={10} ml={1} />,\n      verticalAlignment: \"center\",\n      horizontalAlignment: \"flex-start\",\n      checkAlignment: \"right\",\n      textVariant: \"sm\" as TextVariant,\n    },\n  })\n\n  const { tabs, activeTab, activeTabIndex, handleClick } = useTabs({\n    children,\n    initialTabIndex,\n  })\n\n  return (\n    <>\n      <BaseTabs separator={tokens.joinSeparator!} fill={tokens.fill} {...rest}>\n        {tabs.map((tab, i) => {\n          return (\n            <BaseTab\n              key={i}\n              as={Clickable}\n              ref={tab.ref as any}\n              aria-selected={i === activeTabIndex}\n              disabled={disableNavigation || i > currentStepIndex}\n              onClick={handleClick(i)}\n              active={i === activeTabIndex}\n              variant={tokens.textVariant}\n              justifyContent={tokens.horizontalAlignment}\n            >\n              <Flex\n                alignItems={tokens.verticalAlignment}\n                justifyContent=\"space-between\"\n                flex={1}\n              >\n                <Flex alignItems={tokens.verticalAlignment}>\n                  {currentStepIndex > i && tokens.checkAlignment === \"left\" && (\n                    <CheckIcon fill=\"green100\" mr={1} />\n                  )}\n\n                  <Box color={i > currentStepIndex ? \"black30\" : undefined}>\n                    {tab.child.props.name}\n                  </Box>\n\n                  {currentStepIndex > i &&\n                    tokens.checkAlignment === \"right\" && (\n                      <CheckIcon\n                        width={16}\n                        height={16}\n                        fill=\"green100\"\n                        ml={1}\n                      />\n                    )}\n                </Flex>\n\n                {tokens.inlineSeparator}\n              </Flex>\n            </BaseTab>\n          )\n        })}\n      </BaseTabs>\n\n      {activeTab.child}\n    </>\n  )\n}\n\n/** StepProps */\nexport type StepProps = TabProps\n\n/**\n * An individual step.\n * Does nothing on its own; props are dealt with inside of Steps.\n */\nexport const Step: React.FC<StepProps> = ({ children }) => <>{children}</>\n\nStepper.defaultProps = {\n  mb: 2,\n}\n"],"file":"Stepper.js"}
+{"version":3,"sources":["../../../src/elements/Stepper/Stepper.tsx"],"names":["Stepper","currentStepIndex","disableNavigation","initialTabIndex","children","fill","rest","tokens","v2","joinSeparator","inlineSeparator","verticalAlignment","horizontalAlignment","checkAlignment","textVariant","v3","tabs","activeTab","activeTabIndex","handleClick","ref","map","tab","i","Clickable","undefined","child","props","name","current","Step","defaultProps","mb"],"mappings":"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","sourcesContent":["import { TextVariant } from \"@artsy/palette-tokens/dist/typography/types\"\nimport React from \"react\"\nimport { CheckIcon } from \"../../svgs/CheckIcon\"\nimport { ChevronIcon } from \"../../svgs/ChevronIcon\"\nimport { useThemeConfig } from \"../../Theme\"\nimport { BaseTab, BaseTabs } from \"../BaseTabs\"\nimport { Box } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { Flex } from \"../Flex\"\nimport { TabProps, TabsProps, useTabs } from \"../Tabs\"\n\nexport interface StepperProps extends TabsProps {\n  /** The step user currently is at (e.g. previous steps completed) */\n  currentStepIndex: number\n  /** Prevents the tabs from being directly clickable */\n  disableNavigation?: boolean\n}\n\n/** Stepper */\nexport const Stepper: React.FC<StepperProps> = ({\n  currentStepIndex,\n  disableNavigation,\n  initialTabIndex = 0,\n  children,\n  fill,\n  ...rest\n}) => {\n  const tokens = useThemeConfig({\n    v2: {\n      fill,\n      joinSeparator: <ChevronIcon fill=\"black30\" width={12} mx={2} />,\n      inlineSeparator: null,\n      verticalAlignment: \"center\",\n      horizontalAlignment: \"center\",\n      checkAlignment: \"left\",\n      textVariant: \"mediumText\" as TextVariant,\n    },\n    v3: {\n      fill: true,\n      joinSeparator: null,\n      inlineSeparator: <ChevronIcon fill=\"black60\" height={10} ml={1} />,\n      verticalAlignment: \"center\",\n      horizontalAlignment: \"flex-start\",\n      checkAlignment: \"right\",\n      textVariant: \"sm\" as TextVariant,\n    },\n  })\n\n  const { tabs, activeTab, activeTabIndex, handleClick, ref } = useTabs({\n    children,\n    initialTabIndex,\n  })\n\n  return (\n    <>\n      <BaseTabs\n        ref={ref}\n        separator={tokens.joinSeparator!}\n        fill={tokens.fill}\n        {...rest}\n      >\n        {tabs.map((tab, i) => {\n          return (\n            <BaseTab\n              key={i}\n              as={Clickable}\n              ref={tab.ref as any}\n              aria-selected={i === activeTabIndex}\n              disabled={disableNavigation || i > currentStepIndex}\n              onClick={handleClick(i)}\n              active={i === activeTabIndex}\n              variant={tokens.textVariant}\n              justifyContent={tokens.horizontalAlignment}\n            >\n              <Flex\n                alignItems={tokens.verticalAlignment}\n                justifyContent=\"space-between\"\n                flex={1}\n              >\n                <Flex alignItems={tokens.verticalAlignment}>\n                  {currentStepIndex > i && tokens.checkAlignment === \"left\" && (\n                    <CheckIcon fill=\"green100\" mr={1} />\n                  )}\n\n                  <Box color={i > currentStepIndex ? \"black30\" : undefined}>\n                    {tab.child.props.name}\n                  </Box>\n\n                  {currentStepIndex > i &&\n                    tokens.checkAlignment === \"right\" && (\n                      <CheckIcon\n                        width={16}\n                        height={16}\n                        fill=\"green100\"\n                        ml={1}\n                      />\n                    )}\n                </Flex>\n\n                {tokens.inlineSeparator}\n              </Flex>\n            </BaseTab>\n          )\n        })}\n      </BaseTabs>\n\n      {activeTab.current.child}\n    </>\n  )\n}\n\n/** StepProps */\nexport type StepProps = TabProps\n\n/**\n * An individual step.\n * Does nothing on its own; props are dealt with inside of Steps.\n */\nexport const Step: React.FC<StepProps> = ({ children }) => <>{children}</>\n\nStepper.defaultProps = {\n  mb: 2,\n}\n"],"file":"Stepper.js"}

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

@@ -24,16 +24,17 @@ export interface TabsProps extends BaseTabsProps {
 }
 /** Tabs functionality */
 export declare const useTabs: ({ children, initialTabIndex, onChange, }: TabsProps) => {
-    tabs: {
-        child: TabLike;
-        ref: React.RefObject<HTMLButtonElement | null>;
-    }[];
-    activeTab: {
+    activeTab: React.MutableRefObject<{
         child: TabLike;
         ref: React.RefObject<HTMLButtonElement | null>;
-    };
+    }>;
     activeTabIndex: number;
     handleClick: (index: number) => () => void;
+    ref: React.MutableRefObject<HTMLDivElement | null>;
+    tabs: {
+        child: TabLike;
+        ref: React.RefObject<HTMLButtonElement | null>;
+    }[];
 };
 /** A tab bar navigation component */
 export declare const Tabs: React.FC<TabsProps>;

package/dist/elements/Tabs/Tabs.js

@@ -23,6 +23,8 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -45,44 +47,51 @@ var useTabs = function useTabs(_ref) {
       _ref$initialTabIndex = _ref.initialTabIndex,
       initialTabIndex = _ref$initialTabIndex === void 0 ? 0 : _ref$initialTabIndex,
       onChange = _ref.onChange;
-  var tabs = (0, _flattenChildren.flattenChildren)(children).map(function (child) {
-    return {
-      child: child,
-      ref: /*#__PURE__*/(0, _react.createRef)()
-    };
-  });
+  var tabs = (0, _react.useMemo)(function () {
+    return (0, _flattenChildren.flattenChildren)(children).map(function (child) {
+      return {
+        child: child,
+        ref: /*#__PURE__*/(0, _react.createRef)()
+      };
+    });
+  }, [children]);
 
   var _useState = (0, _react.useState)(initialTabIndex),
       _useState2 = _slicedToArray(_useState, 2),
       activeTabIndex = _useState2[0],
-      setActiveTabIndex = _useState2[1];
+      setActiveTabIndex = _useState2[1]; // Wraps active tab in a ref to prevent re-rendering.
+  // This means that we need to update the active tab before the index state change
+  // to catch the re-render.
+
 
-  var activeTab = tabs[activeTabIndex]; // If the `initialTabIndex` changes; update the active one
+  var activeTab = (0, _react.useRef)(tabs[activeTabIndex]); // If the `initialTabIndex` changes; update the active one
 
   (0, _useUpdateEffect.useUpdateEffect)(function () {
+    activeTab.current = tabs[initialTabIndex];
     setActiveTabIndex(initialTabIndex);
-  }, [initialTabIndex]);
+  }, [initialTabIndex]); // Ref of the tabs viewport
 
-  var scrollToTab = function scrollToTab() {
-    var _activeTab$ref$curren, _activeTab$ref$curren2;
+  var ref = (0, _react.useRef)(null); // Scroll to active tab when `activeTabIndex` changes
 
-    return (_activeTab$ref$curren = activeTab.ref.current) === null || _activeTab$ref$curren === void 0 ? void 0 : (_activeTab$ref$curren2 = _activeTab$ref$curren.scrollIntoView) === null || _activeTab$ref$curren2 === void 0 ? void 0 : _activeTab$ref$curren2.call(_activeTab$ref$curren, {
-      inline: "center",
-      block: "nearest",
+  (0, _react.useEffect)(function () {
+    var _ref$current$scrollTo, _ref$current;
+
+    if (!ref.current) return;
+    var tab = activeTab.current.ref.current;
+    if (!tab) return;
+    var position = tab.offsetLeft;
+    (_ref$current$scrollTo = (_ref$current = ref.current).scrollTo) === null || _ref$current$scrollTo === void 0 ? void 0 : _ref$current$scrollTo.call(_ref$current, {
+      left: position,
       behavior: "smooth"
     });
-  };
-
-  (0, _react.useEffect)(function () {
-    scrollToTab();
-  }, [tabs, activeTabIndex]);
+  }, [activeTabIndex]);
   var handleClick = (0, _react.useCallback)(function (index) {
     return function () {
       var _tabs$index$child$pro;
 
       if (index === activeTabIndex) return;
+      activeTab.current = tabs[index];
       setActiveTabIndex(index);
-      scrollToTab();
       if (!onChange) return;
       onChange({
         tabIndex: index,
@@ -90,12 +99,13 @@ var useTabs = function useTabs(_ref) {
         data: (_tabs$index$child$pro = tabs[index].child.props.data) !== null && _tabs$index$child$pro !== void 0 ? _tabs$index$child$pro : {}
       });
     };
-  }, [tabs, onChange, activeTabIndex]);
+  }, [activeTabIndex, onChange, tabs]);
   return {
-    tabs: tabs,
     activeTab: activeTab,
     activeTabIndex: activeTabIndex,
-    handleClick: handleClick
+    handleClick: handleClick,
+    ref: ref,
+    tabs: tabs
   };
 };
 /** A tab bar navigation component */
@@ -123,9 +133,12 @@ var Tabs = function Tabs(_ref2) {
       tabs = _useTabs.tabs,
       activeTab = _useTabs.activeTab,
       activeTabIndex = _useTabs.activeTabIndex,
-      handleClick = _useTabs.handleClick;
+      handleClick = _useTabs.handleClick,
+      ref = _useTabs.ref;
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_BaseTabs.BaseTabs, rest, tabs.map(function (tab, i) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_BaseTabs.BaseTabs, _extends({
+    ref: ref
+  }, rest), tabs.map(function (tab, i) {
     return /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
       key: i,
       ref: tab.ref,
@@ -136,7 +149,7 @@ var Tabs = function Tabs(_ref2) {
       active: i === activeTabIndex,
       variant: textVariant
     }, /*#__PURE__*/_react.default.createElement("span", null, tab.child.props.name)));
-  })), activeTab.child);
+  })), activeTab.current.child);
 };
 
 exports.Tabs = Tabs;

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","scrollToTab","current","scrollIntoView","inline","block","behavior","handleClick","index","tabIndex","name","props","data","Tabs","rest","textVariant","v2","v3","tab","i","defaultProps","mb","Tab"],"mappings":"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","sourcesContent":["import { TextVariant } from \"@artsy/palette-tokens/dist/typography/types\"\nimport React, { createRef, useCallback, useEffect, useState } 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 = flattenChildren<TabLike>(children).map((child) => ({\n    child,\n    ref: createRef<HTMLButtonElement | null>(),\n  }))\n\n  const [activeTabIndex, setActiveTabIndex] = useState<number>(initialTabIndex)\n  const activeTab = tabs[activeTabIndex]\n\n  // If the `initialTabIndex` changes; update the active one\n  useUpdateEffect(() => {\n    setActiveTabIndex(initialTabIndex)\n  }, [initialTabIndex])\n\n  const scrollToTab = () =>\n    activeTab.ref.current?.scrollIntoView?.({\n      inline: \"center\",\n      block: \"nearest\",\n      behavior: \"smooth\",\n    })\n\n  useEffect(() => {\n    scrollToTab()\n  }, [tabs, activeTabIndex])\n\n  const handleClick = useCallback(\n    (index: number) => {\n      return () => {\n        if (index === activeTabIndex) return\n\n        setActiveTabIndex(index)\n\n        scrollToTab()\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    [tabs, onChange, activeTabIndex]\n  )\n\n  return {\n    tabs,\n    activeTab,\n    activeTabIndex,\n    handleClick,\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 } = useTabs({\n    children,\n    initialTabIndex,\n    onChange,\n  })\n\n  return (\n    <>\n      <BaseTabs {...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.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])\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

@@ -7,4 +7,23 @@ export declare const Default: () => JSX.Element;
 export declare const WithData: () => JSX.Element;
 export declare const Counts: () => JSX.Element;
 export declare const ConditionalTabs: () => JSX.Element;
-export declare const AutoScrolling: () => JSX.Element;
+export declare const AutoScrolling: {
+    (): JSX.Element;
+    story: {
+        parameters: {
+            chromatic: {
+                disable: boolean;
+            };
+        };
+    };
+};
+export declare const InitialAutoScroll: {
+    (): JSX.Element;
+    story: {
+        parameters: {
+            chromatic: {
+                disable: boolean;
+            };
+        };
+    };
+};

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

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AutoScrolling = exports.ConditionalTabs = exports.Counts = exports.WithData = exports.Default = exports.default = void 0;
+exports.InitialAutoScroll = exports.AutoScrolling = exports.ConditionalTabs = exports.Counts = exports.WithData = exports.Default = exports.default = void 0;
 
 var _addonActions = require("@storybook/addon-actions");
 
@@ -13,16 +13,16 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _storybookStates = require("storybook-states");
 
-var _Button = require("../Button");
-
-var _Flex = require("../Flex");
-
 var _svgs = require("../../svgs");
 
 var _Sup = require("../Sup");
 
 var _ = require("./");
 
+var _Box = require("../Box");
+
+var _useCursor2 = require("use-cursor");
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
@@ -141,23 +141,91 @@ exports.ConditionalTabs = ConditionalTabs;
 ConditionalTabs.displayName = "ConditionalTabs";
 
 var AutoScrolling = function AutoScrolling() {
-  var _useState3 = (0, _react.useState)(0),
+  var _useCursor = (0, _useCursor2.useCursor)({
+    max: 15
+  }),
+      initialTabIndex = _useCursor.index,
+      handleNext = _useCursor.handleNext;
+
+  (0, _react.useEffect)(function () {
+    var interval = setInterval(handleNext, 500);
+    return function () {
+      return clearInterval(interval);
+    };
+  }, [handleNext]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Tabs, {
+    initialTabIndex: initialTabIndex,
+    onChange: (0, _addonActions.action)("onChange")
+  }, /*#__PURE__*/_react.default.createElement(_.Tab, {
+    name: "First"
+  }, "First"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+    name: "Second"
+  }, "Second"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+    name: "Third"
+  }, "Third"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+    name: "Fourth"
+  }, "Fourth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+    name: "Fifth"
+  }, "Fifth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+    name: "Sixth"
+  }, "Sixth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+    name: "Seventh"
+  }, "Seventh"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+    name: "Eighth"
+  }, "Eighth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+    name: "Nineth"
+  }, "Nineth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+    name: "Tenth"
+  }, "Tenth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+    name: "Eleventh"
+  }, "Eleventh"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+    name: "Twelveth"
+  }, "Twelveth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+    name: "Thirteenth"
+  }, "Thirteenth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+    name: "Fourteenth"
+  }, "Fourteenth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
+    name: "Fifteenth"
+  }, "Fifteenth")), /*#__PURE__*/_react.default.createElement("pre", null, JSON.stringify({
+    initialTabIndex: initialTabIndex
+  })));
+};
+
+exports.AutoScrolling = AutoScrolling;
+AutoScrolling.story = {
+  parameters: {
+    chromatic: {
+      disable: true
+    }
+  }
+};
+
+var InitialAutoScroll = function InitialAutoScroll() {
+  var _useState3 = (0, _react.useState)(1),
       _useState4 = _slicedToArray(_useState3, 2),
-      activeTabIndex = _useState4[0],
-      setActiveTabIndex = _useState4[1];
+      key = _useState4[0],
+      setKey = _useState4[1];
 
-  return /*#__PURE__*/_react.default.createElement(_.Tabs, {
+  (0, _react.useEffect)(function () {
+    var interval = setInterval(function () {
+      setKey(function (key) {
+        return key + 1;
+      });
+    }, 500);
+    return function () {
+      return clearInterval(interval);
+    };
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+    bg: "black10",
+    height: 1000,
+    p: 2
+  }, "The vertical scroll of this page should be at the top.", /*#__PURE__*/_react.default.createElement("br", null), "Scroll down to see the tabs.", /*#__PURE__*/_react.default.createElement("br", null), "Render: #", key), /*#__PURE__*/_react.default.createElement(_.Tabs, {
     onChange: (0, _addonActions.action)("onChange"),
-    initialTabIndex: activeTabIndex
+    initialTabIndex: 14
   }, /*#__PURE__*/_react.default.createElement(_.Tab, {
     name: "First"
-  }, "First", /*#__PURE__*/_react.default.createElement(_Flex.Flex, null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    size: "small",
-    marginTop: 4,
-    onClick: function onClick() {
-      setActiveTabIndex(14);
-    }
-  }, "Scroll to last"))), /*#__PURE__*/_react.default.createElement(_.Tab, {
+  }, "First"), /*#__PURE__*/_react.default.createElement(_.Tab, {
     name: "Second"
   }, "Second"), /*#__PURE__*/_react.default.createElement(_.Tab, {
     name: "Third"
@@ -185,15 +253,18 @@ var AutoScrolling = function AutoScrolling() {
     name: "Fourteenth"
   }, "Fourteenth"), /*#__PURE__*/_react.default.createElement(_.Tab, {
     name: "Fifteenth"
-  }, "Fifteenth", /*#__PURE__*/_react.default.createElement(_Flex.Flex, null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    size: "small",
-    marginTop: 4,
-    onClick: function onClick() {
-      setActiveTabIndex(0);
-    }
-  }, "Scroll to first"))));
+  }, "This tab should be active & visible on mount.")), /*#__PURE__*/_react.default.createElement(_Box.Box, {
+    bg: "black10",
+    height: 1000
+  }));
 };
 
-exports.AutoScrolling = AutoScrolling;
-AutoScrolling.displayName = "AutoScrolling";
+exports.InitialAutoScroll = InitialAutoScroll;
+InitialAutoScroll.story = {
+  parameters: {
+    chromatic: {
+      disable: true
+    }
+  }
+};
 //# 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","activeTabIndex","setActiveTabIndex"],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Button } from \"../Button\"\nimport { Flex } from \"../Flex\"\nimport { ChevronIcon } from \"../../svgs\"\nimport { Sup } from \"../Sup\"\nimport { Tab, Tabs, TabsProps } from \"./\"\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 [activeTabIndex, setActiveTabIndex] = useState(0)\n\n  return (\n    <Tabs onChange={action(\"onChange\")} initialTabIndex={activeTabIndex}>\n      <Tab name=\"First\">\n        First\n        <Flex>\n          <Button\n            size=\"small\"\n            marginTop={4}\n            onClick={() => {\n              setActiveTabIndex(14)\n            }}\n          >\n            Scroll to last\n          </Button>\n        </Flex>\n      </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        Fifteenth\n        <Flex>\n          <Button\n            size=\"small\"\n            marginTop={4}\n            onClick={() => {\n              setActiveTabIndex(0)\n            }}\n          >\n            Scroll to first\n          </Button>\n        </Flex>\n      </Tab>\n    </Tabs>\n  )\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"],"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\"\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"}

package/dist/helpers/color.d.ts

@@ -5,4 +5,4 @@ import { Color } from "../Theme";
  *
  * @deprecated use component `color` or `borderColor` props, or `themeGet('colors.colorName')`
  */
-export declare const color: (colorKey: Color) => string;
+export declare const color: (colorKey: Color | "currentColor") => any;

package/dist/helpers/color.js

@@ -14,7 +14,9 @@ var _Theme = require("../Theme");
  * @deprecated use component `color` or `borderColor` props, or `themeGet('colors.colorName')`
  */
 var color = function color(colorKey) {
-  return _Theme.themeProps.colors[colorKey];
+  var _themeProps$colors$co;
+
+  return (_themeProps$colors$co = _Theme.themeProps.colors[colorKey]) !== null && _themeProps$colors$co !== void 0 ? _themeProps$colors$co : colorKey;
 };
 
 exports.color = color;

package/dist/helpers/color.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/helpers/color.ts"],"names":["color","colorKey","themeProps","colors"],"mappings":";;;;;;;AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,KAAK,GAAG,SAARA,KAAQ,CAACC,QAAD;AAAA,SAAqBC,kBAAWC,MAAX,CAAkBF,QAAlB,CAArB;AAAA,CAAd","sourcesContent":["import { Color, themeProps } from \"../Theme\"\n\n/**\n * A helper to easily access colors when not in a styled-components or\n * styled-systems context.\n *\n * @deprecated use component `color` or `borderColor` props, or `themeGet('colors.colorName')`\n */\nexport const color = (colorKey: Color) => themeProps.colors[colorKey]\n"],"file":"color.js"}
+{"version":3,"sources":["../../src/helpers/color.ts"],"names":["color","colorKey","themeProps","colors"],"mappings":";;;;;;;AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,KAAK,GAAG,SAARA,KAAQ,CAACC,QAAD;AAAA;;AAAA,kCACnBC,kBAAWC,MAAX,CAAkBF,QAAlB,CADmB,yEACYA,QADZ;AAAA,CAAd","sourcesContent":["import { Color, themeProps } from \"../Theme\"\n\n/**\n * A helper to easily access colors when not in a styled-components or\n * styled-systems context.\n *\n * @deprecated use component `color` or `borderColor` props, or `themeGet('colors.colorName')`\n */\nexport const color = (colorKey: Color | \"currentColor\") =>\n  themeProps.colors[colorKey] ?? colorKey\n"],"file":"color.js"}

package/dist/svgs/Icon.d.ts

@@ -2,7 +2,7 @@ import React, { FC } from "react";
 import { PositionProps, SpaceProps } from "styled-system";
 import { Color } from "../Theme";
 export interface IconProps extends React.SVGProps<any>, SpaceProps, PositionProps {
-    fill?: Color;
+    fill?: Color | "currentColor";
     title?: string;
 }
 /** Wrapper for icons to include space */

package/dist/svgs/Icon.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/svgs/Icon.tsx"],"names":["iconMixin","space","position","Icon","styled","svg","defaultProps","fill","height","width","Path","props","Title","G","Circle","Rect"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAiBA,IAAMA,SAAS,GAAG,2BAAQC,mBAAR,EAAeC,sBAAf,CAAlB;AAEA;;AACO,IAAMC,IAAI,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,+BAEbL,SAFa,CAAV;;;AAKPG,IAAI,CAACG,YAAL,GAAoB;AAClBC,EAAAA,IAAI,EAAE,UADY;AAElBC,EAAAA,MAAM,EAAE,MAFU;AAGlBC,EAAAA,KAAK,EAAE;AAHW,CAApB;AAKA;;AACO,IAAMC,IAAuC,GAAG,SAA1CA,IAA0C,OAAkB;AAAA,MAAZC,KAAY;;AACvE,sBAAO,qCAAUA,KAAV,CAAP;AACD,CAFM;;;AAAMD,I;;AAIb;AACO,IAAME,KAAyC,GAAG,SAA5CA,KAA4C,QAAkB;AAAA,MAAZD,KAAY;;AACzE,sBAAO,sCAAWA,KAAX,CAAP;AACD,CAFM;;;AAAMC,K;;AAIb;AACO,IAAMC,CAAiC,GAAG,SAApCA,CAAoC,QAAkB;AAAA,MAAZF,KAAY;;AACjE,sBAAO,kCAAOA,KAAP,CAAP;AACD,CAFM;;;AAAME,C;;AAIb;AACO,IAAMC,MAA2C,GAAG,SAA9CA,MAA8C,QAAkB;AAAA,MAAZH,KAAY;;AAC3E,sBAAO,uCAAYA,KAAZ,CAAP;AACD,CAFM;;;AAAMG,M;;AAIb;AACO,IAAMC,IAAuC,GAAG,SAA1CA,IAA0C,QAAkB;AAAA,MAAZJ,KAAY;;AACvE,sBAAO,qCAAUA,KAAV,CAAP;AACD,CAFM;;;AAAMI,I","sourcesContent":["import React, { FC } from \"react\"\nimport styled from \"styled-components\"\nimport {\n  compose,\n  position,\n  PositionProps,\n  space,\n  SpaceProps,\n} from \"styled-system\"\nimport { Color } from \"../Theme\"\n\nexport interface IconProps\n  extends React.SVGProps<any>,\n    SpaceProps,\n    PositionProps {\n  fill?: Color\n  title?: string\n}\n\nconst iconMixin = compose(space, position)\n\n/** Wrapper for icons to include space */\nexport const Icon = styled.svg<IconProps>`\n  position: relative;\n  ${iconMixin}\n`\n\nIcon.defaultProps = {\n  fill: \"black100\",\n  height: \"18px\",\n  width: \"18px\",\n}\n/** Compatibility component used to normalize paths between react dom and react native */\nexport const Path: FC<JSX.IntrinsicElements[\"path\"]> = ({ ...props }) => {\n  return <path {...props} />\n}\n\n/** Compatibility component used to normalize titles between react dom and react native */\nexport const Title: FC<JSX.IntrinsicElements[\"title\"]> = ({ ...props }) => {\n  return <title {...props} />\n}\n\n/** Compatibility component used to normalize svg groups between react dom and react native */\nexport const G: FC<JSX.IntrinsicElements[\"g\"]> = ({ ...props }) => {\n  return <g {...props} />\n}\n\n/** Compatibility component used to normalize svg circles between react dom and react native */\nexport const Circle: FC<JSX.IntrinsicElements[\"circle\"]> = ({ ...props }) => {\n  return <circle {...props} />\n}\n\n/** Compatibility component used to normalize svg rects between react dom and react native */\nexport const Rect: FC<JSX.IntrinsicElements[\"rect\"]> = ({ ...props }) => {\n  return <rect {...props} />\n}\n"],"file":"Icon.js"}
+{"version":3,"sources":["../../src/svgs/Icon.tsx"],"names":["iconMixin","space","position","Icon","styled","svg","defaultProps","fill","height","width","Path","props","Title","G","Circle","Rect"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAiBA,IAAMA,SAAS,GAAG,2BAAQC,mBAAR,EAAeC,sBAAf,CAAlB;AAEA;;AACO,IAAMC,IAAI,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,+BAEbL,SAFa,CAAV;;;AAKPG,IAAI,CAACG,YAAL,GAAoB;AAClBC,EAAAA,IAAI,EAAE,UADY;AAElBC,EAAAA,MAAM,EAAE,MAFU;AAGlBC,EAAAA,KAAK,EAAE;AAHW,CAApB;AAKA;;AACO,IAAMC,IAAuC,GAAG,SAA1CA,IAA0C,OAAkB;AAAA,MAAZC,KAAY;;AACvE,sBAAO,qCAAUA,KAAV,CAAP;AACD,CAFM;;;AAAMD,I;;AAIb;AACO,IAAME,KAAyC,GAAG,SAA5CA,KAA4C,QAAkB;AAAA,MAAZD,KAAY;;AACzE,sBAAO,sCAAWA,KAAX,CAAP;AACD,CAFM;;;AAAMC,K;;AAIb;AACO,IAAMC,CAAiC,GAAG,SAApCA,CAAoC,QAAkB;AAAA,MAAZF,KAAY;;AACjE,sBAAO,kCAAOA,KAAP,CAAP;AACD,CAFM;;;AAAME,C;;AAIb;AACO,IAAMC,MAA2C,GAAG,SAA9CA,MAA8C,QAAkB;AAAA,MAAZH,KAAY;;AAC3E,sBAAO,uCAAYA,KAAZ,CAAP;AACD,CAFM;;;AAAMG,M;;AAIb;AACO,IAAMC,IAAuC,GAAG,SAA1CA,IAA0C,QAAkB;AAAA,MAAZJ,KAAY;;AACvE,sBAAO,qCAAUA,KAAV,CAAP;AACD,CAFM;;;AAAMI,I","sourcesContent":["import React, { FC } from \"react\"\nimport styled from \"styled-components\"\nimport {\n  compose,\n  position,\n  PositionProps,\n  space,\n  SpaceProps,\n} from \"styled-system\"\nimport { Color } from \"../Theme\"\n\nexport interface IconProps\n  extends React.SVGProps<any>,\n    SpaceProps,\n    PositionProps {\n  fill?: Color | \"currentColor\"\n  title?: string\n}\n\nconst iconMixin = compose(space, position)\n\n/** Wrapper for icons to include space */\nexport const Icon = styled.svg<IconProps>`\n  position: relative;\n  ${iconMixin}\n`\n\nIcon.defaultProps = {\n  fill: \"black100\",\n  height: \"18px\",\n  width: \"18px\",\n}\n/** Compatibility component used to normalize paths between react dom and react native */\nexport const Path: FC<JSX.IntrinsicElements[\"path\"]> = ({ ...props }) => {\n  return <path {...props} />\n}\n\n/** Compatibility component used to normalize titles between react dom and react native */\nexport const Title: FC<JSX.IntrinsicElements[\"title\"]> = ({ ...props }) => {\n  return <title {...props} />\n}\n\n/** Compatibility component used to normalize svg groups between react dom and react native */\nexport const G: FC<JSX.IntrinsicElements[\"g\"]> = ({ ...props }) => {\n  return <g {...props} />\n}\n\n/** Compatibility component used to normalize svg circles between react dom and react native */\nexport const Circle: FC<JSX.IntrinsicElements[\"circle\"]> = ({ ...props }) => {\n  return <circle {...props} />\n}\n\n/** Compatibility component used to normalize svg rects between react dom and react native */\nexport const Rect: FC<JSX.IntrinsicElements[\"rect\"]> = ({ ...props }) => {\n  return <rect {...props} />\n}\n"],"file":"Icon.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "18.6.0",
+  "version": "18.7.0",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -175,5 +175,5 @@
       "<rootDir>/www/"
     ]
   },
-  "gitHead": "08632c65fdc7367121c8721d6861e8bcd6d39888"
+  "gitHead": "66385b473665b7e92a4bde7233c94eb462d13595"
 }