@artsy/palette 46.1.0 → 46.2.0

package/dist/cjs/elements/Dropdown/Dropdown.js

@@ -7,6 +7,7 @@ exports.Dropdown = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _utils = require("../../utils");
+var _useDidMount = require("../../utils/useDidMount");
 var _usePortal = require("../../utils/usePortal");
 var _Box = require("../Box");
 var _reactFocusOn = require("react-focus-on");
@@ -220,6 +221,7 @@ const Dropdown = ({
   const {
     createPortal
   } = (0, _usePortal.usePortal)();
+  const isClient = (0, _useDidMount.useDidMount)();
   const isPointer = !openDropdownByClick && pointerRef.current;
   const focusEnabled = visible && !isPointer;
   const [maxHeight, setMaxHeight] = (0, _react.useState)(0);
@@ -245,15 +247,9 @@ const Dropdown = ({
       window.removeEventListener("scroll", calculate);
     };
   }, [anchorRef, offset, placement, visible]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [children?.({
-      anchorRef: anchorRef,
-      anchorProps,
-      onVisible,
-      onHide,
-      setVisible,
-      visible
-    }), (visible || keepInDOM) && createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+  const dropdownPanel = (0, _react.useMemo)(() => {
+    if (!(visible || keepInDOM)) return null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
       "aria-label": "Press escape to close",
       tabIndex: 0,
       ref: panelRef,
@@ -302,7 +298,18 @@ const Dropdown = ({
           })
         })
       })
-    }))]
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible, keepInDOM, dropdownZIndex, placement, openDropdownByClick, maxHeight, offset, _transition, transition, translation, focusEnabled, returnFocus, dropdown, padding]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [children?.({
+      anchorRef: anchorRef,
+      anchorProps,
+      onVisible,
+      onHide,
+      setVisible,
+      visible
+    }), dropdownPanel && (!isClient && keepInDOM ? dropdownPanel : createPortal(dropdownPanel))]
   });
 };
 exports.Dropdown = Dropdown;

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_utils","_usePortal","_Box","_reactFocusOn","_themeGet","_esToolkit","_jsxRuntime","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Dropdown","placement","visible","_visible","keepInDOM","children","offset","dropdown","dropdownZIndex","openDropdownByClick","transition","_transition","flip","returnFocus","delay","rest","setVisible","useState","useEffect","timeoutRef","useRef","setVisibility","useCallback","isPointer","defaultDelay","finalDelay","current","clearTimeout","setTimeout","activeRef","pointerRef","onVisible","onHide","onToggleVisibility","anchorRef","tooltipRef","panelRef","state","isFlipped","usePosition","position","active","padding","handleKeyDown","event","handleKeyUp","document","activeElement","contains","handleClick","target","tagName","toLowerCase","isClosableElement","element","closest","addEventListener","removeEventListener","handleMouseEnter","handleMouseLeave","setTransition","requestAnimationFrame","translation","useMemo","handlePointerVisible","handlePointerHide","anchorProps","onClick","onMouseEnter","onMouseLeave","createPortal","usePortal","focusEnabled","maxHeight","setMaxHeight","calculate","debounce","nextMaxHeight","calculateMaxHeight","anchorRect","getBoundingClientRect","window","passive","jsxs","Fragment","jsx","Container","tabIndex","ref","zIndex","display","style","visibility","Panel","opacity","transform","FocusOn","noIsolation","enabled","onClickOutside","Pane","exports","styled","Box","withConfig","displayName","componentId","themeGet"],"sources":["../../../../src/elements/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { calculateMaxHeight, Position, usePosition } from \"../../utils\"\nimport { usePortal } from \"../../utils/usePortal\"\nimport { Box, BoxProps } from \"../Box\"\nimport { FocusOn } from \"react-focus-on\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport { debounce } from \"es-toolkit\"\n\nexport interface DropdownActions {\n  /** Call to show dropdown */\n  onVisible(): void\n  /** Call to hide dropdown */\n  onHide(): void\n  /** Manipulate visible directly */\n  setVisible(value: boolean): void\n  /** Pass ref to element you want the dropdown to be anchored to */\n  anchorRef: React.MutableRefObject<HTMLElement>\n  /** Spread props on element you want the dropdown to be anchored to */\n  anchorProps: React.HTMLAttributes<HTMLElement>\n  /** Whether or not the dropdown is visible */\n  visible: boolean\n}\n\ntype Children =\n  | React.ReactNode\n  | ((dropdownActions: DropdownActions) => React.ReactNode)\n\nexport interface DropdownProps extends Omit<BoxProps, \"children\"> {\n  placement?: Position\n  /** Intially visible by default? */\n  visible?: boolean\n  /** Whether or not we should animate the dropdown transition */\n  transition?: boolean\n  dropdown:\n    | React.ReactNode\n    | ((\n        dropdownActions: Pick<\n          DropdownActions,\n          \"onHide\" | \"onVisible\" | \"setVisible\" | \"visible\"\n        >\n      ) => void)\n  /** Custom zIndex to assign to the dropdown panel */\n  dropdownZIndex?: number\n  /** Distance in pixels from anchor */\n  offset?: number\n  /** Should the dropdown panel always be present in the DOM (vs removed when invisible) */\n  keepInDOM?: boolean\n  openDropdownByClick?: boolean\n  children: Children\n  /** Optionally disable flipping (default: `true`) */\n  flip?: boolean\n  /** Whether to return focus to the previous element when the dropdown closes (default: `true`) */\n  returnFocus?: boolean\n  /** Delay in milliseconds before showing the dropdown on hover (ignored when openDropdownByClick is true) */\n  delay?: number\n}\n\n/**\n * A `Dropdown` is a small modal-type element which is anchored, and can be\n * positioned relative to, another element and designed to be transitioned in on hover or on click.\n */\nexport const Dropdown = ({\n  placement = \"bottom\",\n  visible: _visible = false,\n  keepInDOM,\n  children,\n  offset = 10,\n  dropdown,\n  dropdownZIndex = 1,\n  openDropdownByClick,\n  transition: _transition = true,\n  flip = true,\n  returnFocus = true,\n  delay = 0,\n  ...rest\n}: DropdownProps) => {\n  const [visible, setVisible] = useState(false)\n\n  // If prop updates/set initial visibility.\n  useEffect(() => {\n    setVisible(_visible)\n  }, [_visible])\n\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n  // We need to keep the pointer state in sync with the visibility state, else we\n  // wind up with focus isolation out of sync.\n  const setVisibility = useCallback(\n    ({\n      visible,\n      isPointer = false,\n    }: {\n      visible: boolean\n      isPointer?: boolean\n    }) => {\n      // Use custom delay when opening via pointer interaction (hover), but only if not using click mode\n      const defaultDelay = _transition ? (visible ? 50 : 150) : visible ? 1 : 50\n      const finalDelay =\n        visible && isPointer && !openDropdownByClick ? delay : defaultDelay\n\n      timeoutRef.current && clearTimeout(timeoutRef.current)\n      timeoutRef.current = setTimeout(() => {\n        if (!visible && activeRef.current) return\n        pointerRef.current = isPointer\n        setVisible(visible)\n      }, finalDelay)\n    },\n    [_transition, delay, openDropdownByClick]\n  )\n\n  const onVisible = () => {\n    setVisibility({ visible: true })\n  }\n\n  const onHide = useCallback(() => {\n    setVisibility({ visible: false })\n  }, [setVisibility])\n\n  const onToggleVisibility = () => {\n    if (visible) {\n      return onHide()\n    }\n\n    onVisible()\n  }\n\n  const {\n    anchorRef,\n    tooltipRef: panelRef,\n    state: { isFlipped },\n  } = usePosition({\n    position: placement,\n    offset: 0,\n    active: visible,\n    flip,\n    padding: offset,\n  })\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onHide()\n      }\n    }\n\n    // Close dropdown when focus leaves element\n    const handleKeyUp = (event: KeyboardEvent) => {\n      if (!panelRef.current) return\n\n      if (\n        event.key === \"Tab\" &&\n        !(\n          panelRef.current === document.activeElement ||\n          panelRef.current.contains(document.activeElement)\n        )\n      ) {\n        onHide()\n      }\n    }\n\n    const handleClick = (event: MouseEvent) => {\n      if (!panelRef.current || !openDropdownByClick) return\n      const target = event.target as Element\n      const tagName = target.tagName.toLowerCase()\n      let isClosableElement = tagName === \"a\"\n      let element: Element | null = target\n\n      // Find parent link element\n      if (!isClosableElement) {\n        element = target.closest(\"a\")\n        isClosableElement = !!element\n      }\n\n      if (isClosableElement && element && panelRef.current.contains(element)) {\n        onHide()\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeyDown)\n    document.addEventListener(\"keyup\", handleKeyUp)\n    document.addEventListener(\"click\", handleClick)\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeyDown)\n      document.removeEventListener(\"keyup\", handleKeyUp)\n      document.removeEventListener(\"click\", handleClick)\n    }\n  }, [panelRef, openDropdownByClick, onHide])\n\n  const activeRef = useRef(false)\n\n  const handleMouseEnter = () => {\n    activeRef.current = true\n  }\n\n  const handleMouseLeave = () => {\n    activeRef.current = false\n    onHide()\n  }\n\n  const [transition, setTransition] = useState(false)\n\n  // Wait for next tick so that animation runs\n  useEffect(() => {\n    requestAnimationFrame(() => {\n      setTransition(visible)\n    })\n  }, [visible])\n\n  const translation = useMemo(() => {\n    switch (placement) {\n      case \"top-start\":\n      case \"top\":\n      case \"top-end\":\n        return `translateY(10px)`\n      case \"bottom-start\":\n      case \"bottom\":\n      case \"bottom-end\":\n        return `translateY(-10px)`\n      case \"left-start\":\n      case \"left\":\n      case \"left-end\":\n        return `translateX(10px)`\n      case \"right-start\":\n      case \"right\":\n      case \"right-end\":\n        return `translateX(-10px)`\n    }\n  }, [placement])\n\n  // Fills offset gap between anchor and panel to prevent mouseout\n  const padding = useMemo(() => {\n    switch (placement) {\n      case \"top-start\":\n      case \"top\":\n      case \"top-end\":\n        return { [isFlipped ? \"pt\" : \"pb\"]: offset }\n      case \"bottom-start\":\n      case \"bottom\":\n      case \"bottom-end\":\n        return { [isFlipped ? \"pb\" : \"pt\"]: offset }\n      case \"left-start\":\n      case \"left\":\n      case \"left-end\":\n        return { [isFlipped ? \"pl\" : \"pr\"]: offset }\n      case \"right-start\":\n      case \"right\":\n      case \"right-end\":\n        return { [isFlipped ? \"pr\" : \"pl\"]: offset }\n    }\n  }, [placement, isFlipped, offset])\n\n  const pointerRef = useRef(false)\n\n  const handlePointerVisible = () => {\n    setVisibility({ visible: true, isPointer: true })\n  }\n\n  const handlePointerHide = () => {\n    setVisibility({ visible: false, isPointer: false })\n  }\n\n  const anchorProps: React.HTMLAttributes<HTMLElement> = {\n    \"aria-expanded\": visible,\n    \"aria-haspopup\": true,\n    ...(openDropdownByClick\n      ? {\n          onClick: onToggleVisibility,\n        }\n      : {\n          onMouseEnter: handlePointerVisible,\n          onMouseLeave: handlePointerHide,\n          onClick: onVisible,\n        }),\n  }\n\n  const { createPortal } = usePortal()\n\n  const isPointer = !openDropdownByClick && pointerRef.current\n  const focusEnabled = visible && !isPointer\n\n  const [maxHeight, setMaxHeight] = useState(0)\n\n  useEffect(() => {\n    const calculate = debounce(() => {\n      if (!anchorRef.current) return\n\n      const nextMaxHeight = calculateMaxHeight({\n        anchorRect: anchorRef.current.getBoundingClientRect(),\n        position: placement,\n        offset,\n      })\n\n      setMaxHeight(nextMaxHeight)\n    }, 500)\n\n    window.addEventListener(\"resize\", calculate, { passive: true })\n    window.addEventListener(\"scroll\", calculate, { passive: true })\n    calculate()\n\n    return () => {\n      window.removeEventListener(\"resize\", calculate)\n      window.removeEventListener(\"scroll\", calculate)\n    }\n  }, [anchorRef, offset, placement, visible])\n\n  return (\n    <>\n      {(children as any)?.({\n        anchorRef: anchorRef as any,\n        anchorProps,\n        onVisible,\n        onHide,\n        setVisible,\n        visible,\n      })}\n\n      {(visible || keepInDOM) &&\n        createPortal(\n          <Container\n            aria-label=\"Press escape to close\"\n            tabIndex={0}\n            ref={panelRef as any}\n            zIndex={dropdownZIndex}\n            display=\"inline-block\"\n            placement={placement}\n            style={{\n              ...(keepInDOM\n                ? { visibility: visible ? \"visible\" : \"hidden\" }\n                : {}),\n            }}\n            {...(openDropdownByClick\n              ? {}\n              : {\n                  onMouseEnter: handleMouseEnter,\n                  onMouseLeave: handleMouseLeave,\n                })}\n            maxHeight={maxHeight + offset}\n            {...padding}\n            {...rest}\n          >\n            <Panel\n              transition={_transition}\n              maxHeight={maxHeight}\n              style={\n                transition\n                  ? // In\n                    { opacity: 1, transform: \"translate(0)\" }\n                  : // Out\n                    {\n                      opacity: 0,\n                      transform: translation,\n                    }\n              }\n            >\n              <FocusOn\n                noIsolation\n                enabled={focusEnabled}\n                onClickOutside={onHide}\n                returnFocus={returnFocus}\n              >\n                <Pane maxHeight={maxHeight}>\n                  {typeof dropdown === \"function\"\n                    ? (dropdown as any)({\n                        onVisible,\n                        onHide,\n                        setVisible,\n                        visible,\n                      })\n                    : dropdown}\n                </Pane>\n              </FocusOn>\n            </Panel>\n          </Container>\n        )}\n    </>\n  )\n}\n\nconst Container = styled(Box)<{ placement: Position } & BoxProps>`\n  position: fixed;\n  text-align: left;\n  outline: 0;\n`\n\nconst Panel = styled(Box)<{ transition: boolean; maxHeight: number }>`\n  transition: ${({ transition }) =>\n    transition ? \"opacity 250ms ease-out, transform 250ms ease-out\" : \"none\"};\n`\n\nconst Pane = styled(Box)`\n  > div {\n    max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : \"100vh\")};\n    box-shadow: ${themeGet(\"effects.flatShadow\")};\n    background-color: ${themeGet(\"colors.mono0\")};\n    border: 1px solid ${themeGet(\"colors.mono10\")};\n    overflow-y: auto;\n  }\n`\n"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_utils","_useDidMount","_usePortal","_Box","_reactFocusOn","_themeGet","_esToolkit","_jsxRuntime","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Dropdown","placement","visible","_visible","keepInDOM","children","offset","dropdown","dropdownZIndex","openDropdownByClick","transition","_transition","flip","returnFocus","delay","rest","setVisible","useState","useEffect","timeoutRef","useRef","setVisibility","useCallback","isPointer","defaultDelay","finalDelay","current","clearTimeout","setTimeout","activeRef","pointerRef","onVisible","onHide","onToggleVisibility","anchorRef","tooltipRef","panelRef","state","isFlipped","usePosition","position","active","padding","handleKeyDown","event","handleKeyUp","document","activeElement","contains","handleClick","target","tagName","toLowerCase","isClosableElement","element","closest","addEventListener","removeEventListener","handleMouseEnter","handleMouseLeave","setTransition","requestAnimationFrame","translation","useMemo","handlePointerVisible","handlePointerHide","anchorProps","onClick","onMouseEnter","onMouseLeave","createPortal","usePortal","isClient","useDidMount","focusEnabled","maxHeight","setMaxHeight","calculate","debounce","nextMaxHeight","calculateMaxHeight","anchorRect","getBoundingClientRect","window","passive","dropdownPanel","jsx","Container","tabIndex","ref","zIndex","display","style","visibility","Panel","opacity","transform","FocusOn","noIsolation","enabled","onClickOutside","Pane","jsxs","Fragment","exports","styled","Box","withConfig","displayName","componentId","themeGet"],"sources":["../../../../src/elements/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { calculateMaxHeight, Position, usePosition } from \"../../utils\"\nimport { useDidMount } from \"../../utils/useDidMount\"\nimport { usePortal } from \"../../utils/usePortal\"\nimport { Box, BoxProps } from \"../Box\"\nimport { FocusOn } from \"react-focus-on\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport { debounce } from \"es-toolkit\"\n\nexport interface DropdownActions {\n  /** Call to show dropdown */\n  onVisible(): void\n  /** Call to hide dropdown */\n  onHide(): void\n  /** Manipulate visible directly */\n  setVisible(value: boolean): void\n  /** Pass ref to element you want the dropdown to be anchored to */\n  anchorRef: React.MutableRefObject<HTMLElement>\n  /** Spread props on element you want the dropdown to be anchored to */\n  anchorProps: React.HTMLAttributes<HTMLElement>\n  /** Whether or not the dropdown is visible */\n  visible: boolean\n}\n\ntype Children =\n  | React.ReactNode\n  | ((dropdownActions: DropdownActions) => React.ReactNode)\n\nexport interface DropdownProps extends Omit<BoxProps, \"children\"> {\n  placement?: Position\n  /** Intially visible by default? */\n  visible?: boolean\n  /** Whether or not we should animate the dropdown transition */\n  transition?: boolean\n  dropdown:\n    | React.ReactNode\n    | ((\n        dropdownActions: Pick<\n          DropdownActions,\n          \"onHide\" | \"onVisible\" | \"setVisible\" | \"visible\"\n        >\n      ) => void)\n  /** Custom zIndex to assign to the dropdown panel */\n  dropdownZIndex?: number\n  /** Distance in pixels from anchor */\n  offset?: number\n  /** Should the dropdown panel always be present in the DOM (vs removed when invisible) */\n  keepInDOM?: boolean\n  openDropdownByClick?: boolean\n  children: Children\n  /** Optionally disable flipping (default: `true`) */\n  flip?: boolean\n  /** Whether to return focus to the previous element when the dropdown closes (default: `true`) */\n  returnFocus?: boolean\n  /** Delay in milliseconds before showing the dropdown on hover (ignored when openDropdownByClick is true) */\n  delay?: number\n}\n\n/**\n * A `Dropdown` is a small modal-type element which is anchored, and can be\n * positioned relative to, another element and designed to be transitioned in on hover or on click.\n */\nexport const Dropdown = ({\n  placement = \"bottom\",\n  visible: _visible = false,\n  keepInDOM,\n  children,\n  offset = 10,\n  dropdown,\n  dropdownZIndex = 1,\n  openDropdownByClick,\n  transition: _transition = true,\n  flip = true,\n  returnFocus = true,\n  delay = 0,\n  ...rest\n}: DropdownProps) => {\n  const [visible, setVisible] = useState(false)\n\n  // If prop updates/set initial visibility.\n  useEffect(() => {\n    setVisible(_visible)\n  }, [_visible])\n\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n  // We need to keep the pointer state in sync with the visibility state, else we\n  // wind up with focus isolation out of sync.\n  const setVisibility = useCallback(\n    ({\n      visible,\n      isPointer = false,\n    }: {\n      visible: boolean\n      isPointer?: boolean\n    }) => {\n      // Use custom delay when opening via pointer interaction (hover), but only if not using click mode\n      const defaultDelay = _transition ? (visible ? 50 : 150) : visible ? 1 : 50\n      const finalDelay =\n        visible && isPointer && !openDropdownByClick ? delay : defaultDelay\n\n      timeoutRef.current && clearTimeout(timeoutRef.current)\n      timeoutRef.current = setTimeout(() => {\n        if (!visible && activeRef.current) return\n        pointerRef.current = isPointer\n        setVisible(visible)\n      }, finalDelay)\n    },\n    [_transition, delay, openDropdownByClick]\n  )\n\n  const onVisible = () => {\n    setVisibility({ visible: true })\n  }\n\n  const onHide = useCallback(() => {\n    setVisibility({ visible: false })\n  }, [setVisibility])\n\n  const onToggleVisibility = () => {\n    if (visible) {\n      return onHide()\n    }\n\n    onVisible()\n  }\n\n  const {\n    anchorRef,\n    tooltipRef: panelRef,\n    state: { isFlipped },\n  } = usePosition({\n    position: placement,\n    offset: 0,\n    active: visible,\n    flip,\n    padding: offset,\n  })\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onHide()\n      }\n    }\n\n    // Close dropdown when focus leaves element\n    const handleKeyUp = (event: KeyboardEvent) => {\n      if (!panelRef.current) return\n\n      if (\n        event.key === \"Tab\" &&\n        !(\n          panelRef.current === document.activeElement ||\n          panelRef.current.contains(document.activeElement)\n        )\n      ) {\n        onHide()\n      }\n    }\n\n    const handleClick = (event: MouseEvent) => {\n      if (!panelRef.current || !openDropdownByClick) return\n      const target = event.target as Element\n      const tagName = target.tagName.toLowerCase()\n      let isClosableElement = tagName === \"a\"\n      let element: Element | null = target\n\n      // Find parent link element\n      if (!isClosableElement) {\n        element = target.closest(\"a\")\n        isClosableElement = !!element\n      }\n\n      if (isClosableElement && element && panelRef.current.contains(element)) {\n        onHide()\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeyDown)\n    document.addEventListener(\"keyup\", handleKeyUp)\n    document.addEventListener(\"click\", handleClick)\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeyDown)\n      document.removeEventListener(\"keyup\", handleKeyUp)\n      document.removeEventListener(\"click\", handleClick)\n    }\n  }, [panelRef, openDropdownByClick, onHide])\n\n  const activeRef = useRef(false)\n\n  const handleMouseEnter = () => {\n    activeRef.current = true\n  }\n\n  const handleMouseLeave = () => {\n    activeRef.current = false\n    onHide()\n  }\n\n  const [transition, setTransition] = useState(false)\n\n  // Wait for next tick so that animation runs\n  useEffect(() => {\n    requestAnimationFrame(() => {\n      setTransition(visible)\n    })\n  }, [visible])\n\n  const translation = useMemo(() => {\n    switch (placement) {\n      case \"top-start\":\n      case \"top\":\n      case \"top-end\":\n        return `translateY(10px)`\n      case \"bottom-start\":\n      case \"bottom\":\n      case \"bottom-end\":\n        return `translateY(-10px)`\n      case \"left-start\":\n      case \"left\":\n      case \"left-end\":\n        return `translateX(10px)`\n      case \"right-start\":\n      case \"right\":\n      case \"right-end\":\n        return `translateX(-10px)`\n    }\n  }, [placement])\n\n  // Fills offset gap between anchor and panel to prevent mouseout\n  const padding = useMemo(() => {\n    switch (placement) {\n      case \"top-start\":\n      case \"top\":\n      case \"top-end\":\n        return { [isFlipped ? \"pt\" : \"pb\"]: offset }\n      case \"bottom-start\":\n      case \"bottom\":\n      case \"bottom-end\":\n        return { [isFlipped ? \"pb\" : \"pt\"]: offset }\n      case \"left-start\":\n      case \"left\":\n      case \"left-end\":\n        return { [isFlipped ? \"pl\" : \"pr\"]: offset }\n      case \"right-start\":\n      case \"right\":\n      case \"right-end\":\n        return { [isFlipped ? \"pr\" : \"pl\"]: offset }\n    }\n  }, [placement, isFlipped, offset])\n\n  const pointerRef = useRef(false)\n\n  const handlePointerVisible = () => {\n    setVisibility({ visible: true, isPointer: true })\n  }\n\n  const handlePointerHide = () => {\n    setVisibility({ visible: false, isPointer: false })\n  }\n\n  const anchorProps: React.HTMLAttributes<HTMLElement> = {\n    \"aria-expanded\": visible,\n    \"aria-haspopup\": true,\n    ...(openDropdownByClick\n      ? {\n          onClick: onToggleVisibility,\n        }\n      : {\n          onMouseEnter: handlePointerVisible,\n          onMouseLeave: handlePointerHide,\n          onClick: onVisible,\n        }),\n  }\n\n  const { createPortal } = usePortal()\n  const isClient = useDidMount()\n\n  const isPointer = !openDropdownByClick && pointerRef.current\n  const focusEnabled = visible && !isPointer\n\n  const [maxHeight, setMaxHeight] = useState(0)\n\n  useEffect(() => {\n    const calculate = debounce(() => {\n      if (!anchorRef.current) return\n\n      const nextMaxHeight = calculateMaxHeight({\n        anchorRect: anchorRef.current.getBoundingClientRect(),\n        position: placement,\n        offset,\n      })\n\n      setMaxHeight(nextMaxHeight)\n    }, 500)\n\n    window.addEventListener(\"resize\", calculate, { passive: true })\n    window.addEventListener(\"scroll\", calculate, { passive: true })\n    calculate()\n\n    return () => {\n      window.removeEventListener(\"resize\", calculate)\n      window.removeEventListener(\"scroll\", calculate)\n    }\n  }, [anchorRef, offset, placement, visible])\n\n  const dropdownPanel = useMemo(() => {\n    if (!(visible || keepInDOM)) return null\n\n    return (\n      <Container\n        aria-label=\"Press escape to close\"\n        tabIndex={0}\n        ref={panelRef as any}\n        zIndex={dropdownZIndex}\n        display=\"inline-block\"\n        placement={placement}\n        style={{\n          ...(keepInDOM ? { visibility: visible ? \"visible\" : \"hidden\" } : {}),\n        }}\n        {...(openDropdownByClick\n          ? {}\n          : { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave })}\n        maxHeight={maxHeight + offset}\n        {...padding}\n        {...rest}\n      >\n        <Panel\n          transition={_transition}\n          maxHeight={maxHeight}\n          style={\n            transition\n              ? // In\n                { opacity: 1, transform: \"translate(0)\" }\n              : // Out\n                { opacity: 0, transform: translation }\n          }\n        >\n          <FocusOn\n            noIsolation\n            enabled={focusEnabled}\n            onClickOutside={onHide}\n            returnFocus={returnFocus}\n          >\n            <Pane maxHeight={maxHeight}>\n              {typeof dropdown === \"function\"\n                ? (dropdown as any)({\n                    onVisible,\n                    onHide,\n                    setVisible,\n                    visible,\n                  })\n                : dropdown}\n            </Pane>\n          </FocusOn>\n        </Panel>\n      </Container>\n    )\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    visible,\n    keepInDOM,\n    dropdownZIndex,\n    placement,\n    openDropdownByClick,\n    maxHeight,\n    offset,\n    _transition,\n    transition,\n    translation,\n    focusEnabled,\n    returnFocus,\n    dropdown,\n    padding,\n  ])\n\n  return (\n    <>\n      {(children as any)?.({\n        anchorRef: anchorRef as any,\n        anchorProps,\n        onVisible,\n        onHide,\n        setVisible,\n        visible,\n      })}\n\n      {/* During SSR, `createPortal` returns null because the DOM isn't available.\n          When `keepInDOM` is true, render directly in the tree so the content\n          is present in the server-rendered HTML. After hydration, it moves to a portal. */}\n      {dropdownPanel &&\n        (!isClient && keepInDOM ? dropdownPanel : createPortal(dropdownPanel))}\n    </>\n  )\n}\n\nconst Container = styled(Box)<{ placement: Position } & BoxProps>`\n  position: fixed;\n  text-align: left;\n  outline: 0;\n`\n\nconst Panel = styled(Box)<{ transition: boolean; maxHeight: number }>`\n  transition: ${({ transition }) =>\n    transition ? \"opacity 250ms ease-out, transform 250ms ease-out\" : \"none\"};\n`\n\nconst Pane = styled(Box)`\n  > div {\n    max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : \"100vh\")};\n    box-shadow: ${themeGet(\"effects.flatShadow\")};\n    background-color: ${themeGet(\"colors.mono0\")};\n    border: 1px solid ${themeGet(\"colors.mono10\")};\n    overflow-y: auto;\n  }\n`\n"],"mappings":"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"}

package/dist/esm/elements/Dropdown/Dropdown.js

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
 import { calculateMaxHeight, usePosition } from "../../utils";
+import { useDidMount } from "../../utils/useDidMount";
 import { usePortal } from "../../utils/usePortal";
 import { Box } from "../Box";
 import { FocusOn } from "react-focus-on";
@@ -211,6 +212,7 @@ export const Dropdown = ({
   const {
     createPortal
   } = usePortal();
+  const isClient = useDidMount();
   const isPointer = !openDropdownByClick && pointerRef.current;
   const focusEnabled = visible && !isPointer;
   const [maxHeight, setMaxHeight] = useState(0);
@@ -236,15 +238,9 @@ export const Dropdown = ({
       window.removeEventListener("scroll", calculate);
     };
   }, [anchorRef, offset, placement, visible]);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [children?.({
-      anchorRef: anchorRef,
-      anchorProps,
-      onVisible,
-      onHide,
-      setVisible,
-      visible
-    }), (visible || keepInDOM) && createPortal( /*#__PURE__*/_jsx(Container, {
+  const dropdownPanel = useMemo(() => {
+    if (!(visible || keepInDOM)) return null;
+    return /*#__PURE__*/_jsx(Container, {
       "aria-label": "Press escape to close",
       tabIndex: 0,
       ref: panelRef,
@@ -293,7 +289,18 @@ export const Dropdown = ({
           })
         })
       })
-    }))]
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible, keepInDOM, dropdownZIndex, placement, openDropdownByClick, maxHeight, offset, _transition, transition, translation, focusEnabled, returnFocus, dropdown, padding]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [children?.({
+      anchorRef: anchorRef,
+      anchorProps,
+      onVisible,
+      onHide,
+      setVisible,
+      visible
+    }), dropdownPanel && (!isClient && keepInDOM ? dropdownPanel : createPortal(dropdownPanel))]
   });
 };
 const Container = styled(Box).withConfig({

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","styled","calculateMaxHeight","usePosition","usePortal","Box","FocusOn","themeGet","debounce","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","Dropdown","placement","visible","_visible","keepInDOM","children","offset","dropdown","dropdownZIndex","openDropdownByClick","transition","_transition","flip","returnFocus","delay","rest","setVisible","timeoutRef","setVisibility","isPointer","defaultDelay","finalDelay","current","clearTimeout","setTimeout","activeRef","pointerRef","onVisible","onHide","onToggleVisibility","anchorRef","tooltipRef","panelRef","state","isFlipped","position","active","padding","handleKeyDown","event","key","handleKeyUp","document","activeElement","contains","handleClick","target","tagName","toLowerCase","isClosableElement","element","closest","addEventListener","removeEventListener","handleMouseEnter","handleMouseLeave","setTransition","requestAnimationFrame","translation","handlePointerVisible","handlePointerHide","anchorProps","onClick","onMouseEnter","onMouseLeave","createPortal","focusEnabled","maxHeight","setMaxHeight","calculate","nextMaxHeight","anchorRect","getBoundingClientRect","window","passive","Container","tabIndex","ref","zIndex","display","style","visibility","Panel","opacity","transform","noIsolation","enabled","onClickOutside","Pane","withConfig","displayName","componentId"],"sources":["../../../../src/elements/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { calculateMaxHeight, Position, usePosition } from \"../../utils\"\nimport { usePortal } from \"../../utils/usePortal\"\nimport { Box, BoxProps } from \"../Box\"\nimport { FocusOn } from \"react-focus-on\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport { debounce } from \"es-toolkit\"\n\nexport interface DropdownActions {\n  /** Call to show dropdown */\n  onVisible(): void\n  /** Call to hide dropdown */\n  onHide(): void\n  /** Manipulate visible directly */\n  setVisible(value: boolean): void\n  /** Pass ref to element you want the dropdown to be anchored to */\n  anchorRef: React.MutableRefObject<HTMLElement>\n  /** Spread props on element you want the dropdown to be anchored to */\n  anchorProps: React.HTMLAttributes<HTMLElement>\n  /** Whether or not the dropdown is visible */\n  visible: boolean\n}\n\ntype Children =\n  | React.ReactNode\n  | ((dropdownActions: DropdownActions) => React.ReactNode)\n\nexport interface DropdownProps extends Omit<BoxProps, \"children\"> {\n  placement?: Position\n  /** Intially visible by default? */\n  visible?: boolean\n  /** Whether or not we should animate the dropdown transition */\n  transition?: boolean\n  dropdown:\n    | React.ReactNode\n    | ((\n        dropdownActions: Pick<\n          DropdownActions,\n          \"onHide\" | \"onVisible\" | \"setVisible\" | \"visible\"\n        >\n      ) => void)\n  /** Custom zIndex to assign to the dropdown panel */\n  dropdownZIndex?: number\n  /** Distance in pixels from anchor */\n  offset?: number\n  /** Should the dropdown panel always be present in the DOM (vs removed when invisible) */\n  keepInDOM?: boolean\n  openDropdownByClick?: boolean\n  children: Children\n  /** Optionally disable flipping (default: `true`) */\n  flip?: boolean\n  /** Whether to return focus to the previous element when the dropdown closes (default: `true`) */\n  returnFocus?: boolean\n  /** Delay in milliseconds before showing the dropdown on hover (ignored when openDropdownByClick is true) */\n  delay?: number\n}\n\n/**\n * A `Dropdown` is a small modal-type element which is anchored, and can be\n * positioned relative to, another element and designed to be transitioned in on hover or on click.\n */\nexport const Dropdown = ({\n  placement = \"bottom\",\n  visible: _visible = false,\n  keepInDOM,\n  children,\n  offset = 10,\n  dropdown,\n  dropdownZIndex = 1,\n  openDropdownByClick,\n  transition: _transition = true,\n  flip = true,\n  returnFocus = true,\n  delay = 0,\n  ...rest\n}: DropdownProps) => {\n  const [visible, setVisible] = useState(false)\n\n  // If prop updates/set initial visibility.\n  useEffect(() => {\n    setVisible(_visible)\n  }, [_visible])\n\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n  // We need to keep the pointer state in sync with the visibility state, else we\n  // wind up with focus isolation out of sync.\n  const setVisibility = useCallback(\n    ({\n      visible,\n      isPointer = false,\n    }: {\n      visible: boolean\n      isPointer?: boolean\n    }) => {\n      // Use custom delay when opening via pointer interaction (hover), but only if not using click mode\n      const defaultDelay = _transition ? (visible ? 50 : 150) : visible ? 1 : 50\n      const finalDelay =\n        visible && isPointer && !openDropdownByClick ? delay : defaultDelay\n\n      timeoutRef.current && clearTimeout(timeoutRef.current)\n      timeoutRef.current = setTimeout(() => {\n        if (!visible && activeRef.current) return\n        pointerRef.current = isPointer\n        setVisible(visible)\n      }, finalDelay)\n    },\n    [_transition, delay, openDropdownByClick]\n  )\n\n  const onVisible = () => {\n    setVisibility({ visible: true })\n  }\n\n  const onHide = useCallback(() => {\n    setVisibility({ visible: false })\n  }, [setVisibility])\n\n  const onToggleVisibility = () => {\n    if (visible) {\n      return onHide()\n    }\n\n    onVisible()\n  }\n\n  const {\n    anchorRef,\n    tooltipRef: panelRef,\n    state: { isFlipped },\n  } = usePosition({\n    position: placement,\n    offset: 0,\n    active: visible,\n    flip,\n    padding: offset,\n  })\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onHide()\n      }\n    }\n\n    // Close dropdown when focus leaves element\n    const handleKeyUp = (event: KeyboardEvent) => {\n      if (!panelRef.current) return\n\n      if (\n        event.key === \"Tab\" &&\n        !(\n          panelRef.current === document.activeElement ||\n          panelRef.current.contains(document.activeElement)\n        )\n      ) {\n        onHide()\n      }\n    }\n\n    const handleClick = (event: MouseEvent) => {\n      if (!panelRef.current || !openDropdownByClick) return\n      const target = event.target as Element\n      const tagName = target.tagName.toLowerCase()\n      let isClosableElement = tagName === \"a\"\n      let element: Element | null = target\n\n      // Find parent link element\n      if (!isClosableElement) {\n        element = target.closest(\"a\")\n        isClosableElement = !!element\n      }\n\n      if (isClosableElement && element && panelRef.current.contains(element)) {\n        onHide()\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeyDown)\n    document.addEventListener(\"keyup\", handleKeyUp)\n    document.addEventListener(\"click\", handleClick)\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeyDown)\n      document.removeEventListener(\"keyup\", handleKeyUp)\n      document.removeEventListener(\"click\", handleClick)\n    }\n  }, [panelRef, openDropdownByClick, onHide])\n\n  const activeRef = useRef(false)\n\n  const handleMouseEnter = () => {\n    activeRef.current = true\n  }\n\n  const handleMouseLeave = () => {\n    activeRef.current = false\n    onHide()\n  }\n\n  const [transition, setTransition] = useState(false)\n\n  // Wait for next tick so that animation runs\n  useEffect(() => {\n    requestAnimationFrame(() => {\n      setTransition(visible)\n    })\n  }, [visible])\n\n  const translation = useMemo(() => {\n    switch (placement) {\n      case \"top-start\":\n      case \"top\":\n      case \"top-end\":\n        return `translateY(10px)`\n      case \"bottom-start\":\n      case \"bottom\":\n      case \"bottom-end\":\n        return `translateY(-10px)`\n      case \"left-start\":\n      case \"left\":\n      case \"left-end\":\n        return `translateX(10px)`\n      case \"right-start\":\n      case \"right\":\n      case \"right-end\":\n        return `translateX(-10px)`\n    }\n  }, [placement])\n\n  // Fills offset gap between anchor and panel to prevent mouseout\n  const padding = useMemo(() => {\n    switch (placement) {\n      case \"top-start\":\n      case \"top\":\n      case \"top-end\":\n        return { [isFlipped ? \"pt\" : \"pb\"]: offset }\n      case \"bottom-start\":\n      case \"bottom\":\n      case \"bottom-end\":\n        return { [isFlipped ? \"pb\" : \"pt\"]: offset }\n      case \"left-start\":\n      case \"left\":\n      case \"left-end\":\n        return { [isFlipped ? \"pl\" : \"pr\"]: offset }\n      case \"right-start\":\n      case \"right\":\n      case \"right-end\":\n        return { [isFlipped ? \"pr\" : \"pl\"]: offset }\n    }\n  }, [placement, isFlipped, offset])\n\n  const pointerRef = useRef(false)\n\n  const handlePointerVisible = () => {\n    setVisibility({ visible: true, isPointer: true })\n  }\n\n  const handlePointerHide = () => {\n    setVisibility({ visible: false, isPointer: false })\n  }\n\n  const anchorProps: React.HTMLAttributes<HTMLElement> = {\n    \"aria-expanded\": visible,\n    \"aria-haspopup\": true,\n    ...(openDropdownByClick\n      ? {\n          onClick: onToggleVisibility,\n        }\n      : {\n          onMouseEnter: handlePointerVisible,\n          onMouseLeave: handlePointerHide,\n          onClick: onVisible,\n        }),\n  }\n\n  const { createPortal } = usePortal()\n\n  const isPointer = !openDropdownByClick && pointerRef.current\n  const focusEnabled = visible && !isPointer\n\n  const [maxHeight, setMaxHeight] = useState(0)\n\n  useEffect(() => {\n    const calculate = debounce(() => {\n      if (!anchorRef.current) return\n\n      const nextMaxHeight = calculateMaxHeight({\n        anchorRect: anchorRef.current.getBoundingClientRect(),\n        position: placement,\n        offset,\n      })\n\n      setMaxHeight(nextMaxHeight)\n    }, 500)\n\n    window.addEventListener(\"resize\", calculate, { passive: true })\n    window.addEventListener(\"scroll\", calculate, { passive: true })\n    calculate()\n\n    return () => {\n      window.removeEventListener(\"resize\", calculate)\n      window.removeEventListener(\"scroll\", calculate)\n    }\n  }, [anchorRef, offset, placement, visible])\n\n  return (\n    <>\n      {(children as any)?.({\n        anchorRef: anchorRef as any,\n        anchorProps,\n        onVisible,\n        onHide,\n        setVisible,\n        visible,\n      })}\n\n      {(visible || keepInDOM) &&\n        createPortal(\n          <Container\n            aria-label=\"Press escape to close\"\n            tabIndex={0}\n            ref={panelRef as any}\n            zIndex={dropdownZIndex}\n            display=\"inline-block\"\n            placement={placement}\n            style={{\n              ...(keepInDOM\n                ? { visibility: visible ? \"visible\" : \"hidden\" }\n                : {}),\n            }}\n            {...(openDropdownByClick\n              ? {}\n              : {\n                  onMouseEnter: handleMouseEnter,\n                  onMouseLeave: handleMouseLeave,\n                })}\n            maxHeight={maxHeight + offset}\n            {...padding}\n            {...rest}\n          >\n            <Panel\n              transition={_transition}\n              maxHeight={maxHeight}\n              style={\n                transition\n                  ? // In\n                    { opacity: 1, transform: \"translate(0)\" }\n                  : // Out\n                    {\n                      opacity: 0,\n                      transform: translation,\n                    }\n              }\n            >\n              <FocusOn\n                noIsolation\n                enabled={focusEnabled}\n                onClickOutside={onHide}\n                returnFocus={returnFocus}\n              >\n                <Pane maxHeight={maxHeight}>\n                  {typeof dropdown === \"function\"\n                    ? (dropdown as any)({\n                        onVisible,\n                        onHide,\n                        setVisible,\n                        visible,\n                      })\n                    : dropdown}\n                </Pane>\n              </FocusOn>\n            </Panel>\n          </Container>\n        )}\n    </>\n  )\n}\n\nconst Container = styled(Box)<{ placement: Position } & BoxProps>`\n  position: fixed;\n  text-align: left;\n  outline: 0;\n`\n\nconst Panel = styled(Box)<{ transition: boolean; maxHeight: number }>`\n  transition: ${({ transition }) =>\n    transition ? \"opacity 250ms ease-out, transform 250ms ease-out\" : \"none\"};\n`\n\nconst Pane = styled(Box)`\n  > div {\n    max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : \"100vh\")};\n    box-shadow: ${themeGet(\"effects.flatShadow\")};\n    background-color: ${themeGet(\"colors.mono0\")};\n    border: 1px solid ${themeGet(\"colors.mono10\")};\n    overflow-y: auto;\n  }\n`\n"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","names":["React","useCallback","useEffect","useMemo","useRef","useState","styled","calculateMaxHeight","usePosition","useDidMount","usePortal","Box","FocusOn","themeGet","debounce","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","Dropdown","placement","visible","_visible","keepInDOM","children","offset","dropdown","dropdownZIndex","openDropdownByClick","transition","_transition","flip","returnFocus","delay","rest","setVisible","timeoutRef","setVisibility","isPointer","defaultDelay","finalDelay","current","clearTimeout","setTimeout","activeRef","pointerRef","onVisible","onHide","onToggleVisibility","anchorRef","tooltipRef","panelRef","state","isFlipped","position","active","padding","handleKeyDown","event","key","handleKeyUp","document","activeElement","contains","handleClick","target","tagName","toLowerCase","isClosableElement","element","closest","addEventListener","removeEventListener","handleMouseEnter","handleMouseLeave","setTransition","requestAnimationFrame","translation","handlePointerVisible","handlePointerHide","anchorProps","onClick","onMouseEnter","onMouseLeave","createPortal","isClient","focusEnabled","maxHeight","setMaxHeight","calculate","nextMaxHeight","anchorRect","getBoundingClientRect","window","passive","dropdownPanel","Container","tabIndex","ref","zIndex","display","style","visibility","Panel","opacity","transform","noIsolation","enabled","onClickOutside","Pane","withConfig","displayName","componentId"],"sources":["../../../../src/elements/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { calculateMaxHeight, Position, usePosition } from \"../../utils\"\nimport { useDidMount } from \"../../utils/useDidMount\"\nimport { usePortal } from \"../../utils/usePortal\"\nimport { Box, BoxProps } from \"../Box\"\nimport { FocusOn } from \"react-focus-on\"\nimport { themeGet } from \"@styled-system/theme-get\"\nimport { debounce } from \"es-toolkit\"\n\nexport interface DropdownActions {\n  /** Call to show dropdown */\n  onVisible(): void\n  /** Call to hide dropdown */\n  onHide(): void\n  /** Manipulate visible directly */\n  setVisible(value: boolean): void\n  /** Pass ref to element you want the dropdown to be anchored to */\n  anchorRef: React.MutableRefObject<HTMLElement>\n  /** Spread props on element you want the dropdown to be anchored to */\n  anchorProps: React.HTMLAttributes<HTMLElement>\n  /** Whether or not the dropdown is visible */\n  visible: boolean\n}\n\ntype Children =\n  | React.ReactNode\n  | ((dropdownActions: DropdownActions) => React.ReactNode)\n\nexport interface DropdownProps extends Omit<BoxProps, \"children\"> {\n  placement?: Position\n  /** Intially visible by default? */\n  visible?: boolean\n  /** Whether or not we should animate the dropdown transition */\n  transition?: boolean\n  dropdown:\n    | React.ReactNode\n    | ((\n        dropdownActions: Pick<\n          DropdownActions,\n          \"onHide\" | \"onVisible\" | \"setVisible\" | \"visible\"\n        >\n      ) => void)\n  /** Custom zIndex to assign to the dropdown panel */\n  dropdownZIndex?: number\n  /** Distance in pixels from anchor */\n  offset?: number\n  /** Should the dropdown panel always be present in the DOM (vs removed when invisible) */\n  keepInDOM?: boolean\n  openDropdownByClick?: boolean\n  children: Children\n  /** Optionally disable flipping (default: `true`) */\n  flip?: boolean\n  /** Whether to return focus to the previous element when the dropdown closes (default: `true`) */\n  returnFocus?: boolean\n  /** Delay in milliseconds before showing the dropdown on hover (ignored when openDropdownByClick is true) */\n  delay?: number\n}\n\n/**\n * A `Dropdown` is a small modal-type element which is anchored, and can be\n * positioned relative to, another element and designed to be transitioned in on hover or on click.\n */\nexport const Dropdown = ({\n  placement = \"bottom\",\n  visible: _visible = false,\n  keepInDOM,\n  children,\n  offset = 10,\n  dropdown,\n  dropdownZIndex = 1,\n  openDropdownByClick,\n  transition: _transition = true,\n  flip = true,\n  returnFocus = true,\n  delay = 0,\n  ...rest\n}: DropdownProps) => {\n  const [visible, setVisible] = useState(false)\n\n  // If prop updates/set initial visibility.\n  useEffect(() => {\n    setVisible(_visible)\n  }, [_visible])\n\n  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n  // We need to keep the pointer state in sync with the visibility state, else we\n  // wind up with focus isolation out of sync.\n  const setVisibility = useCallback(\n    ({\n      visible,\n      isPointer = false,\n    }: {\n      visible: boolean\n      isPointer?: boolean\n    }) => {\n      // Use custom delay when opening via pointer interaction (hover), but only if not using click mode\n      const defaultDelay = _transition ? (visible ? 50 : 150) : visible ? 1 : 50\n      const finalDelay =\n        visible && isPointer && !openDropdownByClick ? delay : defaultDelay\n\n      timeoutRef.current && clearTimeout(timeoutRef.current)\n      timeoutRef.current = setTimeout(() => {\n        if (!visible && activeRef.current) return\n        pointerRef.current = isPointer\n        setVisible(visible)\n      }, finalDelay)\n    },\n    [_transition, delay, openDropdownByClick]\n  )\n\n  const onVisible = () => {\n    setVisibility({ visible: true })\n  }\n\n  const onHide = useCallback(() => {\n    setVisibility({ visible: false })\n  }, [setVisibility])\n\n  const onToggleVisibility = () => {\n    if (visible) {\n      return onHide()\n    }\n\n    onVisible()\n  }\n\n  const {\n    anchorRef,\n    tooltipRef: panelRef,\n    state: { isFlipped },\n  } = usePosition({\n    position: placement,\n    offset: 0,\n    active: visible,\n    flip,\n    padding: offset,\n  })\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        onHide()\n      }\n    }\n\n    // Close dropdown when focus leaves element\n    const handleKeyUp = (event: KeyboardEvent) => {\n      if (!panelRef.current) return\n\n      if (\n        event.key === \"Tab\" &&\n        !(\n          panelRef.current === document.activeElement ||\n          panelRef.current.contains(document.activeElement)\n        )\n      ) {\n        onHide()\n      }\n    }\n\n    const handleClick = (event: MouseEvent) => {\n      if (!panelRef.current || !openDropdownByClick) return\n      const target = event.target as Element\n      const tagName = target.tagName.toLowerCase()\n      let isClosableElement = tagName === \"a\"\n      let element: Element | null = target\n\n      // Find parent link element\n      if (!isClosableElement) {\n        element = target.closest(\"a\")\n        isClosableElement = !!element\n      }\n\n      if (isClosableElement && element && panelRef.current.contains(element)) {\n        onHide()\n      }\n    }\n\n    document.addEventListener(\"keydown\", handleKeyDown)\n    document.addEventListener(\"keyup\", handleKeyUp)\n    document.addEventListener(\"click\", handleClick)\n\n    return () => {\n      document.removeEventListener(\"keydown\", handleKeyDown)\n      document.removeEventListener(\"keyup\", handleKeyUp)\n      document.removeEventListener(\"click\", handleClick)\n    }\n  }, [panelRef, openDropdownByClick, onHide])\n\n  const activeRef = useRef(false)\n\n  const handleMouseEnter = () => {\n    activeRef.current = true\n  }\n\n  const handleMouseLeave = () => {\n    activeRef.current = false\n    onHide()\n  }\n\n  const [transition, setTransition] = useState(false)\n\n  // Wait for next tick so that animation runs\n  useEffect(() => {\n    requestAnimationFrame(() => {\n      setTransition(visible)\n    })\n  }, [visible])\n\n  const translation = useMemo(() => {\n    switch (placement) {\n      case \"top-start\":\n      case \"top\":\n      case \"top-end\":\n        return `translateY(10px)`\n      case \"bottom-start\":\n      case \"bottom\":\n      case \"bottom-end\":\n        return `translateY(-10px)`\n      case \"left-start\":\n      case \"left\":\n      case \"left-end\":\n        return `translateX(10px)`\n      case \"right-start\":\n      case \"right\":\n      case \"right-end\":\n        return `translateX(-10px)`\n    }\n  }, [placement])\n\n  // Fills offset gap between anchor and panel to prevent mouseout\n  const padding = useMemo(() => {\n    switch (placement) {\n      case \"top-start\":\n      case \"top\":\n      case \"top-end\":\n        return { [isFlipped ? \"pt\" : \"pb\"]: offset }\n      case \"bottom-start\":\n      case \"bottom\":\n      case \"bottom-end\":\n        return { [isFlipped ? \"pb\" : \"pt\"]: offset }\n      case \"left-start\":\n      case \"left\":\n      case \"left-end\":\n        return { [isFlipped ? \"pl\" : \"pr\"]: offset }\n      case \"right-start\":\n      case \"right\":\n      case \"right-end\":\n        return { [isFlipped ? \"pr\" : \"pl\"]: offset }\n    }\n  }, [placement, isFlipped, offset])\n\n  const pointerRef = useRef(false)\n\n  const handlePointerVisible = () => {\n    setVisibility({ visible: true, isPointer: true })\n  }\n\n  const handlePointerHide = () => {\n    setVisibility({ visible: false, isPointer: false })\n  }\n\n  const anchorProps: React.HTMLAttributes<HTMLElement> = {\n    \"aria-expanded\": visible,\n    \"aria-haspopup\": true,\n    ...(openDropdownByClick\n      ? {\n          onClick: onToggleVisibility,\n        }\n      : {\n          onMouseEnter: handlePointerVisible,\n          onMouseLeave: handlePointerHide,\n          onClick: onVisible,\n        }),\n  }\n\n  const { createPortal } = usePortal()\n  const isClient = useDidMount()\n\n  const isPointer = !openDropdownByClick && pointerRef.current\n  const focusEnabled = visible && !isPointer\n\n  const [maxHeight, setMaxHeight] = useState(0)\n\n  useEffect(() => {\n    const calculate = debounce(() => {\n      if (!anchorRef.current) return\n\n      const nextMaxHeight = calculateMaxHeight({\n        anchorRect: anchorRef.current.getBoundingClientRect(),\n        position: placement,\n        offset,\n      })\n\n      setMaxHeight(nextMaxHeight)\n    }, 500)\n\n    window.addEventListener(\"resize\", calculate, { passive: true })\n    window.addEventListener(\"scroll\", calculate, { passive: true })\n    calculate()\n\n    return () => {\n      window.removeEventListener(\"resize\", calculate)\n      window.removeEventListener(\"scroll\", calculate)\n    }\n  }, [anchorRef, offset, placement, visible])\n\n  const dropdownPanel = useMemo(() => {\n    if (!(visible || keepInDOM)) return null\n\n    return (\n      <Container\n        aria-label=\"Press escape to close\"\n        tabIndex={0}\n        ref={panelRef as any}\n        zIndex={dropdownZIndex}\n        display=\"inline-block\"\n        placement={placement}\n        style={{\n          ...(keepInDOM ? { visibility: visible ? \"visible\" : \"hidden\" } : {}),\n        }}\n        {...(openDropdownByClick\n          ? {}\n          : { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave })}\n        maxHeight={maxHeight + offset}\n        {...padding}\n        {...rest}\n      >\n        <Panel\n          transition={_transition}\n          maxHeight={maxHeight}\n          style={\n            transition\n              ? // In\n                { opacity: 1, transform: \"translate(0)\" }\n              : // Out\n                { opacity: 0, transform: translation }\n          }\n        >\n          <FocusOn\n            noIsolation\n            enabled={focusEnabled}\n            onClickOutside={onHide}\n            returnFocus={returnFocus}\n          >\n            <Pane maxHeight={maxHeight}>\n              {typeof dropdown === \"function\"\n                ? (dropdown as any)({\n                    onVisible,\n                    onHide,\n                    setVisible,\n                    visible,\n                  })\n                : dropdown}\n            </Pane>\n          </FocusOn>\n        </Panel>\n      </Container>\n    )\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    visible,\n    keepInDOM,\n    dropdownZIndex,\n    placement,\n    openDropdownByClick,\n    maxHeight,\n    offset,\n    _transition,\n    transition,\n    translation,\n    focusEnabled,\n    returnFocus,\n    dropdown,\n    padding,\n  ])\n\n  return (\n    <>\n      {(children as any)?.({\n        anchorRef: anchorRef as any,\n        anchorProps,\n        onVisible,\n        onHide,\n        setVisible,\n        visible,\n      })}\n\n      {/* During SSR, `createPortal` returns null because the DOM isn't available.\n          When `keepInDOM` is true, render directly in the tree so the content\n          is present in the server-rendered HTML. After hydration, it moves to a portal. */}\n      {dropdownPanel &&\n        (!isClient && keepInDOM ? dropdownPanel : createPortal(dropdownPanel))}\n    </>\n  )\n}\n\nconst Container = styled(Box)<{ placement: Position } & BoxProps>`\n  position: fixed;\n  text-align: left;\n  outline: 0;\n`\n\nconst Panel = styled(Box)<{ transition: boolean; maxHeight: number }>`\n  transition: ${({ transition }) =>\n    transition ? \"opacity 250ms ease-out, transform 250ms ease-out\" : \"none\"};\n`\n\nconst Pane = styled(Box)`\n  > div {\n    max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : \"100vh\")};\n    box-shadow: ${themeGet(\"effects.flatShadow\")};\n    background-color: ${themeGet(\"colors.mono0\")};\n    border: 1px solid ${themeGet(\"colors.mono10\")};\n    overflow-y: auto;\n  }\n`\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "46.1.0",
+  "version": "46.2.0",
   "description": "Design system library for react components",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -203,5 +203,5 @@
       "url": "http://localhost"
     }
   },
-  "gitHead": "cf9b9834217ab004060ec99a82ab736ddef903f7"
+  "gitHead": "cdfe9c42cf34e7b280d90af4d09656bf2b33a774"
 }