@spaced-out/ui-design-system 0.4.12 → 0.4.13-beta.1

package/lib/components/TokenListInput/TokenListInput.stories.js

@@ -0,0 +1,877 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._TokenListInputWithError = exports._TokenListInputLocked = exports._TokenListInputGroup = exports._TokenListInputDisabled = exports._TokenListInput = exports._CustomOptionTokenListInput = exports._AllowArbitraryValues = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _useArbitraryOptionAddition = require("../../hooks/useArbitraryOptionAddition");
+var _useFilteredOptions = require("../../hooks/useFilteredOptions");
+var _classify = require("../../utils/classify");
+var _Icon = require("../Icon");
+var _Text = require("../Text");
+var _Tooltip = require("../Tooltip");
+var _TokenListInput2 = require("./TokenListInput");
+var _TokenListInputStoriesModule = _interopRequireDefault(require("./TokenListInput.stories.module.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const elevationOptions = [...Object.values(_Tooltip.ELEVATION_TYPES)];
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'Form Components/Token List Input',
+  component: _TokenListInput2.TokenListInput,
+  argTypes: {
+    classNames: {
+      description: 'Custom class names for styling the wrapper, box, and input.',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: '{ wrapper?: string, box?: string, input?: string }'
+        }
+      }
+    },
+    clickAwayRef: {
+      description: 'Ref for the click-away handler, used to detect clicks outside the component.',
+      control: false,
+      table: {
+        type: {
+          summary: 'ClickAwayRefType'
+        }
+      }
+    },
+    disabled: {
+      description: 'Disables user interaction with the input and menu.',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: 'false'
+        }
+      }
+    },
+    elevation: {
+      description: 'This is passed to TokenListInput. Elevation level for the dropdown menu controls the z-index stacking order. Default is set to "modal" elevation. Use higher elevation levels when rendering the dropdown above other elevated elements like Modal, Toast, etc.',
+      control: {
+        type: 'select'
+      },
+      options: elevationOptions,
+      table: {
+        type: {
+          summary: 'enum'
+        },
+        defaultValue: {
+          summary: 'modal'
+        }
+      }
+    },
+    error: {
+      description: 'if **true**, the component is moved to error state, Error state displays a red border surrounding input',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: 'false'
+        }
+      }
+    },
+    errorText: {
+      description: 'Error text to be displayed on the bottom of the input. This uses `colorTextDanger`',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    focusOnMount: {
+      description: 'If true, the input will be focused automatically when the component mounts.',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    helperText: {
+      description: 'Additional information or guidance displayed below the input. Hidden if errorText is present.',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    placeholder: {
+      description: 'Placeholder text for the input field. Used if values are empty.',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    inputValue: {
+      description: 'The current value of the input field.',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    inputPlaceholder: {
+      description: 'Placeholder text for the input field. Used if provided, otherwise falls back to `placeholder`.',
+      control: {
+        type: 'text'
+      },
+      table: {
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    limit: {
+      description: 'Maximum number of tokens that can be added. When the limit is reached, the input is disabled.',
+      control: {
+        type: 'number'
+      },
+      table: {
+        type: {
+          summary: 'number'
+        },
+        defaultValue: {
+          summary: '100'
+        }
+      }
+    },
+    isLoading: {
+      description: 'if **true**, the component would add a loader.',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        },
+        defaultValue: {
+          summary: 'false'
+        }
+      }
+    },
+    locked: {
+      description: 'If true, the input and tokens are locked and cannot be changed.',
+      control: {
+        type: 'boolean'
+      },
+      table: {
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    onChange: {
+      description: 'Callback fired when the list of selected tokens changes.',
+      control: false,
+      table: {
+        type: {
+          summary: '(values: Array<T>) => mixed'
+        }
+      }
+    },
+    onInputBlur: {
+      description: 'Callback fired when the input loses focus.',
+      control: false,
+      table: {
+        type: {
+          summary: '(e: SyntheticEvent<HTMLInputElement>) => mixed'
+        }
+      }
+    },
+    onInputChange: {
+      description: 'Callback fired when the input value changes.',
+      control: false,
+      table: {
+        type: {
+          summary: '(value: string) => mixed'
+        }
+      }
+    },
+    onInputFocus: {
+      description: 'Callback fired when the input gains focus.',
+      control: false,
+      table: {
+        type: {
+          summary: '(e: SyntheticEvent<HTMLInputElement>) => mixed'
+        }
+      }
+    },
+    size: {
+      description: 'Controls the overall size of the input field. Choose between "medium" (default) and "small".',
+      options: ['medium', 'small'],
+      control: {
+        type: 'select'
+      },
+      table: {
+        type: {
+          summary: '"medium" | "small"'
+        },
+        defaultValue: {
+          summary: 'medium'
+        }
+      }
+    },
+    tabIndex: {
+      description: 'Tab index for the input field.',
+      control: {
+        type: 'number'
+      },
+      table: {
+        type: {
+          summary: 'number'
+        }
+      }
+    },
+    values: {
+      description: 'The current list of selected tokens.',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: 'Array<T>'
+        }
+      }
+    },
+    menu: {
+      description: 'Props for the dropdown menu, including options, grouped options, and custom label resolver.',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: 'TokenListMenuProps<T>'
+        }
+      }
+    },
+    onMenuOpen: {
+      description: 'Callback fired when the menu is opened.',
+      control: false,
+      table: {
+        type: {
+          summary: '() => mixed'
+        }
+      }
+    },
+    onMenuClose: {
+      description: 'Callback fired when the menu is closed.',
+      control: false,
+      table: {
+        type: {
+          summary: '() => mixed'
+        }
+      }
+    },
+    resolveTokenValue: {
+      description: 'Custom render function for displaying a token value.',
+      control: false,
+      table: {
+        type: {
+          summary: '(ResolveTokenValueProps<T>) => React.ReactNode'
+        }
+      }
+    },
+    inputProps: {
+      description: 'Additional props to spread onto the input element.',
+      control: {
+        type: 'object'
+      },
+      table: {
+        type: {
+          summary: 'InputProps'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      subtitle: 'A flexible input for managing a list of tokens, supporting both selection from a dropdown and free-form entry.',
+      description: {
+        component: `
+\`\`\`js
+import { TokenListInput } from '@spaced-out/ui-design-system/lib/components/TokenListInput';
+\`\`\`
+
+**TokenListInput** provides a user-friendly interface for entering and managing multiple values as tokens. Users can select from a dropdown menu or add their own custom entries (if enabled). This component is ideal for tagging, multi-select, and similar use cases.
+
+**Features:**
+- Add, remove, and manage tokens with ease
+- Supports both predefined and user-defined (arbitrary) options
+- Customizable option rendering (icons, custom components, etc.)
+- Configurable maximum token limit
+- Disabled and locked states for controlled usage
+- Helper and error text for enhanced user feedback
+
+**Props Overview:**
+- \`classNames\`: Custom class names for styling
+- \`clickAwayRef\`: Ref for click-away detection
+- \`disabled\`: Disables the input and menu
+- \`errorText\`: Error message below the input
+- \`focusOnMount\`: Auto-focus input on mount
+- \`helperText\`: Guidance below the input
+- \`inputValue\`: Current input value
+- \`inputPlaceholder\`: Placeholder for the input field
+- \`limit\`: Maximum number of tokens
+- \`locked\`: Locks the input and tokens
+- \`onChange\`: Callback for token changes
+- \`onInputBlur\`: Callback for input blur
+- \`onInputChange\`: Callback for input value change
+- \`onInputFocus\`: Callback for input focus
+- \`placeholder\`: Fallback placeholder for the input
+- \`size\`: Input size ("medium" or "small")
+- \`tabIndex\`: Tab index for the input
+- \`values\`: Selected tokens
+- \`menu\`: Dropdown menu props
+- \`onMenuOpen\`: Callback for menu open
+- \`onMenuClose\`: Callback for menu close
+- \`resolveTokenValue\`: Custom token renderer
+- \`inputProps\`: Additional input props
+
+**Usage Example:**
+
+\`\`\`jsx
+<TokenListInput
+  values={[{ key: 'react', label: 'React' }]}
+  onChange={setValues}
+  inputValue={input}
+  onInputChange={setInput}
+  inputPlaceholder="Add a tag"
+  limit={5}
+  helperText="Add up to 5 tags"
+  errorText=""
+  size="medium"
+  disabled={false}
+  locked={false}
+  menu={{
+    options: [
+      { key: 'react', label: 'React' },
+      { key: 'vue', label: 'Vue' },
+      { key: 'angular', label: 'Angular' },
+    ],
+  }}
+/>
+\`\`\`
+        `
+      }
+    },
+    storySource: {
+      componentPath: '/src/components/TokenListInput/TokenListInput.jsx'
+    }
+  }
+};
+const _TokenListInput = args => {
+  const options = [{
+    key: '1',
+    label: 'Option 1'
+  }, {
+    key: '2',
+    label: 'Option 2'
+  }, {
+    key: '3',
+    label: 'Option 3'
+  }, {
+    key: '4',
+    label: 'Option 4'
+  }];
+  const [values, setValues] = React.useState([{
+    label: 'apple',
+    key: 'ap'
+  }, {
+    label: 'b',
+    key: 'b'
+  }]);
+  const [input, setInput] = React.useState('');
+  return /*#__PURE__*/React.createElement("div", {
+    className: _TokenListInputStoriesModule.default.tokenListWrapper
+  }, /*#__PURE__*/React.createElement(_TokenListInput2.TokenListInput, _extends({}, args, {
+    values: values,
+    onChange: setValues,
+    inputValue: input,
+    onInputChange: setInput,
+    menu: {
+      options
+    }
+  })));
+};
+exports._TokenListInput = _TokenListInput;
+_TokenListInput.args = {
+  classNames: {
+    wrapper: ''
+  }
+};
+const _TokenListInputWithError = args => {
+  const options = [{
+    key: '1',
+    label: 'Eden Porter',
+    iconLeft: 'user'
+  }, {
+    key: '2',
+    label: 'Verda Rodgers',
+    iconLeft: 'user'
+  }, {
+    key: '3',
+    label: 'Paisley Badman',
+    iconLeft: 'user'
+  }, {
+    key: '4',
+    label: 'Miranda Black',
+    iconLeft: 'user'
+  }, {
+    key: '5',
+    label: 'Pamela Fennimore',
+    iconLeft: 'user'
+  }, {
+    key: '6',
+    label: 'Geneva Rhodes',
+    iconLeft: 'user'
+  }, {
+    key: '7',
+    label: 'Rolf Kim',
+    iconLeft: 'user'
+  }, {
+    key: '8',
+    label: 'Marsh Saunders',
+    iconLeft: 'user'
+  }, {
+    key: '9',
+    label: 'Prunella Webb',
+    iconLeft: 'user'
+  }, {
+    key: '10',
+    label: 'Andy Mullins',
+    iconLeft: 'user'
+  }, {
+    key: '11',
+    label: 'Jade Watkins',
+    iconLeft: 'user'
+  }, {
+    key: '12',
+    label: 'Wally Wolfe',
+    iconLeft: 'user'
+  }, {
+    key: '13',
+    label: 'Misty Lipsey',
+    iconLeft: 'user'
+  }, {
+    key: '14',
+    label: 'Dwight Gibbs',
+    iconLeft: 'user'
+  }, {
+    key: '15',
+    label: 'Ronald Rhodes',
+    iconLeft: 'user'
+  }];
+  const [values, setValues] = React.useState([]);
+  const [input, setInput] = React.useState('');
+  const onChangeHandler = newValues => {
+    setValues(newValues);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: _TokenListInputStoriesModule.default.tokenListWrapper
+  }, /*#__PURE__*/React.createElement(_TokenListInput2.TokenListInput, _extends({}, args, {
+    menu: {
+      options
+    },
+    values: values,
+    onChange: onChangeHandler,
+    errorText: 'This is an error',
+    helperText: "Hint text for the users",
+    inputValue: input,
+    onInputChange: setInput
+  })));
+};
+exports._TokenListInputWithError = _TokenListInputWithError;
+const _TokenListInputLocked = args => {
+  const values = [{
+    key: '1',
+    label: 'Eden Porter',
+    iconLeft: 'user'
+  }, {
+    key: '2',
+    label: 'Verda Rodgers',
+    iconLeft: 'user'
+  }, {
+    key: '3',
+    label: 'Paisley Badman',
+    iconLeft: 'user'
+  }, {
+    key: '4',
+    label: 'Miranda Black',
+    iconLeft: 'user'
+  }, {
+    key: '5',
+    label: 'Pamela Fennimore',
+    iconLeft: 'user'
+  }, {
+    key: '6',
+    label: 'Geneva Rhodes',
+    iconLeft: 'user'
+  }, {
+    key: '7',
+    label: 'Rolf Kim',
+    iconLeft: 'user'
+  }, {
+    key: '8',
+    label: 'Marsh Saunders',
+    iconLeft: 'user'
+  }];
+  const [input, setInput] = React.useState('');
+  return /*#__PURE__*/React.createElement("div", {
+    className: _TokenListInputStoriesModule.default.tokenListWrapper
+  }, /*#__PURE__*/React.createElement(_TokenListInput2.TokenListInput, _extends({}, args, {
+    values: values,
+    inputValue: input,
+    onInputChange: setInput
+  })));
+};
+exports._TokenListInputLocked = _TokenListInputLocked;
+_TokenListInputLocked.args = {
+  locked: true
+};
+const _TokenListInputDisabled = args => {
+  const values = [{
+    key: '1',
+    label: 'Eden Porter',
+    iconLeft: 'user'
+  }, {
+    key: '2',
+    label: 'Verda Rodgers',
+    iconLeft: 'user'
+  }, {
+    key: '3',
+    label: 'Paisley Badman',
+    iconLeft: 'user'
+  }, {
+    key: '4',
+    label: 'Miranda Black',
+    iconLeft: 'user'
+  }, {
+    key: '5',
+    label: 'Pamela Fennimore',
+    iconLeft: 'user'
+  }, {
+    key: '6',
+    label: 'Geneva Rhodes',
+    iconLeft: 'user'
+  }, {
+    key: '7',
+    label: 'Rolf Kim',
+    iconLeft: 'user'
+  }, {
+    key: '8',
+    label: 'Marsh Saunders',
+    iconLeft: 'user'
+  }];
+  const [input, setInput] = React.useState('');
+  return /*#__PURE__*/React.createElement("div", {
+    className: _TokenListInputStoriesModule.default.tokenListWrapper
+  }, /*#__PURE__*/React.createElement(_TokenListInput2.TokenListInput, _extends({}, args, {
+    values: values,
+    inputValue: input,
+    onInputChange: setInput
+  })));
+};
+exports._TokenListInputDisabled = _TokenListInputDisabled;
+_TokenListInputDisabled.args = {
+  classNames: {
+    wrapper: _TokenListInputStoriesModule.default.tokenListInputWrapper
+  },
+  disabled: true
+};
+const TokenListInputGroupWrap = args => {
+  const [values, setValues] = React.useState([{
+    label: 'apple',
+    key: 'app'
+  }, {
+    label: 'banana',
+    key: 'ban'
+  }]);
+  const [inputValue, setInputValue] = React.useState('');
+  const {
+    filteredGroupTitleOptions
+  } = (0, _useFilteredOptions.useFilteredOptions)({
+    searchTerm: inputValue,
+    // @ts-ignore - TS2322 - Type 'TokenGroupTitleOption<TokenListOption>[] | undefined' is not assignable to type 'GroupTitleOption<TokenListOption>[] | undefined'.
+    groupTitleOptions: args.menu?.groupTitleOptions,
+    excludedKeys: values.map(value => value.key)
+  });
+  const {
+    groupTitleOptionsWithArbitrary
+  } = (0, _useArbitraryOptionAddition.useArbitraryOptionAddition)({
+    searchTerm: inputValue,
+    groupTitleOptions: filteredGroupTitleOptions,
+    excludedKeys: values.map(value => value.key),
+    makeArbitraryValue: value => ({
+      key: value,
+      label: value,
+      arbitrary: true
+    })
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: _TokenListInputStoriesModule.default.tokenListWrapper
+  }, /*#__PURE__*/React.createElement(_TokenListInput2.TokenListInput, _extends({}, args, {
+    inputValue: inputValue,
+    onInputChange: setInputValue,
+    values: values,
+    onChange: setValues,
+    menu: {
+      groupTitleOptions: groupTitleOptionsWithArbitrary,
+      resolveLabel: option => {
+        if (option.arbitrary && option.label) {
+          return `Create New "${option.label}"`;
+        }
+        return option.label || '';
+      }
+    }
+  })));
+};
+const _TokenListInputGroup = args => /*#__PURE__*/React.createElement(TokenListInputGroupWrap, args);
+exports._TokenListInputGroup = _TokenListInputGroup;
+_TokenListInputGroup.args = {
+  menu: {
+    groupTitleOptions: [{
+      groupTitle: () => /*#__PURE__*/React.createElement("div", {
+        className: _TokenListInputStoriesModule.default.titleWrapper
+      }, /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
+        color: "tertiary"
+      }, "Fast Food"), /*#__PURE__*/React.createElement("div", {
+        className: _TokenListInputStoriesModule.default.infoContainer
+      }, /*#__PURE__*/React.createElement(_Tooltip.Tooltip, {
+        title: "Hello!",
+        elevation: "menu"
+      }, /*#__PURE__*/React.createElement(_Icon.Icon, {
+        name: "circle-info",
+        size: "small",
+        color: "tertiary"
+      })))),
+      options: [{
+        key: 'burger',
+        iconLeft: 'burger',
+        label: 'Burger'
+      }, {
+        key: 'pizza',
+        iconLeft: 'pizza',
+        label: 'Pizza'
+      }, {
+        key: 'fries',
+        iconLeft: 'french-fries',
+        label: 'Fries'
+      }]
+    }, {
+      showLineDivider: true,
+      groupTitle: /*#__PURE__*/React.createElement("div", {
+        className: _TokenListInputStoriesModule.default.titleWrapper
+      }, /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
+        color: "tertiary"
+      }, "Fruits"), /*#__PURE__*/React.createElement("div", {
+        className: _TokenListInputStoriesModule.default.infoContainer
+      }, /*#__PURE__*/React.createElement(_Tooltip.Tooltip, {
+        title: "Hello!",
+        elevation: "menu"
+      }, /*#__PURE__*/React.createElement(_Icon.Icon, {
+        name: "circle-info",
+        size: "small",
+        color: "tertiary"
+      })))),
+      options: [{
+        key: 'banana',
+        iconLeft: 'banana',
+        label: 'Banana'
+      }, {
+        key: 'pear',
+        iconLeft: 'pear',
+        label: 'Pear'
+      }, {
+        key: 'lemon',
+        iconLeft: 'lemon',
+        label: 'Lemon'
+      }]
+    }]
+  }
+};
+const CustomOptionTokenListInput = args => {
+  const options = [{
+    key: '1',
+    label: 'Mango',
+    customComponent: /*#__PURE__*/React.createElement("div", {
+      className: _TokenListInputStoriesModule.default.titleWrapper
+    }, /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
+      color: "tertiary"
+    }, "Mango"), /*#__PURE__*/React.createElement("div", {
+      className: _TokenListInputStoriesModule.default.infoContainer
+    }, /*#__PURE__*/React.createElement(_Tooltip.Tooltip, {
+      title: "Hello!",
+      elevation: "menu"
+    }, /*#__PURE__*/React.createElement(_Icon.Icon, {
+      name: "circle-info",
+      size: "large",
+      color: "success",
+      type: "duotone"
+    }))))
+  }, {
+    key: '2',
+    label: 'Watermelon',
+    customComponent: /*#__PURE__*/React.createElement("div", {
+      className: _TokenListInputStoriesModule.default.titleWrapper
+    }, /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
+      color: "tertiary"
+    }, "Watermelon"), /*#__PURE__*/React.createElement("div", {
+      className: _TokenListInputStoriesModule.default.infoContainer
+    }, /*#__PURE__*/React.createElement(_Tooltip.Tooltip, {
+      title: "Hello!",
+      elevation: "menu"
+    }, /*#__PURE__*/React.createElement(_Icon.Icon, {
+      name: "circle-info",
+      size: "large",
+      color: "danger",
+      type: "duotone"
+    }))))
+  }, {
+    key: '3',
+    label: 'Option 3'
+  }, {
+    key: '4',
+    label: 'Option 4'
+  }];
+  const [values, setValues] = React.useState([{
+    label: 'apple',
+    key: 'a'
+  }, {
+    label: 'b',
+    key: 'b'
+  }]);
+  const [input, setInput] = React.useState('');
+  return /*#__PURE__*/React.createElement("div", {
+    className: _TokenListInputStoriesModule.default.tokenListWrapper
+  }, /*#__PURE__*/React.createElement(_TokenListInput2.TokenListInput, _extends({}, args, {
+    inputValue: input,
+    onInputChange: setInput,
+    values: values,
+    onChange: setValues,
+    menu: {
+      options
+    }
+  })));
+};
+const _CustomOptionTokenListInput = args => /*#__PURE__*/React.createElement(CustomOptionTokenListInput, args);
+exports._CustomOptionTokenListInput = _CustomOptionTokenListInput;
+const _AllowArbitraryValues = args => {
+  const [values, setValues] = React.useState([]);
+  const [inputValue, setInputValue] = React.useState('');
+  const {
+    filteredOptions
+  } = (0, _useFilteredOptions.useFilteredOptions)({
+    searchTerm: inputValue,
+    options: args.menu?.options,
+    excludedKeys: values.map(value => value.key)
+  });
+  const {
+    optionsWithArbitrary
+  } = (0, _useArbitraryOptionAddition.useArbitraryOptionAddition)({
+    searchTerm: inputValue,
+    options: filteredOptions,
+    excludedKeys: values.map(value => value.key),
+    makeArbitraryValue: value => ({
+      key: value,
+      label: value,
+      arbitrary: true
+    })
+  });
+  const clearHandler = () => {
+    setValues([]);
+    setInputValue('');
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: _TokenListInputStoriesModule.default.tokenListWrapper
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _TokenListInputStoriesModule.default.tokenListHeader
+  }, /*#__PURE__*/React.createElement("label", {
+    for: "token-list-input"
+  }, /*#__PURE__*/React.createElement(_Text.FormLabelSmall, {
+    color: _Text.TEXT_COLORS.secondary
+  }, "Select Tokens")), !args.disabled && !args.locked && values.length > 0 && /*#__PURE__*/React.createElement(_Text.ButtonTextExtraSmallUnderline, {
+    color: _Text.TEXT_COLORS.clickable,
+    className: (0, _classify.classify)(_TokenListInputStoriesModule.default.clearAllButton, {})
+    // @ts-ignore - TS2769 - No overload matches this call.
+    ,
+    onClick: () => {
+      clearHandler();
+    }
+    // @ts-ignore - TS7006 - Parameter 'e' implicitly has an 'any' type.
+    ,
+    onKeyDown: e => {
+      if (e.key === 'Enter') {
+        clearHandler();
+      }
+    },
+    tabIndex: 0
+  }, "Clear all")), /*#__PURE__*/React.createElement(_TokenListInput2.TokenListInput, _extends({}, args, {
+    values: values,
+    inputValue: inputValue,
+    onInputChange: setInputValue,
+    onChange: newValues => {
+      setValues(newValues);
+      setInputValue('');
+    },
+    menu: {
+      options: optionsWithArbitrary,
+      resolveLabel: option => {
+        if (option.arbitrary && option.label) {
+          return `Create New \"${option.label}\"`;
+        }
+        return option.label || '';
+      }
+    },
+    inputProps: {
+      // @ts-ignore - TS2322 - Type '{ id: string; }' is not assignable to type 'InputProps'.
+      id: 'token-list-input'
+    }
+  })));
+};
+exports._AllowArbitraryValues = _AllowArbitraryValues;
+_AllowArbitraryValues.args = {
+  menu: {
+    options: [{
+      key: '1',
+      label: 'Option 1'
+    }, {
+      key: '2',
+      label: 'Option 2'
+    }, {
+      key: '3',
+      label: 'Option 3'
+    }]
+  },
+  disabled: false,
+  locked: false
+};