@artsy/palette 18.11.0 → 18.12.2

package/CHANGELOG.md

@@ -1,3 +1,69 @@
+# v18.12.2 (Thu Jan 06 2022)
+
+#### 🐛  Bug Fix
+
+- feat(autocomplete): supports footer [#1087](https://github.com/artsy/palette/pull/1087) ([@dzucconi](https://github.com/dzucconi))
+- feat(autocomplete): adds footer ([@dzucconi](https://github.com/dzucconi))
+- fix(usefocuslock): guards in the event here are no focusable nodes ([@dzucconi](https://github.com/dzucconi))
+
+#### Authors: 1
+
+- Damon ([@dzucconi](https://github.com/dzucconi))
+
+---
+
+# v18.12.1 (Wed Dec 29 2021)
+
+#### 🐛  Bug Fix
+
+- fix(SWA): Fix onEnter in AutocompleteInput [#1092](https://github.com/artsy/palette/pull/1092) ([@Serge0n](https://github.com/Serge0n))
+- onEnter fix ([@Serge0n](https://github.com/Serge0n))
+
+#### Authors: 1
+
+- Sergey Kravchyonok ([@Serge0n](https://github.com/Serge0n))
+
+---
+
+# v18.12.0 (Tue Dec 14 2021)
+
+#### 🚀  Enhancement
+
+- feat: exports button variants/mixin [#1090](https://github.com/artsy/palette/pull/1090) ([@dzucconi](https://github.com/dzucconi))
+
+#### 🐛  Bug Fix
+
+- feat: exports button variants/mixin ([@dzucconi](https://github.com/dzucconi))
+
+#### 🏠  Internal
+
+- chore(deps): update dep typescript from 4.5.3 to v4.5.4 [#1088](https://github.com/artsy/palette/pull/1088) ([@renovate-bot](https://github.com/renovate-bot))
+
+#### Authors: 2
+
+- Damon ([@dzucconi](https://github.com/dzucconi))
+- WhiteSource Renovate ([@renovate-bot](https://github.com/renovate-bot))
+
+---
+
+# v18.11.1 (Fri Dec 10 2021)
+
+#### 🐛  Bug Fix
+
+- fix: blacklist -> blocklist [#1085](https://github.com/artsy/palette/pull/1085) ([@mdole](https://github.com/mdole))
+- fix: blacklist -> blocklist ([@mdole](https://github.com/mdole))
+
+#### 🏠  Internal
+
+- chore(deps): update dep typescript from 4.5.2 to v4.5.3 [#1084](https://github.com/artsy/palette/pull/1084) ([@renovate-bot](https://github.com/renovate-bot))
+
+#### Authors: 2
+
+- Matt Dole ([@mdole](https://github.com/mdole))
+- WhiteSource Renovate ([@renovate-bot](https://github.com/renovate-bot))
+
+---
+
 # v18.11.0 (Wed Dec 08 2021)
 
 #### 🚀  Enhancement

package/dist/elements/AutocompleteInput/AutocompleteInput.d.ts

@@ -8,6 +8,7 @@ export interface AutocompleteInputOptionType {
 export interface AutocompleteInputProps<T extends AutocompleteInputOptionType> extends Omit<InputProps, "onSelect" | "onSubmit"> {
     defaultValue?: string;
     loading?: boolean;
+    footer?: React.ReactNode;
     /** on <enter> when no option is selected */
     onSubmit?(query: string): void;
     /** on <click> or <enter> when an option is selected */
@@ -20,4 +21,4 @@ export interface AutocompleteInputProps<T extends AutocompleteInputOptionType> e
     options: T[];
 }
 /** AutocompleteInput */
-export declare const AutocompleteInput: <T extends AutocompleteInputOptionType>({ defaultValue, id, loading, onSubmit, onSelect, onChange, onClear, onClose, onKeyDown, height, renderOption, options, ...rest }: AutocompleteInputProps<T>) => JSX.Element;
+export declare const AutocompleteInput: <T extends AutocompleteInputOptionType>({ defaultValue, id, loading, footer, onSubmit, onSelect, onChange, onClear, onClose, onKeyDown, height, renderOption, options, ...rest }: AutocompleteInputProps<T>) => JSX.Element;

package/dist/elements/AutocompleteInput/AutocompleteInput.js

@@ -106,6 +106,7 @@ var AutocompleteInput = function AutocompleteInput(_ref) {
       defaultValue = _ref$defaultValue === void 0 ? "" : _ref$defaultValue,
       id = _ref.id,
       loading = _ref.loading,
+      footer = _ref.footer,
       onSubmit = _ref.onSubmit,
       onSelect = _ref.onSelect,
       onChange = _ref.onChange,
@@ -118,7 +119,7 @@ var AutocompleteInput = function AutocompleteInput(_ref) {
     return /*#__PURE__*/_react.default.createElement(_AutocompleteInputOptionLabel.AutocompleteInputOptionLabel, option);
   } : _ref$renderOption,
       options = _ref.options,
-      rest = _objectWithoutProperties(_ref, ["defaultValue", "id", "loading", "onSubmit", "onSelect", "onChange", "onClear", "onClose", "onKeyDown", "height", "renderOption", "options"]);
+      rest = _objectWithoutProperties(_ref, ["defaultValue", "id", "loading", "footer", "onSubmit", "onSelect", "onChange", "onClear", "onClose", "onKeyDown", "height", "renderOption", "options"]);
 
   var inputRef = (0, _react.useRef)(null);
   var containerRef = (0, _react.useRef)(null);
@@ -176,7 +177,10 @@ var AutocompleteInput = function AutocompleteInput(_ref) {
     waitForInteractive: true,
     onEnter: function onEnter(_ref2) {
       var option = _ref2.element,
-          i = _ref2.index;
+          i = _ref2.index,
+          event = _ref2.event;
+      event.preventDefault();
+      event.stopPropagation();
       handleSelect(option, i);
       resetUI();
     }
@@ -381,7 +385,7 @@ var AutocompleteInput = function AutocompleteInput(_ref) {
     ref: tooltipRef,
     role: "listbox",
     width: width
-  }, optionsWithRefs.map(function (_ref3, i) {
+  }, /*#__PURE__*/_react.default.createElement(AutocompleteInputOptions, null, optionsWithRefs.map(function (_ref3, i) {
     var option = _ref3.option,
         ref = _ref3.ref;
     return /*#__PURE__*/_react.default.createElement(_AutocompleteInputOption.AutocompleteInputOption, {
@@ -396,7 +400,7 @@ var AutocompleteInput = function AutocompleteInput(_ref) {
       selected: i === index,
       tabIndex: -1
     }, renderOption(option, i));
-  })), /*#__PURE__*/_react.default.createElement(_VisuallyHidden.VisuallyHidden, id ? {
+  })), footer), /*#__PURE__*/_react.default.createElement(_VisuallyHidden.VisuallyHidden, id ? {
     id: "".concat(id, "__assistiveHint")
   } : {}, "When autocomplete results are available use up and down arrows to review and enter to select. Touch device users, explore by touch or with swipe gestures."), isDropdownVisible && /*#__PURE__*/_react.default.createElement(_VisuallyHidden.VisuallyHidden, {
     role: "status",
@@ -410,5 +414,9 @@ AutocompleteInput.displayName = "AutocompleteInput";
 var AutocompleteInputDropdown = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "AutocompleteInput__AutocompleteInputDropdown",
   componentId: "sc-89lyrd-0"
-})(["box-shadow:", ";max-height:300px;overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:1;"], _helpers.DROP_SHADOW);
+})(["box-shadow:", ";z-index:1;"], _helpers.DROP_SHADOW);
+var AutocompleteInputOptions = (0, _styledComponents.default)(_Box.Box).withConfig({
+  displayName: "AutocompleteInput__AutocompleteInputOptions",
+  componentId: "sc-89lyrd-1"
+})(["max-height:308px;overflow-y:auto;-webkit-overflow-scrolling:touch;"]);
 //# sourceMappingURL=AutocompleteInput.js.map

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  // 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 || !isDropdownVisible) return\n\n      dispatch({ type: \"CLOSE\" })\n      reset()\n      onClose?.()\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [onClose, isDropdownVisible]\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","footer","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","event","preventDefault","stopPropagation","set","isDropdownVisible","length","position","offset","active","anchorRef","tooltipRef","width","handleFocus","handleMouseDown","handleMouseEnter","cursor","interactive","handleChange","value","currentTarget","handleClearOrSubmit","handleFocusChange","focused","containsFocusRef","handleInputKeydown","key","blur","handleContainerKeydown","staged","AutocompleteInputDropdown","Box","DROP_SHADOW","AutocompleteInputOptions"],"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  footer?: React.ReactNode\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  footer,\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, event }) => {\n      event.preventDefault()\n      event.stopPropagation()\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 || !isDropdownVisible) return\n\n      dispatch({ type: \"CLOSE\" })\n      reset()\n      onClose?.()\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [onClose, isDropdownVisible]\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          <AutocompleteInputOptions>\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          </AutocompleteInputOptions>\n\n          {footer}\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  z-index: 1;\n`\n\nconst AutocompleteInputOptions = styled(Box)`\n  /* 308 = Roughly, 5.5 default sized options  */\n  max-height: 308px;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n`\n"],"file":"AutocompleteInput.js"}

package/dist/elements/AutocompleteInput/AutocompleteInput.story.js

@@ -102,6 +102,29 @@ var Default = function Default() {
           color: "black60"
         }, option.subtitle));
       }
+    }, {
+      options: [].concat(OPTIONS, _toConsumableArray(OPTIONS.map(function (option) {
+        return _objectSpread(_objectSpread({}, option), {}, {
+          text: "Another ".concat(option.text),
+          value: "another-".concat(option.value)
+        });
+      }))),
+      footer: /*#__PURE__*/_react.default.createElement(_Box.Box, {
+        px: 2,
+        py: 1,
+        bg: "black10"
+      }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+        variant: "xs"
+      }, "Footer"))
+    }, {
+      options: [OPTIONS[0], OPTIONS[1]],
+      footer: /*#__PURE__*/_react.default.createElement(_Box.Box, {
+        px: 2,
+        py: 1,
+        bg: "black10"
+      }, /*#__PURE__*/_react.default.createElement(_Text.Text, {
+        variant: "xs"
+      }, "Footer"))
     }]
   }, /*#__PURE__*/_react.default.createElement(_AutocompleteInput.AutocompleteInput, {
     placeholder: "Search",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/AutocompleteInput/AutocompleteInput.story.tsx"],"names":["title","OPTIONS","text","value","subtitle","Default","loading","options","height","map","option","renderOption","Demo","query","setQuery","handleChange","event","target","i","displayQuery","borderBottom","borderColor"],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Box } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { AutocompleteInput, AutocompleteInputProps } from \"./AutocompleteInput\"\n\nexport default {\n  title: \"Components/AutocompleteInput\",\n}\n\nconst OPTIONS = [\n  {\n    text: \"Painting\",\n    value: \"painting\",\n    subtitle: \"An example subtitle\",\n  },\n  { text: \"Print\", value: \"print\", subtitle: \"An example subtitle\" },\n  { text: \"Sculpture\", value: \"sculpture\", subtitle: \"An example subtitle\" },\n  {\n    text: \"Photography\",\n    value: \"photography\",\n    subtitle: \"An example subtitle\",\n  },\n  {\n    text: \"Mixed Media\",\n    value: \"mixed-media\",\n    subtitle: \"An example subtitle\",\n  },\n]\n\nexport const Default = () => {\n  return (\n    <States<Partial<AutocompleteInputProps<typeof OPTIONS[number]>>>\n      states={[\n        {},\n        { loading: true },\n        { options: [], height: 40 },\n        {\n          options: [\n            ...OPTIONS,\n            ...OPTIONS.map((option) => ({\n              ...option,\n              text: `Another ${option.text}`,\n              value: `another-${option.value}`,\n            })),\n          ],\n          renderOption: (option) => (\n            <Box px={2} py={1}>\n              <Text variant=\"md\">{option.text}</Text>\n              <Text variant=\"xs\" color=\"black60\">\n                {option.subtitle}\n              </Text>\n            </Box>\n          ),\n        },\n      ]}\n    >\n      <AutocompleteInput\n        placeholder=\"Search\"\n        options={OPTIONS}\n        onSelect={action(\"onSelect\")}\n        onSubmit={action(\"onSubmit\")}\n        onClose={action(\"onClose\")}\n      />\n    </States>\n  )\n}\n\nexport const Demo = () => {\n  const [query, setQuery] = useState(\"\")\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setQuery(event.target.value)\n  }\n\n  return (\n    <AutocompleteInput\n      placeholder=\"Begin typing...\"\n      options={[...(query ? [{ text: query, value: query }] : []), ...OPTIONS]}\n      onChange={handleChange}\n      onSelect={action(\"onSelect\")}\n      onSubmit={action(\"onSubmit\")}\n      onClose={action(\"onClose\")}\n      renderOption={(option, i) => {\n        const displayQuery = i === 0 && query !== \"\"\n\n        return (\n          <Box\n            px={2}\n            py={1}\n            {...(displayQuery\n              ? { borderBottom: \"1px solid\", borderColor: \"black10\" }\n              : {})}\n          >\n            <Text variant=\"md\">\n              {displayQuery\n                ? `See full results for “${option.text}”`\n                : option.text}\n            </Text>\n\n            {\"subtitle\" in option && (\n              <Text variant=\"xs\" color=\"black60\">\n                {option.subtitle}\n              </Text>\n            )}\n          </Box>\n        )\n      }}\n    />\n  )\n}\n"],"file":"AutocompleteInput.story.js"}
+{"version":3,"sources":["../../../src/elements/AutocompleteInput/AutocompleteInput.story.tsx"],"names":["title","OPTIONS","text","value","subtitle","Default","loading","options","height","map","option","renderOption","footer","Demo","query","setQuery","handleChange","event","target","i","displayQuery","borderBottom","borderColor"],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Box } from \"../Box\"\nimport { Text } from \"../Text\"\nimport { AutocompleteInput, AutocompleteInputProps } from \"./AutocompleteInput\"\n\nexport default {\n  title: \"Components/AutocompleteInput\",\n}\n\nconst OPTIONS = [\n  {\n    text: \"Painting\",\n    value: \"painting\",\n    subtitle: \"An example subtitle\",\n  },\n  { text: \"Print\", value: \"print\", subtitle: \"An example subtitle\" },\n  { text: \"Sculpture\", value: \"sculpture\", subtitle: \"An example subtitle\" },\n  {\n    text: \"Photography\",\n    value: \"photography\",\n    subtitle: \"An example subtitle\",\n  },\n  {\n    text: \"Mixed Media\",\n    value: \"mixed-media\",\n    subtitle: \"An example subtitle\",\n  },\n]\n\nexport const Default = () => {\n  return (\n    <States<Partial<AutocompleteInputProps<typeof OPTIONS[number]>>>\n      states={[\n        {},\n        { loading: true },\n        { options: [], height: 40 },\n        {\n          options: [\n            ...OPTIONS,\n            ...OPTIONS.map((option) => ({\n              ...option,\n              text: `Another ${option.text}`,\n              value: `another-${option.value}`,\n            })),\n          ],\n          renderOption: (option) => (\n            <Box px={2} py={1}>\n              <Text variant=\"md\">{option.text}</Text>\n              <Text variant=\"xs\" color=\"black60\">\n                {option.subtitle}\n              </Text>\n            </Box>\n          ),\n        },\n        {\n          options: [\n            ...OPTIONS,\n            ...OPTIONS.map((option) => ({\n              ...option,\n              text: `Another ${option.text}`,\n              value: `another-${option.value}`,\n            })),\n          ],\n          footer: (\n            <Box px={2} py={1} bg=\"black10\">\n              <Text variant=\"xs\">Footer</Text>\n            </Box>\n          ),\n        },\n        {\n          options: [OPTIONS[0], OPTIONS[1]],\n          footer: (\n            <Box px={2} py={1} bg=\"black10\">\n              <Text variant=\"xs\">Footer</Text>\n            </Box>\n          ),\n        },\n      ]}\n    >\n      <AutocompleteInput\n        placeholder=\"Search\"\n        options={OPTIONS}\n        onSelect={action(\"onSelect\")}\n        onSubmit={action(\"onSubmit\")}\n        onClose={action(\"onClose\")}\n      />\n    </States>\n  )\n}\n\nexport const Demo = () => {\n  const [query, setQuery] = useState(\"\")\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    setQuery(event.target.value)\n  }\n\n  return (\n    <AutocompleteInput\n      placeholder=\"Begin typing...\"\n      options={[...(query ? [{ text: query, value: query }] : []), ...OPTIONS]}\n      onChange={handleChange}\n      onSelect={action(\"onSelect\")}\n      onSubmit={action(\"onSubmit\")}\n      onClose={action(\"onClose\")}\n      renderOption={(option, i) => {\n        const displayQuery = i === 0 && query !== \"\"\n\n        return (\n          <Box\n            px={2}\n            py={1}\n            {...(displayQuery\n              ? { borderBottom: \"1px solid\", borderColor: \"black10\" }\n              : {})}\n          >\n            <Text variant=\"md\">\n              {displayQuery\n                ? `See full results for “${option.text}”`\n                : option.text}\n            </Text>\n\n            {\"subtitle\" in option && (\n              <Text variant=\"xs\" color=\"black60\">\n                {option.subtitle}\n              </Text>\n            )}\n          </Box>\n        )\n      }}\n    />\n  )\n}\n"],"file":"AutocompleteInput.story.js"}

package/dist/elements/Button/Button.story.js

@@ -13,7 +13,7 @@ var _storybookStates = require("storybook-states");
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _ = require("../..");
+var _BellIcon = require("../../svgs/BellIcon");
 
 var _Box = require("../Box");
 
@@ -225,7 +225,7 @@ var WithIcon = function WithIcon() {
   }, /*#__PURE__*/_react.default.createElement(_index.Button, {
     variant: "secondaryOutline",
     size: "small"
-  }, /*#__PURE__*/_react.default.createElement(_.BellIcon, {
+  }, /*#__PURE__*/_react.default.createElement(_BellIcon.BellIcon, {
     fill: "currentColor",
     mr: 0.5
   }), "Create an Alert"));

package/dist/elements/Button/Button.story.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Button/Button.story.tsx"],"names":["title","_States","focus","hover","loading","disabled","story","name","Sizes","BUTTON_SIZE_NAMES","map","size","_Demo","Flex","displayName","Variants","BUTTON_VARIANT_NAMES","variant","props","NativeButtonProps","autoFocus","children","tabIndex","onClick","event","preventDefault","WithBoxProps","Loading","setLoading","handleClick","setTimeout","As","as","WithIcon"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;;;;;;;;;;;;;eAEe;AAAEA,EAAAA,KAAK,EAAE;AAAT,C;;;AAER,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAEC,MAAAA,KAAK,EAAE;AAAT,KAFM,EAGN;AAAEC,MAAAA,KAAK,EAAE;AAAT,KAHM,EAIN;AAAEC,MAAAA,OAAO,EAAE;AAAX,KAJM,EAKN;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KALM,EAMN;AAAED,MAAAA,OAAO,EAAE,IAAX;AAAiBC,MAAAA,QAAQ,EAAE;AAA3B,KANM;AADV,kBAUE,6BAAC,aAAD,gBAVF,CADF;AAcD,CAfM;;;AAAMJ,O;AAiBbA,OAAO,CAACK,KAAR,GAAgB;AACdC,EAAAA,IAAI,EAAE;AADQ,CAAhB;;AAIO,IAAMC,KAAK,GAAG,SAARA,KAAQ,GAAM;AACzB,sBACE,6BAAC,uBAAD;AAAqB,IAAA,MAAM,EAAEC,yBAAkBC,GAAlB,CAAsB,UAACC,IAAD;AAAA,aAAW;AAAEA,QAAAA,IAAI,EAAJA;AAAF,OAAX;AAAA,KAAtB;AAA7B,kBACE,6BAAC,aAAD,gBADF,CADF;AAKD,CANM;;;AAAMH,K;;AAQb,IAAMI,KAAK,GAAG,+BAAOC,UAAP,CAAH;AAAA;AAAA;AAAA,QAAX;;AACAD,KAAK,CAACE,WAAN,GAAoB,QAApB;;AAEO,IAAMC,QAAQ,GAAG,SAAXA,QAAW,GAAM;AAC5B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAEC,4BAAqBN,GAArB,CAAyB,UAACO,OAAD;AAAA,aAAc;AAAEA,QAAAA,OAAO,EAAPA;AAAF,OAAd;AAAA,KAAzB;AADV,KAGG,UAACC,KAAD;AAAA,wBACC,6BAAC,KAAD,qBACE,6BAAC,aAAD,EAAYA,KAAZ,UADF,eAGE,6BAAC,cAAD;AAAQ,MAAA,EAAE,EAAE;AAAZ,MAHF,eAKE,6BAAC,aAAD,eAAYA,KAAZ;AAAmB,MAAA,KAAK;AAAxB,gBALF,eASE,6BAAC,cAAD;AAAQ,MAAA,EAAE,EAAE;AAAZ,MATF,eAWE,6BAAC,aAAD,eAAYA,KAAZ;AAAmB,MAAA,KAAK;AAAxB,gBAXF,eAeE,6BAAC,cAAD;AAAQ,MAAA,EAAE,EAAE;AAAZ,MAfF,eAiBE,6BAAC,aAAD,eAAYA,KAAZ;AAAmB,MAAA,OAAO;AAA1B,gBAjBF,eAqBE,6BAAC,cAAD;AAAQ,MAAA,EAAE,EAAE;AAAZ,MArBF,eAuBE,6BAAC,aAAD,eAAYA,KAAZ;AAAmB,MAAA,QAAQ;AAA3B,gBAvBF,CADD;AAAA,GAHH,CADF;AAmCD,CApCM;;;AAAMH,Q;;AAsCN,IAAMI,iBAAiB,GAAG,SAApBA,iBAAoB,GAAM;AACrC,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN;AAAEC,MAAAA,SAAS,EAAE,IAAb;AAAmBC,MAAAA,QAAQ,EAAE;AAA7B,KADM,EAEN;AAAEC,MAAAA,QAAQ,EAAE,CAAC,CAAb;AAAgBD,MAAAA,QAAQ,EAAE;AAA1B,KAFM,EAGN;AACEE,MAAAA,OAAO,EAAE,iBAACC,KAAD,EAAW;AAClBA,QAAAA,KAAK,CAACC,cAAN;AACD,OAHH;AAIEJ,MAAAA,QAAQ,EAAE;AAJZ,KAHM;AADV,kBAYE,6BAAC,aAAD,gBAZF,CADF;AAgBD,CAjBM;;;AAAMF,iB;AAmBbA,iBAAiB,CAACb,KAAlB,GAA0B;AACxBC,EAAAA,IAAI,EAAE;AADkB,CAA1B;;AAIO,IAAMmB,YAAY,GAAG,SAAfA,YAAe,GAAM;AAChC,sBACE,6BAAC,uBAAD,qBACE,6BAAC,QAAD;AAAK,IAAA,MAAM,EAAC,YAAZ;AAAyB,IAAA,WAAW,EAAC;AAArC,kBACE,6BAAC,aAAD;AAAQ,IAAA,OAAO,EAAC,OAAhB;AAAwB,IAAA,KAAK,EAAC,MAA9B;AAAqC,IAAA,EAAE,EAAE;AAAzC,kBADF,eAKE,6BAAC,aAAD;AAAQ,IAAA,OAAO,EAAC,OAAhB;AAAwB,IAAA,KAAK,EAAC,MAA9B;AAAqC,IAAA,EAAE,EAAE;AAAzC,uBALF,eASE,6BAAC,aAAD;AAAQ,IAAA,OAAO,EAAC,OAAhB;AAAwB,IAAA,KAAK,EAAC,MAA9B;AAAqC,IAAA,EAAE,EAAE;AAAzC,eATF,CADF,CADF;AAiBD,CAlBM;;;AAAMA,Y;AAoBbA,YAAY,CAACpB,KAAb,GAAqB;AACnBC,EAAAA,IAAI,EAAE;AADa,CAArB;;AAIO,IAAMoB,OAAO,GAAG,SAAVA,OAAU,GAAM;AAAA,kBACG,qBAAS,KAAT,CADH;AAAA;AAAA,MACpBvB,OADoB;AAAA,MACXwB,UADW;;AAG3B,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIzB,OAAJ,EAAa;AACbwB,IAAAA,UAAU,CAAC,IAAD,CAAV;AACAE,IAAAA,UAAU,CAAC,YAAM;AACfF,MAAAA,UAAU,CAAC,KAAD,CAAV;AACD,KAFS,EAEP,IAFO,CAAV;AAGD,GAND;;AAOA,sBACE,6BAAC,uBAAD,qBACE,6BAAC,aAAD;AAAQ,IAAA,OAAO,EAAExB,OAAjB;AAA0B,IAAA,OAAO,EAAEyB;AAAnC,qBADF,CADF;AAOD,CAjBM;;;AAAMF,O;;AAmBN,IAAMI,EAAE,GAAG,SAALA,EAAK,GAAM;AACtB,sBACE,6BAAC,uBAAD;AAAQ,IAAA,MAAM,EAAE,CAAC,EAAD,EAAK;AAAEC,MAAAA,EAAE,EAAE,KAAN;AAAaX,MAAAA,QAAQ,EAAE;AAAvB,KAAL;AAAhB,kBAEE,6BAAC,aAAD;AAAQ,IAAA,EAAE,EAAC,GAAX;AAAe,IAAA,IAAI,EAAC;AAApB,0CAFF,CADF;AAQD,CATM;;;AAAMU,E;;AAWN,IAAME,QAAQ,GAAG,SAAXA,QAAW,GAAM;AAC5B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAE/B,MAAAA,KAAK,EAAE;AAAT,KAFM,EAGN;AAAEC,MAAAA,KAAK,EAAE;AAAT,KAHM,EAIN;AAAEC,MAAAA,OAAO,EAAE;AAAX,KAJM,EAKN;AAAEC,MAAAA,QAAQ,EAAE;AAAZ,KALM,EAMN;AAAED,MAAAA,OAAO,EAAE,IAAX;AAAiBC,MAAAA,QAAQ,EAAE;AAA3B,KANM;AADV,kBAUE,6BAAC,aAAD;AAAQ,IAAA,OAAO,EAAC,kBAAhB;AAAmC,IAAA,IAAI,EAAC;AAAxC,kBACE,6BAAC,UAAD;AAAU,IAAA,IAAI,EAAC,cAAf;AAA8B,IAAA,EAAE,EAAE;AAAlC,IADF,oBAVF,CADF;AAiBD,CAlBM;;;AAAM4B,Q","sourcesContent":["import React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport styled from \"styled-components\"\nimport { BellIcon } from \"../..\"\nimport { Box } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { ButtonProps } from \"./Button\"\nimport { Button, BUTTON_SIZE_NAMES, BUTTON_VARIANT_NAMES } from \"./index\"\n\nexport default { title: \"Components/Button\" }\n\nexport const _States = () => {\n  return (\n    <States<ButtonProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { loading: true },\n        { disabled: true },\n        { loading: true, disabled: true },\n      ]}\n    >\n      <Button>Label</Button>\n    </States>\n  )\n}\n\n_States.story = {\n  name: \"States\",\n}\n\nexport const Sizes = () => {\n  return (\n    <States<ButtonProps> states={BUTTON_SIZE_NAMES.map((size) => ({ size }))}>\n      <Button>Label</Button>\n    </States>\n  )\n}\n\nconst _Demo = styled(Flex)``\n_Demo.displayName = \"Button\"\n\nexport const Variants = () => {\n  return (\n    <States<ButtonProps>\n      states={BUTTON_VARIANT_NAMES.map((variant) => ({ variant }))}\n    >\n      {(props) => (\n        <_Demo>\n          <Button {...props}>Label</Button>\n\n          <Spacer mx={0.5} />\n\n          <Button {...props} focus>\n            Label\n          </Button>\n\n          <Spacer mx={0.5} />\n\n          <Button {...props} hover>\n            Label\n          </Button>\n\n          <Spacer mx={0.5} />\n\n          <Button {...props} loading>\n            Label\n          </Button>\n\n          <Spacer mx={0.5} />\n\n          <Button {...props} disabled>\n            Label\n          </Button>\n        </_Demo>\n      )}\n    </States>\n  )\n}\n\nexport const NativeButtonProps = () => {\n  return (\n    <States<ButtonProps>\n      states={[\n        { autoFocus: true, children: \"autofocused\" },\n        { tabIndex: -1, children: \"not focusable with keyboard\" },\n        {\n          onClick: (event) => {\n            event.preventDefault()\n          },\n          children: \"correctly typed click event\",\n        },\n      ]}\n    >\n      <Button>Label</Button>\n    </States>\n  )\n}\n\nNativeButtonProps.story = {\n  name: \"Native button tag props\",\n}\n\nexport const WithBoxProps = () => {\n  return (\n    <States>\n      <Box border=\"1px dotted\" borderColor=\"black100\">\n        <Button display=\"block\" width=\"100%\" my={2}>\n          full width\n        </Button>\n\n        <Button display=\"block\" width=\"100%\" my={2}>\n          with collapsing\n        </Button>\n\n        <Button display=\"block\" width=\"100%\" my={2}>\n          margins\n        </Button>\n      </Box>\n    </States>\n  )\n}\n\nWithBoxProps.story = {\n  name: \"with BoxProps\",\n}\n\nexport const Loading = () => {\n  const [loading, setLoading] = useState(false)\n\n  const handleClick = () => {\n    if (loading) return\n    setLoading(true)\n    setTimeout(() => {\n      setLoading(false)\n    }, 1000)\n  }\n  return (\n    <States>\n      <Button loading={loading} onClick={handleClick}>\n        click to load\n      </Button>\n    </States>\n  )\n}\n\nexport const As = () => {\n  return (\n    <States states={[{}, { as: \"div\", children: \"This is a div\" }]}>\n      {/* @ts-ignore */}\n      <Button as=\"a\" href=\"#example\">\n        This is an anchor tag with an href\n      </Button>\n    </States>\n  )\n}\n\nexport const WithIcon = () => {\n  return (\n    <States<ButtonProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { loading: true },\n        { disabled: true },\n        { loading: true, disabled: true },\n      ]}\n    >\n      <Button variant=\"secondaryOutline\" size=\"small\">\n        <BellIcon fill=\"currentColor\" mr={0.5} />\n        Create an Alert\n      </Button>\n    </States>\n  )\n}\n"],"file":"Button.story.js"}
+{"version":3,"sources":["../../../src/elements/Button/Button.story.tsx"],"names":["title","_States","focus","hover","loading","disabled","story","name","Sizes","BUTTON_SIZE_NAMES","map","size","_Demo","Flex","displayName","Variants","BUTTON_VARIANT_NAMES","variant","props","NativeButtonProps","autoFocus","children","tabIndex","onClick","event","preventDefault","WithBoxProps","Loading","setLoading","handleClick","setTimeout","As","as","WithIcon"],"mappings":"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","sourcesContent":["import React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport styled from \"styled-components\"\nimport { BellIcon } from \"../../svgs/BellIcon\"\nimport { Box } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { ButtonProps } from \"./Button\"\nimport { Button, BUTTON_SIZE_NAMES, BUTTON_VARIANT_NAMES } from \"./index\"\n\nexport default { title: \"Components/Button\" }\n\nexport const _States = () => {\n  return (\n    <States<ButtonProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { loading: true },\n        { disabled: true },\n        { loading: true, disabled: true },\n      ]}\n    >\n      <Button>Label</Button>\n    </States>\n  )\n}\n\n_States.story = {\n  name: \"States\",\n}\n\nexport const Sizes = () => {\n  return (\n    <States<ButtonProps> states={BUTTON_SIZE_NAMES.map((size) => ({ size }))}>\n      <Button>Label</Button>\n    </States>\n  )\n}\n\nconst _Demo = styled(Flex)``\n_Demo.displayName = \"Button\"\n\nexport const Variants = () => {\n  return (\n    <States<ButtonProps>\n      states={BUTTON_VARIANT_NAMES.map((variant) => ({ variant }))}\n    >\n      {(props) => (\n        <_Demo>\n          <Button {...props}>Label</Button>\n\n          <Spacer mx={0.5} />\n\n          <Button {...props} focus>\n            Label\n          </Button>\n\n          <Spacer mx={0.5} />\n\n          <Button {...props} hover>\n            Label\n          </Button>\n\n          <Spacer mx={0.5} />\n\n          <Button {...props} loading>\n            Label\n          </Button>\n\n          <Spacer mx={0.5} />\n\n          <Button {...props} disabled>\n            Label\n          </Button>\n        </_Demo>\n      )}\n    </States>\n  )\n}\n\nexport const NativeButtonProps = () => {\n  return (\n    <States<ButtonProps>\n      states={[\n        { autoFocus: true, children: \"autofocused\" },\n        { tabIndex: -1, children: \"not focusable with keyboard\" },\n        {\n          onClick: (event) => {\n            event.preventDefault()\n          },\n          children: \"correctly typed click event\",\n        },\n      ]}\n    >\n      <Button>Label</Button>\n    </States>\n  )\n}\n\nNativeButtonProps.story = {\n  name: \"Native button tag props\",\n}\n\nexport const WithBoxProps = () => {\n  return (\n    <States>\n      <Box border=\"1px dotted\" borderColor=\"black100\">\n        <Button display=\"block\" width=\"100%\" my={2}>\n          full width\n        </Button>\n\n        <Button display=\"block\" width=\"100%\" my={2}>\n          with collapsing\n        </Button>\n\n        <Button display=\"block\" width=\"100%\" my={2}>\n          margins\n        </Button>\n      </Box>\n    </States>\n  )\n}\n\nWithBoxProps.story = {\n  name: \"with BoxProps\",\n}\n\nexport const Loading = () => {\n  const [loading, setLoading] = useState(false)\n\n  const handleClick = () => {\n    if (loading) return\n    setLoading(true)\n    setTimeout(() => {\n      setLoading(false)\n    }, 1000)\n  }\n  return (\n    <States>\n      <Button loading={loading} onClick={handleClick}>\n        click to load\n      </Button>\n    </States>\n  )\n}\n\nexport const As = () => {\n  return (\n    <States states={[{}, { as: \"div\", children: \"This is a div\" }]}>\n      {/* @ts-ignore */}\n      <Button as=\"a\" href=\"#example\">\n        This is an anchor tag with an href\n      </Button>\n    </States>\n  )\n}\n\nexport const WithIcon = () => {\n  return (\n    <States<ButtonProps>\n      states={[\n        {},\n        { focus: true },\n        { hover: true },\n        { loading: true },\n        { disabled: true },\n        { loading: true, disabled: true },\n      ]}\n    >\n      <Button variant=\"secondaryOutline\" size=\"small\">\n        <BellIcon fill=\"currentColor\" mr={0.5} />\n        Create an Alert\n      </Button>\n    </States>\n  )\n}\n"],"file":"Button.story.js"}

package/dist/elements/Button/index.d.ts

@@ -1,2 +1,4 @@
 export * from "./Button";
 export * from "./types";
+export { buttonMixin } from "./v3/Button";
+export * from "./v3/tokens";

package/dist/elements/Button/index.js

@@ -3,11 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  buttonMixin: true
+};
+Object.defineProperty(exports, "buttonMixin", {
+  enumerable: true,
+  get: function get() {
+    return _Button2.buttonMixin;
+  }
+});
 
 var _Button = require("./Button");
 
 Object.keys(_Button).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _Button[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -21,6 +31,7 @@ var _types = require("./types");
 
 Object.keys(_types).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _types[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -29,4 +40,20 @@ Object.keys(_types).forEach(function (key) {
     }
   });
 });
+
+var _Button2 = require("./v3/Button");
+
+var _tokens = require("./v3/tokens");
+
+Object.keys(_tokens).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _tokens[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _tokens[key];
+    }
+  });
+});
 //# sourceMappingURL=index.js.map

package/dist/elements/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Button/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./Button\"\nexport * from \"./types\"\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/elements/Button/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./Button\"\nexport * from \"./types\"\nexport { buttonMixin } from \"./v3/Button\"\nexport * from \"./v3/tokens\"\n"],"file":"index.js"}

package/dist/elements/Button/v3/Button.d.ts

@@ -3,3 +3,4 @@ import { ButtonProps } from "../Button";
 export declare const ButtonV3: React.ForwardRefExoticComponent<ButtonProps & {
     ref?: React.Ref<HTMLElement>;
 }>;
+export declare const buttonMixin: import("styled-components").InterpolationValue[];

package/dist/elements/Button/v3/Button.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ButtonV3 = void 0;
+exports.buttonMixin = exports.ButtonV3 = void 0;
 
 var _composeReactRefs = _interopRequireDefault(require("@seznam/compose-react-refs"));
 
@@ -40,10 +40,9 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var ButtonV3 = /*#__PURE__*/_react.default.forwardRef(function (_ref, forwardedRef) {
   var children = _ref.children,
       loading = _ref.loading,
-      color = _ref.color,
       size = _ref.size,
       onClick = _ref.onClick,
-      rest = _objectWithoutProperties(_ref, ["children", "loading", "color", "size", "onClick"]);
+      rest = _objectWithoutProperties(_ref, ["children", "loading", "size", "onClick"]);
 
   var ref = (0, _react.useRef)(null);
 
@@ -55,7 +54,9 @@ var ButtonV3 = /*#__PURE__*/_react.default.forwardRef(function (_ref, forwardedR
 
   (0, _react.useEffect)(function () {
     if (loading && ref.current !== null) {
-      ref.current.blur();
+      var _ref$current;
+
+      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.blur();
     }
   }, [loading]);
   return /*#__PURE__*/_react.default.createElement(Container, _extends({
@@ -83,11 +84,13 @@ ButtonV3.defaultProps = {
   size: "medium",
   variant: "primaryBlack"
 };
+var buttonMixin = (0, _styledComponents.css)(["display:inline-flex;cursor:pointer;position:relative;white-space:nowrap;font-weight:normal;text-decoration:none;align-items:center;text-align:center;justify-content:center;border:1px solid;transition:color 0.25s ease,border-color 0.25s ease,background-color 0.25s ease,box-shadow 0.25s ease;"]);
+exports.buttonMixin = buttonMixin;
 
 var Container = _styledComponents.default.button.withConfig({
   displayName: "Button__Container",
   componentId: "sc-1ckr5i3-0"
-})(["display:inline-flex;cursor:pointer;position:relative;white-space:nowrap;font-weight:normal;text-decoration:none;align-items:center;text-align:center;justify-content:center;border:1px solid;transition:color 0.25s ease,border-color 0.25s ease,background-color 0.25s ease,box-shadow 0.25s ease;", ";", " ", " ", ";"], _Box.boxMixin, (0, _styledSystem.variant)({
+})(["", " ", ";", " ", " ", ";"], buttonMixin, _Box.boxMixin, (0, _styledSystem.variant)({
   prop: "size",
   variants: _tokens.BUTTON_SIZES
 }), function (props) {

package/dist/elements/Button/v3/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/Button/v3/Button.tsx"],"names":["ButtonV3","React","forwardRef","forwardedRef","children","loading","color","size","onClick","rest","ref","handleClick","event","current","blur","BUTTON_TEXT_SIZES","displayName","defaultProps","variant","Container","styled","button","boxMixin","prop","variants","BUTTON_SIZES","props","hover","BUTTON_VARIANTS","focus","css","disabled","default","THEME_V3","mediaQueries"],"mappings":"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","sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport React, { useEffect, useRef } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { THEME_V3 } from \"../../../themes\"\nimport { boxMixin } from \"../../Box\"\nimport { Spinner } from \"../../Spinner\"\nimport { Text } from \"../../Text\"\nimport { ButtonProps } from \"../Button\"\nimport { BUTTON_SIZES, BUTTON_TEXT_SIZES, BUTTON_VARIANTS } from \"./tokens\"\n\nexport const ButtonV3: React.ForwardRefExoticComponent<\n  ButtonProps & { ref?: React.Ref<HTMLElement> }\n> = React.forwardRef(\n  ({ children, loading, color, size, onClick, ...rest }, forwardedRef) => {\n    const ref = useRef<HTMLButtonElement | null>(null)\n\n    const handleClick = (\n      event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n    ) => {\n      if (!loading && onClick) {\n        onClick(event)\n      }\n    }\n\n    useEffect(() => {\n      if (loading && ref.current !== null) {\n        ref.current!.blur()\n      }\n    }, [loading])\n\n    return (\n      <Container\n        ref={composeRefs(ref, forwardedRef) as any}\n        onClick={handleClick}\n        size={size}\n        loading={loading}\n        tabIndex={loading ? -1 : 0}\n        {...rest}\n      >\n        {loading && <Spinner size={size} color=\"currentColor\" />}\n\n        <Text\n          lineHeight={1}\n          variant={BUTTON_TEXT_SIZES[size!]}\n          opacity={loading ? 0 : 1}\n          display=\"flex\"\n          alignItems=\"center\"\n          justifyContent=\"center\"\n        >\n          {children}\n        </Text>\n      </Container>\n    )\n  }\n)\n\nButtonV3.displayName = \"Button\"\n\nButtonV3.defaultProps = {\n  size: \"medium\",\n  variant: \"primaryBlack\",\n}\n\ntype ContainerProps = Pick<\n  ButtonProps,\n  \"size\" | \"inline\" | \"loading\" | \"hover\" | \"focus\" | \"disabled\"\n>\n\nconst Container = styled.button<ContainerProps>`\n  display: inline-flex;\n  cursor: pointer;\n  position: relative;\n  white-space: nowrap;\n  font-weight: normal;\n  text-decoration: none;\n  align-items: center;\n  text-align: center;\n  justify-content: center;\n  border: 1px solid;\n  transition: color 0.25s ease, border-color 0.25s ease,\n    background-color 0.25s ease, box-shadow 0.25s ease;\n\n  ${boxMixin};\n\n  /* Handle sizing */\n  ${variant({ prop: \"size\", variants: BUTTON_SIZES })}\n\n  ${(props) => {\n    // Handle props driven states\n    if (props.hover) {\n      return variant({ variants: BUTTON_VARIANTS.hover })\n    }\n\n    if (props.focus) {\n      return css`\n        outline: 0;\n        ${variant({ variants: BUTTON_VARIANTS.focus })}\n      `\n    }\n\n    if (props.loading) {\n      return css`\n        cursor: auto;\n        transition: none;\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.loading })}\n      `\n    }\n\n    if (props.disabled) {\n      return css`\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      `\n    }\n\n    return variant({ variants: BUTTON_VARIANTS.default })\n  }}\n\n  ${() => {\n    // Handle pseudo classes\n    return css`\n      @media ${THEME_V3.mediaQueries.hover} {\n        &:hover {\n          ${variant({ variants: BUTTON_VARIANTS.hover })}\n        }\n      }\n\n      &:focus {\n        outline: 0;\n        ${variant({ variants: BUTTON_VARIANTS.focus })}\n      }\n\n      &:disabled {\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      }\n    `\n  }};\n`\n"],"file":"Button.js"}
+{"version":3,"sources":["../../../../src/elements/Button/v3/Button.tsx"],"names":["ButtonV3","React","forwardRef","forwardedRef","children","loading","size","onClick","rest","ref","handleClick","event","current","blur","BUTTON_TEXT_SIZES","displayName","defaultProps","variant","buttonMixin","css","Container","styled","button","boxMixin","prop","variants","BUTTON_SIZES","props","hover","BUTTON_VARIANTS","focus","disabled","default","THEME_V3","mediaQueries"],"mappings":"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","sourcesContent":["import composeRefs from \"@seznam/compose-react-refs\"\nimport React, { useEffect, useRef } from \"react\"\nimport styled, { css } from \"styled-components\"\nimport { variant } from \"styled-system\"\nimport { THEME_V3 } from \"../../../themes\"\nimport { boxMixin } from \"../../Box\"\nimport { Spinner } from \"../../Spinner\"\nimport { Text } from \"../../Text\"\nimport { ButtonProps } from \"../Button\"\nimport { BUTTON_SIZES, BUTTON_TEXT_SIZES, BUTTON_VARIANTS } from \"./tokens\"\n\nexport const ButtonV3: React.ForwardRefExoticComponent<\n  ButtonProps & { ref?: React.Ref<HTMLElement> }\n> = React.forwardRef(\n  ({ children, loading, size, onClick, ...rest }, forwardedRef) => {\n    const ref = useRef<HTMLButtonElement | null>(null)\n\n    const handleClick = (\n      event: React.MouseEvent<HTMLButtonElement, MouseEvent>\n    ) => {\n      if (!loading && onClick) {\n        onClick(event)\n      }\n    }\n\n    useEffect(() => {\n      if (loading && ref.current !== null) {\n        ref.current?.blur()\n      }\n    }, [loading])\n\n    return (\n      <Container\n        ref={composeRefs(ref, forwardedRef) as any}\n        onClick={handleClick}\n        size={size}\n        loading={loading}\n        tabIndex={loading ? -1 : 0}\n        {...rest}\n      >\n        {loading && <Spinner size={size} color=\"currentColor\" />}\n\n        <Text\n          lineHeight={1}\n          variant={BUTTON_TEXT_SIZES[size!]}\n          opacity={loading ? 0 : 1}\n          display=\"flex\"\n          alignItems=\"center\"\n          justifyContent=\"center\"\n        >\n          {children}\n        </Text>\n      </Container>\n    )\n  }\n)\n\nButtonV3.displayName = \"Button\"\n\nButtonV3.defaultProps = {\n  size: \"medium\",\n  variant: \"primaryBlack\",\n}\n\ntype ContainerProps = Pick<\n  ButtonProps,\n  \"size\" | \"inline\" | \"loading\" | \"hover\" | \"focus\" | \"disabled\"\n>\n\nexport const buttonMixin = css`\n  display: inline-flex;\n  cursor: pointer;\n  position: relative;\n  white-space: nowrap;\n  font-weight: normal;\n  text-decoration: none;\n  align-items: center;\n  text-align: center;\n  justify-content: center;\n  border: 1px solid;\n  transition: color 0.25s ease, border-color 0.25s ease,\n    background-color 0.25s ease, box-shadow 0.25s ease;\n`\n\nconst Container = styled.button<ContainerProps>`\n  ${buttonMixin}\n  ${boxMixin};\n\n  /* Handle sizing */\n  ${variant({ prop: \"size\", variants: BUTTON_SIZES })}\n\n  ${(props) => {\n    // Handle props driven states\n    if (props.hover) {\n      return variant({ variants: BUTTON_VARIANTS.hover })\n    }\n\n    if (props.focus) {\n      return css`\n        outline: 0;\n        ${variant({ variants: BUTTON_VARIANTS.focus })}\n      `\n    }\n\n    if (props.loading) {\n      return css`\n        cursor: auto;\n        transition: none;\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.loading })}\n      `\n    }\n\n    if (props.disabled) {\n      return css`\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      `\n    }\n\n    return variant({ variants: BUTTON_VARIANTS.default })\n  }}\n\n  ${() => {\n    // Handle pseudo classes\n    return css`\n      @media ${THEME_V3.mediaQueries.hover} {\n        &:hover {\n          ${variant({ variants: BUTTON_VARIANTS.hover })}\n        }\n      }\n\n      &:focus {\n        outline: 0;\n        ${variant({ variants: BUTTON_VARIANTS.focus })}\n      }\n\n      &:disabled {\n        pointer-events: none;\n        ${variant({ variants: BUTTON_VARIANTS.disabled })}\n      }\n    `\n  }};\n`\n"],"file":"Button.js"}

package/dist/svgs/_icons.story.js

@@ -51,9 +51,9 @@ var _AllIcons = function _AllIcons() {
         iconName = _ref2[0],
         IconComponent = _ref2[1];
 
-    var blacklist = ["ChevronIcon", "CreditCardIcon", "Icon"];
+    var blocklist = ["ChevronIcon", "CreditCardIcon", "Icon"];
 
-    if (!(typeof IconComponent === "function") || blacklist.some(function (icon) {
+    if (!(typeof IconComponent === "function") || blocklist.some(function (icon) {
       return icon === iconName;
     })) {
       return null;

package/dist/svgs/_icons.story.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/svgs/_icons.story.tsx"],"names":["title","_AllIcons","Object","entries","AllIcons","map","index","iconName","IconComponent","blacklist","some","icon","size","story","name"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,SAAS,GAAG,SAAZA,SAAY,GAAM;AAC7B,sBACE,6BAAC,UAAD;AAAM,IAAA,QAAQ,EAAC,MAAf;AAAsB,IAAA,CAAC,EAAE;AAAzB,KACGC,MAAM,CAACC,OAAP,CAAeC,QAAf,EAAyBC,GAAzB,CAA6B,gBAA4BC,KAA5B,EAAsC;AAAA;AAAA,QAApCC,QAAoC;AAAA,QAA1BC,aAA0B;;AAClE,QAAMC,SAAS,GAAG,CAAC,aAAD,EAAgB,gBAAhB,EAAkC,MAAlC,CAAlB;;AACA,QACE,EAAE,OAAOD,aAAP,KAAyB,UAA3B,KACAC,SAAS,CAACC,IAAV,CAAe,UAACC,IAAD;AAAA,aAAUA,IAAI,KAAKJ,QAAnB;AAAA,KAAf,CAFF,EAGE;AACA,aAAO,IAAP;AACD;;AACD,QAAMK,IAAI,GAAG,MAAb;AACA,wBACE,6BAAC,QAAD;AAAK,MAAA,EAAE,EAAE,CAAT;AAAY,MAAA,EAAE,EAAE,CAAhB;AAAmB,MAAA,EAAE,EAAE,CAAvB;AAA0B,MAAA,GAAG,EAAEN,KAA/B;AAAsC,MAAA,KAAK,EAAC;AAA5C,oBACE,6BAAC,aAAD;AAAe,MAAA,KAAK,EAAEM,IAAtB;AAA4B,MAAA,MAAM,EAAEA;AAApC,MADF,eAEE,6BAAC,oBAAD;AAAW,MAAA,EAAE,EAAE;AAAf,MAFF,eAGE,6BAAC,gBAAD;AAAM,MAAA,IAAI,EAAC,GAAX;AAAe,MAAA,MAAM,EAAC;AAAtB,OACGL,QADH,CAHF,CADF;AASD,GAlBA,CADH,CADF;AAuBD,CAxBM;;;AAAMN,S;AA0BbA,SAAS,CAACY,KAAV,GAAkB;AAChBC,EAAAA,IAAI,EAAE;AADU,CAAlB","sourcesContent":["import React from \"react\"\nimport { Box } from \"../elements/Box/Box\"\nimport { Flex } from \"../elements/Flex/Flex\"\nimport { Separator } from \"../elements/Separator/Separator\"\nimport { Sans } from \"../elements/Typography\"\nimport * as AllIcons from \"./index\"\n\nexport default {\n  title: \"Icons\",\n}\n\nexport const _AllIcons = () => {\n  return (\n    <Flex flexWrap=\"wrap\" m={2}>\n      {Object.entries(AllIcons).map(([iconName, IconComponent], index) => {\n        const blacklist = [\"ChevronIcon\", \"CreditCardIcon\", \"Icon\"]\n        if (\n          !(typeof IconComponent === \"function\") ||\n          blacklist.some((icon) => icon === iconName)\n        ) {\n          return null\n        }\n        const size = \"40px\"\n        return (\n          <Box pr={4} pb={2} mb={4} key={index} width=\"20%\">\n            <IconComponent width={size} height={size} />\n            <Separator my={1} />\n            <Sans size=\"3\" weight=\"medium\">\n              {iconName}\n            </Sans>\n          </Box>\n        )\n      })}\n    </Flex>\n  )\n}\n\n_AllIcons.story = {\n  name: \"all icons\",\n}\n"],"file":"_icons.story.js"}
+{"version":3,"sources":["../../src/svgs/_icons.story.tsx"],"names":["title","_AllIcons","Object","entries","AllIcons","map","index","iconName","IconComponent","blocklist","some","icon","size","story","name"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,SAAS,GAAG,SAAZA,SAAY,GAAM;AAC7B,sBACE,6BAAC,UAAD;AAAM,IAAA,QAAQ,EAAC,MAAf;AAAsB,IAAA,CAAC,EAAE;AAAzB,KACGC,MAAM,CAACC,OAAP,CAAeC,QAAf,EAAyBC,GAAzB,CAA6B,gBAA4BC,KAA5B,EAAsC;AAAA;AAAA,QAApCC,QAAoC;AAAA,QAA1BC,aAA0B;;AAClE,QAAMC,SAAS,GAAG,CAAC,aAAD,EAAgB,gBAAhB,EAAkC,MAAlC,CAAlB;;AACA,QACE,EAAE,OAAOD,aAAP,KAAyB,UAA3B,KACAC,SAAS,CAACC,IAAV,CAAe,UAACC,IAAD;AAAA,aAAUA,IAAI,KAAKJ,QAAnB;AAAA,KAAf,CAFF,EAGE;AACA,aAAO,IAAP;AACD;;AACD,QAAMK,IAAI,GAAG,MAAb;AACA,wBACE,6BAAC,QAAD;AAAK,MAAA,EAAE,EAAE,CAAT;AAAY,MAAA,EAAE,EAAE,CAAhB;AAAmB,MAAA,EAAE,EAAE,CAAvB;AAA0B,MAAA,GAAG,EAAEN,KAA/B;AAAsC,MAAA,KAAK,EAAC;AAA5C,oBACE,6BAAC,aAAD;AAAe,MAAA,KAAK,EAAEM,IAAtB;AAA4B,MAAA,MAAM,EAAEA;AAApC,MADF,eAEE,6BAAC,oBAAD;AAAW,MAAA,EAAE,EAAE;AAAf,MAFF,eAGE,6BAAC,gBAAD;AAAM,MAAA,IAAI,EAAC,GAAX;AAAe,MAAA,MAAM,EAAC;AAAtB,OACGL,QADH,CAHF,CADF;AASD,GAlBA,CADH,CADF;AAuBD,CAxBM;;;AAAMN,S;AA0BbA,SAAS,CAACY,KAAV,GAAkB;AAChBC,EAAAA,IAAI,EAAE;AADU,CAAlB","sourcesContent":["import React from \"react\"\nimport { Box } from \"../elements/Box/Box\"\nimport { Flex } from \"../elements/Flex/Flex\"\nimport { Separator } from \"../elements/Separator/Separator\"\nimport { Sans } from \"../elements/Typography\"\nimport * as AllIcons from \"./index\"\n\nexport default {\n  title: \"Icons\",\n}\n\nexport const _AllIcons = () => {\n  return (\n    <Flex flexWrap=\"wrap\" m={2}>\n      {Object.entries(AllIcons).map(([iconName, IconComponent], index) => {\n        const blocklist = [\"ChevronIcon\", \"CreditCardIcon\", \"Icon\"]\n        if (\n          !(typeof IconComponent === \"function\") ||\n          blocklist.some((icon) => icon === iconName)\n        ) {\n          return null\n        }\n        const size = \"40px\"\n        return (\n          <Box pr={4} pb={2} mb={4} key={index} width=\"20%\">\n            <IconComponent width={size} height={size} />\n            <Separator my={1} />\n            <Sans size=\"3\" weight=\"medium\">\n              {iconName}\n            </Sans>\n          </Box>\n        )\n      })}\n    </Flex>\n  )\n}\n\n_AllIcons.story = {\n  name: \"all icons\",\n}\n"],"file":"_icons.story.js"}

package/dist/utils/useFocusLock.js

@@ -118,10 +118,11 @@ var useFocusLock = function useFocusLock(ref) {
       var index = focusableEls.findIndex(function (node) {
         return node === event.target;
       });
+      var focusableEl = focusableEls[focusableIndex];
 
-      if (index === -1) {
+      if (index === -1 && !!focusableEl) {
         event.stopImmediatePropagation();
-        focusableEls[focusableIndex].focus();
+        focusableEl.focus();
         return;
       }
     };

package/dist/utils/useFocusLock.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/useFocusLock.ts"],"names":["FOCUSABLE_SELECTOR","join","useFocusLock","ref","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","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]\",\n  \"area[href]\",\n  \"input:not([disabled])\",\n  \"select:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"button:not([disabled])\",\n  '[tabindex=\"0\"]',\n].join(\", \")\n\n/**\n * Locks focus within the given element\n */\nexport const useFocusLock = (\n  ref: React.MutableRefObject<HTMLElement | null>\n) => {\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    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\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      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  }, [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\n      if (index === -1) {\n        event.stopImmediatePropagation()\n        focusableEls[focusableIndex].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":["FOCUSABLE_SELECTOR","join","useFocusLock","ref","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]\",\n  \"area[href]\",\n  \"input:not([disabled])\",\n  \"select:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"button:not([disabled])\",\n  '[tabindex=\"0\"]',\n].join(\", \")\n\n/**\n * Locks focus within the given element\n */\nexport const useFocusLock = (\n  ref: React.MutableRefObject<HTMLElement | null>\n) => {\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    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\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      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  }, [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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@artsy/palette",
-  "version": "18.11.0",
+  "version": "18.12.2",
   "description": "Design system library for react components",
   "main": "dist/index.js",
   "publishConfig": {
@@ -109,7 +109,7 @@
     "storybook-states": "1.2.0",
     "styled-components": "4.3.2",
     "ts-node": "8.1.0",
-    "typescript": "4.5.2",
+    "typescript": "4.5.4",
     "typescript-styled-plugin": "0.10.0"
   },
   "dependencies": {
@@ -174,5 +174,5 @@
       "<rootDir>/www/"
     ]
   },
-  "gitHead": "21c3fa9a5b40f0cdec18ececfd229635f30ec9ea"
+  "gitHead": "ddbfe294266fc4cd7a77d2a15772ae188c14860a"
 }