@artsy/palette 29.6.0 → 29.6.2

package/dist/elements/Popover/Popover.js

@@ -183,8 +183,7 @@ var Popover = function Popover(_ref) {
   })), /*#__PURE__*/_react.default.createElement(Panel, _extends({
     variant: variant,
     position: "relative",
-    py: 2,
-    px: 1,
+    p: 1,
     zIndex: 1
   }, rest), popover))));
 };

package/dist/elements/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Popover/Popover.tsx"],"names":["POPOVER_VARIANTS","defaultLight","backgroundColor","color","defaultDark","Popover","children","ignoreClickOutside","manageFocus","offset","onClose","placement","pointer","popover","variant","visible","_visible","zIndex","rest","setVisible","tooltipRef","current","focus","anchorRef","onVisible","onHide","handleHide","handleKeydown","event","key","document","addEventListener","removeEventListener","position","active","isFlipped","state","ref","onClickOutside","when","type","createPortal","Tip","Box","DROP_SHADOW","variants","Panel","Close","Clickable"],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { DROP_SHADOW } from \"../../helpers\"\nimport { CloseIcon } from \"../../svgs\"\nimport { Position, useClickOutside, usePortal, usePosition } from \"../../utils\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { Pointer } from \"../Pointer\"\n\nexport const POPOVER_VARIANTS = {\n  defaultLight: {\n    backgroundColor: \"white100\",\n    color: \"black100\",\n  },\n  defaultDark: {\n    backgroundColor: \"black100\",\n    color: \"white100\",\n  },\n}\n\nexport type PopoverVariant = keyof typeof POPOVER_VARIANTS\n\nexport interface PopoverActions {\n  /** Call to show popover */\n  onVisible(): void\n  /** Call to hide popover */\n  onHide(): void\n  /** Pass ref to element you want the popover to be anchored to */\n  anchorRef: React.MutableRefObject<HTMLElement>\n}\n\nexport interface PopoverProps extends BoxProps {\n  children: ({ anchorRef, onVisible, onHide }: PopoverActions) => JSX.Element\n  ignoreClickOutside?: boolean\n  manageFocus?: boolean\n  offset?: number\n  onClose?: () => void\n  placement?: Position\n  /** Display triangular pointer back to anchor node */\n  pointer?: boolean\n  popover: React.ReactNode\n  variant?: PopoverVariant\n  /** Initial default visibility */\n  visible?: boolean\n}\n\n/**\n * A `Popover` is a small modal-type element which is anchored, and can be\n * positioned relative to, another element.\n */\nexport const Popover: React.FC<PopoverProps> = ({\n  children,\n  ignoreClickOutside = false,\n  manageFocus = true,\n  offset = 10,\n  onClose,\n  placement = \"top\",\n  pointer = false,\n  popover,\n  variant = \"defaultLight\",\n  visible: _visible = false,\n  zIndex = 1,\n  ...rest\n}) => {\n  const [visible, setVisible] = useState(false)\n\n  // If prop updates/set initial visibility.\n  useEffect(() => {\n    setVisible(_visible)\n  }, [_visible])\n\n  // Yields focus back and forth between popover and anchor\n  useUpdateEffect(() => {\n    if (!manageFocus) return\n\n    if (visible && tooltipRef.current) {\n      tooltipRef.current.focus()\n      return\n    }\n\n    if (!anchorRef.current) return\n    anchorRef.current.focus()\n  }, [visible])\n\n  const onVisible = useCallback(() => {\n    setVisible(true)\n  }, [])\n\n  const onHide = useCallback(() => {\n    setVisible(false)\n  }, [])\n\n  const handleHide = useCallback(() => {\n    onHide()\n    onClose?.()\n  }, [onHide, onClose])\n\n  useEffect(() => {\n    const handleKeydown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        handleHide()\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeydown)\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown)\n    }\n  }, [handleHide])\n\n  const {\n    anchorRef,\n    tooltipRef,\n    state: { isFlipped },\n  } = usePosition({\n    position: placement,\n    offset,\n    active: visible,\n  })\n\n  useClickOutside({\n    ref: tooltipRef,\n    onClickOutside: handleHide,\n    when: visible && !ignoreClickOutside,\n    type: \"click\",\n  })\n\n  const { createPortal } = usePortal()\n\n  return (\n    <>\n      {children({ anchorRef: anchorRef as any, onVisible, onHide })}\n\n      {visible &&\n        createPortal(\n          <Tip\n            tabIndex={0}\n            ref={tooltipRef as any}\n            zIndex={zIndex}\n            display=\"inline-block\"\n            position=\"relative\"\n            variant={variant}\n          >\n            {pointer && (\n              <Pointer\n                anchorRef={anchorRef}\n                tooltipRef={tooltipRef}\n                variant={variant}\n                placement={placement}\n                isFlipped={isFlipped}\n              />\n            )}\n\n            <Close\n              position=\"relative\"\n              zIndex={2}\n              p={1}\n              onClick={handleHide}\n              aria-label=\"Close\"\n            >\n              <CloseIcon fill=\"currentColor\" display=\"block\" />\n            </Close>\n\n            <Panel\n              variant={variant}\n              position=\"relative\"\n              py={2}\n              px={1}\n              zIndex={1}\n              {...rest}\n            >\n              {popover}\n            </Panel>\n          </Tip>\n        )}\n    </>\n  )\n}\n\nconst Tip = styled(Box)<{ variant?: PopoverVariant }>`\n  position: fixed;\n  text-align: left;\n  transition: opacity 250ms ease-out;\n  box-shadow: ${DROP_SHADOW};\n  ${variant({ variants: POPOVER_VARIANTS })}\n`\n\nconst Panel = styled(Box)<{ variant?: PopoverVariant }>`\n  ${variant({ variants: POPOVER_VARIANTS })}\n`\n\nconst Close = styled(Clickable)`\n  float: right;\n`\n"],"file":"Popover.js"}
+{"version":3,"sources":["../../../src/elements/Popover/Popover.tsx"],"names":["POPOVER_VARIANTS","defaultLight","backgroundColor","color","defaultDark","Popover","children","ignoreClickOutside","manageFocus","offset","onClose","placement","pointer","popover","variant","visible","_visible","zIndex","rest","setVisible","tooltipRef","current","focus","anchorRef","onVisible","onHide","handleHide","handleKeydown","event","key","document","addEventListener","removeEventListener","position","active","isFlipped","state","ref","onClickOutside","when","type","createPortal","Tip","Box","DROP_SHADOW","variants","Panel","Close","Clickable"],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { DROP_SHADOW } from \"../../helpers\"\nimport { CloseIcon } from \"../../svgs\"\nimport { Position, useClickOutside, usePortal, usePosition } from \"../../utils\"\nimport { useUpdateEffect } from \"../../utils/useUpdateEffect\"\nimport { Box, BoxProps } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { Pointer } from \"../Pointer\"\n\nexport const POPOVER_VARIANTS = {\n  defaultLight: {\n    backgroundColor: \"white100\",\n    color: \"black100\",\n  },\n  defaultDark: {\n    backgroundColor: \"black100\",\n    color: \"white100\",\n  },\n}\n\nexport type PopoverVariant = keyof typeof POPOVER_VARIANTS\n\nexport interface PopoverActions {\n  /** Call to show popover */\n  onVisible(): void\n  /** Call to hide popover */\n  onHide(): void\n  /** Pass ref to element you want the popover to be anchored to */\n  anchorRef: React.MutableRefObject<HTMLElement>\n}\n\nexport interface PopoverProps extends BoxProps {\n  children: ({ anchorRef, onVisible, onHide }: PopoverActions) => JSX.Element\n  ignoreClickOutside?: boolean\n  manageFocus?: boolean\n  offset?: number\n  onClose?: () => void\n  placement?: Position\n  /** Display triangular pointer back to anchor node */\n  pointer?: boolean\n  popover: React.ReactNode\n  variant?: PopoverVariant\n  /** Initial default visibility */\n  visible?: boolean\n}\n\n/**\n * A `Popover` is a small modal-type element which is anchored, and can be\n * positioned relative to, another element.\n */\nexport const Popover: React.FC<PopoverProps> = ({\n  children,\n  ignoreClickOutside = false,\n  manageFocus = true,\n  offset = 10,\n  onClose,\n  placement = \"top\",\n  pointer = false,\n  popover,\n  variant = \"defaultLight\",\n  visible: _visible = false,\n  zIndex = 1,\n  ...rest\n}) => {\n  const [visible, setVisible] = useState(false)\n\n  // If prop updates/set initial visibility.\n  useEffect(() => {\n    setVisible(_visible)\n  }, [_visible])\n\n  // Yields focus back and forth between popover and anchor\n  useUpdateEffect(() => {\n    if (!manageFocus) return\n\n    if (visible && tooltipRef.current) {\n      tooltipRef.current.focus()\n      return\n    }\n\n    if (!anchorRef.current) return\n    anchorRef.current.focus()\n  }, [visible])\n\n  const onVisible = useCallback(() => {\n    setVisible(true)\n  }, [])\n\n  const onHide = useCallback(() => {\n    setVisible(false)\n  }, [])\n\n  const handleHide = useCallback(() => {\n    onHide()\n    onClose?.()\n  }, [onHide, onClose])\n\n  useEffect(() => {\n    const handleKeydown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        handleHide()\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeydown)\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeydown)\n    }\n  }, [handleHide])\n\n  const {\n    anchorRef,\n    tooltipRef,\n    state: { isFlipped },\n  } = usePosition({\n    position: placement,\n    offset,\n    active: visible,\n  })\n\n  useClickOutside({\n    ref: tooltipRef,\n    onClickOutside: handleHide,\n    when: visible && !ignoreClickOutside,\n    type: \"click\",\n  })\n\n  const { createPortal } = usePortal()\n\n  return (\n    <>\n      {children({ anchorRef: anchorRef as any, onVisible, onHide })}\n\n      {visible &&\n        createPortal(\n          <Tip\n            tabIndex={0}\n            ref={tooltipRef as any}\n            zIndex={zIndex}\n            display=\"inline-block\"\n            position=\"relative\"\n            variant={variant}\n          >\n            {pointer && (\n              <Pointer\n                anchorRef={anchorRef}\n                tooltipRef={tooltipRef}\n                variant={variant}\n                placement={placement}\n                isFlipped={isFlipped}\n              />\n            )}\n\n            <Close\n              position=\"relative\"\n              zIndex={2}\n              p={1}\n              onClick={handleHide}\n              aria-label=\"Close\"\n            >\n              <CloseIcon fill=\"currentColor\" display=\"block\" />\n            </Close>\n\n            <Panel\n              variant={variant}\n              position=\"relative\"\n              p={1}\n              zIndex={1}\n              {...rest}\n            >\n              {popover}\n            </Panel>\n          </Tip>\n        )}\n    </>\n  )\n}\n\nconst Tip = styled(Box)<{ variant?: PopoverVariant }>`\n  position: fixed;\n  text-align: left;\n  transition: opacity 250ms ease-out;\n  box-shadow: ${DROP_SHADOW};\n  ${variant({ variants: POPOVER_VARIANTS })}\n`\n\nconst Panel = styled(Box)<{ variant?: PopoverVariant }>`\n  ${variant({ variants: POPOVER_VARIANTS })}\n`\n\nconst Close = styled(Clickable)`\n  float: right;\n`\n"],"file":"Popover.js"}

package/dist/utils/useFocusLock.js

@@ -11,6 +11,8 @@ var _useCursor2 = require("use-cursor");
 
 var _useMutationObserver = require("./useMutationObserver");
 
+var _tabbable = require("tabbable");
+
 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."); }
@@ -23,8 +25,6 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var FOCUSABLE_SELECTOR = ["a[href]:not([tabindex='-1'])", "area[href]:not([tabindex='-1'])", "input:not([disabled]):not([tabindex='-1'])", "select:not([disabled]):not([tabindex='-1'])", "textarea:not([disabled]):not([tabindex='-1'])", "button:not([disabled]):not([tabindex='-1'])", '[tabindex="0"]'].join(", ");
-
 /**
  * Locks focus within the given element
  */
@@ -40,12 +40,20 @@ var useFocusLock = function useFocusLock(_ref) {
 
   var updateFocusableEls = (0, _react.useCallback)(function () {
     if (ref.current === null) return;
-    setFocusableEls(Array.from(ref.current.querySelectorAll(FOCUSABLE_SELECTOR))); // When `active` changes that typically means our target ref
+    setFocusableEls((0, _tabbable.tabbable)(ref.current)); // When `active` changes that typically means our target ref
     // is being inserted into the DOM, so we need to update the focusable elements.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [active]); // Set initial focusable elements on mount
 
-  (0, _react.useEffect)(updateFocusableEls, [updateFocusableEls]);
+  (0, _react.useEffect)(function () {
+    // Wait for the next tick to ensure focusable elements are in the DOM
+    var timeout = setTimeout(function () {
+      updateFocusableEls();
+    }, 0);
+    return function () {
+      clearTimeout(timeout);
+    };
+  }, [updateFocusableEls]);
   var skipUpdateFocusRef = (0, _react.useRef)(false); // Detects when DOM changes and updates focusable elements
 
   (0, _useMutationObserver.useMutationObserver)({

package/dist/utils/useFocusLock.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/useFocusLock.ts"],"names":["FOCUSABLE_SELECTOR","join","useFocusLock","ref","active","focusableEls","setFocusableEls","updateFocusableEls","current","Array","from","querySelectorAll","skipUpdateFocusRef","onMutate","mutations","hasMeaningfullyMutated","some","mutation","addedNodes","length","removedNodes","max","focusableIndex","index","handlePrev","handleNext","setCursor","focus","handleKeydown","event","key","preventDefault","stopPropagation","shiftKey","focusedElPriorToOpen","document","activeElement","addEventListener","removeEventListener","handleClick","target","findIndex","node","handleFocusIn","focusableEl","stopImmediatePropagation"],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\"\nimport { useCursor } from \"use-cursor\"\nimport { useMutationObserver } from \"./useMutationObserver\"\n\nconst FOCUSABLE_SELECTOR = [\n  \"a[href]:not([tabindex='-1'])\",\n  \"area[href]:not([tabindex='-1'])\",\n  \"input:not([disabled]):not([tabindex='-1'])\",\n  \"select:not([disabled]):not([tabindex='-1'])\",\n  \"textarea:not([disabled]):not([tabindex='-1'])\",\n  \"button:not([disabled]):not([tabindex='-1'])\",\n  '[tabindex=\"0\"]',\n].join(\", \")\n\ninterface UseFocusLock {\n  ref: React.MutableRefObject<HTMLElement | null>\n  active?: boolean\n}\n\n/**\n * Locks focus within the given element\n */\nexport const useFocusLock = ({ ref, active = true }: UseFocusLock) => {\n  const [focusableEls, setFocusableEls] = useState<HTMLElement[]>([])\n\n  const updateFocusableEls = useCallback(() => {\n    if (ref.current === null) return\n\n    setFocusableEls(\n      Array.from(ref.current.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))\n    )\n\n    // When `active` changes that typically means our target ref\n    // is being inserted into the DOM, so we need to update the focusable elements.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [active])\n\n  // Set initial focusable elements on mount\n  useEffect(updateFocusableEls, [updateFocusableEls])\n\n  const skipUpdateFocusRef = useRef(false)\n\n  // Detects when DOM changes and updates focusable elements\n  useMutationObserver({\n    ref,\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      if (hasMeaningfullyMutated) {\n        skipUpdateFocusRef.current = true\n        updateFocusableEls()\n      }\n    },\n  })\n\n  const {\n    index: focusableIndex,\n    handlePrev,\n    handleNext,\n    setCursor,\n  } = useCursor({ max: focusableEls.length })\n\n  // Moves focus when index changes\n  useEffect(() => {\n    if (!focusableEls.length) return\n\n    // In order to avoid a loop when a focus might be the cause of a mutation,\n    // we skip focusing the el.\n    if (skipUpdateFocusRef.current) {\n      skipUpdateFocusRef.current = false\n      return\n    }\n\n    focusableEls[focusableIndex].focus()\n  }, [focusableEls, focusableIndex])\n\n  // Handle keyboard navigation\n  useEffect(() => {\n    const handleKeydown = (event: KeyboardEvent) => {\n      if (!active) return\n\n      switch (event.key) {\n        case \"Tab\":\n          // Lock focus within element\n          event.preventDefault()\n          event.stopPropagation()\n\n          // Move focus up or down\n          event.shiftKey ? handlePrev() : handleNext()\n          break\n        default:\n          break\n      }\n    }\n\n    const focusedElPriorToOpen = document.activeElement as HTMLElement\n\n    document.addEventListener(\"keydown\", handleKeydown)\n\n    return () => {\n      // Return the focus\n      focusedElPriorToOpen.focus()\n\n      document.removeEventListener(\"keydown\", handleKeydown)\n    }\n  }, [active, handleNext, handlePrev])\n\n  useEffect(() => {\n    // Update the index when any focusable is clicked\n    const handleClick = (event: MouseEvent) => {\n      if (event.target !== document.activeElement) return\n\n      const index = focusableEls.findIndex((node) => node === event.target)\n\n      if (index === -1) return\n\n      setCursor(index)\n    }\n\n    // If focus escapes the trap, pull it back in\n    const handleFocusIn = (event: FocusEvent) => {\n      const index = focusableEls.findIndex((node) => node === event.target)\n      const focusableEl = focusableEls[focusableIndex]\n\n      if (index === -1 && !!focusableEl) {\n        event.stopImmediatePropagation()\n        focusableEl.focus()\n        return\n      }\n    }\n\n    document.addEventListener(\"click\", handleClick)\n    document.addEventListener(\"focusin\", handleFocusIn)\n    return () => {\n      document.removeEventListener(\"click\", handleClick)\n      document.removeEventListener(\"focusin\", handleFocusIn)\n    }\n  }, [focusableEls, focusableIndex, setCursor])\n}\n"],"file":"useFocusLock.js"}
+{"version":3,"sources":["../../src/utils/useFocusLock.ts"],"names":["useFocusLock","ref","active","focusableEls","setFocusableEls","updateFocusableEls","current","timeout","setTimeout","clearTimeout","skipUpdateFocusRef","onMutate","mutations","hasMeaningfullyMutated","some","mutation","addedNodes","length","removedNodes","max","focusableIndex","index","handlePrev","handleNext","setCursor","focus","handleKeydown","event","key","preventDefault","stopPropagation","shiftKey","focusedElPriorToOpen","document","activeElement","addEventListener","removeEventListener","handleClick","target","findIndex","node","handleFocusIn","focusableEl","stopImmediatePropagation"],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\"\nimport { useCursor } from \"use-cursor\"\nimport { useMutationObserver } from \"./useMutationObserver\"\nimport { tabbable } from \"tabbable\"\n\ninterface UseFocusLock {\n  ref: React.MutableRefObject<HTMLElement | null>\n  active?: boolean\n}\n\ntype FocusableElement = HTMLElement | SVGElement\n\n/**\n * Locks focus within the given element\n */\nexport const useFocusLock = ({ ref, active = true }: UseFocusLock) => {\n  const [focusableEls, setFocusableEls] = useState<FocusableElement[]>([])\n\n  const updateFocusableEls = useCallback(() => {\n    if (ref.current === null) return\n\n    setFocusableEls(tabbable(ref.current))\n\n    // When `active` changes that typically means our target ref\n    // is being inserted into the DOM, so we need to update the focusable elements.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [active])\n\n  // Set initial focusable elements on mount\n  useEffect(() => {\n    // Wait for the next tick to ensure focusable elements are in the DOM\n    const timeout = setTimeout(() => {\n      updateFocusableEls()\n    }, 0)\n\n    return () => {\n      clearTimeout(timeout)\n    }\n  }, [updateFocusableEls])\n\n  const skipUpdateFocusRef = useRef(false)\n\n  // Detects when DOM changes and updates focusable elements\n  useMutationObserver({\n    ref,\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      if (hasMeaningfullyMutated) {\n        skipUpdateFocusRef.current = true\n        updateFocusableEls()\n      }\n    },\n  })\n\n  const {\n    index: focusableIndex,\n    handlePrev,\n    handleNext,\n    setCursor,\n  } = useCursor({ max: focusableEls.length })\n\n  // Moves focus when index changes\n  useEffect(() => {\n    if (!focusableEls.length) return\n\n    // In order to avoid a loop when a focus might be the cause of a mutation,\n    // we skip focusing the el.\n    if (skipUpdateFocusRef.current) {\n      skipUpdateFocusRef.current = false\n      return\n    }\n\n    focusableEls[focusableIndex].focus()\n  }, [focusableEls, focusableIndex])\n\n  // Handle keyboard navigation\n  useEffect(() => {\n    const handleKeydown = (event: KeyboardEvent) => {\n      if (!active) return\n\n      switch (event.key) {\n        case \"Tab\":\n          // Lock focus within element\n          event.preventDefault()\n          event.stopPropagation()\n\n          // Move focus up or down\n          event.shiftKey ? handlePrev() : handleNext()\n          break\n        default:\n          break\n      }\n    }\n\n    const focusedElPriorToOpen = document.activeElement as HTMLElement\n\n    document.addEventListener(\"keydown\", handleKeydown)\n\n    return () => {\n      // Return the focus\n      focusedElPriorToOpen.focus()\n\n      document.removeEventListener(\"keydown\", handleKeydown)\n    }\n  }, [active, handleNext, handlePrev])\n\n  useEffect(() => {\n    // Update the index when any focusable is clicked\n    const handleClick = (event: MouseEvent) => {\n      if (event.target !== document.activeElement) return\n\n      const index = focusableEls.findIndex((node) => node === event.target)\n\n      if (index === -1) return\n\n      setCursor(index)\n    }\n\n    // If focus escapes the trap, pull it back in\n    const handleFocusIn = (event: FocusEvent) => {\n      const index = focusableEls.findIndex((node) => node === event.target)\n      const focusableEl = focusableEls[focusableIndex]\n\n      if (index === -1 && !!focusableEl) {\n        event.stopImmediatePropagation()\n        focusableEl.focus()\n        return\n      }\n    }\n\n    document.addEventListener(\"click\", handleClick)\n    document.addEventListener(\"focusin\", handleFocusIn)\n    return () => {\n      document.removeEventListener(\"click\", handleClick)\n      document.removeEventListener(\"focusin\", handleFocusIn)\n    }\n  }, [focusableEls, focusableIndex, setCursor])\n}\n"],"file":"useFocusLock.js"}

package/dist/utils/useFocusLock.story.js

@@ -48,6 +48,9 @@ var Default = function Default() {
     variant: "primaryGray",
     tabIndex: -1
   }, "Skipped"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    variant: "primaryGray",
+    disabled: true
+  }, "Disabled"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
     variant: "primaryGray"
   }, "Focusable")), /*#__PURE__*/_react.default.createElement(_Input.Input, {
     placeholder: "Not focusable"

package/dist/utils/useFocusLock.story.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/useFocusLock.story.tsx"],"names":["title","Default","ref","WithAutocompleteInput","text","value"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,MAAMC,GAAG,GAAG,mBAA8B,IAA9B,CAAZ;AAEA,kCAAa;AAAEA,IAAAA,GAAG,EAAHA;AAAF,GAAb;AAEA,sBACE,yEACE,6BAAC,YAAD;AAAO,IAAA,WAAW,EAAC;AAAnB,IADF,eAEE;AAAK,IAAA,GAAG,EAAEA;AAAV,kBACE,6BAAC,YAAD;AAAO,IAAA,WAAW,EAAC;AAAnB,IADF,eAEE,6BAAC,YAAD;AAAO,IAAA,WAAW,EAAC;AAAnB,IAFF,eAGE;AAAG,IAAA,IAAI,EAAC,GAAR;AAAY,IAAA,QAAQ,EAAE,CAAC;AAAvB,eAHF,eAME;AAAG,IAAA,IAAI,EAAC;AAAR,iBANF,eAOE,6BAAC,cAAD;AAAQ,IAAA,OAAO,EAAC,aAAhB;AAA8B,IAAA,QAAQ,EAAE,CAAC;AAAzC,eAPF,eAUE,6BAAC,cAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,iBAVF,CAFF,eAcE,6BAAC,YAAD;AAAO,IAAA,WAAW,EAAC;AAAnB,IAdF,CADF;AAkBD,CAvBM;;;;AAyBA,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,GAAM;AACzC,MAAMD,GAAG,GAAG,mBAA8B,IAA9B,CAAZ;AAEA,kCAAa;AAAEA,IAAAA,GAAG,EAAHA;AAAF,GAAb;AAEA,sBACE;AAAK,IAAA,GAAG,EAAEA;AAAV,kBACE,6BAAC,YAAD;AAAO,IAAA,WAAW,EAAC;AAAnB,IADF,eAEE,6BAAC,YAAD;AAAO,IAAA,WAAW,EAAC;AAAnB,IAFF,eAGE,6BAAC,oCAAD;AACE,IAAA,WAAW,EAAC,WADd;AAEE,IAAA,OAAO,EAAE,CACP;AAAEE,MAAAA,IAAI,EAAE,KAAR;AAAeC,MAAAA,KAAK,EAAE;AAAtB,KADO,EAEP;AAAED,MAAAA,IAAI,EAAE,KAAR;AAAeC,MAAAA,KAAK,EAAE;AAAtB,KAFO,EAGP;AAAED,MAAAA,IAAI,EAAE,OAAR;AAAiBC,MAAAA,KAAK,EAAE;AAAxB,KAHO;AAFX,IAHF,CADF;AAcD,CAnBM;;;AAAMF,qB","sourcesContent":["import React, { useRef } from \"react\"\nimport { useFocusLock } from \"./useFocusLock\"\nimport { Input } from \"../elements/Input\"\nimport { Button } from \"../elements/Button\"\nimport { AutocompleteInput } from \"../elements/AutocompleteInput\"\n\nexport default {\n  title: \"Hooks/useFocusLock\",\n}\n\nexport const Default = () => {\n  const ref = useRef<HTMLDivElement | null>(null)\n\n  useFocusLock({ ref })\n\n  return (\n    <>\n      <Input placeholder=\"Not focusable\" />\n      <div ref={ref}>\n        <Input placeholder=\"Focusable\" />\n        <Input placeholder=\"Focusable\" />\n        <a href=\"#\" tabIndex={-1}>\n          Skipped\n        </a>\n        <a href=\"#\">Focusable</a>\n        <Button variant=\"primaryGray\" tabIndex={-1}>\n          Skipped\n        </Button>\n        <Button variant=\"primaryGray\">Focusable</Button>\n      </div>\n      <Input placeholder=\"Not focusable\" />\n    </>\n  )\n}\n\nexport const WithAutocompleteInput = () => {\n  const ref = useRef<HTMLDivElement | null>(null)\n\n  useFocusLock({ ref })\n\n  return (\n    <div ref={ref}>\n      <Input placeholder=\"Focusable\" />\n      <Input placeholder=\"Focusable\" />\n      <AutocompleteInput\n        placeholder=\"Focusable\"\n        options={[\n          { text: \"One\", value: \"one\" },\n          { text: \"Two\", value: \"two\" },\n          { text: \"Three\", value: \"three\" },\n        ]}\n      />\n    </div>\n  )\n}\n"],"file":"useFocusLock.story.js"}
+{"version":3,"sources":["../../src/utils/useFocusLock.story.tsx"],"names":["title","Default","ref","WithAutocompleteInput","text","value"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,MAAMC,GAAG,GAAG,mBAA8B,IAA9B,CAAZ;AAEA,kCAAa;AAAEA,IAAAA,GAAG,EAAHA;AAAF,GAAb;AAEA,sBACE,yEACE,6BAAC,YAAD;AAAO,IAAA,WAAW,EAAC;AAAnB,IADF,eAEE;AAAK,IAAA,GAAG,EAAEA;AAAV,kBACE,6BAAC,YAAD;AAAO,IAAA,WAAW,EAAC;AAAnB,IADF,eAEE,6BAAC,YAAD;AAAO,IAAA,WAAW,EAAC;AAAnB,IAFF,eAGE;AAAG,IAAA,IAAI,EAAC,GAAR;AAAY,IAAA,QAAQ,EAAE,CAAC;AAAvB,eAHF,eAME;AAAG,IAAA,IAAI,EAAC;AAAR,iBANF,eAOE,6BAAC,cAAD;AAAQ,IAAA,OAAO,EAAC,aAAhB;AAA8B,IAAA,QAAQ,EAAE,CAAC;AAAzC,eAPF,eAUE,6BAAC,cAAD;AAAQ,IAAA,OAAO,EAAC,aAAhB;AAA8B,IAAA,QAAQ;AAAtC,gBAVF,eAaE,6BAAC,cAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,iBAbF,CAFF,eAiBE,6BAAC,YAAD;AAAO,IAAA,WAAW,EAAC;AAAnB,IAjBF,CADF;AAqBD,CA1BM;;;;AA4BA,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,GAAM;AACzC,MAAMD,GAAG,GAAG,mBAA8B,IAA9B,CAAZ;AAEA,kCAAa;AAAEA,IAAAA,GAAG,EAAHA;AAAF,GAAb;AAEA,sBACE;AAAK,IAAA,GAAG,EAAEA;AAAV,kBACE,6BAAC,YAAD;AAAO,IAAA,WAAW,EAAC;AAAnB,IADF,eAEE,6BAAC,YAAD;AAAO,IAAA,WAAW,EAAC;AAAnB,IAFF,eAGE,6BAAC,oCAAD;AACE,IAAA,WAAW,EAAC,WADd;AAEE,IAAA,OAAO,EAAE,CACP;AAAEE,MAAAA,IAAI,EAAE,KAAR;AAAeC,MAAAA,KAAK,EAAE;AAAtB,KADO,EAEP;AAAED,MAAAA,IAAI,EAAE,KAAR;AAAeC,MAAAA,KAAK,EAAE;AAAtB,KAFO,EAGP;AAAED,MAAAA,IAAI,EAAE,OAAR;AAAiBC,MAAAA,KAAK,EAAE;AAAxB,KAHO;AAFX,IAHF,CADF;AAcD,CAnBM;;;AAAMF,qB","sourcesContent":["import React, { useRef } from \"react\"\nimport { useFocusLock } from \"./useFocusLock\"\nimport { Input } from \"../elements/Input\"\nimport { Button } from \"../elements/Button\"\nimport { AutocompleteInput } from \"../elements/AutocompleteInput\"\n\nexport default {\n  title: \"Hooks/useFocusLock\",\n}\n\nexport const Default = () => {\n  const ref = useRef<HTMLDivElement | null>(null)\n\n  useFocusLock({ ref })\n\n  return (\n    <>\n      <Input placeholder=\"Not focusable\" />\n      <div ref={ref}>\n        <Input placeholder=\"Focusable\" />\n        <Input placeholder=\"Focusable\" />\n        <a href=\"#\" tabIndex={-1}>\n          Skipped\n        </a>\n        <a href=\"#\">Focusable</a>\n        <Button variant=\"primaryGray\" tabIndex={-1}>\n          Skipped\n        </Button>\n        <Button variant=\"primaryGray\" disabled>\n          Disabled\n        </Button>\n        <Button variant=\"primaryGray\">Focusable</Button>\n      </div>\n      <Input placeholder=\"Not focusable\" />\n    </>\n  )\n}\n\nexport const WithAutocompleteInput = () => {\n  const ref = useRef<HTMLDivElement | null>(null)\n\n  useFocusLock({ ref })\n\n  return (\n    <div ref={ref}>\n      <Input placeholder=\"Focusable\" />\n      <Input placeholder=\"Focusable\" />\n      <AutocompleteInput\n        placeholder=\"Focusable\"\n        options={[\n          { text: \"One\", value: \"one\" },\n          { text: \"Two\", value: \"two\" },\n          { text: \"Three\", value: \"three\" },\n        ]}\n      />\n    </div>\n  )\n}\n"],"file":"useFocusLock.story.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "29.6.0",
+  "version": "29.6.2",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -122,6 +122,7 @@
     "react-lazy-load-image-component": "1.5.5",
     "react-remove-scroll": "2.5.5",
     "styled-system": "^5.1.5",
+    "tabbable": "^6.1.1",
     "trunc-html": "^1.1.2",
     "use-cursor": "^1.2.3",
     "use-keyboard-list-navigation": "2.4.2"
@@ -174,5 +175,5 @@
       "<rootDir>/www/"
     ]
   },
-  "gitHead": "4354aba022beee99688856fb9754be7550b21888"
+  "gitHead": "a912e6883c85a5f6bafc5131929d6e0509af7de8"
 }