@artsy/palette 45.13.1 → 45.14.0-canary.1497.33065.0

package/dist/esm/elements/Shelf/Shelf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shelf.js","names":["React","Children","createRef","isValidElement","useCallback","useEffect","useMemo","useRef","useState","styled","useCursor","visuallyDisableScrollbar","Box","CELL_GAP_PADDING_AMOUNT","paginateCarousel","FullBleed","ShelfNext","ShelfPrevious","ShelfScrollBar","Shelf","_ref","_ref$alignItems","alignItems","_ref$showProgress","showProgress","_ref$snap","snap","children","onChange","rest","_objectWithoutProperties","_excluded","cells","toArray","filter","map","child","ref","containerRef","viewportRef","_useState","_useState2","_slicedToArray","mounted","setMounted","_useState3","_useState4","pages","setPages","_useState5","_useState6","offset","setOffset","_useState7","_useState8","atStart","setAtStart","init","current","container","values","_ref2","i","length","Math","ceil","clientWidth","viewport","_container$getBoundin","getBoundingClientRect","x","window","addEventListener","removeEventListener","_useCursor","max","pageIndex","index","setCursor","handler","nearestPage","find","currentPage","_pages","nextPage","Infinity","scrollLeft","indexOf","passive","scrollToPage","xPosition","scrollTo","left","behavior","handleNext","handlePrev","createElement","Container","_extends","Nav","as","bottom","Previous","onClick","disabled","Next","right","marginLeft","Viewport","Rail","position","mb","_ref3","isFirst","isLast","Cell","key","pl","undefined","pr","style","scrollSnapAlign","displayName","withConfig","componentId"],"sources":["../../../../src/elements/Shelf/Shelf.tsx"],"sourcesContent":["import React, {\n  Children,\n  createRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\"\nimport styled from \"styled-components\"\nimport { useCursor } from \"use-cursor\"\nimport { visuallyDisableScrollbar } from \"../../helpers/visuallyDisableScrollbar\"\nimport { Box, BoxProps } from \"../Box\"\nimport { CELL_GAP_PADDING_AMOUNT, paginateCarousel } from \"../Carousel\"\nimport { FlexProps } from \"../Flex\"\nimport { FullBleed } from \"../FullBleed\"\nimport { ShelfNext, ShelfPrevious } from \"./ShelfNavigation\"\nimport { ShelfScrollBar } from \"./ShelfScrollBar\"\n\n/** ShelfProps */\nexport type ShelfProps = BoxProps & {\n  alignItems?: FlexProps[\"alignItems\"]\n  showProgress?: boolean\n  snap?: \"none\" | \"start\" | \"end\" | \"center\"\n  children: JSX.Element | JSX.Element[]\n  onChange?(index: number): void\n}\n\n/**\n * A Shelf is a new kind of carousel...\n */\nexport const Shelf: React.FC<React.PropsWithChildren<ShelfProps>> = ({\n  alignItems = \"flex-end\",\n  showProgress = true,\n  snap = \"none\",\n  children,\n  onChange,\n  ...rest\n}) => {\n  const cells = useMemo(\n    () =>\n      Children.toArray(children)\n        .filter(isValidElement)\n        .map((child) => ({ child, ref: createRef<HTMLLIElement>() })),\n    [children]\n  )\n\n  const containerRef = useRef<HTMLDivElement | null>(null)\n  const viewportRef = useRef<HTMLDivElement | null>(null)\n\n  const [mounted, setMounted] = useState(false)\n  const [pages, setPages] = useState([0])\n  const [offset, setOffset] = useState(0)\n  const [atStart, setAtStart] = useState(true)\n\n  const init = useCallback(() => {\n    if (containerRef.current === null) return\n\n    const { current: container } = containerRef\n\n    // Set page-stops\n    const values = cells.map(({ ref }, i) => {\n      // If we have an offset we actually want to subtract it from\n      // the first and last elements.\n      if (offset !== 0 && (i === 0 || i === cells.length - 1)) {\n        return Math.ceil(ref.current!.clientWidth - offset)\n      }\n\n      return ref.current!.clientWidth\n    })\n\n    setPages(\n      paginateCarousel({\n        // Here we use the container width instead of the viewport width.\n        // The viewport has been extended to the full width of the window;\n        // we want to scroll to the parent boundaries instead.\n        viewport: container.clientWidth,\n        values,\n      })\n    )\n\n    // Set offset to accomodate full-bleed and line up initially with page-margins\n    const { x } = container.getBoundingClientRect()\n    setOffset(x)\n\n    setMounted(true)\n  }, [cells, offset])\n\n  useEffect(() => {\n    init()\n\n    window.addEventListener(\"resize\", init)\n    return () => {\n      window.removeEventListener(\"resize\", init)\n    }\n  }, [init])\n\n  const { index: pageIndex, setCursor } = useCursor({\n    max: pages.length,\n  })\n\n  // Keep page cursor in sync with scroll position\n  useEffect(() => {\n    if (viewportRef.current === null) return\n\n    const { current: viewport } = viewportRef\n\n    const handler = () => {\n      const nearestPage = pages.find((currentPage, i) => {\n        const nextPage = pages[i + 1] ?? Infinity\n        return (\n          viewport.scrollLeft >= currentPage && viewport.scrollLeft < nextPage\n        )\n      })\n\n      setCursor(pages.indexOf(nearestPage!))\n      setAtStart(viewport.scrollLeft === 0)\n    }\n\n    viewport.addEventListener(\"scroll\", handler, { passive: true })\n    return () => {\n      viewport.removeEventListener(\"scroll\", handler)\n    }\n  }, [pages, setCursor])\n\n  // Announce page changes\n  useEffect(() => {\n    onChange && onChange(pageIndex)\n  }, [onChange, pageIndex])\n\n  // Scroll to a specific page-stop\n  const scrollToPage = (index: number) => {\n    const xPosition = pages[index]\n    scrollTo(xPosition)\n  }\n\n  const scrollTo = (xPosition: number) => {\n    if (viewportRef.current === null) return\n\n    const { current: viewport } = viewportRef\n\n    if (viewport.scrollTo) {\n      viewport.scrollTo({ left: xPosition, behavior: \"smooth\" })\n      return\n    }\n\n    viewport.scrollLeft = xPosition\n  }\n\n  // One side-effect of scrolling to the next page index instead of\n  // setting it directly is that you can't scroll to the next one via click until\n  // you've arrived. We may want to reconsider this approach; though this is the\n  // simplest way to keep these values in sync with one another.\n  const handleNext = () => {\n    scrollToPage(pageIndex + 1)\n  }\n\n  const handlePrev = () => {\n    if (pageIndex === 0) {\n      scrollTo(0)\n      return\n    }\n\n    scrollToPage(pageIndex - 1)\n  }\n\n  return (\n    <Container ref={containerRef as any} {...rest}>\n      <Nav\n        as=\"nav\"\n        // We can't position relative to the FullBleed rail —\n        // so offset the bottom by the bottom margin + the height of the scrollbar.\n        bottom={[23, 63]}\n      >\n        <Previous\n          onClick={handlePrev}\n          disabled={atStart}\n          aria-label=\"Previous page\"\n        />\n\n        <Next\n          onClick={handleNext}\n          disabled={pageIndex === pages.length - 1}\n          aria-label=\"Next page\"\n        />\n      </Nav>\n\n      <FullBleed\n        // To prevent any page jank we initially partially disable this component\n        // so that content is left aligned with the parent container and then once\n        // we have the offset and page values; we reset it to actually full-bleed.\n        // The `offset` will push the content up to the parent margin.\n        {...(!mounted ? { left: null, right: null, marginLeft: null } : {})}\n      >\n        <Viewport ref={viewportRef as any}>\n          <Rail as=\"ul\" position=\"relative\" alignItems={alignItems} mb={[2, 6]}>\n            {cells.map(({ child, ref }, i) => {\n              const isFirst = i === 0\n              const isLast = i === cells.length - 1\n\n              return (\n                <Cell\n                  as=\"li\"\n                  key={i}\n                  ref={ref as any}\n                  pl={isFirst ? offset : undefined}\n                  pr={!isLast ? CELL_GAP_PADDING_AMOUNT : offset}\n                  style={{ scrollSnapAlign: snap }}\n                >\n                  {child}\n                </Cell>\n              )\n            })}\n          </Rail>\n        </Viewport>\n      </FullBleed>\n\n      {showProgress && <ShelfScrollBar viewport={viewportRef.current} />}\n    </Container>\n  )\n}\n\nconst Container = styled(Box)`\n  position: relative;\n  width: 100%;\n\n  > nav {\n    transition: opacity 250ms;\n    transition-delay: 100ms;\n    opacity: 0;\n  }\n\n  &:hover {\n    > nav {\n      opacity: 1;\n    }\n  }\n`\n\nconst Nav = styled(Box)`\n  pointer-events: none;\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  left: 0;\n`\n\nconst Viewport = styled(Box)`\n  display: flex;\n  height: 100%;\n  padding: 0;\n  list-style: none;\n  overflow-y: hidden;\n  overflow-x: scroll;\n  -webkit-overflow-scrolling: touch;\n  scroll-snap-type: x mandatory;\n  ${visuallyDisableScrollbar}\n`\n\nconst Rail = styled(Box)`\n  display: flex;\n  width: 100%;\n  height: 100%;\n  margin-top: 0;\n  margin-left: 0;\n  margin-right: 0;\n  padding: 0;\n  list-style: none;\n  white-space: nowrap;\n`\n\nconst Cell = styled(Box)`\n  white-space: normal;\n`\n\nconst Next = styled(ShelfNext)`\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  right: 0;\n\n  @media (hover: none) {\n    display: none;\n  }\n`\n\nconst Previous = styled(ShelfPrevious)`\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  left: 0;\n\n  @media (hover: none) {\n    display: none;\n  }\n`\n"],"mappings":"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"}

package/dist/esm/elements/Shelf/Shelf.story.js

@@ -0,0 +1,284 @@
+var _excluded = ["amount"];
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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; }
+import React, { useEffect, useState } from "react";
+import { Box } from "../Box";
+import { Text } from "../Text";
+import { Shelf } from "./Shelf";
+import { ShelfNext } from "./ShelfNavigation";
+import { STORYBOOK_PROPS_BLOCKLIST } from "../../utils/storybookBlocklist";
+export default {
+  component: Shelf,
+  title: "Components/Shelf",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "A horizontal scrollable shelf container for displaying collections of items."
+      },
+      controls: {
+        exclude: STORYBOOK_PROPS_BLOCKLIST
+      }
+    }
+  }
+};
+var Demo = function Demo(_ref) {
+  var _ref$amount = _ref.amount,
+    amount = _ref$amount === void 0 ? 25 : _ref$amount,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Shelf, rest, Array.from(Array(amount)).map(function (_, i) {
+    return [300, 250, 200, 333, 400][i % 5];
+  }).map(function (height, j) {
+    return /*#__PURE__*/React.createElement(Box, {
+      key: j,
+      width: 300,
+      height: height,
+      bg: "mono10",
+      border: "1px solid",
+      borderColor: "mono30",
+      p: 1,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center"
+    }, /*#__PURE__*/React.createElement(Text, {
+      variant: "sm-display"
+    }, j + 1));
+  }));
+};
+Demo.displayName = "Demo";
+export var Default = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Box, {
+      maxWidth: 1920,
+      mx: "auto"
+    }, /*#__PURE__*/React.createElement(Box, {
+      mx: [2, 4]
+    }, /*#__PURE__*/React.createElement(Demo, null)));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Basic shelf component with default settings."
+      }
+    }
+  }
+};
+export var CenterAligned = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Box, {
+      maxWidth: 1920,
+      mx: "auto"
+    }, /*#__PURE__*/React.createElement(Box, {
+      mx: [2, 4]
+    }, /*#__PURE__*/React.createElement(Demo, {
+      alignItems: "center"
+    })));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Shelf with items center-aligned vertically."
+      }
+    }
+  }
+};
+export var NoProgress = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Box, {
+      maxWidth: 1920,
+      mx: "auto"
+    }, /*#__PURE__*/React.createElement(Box, {
+      mx: [2, 4]
+    }, /*#__PURE__*/React.createElement(Demo, {
+      showProgress: false
+    })));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Shelf without progress indicators."
+      }
+    }
+  }
+};
+export var SingleItem = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Box, {
+      maxWidth: 1920,
+      mx: "auto"
+    }, /*#__PURE__*/React.createElement(Box, {
+      mx: [2, 4]
+    }, /*#__PURE__*/React.createElement(Demo, {
+      amount: 1
+    })));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Shelf with a single item."
+      }
+    }
+  }
+};
+export var FewItems = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Box, {
+      maxWidth: 1920,
+      mx: "auto"
+    }, /*#__PURE__*/React.createElement(Box, {
+      mx: [2, 4]
+    }, /*#__PURE__*/React.createElement(Demo, {
+      amount: 3
+    })));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Shelf with few items that don't require scrolling."
+      }
+    }
+  }
+};
+export var ManyItems = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Box, {
+      maxWidth: 1920,
+      mx: "auto"
+    }, /*#__PURE__*/React.createElement(Box, {
+      mx: [2, 4]
+    }, /*#__PURE__*/React.createElement(Demo, {
+      amount: 20
+    })));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Shelf with many items that require horizontal scrolling."
+      }
+    }
+  }
+};
+export var TenItems = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(Box, {
+      maxWidth: 1920,
+      mx: "auto"
+    }, /*#__PURE__*/React.createElement(Box, {
+      mx: [2, 4]
+    }, /*#__PURE__*/React.createElement(Demo, {
+      amount: 10
+    })));
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Shelf with ten items to demonstrate medium-sized collections."
+      }
+    }
+  }
+};
+export var NavigationDefault = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(ShelfNext, null);
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Default navigation button for shelf."
+      }
+    }
+  }
+};
+export var NavigationHover = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(ShelfNext, {
+      hover: true
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Navigation button in hover state."
+      }
+    }
+  }
+};
+export var NavigationFocus = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(ShelfNext, {
+      focus: true
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Navigation button in focus state."
+      }
+    }
+  }
+};
+export var NavigationDisabled = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(ShelfNext, {
+      disabled: true
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Navigation button in disabled state."
+      }
+    }
+  }
+};
+export var NavigationHoverFocus = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement(ShelfNext, {
+      hover: true,
+      focus: true
+    });
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Navigation button with both hover and focus states."
+      }
+    }
+  }
+};
+export var ClientSideUpdates = {
+  render: function render() {
+    var _useState = useState(1),
+      _useState2 = _slicedToArray(_useState, 2),
+      amount = _useState2[0],
+      setAmount = _useState2[1];
+    useEffect(function () {
+      var interval = setInterval(function () {
+        setAmount(Math.floor(Math.random() * Math.floor(15)) + 1);
+      }, 1000);
+      return function () {
+        clearInterval(interval);
+      };
+    }, []);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("pre", null, "Amount: ", amount), /*#__PURE__*/React.createElement(Demo, {
+      amount: amount
+    }));
+  },
+  parameters: {
+    chromatic: {
+      disable: true
+    },
+    docs: {
+      description: {
+        story: "Shelf with client-side updates to demonstrate dynamic content changes."
+      }
+    }
+  }
+};
+//# sourceMappingURL=Shelf.story.js.map

package/dist/esm/elements/Shelf/Shelf.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shelf.story.js","names":["React","useEffect","useState","Box","Text","Shelf","ShelfNext","STORYBOOK_PROPS_BLOCKLIST","component","title","tags","parameters","docs","description","controls","exclude","Demo","_ref","_ref$amount","amount","rest","_objectWithoutProperties","_excluded","createElement","Array","from","map","_","i","height","j","key","width","bg","border","borderColor","p","display","alignItems","justifyContent","variant","displayName","Default","render","maxWidth","mx","story","CenterAligned","NoProgress","showProgress","SingleItem","FewItems","ManyItems","TenItems","NavigationDefault","NavigationHover","hover","NavigationFocus","focus","NavigationDisabled","disabled","NavigationHoverFocus","ClientSideUpdates","_useState","_useState2","_slicedToArray","setAmount","interval","setInterval","Math","floor","random","clearInterval","Fragment","chromatic","disable"],"sources":["../../../../src/elements/Shelf/Shelf.story.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\"\nimport { Box } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { Shelf } from \"./Shelf\"\nimport { ShelfNext } from \"./ShelfNavigation\"\nimport { STORYBOOK_PROPS_BLOCKLIST } from \"../../utils/storybookBlocklist\"\n\nexport default {\n  component: Shelf,\n  title: \"Components/Shelf\",\n  tags: [\"autodocs\"],\n  parameters: {\n    docs: {\n      description: {\n        component:\n          \"A horizontal scrollable shelf container for displaying collections of items.\",\n      },\n      controls: {\n        exclude: STORYBOOK_PROPS_BLOCKLIST,\n      },\n    },\n  },\n}\n\nconst Demo = ({ amount = 25, ...rest }: { amount?: number } & any) => {\n  return (\n    <Shelf {...rest}>\n      {Array.from(Array(amount))\n        .map((_, i) => [300, 250, 200, 333, 400][i % 5])\n        .map((height, j) => (\n          <Box\n            key={j}\n            width={300}\n            height={height}\n            bg=\"mono10\"\n            border=\"1px solid\"\n            borderColor=\"mono30\"\n            p={1}\n            display=\"flex\"\n            alignItems=\"center\"\n            justifyContent=\"center\"\n          >\n            <Text variant=\"sm-display\">{j + 1}</Text>\n          </Box>\n        ))}\n    </Shelf>\n  )\n}\n\nexport const Default = {\n  render: () => (\n    <Box maxWidth={1920} mx=\"auto\">\n      <Box mx={[2, 4]}>\n        <Demo />\n      </Box>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Basic shelf component with default settings.\",\n      },\n    },\n  },\n}\n\nexport const CenterAligned = {\n  render: () => (\n    <Box maxWidth={1920} mx=\"auto\">\n      <Box mx={[2, 4]}>\n        <Demo alignItems=\"center\" />\n      </Box>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Shelf with items center-aligned vertically.\",\n      },\n    },\n  },\n}\n\nexport const NoProgress = {\n  render: () => (\n    <Box maxWidth={1920} mx=\"auto\">\n      <Box mx={[2, 4]}>\n        <Demo showProgress={false} />\n      </Box>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Shelf without progress indicators.\",\n      },\n    },\n  },\n}\n\nexport const SingleItem = {\n  render: () => (\n    <Box maxWidth={1920} mx=\"auto\">\n      <Box mx={[2, 4]}>\n        <Demo amount={1} />\n      </Box>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Shelf with a single item.\",\n      },\n    },\n  },\n}\n\nexport const FewItems = {\n  render: () => (\n    <Box maxWidth={1920} mx=\"auto\">\n      <Box mx={[2, 4]}>\n        <Demo amount={3} />\n      </Box>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Shelf with few items that don't require scrolling.\",\n      },\n    },\n  },\n}\n\nexport const ManyItems = {\n  render: () => (\n    <Box maxWidth={1920} mx=\"auto\">\n      <Box mx={[2, 4]}>\n        <Demo amount={20} />\n      </Box>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Shelf with many items that require horizontal scrolling.\",\n      },\n    },\n  },\n}\n\nexport const TenItems = {\n  render: () => (\n    <Box maxWidth={1920} mx=\"auto\">\n      <Box mx={[2, 4]}>\n        <Demo amount={10} />\n      </Box>\n    </Box>\n  ),\n  parameters: {\n    docs: {\n      description: {\n        story: \"Shelf with ten items to demonstrate medium-sized collections.\",\n      },\n    },\n  },\n}\n\nexport const NavigationDefault = {\n  render: () => <ShelfNext />,\n  parameters: {\n    docs: {\n      description: {\n        story: \"Default navigation button for shelf.\",\n      },\n    },\n  },\n}\n\nexport const NavigationHover = {\n  render: () => <ShelfNext hover={true} />,\n  parameters: {\n    docs: {\n      description: {\n        story: \"Navigation button in hover state.\",\n      },\n    },\n  },\n}\n\nexport const NavigationFocus = {\n  render: () => <ShelfNext focus={true} />,\n  parameters: {\n    docs: {\n      description: {\n        story: \"Navigation button in focus state.\",\n      },\n    },\n  },\n}\n\nexport const NavigationDisabled = {\n  render: () => <ShelfNext disabled={true} />,\n  parameters: {\n    docs: {\n      description: {\n        story: \"Navigation button in disabled state.\",\n      },\n    },\n  },\n}\n\nexport const NavigationHoverFocus = {\n  render: () => <ShelfNext hover={true} focus={true} />,\n  parameters: {\n    docs: {\n      description: {\n        story: \"Navigation button with both hover and focus states.\",\n      },\n    },\n  },\n}\n\nexport const ClientSideUpdates = {\n  render: () => {\n    const [amount, setAmount] = useState(1)\n\n    useEffect(() => {\n      const interval = setInterval(() => {\n        setAmount(Math.floor(Math.random() * Math.floor(15)) + 1)\n      }, 1000)\n      return () => {\n        clearInterval(interval)\n      }\n    }, [])\n\n    return (\n      <>\n        <pre>Amount: {amount}</pre>\n        <Demo amount={amount} />\n      </>\n    )\n  },\n  parameters: {\n    chromatic: { disable: true },\n    docs: {\n      description: {\n        story:\n          \"Shelf with client-side updates to demonstrate dynamic content changes.\",\n      },\n    },\n  },\n}\n"],"mappings":"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"}

package/dist/esm/elements/Shelf/ShelfNavigation.js

@@ -0,0 +1,43 @@
+import { themeGet } from "@styled-system/theme-get";
+import React from "react";
+import styled from "styled-components";
+import { css } from "styled-components";
+import ChevronLeftIcon from "@artsy/icons/ChevronLeftIcon";
+import ChevronRightIcon from "@artsy/icons/ChevronRightIcon";
+import { Clickable } from "../Clickable";
+
+/** ShelfNavigationProps */
+
+var STATES = {
+  hover: css(["outline:0;color:", ";box-shadow:", ";"], themeGet("colors.mono100"), themeGet("effects.dropShadow")),
+  focus: css(["outline:0;color:", ";border-color:", ";"], themeGet("colors.mono100"), themeGet("colors.brand")),
+  disabled: css(["opacity:0;cursor:default;"])
+};
+var Arrow = styled(Clickable).withConfig({
+  displayName: "ShelfNavigation__Arrow",
+  componentId: "sc-myqxb5-0"
+})(["height:50px;width:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;transition:opacity 250ms,color 250ms,border-color 250ms,box-shadow 0.25s ease;color:", ";background-color:", ";border:1px solid ", ";border-radius:50%;pointer-events:auto;> svg{fill:currentColor;}", " &:hover{", "}&:focus{", "}&:disabled{", "}"], themeGet("colors.mono60"), themeGet("colors.mono0"), themeGet("colors.mono5"), function (props) {
+  return css(["", " ", " ", ""], props.hover && STATES.hover, props.focus && STATES.focus, props.disabled && STATES.focus);
+}, STATES.hover, STATES.focus, STATES.disabled);
+
+/**
+ * Default next button
+ */
+export var ShelfNext = function ShelfNext(props) {
+  return /*#__PURE__*/React.createElement(Arrow, props, /*#__PURE__*/React.createElement(ChevronRightIcon, {
+    width: 15,
+    height: 15
+  }));
+};
+ShelfNext.displayName = "ShelfNext";
+/**
+ * Default previous button
+ */
+export var ShelfPrevious = function ShelfPrevious(props) {
+  return /*#__PURE__*/React.createElement(Arrow, props, /*#__PURE__*/React.createElement(ChevronLeftIcon, {
+    width: 15,
+    height: 15
+  }));
+};
+ShelfPrevious.displayName = "ShelfPrevious";
+//# sourceMappingURL=ShelfNavigation.js.map

package/dist/esm/elements/Shelf/ShelfNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShelfNavigation.js","names":["themeGet","React","styled","css","ChevronLeftIcon","ChevronRightIcon","Clickable","STATES","hover","focus","disabled","Arrow","withConfig","displayName","componentId","props","ShelfNext","createElement","width","height","ShelfPrevious"],"sources":["../../../../src/elements/Shelf/ShelfNavigation.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React from \"react\"\nimport styled from \"styled-components\"\nimport { css } from \"styled-components\"\nimport ChevronLeftIcon from \"@artsy/icons/ChevronLeftIcon\"\nimport ChevronRightIcon from \"@artsy/icons/ChevronRightIcon\"\nimport { Clickable, ClickableProps } from \"../Clickable\"\n\n/** ShelfNavigationProps */\nexport interface ShelfNavigationProps extends ClickableProps {\n  hover?: boolean\n  focus?: boolean\n  disabled?: boolean\n}\n\nconst STATES = {\n  hover: css`\n    outline: 0;\n    color: ${themeGet(\"colors.mono100\")};\n    box-shadow: ${themeGet(\"effects.dropShadow\")};\n  `,\n  focus: css`\n    outline: 0;\n    color: ${themeGet(\"colors.mono100\")};\n    border-color: ${themeGet(\"colors.brand\")};\n  `,\n  disabled: css`\n    opacity: 0;\n    cursor: default;\n  `,\n}\n\nconst Arrow = styled(Clickable)<ShelfNavigationProps>`\n  height: 50px;\n  width: 50px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  user-select: none;\n  transition: opacity 250ms, color 250ms, border-color 250ms,\n    box-shadow 0.25s ease;\n  color: ${themeGet(\"colors.mono60\")};\n  background-color: ${themeGet(\"colors.mono0\")};\n  border: 1px solid ${themeGet(\"colors.mono5\")};\n  border-radius: 50%;\n  pointer-events: auto;\n\n  > svg {\n    fill: currentColor;\n  }\n\n  ${(props) => {\n    return css`\n      ${props.hover && STATES.hover}\n      ${props.focus && STATES.focus}\n      ${props.disabled && STATES.focus}\n    `\n  }}\n\n  &:hover {\n    ${STATES.hover}\n  }\n  &:focus {\n    ${STATES.focus}\n  }\n\n  &:disabled {\n    ${STATES.disabled}\n  }\n`\n\n/**\n * Default next button\n */\nexport const ShelfNext: React.FC<\n  React.PropsWithChildren<ShelfNavigationProps>\n> = (props) => {\n  return (\n    <Arrow {...props}>\n      <ChevronRightIcon width={15} height={15} />\n    </Arrow>\n  )\n}\n\n/**\n * Default previous button\n */\nexport const ShelfPrevious: React.FC<\n  React.PropsWithChildren<ShelfNavigationProps>\n> = (props) => {\n  return (\n    <Arrow {...props}>\n      <ChevronLeftIcon width={15} height={15} />\n    </Arrow>\n  )\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,0BAA0B;AACnD,OAAOC,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,GAAG,QAAQ,mBAAmB;AACvC,OAAOC,eAAe,MAAM,8BAA8B;AAC1D,OAAOC,gBAAgB,MAAM,+BAA+B;AAC5D,SAASC,SAAS;;AAElB;;AAOA,IAAMC,MAAM,GAAG;EACbC,KAAK,EAAEL,GAAG,4CAECH,QAAQ,CAAC,gBAAgB,CAAC,EACrBA,QAAQ,CAAC,oBAAoB,CAAC,CAC7C;EACDS,KAAK,EAAEN,GAAG,8CAECH,QAAQ,CAAC,gBAAgB,CAAC,EACnBA,QAAQ,CAAC,cAAc,CAAC,CACzC;EACDU,QAAQ,EAAEP,GAAG;AAIf,CAAC;AAED,IAAMQ,KAAK,GAAGT,MAAM,CAACI,SAAS,CAAC,CAAAM,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0WAUpBd,QAAQ,CAAC,eAAe,CAAC,EACdA,QAAQ,CAAC,cAAc,CAAC,EACxBA,QAAQ,CAAC,cAAc,CAAC,EAQ1C,UAACe,KAAK,EAAK;EACX,OAAOZ,GAAG,qBACNY,KAAK,CAACP,KAAK,IAAID,MAAM,CAACC,KAAK,EAC3BO,KAAK,CAACN,KAAK,IAAIF,MAAM,CAACE,KAAK,EAC3BM,KAAK,CAACL,QAAQ,IAAIH,MAAM,CAACE,KAAK;AAEpC,CAAC,EAGGF,MAAM,CAACC,KAAK,EAGZD,MAAM,CAACE,KAAK,EAIZF,MAAM,CAACG,QAAQ,CAEpB;;AAED;AACA;AACA;AACA,OAAO,IAAMM,SAEZ,GAAG,SAFSA,SAEZA,CAAID,KAAK,EAAK;EACb,oBACEd,KAAA,CAAAgB,aAAA,CAACN,KAAK,EAAKI,KAAK,eACdd,KAAA,CAAAgB,aAAA,CAACZ,gBAAgB;IAACa,KAAK,EAAE,EAAG;IAACC,MAAM,EAAE;EAAG,EAAG,CACrC;AAEZ,CAAC;AARYH,SAEZ,CAAAH,WAAA;AAQD;AACA;AACA;AACA,OAAO,IAAMO,aAEZ,GAAG,SAFSA,aAEZA,CAAIL,KAAK,EAAK;EACb,oBACEd,KAAA,CAAAgB,aAAA,CAACN,KAAK,EAAKI,KAAK,eACdd,KAAA,CAAAgB,aAAA,CAACb,eAAe;IAACc,KAAK,EAAE,EAAG;IAACC,MAAM,EAAE;EAAG,EAAG,CACpC;AAEZ,CAAC;AARYC,aAEZ,CAAAP,WAAA"}

package/dist/esm/elements/Shelf/ShelfScrollBar.js

@@ -0,0 +1,172 @@
+var _excluded = ["viewport"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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; }
+import { themeGet } from "@styled-system/theme-get";
+import React, { useEffect, useRef, useState } from "react";
+import styled from "styled-components";
+import { useMutationObserver } from "../../utils/useMutationObserver";
+import { Box } from "../Box";
+import { Clickable } from "../Clickable";
+import { useClickScroll } from "./useClickScroll";
+import { useDragScroll } from "./useDragScroll";
+/**
+ * A synthetic scrollbar
+ */
+export var ShelfScrollBar = /*#__PURE__*/React.memo(function (_ref) {
+  var _viewport$scrollLeft, _viewport$scrollWidth, _viewport$clientWidth, _trackRef$current$cli, _trackRef$current;
+  var viewport = _ref.viewport,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState({
+      scrollLeft: (_viewport$scrollLeft = viewport === null || viewport === void 0 ? void 0 : viewport.scrollLeft) !== null && _viewport$scrollLeft !== void 0 ? _viewport$scrollLeft : 0,
+      scrollWidth: (_viewport$scrollWidth = viewport === null || viewport === void 0 ? void 0 : viewport.scrollWidth) !== null && _viewport$scrollWidth !== void 0 ? _viewport$scrollWidth : 1,
+      clientWidth: (_viewport$clientWidth = viewport === null || viewport === void 0 ? void 0 : viewport.clientWidth) !== null && _viewport$clientWidth !== void 0 ? _viewport$clientWidth : 1
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    _useState2$ = _useState2[0],
+    scrollLeft = _useState2$.scrollLeft,
+    scrollWidth = _useState2$.scrollWidth,
+    clientWidth = _useState2$.clientWidth,
+    setScrollState = _useState2[1];
+  var trackRef = useRef(null);
+  var thumbRef = useRef(null);
+  var trackWidth = (_trackRef$current$cli = (_trackRef$current = trackRef.current) === null || _trackRef$current === void 0 ? void 0 : _trackRef$current.clientWidth) !== null && _trackRef$current$cli !== void 0 ? _trackRef$current$cli : 1;
+  var _buildScrollBar = buildScrollBar({
+      trackWidth: trackWidth,
+      scrollLeft: scrollLeft,
+      scrollWidth: scrollWidth,
+      clientWidth: clientWidth
+    }),
+    progress = _buildScrollBar.progress,
+    requiresScrolling = _buildScrollBar.requiresScrolling,
+    thumbOffset = _buildScrollBar.thumbOffset,
+    thumbWidth = _buildScrollBar.thumbWidth;
+
+  // Update scrollState on scroll and resize
+  useEffect(function () {
+    if (!viewport) return;
+    var updateScrollState = function updateScrollState() {
+      var _viewport$scrollLeft2, _viewport$scrollWidth2, _viewport$clientWidth2;
+      setScrollState({
+        scrollLeft: (_viewport$scrollLeft2 = viewport === null || viewport === void 0 ? void 0 : viewport.scrollLeft) !== null && _viewport$scrollLeft2 !== void 0 ? _viewport$scrollLeft2 : 0,
+        scrollWidth: (_viewport$scrollWidth2 = viewport === null || viewport === void 0 ? void 0 : viewport.scrollWidth) !== null && _viewport$scrollWidth2 !== void 0 ? _viewport$scrollWidth2 : 1,
+        clientWidth: (_viewport$clientWidth2 = viewport === null || viewport === void 0 ? void 0 : viewport.clientWidth) !== null && _viewport$clientWidth2 !== void 0 ? _viewport$clientWidth2 : 1
+      });
+    };
+    updateScrollState();
+    viewport.addEventListener("scroll", updateScrollState, {
+      passive: true
+    });
+    window.addEventListener("resize", updateScrollState);
+    return function () {
+      viewport.removeEventListener("scroll", updateScrollState);
+      window.removeEventListener("resize", updateScrollState);
+    };
+  }, [viewport]);
+  useMutationObserver({
+    element: viewport,
+    onMutate: function onMutate(mutations) {
+      var _viewport$scrollLeft3, _viewport$scrollWidth3, _viewport$clientWidth3;
+      // Check to see if any of the mutations has either added or removed nodes
+      var hasMeaningfullyMutated = mutations.some(function (mutation) {
+        return mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0;
+      });
+
+      // Only update scroll state if something was added or removed
+      if (!hasMeaningfullyMutated) return;
+      setScrollState({
+        scrollLeft: (_viewport$scrollLeft3 = viewport === null || viewport === void 0 ? void 0 : viewport.scrollLeft) !== null && _viewport$scrollLeft3 !== void 0 ? _viewport$scrollLeft3 : 0,
+        scrollWidth: (_viewport$scrollWidth3 = viewport === null || viewport === void 0 ? void 0 : viewport.scrollWidth) !== null && _viewport$scrollWidth3 !== void 0 ? _viewport$scrollWidth3 : 1,
+        clientWidth: (_viewport$clientWidth3 = viewport === null || viewport === void 0 ? void 0 : viewport.clientWidth) !== null && _viewport$clientWidth3 !== void 0 ? _viewport$clientWidth3 : 1
+      });
+    }
+  });
+  useDragScroll({
+    viewport: viewport,
+    thumbRef: thumbRef,
+    clientWidth: clientWidth,
+    scrollWidth: scrollWidth,
+    scrollLeft: scrollLeft,
+    trackWidth: trackWidth
+  });
+  useClickScroll({
+    viewport: viewport,
+    thumbRef: thumbRef,
+    trackRef: trackRef,
+    scrollWidth: scrollWidth,
+    trackWidth: trackWidth
+  });
+  return /*#__PURE__*/React.createElement(Track, _extends({
+    ref: trackRef,
+    bg: "mono15",
+    role: "scrollbar",
+    "aria-orientation": "vertical",
+    "aria-valuemax": 100,
+    "aria-valuemin": 0,
+    "aria-valuenow": progress
+  }, rest), /*#__PURE__*/React.createElement(TrackHitArea, null), requiresScrolling && /*#__PURE__*/React.createElement(Thumb, {
+    position: "relative",
+    bg: "mono60",
+    height: "100%",
+    borderRadius: 3,
+    width: thumbWidth,
+    style: {
+      transform: "translateX(".concat(thumbOffset, "px)"),
+      backfaceVisibility: "hidden"
+    }
+  }, /*#__PURE__*/React.createElement(HitArea, {
+    ref: thumbRef,
+    tabIndex: -1,
+    "aria-label": "Thumb"
+  })));
+});
+ShelfScrollBar.displayName = "ShelfScrollBar";
+var Track = styled(Box).withConfig({
+  displayName: "ShelfScrollBar__Track",
+  componentId: "sc-iwm55u-0"
+})(["position:relative;height:3px;width:100%;"]);
+var TrackHitArea = styled(Box).withConfig({
+  displayName: "ShelfScrollBar__TrackHitArea",
+  componentId: "sc-iwm55u-1"
+})(["position:absolute;top:-10px;bottom:-10px;right:0;left:0;width:100%;"]);
+var Thumb = styled(Box).withConfig({
+  displayName: "ShelfScrollBar__Thumb",
+  componentId: "sc-iwm55u-2"
+})([""]);
+var HitArea = styled(Clickable).withConfig({
+  displayName: "ShelfScrollBar__HitArea",
+  componentId: "sc-iwm55u-3"
+})(["position:absolute;top:-10px;bottom:-10px;width:100%;left:0;opacity:0;transition:opacity 250ms;&:hover{opacity:1;}&:after{content:\"\";display:block;position:absolute;left:0;width:100%;background-color:", ";top:50%;margin-top:-1.5px;height:3px;}"], themeGet("colors.mono100"));
+export var buildScrollBar = function buildScrollBar(_ref2) {
+  var trackWidth = _ref2.trackWidth,
+    scrollLeft = _ref2.scrollLeft,
+    scrollWidth = _ref2.scrollWidth,
+    clientWidth = _ref2.clientWidth;
+  var progress = scrollLeft / (scrollWidth - clientWidth || 1) * 100;
+
+  // Sets up a scrollbar for viewport
+  var percentageVisible = clientWidth / scrollWidth;
+  var thumbWidth = percentageVisible * clientWidth;
+  var percentageOffset = scrollLeft / (scrollWidth - clientWidth || 1);
+
+  // Transform it down to whatever our actual track width is as
+  // it's always smaller than the target viewport.
+  var normalizedThumbWidth = thumbWidth * trackWidth / clientWidth;
+  var normalizedThumbOffset = percentageOffset * (trackWidth - normalizedThumbWidth);
+  var requiresScrolling = percentageVisible < 1;
+  return {
+    requiresScrolling: requiresScrolling,
+    progress: progress,
+    percentageVisible: percentageVisible,
+    percentageOffset: percentageOffset,
+    thumbWidth: normalizedThumbWidth,
+    thumbOffset: normalizedThumbOffset
+  };
+};
+//# sourceMappingURL=ShelfScrollBar.js.map

package/dist/esm/elements/Shelf/ShelfScrollBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShelfScrollBar.js","names":["themeGet","React","useEffect","useRef","useState","styled","useMutationObserver","Box","Clickable","useClickScroll","useDragScroll","ShelfScrollBar","memo","_ref","_viewport$scrollLeft","_viewport$scrollWidth","_viewport$clientWidth","_trackRef$current$cli","_trackRef$current","viewport","rest","_objectWithoutProperties","_excluded","_useState","scrollLeft","scrollWidth","clientWidth","_useState2","_slicedToArray","_useState2$","setScrollState","trackRef","thumbRef","trackWidth","current","_buildScrollBar","buildScrollBar","progress","requiresScrolling","thumbOffset","thumbWidth","updateScrollState","_viewport$scrollLeft2","_viewport$scrollWidth2","_viewport$clientWidth2","addEventListener","passive","window","removeEventListener","element","onMutate","mutations","_viewport$scrollLeft3","_viewport$scrollWidth3","_viewport$clientWidth3","hasMeaningfullyMutated","some","mutation","addedNodes","length","removedNodes","createElement","Track","_extends","ref","bg","role","TrackHitArea","Thumb","position","height","borderRadius","width","style","transform","concat","backfaceVisibility","HitArea","tabIndex","displayName","withConfig","componentId","_ref2","percentageVisible","percentageOffset","normalizedThumbWidth","normalizedThumbOffset"],"sources":["../../../../src/elements/Shelf/ShelfScrollBar.tsx"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { useMutationObserver } from \"../../utils/useMutationObserver\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { useClickScroll } from \"./useClickScroll\"\nimport { useDragScroll } from \"./useDragScroll\"\n\ninterface ShelfScrollBarProps extends BoxProps {\n  viewport?: HTMLDivElement | null\n}\n\n/**\n * A synthetic scrollbar\n */\nexport const ShelfScrollBar: React.FC<\n  React.PropsWithChildren<ShelfScrollBarProps>\n> = React.memo(({ viewport, ...rest }) => {\n  const [\n    { scrollLeft, scrollWidth, clientWidth },\n    setScrollState,\n  ] = useState<ScrollState>({\n    scrollLeft: viewport?.scrollLeft ?? 0,\n    scrollWidth: viewport?.scrollWidth ?? 1,\n    clientWidth: viewport?.clientWidth ?? 1,\n  })\n\n  const trackRef = useRef<HTMLDivElement | null>(null)\n  const thumbRef = useRef<HTMLButtonElement | null>(null)\n\n  const trackWidth = trackRef.current?.clientWidth ?? 1\n\n  const {\n    progress,\n    requiresScrolling,\n    thumbOffset,\n    thumbWidth,\n  } = buildScrollBar({ trackWidth, scrollLeft, scrollWidth, clientWidth })\n\n  // Update scrollState on scroll and resize\n  useEffect(() => {\n    if (!viewport) return\n\n    const updateScrollState = () => {\n      setScrollState({\n        scrollLeft: viewport?.scrollLeft ?? 0,\n        scrollWidth: viewport?.scrollWidth ?? 1,\n        clientWidth: viewport?.clientWidth ?? 1,\n      })\n    }\n\n    updateScrollState()\n\n    viewport.addEventListener(\"scroll\", updateScrollState, { passive: true })\n    window.addEventListener(\"resize\", updateScrollState)\n\n    return () => {\n      viewport.removeEventListener(\"scroll\", updateScrollState)\n      window.removeEventListener(\"resize\", updateScrollState)\n    }\n  }, [viewport])\n\n  useMutationObserver({\n    element: viewport,\n    onMutate: (mutations) => {\n      // Check to see if any of the mutations has either added or removed nodes\n      const hasMeaningfullyMutated = mutations.some((mutation) => {\n        return (\n          mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0\n        )\n      })\n\n      // Only update scroll state if something was added or removed\n      if (!hasMeaningfullyMutated) return\n\n      setScrollState({\n        scrollLeft: viewport?.scrollLeft ?? 0,\n        scrollWidth: viewport?.scrollWidth ?? 1,\n        clientWidth: viewport?.clientWidth ?? 1,\n      })\n    },\n  })\n\n  useDragScroll({\n    viewport,\n    thumbRef,\n    clientWidth,\n    scrollWidth,\n    scrollLeft,\n    trackWidth,\n  })\n\n  useClickScroll({\n    viewport,\n    thumbRef,\n    trackRef,\n    scrollWidth,\n    trackWidth,\n  })\n\n  return (\n    <Track\n      ref={trackRef as any}\n      bg=\"mono15\"\n      role=\"scrollbar\"\n      aria-orientation=\"vertical\"\n      aria-valuemax={100}\n      aria-valuemin={0}\n      aria-valuenow={progress}\n      {...rest}\n    >\n      {/* Pads out hit area. Click events will propagate to underlying trackRef */}\n      <TrackHitArea />\n\n      {requiresScrolling && (\n        <Thumb\n          position=\"relative\"\n          bg=\"mono60\"\n          height=\"100%\"\n          borderRadius={3}\n          width={thumbWidth}\n          style={{\n            transform: `translateX(${thumbOffset}px)`,\n            backfaceVisibility: \"hidden\",\n          }}\n        >\n          <HitArea ref={thumbRef as any} tabIndex={-1} aria-label=\"Thumb\" />\n        </Thumb>\n      )}\n    </Track>\n  )\n})\n\nShelfScrollBar.displayName = \"ShelfScrollBar\"\n\nconst Track = styled(Box)`\n  position: relative;\n  height: 3px;\n  width: 100%;\n`\n\nconst TrackHitArea = styled(Box)`\n  position: absolute;\n  top: -10px;\n  bottom: -10px;\n  right: 0;\n  left: 0;\n  width: 100%;\n`\n\nconst Thumb = styled(Box)``\n\nconst HitArea = styled(Clickable)`\n  position: absolute;\n  top: -10px;\n  bottom: -10px;\n  width: 100%;\n  left: 0;\n  opacity: 0;\n  transition: opacity 250ms;\n\n  &:hover {\n    opacity: 1;\n  }\n\n  &:after {\n    content: \"\";\n    display: block;\n    position: absolute;\n    left: 0;\n    width: 100%;\n    background-color: ${themeGet(\"colors.mono100\")};\n    /*\n     * Positioning this using top/bottom and translate each have cross-browser\n     * issues in Safari. Using a hard-coded height/negative margin works on all browsers.\n     */\n    top: 50%;\n    margin-top: -1.5px;\n    height: 3px;\n  }\n`\n\ninterface ScrollState {\n  /** Left most scroll edge */\n  scrollLeft: number\n  /** Width of the underlying rail */\n  scrollWidth: number\n  /** Width of the viewport */\n  clientWidth: number\n}\n\nexport const buildScrollBar = ({\n  trackWidth,\n  scrollLeft,\n  scrollWidth,\n  clientWidth,\n}: ScrollState & {\n  /** Width of the scrollbar track */\n  trackWidth: number\n}) => {\n  const progress = (scrollLeft / (scrollWidth - clientWidth || 1)) * 100\n\n  // Sets up a scrollbar for viewport\n  const percentageVisible = clientWidth / scrollWidth\n  const thumbWidth = percentageVisible * clientWidth\n  const percentageOffset = scrollLeft / (scrollWidth - clientWidth || 1)\n\n  // Transform it down to whatever our actual track width is as\n  // it's always smaller than the target viewport.\n  const normalizedThumbWidth = (thumbWidth * trackWidth) / clientWidth\n  const normalizedThumbOffset =\n    percentageOffset * (trackWidth - normalizedThumbWidth)\n\n  const requiresScrolling = percentageVisible < 1\n\n  return {\n    requiresScrolling,\n    progress,\n    percentageVisible,\n    percentageOffset,\n    thumbWidth: normalizedThumbWidth,\n    thumbOffset: normalizedThumbOffset,\n  }\n}\n"],"mappings":"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"}

package/dist/esm/elements/Shelf/index.js

@@ -0,0 +1,4 @@
+export * from "./Shelf";
+export * from "./ShelfScrollBar";
+export * from "./ShelfNavigation";
+//# sourceMappingURL=index.js.map

package/dist/esm/elements/Shelf/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/elements/Shelf/index.ts"],"sourcesContent":["export * from \"./Shelf\"\nexport * from \"./ShelfScrollBar\"\nexport * from \"./ShelfNavigation\"\n"],"mappings":"AAAA;AACA;AACA"}