@primer/components 31.0.1 → 31.0.2-rc.1e80de40

package/lib/stories/SelectPanel.stories.js

@@ -0,0 +1,399 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MultiSelectStory = MultiSelectStory;
+exports.SingleSelectStory = SingleSelectStory;
+exports.ExternalAnchorStory = ExternalAnchorStory;
+exports.SelectPanelHeightInitialWithOverflowingItemsStory = SelectPanelHeightInitialWithOverflowingItemsStory;
+exports.SelectPanelHeightInitialWithUnderflowingItemsStory = SelectPanelHeightInitialWithUnderflowingItemsStory;
+exports.SelectPanelHeightInitialWithUnderflowingItemsAfterFetch = SelectPanelHeightInitialWithUnderflowingItemsAfterFetch;
+exports.SelectPanelAboveTallBody = SelectPanelAboveTallBody;
+exports.SelectPanelHeightAndScroll = SelectPanelHeightAndScroll;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ = require("..");
+
+var _BaseStyles = _interopRequireDefault(require("../BaseStyles"));
+
+var _DropdownMenu = require("../DropdownMenu");
+
+var _SelectPanel = require("../SelectPanel");
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+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 meta = {
+  title: 'Composite components/SelectPanel',
+  component: _SelectPanel.SelectPanel,
+  decorators: [Story => {
+    return /*#__PURE__*/_react.default.createElement(_.ThemeProvider, {
+      theme: _.theme
+    }, /*#__PURE__*/_react.default.createElement(_BaseStyles.default, null, /*#__PURE__*/_react.default.createElement(Story, null)));
+  }],
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+};
+var _default = meta;
+exports.default = _default;
+
+function getColorCircle(color) {
+  return function () {
+    return /*#__PURE__*/_react.default.createElement(_Box.default, {
+      bg: color,
+      borderColor: color,
+      width: 14,
+      height: 14,
+      borderRadius: 10,
+      margin: "auto",
+      borderWidth: "1px",
+      borderStyle: "solid"
+    });
+  };
+}
+
+const items = [{
+  leadingVisual: getColorCircle('#a2eeef'),
+  text: 'enhancement',
+  id: 1
+}, {
+  leadingVisual: getColorCircle('#d73a4a'),
+  text: 'bug',
+  id: 2
+}, {
+  leadingVisual: getColorCircle('#0cf478'),
+  text: 'good first issue',
+  id: 3
+}, {
+  leadingVisual: getColorCircle('#ffd78e'),
+  text: 'design',
+  id: 4
+}, {
+  leadingVisual: getColorCircle('#ff0000'),
+  text: 'blocker',
+  id: 5
+}, {
+  leadingVisual: getColorCircle('#a4f287'),
+  text: 'backend',
+  id: 6
+}, {
+  leadingVisual: getColorCircle('#8dc6fc'),
+  text: 'frontend',
+  id: 7
+}];
+
+function MultiSelectStory() {
+  const [selected, setSelected] = _react.default.useState([items[0], items[1]]);
+
+  const [filter, setFilter] = _react.default.useState('');
+
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
+  const [open, setOpen] = (0, _react.useState)(false);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Multi Select Panel"), /*#__PURE__*/_react.default.createElement("div", null, "Please select labels that describe your issue:"), /*#__PURE__*/_react.default.createElement(_SelectPanel.SelectPanel, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/_react.default.createElement(_DropdownMenu.DropdownButton, _extends({
+      "aria-labelledby": ` ${ariaLabelledBy}`
+    }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
+    placeholderText: "Filter Labels",
+    open: open,
+    onOpenChange: setOpen,
+    items: filteredItems,
+    selected: selected,
+    onSelectedChange: setSelected,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      width: 'small',
+      height: 'xsmall'
+    }
+  }));
+}
+
+MultiSelectStory.storyName = 'Multi Select';
+
+function SingleSelectStory() {
+  const [selected, setSelected] = _react.default.useState(items[0]);
+
+  const [filter, setFilter] = _react.default.useState('');
+
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
+  const [open, setOpen] = (0, _react.useState)(false);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Single Select Panel"), /*#__PURE__*/_react.default.createElement("div", null, "Please select a label that describe your issue:"), /*#__PURE__*/_react.default.createElement(_SelectPanel.SelectPanel, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/_react.default.createElement(_DropdownMenu.DropdownButton, _extends({
+      "aria-labelledby": ` ${ariaLabelledBy}`
+    }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
+    placeholderText: "Filter Labels",
+    open: open,
+    onOpenChange: setOpen,
+    items: filteredItems,
+    selected: selected,
+    onSelectedChange: setSelected,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      width: 'small',
+      height: 'xsmall'
+    }
+  }));
+}
+
+SingleSelectStory.storyName = 'Single Select';
+
+function ExternalAnchorStory() {
+  const [selected, setSelected] = _react.default.useState(items[0]);
+
+  const [filter, setFilter] = _react.default.useState('');
+
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
+  const [open, setOpen] = (0, _react.useState)(false);
+  const buttonRef = (0, _react.useRef)(null);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Select Panel With External Anchor"), /*#__PURE__*/_react.default.createElement(_DropdownMenu.DropdownButton, {
+    ref: buttonRef,
+    onClick: () => setOpen(!open)
+  }, "Custom: ", (selected === null || selected === void 0 ? void 0 : selected.text) || 'Click Me'), /*#__PURE__*/_react.default.createElement(_SelectPanel.SelectPanel, {
+    renderAnchor: null,
+    anchorRef: buttonRef,
+    placeholderText: "Filter Labels",
+    open: open,
+    onOpenChange: setOpen,
+    items: filteredItems,
+    selected: selected,
+    onSelectedChange: setSelected,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      width: 'small',
+      height: 'xsmall'
+    }
+  }));
+}
+
+ExternalAnchorStory.storyName = 'With External Anchor';
+
+function SelectPanelHeightInitialWithOverflowingItemsStory() {
+  const [selected, setSelected] = _react.default.useState(items[0]);
+
+  const [filter, setFilter] = _react.default.useState('');
+
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
+  const [open, setOpen] = (0, _react.useState)(false);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Single Select Panel"), /*#__PURE__*/_react.default.createElement("div", null, "Please select a label that describe your issue:"), /*#__PURE__*/_react.default.createElement(_SelectPanel.SelectPanel, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/_react.default.createElement(_DropdownMenu.DropdownButton, _extends({
+      "aria-labelledby": ` ${ariaLabelledBy}`
+    }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
+    placeholderText: "Filter Labels",
+    open: open,
+    onOpenChange: setOpen,
+    items: filteredItems,
+    selected: selected,
+    onSelectedChange: setSelected,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      width: 'small',
+      height: 'initial',
+      maxHeight: 'xsmall'
+    }
+  }));
+}
+
+SelectPanelHeightInitialWithOverflowingItemsStory.storyName = 'SelectPanel, Height: Initial, Overflowing Items';
+
+function SelectPanelHeightInitialWithUnderflowingItemsStory() {
+  const underflowingItems = [items[0], items[1]];
+
+  const [selected, setSelected] = _react.default.useState(underflowingItems[0]);
+
+  const [filter, setFilter] = _react.default.useState('');
+
+  const filteredItems = underflowingItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
+  const [open, setOpen] = (0, _react.useState)(false);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Single Select Panel"), /*#__PURE__*/_react.default.createElement("div", null, "Please select a label that describe your issue:"), /*#__PURE__*/_react.default.createElement(_SelectPanel.SelectPanel, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/_react.default.createElement(_DropdownMenu.DropdownButton, _extends({
+      "aria-labelledby": ` ${ariaLabelledBy}`
+    }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
+    placeholderText: "Filter Labels",
+    open: open,
+    onOpenChange: setOpen,
+    items: filteredItems,
+    selected: selected,
+    onSelectedChange: setSelected,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      width: 'small',
+      height: 'initial',
+      maxHeight: 'xsmall'
+    }
+  }));
+}
+
+SelectPanelHeightInitialWithUnderflowingItemsStory.storyName = 'SelectPanel, Height: Initial, Underflowing Items';
+
+function SelectPanelHeightInitialWithUnderflowingItemsAfterFetch() {
+  const [selected, setSelected] = _react.default.useState(items[0]);
+
+  const [filter, setFilter] = _react.default.useState('');
+
+  const [fetchedItems, setFetchedItems] = (0, _react.useState)([]);
+
+  const filteredItems = _react.default.useMemo(() => fetchedItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())), [fetchedItems, filter]);
+
+  const [open, setOpen] = (0, _react.useState)(false);
+  const [height, setHeight] = (0, _react.useState)('auto');
+
+  const onOpenChange = () => {
+    setOpen(!open);
+    setTimeout(() => {
+      setFetchedItems([items[0], items[1]]);
+      setHeight('initial');
+    }, 1500);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Single Select Panel"), /*#__PURE__*/_react.default.createElement("div", null, "Please select a label that describe your issue:"), /*#__PURE__*/_react.default.createElement(_SelectPanel.SelectPanel, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/_react.default.createElement(_DropdownMenu.DropdownButton, _extends({
+      "aria-labelledby": ` ${ariaLabelledBy}`
+    }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
+    placeholderText: "Filter Labels",
+    open: open,
+    onOpenChange: onOpenChange,
+    loading: filteredItems.length === 0,
+    items: filteredItems,
+    selected: selected,
+    onSelectedChange: setSelected,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      width: 'small',
+      height,
+      maxHeight: 'xsmall'
+    }
+  }));
+}
+
+SelectPanelHeightInitialWithUnderflowingItemsAfterFetch.storyName = 'SelectPanel, Height: Initial, Underflowing Items (After Fetch)';
+
+function SelectPanelAboveTallBody() {
+  const [selected, setSelected] = _react.default.useState(items[0]);
+
+  const [filter, setFilter] = _react.default.useState('');
+
+  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
+  const [open, setOpen] = (0, _react.useState)(false);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", null, "Single Select Panel"), /*#__PURE__*/_react.default.createElement("div", null, "Please select a label that describe your issue:"), /*#__PURE__*/_react.default.createElement(_SelectPanel.SelectPanel, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/_react.default.createElement(_DropdownMenu.DropdownButton, _extends({
+      "aria-labelledby": ` ${ariaLabelledBy}`
+    }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
+    placeholderText: "Filter Labels",
+    open: open,
+    onOpenChange: setOpen,
+    items: filteredItems,
+    selected: selected,
+    onSelectedChange: setSelected,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      width: 'small',
+      height: 'xsmall'
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      backgroundColor: 'cornflowerblue',
+      height: '100vh'
+    }
+  }, "This element makes the body really tall. This is to test that we do not have layout/focus issues if the Portal is far down the page"));
+}
+
+SelectPanelAboveTallBody.storyName = 'SelectPanel, Above a Tall Body';
+
+function SelectPanelHeightAndScroll() {
+  const longItems = [...items, ...items, ...items, ...items, ...items, ...items, ...items, ...items];
+
+  const [selectedA, setSelectedA] = _react.default.useState(longItems[0]);
+
+  const [selectedB, setSelectedB] = _react.default.useState(longItems[0]);
+
+  const [filter, setFilter] = _react.default.useState('');
+
+  const filteredItems = longItems.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()));
+  const [openA, setOpenA] = (0, _react.useState)(false);
+  const [openB, setOpenB] = (0, _react.useState)(false);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h2", null, "With height:medium"), /*#__PURE__*/_react.default.createElement(_SelectPanel.SelectPanel, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/_react.default.createElement(_DropdownMenu.DropdownButton, _extends({
+      "aria-labelledby": ` ${ariaLabelledBy}`
+    }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
+    placeholderText: "Filter Labels",
+    open: openA,
+    onOpenChange: setOpenA,
+    items: filteredItems,
+    selected: selectedA,
+    onSelectedChange: setSelectedA,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      height: 'medium'
+    }
+  }), /*#__PURE__*/_react.default.createElement("h2", null, "With height:auto, maxheight:medium"), /*#__PURE__*/_react.default.createElement(_SelectPanel.SelectPanel, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/_react.default.createElement(_DropdownMenu.DropdownButton, _extends({
+      "aria-labelledby": ` ${ariaLabelledBy}`
+    }, anchorProps), children !== null && children !== void 0 ? children : 'Select Labels'),
+    placeholderText: "Filter Labels",
+    open: openB,
+    onOpenChange: setOpenB,
+    items: filteredItems,
+    selected: selectedB,
+    onSelectedChange: setSelectedB,
+    onFilterChange: setFilter,
+    showItemDividers: true,
+    overlayProps: {
+      height: 'auto',
+      maxHeight: 'medium'
+    }
+  }));
+}
+
+SelectPanelHeightAndScroll.storyName = 'SelectPanel, Height and Scroll';

package/lib/stories/TextInputWithTokens.stories.js

@@ -0,0 +1,235 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Unstyled = exports.TokenRemoveButtonsHidden = exports.TokenWrappingPrevented = exports.MaxHeight = exports.TokenSizeVariants = exports.UsingIssueLabelTokens = exports.Default = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ = require("..");
+
+var _TextInputWithTokens = _interopRequireDefault(require("../TextInputWithTokens"));
+
+var _IssueLabelToken = _interopRequireDefault(require("../Token/IssueLabelToken"));
+
+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; }
+
+var _default = {
+  title: 'Forms/Text Input with Tokens',
+  component: _TextInputWithTokens.default,
+  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 mockTokens = [{
+  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 Default = () => {
+  const [tokens, setTokens] = (0, _react.useState)([...mockTokens].slice(0, 2));
+
+  const onTokenRemove = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_TextInputWithTokens.default, {
+    tokens: tokens,
+    onTokenRemove: onTokenRemove
+  });
+};
+
+exports.Default = Default;
+Default.displayName = "Default";
+
+const UsingIssueLabelTokens = () => {
+  const [tokens, setTokens] = (0, _react.useState)([{
+    text: 'enhancement',
+    id: 1,
+    fillColor: '#a2eeef'
+  }, {
+    text: 'bug',
+    id: 2,
+    fillColor: '#d73a4a'
+  }, {
+    text: 'good first issue',
+    id: 3,
+    fillColor: '#0cf478'
+  }]);
+
+  const onTokenRemove = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_TextInputWithTokens.default, {
+    tokenComponent: _IssueLabelToken.default,
+    tokens: tokens,
+    onTokenRemove: onTokenRemove
+  });
+};
+
+exports.UsingIssueLabelTokens = UsingIssueLabelTokens;
+UsingIssueLabelTokens.displayName = "UsingIssueLabelTokens";
+
+const TokenSizeVariants = () => {
+  const [tokens, setTokens] = (0, _react.useState)([...mockTokens].slice(0, 2));
+
+  const onTokenRemove = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "column",
+    sx: {
+      gap: '1em'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_TextInputWithTokens.default, {
+    tokens: tokens,
+    onTokenRemove: onTokenRemove,
+    size: "small"
+  }), /*#__PURE__*/_react.default.createElement(_TextInputWithTokens.default, {
+    tokens: tokens,
+    onTokenRemove: onTokenRemove,
+    size: "medium"
+  }), /*#__PURE__*/_react.default.createElement(_TextInputWithTokens.default, {
+    tokens: tokens,
+    onTokenRemove: onTokenRemove,
+    size: "large"
+  }), /*#__PURE__*/_react.default.createElement(_TextInputWithTokens.default, {
+    tokens: tokens,
+    onTokenRemove: onTokenRemove,
+    size: "extralarge"
+  }));
+};
+
+exports.TokenSizeVariants = TokenSizeVariants;
+TokenSizeVariants.displayName = "TokenSizeVariants";
+
+const MaxHeight = () => {
+  const [tokens, setTokens] = (0, _react.useState)(mockTokens);
+
+  const onTokenRemove = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_.Box, {
+    maxWidth: "300px"
+  }, /*#__PURE__*/_react.default.createElement(_TextInputWithTokens.default, {
+    tokens: tokens,
+    onTokenRemove: onTokenRemove,
+    maxHeight: "100px"
+  }));
+};
+
+exports.MaxHeight = MaxHeight;
+MaxHeight.displayName = "MaxHeight";
+MaxHeight.storyName = 'maxHeight 200px';
+
+const TokenWrappingPrevented = () => {
+  const [tokens, setTokens] = (0, _react.useState)(mockTokens);
+
+  const onTokenRemove = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_.Box, {
+    maxWidth: "500px"
+  }, /*#__PURE__*/_react.default.createElement(_TextInputWithTokens.default, {
+    preventTokenWrapping: true,
+    block: true,
+    tokens: tokens,
+    onTokenRemove: onTokenRemove
+  }));
+};
+
+exports.TokenWrappingPrevented = TokenWrappingPrevented;
+TokenWrappingPrevented.displayName = "TokenWrappingPrevented";
+
+const TokenRemoveButtonsHidden = () => {
+  const [tokens, setTokens] = (0, _react.useState)([...mockTokens].slice(0, 2));
+
+  const onTokenRemove = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_TextInputWithTokens.default, {
+    hideTokenRemoveButtons: true,
+    tokens: tokens,
+    onTokenRemove: onTokenRemove
+  });
+};
+
+exports.TokenRemoveButtonsHidden = TokenRemoveButtonsHidden;
+TokenRemoveButtonsHidden.displayName = "TokenRemoveButtonsHidden";
+
+const Unstyled = () => {
+  const [tokens, setTokens] = (0, _react.useState)([...mockTokens].slice(0, 2));
+
+  const onTokenRemove = tokenId => {
+    setTokens(tokens.filter(token => token.id !== tokenId));
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_TextInputWithTokens.default, {
+    tokens: tokens,
+    onTokenRemove: onTokenRemove // TODO: come up with a nicer way to unstyle an input component
+    ,
+    sx: {
+      border: '0',
+      padding: '0',
+      boxShadow: 'none',
+      ':focus-within': {
+        border: '0',
+        boxShadow: 'none'
+      }
+    }
+  });
+};
+
+exports.Unstyled = Unstyled;
+Unstyled.displayName = "Unstyled";