@primer/components 31.0.0-rc.c90c1dae → 31.0.0

package/lib/stories/Autocomplete.stories.js

@@ -1,608 +0,0 @@
-"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/AvatarStack.stories.js

@@ -1,49 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.AvatarStackStory = AvatarStackStory;
-exports.default = void 0;
-
-var _AvatarStack = _interopRequireDefault(require("../AvatarStack"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ = require("..");
-
-var _BaseStyles = _interopRequireDefault(require("../BaseStyles"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const meta = {
-  title: 'Composite components/AvatarStack',
-  component: _AvatarStack.default,
-  decorators: [Story => /*#__PURE__*/_react.default.createElement(_.ThemeProvider, null, /*#__PURE__*/_react.default.createElement(_BaseStyles.default, null, /*#__PURE__*/_react.default.createElement(Story, null)))],
-  parameters: {
-    controls: {
-      disabled: true
-    }
-  }
-};
-var _default = meta;
-exports.default = _default;
-
-function AvatarStackStory() {
-  return /*#__PURE__*/_react.default.createElement(_AvatarStack.default, null, /*#__PURE__*/_react.default.createElement("img", {
-    src: "https://avatars.githubusercontent.com/primer",
-    alt: ""
-  }), /*#__PURE__*/_react.default.createElement("img", {
-    src: "https://avatars.githubusercontent.com/github",
-    alt: ""
-  }), /*#__PURE__*/_react.default.createElement("img", {
-    src: "https://avatars.githubusercontent.com/primer",
-    alt: ""
-  }), /*#__PURE__*/_react.default.createElement("img", {
-    src: "https://avatars.githubusercontent.com/github",
-    alt: ""
-  }));
-}
-
-AvatarStackStory.displayName = "AvatarStackStory";
-AvatarStackStory.storyName = 'AvatarStack';