@artsy/palette 18.7.3 → 18.9.0

package/CHANGELOG.md

@@ -1,3 +1,53 @@
+# v18.9.0 (Wed Dec 01 2021)
+
+#### 🚀  Enhancement
+
+- fix: modal background color [#1080](https://github.com/artsy/palette/pull/1080) ([@araujobarret](https://github.com/araujobarret))
+
+#### Authors: 1
+
+- Carlos Alberto de Araujo Barreto ([@araujobarret](https://github.com/araujobarret))
+
+---
+
+# v18.8.1 (Tue Nov 30 2021)
+
+#### 🐛  Bug Fix
+
+- fix(autocomplete): only closes when options are visible [#1079](https://github.com/artsy/palette/pull/1079) ([@dzucconi](https://github.com/dzucconi))
+- fix(autocomplete): only closes when options are visible ([@dzucconi](https://github.com/dzucconi))
+
+#### Authors: 1
+
+- Damon ([@dzucconi](https://github.com/dzucconi))
+
+---
+
+# v18.8.0 (Thu Nov 25 2021)
+
+#### 🚀  Enhancement
+
+- feat(NX02486): adjusts the modal to the new design [#1076](https://github.com/artsy/palette/pull/1076) ([@araujobarret](https://github.com/araujobarret))
+
+#### Authors: 1
+
+- Carlos Alberto de Araujo Barreto ([@araujobarret](https://github.com/araujobarret))
+
+---
+
+# v18.7.4 (Wed Nov 24 2021)
+
+#### 🐛  Bug Fix
+
+- fix(clickable): resets margin for safari [#1078](https://github.com/artsy/palette/pull/1078) ([@dzucconi](https://github.com/dzucconi))
+- fix(clickable): resets margin for safari ([@dzucconi](https://github.com/dzucconi))
+
+#### Authors: 1
+
+- Damon ([@dzucconi](https://github.com/dzucconi))
+
+---
+
 # v18.7.3 (Wed Nov 24 2021)
 
 #### 🐛  Bug Fix

package/dist/elements/AutocompleteInput/AutocompleteInput.js

@@ -264,14 +264,14 @@ var AutocompleteInput = function AutocompleteInput(_ref) {
     option === null || option === void 0 ? void 0 : (_option$ref = option.ref) === null || _option$ref === void 0 ? void 0 : (_option$ref$current = _option$ref.current) === null || _option$ref$current === void 0 ? void 0 : _option$ref$current.focus();
   }, [index, optionsWithRefs]);
   var handleFocusChange = (0, _react.useCallback)(function (focused) {
-    if (focused) return;
+    if (focused || !isDropdownVisible) return;
     dispatch({
       type: "CLOSE"
     });
     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
+  [onClose, isDropdownVisible]); // 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  // 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"}
+{"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"}

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

@@ -107,7 +107,8 @@ var Default = function Default() {
     placeholder: "Search",
     options: OPTIONS,
     onSelect: (0, _addonActions.action)("onSelect"),
-    onSubmit: (0, _addonActions.action)("onSubmit")
+    onSubmit: (0, _addonActions.action)("onSubmit"),
+    onClose: (0, _addonActions.action)("onClose")
   }));
 };
 

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      />\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","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"}

package/dist/elements/Clickable/Clickable.js

@@ -28,7 +28,7 @@ var textDecoration = (0, _styledSystem.system)({
 var Clickable = _styledComponents.default.button.withConfig({
   displayName: "Clickable",
   componentId: "sc-10cr82y-0"
-})(["appearance:none;padding:0;border:0;background-color:transparent;color:inherit;font:inherit;text-align:inherit;", " &:disabled{cursor:default;}"], (0, _styledSystem.compose)(_Box.boxMixin, cursor, textDecoration));
+})(["appearance:none;padding:0;border:0;margin:0;background-color:transparent;color:inherit;font:inherit;text-align:inherit;", " &:disabled{cursor:default;}"], (0, _styledSystem.compose)(_Box.boxMixin, cursor, textDecoration));
 
 exports.Clickable = Clickable;
 Clickable.defaultProps = {

package/dist/elements/Clickable/Clickable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Clickable/Clickable.tsx"],"names":["cursor","textDecoration","Clickable","styled","button","boxMixin","defaultProps","type"],"mappings":";;;;;;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,MAAM,GAAG,0BAAO;AAAEA,EAAAA,MAAM,EAAE;AAAV,CAAP,CAAf;AACA,IAAMC,cAAc,GAAG,0BAAO;AAAEA,EAAAA,cAAc,EAAE;AAAlB,CAAP,CAAvB;AAEA;;AAOA;AACA;AACA;AACA;AACO,IAAMC,SAAS,GAAGC,0BAAOC,MAAV;AAAA;AAAA;AAAA,uJASlB,2BAAQC,aAAR,EAAkBL,MAAlB,EAA0BC,cAA1B,CATkB,CAAf;;;AAgBPC,SAAS,CAACI,YAAV,GAAyB;AACvBN,EAAAA,MAAM,EAAE,SADe;AAEvBO,EAAAA,IAAI,EAAE;AAFiB,CAAzB","sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { compose, ResponsiveValue, system } from \"styled-system\"\nimport { boxMixin, BoxProps } from \"../Box\"\n\nconst cursor = system({ cursor: true })\nconst textDecoration = system({ textDecoration: true })\n\n/** ClickableProps */\nexport type ClickableProps = React.ButtonHTMLAttributes<HTMLButtonElement> &\n  BoxProps & {\n    cursor?: ResponsiveValue<string>\n    textDecoration?: ResponsiveValue<string>\n  }\n\n/**\n * Clickable is a utility component useful for wrapping things like <div>s\n * without having to deal with the requirements to make the <div> accessible.\n */\nexport const Clickable = styled.button<ClickableProps>`\n  appearance: none;\n  padding: 0;\n  border: 0;\n  background-color: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: inherit;\n\n  ${compose(boxMixin, cursor, textDecoration)}\n\n  &:disabled {\n    cursor: default;\n  }\n`\n\nClickable.defaultProps = {\n  cursor: \"pointer\",\n  type: \"button\",\n}\n"],"file":"Clickable.js"}
+{"version":3,"sources":["../../../src/elements/Clickable/Clickable.tsx"],"names":["cursor","textDecoration","Clickable","styled","button","boxMixin","defaultProps","type"],"mappings":";;;;;;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,MAAM,GAAG,0BAAO;AAAEA,EAAAA,MAAM,EAAE;AAAV,CAAP,CAAf;AACA,IAAMC,cAAc,GAAG,0BAAO;AAAEA,EAAAA,cAAc,EAAE;AAAlB,CAAP,CAAvB;AAEA;;AAOA;AACA;AACA;AACA;AACO,IAAMC,SAAS,GAAGC,0BAAOC,MAAV;AAAA;AAAA;AAAA,gKAUlB,2BAAQC,aAAR,EAAkBL,MAAlB,EAA0BC,cAA1B,CAVkB,CAAf;;;AAiBPC,SAAS,CAACI,YAAV,GAAyB;AACvBN,EAAAA,MAAM,EAAE,SADe;AAEvBO,EAAAA,IAAI,EAAE;AAFiB,CAAzB","sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport { compose, ResponsiveValue, system } from \"styled-system\"\nimport { boxMixin, BoxProps } from \"../Box\"\n\nconst cursor = system({ cursor: true })\nconst textDecoration = system({ textDecoration: true })\n\n/** ClickableProps */\nexport type ClickableProps = React.ButtonHTMLAttributes<HTMLButtonElement> &\n  BoxProps & {\n    cursor?: ResponsiveValue<string>\n    textDecoration?: ResponsiveValue<string>\n  }\n\n/**\n * Clickable is a utility component useful for wrapping things like <div>s\n * without having to deal with the requirements to make the <div> accessible.\n */\nexport const Clickable = styled.button<ClickableProps>`\n  appearance: none;\n  padding: 0;\n  border: 0;\n  margin: 0;\n  background-color: transparent;\n  color: inherit;\n  font: inherit;\n  text-align: inherit;\n\n  ${compose(boxMixin, cursor, textDecoration)}\n\n  &:disabled {\n    cursor: default;\n  }\n`\n\nClickable.defaultProps = {\n  cursor: \"pointer\",\n  type: \"button\",\n}\n"],"file":"Clickable.js"}

package/dist/elements/Clickable/Clickable.story.js

@@ -46,6 +46,11 @@ var Default = function Default() {
       cursor: "default"
     }, {
       children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "Inherits the page\u2019s", /*#__PURE__*/_react.default.createElement("br", null), "text alignment.")
+    }, {
+      bg: "red100",
+      color: "white100",
+      m: 2,
+      p: 1
     }]
   }, /*#__PURE__*/_react.default.createElement(_Clickable.Clickable, {
     onClick: (0, _addonActions.action)("onClick")

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Clickable/Clickable.story.tsx"],"names":["title","Default","textDecoration","cursor","children","Submit","isSubmitted","setSubmitted","e","preventDefault","setTimeout","story","name"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAEC,MAAAA,cAAc,EAAE;AAAlB,KAFM,EAGN;AAAEC,MAAAA,MAAM,EAAE;AAAV,KAHM,EAIN;AACEC,MAAAA,QAAQ,eACN,qGAEE,wCAFF;AAFJ,KAJM;AADV,kBAgBE,6BAAC,oBAAD;AAAW,IAAA,OAAO,EAAE,0BAAO,SAAP;AAApB,iBAhBF,CADF;AAoBD,CArBM;;;AAAMH,O;;AAuBN,IAAMI,MAAM,GAAG,SAATA,MAAS,GAAM;AAAA,kBACU,qBAAS,KAAT,CADV;AAAA;AAAA,MACnBC,WADmB;AAAA,MACNC,YADM;;AAG1B,sBACE;AACE,IAAA,QAAQ,EAAE,kBAACC,CAAD,EAAO;AACfA,MAAAA,CAAC,CAACC,cAAF;AACAF,MAAAA,YAAY,CAAC,IAAD,CAAZ;AAEAG,MAAAA,UAAU,CAAC,YAAM;AACfH,QAAAA,YAAY,CAAC,KAAD,CAAZ;AACD,OAFS,EAEP,IAFO,CAAV;AAGD;AARH,kBAUE,yDAAiBD,WAAW,GAAG,KAAH,GAAW,IAAvC,CAVF,eAYE,6BAAC,QAAD;AAAK,IAAA,EAAE,EAAE;AAAT,kBACE,6BAAC,oBAAD;AAAW,IAAA,MAAM,EAAC,WAAlB;AAA8B,IAAA,CAAC,EAAE,CAAjC;AAAoC,IAAA,IAAI,EAAC,QAAzC;AAAkD,IAAA,EAAE,EAAE;AAAtD,uBADF,eAKE,6BAAC,oBAAD;AAAW,IAAA,MAAM,EAAC,WAAlB;AAA8B,IAAA,CAAC,EAAE,CAAjC;AAAoC,IAAA,IAAI,EAAC;AAAzC,uBALF,CAZF,CADF;AAwBD,CA3BM;;;AAAMD,M;AA6BbA,MAAM,CAACM,KAAP,GAAe;AACbC,EAAAA,IAAI,EAAE;AADO,CAAf","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Box } from \"../Box\"\nimport { Clickable, ClickableProps } from \"./Clickable\"\n\nexport default {\n  title: \"Components/Clickable\",\n}\n\nexport const Default = () => {\n  return (\n    <States<ClickableProps>\n      states={[\n        {},\n        { textDecoration: \"underline\" },\n        { cursor: \"default\" },\n        {\n          children: (\n            <>\n              Inherits the page’s\n              <br />\n              text alignment.\n            </>\n          ),\n        },\n      ]}\n    >\n      <Clickable onClick={action(\"onClick\")}>Clickable</Clickable>\n    </States>\n  )\n}\n\nexport const Submit = () => {\n  const [isSubmitted, setSubmitted] = useState(false)\n\n  return (\n    <form\n      onSubmit={(e) => {\n        e.preventDefault()\n        setSubmitted(true)\n\n        setTimeout(() => {\n          setSubmitted(false)\n        }, 1000)\n      }}\n    >\n      <pre>submitted? {isSubmitted ? \"yes\" : \"no\"}</pre>\n\n      <Box mt={1}>\n        <Clickable border=\"1px solid\" p={2} type=\"button\" mr={1}>\n          type=\"button\"\n        </Clickable>\n\n        <Clickable border=\"1px solid\" p={2} type=\"submit\">\n          type=\"submit\"\n        </Clickable>\n      </Box>\n    </form>\n  )\n}\n\nSubmit.story = {\n  name: \"Does not submit forms by default\",\n}\n"],"file":"Clickable.story.js"}
+{"version":3,"sources":["../../../src/elements/Clickable/Clickable.story.tsx"],"names":["title","Default","textDecoration","cursor","children","bg","color","m","p","Submit","isSubmitted","setSubmitted","e","preventDefault","setTimeout","story","name"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,uBAAD;AACE,IAAA,MAAM,EAAE,CACN,EADM,EAEN;AAAEC,MAAAA,cAAc,EAAE;AAAlB,KAFM,EAGN;AAAEC,MAAAA,MAAM,EAAE;AAAV,KAHM,EAIN;AACEC,MAAAA,QAAQ,eACN,qGAEE,wCAFF;AAFJ,KAJM,EAaN;AACEC,MAAAA,EAAE,EAAE,QADN;AAEEC,MAAAA,KAAK,EAAE,UAFT;AAGEC,MAAAA,CAAC,EAAE,CAHL;AAIEC,MAAAA,CAAC,EAAE;AAJL,KAbM;AADV,kBAsBE,6BAAC,oBAAD;AAAW,IAAA,OAAO,EAAE,0BAAO,SAAP;AAApB,iBAtBF,CADF;AA0BD,CA3BM;;;AAAMP,O;;AA6BN,IAAMQ,MAAM,GAAG,SAATA,MAAS,GAAM;AAAA,kBACU,qBAAS,KAAT,CADV;AAAA;AAAA,MACnBC,WADmB;AAAA,MACNC,YADM;;AAG1B,sBACE;AACE,IAAA,QAAQ,EAAE,kBAACC,CAAD,EAAO;AACfA,MAAAA,CAAC,CAACC,cAAF;AACAF,MAAAA,YAAY,CAAC,IAAD,CAAZ;AAEAG,MAAAA,UAAU,CAAC,YAAM;AACfH,QAAAA,YAAY,CAAC,KAAD,CAAZ;AACD,OAFS,EAEP,IAFO,CAAV;AAGD;AARH,kBAUE,yDAAiBD,WAAW,GAAG,KAAH,GAAW,IAAvC,CAVF,eAYE,6BAAC,QAAD;AAAK,IAAA,EAAE,EAAE;AAAT,kBACE,6BAAC,oBAAD;AAAW,IAAA,MAAM,EAAC,WAAlB;AAA8B,IAAA,CAAC,EAAE,CAAjC;AAAoC,IAAA,IAAI,EAAC,QAAzC;AAAkD,IAAA,EAAE,EAAE;AAAtD,uBADF,eAKE,6BAAC,oBAAD;AAAW,IAAA,MAAM,EAAC,WAAlB;AAA8B,IAAA,CAAC,EAAE,CAAjC;AAAoC,IAAA,IAAI,EAAC;AAAzC,uBALF,CAZF,CADF;AAwBD,CA3BM;;;AAAMD,M;AA6BbA,MAAM,CAACM,KAAP,GAAe;AACbC,EAAAA,IAAI,EAAE;AADO,CAAf","sourcesContent":["import { action } from \"@storybook/addon-actions\"\nimport React, { useState } from \"react\"\nimport { States } from \"storybook-states\"\nimport { Box } from \"../Box\"\nimport { Clickable, ClickableProps } from \"./Clickable\"\n\nexport default {\n  title: \"Components/Clickable\",\n}\n\nexport const Default = () => {\n  return (\n    <States<ClickableProps>\n      states={[\n        {},\n        { textDecoration: \"underline\" },\n        { cursor: \"default\" },\n        {\n          children: (\n            <>\n              Inherits the page’s\n              <br />\n              text alignment.\n            </>\n          ),\n        },\n        {\n          bg: \"red100\",\n          color: \"white100\",\n          m: 2,\n          p: 1,\n        },\n      ]}\n    >\n      <Clickable onClick={action(\"onClick\")}>Clickable</Clickable>\n    </States>\n  )\n}\n\nexport const Submit = () => {\n  const [isSubmitted, setSubmitted] = useState(false)\n\n  return (\n    <form\n      onSubmit={(e) => {\n        e.preventDefault()\n        setSubmitted(true)\n\n        setTimeout(() => {\n          setSubmitted(false)\n        }, 1000)\n      }}\n    >\n      <pre>submitted? {isSubmitted ? \"yes\" : \"no\"}</pre>\n\n      <Box mt={1}>\n        <Clickable border=\"1px solid\" p={2} type=\"button\" mr={1}>\n          type=\"button\"\n        </Clickable>\n\n        <Clickable border=\"1px solid\" p={2} type=\"submit\">\n          type=\"submit\"\n        </Clickable>\n      </Box>\n    </form>\n  )\n}\n\nSubmit.story = {\n  name: \"Does not submit forms by default\",\n}\n"],"file":"Clickable.story.js"}

package/dist/elements/Modal/Modal.d.ts

@@ -1,4 +1,4 @@
-import { SFC } from "react";
+import { FC } from "react";
 /**
  * FIXME: This whole thing needs to be rebuilt from scratch
  */
@@ -21,7 +21,7 @@ export declare enum ModalWidth {
 }
 /**
  * Modal.
- * Spec: https://app.zeplin.io/project/5acd19ff49a1429169c3128b/screen/5c75ad115c1db5628cc03c2a
+ * Spec: https://www.figma.com/file/m6gDpKHEWDbYJyrwsVZDBr/Artsy-3.0-Design-System?node-id=6150%3A7290
  */
-export declare const Modal: SFC<ModalProps>;
+export declare const Modal: FC<ModalProps>;
 export {};

package/dist/elements/Modal/Modal.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Modal = exports.ModalWidth = void 0;
 
+var _themeGet = require("@styled-system/theme-get");
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -21,11 +23,15 @@ var _Box = require("../Box");
 
 var _Flex = require("../Flex");
 
+var _Join = require("../Join");
+
 var _Spacer = require("../Spacer");
 
-var _Typography = require("../Typography");
+var _Text = require("../Text");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _useOnScroll2 = require("../../utils/useOnScroll");
+
+var _templateObject, _templateObject2;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -50,7 +56,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var ModalWidth;
 /**
  * Modal.
- * Spec: https://app.zeplin.io/project/5acd19ff49a1429169c3128b/screen/5c75ad115c1db5628cc03c2a
+ * Spec: https://www.figma.com/file/m6gDpKHEWDbYJyrwsVZDBr/Artsy-3.0-Design-System?node-id=6150%3A7290
  */
 
 exports.ModalWidth = ModalWidth;
@@ -78,6 +84,10 @@ var Modal = function Modal(_ref) {
       fadeIn = _useState2[0],
       setFadeIn = _useState2[1];
 
+  var _useOnScroll = (0, _useOnScroll2.useOnScroll)(),
+      isScrolled = _useOnScroll.isScrolled,
+      elementRef = _useOnScroll.elementRef;
+
   var handleEscapeKey = function handleEscapeKey(event) {
     if (event && event.key === "Escape") {
       onClose();
@@ -126,35 +136,60 @@ var Modal = function Modal(_ref) {
     isWide: isWide,
     show: show,
     className: fadeIn ? "fadeIn" : ""
-  }, /*#__PURE__*/_react.default.createElement(ModalFlexContent, null, !hideCloseButton && /*#__PURE__*/_react.default.createElement(CloseIconWrapper, {
+  }, /*#__PURE__*/_react.default.createElement(ModalFlexContent, null, /*#__PURE__*/_react.default.createElement(ModalStickyHeader, {
+    position: "sticky",
+    top: 0,
+    display: "flex",
+    justifyContent: "center",
+    flexDirection: "column",
+    isScrolled: isScrolled,
+    px: 2
+  }, /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
+    my: 1
+  }), /*#__PURE__*/_react.default.createElement(_Flex.Flex, null, /*#__PURE__*/_react.default.createElement(_Box.Box, {
+    pr: 6,
+    flex: 1
+  }, /*#__PURE__*/_react.default.createElement(_Join.Join, {
+    separator: /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
+      py: 1
+    })
+  }, hasLogo && /*#__PURE__*/_react.default.createElement(Logo, {
+    my: 1
+  }), title && /*#__PURE__*/_react.default.createElement(_Text.Text, {
+    variant: "lg",
+    color: "black100",
+    py: hasLogo ? 0 : 1
+  }, title))), !hideCloseButton && /*#__PURE__*/_react.default.createElement(CloseIconWrapper, {
+    my: 1,
     onClick: function onClick() {
       return onClose();
     }
   }, /*#__PURE__*/_react.default.createElement(_svgs.CloseIcon, {
     fill: "black60"
+  }))), /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
+    py: 1
   })), /*#__PURE__*/_react.default.createElement(ModalScrollContent, {
     hasLogo: hasLogo,
-    modalWidth: modalWidth
-  }, hasLogo && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
-    justifyContent: "center"
-  }, /*#__PURE__*/_react.default.createElement(Logo, null)), /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
-    mb: 2
-  })), title && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Flex.Flex, {
-    justifyContent: "center"
-  }, /*#__PURE__*/_react.default.createElement(_Typography.Sans, {
-    size: "5t",
-    textAlign: "center",
-    color: "black100"
-  }, title)), /*#__PURE__*/_react.default.createElement(_Spacer.Spacer, {
-    mb: hasLogo ? 2 : [1, 2]
-  })), children), FixedButton && /*#__PURE__*/_react.default.createElement(FixedButtonWrapper, null, FixedButton))))));
+    modalWidth: modalWidth,
+    px: 2,
+    py: 1,
+    pb: 2
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Sentinel, {
+    ref: elementRef
+  }), children)), FixedButton && /*#__PURE__*/_react.default.createElement(FixedButtonWrapper, {
+    isScrolled: isScrolled,
+    p: 2
+  }, FixedButton))))));
 };
 
 exports.Modal = Modal;
 var FixedButtonWrapper = (0, _styledComponents.default)(_Flex.Flex).withConfig({
   displayName: "Modal__FixedButtonWrapper",
   componentId: "qjtwq0-0"
-})(["border-top:1px solid ", ";padding:", "px;", ";flex:0 0 auto;"], (0, _helpers.color)("black10"), (0, _helpers.space)(3), _helpers.media.xs(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: ", "px;\n  "])), (0, _helpers.space)(2)));
+})(["box-shadow:", ";flex:0 0 auto;transition:box-shadow 250ms ease-in-out;"], function (_ref2) {
+  var isScrolled = _ref2.isScrolled;
+  return isScrolled ? _helpers.DROP_SHADOW : "none";
+});
 var ModalOuterWrapper = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "Modal__ModalOuterWrapper",
   componentId: "qjtwq0-1"
@@ -168,29 +203,41 @@ var ModalWrapper = (0, _styledComponents.default)(_Flex.Flex).withConfig({
 var ModalElement = (0, _styledComponents.default)(_Box.Box).withConfig({
   displayName: "Modal__ModalElement",
   componentId: "qjtwq0-3"
-})(["position:absolute;border-radius:5px;height:", ";max-height:calc(100vh - 80px);min-height:58px;overflow:hidden;background-color:", ";box-shadow:0px 4px 15px rgba(0,0,0,0.15);width:", ";", ";transform:translateY(2000px);&.fadeIn{transition:all 400ms cubic-bezier(0.075,0.82,0.165,1);transition-delay:1ms;transform:translateY(0px);}"], function (props) {
+})(["position:absolute;height:", ";max-height:calc(100vh - 80px);min-height:58px;overflow:hidden;background-color:", ";box-shadow:", ";width:", ";", ";transform:translateY(2000px);&.fadeIn{transition:all 400ms cubic-bezier(0.075,0.82,0.165,1);transition-delay:1ms;transform:translateY(0px);}"], function (props) {
   return props.height ? props.height : "auto";
-}, (0, _helpers.color)("white100"), function (props) {
+}, (0, _themeGet.themeGet)("colors.white100"), _helpers.DROP_SHADOW, function (props) {
   return props.modalWidth || (props.isWide ? ModalWidth.Wide : ModalWidth.Normal);
-}, _helpers.media.xs(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    max-height: 100vh;\n    height: 100vh;\n    width: 100vw;\n    border-radius: 0;\n  "]))));
+}, _helpers.media.xs(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    max-height: 100vh;\n    height: 100vh;\n    width: 100vw;\n    border-radius: 0;\n  "]))));
 var ModalFlexContent = (0, _styledComponents.default)(_Flex.Flex).withConfig({
   displayName: "Modal__ModalFlexContent",
   componentId: "qjtwq0-4"
-})(["position:relative;flex-direction:column;width:100%;overflow:hidden;max-height:calc(100vh - 80px);", ";"], _helpers.media.xs(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    max-height: 100vh;\n  "]))));
+})(["position:relative;flex-direction:column;width:100%;overflow:hidden;max-height:calc(100vh - 80px);", ";"], _helpers.media.xs(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    max-height: 100vh;\n  "]))));
+var ModalStickyHeader = (0, _styledComponents.default)(_Box.Box).withConfig({
+  displayName: "Modal__ModalStickyHeader",
+  componentId: "qjtwq0-5"
+})(["box-shadow:", ";transition:box-shadow 250ms ease-in-out;"], function (_ref3) {
+  var isScrolled = _ref3.isScrolled;
+  return isScrolled ? _helpers.DROP_SHADOW : "none";
+});
 var ModalScrollContent = (0, _styledComponents.default)(_Flex.Flex).withConfig({
   displayName: "Modal__ModalScrollContent",
-  componentId: "qjtwq0-5"
-})(["overflow:auto;flex-direction:column;padding:", "px;", ";"], function (props) {
-  return (0, _helpers.space)(props.hasLogo || props.modalWidth === ModalWidth.Narrow ? 2 : 3);
-}, _helpers.media.xs(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    padding: ", "px;\n  "])), (0, _helpers.space)(2)));
-var CloseIconWrapper = (0, _styledComponents.default)(_Box.Box).withConfig({
-  displayName: "Modal__CloseIconWrapper",
   componentId: "qjtwq0-6"
-})(["position:absolute;top:", "px;right:", "px;cursor:pointer;"], (0, _helpers.space)(2), (0, _helpers.space)(2));
+})(["overflow:auto;flex-direction:column;"]);
+var CloseIconWrapper = (0, _styledComponents.default)(_Flex.Flex).withConfig({
+  displayName: "Modal__CloseIconWrapper",
+  componentId: "qjtwq0-7"
+})(["cursor:pointer;"]);
 var Logo = (0, _styledComponents.default)(_ArtsyLogoBlackIcon.ArtsyLogoBlackIcon).withConfig({
   displayName: "Modal__Logo",
-  componentId: "qjtwq0-7"
-})(["width:100px;"]);
+  componentId: "qjtwq0-8"
+})(["width:78px;"]); // This <div> is positioned such that when it leaves the top of
+// the ModalScrollContent we use IntersectionObserver within the hook
+// to switch on and of the shadows of the sticky elements
+
+var Sentinel = (0, _styledComponents.default)(_Box.Box).withConfig({
+  displayName: "Modal__Sentinel",
+  componentId: "qjtwq0-9"
+})(["position:relative;width:100%;height:0;"]);
 Modal.displayName = "Modal";
 ModalWrapper.displayName = "ModalWrapper";
 ModalScrollContent.displayName = "ModalScrollContent";

package/dist/elements/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Modal/Modal.tsx"],"names":["ModalWidth","Modal","children","FixedButton","title","show","modalWidth","isWide","hasLogo","onClose","hideCloseButton","wrapperRef","fadeIn","setFadeIn","handleEscapeKey","event","key","document","addEventListener","body","style","overflowY","removeEventListener","handleWrapperClick","target","current","FixedButtonWrapper","Flex","media","xs","ModalOuterWrapper","Box","props","ModalWrapper","ModalElement","height","Wide","Normal","ModalFlexContent","ModalScrollContent","Narrow","CloseIconWrapper","Logo","ArtsyLogoBlackIcon","displayName"],"mappings":"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","sourcesContent":["import React, { SFC, useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { color, media, space } from \"../../helpers\"\nimport { CloseIcon } from \"../../svgs\"\nimport { ArtsyLogoBlackIcon } from \"../../svgs/ArtsyLogoBlackIcon\"\nimport { Box } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Spacer } from \"../Spacer\"\nimport { Sans } from \"../Typography\"\n\n/**\n * FIXME: This whole thing needs to be rebuilt from scratch\n */\n\ninterface ModalProps {\n  FixedButton?: JSX.Element\n  refreshModalContentKey?: string\n  hasLogo?: boolean\n  height?: string\n  modalWidth?: ModalWidth\n  isWide?: boolean\n  onClose: () => void\n  show?: boolean\n  title?: string\n  /*\n   * Hide the X button if we don't want the user to be able to exit the modal without another action closing the modal\n   */\n  hideCloseButton?: boolean\n}\n\ninterface TransitionElementProps {\n  isWide?: boolean\n  show?: boolean\n  modalWidth?: ModalWidth\n}\n\ninterface ModalScrollContentProps {\n  hasLogo?: boolean\n  modalWidth?: ModalWidth\n}\n\nexport enum ModalWidth {\n  Narrow = \"300px\",\n  Normal = \"440px\",\n  Wide = \"900px\",\n}\n\n/**\n * Modal.\n * Spec: https://app.zeplin.io/project/5acd19ff49a1429169c3128b/screen/5c75ad115c1db5628cc03c2a\n */\nexport const Modal: SFC<ModalProps> = ({\n  children,\n  FixedButton,\n  title,\n  show,\n  modalWidth, // modalWidth overwrites isWide if present\n  isWide,\n  hasLogo,\n  onClose,\n  hideCloseButton,\n}) => {\n  const wrapperRef = useRef(null)\n  const [fadeIn, setFadeIn] = useState(false)\n\n  const handleEscapeKey = (event) => {\n    if (event && event.key === \"Escape\") {\n      onClose()\n    }\n  }\n\n  useEffect(() => {\n    if (show) {\n      setFadeIn(true)\n\n      if (!hideCloseButton) {\n        // Binds key event for escape to close modal\n        document.addEventListener(\"keyup\", handleEscapeKey, true)\n      }\n      // Fixes the body to disable scroll\n      document.body.style.overflowY = \"hidden\"\n    } else {\n      setFadeIn(false)\n      document.body.style.overflowY = \"visible\"\n      document.removeEventListener(\"keyup\", handleEscapeKey, true)\n    }\n\n    return document.removeEventListener(\"keyup\", handleEscapeKey, true)\n  }, [show])\n\n  const handleWrapperClick = (event) => {\n    // If modal X icon is hidden we don't want to close the modal when the wrapper is clicked\n    if (!hideCloseButton && event.target === wrapperRef.current) {\n      onClose()\n    }\n  }\n\n  if (!show) {\n    return null\n  }\n\n  return (\n    <>\n      <ModalOuterWrapper show={show} className={fadeIn ? \"fadeIn\" : \"\"}>\n        <ModalWrapper ref={wrapperRef} onClick={handleWrapperClick}>\n          <ModalElement\n            modalWidth={modalWidth}\n            isWide={isWide}\n            show={show}\n            className={fadeIn ? \"fadeIn\" : \"\"}\n          >\n            <ModalFlexContent>\n              {!hideCloseButton && (\n                <CloseIconWrapper onClick={() => onClose()}>\n                  <CloseIcon fill=\"black60\" />\n                </CloseIconWrapper>\n              )}\n              <ModalScrollContent hasLogo={hasLogo} modalWidth={modalWidth}>\n                {hasLogo && (\n                  <>\n                    <Flex justifyContent=\"center\">\n                      <Logo />\n                    </Flex>\n                    <Spacer mb={2} />\n                  </>\n                )}\n                {title && (\n                  <>\n                    <Flex justifyContent=\"center\">\n                      <Sans size=\"5t\" textAlign=\"center\" color=\"black100\">\n                        {title}\n                      </Sans>\n                    </Flex>\n                    <Spacer mb={hasLogo ? 2 : [1, 2]} />\n                  </>\n                )}\n                {children}\n              </ModalScrollContent>\n              {FixedButton && (\n                <FixedButtonWrapper>{FixedButton}</FixedButtonWrapper>\n              )}\n            </ModalFlexContent>\n          </ModalElement>\n        </ModalWrapper>\n      </ModalOuterWrapper>\n    </>\n  )\n}\n\nconst FixedButtonWrapper = styled(Flex)`\n  border-top: 1px solid ${color(\"black10\")};\n  padding: ${space(3)}px;\n  ${media.xs`\n    padding: ${space(2)}px;\n  `};\n  flex: 0 0 auto;\n`\n\nconst ModalOuterWrapper = styled(Box)<TransitionElementProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 9999;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(229, 229, 229, 0.5);\n  opacity: 0;\n  pointer-events: ${(props) => (props.show ? \"auto\" : \"none\")};\n\n  &.fadeIn {\n    transition: opacity 250ms ease;\n    transition-delay: 1ms;\n    opacity: 1;\n  }\n`\n\nconst ModalWrapper = styled(Flex)`\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  justify-content: center;\n  align-items: center;\n`\n\nconst ModalElement = styled(Box)<TransitionElementProps>`\n  position: absolute;\n  border-radius: 5px;\n  height: ${(props) => (props.height ? props.height : \"auto\") as any};\n  max-height: calc(100vh - 80px);\n  min-height: 58px;\n  overflow: hidden;\n  background-color: ${color(\"white100\")};\n  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15);\n  width: ${(props) =>\n    props.modalWidth || (props.isWide ? ModalWidth.Wide : ModalWidth.Normal)};\n  ${media.xs`\n    max-height: 100vh;\n    height: 100vh;\n    width: 100vw;\n    border-radius: 0;\n  `};\n\n  transform: translateY(2000px);\n  &.fadeIn {\n    transition: all 400ms cubic-bezier(0.075, 0.82, 0.165, 1); /* easeOutCirc */\n    transition-delay: 1ms;\n    transform: translateY(0px);\n  }\n`\n\nconst ModalFlexContent = styled(Flex)<ModalScrollContentProps>`\n  position: relative;\n  flex-direction: column;\n  width: 100%;\n  overflow: hidden;\n  max-height: calc(100vh - 80px);\n  ${media.xs`\n    max-height: 100vh;\n  `};\n`\n\nconst ModalScrollContent = styled(Flex)<ModalScrollContentProps>`\n  overflow: auto;\n  flex-direction: column;\n  padding: ${(props) =>\n    space(props.hasLogo || props.modalWidth === ModalWidth.Narrow ? 2 : 3)}px;\n  ${media.xs`\n    padding: ${space(2)}px;\n  `};\n`\n\nconst CloseIconWrapper = styled(Box)`\n  position: absolute;\n  top: ${space(2)}px;\n  right: ${space(2)}px;\n  cursor: pointer;\n`\n\nconst Logo = styled(ArtsyLogoBlackIcon)`\n  width: 100px;\n`\n\nModal.displayName = \"Modal\"\nModalWrapper.displayName = \"ModalWrapper\"\nModalScrollContent.displayName = \"ModalScrollContent\"\n"],"file":"Modal.js"}
+{"version":3,"sources":["../../../src/elements/Modal/Modal.tsx"],"names":["ModalWidth","Modal","children","FixedButton","title","show","modalWidth","isWide","hasLogo","onClose","hideCloseButton","wrapperRef","fadeIn","setFadeIn","isScrolled","elementRef","handleEscapeKey","event","key","document","addEventListener","body","style","overflowY","removeEventListener","handleWrapperClick","target","current","FixedButtonWrapper","Flex","DROP_SHADOW","ModalOuterWrapper","Box","props","ModalWrapper","ModalElement","height","Wide","Normal","media","xs","ModalFlexContent","ModalStickyHeader","ModalScrollContent","CloseIconWrapper","Logo","ArtsyLogoBlackIcon","Sentinel","displayName"],"mappings":"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","sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport React, { FC, useEffect, useRef, useState } from \"react\"\nimport styled from \"styled-components\"\nimport { DROP_SHADOW, media } from \"../../helpers\"\nimport { CloseIcon } from \"../../svgs\"\nimport { ArtsyLogoBlackIcon } from \"../../svgs/ArtsyLogoBlackIcon\"\nimport { Box } from \"../Box\"\nimport { Flex } from \"../Flex\"\nimport { Join } from \"../Join\"\nimport { Spacer } from \"../Spacer\"\nimport { Text } from \"../Text\"\nimport { useOnScroll } from \"../../utils/useOnScroll\"\n\n/**\n * FIXME: This whole thing needs to be rebuilt from scratch\n */\n\ninterface ModalProps {\n  FixedButton?: JSX.Element\n  refreshModalContentKey?: string\n  hasLogo?: boolean\n  height?: string\n  modalWidth?: ModalWidth\n  isWide?: boolean\n  onClose: () => void\n  show?: boolean\n  title?: string\n  /*\n   * Hide the X button if we don't want the user to be able to exit the modal without another action closing the modal\n   */\n  hideCloseButton?: boolean\n}\n\ninterface TransitionElementProps {\n  isWide?: boolean\n  show?: boolean\n  modalWidth?: ModalWidth\n}\n\ninterface ModalScrollContentProps {\n  hasLogo?: boolean\n  modalWidth?: ModalWidth\n}\n\nexport enum ModalWidth {\n  Narrow = \"300px\",\n  Normal = \"440px\",\n  Wide = \"900px\",\n}\n\n/**\n * Modal.\n * Spec: https://www.figma.com/file/m6gDpKHEWDbYJyrwsVZDBr/Artsy-3.0-Design-System?node-id=6150%3A7290\n */\nexport const Modal: FC<ModalProps> = ({\n  children,\n  FixedButton,\n  title,\n  show,\n  modalWidth, // modalWidth overwrites isWide if present\n  isWide,\n  hasLogo,\n  onClose,\n  hideCloseButton,\n}) => {\n  const wrapperRef = useRef(null)\n  const [fadeIn, setFadeIn] = useState(false)\n  const { isScrolled, elementRef } = useOnScroll()\n\n  const handleEscapeKey = (event) => {\n    if (event && event.key === \"Escape\") {\n      onClose()\n    }\n  }\n\n  useEffect(() => {\n    if (show) {\n      setFadeIn(true)\n\n      if (!hideCloseButton) {\n        // Binds key event for escape to close modal\n        document.addEventListener(\"keyup\", handleEscapeKey, true)\n      }\n      // Fixes the body to disable scroll\n      document.body.style.overflowY = \"hidden\"\n    } else {\n      setFadeIn(false)\n      document.body.style.overflowY = \"visible\"\n      document.removeEventListener(\"keyup\", handleEscapeKey, true)\n    }\n\n    return document.removeEventListener(\"keyup\", handleEscapeKey, true)\n  }, [show])\n\n  const handleWrapperClick = (event) => {\n    // If modal X icon is hidden we don't want to close the modal when the wrapper is clicked\n    if (!hideCloseButton && event.target === wrapperRef.current) {\n      onClose()\n    }\n  }\n\n  if (!show) {\n    return null\n  }\n\n  return (\n    <>\n      <ModalOuterWrapper show={show} className={fadeIn ? \"fadeIn\" : \"\"}>\n        <ModalWrapper ref={wrapperRef} onClick={handleWrapperClick}>\n          <ModalElement\n            modalWidth={modalWidth}\n            isWide={isWide}\n            show={show}\n            className={fadeIn ? \"fadeIn\" : \"\"}\n          >\n            <ModalFlexContent>\n              <ModalStickyHeader\n                position=\"sticky\"\n                top={0}\n                display=\"flex\"\n                justifyContent=\"center\"\n                flexDirection=\"column\"\n                isScrolled={isScrolled}\n                px={2}\n              >\n                <Spacer my={1} />\n                <Flex>\n                  <Box pr={6} flex={1}>\n                    <Join separator={<Spacer py={1} />}>\n                      {hasLogo && <Logo my={1} />}\n                      {title && (\n                        <Text\n                          variant=\"lg\"\n                          color=\"black100\"\n                          py={hasLogo ? 0 : 1}\n                        >\n                          {title}\n                        </Text>\n                      )}\n                    </Join>\n                  </Box>\n\n                  {!hideCloseButton && (\n                    <CloseIconWrapper my={1} onClick={() => onClose()}>\n                      <CloseIcon fill=\"black60\" />\n                    </CloseIconWrapper>\n                  )}\n                </Flex>\n                <Spacer py={1} />\n              </ModalStickyHeader>\n\n              <ModalScrollContent\n                hasLogo={hasLogo}\n                modalWidth={modalWidth}\n                px={2}\n                py={1}\n                pb={2}\n              >\n                <>\n                  <Sentinel ref={elementRef} />\n                  {children}\n                </>\n              </ModalScrollContent>\n\n              {FixedButton && (\n                <FixedButtonWrapper isScrolled={isScrolled} p={2}>\n                  {FixedButton}\n                </FixedButtonWrapper>\n              )}\n            </ModalFlexContent>\n          </ModalElement>\n        </ModalWrapper>\n      </ModalOuterWrapper>\n    </>\n  )\n}\n\ninterface ShadowOnScroll {\n  isScrolled?: boolean\n}\n\nconst FixedButtonWrapper = styled(Flex)<ShadowOnScroll>`\n  box-shadow: ${({ isScrolled }) => (isScrolled ? DROP_SHADOW : \"none\")};\n  flex: 0 0 auto;\n  transition: box-shadow 250ms ease-in-out;\n`\n\nconst ModalOuterWrapper = styled(Box)<TransitionElementProps>`\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 9999;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(229, 229, 229, 0.5);\n  opacity: 0;\n  pointer-events: ${(props) => (props.show ? \"auto\" : \"none\")};\n\n  &.fadeIn {\n    transition: opacity 250ms ease;\n    transition-delay: 1ms;\n    opacity: 1;\n  }\n`\n\nconst ModalWrapper = styled(Flex)`\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  justify-content: center;\n  align-items: center;\n`\n\nconst ModalElement = styled(Box)<TransitionElementProps>`\n  position: absolute;\n  height: ${(props) => (props.height ? props.height : \"auto\") as any};\n  max-height: calc(100vh - 80px);\n  min-height: 58px;\n  overflow: hidden;\n  background-color: ${themeGet(\"colors.white100\")};\n  box-shadow: ${DROP_SHADOW};\n  width: ${(props) =>\n    props.modalWidth || (props.isWide ? ModalWidth.Wide : ModalWidth.Normal)};\n\n  ${media.xs`\n    max-height: 100vh;\n    height: 100vh;\n    width: 100vw;\n    border-radius: 0;\n  `};\n\n  transform: translateY(2000px);\n  &.fadeIn {\n    transition: all 400ms cubic-bezier(0.075, 0.82, 0.165, 1); /* easeOutCirc */\n    transition-delay: 1ms;\n    transform: translateY(0px);\n  }\n`\n\nconst ModalFlexContent = styled(Flex)<ModalScrollContentProps>`\n  position: relative;\n  flex-direction: column;\n  width: 100%;\n  overflow: hidden;\n  max-height: calc(100vh - 80px);\n  ${media.xs`\n    max-height: 100vh;\n  `};\n`\n\nconst ModalStickyHeader = styled(Box)<ModalScrollContentProps & ShadowOnScroll>`\n  box-shadow: ${({ isScrolled }) => (isScrolled ? DROP_SHADOW : \"none\")};\n  transition: box-shadow 250ms ease-in-out;\n`\n\nconst ModalScrollContent = styled(Flex)<ModalScrollContentProps>`\n  overflow: auto;\n  flex-direction: column;\n`\n\nconst CloseIconWrapper = styled(Flex)`\n  cursor: pointer;\n`\n\nconst Logo = styled(ArtsyLogoBlackIcon)`\n  width: 78px;\n`\n\n// This <div> is positioned such that when it leaves the top of\n// the ModalScrollContent we use IntersectionObserver within the hook\n// to switch on and of the shadows of the sticky elements\nconst Sentinel = styled(Box)`\n  position: relative;\n  width: 100%;\n  height: 0;\n`\n\nModal.displayName = \"Modal\"\nModalWrapper.displayName = \"ModalWrapper\"\nModalScrollContent.displayName = \"ModalScrollContent\"\n"],"file":"Modal.js"}

package/dist/elements/Modal/Modal.story.d.ts

@@ -13,7 +13,7 @@ export declare const Default: {
         };
     };
 };
-export declare const WithTitle: {
+export declare const Title: {
     (): JSX.Element;
     story: {
         name: string;
@@ -24,7 +24,7 @@ export declare const WithTitle: {
         };
     };
 };
-export declare const WithLogo: {
+export declare const LongTitle: {
     (): JSX.Element;
     story: {
         name: string;
@@ -35,7 +35,7 @@ export declare const WithLogo: {
         };
     };
 };
-export declare const ModalWithFixedButton: {
+export declare const Logo: {
     (): JSX.Element;
     story: {
         name: string;
@@ -46,7 +46,51 @@ export declare const ModalWithFixedButton: {
         };
     };
 };
-export declare const WideModal: {
+export declare const LogoAndTitle: {
+    (): JSX.Element;
+    story: {
+        name: string;
+        parameters: {
+            chromatic: {
+                delay: number;
+            };
+        };
+    };
+};
+export declare const FixedButton: {
+    (): JSX.Element;
+    story: {
+        name: string;
+        parameters: {
+            chromatic: {
+                delay: number;
+            };
+        };
+    };
+};
+export declare const FixedButtonNoTitle: {
+    (): JSX.Element;
+    story: {
+        name: string;
+        parameters: {
+            chromatic: {
+                delay: number;
+            };
+        };
+    };
+};
+export declare const FixedButtonNoLogo: {
+    (): JSX.Element;
+    story: {
+        name: string;
+        parameters: {
+            chromatic: {
+                delay: number;
+            };
+        };
+    };
+};
+export declare const Wide: {
     (): JSX.Element;
     story: {
         name: string;

package/dist/elements/Modal/Modal.story.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WideModal = exports.ModalWithFixedButton = exports.WithLogo = exports.WithTitle = exports.Default = exports.default = void 0;
+exports.Wide = exports.FixedButtonNoLogo = exports.FixedButtonNoTitle = exports.FixedButton = exports.LogoAndTitle = exports.Logo = exports.LongTitle = exports.Title = exports.Default = exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -17,6 +17,7 @@ var _default = {
   title: "Components/Modal"
 };
 exports.default = _default;
+var content = "\n  Chicharrones marfa tumeric squid four loko flexitarian celiac hell of hot chicken \n  jianbing salvia enamel pin woke. Migas you probably haven't heard of them church-key \n  pok pok banh mi yr ennui ethical subway tile authentic. Sartorial retro roof party, \n  gastropub bicycle rights drinking vinegar microdosing swag DIY deep v. Viral hella pop-up, \n  banh mi squid poke chambray yuccie biodiesel occupy scenester.\n";
 
 var Default = function Default() {
   return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
@@ -24,7 +25,7 @@ var Default = function Default() {
     onClose: function onClose() {
       return null;
     }
-  }, "Some example content");
+  }, content);
 };
 
 exports.Default = Default;
@@ -37,20 +38,20 @@ Default.story = {
   }
 };
 
-var WithTitle = function WithTitle() {
+var Title = function Title() {
   return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
     show: true,
     title: "Modal Title",
     onClose: function onClose() {
       return null;
     }
-  }, "Some example content");
+  }, content);
 };
 
-exports.WithTitle = WithTitle;
-WithTitle.displayName = "WithTitle";
-WithTitle.story = {
-  name: "With title",
+exports.Title = Title;
+Title.displayName = "Title";
+Title.story = {
+  name: "Title",
   parameters: {
     chromatic: {
       delay: 500
@@ -58,21 +59,112 @@ WithTitle.story = {
   }
 };
 
-var WithLogo = function WithLogo() {
+var LongTitle = function LongTitle() {
+  return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+    show: true,
+    title: "Modal Title with a longer title or headline text that runs on for mutliple lines",
+    onClose: function onClose() {
+      return null;
+    }
+  }, content);
+};
+
+exports.LongTitle = LongTitle;
+LongTitle.displayName = "LongTitle";
+LongTitle.story = {
+  name: "Long title",
+  parameters: {
+    chromatic: {
+      delay: 500
+    }
+  }
+};
+
+var Logo = function Logo() {
+  return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+    show: true,
+    hasLogo: true,
+    onClose: function onClose() {
+      return null;
+    }
+  }, content);
+};
+
+exports.Logo = Logo;
+Logo.displayName = "Logo";
+Logo.story = {
+  name: "Logo",
+  parameters: {
+    chromatic: {
+      delay: 500
+    }
+  }
+};
+
+var LogoAndTitle = function LogoAndTitle() {
+  return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+    show: true,
+    hasLogo: true,
+    title: "Modal Title",
+    onClose: function onClose() {
+      return null;
+    }
+  }, content);
+};
+
+exports.LogoAndTitle = LogoAndTitle;
+LogoAndTitle.displayName = "LogoAndTitle";
+LogoAndTitle.story = {
+  name: "Logo and title",
+  parameters: {
+    chromatic: {
+      delay: 500
+    }
+  }
+};
+
+var FixedButton = function FixedButton() {
   return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
     show: true,
     title: "Modal Title",
     hasLogo: true,
     onClose: function onClose() {
       return null;
+    },
+    FixedButton: /*#__PURE__*/_react.default.createElement(_Button.Button, {
+      width: "100%"
+    }, "Click me")
+  }, content.repeat(5));
+};
+
+exports.FixedButton = FixedButton;
+FixedButton.displayName = "FixedButton";
+FixedButton.story = {
+  name: "Fixed button",
+  parameters: {
+    chromatic: {
+      delay: 500
     }
-  }, "Some example content");
+  }
+};
+
+var FixedButtonNoTitle = function FixedButtonNoTitle() {
+  return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+    show: true,
+    hasLogo: true,
+    onClose: function onClose() {
+      return null;
+    },
+    FixedButton: /*#__PURE__*/_react.default.createElement(_Button.Button, {
+      width: "100%"
+    }, "Click me")
+  }, content.repeat(5));
 };
 
-exports.WithLogo = WithLogo;
-WithLogo.displayName = "WithLogo";
-WithLogo.story = {
-  name: "With logo",
+exports.FixedButtonNoTitle = FixedButtonNoTitle;
+FixedButtonNoTitle.displayName = "FixedButtonNoTitle";
+FixedButtonNoTitle.story = {
+  name: "Fixed button no title",
   parameters: {
     chromatic: {
       delay: 500
@@ -80,7 +172,7 @@ WithLogo.story = {
   }
 };
 
-var ModalWithFixedButton = function ModalWithFixedButton() {
+var FixedButtonNoLogo = function FixedButtonNoLogo() {
   return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
     show: true,
     title: "Modal Title",
@@ -90,13 +182,13 @@ var ModalWithFixedButton = function ModalWithFixedButton() {
     FixedButton: /*#__PURE__*/_react.default.createElement(_Button.Button, {
       width: "100%"
     }, "Click me")
-  }, "Some example content");
+  }, content.repeat(5));
 };
 
-exports.ModalWithFixedButton = ModalWithFixedButton;
-ModalWithFixedButton.displayName = "ModalWithFixedButton";
-ModalWithFixedButton.story = {
-  name: "Modal with fixed button",
+exports.FixedButtonNoLogo = FixedButtonNoLogo;
+FixedButtonNoLogo.displayName = "FixedButtonNoLogo";
+FixedButtonNoLogo.story = {
+  name: "Fixed button no logo",
   parameters: {
     chromatic: {
       delay: 500
@@ -104,7 +196,7 @@ ModalWithFixedButton.story = {
   }
 };
 
-var WideModal = function WideModal() {
+var Wide = function Wide() {
   return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
     show: true,
     title: "Modal Title",
@@ -112,13 +204,13 @@ var WideModal = function WideModal() {
     onClose: function onClose() {
       return null;
     }
-  }, "Some example content");
+  }, content);
 };
 
-exports.WideModal = WideModal;
-WideModal.displayName = "WideModal";
-WideModal.story = {
-  name: "Wide modal",
+exports.Wide = Wide;
+Wide.displayName = "Wide";
+Wide.story = {
+  name: "Wide",
   parameters: {
     chromatic: {
       delay: 500

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Modal/Modal.story.tsx"],"names":["title","Default","story","parameters","chromatic","delay","WithTitle","name","WithLogo","ModalWithFixedButton","WideModal"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;eAEe;AACbA,EAAAA,KAAK,EAAE;AADM,C;;;AAIR,IAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AAC3B,sBACE,6BAAC,YAAD;AAAO,IAAA,IAAI,MAAX;AAAY,IAAA,OAAO,EAAE;AAAA,aAAM,IAAN;AAAA;AAArB,4BADF;AAKD,CANM;;;AAAMA,O;AAQbA,OAAO,CAACC,KAAR,GAAgB;AACdC,EAAAA,UAAU,EAAE;AAAEC,IAAAA,SAAS,EAAE;AAAEC,MAAAA,KAAK,EAAE;AAAT;AAAb;AADE,CAAhB;;AAIO,IAAMC,SAAS,GAAG,SAAZA,SAAY,GAAM;AAC7B,sBACE,6BAAC,YAAD;AAAO,IAAA,IAAI,MAAX;AAAY,IAAA,KAAK,EAAC,aAAlB;AAAgC,IAAA,OAAO,EAAE;AAAA,aAAM,IAAN;AAAA;AAAzC,4BADF;AAKD,CANM;;;AAAMA,S;AAQbA,SAAS,CAACJ,KAAV,GAAkB;AAChBK,EAAAA,IAAI,EAAE,YADU;AAEhBJ,EAAAA,UAAU,EAAE;AAAEC,IAAAA,SAAS,EAAE;AAAEC,MAAAA,KAAK,EAAE;AAAT;AAAb;AAFI,CAAlB;;AAKO,IAAMG,QAAQ,GAAG,SAAXA,QAAW,GAAM;AAC5B,sBACE,6BAAC,YAAD;AAAO,IAAA,IAAI,MAAX;AAAY,IAAA,KAAK,EAAC,aAAlB;AAAgC,IAAA,OAAO,MAAvC;AAAwC,IAAA,OAAO,EAAE;AAAA,aAAM,IAAN;AAAA;AAAjD,4BADF;AAKD,CANM;;;AAAMA,Q;AAQbA,QAAQ,CAACN,KAAT,GAAiB;AACfK,EAAAA,IAAI,EAAE,WADS;AAEfJ,EAAAA,UAAU,EAAE;AAAEC,IAAAA,SAAS,EAAE;AAAEC,MAAAA,KAAK,EAAE;AAAT;AAAb;AAFG,CAAjB;;AAKO,IAAMI,oBAAoB,GAAG,SAAvBA,oBAAuB,GAAM;AACxC,sBACE,6BAAC,YAAD;AACE,IAAA,IAAI,MADN;AAEE,IAAA,KAAK,EAAC,aAFR;AAGE,IAAA,OAAO,EAAE;AAAA,aAAM,IAAN;AAAA,KAHX;AAIE,IAAA,WAAW,eAAE,6BAAC,cAAD;AAAQ,MAAA,KAAK,EAAC;AAAd;AAJf,4BADF;AAUD,CAXM;;;AAAMA,oB;AAabA,oBAAoB,CAACP,KAArB,GAA6B;AAC3BK,EAAAA,IAAI,EAAE,yBADqB;AAE3BJ,EAAAA,UAAU,EAAE;AAAEC,IAAAA,SAAS,EAAE;AAAEC,MAAAA,KAAK,EAAE;AAAT;AAAb;AAFe,CAA7B;;AAKO,IAAMK,SAAS,GAAG,SAAZA,SAAY,GAAM;AAC7B,sBACE,6BAAC,YAAD;AAAO,IAAA,IAAI,MAAX;AAAY,IAAA,KAAK,EAAC,aAAlB;AAAgC,IAAA,MAAM,MAAtC;AAAuC,IAAA,OAAO,EAAE;AAAA,aAAM,IAAN;AAAA;AAAhD,4BADF;AAKD,CANM;;;AAAMA,S;AAQbA,SAAS,CAACR,KAAV,GAAkB;AAChBK,EAAAA,IAAI,EAAE,YADU;AAEhBJ,EAAAA,UAAU,EAAE;AAAEC,IAAAA,SAAS,EAAE;AAAEC,MAAAA,KAAK,EAAE;AAAT;AAAb;AAFI,CAAlB","sourcesContent":["import React from \"react\"\nimport { Button } from \"../Button\"\nimport { Modal } from \"./Modal\"\n\nexport default {\n  title: \"Components/Modal\",\n}\n\nexport const Default = () => {\n  return (\n    <Modal show onClose={() => null}>\n      Some example content\n    </Modal>\n  )\n}\n\nDefault.story = {\n  parameters: { chromatic: { delay: 500 } },\n}\n\nexport const WithTitle = () => {\n  return (\n    <Modal show title=\"Modal Title\" onClose={() => null}>\n      Some example content\n    </Modal>\n  )\n}\n\nWithTitle.story = {\n  name: \"With title\",\n  parameters: { chromatic: { delay: 500 } },\n}\n\nexport const WithLogo = () => {\n  return (\n    <Modal show title=\"Modal Title\" hasLogo onClose={() => null}>\n      Some example content\n    </Modal>\n  )\n}\n\nWithLogo.story = {\n  name: \"With logo\",\n  parameters: { chromatic: { delay: 500 } },\n}\n\nexport const ModalWithFixedButton = () => {\n  return (\n    <Modal\n      show\n      title=\"Modal Title\"\n      onClose={() => null}\n      FixedButton={<Button width=\"100%\">Click me</Button>}\n    >\n      Some example content\n    </Modal>\n  )\n}\n\nModalWithFixedButton.story = {\n  name: \"Modal with fixed button\",\n  parameters: { chromatic: { delay: 500 } },\n}\n\nexport const WideModal = () => {\n  return (\n    <Modal show title=\"Modal Title\" isWide onClose={() => null}>\n      Some example content\n    </Modal>\n  )\n}\n\nWideModal.story = {\n  name: \"Wide modal\",\n  parameters: { chromatic: { delay: 500 } },\n}\n"],"file":"Modal.story.js"}
+{"version":3,"sources":["../../../src/elements/Modal/Modal.story.tsx"],"names":["title","content","Default","story","parameters","chromatic","delay","Title","name","LongTitle","Logo","LogoAndTitle","FixedButton","repeat","FixedButtonNoTitle","FixedButtonNoLogo","Wide"],"mappings":"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","sourcesContent":["import React from \"react\"\nimport { Button } from \"../Button\"\nimport { Modal } from \"./Modal\"\n\nexport default {\n  title: \"Components/Modal\",\n}\n\nconst content = `\n  Chicharrones marfa tumeric squid four loko flexitarian celiac hell of hot chicken \n  jianbing salvia enamel pin woke. Migas you probably haven't heard of them church-key \n  pok pok banh mi yr ennui ethical subway tile authentic. Sartorial retro roof party, \n  gastropub bicycle rights drinking vinegar microdosing swag DIY deep v. Viral hella pop-up, \n  banh mi squid poke chambray yuccie biodiesel occupy scenester.\n`\n\nexport const Default = () => {\n  return (\n    <Modal show onClose={() => null}>\n      {content}\n    </Modal>\n  )\n}\n\nDefault.story = {\n  parameters: { chromatic: { delay: 500 } },\n}\n\nexport const Title = () => {\n  return (\n    <Modal show title=\"Modal Title\" onClose={() => null}>\n      {content}\n    </Modal>\n  )\n}\n\nTitle.story = {\n  name: \"Title\",\n  parameters: { chromatic: { delay: 500 } },\n}\n\nexport const LongTitle = () => {\n  return (\n    <Modal\n      show\n      title=\"Modal Title with a longer title or headline text that runs on for mutliple lines\"\n      onClose={() => null}\n    >\n      {content}\n    </Modal>\n  )\n}\n\nLongTitle.story = {\n  name: \"Long title\",\n  parameters: { chromatic: { delay: 500 } },\n}\n\nexport const Logo = () => {\n  return (\n    <Modal show hasLogo onClose={() => null}>\n      {content}\n    </Modal>\n  )\n}\n\nLogo.story = {\n  name: \"Logo\",\n  parameters: { chromatic: { delay: 500 } },\n}\n\nexport const LogoAndTitle = () => {\n  return (\n    <Modal show hasLogo title=\"Modal Title\" onClose={() => null}>\n      {content}\n    </Modal>\n  )\n}\n\nLogoAndTitle.story = {\n  name: \"Logo and title\",\n  parameters: { chromatic: { delay: 500 } },\n}\n\nexport const FixedButton = () => {\n  return (\n    <Modal\n      show\n      title=\"Modal Title\"\n      hasLogo\n      onClose={() => null}\n      FixedButton={<Button width=\"100%\">Click me</Button>}\n    >\n      {content.repeat(5)}\n    </Modal>\n  )\n}\n\nFixedButton.story = {\n  name: \"Fixed button\",\n  parameters: { chromatic: { delay: 500 } },\n}\n\nexport const FixedButtonNoTitle = () => {\n  return (\n    <Modal\n      show\n      hasLogo\n      onClose={() => null}\n      FixedButton={<Button width=\"100%\">Click me</Button>}\n    >\n      {content.repeat(5)}\n    </Modal>\n  )\n}\n\nFixedButtonNoTitle.story = {\n  name: \"Fixed button no title\",\n  parameters: { chromatic: { delay: 500 } },\n}\n\nexport const FixedButtonNoLogo = () => {\n  return (\n    <Modal\n      show\n      title=\"Modal Title\"\n      onClose={() => null}\n      FixedButton={<Button width=\"100%\">Click me</Button>}\n    >\n      {content.repeat(5)}\n    </Modal>\n  )\n}\n\nFixedButtonNoLogo.story = {\n  name: \"Fixed button no logo\",\n  parameters: { chromatic: { delay: 500 } },\n}\n\nexport const Wide = () => {\n  return (\n    <Modal show title=\"Modal Title\" isWide onClose={() => null}>\n      {content}\n    </Modal>\n  )\n}\n\nWide.story = {\n  name: \"Wide\",\n  parameters: { chromatic: { delay: 500 } },\n}\n"],"file":"Modal.story.js"}

package/dist/utils/useOnScroll.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+/**
+ * useOnScroll is used to track if an element is scrolled vertically or not
+ */
+export declare const useOnScroll: () => {
+    isScrolled: boolean;
+    elementRef: import("react").MutableRefObject<null>;
+};

package/dist/utils/useOnScroll.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOnScroll = void 0;
+
+var _react = require("react");
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/**
+ * useOnScroll is used to track if an element is scrolled vertically or not
+ */
+var useOnScroll = function useOnScroll() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isScrolled = _useState2[0],
+      setIsScrolled = _useState2[1];
+
+  var elementRef = (0, _react.useRef)(null);
+  var node = elementRef.current;
+  (0, _react.useEffect)(function () {
+    if (!("IntersectionObserver" in window)) return;
+    if (!node) return;
+    var observer = new IntersectionObserver(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 1),
+          entry = _ref2[0];
+
+      setIsScrolled(!entry.isIntersecting);
+    }, {
+      root: null,
+      rootMargin: "0px",
+      threshold: 1.0
+    });
+    observer.observe(node);
+    return function () {
+      observer.unobserve(node);
+    };
+  }, [node, isScrolled]);
+  return {
+    isScrolled: isScrolled,
+    elementRef: elementRef
+  };
+};
+
+exports.useOnScroll = useOnScroll;
+//# sourceMappingURL=useOnScroll.js.map

package/dist/utils/useOnScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/useOnScroll.ts"],"names":["useOnScroll","isScrolled","setIsScrolled","elementRef","node","current","window","observer","IntersectionObserver","entry","isIntersecting","root","rootMargin","threshold","observe","unobserve"],"mappings":";;;;;;;AAAA;;;;;;;;;;;;;;AAEA;AACA;AACA;AACO,IAAMA,WAAW,GAAG,SAAdA,WAAc,GAAM;AAAA,kBACK,qBAAS,KAAT,CADL;AAAA;AAAA,MACxBC,UADwB;AAAA,MACZC,aADY;;AAE/B,MAAMC,UAAU,GAAG,mBAAO,IAAP,CAAnB;AACA,MAAMC,IAAI,GAAGD,UAAU,CAACE,OAAxB;AAEA,wBAAU,YAAM;AACd,QAAI,EAAE,0BAA0BC,MAA5B,CAAJ,EAAyC;AACzC,QAAI,CAACF,IAAL,EAAW;AAEX,QAAMG,QAAQ,GAAG,IAAIC,oBAAJ,CACf,gBAAa;AAAA;AAAA,UAAXC,KAAW;;AACXP,MAAAA,aAAa,CAAC,CAACO,KAAK,CAACC,cAAR,CAAb;AACD,KAHc,EAIf;AACEC,MAAAA,IAAI,EAAE,IADR;AAEEC,MAAAA,UAAU,EAAE,KAFd;AAGEC,MAAAA,SAAS,EAAE;AAHb,KAJe,CAAjB;AAWAN,IAAAA,QAAQ,CAACO,OAAT,CAAiBV,IAAjB;AAEA,WAAO,YAAM;AACXG,MAAAA,QAAQ,CAACQ,SAAT,CAAmBX,IAAnB;AACD,KAFD;AAGD,GApBD,EAoBG,CAACA,IAAD,EAAOH,UAAP,CApBH;AAsBA,SAAO;AAAEA,IAAAA,UAAU,EAAVA,UAAF;AAAcE,IAAAA,UAAU,EAAVA;AAAd,GAAP;AACD,CA5BM","sourcesContent":["import { useEffect, useState, useRef } from \"react\"\n\n/**\n * useOnScroll is used to track if an element is scrolled vertically or not\n */\nexport const useOnScroll = () => {\n  const [isScrolled, setIsScrolled] = useState(false)\n  const elementRef = useRef(null)\n  const node = elementRef.current\n\n  useEffect(() => {\n    if (!(\"IntersectionObserver\" in window)) return\n    if (!node) return\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        setIsScrolled(!entry.isIntersecting)\n      },\n      {\n        root: null,\n        rootMargin: \"0px\",\n        threshold: 1.0,\n      }\n    )\n\n    observer.observe(node)\n\n    return () => {\n      observer.unobserve(node)\n    }\n  }, [node, isScrolled])\n\n  return { isScrolled, elementRef }\n}\n"],"file":"useOnScroll.js"}

package/package.json

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