@artsy/palette 18.7.2 → 18.7.3

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v18.7.3 (Wed Nov 24 2021)
+
+#### 🐛  Bug Fix
+
+- fix(autocomplete): improves onclose; fixes memory leak [#1077](https://github.com/artsy/palette/pull/1077) ([@dzucconi](https://github.com/dzucconi))
+- fix(autocomplete): improves onclose; fixes memory leak ([@dzucconi](https://github.com/dzucconi))
+
+#### Authors: 1
+
+- Damon ([@dzucconi](https://github.com/dzucconi))
+
+---
+
 # v18.7.2 (Mon Nov 22 2021)
 
 #### 🐛  Bug Fix

package/dist/elements/AutocompleteInput/AutocompleteInput.js

@@ -185,10 +185,7 @@ var AutocompleteInput = function AutocompleteInput(_ref) {
       reset = _useKeyboardListNavig.reset,
       set = _useKeyboardListNavig.set;
 
-  var isDropdownVisible = state.open && options.length > 0;
-  (0, _react.useEffect)(function () {
-    if (!isDropdownVisible) onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [isDropdownVisible, onClose]); // Reset keyboard navigation when options change
+  var isDropdownVisible = state.open && options.length > 0; // Reset keyboard navigation when options change
   // eslint-disable-next-line react-hooks/exhaustive-deps
 
   (0, _react.useEffect)(reset, [options]); // Reset keyboard navigation when query is empty
@@ -271,8 +268,10 @@ var AutocompleteInput = function AutocompleteInput(_ref) {
     dispatch({
       type: "CLOSE"
     });
-    reset(); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []); // Handle closing the dropdown when clicking outside of the input
+    reset();
+    onClose === null || onClose === void 0 ? void 0 : onClose();
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [onClose]); // Handle closing the dropdown when clicking outside of the input
   // or when focus leaves the input completely
 
   var _useContainsFocus = (0, _utils.useContainsFocus)({

package/dist/elements/AutocompleteInput/AutocompleteInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/AutocompleteInput/AutocompleteInput.tsx"],"names":["reducer","state","action","type","open","query","payload","AutocompleteInput","defaultValue","id","loading","onSubmit","onSelect","onChange","onClear","onClose","onKeyDown","height","renderOption","option","options","rest","inputRef","containerRef","boxProps","inputProps","dispatch","optionsWithRefs","map","ref","resetUI","setTimeout","current","focus","reset","handleSelect","index","text","list","waitForInteractive","onEnter","element","i","set","isDropdownVisible","length","position","offset","active","anchorRef","tooltipRef","width","handleFocus","handleMouseDown","handleMouseEnter","cursor","interactive","handleChange","event","value","currentTarget","handleClearOrSubmit","handleFocusChange","focused","containsFocusRef","handleInputKeydown","key","preventDefault","stopPropagation","blur","handleContainerKeydown","staged","AutocompleteInputDropdown","Box","DROP_SHADOW"],"mappings":"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","sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport React, {\n  createRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n} from \"react\"\nimport styled from \"styled-components\"\nimport { useKeyboardListNavigation } from \"use-keyboard-list-navigation\"\nimport { Spinner } from \"..\"\nimport { DROP_SHADOW } from \"../../helpers\"\nimport { CloseIcon, MagnifyingGlassIcon } from \"../../svgs\"\nimport { usePosition, useContainsFocus } from \"../../utils\"\nimport { useWidthOf } from \"../../utils/useWidthOf\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { InputProps } from \"../Input\"\nimport { LabeledInput } from \"../LabeledInput\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\nimport { AutocompleteInputOption } from \"./AutocompleteInputOption\"\nimport { AutocompleteInputOptionLabel } from \"./AutocompleteInputOptionLabel\"\n\n/** Base option type — can be expanded */\nexport interface AutocompleteInputOptionType {\n  text: string\n  value: string\n}\n\ninterface State {\n  open: boolean\n  query: string\n}\n\ntype Action =\n  | { type: \"OPEN\" }\n  | { type: \"CLOSE\" }\n  | { type: \"CLEAR\" }\n  | { type: \"CHANGE\"; payload: { query: string } }\n  | { type: \"SELECT\"; payload: { query: string } }\n\nconst reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"OPEN\":\n      return { ...state, open: true }\n    case \"CLOSE\":\n      return { ...state, open: false }\n    case \"CLEAR\":\n      return { ...state, query: \"\" }\n    case \"CHANGE\":\n      return { ...state, query: action.payload.query, open: true }\n    case \"SELECT\":\n      return { ...state, query: action.payload.query, open: false }\n  }\n}\n\nexport interface AutocompleteInputProps<T extends AutocompleteInputOptionType>\n  extends Omit<InputProps, \"onSelect\" | \"onSubmit\"> {\n  defaultValue?: string\n  loading?: boolean\n  /** on <enter> when no option is selected */\n  onSubmit?(query: string): void\n  /** on <click> or <enter> when an option is selected */\n  onSelect?(option: T, index: number): void\n  /** on <click> of the 'x' (clear) button */\n  onClear?(): void\n  /** Callback that runs when options are hidden */\n  onClose?(): void\n  renderOption?(\n    option: T,\n    i: number\n  ): React.ReactElement<any, string | React.JSXElementConstructor<any>>\n  options: T[]\n}\n\n/** AutocompleteInput */\nexport const AutocompleteInput = <T extends AutocompleteInputOptionType>({\n  defaultValue = \"\",\n  id,\n  loading,\n  onSubmit,\n  onSelect,\n  onChange,\n  onClear,\n  onClose,\n  onKeyDown,\n  height,\n  renderOption = (option) => <AutocompleteInputOptionLabel {...option} />,\n  options,\n  ...rest\n}: AutocompleteInputProps<T>) => {\n  const inputRef = useRef<HTMLInputElement | null>(null)\n  const containerRef = useRef<HTMLDivElement | null>(null)\n\n  const [boxProps, inputProps] = splitBoxProps(rest)\n\n  const [state, dispatch] = useReducer(reducer, {\n    open: false,\n    query: defaultValue,\n  })\n\n  const optionsWithRefs = useMemo(() => {\n    return options.map((option) => ({\n      option,\n      ref: createRef<HTMLButtonElement>(),\n    }))\n  }, [options])\n\n  const resetUI = () => {\n    setTimeout(() => {\n      inputRef.current?.focus()\n      reset()\n      dispatch({ type: \"CLOSE\" })\n    }, 100)\n  }\n\n  const handleSelect = (option: T, index: number) => {\n    dispatch({ type: \"SELECT\", payload: { query: option.text } })\n    inputRef.current?.focus()\n    onSelect?.(option, index)\n  }\n\n  const { index, reset, set } = useKeyboardListNavigation({\n    ref: containerRef,\n    list: options,\n    waitForInteractive: true,\n    onEnter: ({ element: option, index: i }) => {\n      handleSelect(option, i)\n      resetUI()\n    },\n  })\n\n  const isDropdownVisible = state.open && options.length > 0\n\n  useEffect(() => {\n    if (!isDropdownVisible) onClose?.()\n  }, [isDropdownVisible, onClose])\n\n  // Reset keyboard navigation when options change\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(reset, [options])\n\n  // Reset keyboard navigation when query is empty\n  useEffect(() => {\n    if (state.query === \"\") reset()\n  }, [reset, state.query])\n\n  const { anchorRef, tooltipRef } = usePosition({\n    position: \"bottom\",\n    offset: 10,\n    active: isDropdownVisible,\n  })\n\n  const { width } = useWidthOf({ ref: anchorRef })\n\n  const handleFocus = () => {\n    reset()\n    dispatch({ type: \"OPEN\" })\n  }\n\n  const handleMouseDown = (option: T, i: number) => () => {\n    handleSelect(option, i)\n    resetUI()\n  }\n\n  const handleMouseEnter = (i: number) => () => {\n    set({ cursor: i, interactive: true })\n  }\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const {\n      currentTarget: { value },\n    } = event\n\n    dispatch({ type: \"CHANGE\", payload: { query: value } })\n    onChange?.(event)\n  }\n\n  const handleClearOrSubmit = () => {\n    if (state.query === \"\") {\n      onSubmit?.(state.query)\n      return\n    }\n\n    dispatch({ type: \"CLEAR\" })\n    inputRef.current?.focus()\n    onClear?.()\n  }\n\n  // Moves focus to different options when keyboard navigating using up/down\n  useEffect(() => {\n    const option = optionsWithRefs[index]\n    option?.ref?.current?.focus()\n  }, [index, optionsWithRefs])\n\n  const handleFocusChange = useCallback((focused: boolean) => {\n    if (focused) return\n    dispatch({ type: \"CLOSE\" })\n    reset()\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  // Handle closing the dropdown when clicking outside of the input\n  // or when focus leaves the input completely\n  const { ref: containsFocusRef } = useContainsFocus({\n    onChange: handleFocusChange,\n  })\n\n  const handleInputKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    switch (event.key) {\n      // Handle <Enter> when nothing is selected\n      case \"Enter\":\n        if (state.query !== \"\" && index === -1) {\n          onSubmit?.(state.query)\n          resetUI()\n        }\n        return\n\n      // <Esc> to close dropdown\n      case \"Escape\":\n        event.preventDefault()\n        event.stopPropagation()\n\n        dispatch({ type: \"CLOSE\" })\n        inputRef.current?.blur()\n\n        return\n\n      default:\n        break\n    }\n\n    onKeyDown?.(event)\n  }\n\n  // Moves focus back to input when typing\n  const handleContainerKeydown = (\n    event: React.KeyboardEvent<HTMLDivElement>\n  ) => {\n    switch (event.key) {\n      case \"Alt\":\n      case \"ArrowDown\":\n      case \"ArrowUp\":\n      case \"Control\":\n      case \"Enter\":\n      case \"Meta\":\n      case \"Shift\":\n      case \"Tab\":\n        // Ignore\n        return\n\n      case \"Escape\":\n        event.preventDefault()\n        event.stopPropagation()\n\n        dispatch({ type: \"CLOSE\" })\n        inputRef.current?.blur()\n        reset()\n\n        return\n\n      default:\n        inputRef.current?.focus()\n    }\n  }\n\n  // Option that is being hovered or keyed into\n  const staged = options[index]\n\n  return (\n    <Box\n      ref={composeRefs(containerRef, containsFocusRef) as any}\n      onKeyDown={handleContainerKeydown}\n      {...boxProps}\n    >\n      <LabeledInput\n        ref={composeRefs(inputRef, anchorRef) as any}\n        role=\"combobox\"\n        aria-expanded={isDropdownVisible}\n        aria-autocomplete=\"list\"\n        {...(id ? { id, \"aria-describedby\": `${id}__assistiveHint` } : {})}\n        label={\n          loading ? (\n            <Box width={18}>\n              <Spinner size=\"small\" />\n            </Box>\n          ) : state.query ? (\n            <Clickable\n              onClick={handleClearOrSubmit}\n              height=\"100%\"\n              display=\"flex\"\n              alignItems=\"center\"\n              aria-label=\"Clear input\"\n            >\n              <CloseIcon fill=\"black60\" aria-hidden />\n            </Clickable>\n          ) : (\n            <MagnifyingGlassIcon fill=\"black60\" aria-hidden />\n          )\n        }\n        value={staged?.text ?? state.query}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onKeyDown={handleInputKeydown}\n        autoComplete=\"off\"\n        height={height}\n        {...inputProps}\n      />\n\n      {isDropdownVisible && (\n        <AutocompleteInputDropdown\n          ref={tooltipRef as any}\n          role=\"listbox\"\n          width={width}\n        >\n          {optionsWithRefs.map(({ option, ref }, i) => {\n            return (\n              <AutocompleteInputOption\n                key={i}\n                ref={ref}\n                role=\"option\"\n                aria-selected={i === index}\n                aria-posinset={i + 1}\n                aria-setsize={options.length}\n                onMouseDown={handleMouseDown(option, i)}\n                onMouseEnter={handleMouseEnter(i)}\n                selected={i === index}\n                tabIndex={-1}\n              >\n                {renderOption(option, i)}\n              </AutocompleteInputOption>\n            )\n          })}\n        </AutocompleteInputDropdown>\n      )}\n\n      <VisuallyHidden {...(id ? { id: `${id}__assistiveHint` } : {})}>\n        When autocomplete results are available use up and down arrows to review\n        and enter to select. Touch device users, explore by touch or with swipe\n        gestures.\n      </VisuallyHidden>\n\n      {isDropdownVisible && (\n        <VisuallyHidden role=\"status\" aria-atomic=\"true\" aria-live=\"polite\">\n          {options.length === 1\n            ? `1 result is available`\n            : `${options.length} results are available`}\n        </VisuallyHidden>\n      )}\n    </Box>\n  )\n}\n\nconst AutocompleteInputDropdown = styled(Box)`\n  box-shadow: ${DROP_SHADOW};\n  max-height: 300px;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n  z-index: 1;\n`\n"],"file":"AutocompleteInput.js"}
+{"version":3,"sources":["../../../src/elements/AutocompleteInput/AutocompleteInput.tsx"],"names":["reducer","state","action","type","open","query","payload","AutocompleteInput","defaultValue","id","loading","onSubmit","onSelect","onChange","onClear","onClose","onKeyDown","height","renderOption","option","options","rest","inputRef","containerRef","boxProps","inputProps","dispatch","optionsWithRefs","map","ref","resetUI","setTimeout","current","focus","reset","handleSelect","index","text","list","waitForInteractive","onEnter","element","i","set","isDropdownVisible","length","position","offset","active","anchorRef","tooltipRef","width","handleFocus","handleMouseDown","handleMouseEnter","cursor","interactive","handleChange","event","value","currentTarget","handleClearOrSubmit","handleFocusChange","focused","containsFocusRef","handleInputKeydown","key","preventDefault","stopPropagation","blur","handleContainerKeydown","staged","AutocompleteInputDropdown","Box","DROP_SHADOW"],"mappings":"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","sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport React, {\n  createRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n} from \"react\"\nimport styled from \"styled-components\"\nimport { useKeyboardListNavigation } from \"use-keyboard-list-navigation\"\nimport { Spinner } from \"..\"\nimport { DROP_SHADOW } from \"../../helpers\"\nimport { CloseIcon, MagnifyingGlassIcon } from \"../../svgs\"\nimport { usePosition, useContainsFocus } from \"../../utils\"\nimport { useWidthOf } from \"../../utils/useWidthOf\"\nimport { Box, splitBoxProps } from \"../Box\"\nimport { Clickable } from \"../Clickable\"\nimport { InputProps } from \"../Input\"\nimport { LabeledInput } from \"../LabeledInput\"\nimport { VisuallyHidden } from \"../VisuallyHidden\"\nimport { AutocompleteInputOption } from \"./AutocompleteInputOption\"\nimport { AutocompleteInputOptionLabel } from \"./AutocompleteInputOptionLabel\"\n\n/** Base option type — can be expanded */\nexport interface AutocompleteInputOptionType {\n  text: string\n  value: string\n}\n\ninterface State {\n  open: boolean\n  query: string\n}\n\ntype Action =\n  | { type: \"OPEN\" }\n  | { type: \"CLOSE\" }\n  | { type: \"CLEAR\" }\n  | { type: \"CHANGE\"; payload: { query: string } }\n  | { type: \"SELECT\"; payload: { query: string } }\n\nconst reducer = (state: State, action: Action): State => {\n  switch (action.type) {\n    case \"OPEN\":\n      return { ...state, open: true }\n    case \"CLOSE\":\n      return { ...state, open: false }\n    case \"CLEAR\":\n      return { ...state, query: \"\" }\n    case \"CHANGE\":\n      return { ...state, query: action.payload.query, open: true }\n    case \"SELECT\":\n      return { ...state, query: action.payload.query, open: false }\n  }\n}\n\nexport interface AutocompleteInputProps<T extends AutocompleteInputOptionType>\n  extends Omit<InputProps, \"onSelect\" | \"onSubmit\"> {\n  defaultValue?: string\n  loading?: boolean\n  /** on <enter> when no option is selected */\n  onSubmit?(query: string): void\n  /** on <click> or <enter> when an option is selected */\n  onSelect?(option: T, index: number): void\n  /** on <click> of the 'x' (clear) button */\n  onClear?(): void\n  /** Callback that runs when options are hidden */\n  onClose?(): void\n  renderOption?(\n    option: T,\n    i: number\n  ): React.ReactElement<any, string | React.JSXElementConstructor<any>>\n  options: T[]\n}\n\n/** AutocompleteInput */\nexport const AutocompleteInput = <T extends AutocompleteInputOptionType>({\n  defaultValue = \"\",\n  id,\n  loading,\n  onSubmit,\n  onSelect,\n  onChange,\n  onClear,\n  onClose,\n  onKeyDown,\n  height,\n  renderOption = (option) => <AutocompleteInputOptionLabel {...option} />,\n  options,\n  ...rest\n}: AutocompleteInputProps<T>) => {\n  const inputRef = useRef<HTMLInputElement | null>(null)\n  const containerRef = useRef<HTMLDivElement | null>(null)\n\n  const [boxProps, inputProps] = splitBoxProps(rest)\n\n  const [state, dispatch] = useReducer(reducer, {\n    open: false,\n    query: defaultValue,\n  })\n\n  const optionsWithRefs = useMemo(() => {\n    return options.map((option) => ({\n      option,\n      ref: createRef<HTMLButtonElement>(),\n    }))\n  }, [options])\n\n  const resetUI = () => {\n    setTimeout(() => {\n      inputRef.current?.focus()\n      reset()\n      dispatch({ type: \"CLOSE\" })\n    }, 100)\n  }\n\n  const handleSelect = (option: T, index: number) => {\n    dispatch({ type: \"SELECT\", payload: { query: option.text } })\n    inputRef.current?.focus()\n    onSelect?.(option, index)\n  }\n\n  const { index, reset, set } = useKeyboardListNavigation({\n    ref: containerRef,\n    list: options,\n    waitForInteractive: true,\n    onEnter: ({ element: option, index: i }) => {\n      handleSelect(option, i)\n      resetUI()\n    },\n  })\n\n  const isDropdownVisible = state.open && options.length > 0\n\n  // Reset keyboard navigation when options change\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(reset, [options])\n\n  // Reset keyboard navigation when query is empty\n  useEffect(() => {\n    if (state.query === \"\") reset()\n  }, [reset, state.query])\n\n  const { anchorRef, tooltipRef } = usePosition({\n    position: \"bottom\",\n    offset: 10,\n    active: isDropdownVisible,\n  })\n\n  const { width } = useWidthOf({ ref: anchorRef })\n\n  const handleFocus = () => {\n    reset()\n    dispatch({ type: \"OPEN\" })\n  }\n\n  const handleMouseDown = (option: T, i: number) => () => {\n    handleSelect(option, i)\n    resetUI()\n  }\n\n  const handleMouseEnter = (i: number) => () => {\n    set({ cursor: i, interactive: true })\n  }\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const {\n      currentTarget: { value },\n    } = event\n\n    dispatch({ type: \"CHANGE\", payload: { query: value } })\n    onChange?.(event)\n  }\n\n  const handleClearOrSubmit = () => {\n    if (state.query === \"\") {\n      onSubmit?.(state.query)\n      return\n    }\n\n    dispatch({ type: \"CLEAR\" })\n    inputRef.current?.focus()\n    onClear?.()\n  }\n\n  // Moves focus to different options when keyboard navigating using up/down\n  useEffect(() => {\n    const option = optionsWithRefs[index]\n    option?.ref?.current?.focus()\n  }, [index, optionsWithRefs])\n\n  const handleFocusChange = useCallback(\n    (focused: boolean) => {\n      if (focused) return\n      dispatch({ type: \"CLOSE\" })\n      reset()\n      onClose?.()\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [onClose]\n  )\n\n  // Handle closing the dropdown when clicking outside of the input\n  // or when focus leaves the input completely\n  const { ref: containsFocusRef } = useContainsFocus({\n    onChange: handleFocusChange,\n  })\n\n  const handleInputKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    switch (event.key) {\n      // Handle <Enter> when nothing is selected\n      case \"Enter\":\n        if (state.query !== \"\" && index === -1) {\n          onSubmit?.(state.query)\n          resetUI()\n        }\n        return\n\n      // <Esc> to close dropdown\n      case \"Escape\":\n        event.preventDefault()\n        event.stopPropagation()\n\n        dispatch({ type: \"CLOSE\" })\n        inputRef.current?.blur()\n\n        return\n\n      default:\n        break\n    }\n\n    onKeyDown?.(event)\n  }\n\n  // Moves focus back to input when typing\n  const handleContainerKeydown = (\n    event: React.KeyboardEvent<HTMLDivElement>\n  ) => {\n    switch (event.key) {\n      case \"Alt\":\n      case \"ArrowDown\":\n      case \"ArrowUp\":\n      case \"Control\":\n      case \"Enter\":\n      case \"Meta\":\n      case \"Shift\":\n      case \"Tab\":\n        // Ignore\n        return\n\n      case \"Escape\":\n        event.preventDefault()\n        event.stopPropagation()\n\n        dispatch({ type: \"CLOSE\" })\n        inputRef.current?.blur()\n        reset()\n\n        return\n\n      default:\n        inputRef.current?.focus()\n    }\n  }\n\n  // Option that is being hovered or keyed into\n  const staged = options[index]\n\n  return (\n    <Box\n      ref={composeRefs(containerRef, containsFocusRef) as any}\n      onKeyDown={handleContainerKeydown}\n      {...boxProps}\n    >\n      <LabeledInput\n        ref={composeRefs(inputRef, anchorRef) as any}\n        role=\"combobox\"\n        aria-expanded={isDropdownVisible}\n        aria-autocomplete=\"list\"\n        {...(id ? { id, \"aria-describedby\": `${id}__assistiveHint` } : {})}\n        label={\n          loading ? (\n            <Box width={18}>\n              <Spinner size=\"small\" />\n            </Box>\n          ) : state.query ? (\n            <Clickable\n              onClick={handleClearOrSubmit}\n              height=\"100%\"\n              display=\"flex\"\n              alignItems=\"center\"\n              aria-label=\"Clear input\"\n            >\n              <CloseIcon fill=\"black60\" aria-hidden />\n            </Clickable>\n          ) : (\n            <MagnifyingGlassIcon fill=\"black60\" aria-hidden />\n          )\n        }\n        value={staged?.text ?? state.query}\n        onChange={handleChange}\n        onFocus={handleFocus}\n        onKeyDown={handleInputKeydown}\n        autoComplete=\"off\"\n        height={height}\n        {...inputProps}\n      />\n\n      {isDropdownVisible && (\n        <AutocompleteInputDropdown\n          ref={tooltipRef as any}\n          role=\"listbox\"\n          width={width}\n        >\n          {optionsWithRefs.map(({ option, ref }, i) => {\n            return (\n              <AutocompleteInputOption\n                key={i}\n                ref={ref}\n                role=\"option\"\n                aria-selected={i === index}\n                aria-posinset={i + 1}\n                aria-setsize={options.length}\n                onMouseDown={handleMouseDown(option, i)}\n                onMouseEnter={handleMouseEnter(i)}\n                selected={i === index}\n                tabIndex={-1}\n              >\n                {renderOption(option, i)}\n              </AutocompleteInputOption>\n            )\n          })}\n        </AutocompleteInputDropdown>\n      )}\n\n      <VisuallyHidden {...(id ? { id: `${id}__assistiveHint` } : {})}>\n        When autocomplete results are available use up and down arrows to review\n        and enter to select. Touch device users, explore by touch or with swipe\n        gestures.\n      </VisuallyHidden>\n\n      {isDropdownVisible && (\n        <VisuallyHidden role=\"status\" aria-atomic=\"true\" aria-live=\"polite\">\n          {options.length === 1\n            ? `1 result is available`\n            : `${options.length} results are available`}\n        </VisuallyHidden>\n      )}\n    </Box>\n  )\n}\n\nconst AutocompleteInputDropdown = styled(Box)`\n  box-shadow: ${DROP_SHADOW};\n  max-height: 300px;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n  z-index: 1;\n`\n"],"file":"AutocompleteInput.js"}

package/dist/utils/useContainsFocus.js

@@ -18,8 +18,8 @@ var useContainsFocus = function useContainsFocus(_ref) {
     document.addEventListener("focus", handleFocus, true);
     document.addEventListener("blur", handleFocus, true);
     return function () {
-      document.removeEventListener("focus", handleFocus);
-      document.removeEventListener("blur", handleFocus);
+      document.removeEventListener("focus", handleFocus, true);
+      document.removeEventListener("blur", handleFocus, true);
     };
   }, [onChange]);
   return {

package/dist/utils/useContainsFocus.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/useContainsFocus.ts"],"names":["useContainsFocus","onChange","ref","handleFocus","debounce","current","document","activeElement","contains","addEventListener","removeEventListener","callback","timer","clearTimeout","setTimeout"],"mappings":";;;;;;;AAAA;;AAEO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,OAI1B;AAAA,MAHJC,QAGI,QAHJA,QAGI;AACJ,MAAMC,GAAG,GAAG,mBAAoB,IAApB,CAAZ;AAEA,wBAAU,YAAM;AACd,QAAMC,WAAW,GAAGC,QAAQ,CAAC,YAAM;AACjC,UAAI,CAACF,GAAG,CAACG,OAAT,EAAkB;AAElBJ,MAAAA,QAAQ,CACNC,GAAG,CAACG,OAAJ,KAAgBC,QAAQ,CAACC,aAAzB,IACEL,GAAG,CAACG,OAAJ,CAAYG,QAAZ,CAAqBF,QAAQ,CAACC,aAA9B,CAFI,CAAR;AAID,KAP2B,CAA5B;AASAD,IAAAA,QAAQ,CAACG,gBAAT,CAA0B,OAA1B,EAAmCN,WAAnC,EAAgD,IAAhD;AACAG,IAAAA,QAAQ,CAACG,gBAAT,CAA0B,MAA1B,EAAkCN,WAAlC,EAA+C,IAA/C;AAEA,WAAO,YAAM;AACXG,MAAAA,QAAQ,CAACI,mBAAT,CAA6B,OAA7B,EAAsCP,WAAtC;AACAG,MAAAA,QAAQ,CAACI,mBAAT,CAA6B,MAA7B,EAAqCP,WAArC;AACD,KAHD;AAID,GAjBD,EAiBG,CAACF,QAAD,CAjBH;AAmBA,SAAO;AAAEC,IAAAA,GAAG,EAAHA;AAAF,GAAP;AACD,CA3BM;AA6BP;AACA;AACA;AACA;AACA;AACA;;;;;AACA,IAAME,QAAQ,GAAG,SAAXA,QAAW,CAACO,QAAD,EAA0B;AACzC,MAAIC,KAAJ;AAEA,SAAO,YAAM;AACXC,IAAAA,YAAY,CAACD,KAAD,CAAZ;AAEAA,IAAAA,KAAK,GAAGE,UAAU,CAAC,YAAM;AACvBH,MAAAA,QAAQ;AACT,KAFiB,EAEf,CAFe,CAAlB;AAGD,GAND;AAOD,CAVD","sourcesContent":["import { useEffect, useRef } from \"react\"\n\nexport const useContainsFocus = ({\n  onChange,\n}: {\n  onChange(focused: boolean): void\n}) => {\n  const ref = useRef<HTMLElement>(null)\n\n  useEffect(() => {\n    const handleFocus = debounce(() => {\n      if (!ref.current) return\n\n      onChange(\n        ref.current === document.activeElement ||\n          ref.current.contains(document.activeElement)\n      )\n    })\n\n    document.addEventListener(\"focus\", handleFocus, true)\n    document.addEventListener(\"blur\", handleFocus, true)\n\n    return () => {\n      document.removeEventListener(\"focus\", handleFocus)\n      document.removeEventListener(\"blur\", handleFocus)\n    }\n  }, [onChange])\n\n  return { ref }\n}\n\n/**\n * A simplified debounce that just executes the last function if multiple\n * functions are called within the same tick. Since frequently a blur and a focus\n * will happen concurrently: the last function (the focus) will be executed.\n * If travelling from two elements within the same focus group, `focused` will remain `true`.\n */\nconst debounce = (callback: () => void) => {\n  let timer: ReturnType<typeof setTimeout>\n\n  return () => {\n    clearTimeout(timer)\n\n    timer = setTimeout(() => {\n      callback()\n    }, 0)\n  }\n}\n"],"file":"useContainsFocus.js"}
+{"version":3,"sources":["../../src/utils/useContainsFocus.ts"],"names":["useContainsFocus","onChange","ref","handleFocus","debounce","current","document","activeElement","contains","addEventListener","removeEventListener","callback","timer","clearTimeout","setTimeout"],"mappings":";;;;;;;AAAA;;AAEO,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAmB,OAI1B;AAAA,MAHJC,QAGI,QAHJA,QAGI;AACJ,MAAMC,GAAG,GAAG,mBAAoB,IAApB,CAAZ;AAEA,wBAAU,YAAM;AACd,QAAMC,WAAW,GAAGC,QAAQ,CAAC,YAAM;AACjC,UAAI,CAACF,GAAG,CAACG,OAAT,EAAkB;AAElBJ,MAAAA,QAAQ,CACNC,GAAG,CAACG,OAAJ,KAAgBC,QAAQ,CAACC,aAAzB,IACEL,GAAG,CAACG,OAAJ,CAAYG,QAAZ,CAAqBF,QAAQ,CAACC,aAA9B,CAFI,CAAR;AAID,KAP2B,CAA5B;AASAD,IAAAA,QAAQ,CAACG,gBAAT,CAA0B,OAA1B,EAAmCN,WAAnC,EAAgD,IAAhD;AACAG,IAAAA,QAAQ,CAACG,gBAAT,CAA0B,MAA1B,EAAkCN,WAAlC,EAA+C,IAA/C;AAEA,WAAO,YAAM;AACXG,MAAAA,QAAQ,CAACI,mBAAT,CAA6B,OAA7B,EAAsCP,WAAtC,EAAmD,IAAnD;AACAG,MAAAA,QAAQ,CAACI,mBAAT,CAA6B,MAA7B,EAAqCP,WAArC,EAAkD,IAAlD;AACD,KAHD;AAID,GAjBD,EAiBG,CAACF,QAAD,CAjBH;AAmBA,SAAO;AAAEC,IAAAA,GAAG,EAAHA;AAAF,GAAP;AACD,CA3BM;AA6BP;AACA;AACA;AACA;AACA;AACA;;;;;AACA,IAAME,QAAQ,GAAG,SAAXA,QAAW,CAACO,QAAD,EAA0B;AACzC,MAAIC,KAAJ;AAEA,SAAO,YAAM;AACXC,IAAAA,YAAY,CAACD,KAAD,CAAZ;AAEAA,IAAAA,KAAK,GAAGE,UAAU,CAAC,YAAM;AACvBH,MAAAA,QAAQ;AACT,KAFiB,EAEf,CAFe,CAAlB;AAGD,GAND;AAOD,CAVD","sourcesContent":["import { useEffect, useRef } from \"react\"\n\nexport const useContainsFocus = ({\n  onChange,\n}: {\n  onChange(focused: boolean): void\n}) => {\n  const ref = useRef<HTMLElement>(null)\n\n  useEffect(() => {\n    const handleFocus = debounce(() => {\n      if (!ref.current) return\n\n      onChange(\n        ref.current === document.activeElement ||\n          ref.current.contains(document.activeElement)\n      )\n    })\n\n    document.addEventListener(\"focus\", handleFocus, true)\n    document.addEventListener(\"blur\", handleFocus, true)\n\n    return () => {\n      document.removeEventListener(\"focus\", handleFocus, true)\n      document.removeEventListener(\"blur\", handleFocus, true)\n    }\n  }, [onChange])\n\n  return { ref }\n}\n\n/**\n * A simplified debounce that just executes the last function if multiple\n * functions are called within the same tick. Since frequently a blur and a focus\n * will happen concurrently: the last function (the focus) will be executed.\n * If travelling from two elements within the same focus group, `focused` will remain `true`.\n */\nconst debounce = (callback: () => void) => {\n  let timer: ReturnType<typeof setTimeout>\n\n  return () => {\n    clearTimeout(timer)\n\n    timer = setTimeout(() => {\n      callback()\n    }, 0)\n  }\n}\n"],"file":"useContainsFocus.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "18.7.2",
+  "version": "18.7.3",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -174,5 +174,5 @@
       "<rootDir>/www/"
     ]
   },
-  "gitHead": "4cd304332ad9bf7a28b965d9050f79805a79eae8"
+  "gitHead": "48865709ecf5fe9fd5853a603d612ba63c92faf5"
 }