@artsy/palette 46.9.2 → 46.9.3

package/dist/cjs/elements/FullBleed/FullBleed.d.ts

@@ -1,11 +1,20 @@
 import { BoxProps } from "../Box";
 /** FullBleedProps */
-export type FullBleedProps = BoxProps;
+export type FullBleedProps = BoxProps & {
+    /**
+     * Whether to break out of the parent container. Defaults to `true`.
+     *
+     * Set to `false` for SSR / pre-measurement renders where the bleed offset
+     * isn't known yet — keeping content aligned to the parent container avoids a
+     * content shift once the client mounts and the bleed is enabled.
+     */
+    enabled?: boolean;
+};
 /**
  * Utility to break out of parent containers
  */
-export declare const FullBleed: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, "ref"> & {
+export declare const FullBleed: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof BoxProps> & BoxProps, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}>, BoxProps>, BoxProps>> & string;
+}>, FullBleedProps>, never>> & string;

package/dist/cjs/elements/FullBleed/FullBleed.js

@@ -38,7 +38,7 @@ __webpack_require__.d(__webpack_exports__, {
 const external_styled_components_namespaceObject = require("styled-components");
 var external_styled_components_default = /*#__PURE__*/ __webpack_require__.n(external_styled_components_namespaceObject);
 const index_js_namespaceObject = require("../Box/index.js");
-const FullBleed = /*#__PURE__*/ external_styled_components_default()(index_js_namespaceObject.Box).attrs((props)=>({
+const FullBleed = /*#__PURE__*/ external_styled_components_default()(index_js_namespaceObject.Box).attrs((props)=>false === props.enabled ? {} : {
         position: props.position ?? "relative",
         left: props.left ?? "50%",
         right: props.right ?? "50%",
@@ -46,7 +46,9 @@ const FullBleed = /*#__PURE__*/ external_styled_components_default()(index_js_na
         maxWidth: props.maxWidth ?? "100vw",
         marginLeft: props.marginLeft ?? "-50vw",
         marginRight: props.marginRight ?? "-50vw"
-    })).withConfig({
+    }).withConfig({
+    shouldForwardProp: (prop)=>"enabled" !== prop
+}).withConfig({
     displayName: "FullBleed"
 })([
     ""

package/dist/cjs/elements/FullBleed/FullBleed.js.map

@@ -1 +1 @@
-{"version":3,"file":"elements/FullBleed/FullBleed.js","sources":["webpack/runtime/compat_get_default_export","webpack/runtime/define_property_getters","webpack/runtime/has_own_property","webpack/runtime/make_namespace_object","../../../../src/elements/FullBleed/FullBleed.tsx"],"sourcesContent":["// getDefaultExport function for compatibility with non-ESM modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};\n","__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n        if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n            Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n        }\n    }\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import styled from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\n\n/** FullBleedProps */\nexport type FullBleedProps = BoxProps\n\n/**\n * Utility to break out of parent containers\n */\nexport const FullBleed = styled(Box).attrs<FullBleedProps>((props) => ({\n  position: props.position ?? \"relative\",\n  left: props.left ?? \"50%\",\n  right: props.right ?? \"50%\",\n  width: props.width ?? \"100vw\",\n  maxWidth: props.maxWidth ?? \"100vw\",\n  marginLeft: props.marginLeft ?? \"-50vw\",\n  marginRight: props.marginRight ?? \"-50vw\",\n}))<FullBleedProps>``\n"],"names":["__webpack_require__","module","getter","definition","key","Object","obj","prop","Symbol","FullBleed","styled","Box","props"],"mappings":";;;IACAA,oBAAoB,CAAC,GAAG,CAACC;QACxB,IAAIC,SAASD,UAAUA,OAAO,UAAU,GACvC,IAAOA,MAAM,CAAC,UAAU,GACxB,IAAOA;QACRD,oBAAoB,CAAC,CAACE,QAAQ;YAAE,GAAGA;QAAO;QAC1C,OAAOA;IACR;;;ICPAF,oBAAoB,CAAC,GAAG,CAAC,UAASG;QACjC,IAAI,IAAIC,OAAOD,WACR,IAAGH,oBAAoB,CAAC,CAACG,YAAYC,QAAQ,CAACJ,oBAAoB,CAAC,CAAC,UAASI,MACzEC,OAAO,cAAc,CAAC,UAASD,KAAK;YAAE,YAAY;YAAM,KAAKD,UAAU,CAACC,IAAI;QAAC;IAGzF;;;ICNAJ,oBAAoB,CAAC,GAAG,CAACM,KAAKC,OAAUF,OAAO,SAAS,CAAC,cAAc,CAAC,IAAI,CAACC,KAAKC;;;ICClFP,oBAAoB,CAAC,GAAG,CAAC;QACxB,IAAG,AAAkB,MAAlB,OAAOQ,UAA0BA,OAAO,WAAW,EACrDH,OAAO,cAAc,CAAC,UAASG,OAAO,WAAW,EAAE;YAAE,OAAO;QAAS;QAEtEH,OAAO,cAAc,CAAC,UAAS,cAAc;YAAE,OAAO;QAAK;IAC5D;;;;;;;;;;ACGO,MAAMI,YAAY,WAAZA,GAAYC,qCAAOC,yBAAAA,GAAGA,EAAE,KAAK,CAAiB,CAACC,QAAW;QACrE,UAAUA,MAAM,QAAQ,IAAI;QAC5B,MAAMA,MAAM,IAAI,IAAI;QACpB,OAAOA,MAAM,KAAK,IAAI;QACtB,OAAOA,MAAM,KAAK,IAAI;QACtB,UAAUA,MAAM,QAAQ,IAAI;QAC5B,YAAYA,MAAM,UAAU,IAAI;QAChC,aAAaA,MAAM,WAAW,IAAI;IACpC"}
+{"version":3,"file":"elements/FullBleed/FullBleed.js","sources":["webpack/runtime/compat_get_default_export","webpack/runtime/define_property_getters","webpack/runtime/has_own_property","webpack/runtime/make_namespace_object","../../../../src/elements/FullBleed/FullBleed.tsx"],"sourcesContent":["// getDefaultExport function for compatibility with non-ESM modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};\n","__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n        if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n            Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n        }\n    }\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","import styled from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\n\n/** FullBleedProps */\nexport type FullBleedProps = BoxProps & {\n  /**\n   * Whether to break out of the parent container. Defaults to `true`.\n   *\n   * Set to `false` for SSR / pre-measurement renders where the bleed offset\n   * isn't known yet — keeping content aligned to the parent container avoids a\n   * content shift once the client mounts and the bleed is enabled.\n   */\n  enabled?: boolean\n}\n\n/**\n * Utility to break out of parent containers\n */\nexport const FullBleed = styled(Box).attrs<FullBleedProps>((props) =>\n  props.enabled === false\n    ? {}\n    : {\n        position: props.position ?? \"relative\",\n        left: props.left ?? \"50%\",\n        right: props.right ?? \"50%\",\n        width: props.width ?? \"100vw\",\n        maxWidth: props.maxWidth ?? \"100vw\",\n        marginLeft: props.marginLeft ?? \"-50vw\",\n        marginRight: props.marginRight ?? \"-50vw\",\n      }\n).withConfig({\n  // `enabled` is a config prop, not a style/DOM attribute — keep it off the\n  // rendered element.\n  shouldForwardProp: (prop) => prop !== \"enabled\",\n})``\n"],"names":["__webpack_require__","module","getter","definition","key","Object","obj","prop","Symbol","FullBleed","styled","Box","props"],"mappings":";;;IACAA,oBAAoB,CAAC,GAAG,CAACC;QACxB,IAAIC,SAASD,UAAUA,OAAO,UAAU,GACvC,IAAOA,MAAM,CAAC,UAAU,GACxB,IAAOA;QACRD,oBAAoB,CAAC,CAACE,QAAQ;YAAE,GAAGA;QAAO;QAC1C,OAAOA;IACR;;;ICPAF,oBAAoB,CAAC,GAAG,CAAC,UAASG;QACjC,IAAI,IAAIC,OAAOD,WACR,IAAGH,oBAAoB,CAAC,CAACG,YAAYC,QAAQ,CAACJ,oBAAoB,CAAC,CAAC,UAASI,MACzEC,OAAO,cAAc,CAAC,UAASD,KAAK;YAAE,YAAY;YAAM,KAAKD,UAAU,CAACC,IAAI;QAAC;IAGzF;;;ICNAJ,oBAAoB,CAAC,GAAG,CAACM,KAAKC,OAAUF,OAAO,SAAS,CAAC,cAAc,CAAC,IAAI,CAACC,KAAKC;;;ICClFP,oBAAoB,CAAC,GAAG,CAAC;QACxB,IAAG,AAAkB,MAAlB,OAAOQ,UAA0BA,OAAO,WAAW,EACrDH,OAAO,cAAc,CAAC,UAASG,OAAO,WAAW,EAAE;YAAE,OAAO;QAAS;QAEtEH,OAAO,cAAc,CAAC,UAAS,cAAc;YAAE,OAAO;QAAK;IAC5D;;;;;;;;;;ACYO,MAAMI,YAAY,WAAZA,GAAYC,qCAAOC,yBAAAA,GAAGA,EAAE,KAAK,CAAiB,CAACC,QAC1DA,AAAkB,UAAlBA,MAAM,OAAO,GACT,CAAC,IACD;QACE,UAAUA,MAAM,QAAQ,IAAI;QAC5B,MAAMA,MAAM,IAAI,IAAI;QACpB,OAAOA,MAAM,KAAK,IAAI;QACtB,OAAOA,MAAM,KAAK,IAAI;QACtB,UAAUA,MAAM,QAAQ,IAAI;QAC5B,YAAYA,MAAM,UAAU,IAAI;QAChC,aAAaA,MAAM,WAAW,IAAI;IACpC,GACJ,UAAU,CAAC;IAGX,mBAAmB,CAACL,OAASA,AAAS,cAATA;AAC/B"}

package/dist/cjs/elements/Shelf/Shelf.js

@@ -155,10 +155,8 @@ const Shelf = ({ alignItems = "flex-end", showProgress = true, snap = "none", ch
         onClick: handleNext,
         disabled: pageIndex === pages.length - 1,
         "aria-label": "Next page"
-    })), /*#__PURE__*/ external_react_default().createElement(external_FullBleed_index_js_namespaceObject.FullBleed, mounted ? {} : {
-        left: null,
-        right: null,
-        marginLeft: null
+    })), /*#__PURE__*/ external_react_default().createElement(external_FullBleed_index_js_namespaceObject.FullBleed, {
+        enabled: mounted
     }, /*#__PURE__*/ external_react_default().createElement(Viewport, {
         ref: viewportRef
     }, /*#__PURE__*/ external_react_default().createElement(Rail, {

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

@@ -1 +1 @@
-{"version":3,"file":"elements/Shelf/Shelf.js","sources":["webpack/runtime/compat_get_default_export","webpack/runtime/define_property_getters","webpack/runtime/has_own_property","webpack/runtime/make_namespace_object","../../../../src/elements/Shelf/Shelf.tsx"],"sourcesContent":["// getDefaultExport function for compatibility with non-ESM modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};\n","__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n        if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n            Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n        }\n    }\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","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"],"names":["__webpack_require__","module","getter","definition","key","Object","obj","prop","Symbol","Shelf","alignItems","showProgress","snap","children","onChange","rest","cells","useMemo","Children","isValidElement","child","createRef","containerRef","useRef","viewportRef","mounted","setMounted","useState","pages","setPages","offset","setOffset","atStart","setAtStart","init","useCallback","container","values","ref","i","Math","paginateCarousel","x","useEffect","window","pageIndex","setCursor","useCursor","viewport","handler","nearestPage","currentPage","nextPage","Infinity","scrollToPage","index","xPosition","scrollTo","handleNext","handlePrev","Container","Nav","Previous","Next","FullBleed","Viewport","Rail","isFirst","isLast","Cell","undefined","CELL_GAP_PADDING_AMOUNT","ShelfScrollBar","styled","Box","visuallyDisableScrollbar","ShelfNext","ShelfPrevious"],"mappings":"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"}
+{"version":3,"file":"elements/Shelf/Shelf.js","sources":["webpack/runtime/compat_get_default_export","webpack/runtime/define_property_getters","webpack/runtime/has_own_property","webpack/runtime/make_namespace_object","../../../../src/elements/Shelf/Shelf.tsx"],"sourcesContent":["// getDefaultExport function for compatibility with non-ESM modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};\n","__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n        if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n            Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n        }\n    }\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","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 disable the bleed so that content\n        // is left aligned with the parent container, and then once we have the\n        // offset and page values we enable it to actually full-bleed. The `offset`\n        // will push the content up to the parent margin.\n        //\n        // This matters most on SSR: the server renders the un-mounted state, so\n        // disabling the bleed here keeps content aligned to the parent margin and\n        // avoids a content shift once the client mounts.\n        enabled={mounted}\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"],"names":["__webpack_require__","module","getter","definition","key","Object","obj","prop","Symbol","Shelf","alignItems","showProgress","snap","children","onChange","rest","cells","useMemo","Children","isValidElement","child","createRef","containerRef","useRef","viewportRef","mounted","setMounted","useState","pages","setPages","offset","setOffset","atStart","setAtStart","init","useCallback","container","values","ref","i","Math","paginateCarousel","x","useEffect","window","pageIndex","setCursor","useCursor","viewport","handler","nearestPage","currentPage","nextPage","Infinity","scrollToPage","index","xPosition","scrollTo","handleNext","handlePrev","Container","Nav","Previous","Next","FullBleed","Viewport","Rail","isFirst","isLast","Cell","undefined","CELL_GAP_PADDING_AMOUNT","ShelfScrollBar","styled","Box","visuallyDisableScrollbar","ShelfNext","ShelfPrevious"],"mappings":"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"}

package/dist/esm/elements/FullBleed/FullBleed.js

@@ -1,6 +1,6 @@
 import styled_components from "styled-components";
 import { Box } from "../Box/index.js";
-const FullBleed = /*#__PURE__*/ styled_components(Box).attrs((props)=>({
+const FullBleed = /*#__PURE__*/ styled_components(Box).attrs((props)=>false === props.enabled ? {} : {
         position: props.position ?? "relative",
         left: props.left ?? "50%",
         right: props.right ?? "50%",
@@ -8,7 +8,9 @@ const FullBleed = /*#__PURE__*/ styled_components(Box).attrs((props)=>({
         maxWidth: props.maxWidth ?? "100vw",
         marginLeft: props.marginLeft ?? "-50vw",
         marginRight: props.marginRight ?? "-50vw"
-    })).withConfig({
+    }).withConfig({
+    shouldForwardProp: (prop)=>"enabled" !== prop
+}).withConfig({
     displayName: "FullBleed"
 })([
     ""

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

@@ -1 +1 @@
-{"version":3,"file":"elements/FullBleed/FullBleed.js","sources":["../../../../src/elements/FullBleed/FullBleed.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\n\n/** FullBleedProps */\nexport type FullBleedProps = BoxProps\n\n/**\n * Utility to break out of parent containers\n */\nexport const FullBleed = styled(Box).attrs<FullBleedProps>((props) => ({\n  position: props.position ?? \"relative\",\n  left: props.left ?? \"50%\",\n  right: props.right ?? \"50%\",\n  width: props.width ?? \"100vw\",\n  maxWidth: props.maxWidth ?? \"100vw\",\n  marginLeft: props.marginLeft ?? \"-50vw\",\n  marginRight: props.marginRight ?? \"-50vw\",\n}))<FullBleedProps>``\n"],"names":["FullBleed","styled","Box","props"],"mappings":";;AASO,MAAMA,YAAY,WAAHA,GAAGC,kBAAOC,KAAK,KAAK,CAAiB,CAACC,QAAW;QACrE,UAAUA,MAAM,QAAQ,IAAI;QAC5B,MAAMA,MAAM,IAAI,IAAI;QACpB,OAAOA,MAAM,KAAK,IAAI;QACtB,OAAOA,MAAM,KAAK,IAAI;QACtB,UAAUA,MAAM,QAAQ,IAAI;QAC5B,YAAYA,MAAM,UAAU,IAAI;QAChC,aAAaA,MAAM,WAAW,IAAI;IACpC"}
+{"version":3,"file":"elements/FullBleed/FullBleed.js","sources":["../../../../src/elements/FullBleed/FullBleed.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Box, BoxProps } from \"../Box\"\n\n/** FullBleedProps */\nexport type FullBleedProps = BoxProps & {\n  /**\n   * Whether to break out of the parent container. Defaults to `true`.\n   *\n   * Set to `false` for SSR / pre-measurement renders where the bleed offset\n   * isn't known yet — keeping content aligned to the parent container avoids a\n   * content shift once the client mounts and the bleed is enabled.\n   */\n  enabled?: boolean\n}\n\n/**\n * Utility to break out of parent containers\n */\nexport const FullBleed = styled(Box).attrs<FullBleedProps>((props) =>\n  props.enabled === false\n    ? {}\n    : {\n        position: props.position ?? \"relative\",\n        left: props.left ?? \"50%\",\n        right: props.right ?? \"50%\",\n        width: props.width ?? \"100vw\",\n        maxWidth: props.maxWidth ?? \"100vw\",\n        marginLeft: props.marginLeft ?? \"-50vw\",\n        marginRight: props.marginRight ?? \"-50vw\",\n      }\n).withConfig({\n  // `enabled` is a config prop, not a style/DOM attribute — keep it off the\n  // rendered element.\n  shouldForwardProp: (prop) => prop !== \"enabled\",\n})``\n"],"names":["FullBleed","styled","Box","props","prop"],"mappings":";;AAkBO,MAAMA,YAAY,WAAHA,GAAGC,kBAAOC,KAAK,KAAK,CAAiB,CAACC,QAC1DA,AAAkB,UAAlBA,MAAM,OAAO,GACT,CAAC,IACD;QACE,UAAUA,MAAM,QAAQ,IAAI;QAC5B,MAAMA,MAAM,IAAI,IAAI;QACpB,OAAOA,MAAM,KAAK,IAAI;QACtB,OAAOA,MAAM,KAAK,IAAI;QACtB,UAAUA,MAAM,QAAQ,IAAI;QAC5B,YAAYA,MAAM,UAAU,IAAI;QAChC,aAAaA,MAAM,WAAW,IAAI;IACpC,GACJ,UAAU,CAAC;IAGX,mBAAmB,CAACC,OAASA,AAAS,cAATA;AAC/B"}

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

@@ -116,10 +116,8 @@ const Shelf = ({ alignItems = "flex-end", showProgress = true, snap = "none", ch
         onClick: handleNext,
         disabled: pageIndex === pages.length - 1,
         "aria-label": "Next page"
-    })), /*#__PURE__*/ react.createElement(FullBleed, mounted ? {} : {
-        left: null,
-        right: null,
-        marginLeft: null
+    })), /*#__PURE__*/ react.createElement(FullBleed, {
+        enabled: mounted
     }, /*#__PURE__*/ react.createElement(Viewport, {
         ref: viewportRef
     }, /*#__PURE__*/ react.createElement(Rail, {

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

@@ -1 +1 @@
-{"version":3,"file":"elements/Shelf/Shelf.js","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"],"names":["Shelf","alignItems","showProgress","snap","children","onChange","rest","cells","useMemo","Children","isValidElement","child","createRef","containerRef","useRef","viewportRef","mounted","setMounted","useState","pages","setPages","offset","setOffset","atStart","setAtStart","init","useCallback","container","values","ref","i","Math","paginateCarousel","x","useEffect","window","pageIndex","setCursor","useCursor","viewport","handler","nearestPage","currentPage","nextPage","Infinity","scrollToPage","index","xPosition","scrollTo","handleNext","handlePrev","Container","Nav","Previous","Next","FullBleed","Viewport","Rail","isFirst","isLast","Cell","undefined","CELL_GAP_PADDING_AMOUNT","ShelfScrollBar","styled","Box","visuallyDisableScrollbar","ShelfNext","ShelfPrevious"],"mappings":";;;;;;;;;AAgCO,MAAMA,QAAuD,CAAC,EACnEC,aAAa,UAAU,EACvBC,eAAe,IAAI,EACnBC,OAAO,MAAM,EACbC,QAAQ,EACRC,QAAQ,EACR,GAAGC,MACJ;IACC,MAAMC,QAAQC,QACZ,IACEC,SAAS,OAAO,CAACL,UACd,MAAM,CAACM,gBACP,GAAG,CAAC,CAACC,QAAW;gBAAEA;gBAAO,KAAK,WAAL,GAAKC;YAA2B,KAC9D;QAACR;KAAS;IAGZ,MAAMS,eAAeC,OAA8B;IACnD,MAAMC,cAAcD,OAA8B;IAElD,MAAM,CAACE,SAASC,WAAW,GAAGC,SAAS;IACvC,MAAM,CAACC,OAAOC,SAAS,GAAGF,SAAS;QAAC;KAAE;IACtC,MAAM,CAACG,QAAQC,UAAU,GAAGJ,SAAS;IACrC,MAAM,CAACK,SAASC,WAAW,GAAGN,SAAS;IAEvC,MAAMO,OAAOC,YAAY;QACvB,IAAIb,AAAyB,SAAzBA,aAAa,OAAO,EAAW;QAEnC,MAAM,EAAE,SAASc,SAAS,EAAE,GAAGd;QAG/B,MAAMe,SAASrB,MAAM,GAAG,CAAC,CAAC,EAAEsB,GAAG,EAAE,EAAEC;YAGjC,IAAIT,AAAW,MAAXA,UAAiBS,CAAAA,AAAM,MAANA,KAAWA,MAAMvB,MAAM,MAAM,GAAG,IACnD,OAAOwB,KAAK,IAAI,CAACF,IAAI,OAAO,CAAE,WAAW,GAAGR;YAG9C,OAAOQ,IAAI,OAAO,CAAE,WAAW;QACjC;QAEAT,SACEY,iBAAiB;YAIf,UAAUL,UAAU,WAAW;YAC/BC;QACF;QAIF,MAAM,EAAEK,CAAC,EAAE,GAAGN,UAAU,qBAAqB;QAC7CL,UAAUW;QAEVhB,WAAW;IACb,GAAG;QAACV;QAAOc;KAAO;IAElBa,UAAU;QACRT;QAEAU,OAAO,gBAAgB,CAAC,UAAUV;QAClC,OAAO;YACLU,OAAO,mBAAmB,CAAC,UAAUV;QACvC;IACF,GAAG;QAACA;KAAK;IAET,MAAM,EAAE,OAAOW,SAAS,EAAEC,SAAS,EAAE,GAAGC,UAAU;QAChD,KAAKnB,MAAM,MAAM;IACnB;IAGAe,UAAU;QACR,IAAInB,AAAwB,SAAxBA,YAAY,OAAO,EAAW;QAElC,MAAM,EAAE,SAASwB,QAAQ,EAAE,GAAGxB;QAE9B,MAAMyB,UAAU;YACd,MAAMC,cAActB,MAAM,IAAI,CAAC,CAACuB,aAAaZ;gBAC3C,MAAMa,WAAWxB,KAAK,CAACW,IAAI,EAAE,IAAIc;gBACjC,OACEL,SAAS,UAAU,IAAIG,eAAeH,SAAS,UAAU,GAAGI;YAEhE;YAEAN,UAAUlB,MAAM,OAAO,CAACsB;YACxBjB,WAAWe,AAAwB,MAAxBA,SAAS,UAAU;QAChC;QAEAA,SAAS,gBAAgB,CAAC,UAAUC,SAAS;YAAE,SAAS;QAAK;QAC7D,OAAO;YACLD,SAAS,mBAAmB,CAAC,UAAUC;QACzC;IACF,GAAG;QAACrB;QAAOkB;KAAU;IAGrBH,UAAU;QACR7B,YAAYA,SAAS+B;IACvB,GAAG;QAAC/B;QAAU+B;KAAU;IAGxB,MAAMS,eAAe,CAACC;QACpB,MAAMC,YAAY5B,KAAK,CAAC2B,MAAM;QAC9BE,SAASD;IACX;IAEA,MAAMC,WAAW,CAACD;QAChB,IAAIhC,AAAwB,SAAxBA,YAAY,OAAO,EAAW;QAElC,MAAM,EAAE,SAASwB,QAAQ,EAAE,GAAGxB;QAE9B,IAAIwB,SAAS,QAAQ,EAAE,YACrBA,SAAS,QAAQ,CAAC;YAAE,MAAMQ;YAAW,UAAU;QAAS;QAI1DR,SAAS,UAAU,GAAGQ;IACxB;IAMA,MAAME,aAAa;QACjBJ,aAAaT,YAAY;IAC3B;IAEA,MAAMc,aAAa;QACjB,IAAId,AAAc,MAAdA,WAAiB,YACnBY,SAAS;QAIXH,aAAaT,YAAY;IAC3B;IAEA,OAAO,WAAP,GACE,oBAACe,WAASA;QAAC,KAAKtC;QAAsB,GAAGP,IAAI;qBAC3C,oBAAC8C,KAAGA;QACF,IAAG;QAGH,QAAQ;YAAC;YAAI;SAAG;qBAEhB,oBAACC,UAAQA;QACP,SAASH;QACT,UAAU3B;QACV,cAAW;sBAGb,oBAAC+B,MAAIA;QACH,SAASL;QACT,UAAUb,cAAcjB,MAAM,MAAM,GAAG;QACvC,cAAW;uBAIf,oBAACoC,WAKM,AAACvC,UAA0D,CAAC,IAAjD;QAAE,MAAM;QAAM,OAAO;QAAM,YAAY;IAAK,GAAK,cAEjE,oBAACwC,UAAQA;QAAC,KAAKzC;qBACb,oBAAC0C,MAAIA;QAAC,IAAG;QAAK,UAAS;QAAW,YAAYxD;QAAY,IAAI;YAAC;YAAG;SAAE;OACjEM,MAAM,GAAG,CAAC,CAAC,EAAEI,KAAK,EAAEkB,GAAG,EAAE,EAAEC;QAC1B,MAAM4B,UAAU5B,AAAM,MAANA;QAChB,MAAM6B,SAAS7B,MAAMvB,MAAM,MAAM,GAAG;QAEpC,OAAO,WAAP,GACE,oBAACqD,MAAIA;YACH,IAAG;YACH,KAAK9B;YACL,KAAKD;YACL,IAAI6B,UAAUrC,SAASwC;YACvB,IAAI,AAACF,SAAmCtC,SAA1ByC;YACd,OAAO;gBAAE,iBAAiB3D;YAAK;WAE9BQ;IAGP,OAKLT,gBAAgB,WAAhBA,GAAgB,oBAAC6D,gBAAcA;QAAC,UAAUhD,YAAY,OAAO;;AAGpE;AAEA,MAAMoC,YAAY,WAAHA,GAAGa,kBAAOC,KAAGA,UAAAA,CAAAA;;;;;AAiB5B,MAAMb,MAAM,WAAHA,GAAGY,kBAAOC,KAAGA,UAAAA,CAAAA;;;;;AAStB,MAAMT,WAAW,WAAHA,GAAGQ,kBAAOC,KAAGA,UAAAA,CAAAA;;;;;GASvBC;AAGJ,MAAMT,OAAO,WAAHA,GAAGO,kBAAOC,KAAGA,UAAAA,CAAAA;;;;;AAYvB,MAAML,OAAO,WAAHA,GAAGI,kBAAOC,KAAGA,UAAAA,CAAAA;;;;;AAIvB,MAAMX,OAAO,WAAHA,GAAGU,kBAAOG,WAASA,UAAAA,CAAAA;;;;;AAW7B,MAAMd,WAAW,WAAHA,GAAGW,kBAAOI,eAAaA,UAAAA,CAAAA"}
+{"version":3,"file":"elements/Shelf/Shelf.js","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 disable the bleed so that content\n        // is left aligned with the parent container, and then once we have the\n        // offset and page values we enable it to actually full-bleed. The `offset`\n        // will push the content up to the parent margin.\n        //\n        // This matters most on SSR: the server renders the un-mounted state, so\n        // disabling the bleed here keeps content aligned to the parent margin and\n        // avoids a content shift once the client mounts.\n        enabled={mounted}\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"],"names":["Shelf","alignItems","showProgress","snap","children","onChange","rest","cells","useMemo","Children","isValidElement","child","createRef","containerRef","useRef","viewportRef","mounted","setMounted","useState","pages","setPages","offset","setOffset","atStart","setAtStart","init","useCallback","container","values","ref","i","Math","paginateCarousel","x","useEffect","window","pageIndex","setCursor","useCursor","viewport","handler","nearestPage","currentPage","nextPage","Infinity","scrollToPage","index","xPosition","scrollTo","handleNext","handlePrev","Container","Nav","Previous","Next","FullBleed","Viewport","Rail","isFirst","isLast","Cell","undefined","CELL_GAP_PADDING_AMOUNT","ShelfScrollBar","styled","Box","visuallyDisableScrollbar","ShelfNext","ShelfPrevious"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "46.9.2",
+  "version": "46.9.3",
   "description": "Design system library for react components",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -199,5 +199,5 @@
       "url": "http://localhost"
     }
   },
-  "gitHead": "bc9cd9ad53fd938394e7a087397c429641553c66"
+  "gitHead": "cfb3d009cbae5f3880361ae8fc06c9efeec8f845"
 }