glints-aries 4.0.230 → 4.0.232

package/es/@next/Select/Select.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Option, Section } from '../Menu';
+interface SearchableProps {
+    /** value of TextInput activator when Select is searchable */
+    inputValue?: string;
+    /** onChange of TextInput activator when Select is searchable */
+    onInputChange?(value: string): void;
+}
+export interface SelectProps {
+    allowMultiple?: boolean;
+    disabled?: boolean;
+    hasError?: boolean;
+    helpText?: React.ReactNode;
+    label?: React.ReactNode;
+    /** Margin Top = 8 ; Option height = 48 ; optionListHeight = (n options * option height) + margin top; */
+    listHeight?: number;
+    onClose?: () => void;
+    onRemoveTag?({ option }: {
+        option: string;
+    }): void;
+    onSelect?({ value }: {
+        value: string;
+    }): void;
+    options?: Option[];
+    placeholder?: string;
+    /** sets whether to be able to type in to search from the options*/
+    searchableProps?: SearchableProps;
+    /** true = Allow vertical scroll, default by 6 options. */
+    scrollable?: boolean;
+    sections?: Section[];
+    selectedValues?: string[];
+    /** sets a width for the Select component*/
+    width: string;
+}
+export declare const Select: ({ allowMultiple, disabled, hasError, helpText, label, onClose, onRemoveTag, onSelect, options, placeholder, listHeight, searchableProps, scrollable, sections, selectedValues, width, }: SelectProps) => JSX.Element;
+export {};

package/es/@next/Select/Select.js

@@ -0,0 +1,118 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Popover } from '../Popover';
+import { Typography } from '../Typography';
+import { Neutral } from '../utilities/colors';
+import { ActivatorTextInput, OptionList } from './components';
+import { ActivatorSelectContext, ActivatorTextInputContext } from './components/Activator/ActivatorContext';
+import { ActivatorSelect } from './components/Activator/ActivatorSelect';
+import { Label } from './components/Label/Label';
+import { ActivatorWrapper, HelpTextContainer } from './SelectStyle';
+export var Select = function Select(_ref) {
+  var _ref$allowMultiple = _ref.allowMultiple,
+    allowMultiple = _ref$allowMultiple === void 0 ? false : _ref$allowMultiple,
+    disabled = _ref.disabled,
+    hasError = _ref.hasError,
+    helpText = _ref.helpText,
+    label = _ref.label,
+    onClose = _ref.onClose,
+    onRemoveTag = _ref.onRemoveTag,
+    onSelect = _ref.onSelect,
+    options = _ref.options,
+    placeholder = _ref.placeholder,
+    listHeight = _ref.listHeight,
+    searchableProps = _ref.searchableProps,
+    scrollable = _ref.scrollable,
+    sections = _ref.sections,
+    selectedValues = _ref.selectedValues,
+    width = _ref.width;
+  var _useState = useState(false),
+    popoverActive = _useState[0],
+    setPopoverActive = _useState[1];
+  var _useState2 = useState(''),
+    optionListHeight = _useState2[0],
+    setOptionListHeight = _useState2[1];
+  var handleClose = useCallback(function () {
+    setPopoverActive(false);
+    onClose == null ? void 0 : onClose();
+  }, [onClose]);
+  var handleFocus = function handleFocus() {
+    setPopoverActive(true);
+  };
+  var handleBlur = function handleBlur() {
+    if (popoverActive) {
+      handleClose();
+    }
+  };
+  var handleSelectClick = function handleSelectClick() {
+    setPopoverActive(!popoverActive);
+  };
+  var activatorSelectContextValue = {
+    allowMultiple: allowMultiple,
+    disabled: disabled,
+    hasError: hasError,
+    onSelectClick: handleSelectClick,
+    selectedValues: selectedValues
+  };
+  var activatorTextInputContextValue = {
+    disabled: disabled,
+    hasError: hasError,
+    onFocus: handleFocus,
+    onBlur: handleBlur
+  };
+  useEffect(function () {
+    if (listHeight) {
+      setOptionListHeight(listHeight + 24 + "px");
+      return;
+    }
+    if (scrollable) {
+      setOptionListHeight(296 + 24 + "px");
+      return;
+    }
+  }, [listHeight, scrollable]);
+  var activator = function activator() {
+    if (searchableProps) {
+      var inputValue = searchableProps.inputValue,
+        _onInputChange = searchableProps.onInputChange;
+      return /*#__PURE__*/React.createElement(ActivatorTextInputContext.Provider, {
+        value: activatorTextInputContextValue
+      }, /*#__PURE__*/React.createElement(ActivatorTextInput, {
+        value: inputValue,
+        onChange: _onInputChange,
+        placeholder: placeholder != null ? placeholder : 'Search',
+        width: width
+      }));
+    }
+    return /*#__PURE__*/React.createElement(ActivatorSelectContext.Provider, {
+      value: activatorSelectContextValue
+    }, /*#__PURE__*/React.createElement(ActivatorSelect, {
+      disabled: disabled,
+      placeholder: "Placeholder",
+      onRemoveTag: onRemoveTag,
+      width: width,
+      values: selectedValues
+    }));
+  };
+  return /*#__PURE__*/React.createElement(Popover, {
+    active: popoverActive,
+    activator: /*#__PURE__*/React.createElement(ActivatorWrapper, {
+      width: width
+    }, label && /*#__PURE__*/React.createElement(Label, null, label), activator(), helpText && /*#__PURE__*/React.createElement(HelpTextContainer, null, /*#__PURE__*/React.createElement(Typography, {
+      as: "span",
+      variant: "subtitle2",
+      color: disabled ? Neutral.B85 : Neutral.B40
+    }, helpText))),
+    onClose: handleClose,
+    autofocusTarget: "none",
+    preventFocusOnClose: true,
+    fullWidth: true
+  }, /*#__PURE__*/React.createElement(Popover.Pane, {
+    height: optionListHeight
+  }, /*#__PURE__*/React.createElement(OptionList, {
+    allowMultiple: allowMultiple,
+    onSelect: onSelect,
+    options: options,
+    sections: sections,
+    selectedValues: selectedValues,
+    width: width
+  })));
+};

package/es/@next/Select/Select.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const NonSearchableSingleSelect: any;
+export declare const NonSearchableMultipleSelect: any;
+export declare const WithErrorNonSearchable: any;
+export declare const NonSearchableDisabled: any;
+export declare const SearchableMultiSelect: any;
+export declare const MultiSelectScrollable: any;
+export declare const WithInlineError: any;
+export declare const SearchableDisabled: any;

package/es/@next/Select/SelectStyle.d.ts

@@ -0,0 +1,6 @@
+interface ActivatorWrapperProps {
+    width?: string;
+}
+export declare const HelpTextContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ActivatorWrapper: import("styled-components").StyledComponent<"div", any, ActivatorWrapperProps, never>;
+export {};

package/es/@next/Select/SelectStyle.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { space4 } from '../utilities/spacing';
+export var HelpTextContainer = styled.div.withConfig({
+  displayName: "SelectStyle__HelpTextContainer",
+  componentId: "sc-c6sc8m-0"
+})(["margin-top:", ";"], space4);
+export var ActivatorWrapper = styled.div.withConfig({
+  displayName: "SelectStyle__ActivatorWrapper",
+  componentId: "sc-c6sc8m-1"
+})(["display:flex;flex-direction:column;width:", ";"], function (props) {
+  return props.width;
+});

package/es/@next/Select/components/Activator/ActivatorContext.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { ActivatorSelectProps } from './ActivatorSelect';
+import { ActivatorTextInputProps } from './ActivatorTextInput';
+export interface ActivatorSelectContextProps extends ActivatorSelectProps {
+    allowMultiple?: boolean;
+    disabled?: boolean;
+    hasError?: boolean;
+    onSelectClick(): void;
+    selectedValues?: string[];
+}
+export interface ActivatorTextInputContextProps extends ActivatorTextInputProps {
+    disabled?: boolean;
+}
+export declare const ActivatorSelectContext: import("react").Context<ActivatorSelectContextProps>;
+export declare const ActivatorTextInputContext: import("react").Context<ActivatorTextInputContextProps>;
+export declare const useActivatorSelect: () => ActivatorSelectContextProps;
+export declare const useActivatorTextInput: () => ActivatorTextInputContextProps;

package/es/@next/Select/components/Activator/ActivatorContext.js

@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+export var ActivatorSelectContext = /*#__PURE__*/createContext(undefined);
+export var ActivatorTextInputContext = /*#__PURE__*/createContext(undefined);
+export var useActivatorSelect = function useActivatorSelect() {
+  var context = useContext(ActivatorSelectContext);
+  if (!context) {
+    throw new Error('No ActivatorSelectContext was provided. Your component must be wrapped in a <ActivatorSelectContext.Provider>');
+  }
+  return context;
+};
+export var useActivatorTextInput = function useActivatorTextInput() {
+  var context = useContext(ActivatorTextInputContext);
+  if (!context) {
+    throw new Error('No ActivatorTextInputContext was provided. Your component must be wrapped in a <ActivatorTextInputContext.Provider>');
+  }
+  return context;
+};

package/es/@next/Select/components/Activator/ActivatorSelect.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface ActivatorSelectProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    values?: string[];
+    placeholder?: string;
+    onRemoveTag?({ option }: {
+        option: string;
+    }): void;
+    width?: string;
+}
+export declare const ActivatorSelect: ({ placeholder, values, onClick, onRemoveTag, width, ...props }: ActivatorSelectProps) => JSX.Element;

package/es/@next/Select/components/Activator/ActivatorSelect.js

@@ -0,0 +1,71 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["placeholder", "values", "onClick", "onRemoveTag", "width"];
+import React, { useRef } from 'react';
+import { Icon } from '../../../Icon';
+import { Typography } from '../../../Typography';
+import { Blue, Neutral } from '../../../utilities/colors';
+import { useActivatorSelect } from './ActivatorContext';
+import { StyledSelect, StyledTag, TagsContainer } from './ActivatorStyle';
+export var ActivatorSelect = function ActivatorSelect(_ref) {
+  var placeholder = _ref.placeholder,
+    values = _ref.values,
+    onClick = _ref.onClick,
+    onRemoveTag = _ref.onRemoveTag,
+    width = _ref.width,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var activatorRef = useRef(null);
+  var filteredValues = values == null ? void 0 : values.filter(function (value) {
+    return value != '';
+  });
+  var hasValue = filteredValues.length > 0;
+  var activatorContext = useActivatorSelect();
+  var allowMultiple = activatorContext.allowMultiple,
+    disabled = activatorContext.disabled,
+    onSelectClick = activatorContext.onSelectClick,
+    hasError = activatorContext.hasError,
+    selectedValues = activatorContext.selectedValues;
+  var handleClick = function handleClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    onSelectClick();
+    onClick;
+  };
+  var placeholderMarkup = /*#__PURE__*/React.createElement(Typography, {
+    variant: "body1",
+    as: "span",
+    color: disabled ? Neutral.B85 : Neutral.B40
+  }, placeholder);
+  var tagsMarkup = function tagsMarkup() {
+    var hasSelectedValues = selectedValues.length > 0;
+    if (!hasSelectedValues) {
+      return placeholderMarkup;
+    }
+    if (hasSelectedValues) {
+      return /*#__PURE__*/React.createElement(TagsContainer, null, /*#__PURE__*/React.createElement(StyledTag, {
+        key: "option-" + selectedValues[0],
+        onRemove: onRemoveTag({
+          option: selectedValues[0]
+        }),
+        textColor: Blue.S99
+      }, selectedValues[0]), selectedValues.length > 1 && /*#__PURE__*/React.createElement(Typography, {
+        variant: "caption",
+        color: disabled ? Neutral.B85 : Neutral.B40
+      }, "... and ", selectedValues.length - 1, " more"));
+    }
+  };
+  return /*#__PURE__*/React.createElement(StyledSelect, _extends({}, props, {
+    ref: activatorRef,
+    "data-error": hasError,
+    onClick: handleClick,
+    disabled: disabled,
+    width: width
+  }), allowMultiple ? tagsMarkup() : /*#__PURE__*/React.createElement(Typography, {
+    variant: "body1",
+    color: disabled ? Neutral.B85 : Neutral.B40
+  }, hasValue ? filteredValues[0] : placeholderMarkup), /*#__PURE__*/React.createElement(Icon, {
+    height: 24,
+    name: "ri-arrow-m-down-line",
+    fill: disabled ? Neutral.B85 : Neutral.B40
+  }));
+};

package/es/@next/Select/components/Activator/ActivatorStyle.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ActivatorSelectProps } from './ActivatorSelect';
+export declare const StyledSelect: import("styled-components").StyledComponent<"button", any, ActivatorSelectProps, never>;
+export declare const TagsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTag: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../Tag").TagProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledTextInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("../../../Input/Input").InputProps, "type" | "onChange"> & {
+    canClear?: boolean;
+    onChange?: (value: string) => void;
+} & import("react").RefAttributes<HTMLInputElement>>, any, {}, never>;

package/es/@next/Select/components/Activator/ActivatorStyle.js

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+import * as Breakpoints from '../../../utilities/breakpoints/Breakpoints';
+import { borderRadius4 } from '../../../utilities/borderRadius';
+import { Neutral, Red } from '../../../utilities/colors';
+import { NotoSans } from '../../../utilities/fonts';
+import { space8 } from '../../../utilities/spacing';
+import { TextInput } from '../../../TextInput';
+import { Tag } from '../../../Tag';
+export var StyledSelect = styled.button.withConfig({
+  displayName: "ActivatorStyle__StyledSelect",
+  componentId: "sc-rui73p-0"
+})(["display:flex;align-items:center;justify-content:space-between;height:36px;cursor:pointer;padding:0px 8px 0px 12px;border:1px solid ", ";box-shadow:0px 1px 0px rgba(0,0,0,0.05);border-radius:", ";background:", ";width:", ";color:", ";font-family:", ",sans-serif;font-weight:400;font-size:16px;line-height:150%;letter-spacing:0px;@media (max-width:", "){font-size:14px;}&:focus{outline:none;box-shadow:0px 0px 0px 1px #ffffff,0px 0px 0px 3px #6cc9ec;}&:disabled{background:", ";pointer-events:none;cursor:default;border:1px solid ", ";}&[data-error='true']{border:1px solid ", ";border-radius:", ";}"], Neutral.B68, borderRadius4, Neutral.B100, function (props) {
+  return props.width;
+}, Neutral.B18, NotoSans, Breakpoints.large, Neutral.B95, Neutral.B85, Red.B93, borderRadius4);
+export var TagsContainer = styled.div.withConfig({
+  displayName: "ActivatorStyle__TagsContainer",
+  componentId: "sc-rui73p-1"
+})(["display:flex;justify-content:space-between;flex-direction:row;align-items:center;"]);
+export var StyledTag = styled(Tag).withConfig({
+  displayName: "ActivatorStyle__StyledTag",
+  componentId: "sc-rui73p-2"
+})(["height:28px;margin-right:", ";"], space8);
+export var StyledTextInput = styled(TextInput).withConfig({
+  displayName: "ActivatorStyle__StyledTextInput",
+  componentId: "sc-rui73p-3"
+})(["width:", ";"], function (props) {
+  return props.width;
+});

package/es/@next/Select/components/Activator/ActivatorTextInput.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { TextInputProps } from '../../../TextInput';
+export interface ActivatorTextInputProps extends Omit<TextInputProps, 'onChange'> {
+    hasError?: boolean;
+    onChange?(value: string): void;
+    width?: string;
+}
+export declare const ActivatorTextInput: ({ onChange, value, width, ...props }: ActivatorTextInputProps) => JSX.Element;

package/es/@next/Select/components/Activator/ActivatorTextInput.js

@@ -0,0 +1,38 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["onChange", "value", "width"];
+import React, { useRef } from 'react';
+import { Icon } from '../../../Icon';
+import { useActivatorTextInput } from './ActivatorContext';
+import { StyledTextInput } from './ActivatorStyle';
+export var ActivatorTextInput = function ActivatorTextInput(_ref) {
+  var onChange = _ref.onChange,
+    value = _ref.value,
+    width = _ref.width,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var activatorRef = useRef(null);
+  var activatorContext = useActivatorTextInput();
+  var disabled = activatorContext.disabled,
+    onFocus = activatorContext.onFocus,
+    hasError = activatorContext.hasError;
+  var handleChange = function handleChange(_ref2) {
+    var value = _ref2.value;
+    if (onChange) onChange(value);
+  };
+  return /*#__PURE__*/React.createElement(StyledTextInput, _extends({}, props, {
+    ref: activatorRef,
+    prefix: /*#__PURE__*/React.createElement(Icon, {
+      name: "ri-search"
+    }),
+    value: value,
+    onChange: function onChange(value) {
+      return handleChange({
+        value: value
+      });
+    },
+    onFocus: onFocus,
+    error: hasError,
+    disabled: disabled,
+    width: width
+  }));
+};

package/es/@next/Select/components/Activator/index.d.ts

@@ -0,0 +1,2 @@
+export { ActivatorTextInput } from './ActivatorTextInput';
+export { ActivatorSelect } from './ActivatorSelect';

package/es/@next/Select/components/Activator/index.js

@@ -0,0 +1,2 @@
+export { ActivatorTextInput } from './ActivatorTextInput';
+export { ActivatorSelect } from './ActivatorSelect';

package/es/@next/Select/components/Label/Label.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const Label: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;

package/es/@next/Select/components/Label/Label.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Typography } from '../../../Typography';
+import { Neutral } from '../../../utilities/colors';
+export var Label = function Label(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "subtitle2",
+    color: Neutral.B18
+  }, children);
+};

package/es/@next/Select/components/OptionList/OptionList.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { MenuProps } from '../../../Menu';
+export interface OptionListProps extends MenuProps {
+    isEmpty?: boolean;
+    noOptionsMessage?: React.ReactNode;
+    onSelect?({ value }: {
+        value: string;
+    }): void;
+    width?: string;
+}
+export interface NoOptionListProps {
+    noOptionsMessage?: React.ReactNode;
+}
+export declare const NoOptionList: ({ noOptionsMessage, }: NoOptionListProps) => JSX.Element;
+export declare const OptionList: ({ allowMultiple, noOptionsMessage, onSelect, options, sections, selectedValues, title, width, }: OptionListProps) => JSX.Element;

package/es/@next/Select/components/OptionList/OptionList.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Menu } from '../../../Menu';
+import { Typography } from '../../../Typography';
+import { Neutral } from '../../../utilities/colors';
+import { EmptyOptionContainer, OptionListContainer } from './OptionListStyle';
+export var NoOptionList = function NoOptionList(_ref) {
+  var _ref$noOptionsMessage = _ref.noOptionsMessage,
+    noOptionsMessage = _ref$noOptionsMessage === void 0 ? 'No matching results' : _ref$noOptionsMessage;
+  return /*#__PURE__*/React.createElement(EmptyOptionContainer, null, /*#__PURE__*/React.createElement(Typography, {
+    as: "span",
+    variant: "body2",
+    color: Neutral.B40
+  }, noOptionsMessage));
+};
+export var OptionList = function OptionList(_ref2) {
+  var allowMultiple = _ref2.allowMultiple,
+    noOptionsMessage = _ref2.noOptionsMessage,
+    onSelect = _ref2.onSelect,
+    options = _ref2.options,
+    sections = _ref2.sections,
+    selectedValues = _ref2.selectedValues,
+    title = _ref2.title,
+    width = _ref2.width;
+  var hasOptions = options.length > 0;
+  var onOptionSelect = function onOptionSelect(_ref3) {
+    var value = _ref3.value;
+    if (onSelect) {
+      onSelect({
+        value: value
+      });
+      return;
+    }
+  };
+  return /*#__PURE__*/React.createElement(OptionListContainer, {
+    width: width
+  }, hasOptions ? /*#__PURE__*/React.createElement(Menu, {
+    allowMultiple: allowMultiple,
+    options: options,
+    onClick: onOptionSelect,
+    sections: sections,
+    selectedValues: selectedValues,
+    title: title
+  }) : /*#__PURE__*/React.createElement(NoOptionList, {
+    noOptionsMessage: noOptionsMessage
+  }));
+};

package/es/@next/Select/components/OptionList/OptionListStyle.d.ts

@@ -0,0 +1,6 @@
+interface OptionListContainerProps {
+    width?: string;
+}
+export declare const OptionListContainer: import("styled-components").StyledComponent<"div", any, OptionListContainerProps, never>;
+export declare const EmptyOptionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/es/@next/Select/components/OptionList/OptionListStyle.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { space8 } from '../../../utilities/spacing';
+export var OptionListContainer = styled.div.withConfig({
+  displayName: "OptionListStyle__OptionListContainer",
+  componentId: "sc-1ytfzi1-0"
+})(["width:", ";padding:", " 0;"], function (props) {
+  return props.width;
+}, space8);
+export var EmptyOptionContainer = styled.div.withConfig({
+  displayName: "OptionListStyle__EmptyOptionContainer",
+  componentId: "sc-1ytfzi1-1"
+})(["display:flex;align-items:center;justify-content:center;margin:10px 0;"]);

package/es/@next/Select/components/OptionList/index.d.ts

@@ -0,0 +1 @@
+export { OptionList } from './OptionList';

package/es/@next/Select/components/OptionList/index.js

@@ -0,0 +1 @@
+export { OptionList } from './OptionList';

package/es/@next/Select/components/index.d.ts

@@ -0,0 +1,2 @@
+export { ActivatorSelect, ActivatorTextInput } from './Activator';
+export * from './OptionList';

package/es/@next/Select/components/index.js

@@ -0,0 +1,2 @@
+export { ActivatorSelect, ActivatorTextInput } from './Activator';
+export * from './OptionList';

package/es/@next/Select/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Select';
+export * from './components';

package/es/@next/Select/index.js

@@ -0,0 +1,2 @@
+export * from './Select';
+export * from './components';

package/es/@next/Select/selectStoryHelper/NonSearchableMultiSelect.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SelectProps } from '../Select';
+export declare const NonSearchableMultiSelect: ({ options, disabled, ...args }: SelectProps) => JSX.Element;

package/es/@next/Select/selectStoryHelper/NonSearchableMultiSelect.js

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["options", "disabled"];
+import React, { useState } from 'react';
+import { Select } from '../Select';
+export var NonSearchableMultiSelect = function NonSearchableMultiSelect(_ref) {
+  var options = _ref.options,
+    disabled = _ref.disabled,
+    args = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useState = useState([]),
+    selected = _useState[0],
+    setSelected = _useState[1];
+  var handleSelect = function handleSelect(_ref2) {
+    var value = _ref2.value;
+    if (!selected.includes(value)) {
+      setSelected([].concat(selected, [value]));
+      return;
+    }
+    setSelected(selected.filter(function (option) {
+      return option !== value;
+    }));
+  };
+  var removeTag = function removeTag(_ref3) {
+    var option = _ref3.option;
+    return function (e) {
+      e.stopPropagation();
+      var options = [].concat(selected);
+      options.splice(options.indexOf(option), 1);
+      setSelected(options);
+    };
+  };
+  return /*#__PURE__*/React.createElement(Select, _extends({}, args, {
+    disabled: disabled,
+    onRemoveTag: removeTag,
+    options: options,
+    onSelect: handleSelect,
+    selectedValues: selected,
+    width: "400px"
+  }));
+};

package/es/@next/Select/selectStoryHelper/NonSearchableSingleSelect.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { SelectProps } from '../Select';
+export declare const SingleSelect: ({ options, allowMultiple, disabled, ...args }: SelectProps) => JSX.Element;

package/es/@next/Select/selectStoryHelper/NonSearchableSingleSelect.js

@@ -0,0 +1,27 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["options", "allowMultiple", "disabled"];
+import React, { useState } from 'react';
+import { Select } from '../Select';
+export var SingleSelect = function SingleSelect(_ref) {
+  var options = _ref.options,
+    allowMultiple = _ref.allowMultiple,
+    disabled = _ref.disabled,
+    args = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useState = useState(''),
+    selected = _useState[0],
+    setSelected = _useState[1];
+  var handleSelect = function handleSelect(_ref2) {
+    var value = _ref2.value;
+    setSelected(value);
+  };
+  return /*#__PURE__*/React.createElement(Select, _extends({}, args, {
+    allowMultiple: allowMultiple,
+    disabled: disabled,
+    options: options,
+    onSelect: handleSelect,
+    selectedValues: [selected],
+    width: "400px",
+    label: "Label"
+  }));
+};

package/es/@next/Select/selectStoryHelper/Searchable.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Option } from '../../Menu';
+interface SearchableProps {
+    data?: Option[];
+}
+export declare const SearchableSelect: ({ data, ...args }: SearchableProps) => JSX.Element;
+export {};