@primer/components 30.3.0-rc.2010c7d4 → 31.0.0-rc.15aa0a10

package/lib/stories/Autocomplete.stories.js

@@ -0,0 +1,608 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InOverlayWithCustomScrollContainerRef = exports.WithCustomOverlayProps = exports.CustomOverlayMenuAnchor = exports.RenderingTheMenuOutsideAnOverlay = exports.AsyncLoadingOfItems = exports.WithCallbackWhenOverlayOpenStateChanges = exports.CustomSortAfterMenuClose = exports.CustomSearchFilter = exports.CustomEmptyStateMessage = exports.MultiSelectAddNewItem = exports.MultiSelectWithTokenInput = exports.MultiSelect = exports.SingleSelect = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ = require("..");
+
+var _TextInputWithTokens = _interopRequireDefault(require("../TextInputWithTokens"));
+
+var _Autocomplete = _interopRequireDefault(require("../Autocomplete/Autocomplete"));
+
+var _AnchoredOverlay = require("../AnchoredOverlay");
+
+var _Button = require("../Button");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const items = [{
+  text: 'zero',
+  id: 0
+}, {
+  text: 'one',
+  id: 1
+}, {
+  text: 'two',
+  id: 2
+}, {
+  text: 'three',
+  id: 3
+}, {
+  text: 'four',
+  id: 4
+}, {
+  text: 'five',
+  id: 5
+}, {
+  text: 'six',
+  id: 6
+}, {
+  text: 'seven',
+  id: 7
+}, {
+  text: 'twenty',
+  id: 20
+}, {
+  text: 'twentyone',
+  id: 21
+}];
+const mockTokens = [{
+  text: 'zero',
+  id: 0
+}, {
+  text: 'one',
+  id: 1
+}, {
+  text: 'three',
+  id: 3
+}, {
+  text: 'four',
+  id: 4
+}];
+var _default = {
+  title: 'Forms/Autocomplete',
+  decorators: [Story => {
+    const [lastKey, setLastKey] = (0, _react.useState)('none');
+    const reportKey = (0, _react.useCallback)(event => {
+      setLastKey(event.key);
+    }, []);
+    return /*#__PURE__*/_react.default.createElement(_.ThemeProvider, null, /*#__PURE__*/_react.default.createElement(_.BaseStyles, null, /*#__PURE__*/_react.default.createElement(_.Box, {
+      onKeyDownCapture: reportKey
+    }, /*#__PURE__*/_react.default.createElement(_.Box, {
+      position: "absolute",
+      right: 5,
+      top: 2
+    }, "Last key pressed: ", lastKey), /*#__PURE__*/_react.default.createElement(_.Box, {
+      paddingTop: 5
+    }, /*#__PURE__*/_react.default.createElement(Story, null)))));
+  }]
+};
+exports.default = _default;
+
+const SingleSelect = () => {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Box, {
+    as: "label",
+    display: "block",
+    htmlFor: "autocompleteInput",
+    id: "autocompleteLabel"
+  }, "Pick an option"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
+    id: "autocompleteInput"
+  }), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Overlay, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
+    items: items,
+    selectedItemIds: [],
+    "aria-labelledby": "autocompleteLabel"
+  }))));
+};
+
+exports.SingleSelect = SingleSelect;
+
+const MultiSelect = () => {
+  const [selectedItemIds, setSelectedItemIds] = (0, _react.useState)([]);
+
+  const onSelectedChange = newlySelectedItems => {
+    if (!Array.isArray(newlySelectedItems)) {
+      return;
+    }
+
+    setSelectedItemIds(newlySelectedItems.map(item => item.id));
+  };
+
+  const getItemById = id => items.find(item => item.id === id);
+
+  return /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    sx: {
+      gap: '1em'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.Box, {
+    as: "label",
+    display: "block",
+    htmlFor: "autocompleteInput",
+    id: "autocompleteLabel"
+  }, "Pick an option"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
+    id: "autocompleteInput"
+  }), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Overlay, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
+    items: items,
+    selectedItemIds: selectedItemIds,
+    "aria-labelledby": "autocompleteLabel",
+    onSelectedChange: onSelectedChange,
+    selectionVariant: "multiple"
+  })))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", null, "Selected items:"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    as: "ul",
+    my: 0
+  }, selectedItemIds.map(selectedItemId => {
+    var _getItemById;
+
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: selectedItemId
+    }, (_getItemById = getItemById(selectedItemId)) === null || _getItemById === void 0 ? void 0 : _getItemById.text);
+  }))));
+};
+
+exports.MultiSelect = MultiSelect;
+MultiSelect.displayName = "MultiSelect";
+
+const MultiSelectWithTokenInput = () => {
+  const [tokens, setTokens] = (0, _react.useState)(mockTokens);
+  const selectedTokenIds = tokens.map(token => token.id);
+  const [selectedItemIds, setSelectedItemIds] = (0, _react.useState)(selectedTokenIds);
+
+  const onTokenRemove = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId));
+    setSelectedItemIds(selectedItemIds.filter(id => id !== tokenId));
+  };
+
+  const onSelectedChange = newlySelectedItems => {
+    if (!Array.isArray(newlySelectedItems)) {
+      return;
+    }
+
+    setSelectedItemIds(newlySelectedItems.map(item => item.id));
+
+    if (newlySelectedItems.length < selectedItemIds.length) {
+      const newlySelectedItemIds = newlySelectedItems.map(({
+        id
+      }) => id);
+      const removedItemIds = selectedTokenIds.filter(id => !newlySelectedItemIds.includes(id));
+
+      for (const removedItemId of removedItemIds) {
+        onTokenRemove(removedItemId);
+      }
+
+      return;
+    }
+
+    setTokens(newlySelectedItems.map(({
+      id,
+      text
+    }) => ({
+      id,
+      text
+    })));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Box, {
+    as: "label",
+    display: "block",
+    htmlFor: "autocompleteInput",
+    id: "autocompleteLabel"
+  }, "Pick options"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
+    as: _TextInputWithTokens.default,
+    tokens: tokens,
+    onTokenRemove: onTokenRemove,
+    id: "autocompleteInput"
+  }), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Overlay, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
+    items: items,
+    selectedItemIds: selectedItemIds,
+    onSelectedChange: onSelectedChange,
+    selectionVariant: "multiple",
+    "aria-labelledby": "autocompleteLabel"
+  }))));
+};
+
+exports.MultiSelectWithTokenInput = MultiSelectWithTokenInput;
+
+const MultiSelectAddNewItem = () => {
+  const [localItemsState, setLocalItemsState] = (0, _react.useState)(items);
+  const [filterVal, setFilterVal] = (0, _react.useState)('');
+  const [tokens, setTokens] = (0, _react.useState)(mockTokens);
+  const selectedTokenIds = tokens.map(token => token.id);
+  const [selectedItemIds, setSelectedItemIds] = (0, _react.useState)(selectedTokenIds);
+
+  const onTokenRemove = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId));
+    setSelectedItemIds(selectedItemIds.filter(id => id !== tokenId));
+  };
+
+  const onSelectedChange = newlySelectedItems => {
+    if (!Array.isArray(newlySelectedItems)) {
+      return;
+    }
+
+    setSelectedItemIds(newlySelectedItems.map(item => item.id));
+
+    if (newlySelectedItems.length < selectedItemIds.length) {
+      const newlySelectedItemIds = newlySelectedItems.map(({
+        id
+      }) => id);
+      const removedItemIds = selectedTokenIds.filter(id => !newlySelectedItemIds.includes(id));
+
+      for (const removedItemId of removedItemIds) {
+        onTokenRemove(removedItemId);
+      }
+
+      return;
+    }
+
+    setTokens(newlySelectedItems.map(({
+      id,
+      text
+    }) => ({
+      id,
+      text
+    })));
+  };
+
+  const onItemSelect = item => {
+    onSelectedChange([...selectedItemIds.map(id => items.find(selectedItem => selectedItem.id === id)), item]);
+
+    if (!localItemsState.some(localItem => localItem.id === item.id)) {
+      setLocalItemsState([...localItemsState, item]);
+    }
+  };
+
+  const handleChange = e => {
+    setFilterVal(e.currentTarget.value);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Box, {
+    as: "label",
+    display: "block",
+    htmlFor: "autocompleteInput",
+    id: "autocompleteLabel"
+  }, "Pick options"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
+    as: _TextInputWithTokens.default,
+    tokens: tokens,
+    onTokenRemove: onTokenRemove,
+    onChange: handleChange,
+    id: "autocompleteInput"
+  }), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Overlay, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
+    addNewItem: filterVal && !localItemsState.map(localItem => localItem.text).includes(filterVal) ? {
+      text: `Add '${filterVal}'`,
+      handleAddItem: item => {
+        onItemSelect({ ...item,
+          text: filterVal,
+          selected: true
+        });
+        setFilterVal('');
+      }
+    } : undefined,
+    items: localItemsState,
+    selectedItemIds: selectedItemIds,
+    onSelectedChange: onSelectedChange,
+    selectionVariant: "multiple",
+    "aria-labelledby": "autocompleteLabel"
+  }))));
+};
+
+exports.MultiSelectAddNewItem = MultiSelectAddNewItem;
+
+const CustomEmptyStateMessage = () => {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Box, {
+    as: "label",
+    display: "block",
+    htmlFor: "autocompleteInput",
+    id: "autocompleteLabel"
+  }, "Pick an option"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
+    id: "autocompleteInput"
+  }), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Overlay, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
+    items: items,
+    selectedItemIds: [],
+    "aria-labelledby": "autocompleteLabel",
+    emptyStateText: "Sorry, no matches"
+  }))));
+};
+
+exports.CustomEmptyStateMessage = CustomEmptyStateMessage;
+
+const CustomSearchFilter = () => {
+  const [filterVal, setFilterVal] = (0, _react.useState)('');
+
+  const handleChange = e => {
+    setFilterVal(e.currentTarget.value);
+  };
+
+  const customFilterFn = item => item.text.includes(filterVal);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Box, {
+    as: "label",
+    display: "block",
+    htmlFor: "autocompleteInput",
+    id: "autocompleteLabel"
+  }, "Pick an option"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
+    id: "autocompleteInput",
+    onChange: handleChange
+  }), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Overlay, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
+    items: items,
+    selectedItemIds: [],
+    "aria-labelledby": "autocompleteLabel",
+    filterFn: customFilterFn
+  }))), /*#__PURE__*/_react.default.createElement(_.Text, {
+    fontSize: 0,
+    display: "block",
+    color: "fg.subtle",
+    mt: 2
+  }, "Items in dropdown are filtered if their text has no part that matches the input value"));
+};
+
+exports.CustomSearchFilter = CustomSearchFilter;
+
+const CustomSortAfterMenuClose = () => {
+  const [selectedItemIds, setSelectedItemIds] = (0, _react.useState)([]);
+
+  const isItemSelected = itemId => selectedItemIds.includes(itemId);
+
+  const onSelectedChange = newlySelectedItems => {
+    if (!Array.isArray(newlySelectedItems)) {
+      return;
+    }
+
+    setSelectedItemIds(newlySelectedItems.map(item => item.id));
+  };
+
+  const customSortFn = (itemIdA, itemIdB) => isItemSelected(itemIdA) === isItemSelected(itemIdB) ? 0 : isItemSelected(itemIdA) ? 1 : -1;
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Box, {
+    as: "label",
+    display: "block",
+    htmlFor: "autocompleteInput",
+    id: "autocompleteLabel"
+  }, "Pick an option"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
+    id: "autocompleteInput"
+  }), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Overlay, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
+    items: items,
+    selectedItemIds: selectedItemIds,
+    "aria-labelledby": "autocompleteLabel",
+    onSelectedChange: onSelectedChange,
+    sortOnCloseFn: customSortFn,
+    selectionVariant: "multiple"
+  }))), /*#__PURE__*/_react.default.createElement(_.Text, {
+    fontSize: 0,
+    display: "block",
+    color: "fg.subtle",
+    mt: 2
+  }, "When the dropdown closes, selected items are sorted to the end"));
+};
+
+exports.CustomSortAfterMenuClose = CustomSortAfterMenuClose;
+
+const WithCallbackWhenOverlayOpenStateChanges = () => {
+  const [isMenuOpen, setIsMenuOpen] = (0, _react.useState)(false);
+
+  const onOpenChange = isOpen => {
+    setIsMenuOpen(isOpen);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    sx: {
+      gap: '1em'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_.Box, {
+    as: "label",
+    display: "block",
+    htmlFor: "autocompleteInput",
+    id: "autocompleteLabel"
+  }, "Pick an option"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
+    id: "autocompleteInput"
+  }), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Overlay, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
+    items: items,
+    selectedItemIds: [],
+    "aria-labelledby": "autocompleteLabel",
+    onOpenChange: onOpenChange
+  })))), /*#__PURE__*/_react.default.createElement("div", null, "The menu is ", /*#__PURE__*/_react.default.createElement("strong", null, isMenuOpen ? 'opened' : 'closed')));
+};
+
+exports.WithCallbackWhenOverlayOpenStateChanges = WithCallbackWhenOverlayOpenStateChanges;
+WithCallbackWhenOverlayOpenStateChanges.displayName = "WithCallbackWhenOverlayOpenStateChanges";
+
+const AsyncLoadingOfItems = () => {
+  const [loadedItems, setLoadedItems] = (0, _react.useState)([]);
+
+  const onOpenChange = () => {
+    setTimeout(() => {
+      setLoadedItems(items);
+    }, 1500);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Box, {
+    as: "label",
+    display: "block",
+    htmlFor: "autocompleteInput",
+    id: "autocompleteLabel"
+  }, "Pick an option"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
+    id: "autocompleteInput"
+  }), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Overlay, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
+    items: loadedItems,
+    selectedItemIds: [],
+    "aria-labelledby": "autocompleteLabel",
+    onOpenChange: onOpenChange,
+    loading: loadedItems.length === 0
+  }))));
+};
+
+exports.AsyncLoadingOfItems = AsyncLoadingOfItems;
+
+const RenderingTheMenuOutsideAnOverlay = () => {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Box, {
+    as: "label",
+    display: "block",
+    htmlFor: "autocompleteInput",
+    id: "autocompleteLabel"
+  }, "Pick an option"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
+    id: "autocompleteInput"
+  }), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
+    items: items,
+    selectedItemIds: [],
+    "aria-labelledby": "autocompleteLabel"
+  })));
+};
+
+exports.RenderingTheMenuOutsideAnOverlay = RenderingTheMenuOutsideAnOverlay;
+
+const CustomOverlayMenuAnchor = () => {
+  const menuAnchorRef = (0, _react.useRef)(null);
+  const anchorWrapperStyles = {
+    display: 'flex',
+    alignItems: 'center',
+    flexGrow: 1,
+    flexShrink: 0,
+    flexBasis: '25%',
+    border: '1px solid black',
+    padding: '1em'
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Box, {
+    as: "label",
+    htmlFor: "autocompleteInput",
+    id: "autocompleteLabel"
+  }, "Pick labels"), /*#__PURE__*/_react.default.createElement(_.Box, _extends({}, anchorWrapperStyles, {
+    ref: menuAnchorRef
+  }), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
+    as: _.TextInput,
+    id: "autocompleteInput",
+    sx: {
+      border: '0',
+      padding: '0',
+      boxShadow: 'none',
+      ':focus-within': {
+        border: '0',
+        boxShadow: 'none'
+      }
+    }
+  }), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Overlay, {
+    menuAnchorRef: menuAnchorRef
+  }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
+    items: items,
+    selectedItemIds: [],
+    "aria-labelledby": "autocompleteLabel"
+  })))), /*#__PURE__*/_react.default.createElement(_.Text, {
+    fontSize: 0,
+    display: "block",
+    color: "fg.subtle",
+    mt: 2
+  }, "The overlay menu's position is anchored to the div with the black border instead of to the text input"));
+};
+
+exports.CustomOverlayMenuAnchor = CustomOverlayMenuAnchor;
+
+const WithCustomOverlayProps = () => {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_.Box, {
+    as: "label",
+    display: "block",
+    htmlFor: "autocompleteInput",
+    id: "autocompleteLabel"
+  }, "Pick an option"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
+    id: "autocompleteInput"
+  }), /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Overlay, {
+    overlayProps: {
+      width: 'large',
+      height: 'xsmall'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
+    items: items,
+    selectedItemIds: [],
+    "aria-labelledby": "autocompleteLabel"
+  }))));
+};
+
+exports.WithCustomOverlayProps = WithCustomOverlayProps;
+
+const InOverlayWithCustomScrollContainerRef = () => {
+  const scrollContainerRef = (0, _react.useRef)(null);
+  const inputRef = (0, _react.useRef)(null);
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+
+  const handleOpen = () => {
+    setIsOpen(true);
+    inputRef.current && inputRef.current.focus();
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_AnchoredOverlay.AnchoredOverlay, {
+    open: isOpen,
+    onOpen: handleOpen,
+    onClose: () => setIsOpen(false),
+    width: "large",
+    height: "xsmall",
+    focusTrapSettings: {
+      initialFocusRef: inputRef
+    },
+    side: "inside-top",
+    renderAnchor: props => /*#__PURE__*/_react.default.createElement(_Button.ButtonInvisible, props, "open overlay")
+  }, /*#__PURE__*/_react.default.createElement(_.Box, {
+    as: "label",
+    display: "block",
+    htmlFor: "autocompleteInput",
+    id: "autocompleteLabel",
+    sx: {
+      // visually hides this label for sighted users
+      position: 'absolute',
+      width: '1px',
+      height: '1px',
+      padding: '0',
+      margin: '-1px',
+      overflow: 'hidden',
+      clip: 'rect(0, 0, 0, 0)',
+      whiteSpace: 'nowrap',
+      borderWidth: '0'
+    }
+  }, "Pick options"), /*#__PURE__*/_react.default.createElement(_Autocomplete.default, null, /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "column",
+    height: "100%"
+  }, /*#__PURE__*/_react.default.createElement(_.Box, {
+    paddingX: "3",
+    paddingY: "1",
+    borderWidth: 0,
+    borderBottomWidth: 1,
+    borderColor: "border.default",
+    borderStyle: "solid"
+  }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Input, {
+    block: true,
+    as: _.TextInput,
+    ref: inputRef,
+    id: "autocompleteInput",
+    sx: {
+      display: 'flex',
+      border: '0',
+      padding: '0',
+      boxShadow: 'none',
+      ':focus-within': {
+        border: '0',
+        boxShadow: 'none'
+      }
+    }
+  })), /*#__PURE__*/_react.default.createElement(_.Box, {
+    overflow: "auto",
+    flexGrow: 1,
+    ref: scrollContainerRef
+  }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default.Menu, {
+    items: items,
+    selectedItemIds: [] // onSelectedChange={onSelectedChange}
+    ,
+    customScrollContainerRef: scrollContainerRef,
+    "aria-labelledby": "autocompleteLabel"
+  })))));
+};
+
+exports.InOverlayWithCustomScrollContainerRef = InOverlayWithCustomScrollContainerRef;
+InOverlayWithCustomScrollContainerRef.displayName = "InOverlayWithCustomScrollContainerRef";

package/lib/stories/Dialog.stories.js

@@ -156,7 +156,7 @@ function CustomHeader({
 
   if (typeof title === 'string' && typeof subtitle === 'string') {
     return /*#__PURE__*/_react.default.createElement(_2.Box, {
-      bg: "auto.blue.3"
+      bg: "accent.subtle"
     }, /*#__PURE__*/_react.default.createElement("h1", {
       id: dialogLabelId
     }, title.toUpperCase()), /*#__PURE__*/_react.default.createElement("h2", {
@@ -173,7 +173,7 @@ function CustomBody({
   children
 }) {
   return /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.Body, {
-    bg: "auto.red.3"
+    bg: "danger.subtle"
   }, children);
 }
 
@@ -183,7 +183,7 @@ function CustomFooter({
   footerButtons
 }) {
   return /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.Footer, {
-    bg: "auto.yellow.3"
+    bg: "attention.subtle"
   }, footerButtons ? /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.Buttons, {
     buttons: footerButtons
   }) : null);

package/lib/stories/IssueLabelToken.stories.js

@@ -56,7 +56,7 @@ const SingleExampleContainer = ({
   }
 }, label ? /*#__PURE__*/_react.default.createElement(_Text.default, {
   fontSize: 0,
-  color: "text.tertiary"
+  color: "fg.muted"
 }, label) : null, children);
 
 SingleExampleContainer.displayName = "SingleExampleContainer";

package/lib/stories/ProfileToken.stories.js

@@ -53,7 +53,7 @@ const SingleExampleContainer = ({
   }
 }, label ? /*#__PURE__*/_react.default.createElement(_Text.default, {
   fontSize: 0,
-  color: "text.tertiary"
+  color: "fg.muted"
 }, label) : null, children);
 
 SingleExampleContainer.displayName = "SingleExampleContainer";