glints-aries 4.1.3 → 4.1.5

package/es/@next/PasswordInput/PasswordInput.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["value", "onChange", "error"];
+import React, { useState } from 'react';
+import { Icon } from '../Icon';
+import { Input } from '../Input/Input';
+import { StyledSuffixContainer } from './PasswordInputStyle';
+export var PasswordInput = /*#__PURE__*/React.forwardRef(function PasswordInput(_ref, ref) {
+  var value = _ref.value,
+    _onChange = _ref.onChange,
+    error = _ref.error,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useState = useState(false),
+    showPassword = _useState[0],
+    setShowPassword = _useState[1];
+  var suffixComponent = /*#__PURE__*/React.createElement(StyledSuffixContainer, {
+    onClick: function onClick() {
+      setShowPassword(!showPassword);
+    },
+    "data-testid": "eye-icon"
+  }, showPassword ? /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-eye-line"
+  }) : /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-eye-off-line"
+  }));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, _extends({
+    ref: ref,
+    type: showPassword ? 'text' : 'password',
+    value: value,
+    onChange: function onChange(e) {
+      return _onChange == null ? void 0 : _onChange(e.currentTarget.value);
+    },
+    error: error,
+    suffix: !props.disabled && suffixComponent
+  }, props)));
+});

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

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;

package/es/@next/PasswordInput/PasswordInputStyle.d.ts

@@ -0,0 +1 @@
+export declare const StyledSuffixContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/@next/PasswordInput/PasswordInputStyle.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export var StyledSuffixContainer = styled.div.withConfig({
+  displayName: "PasswordInputStyle__StyledSuffixContainer",
+  componentId: "sc-1anxz2z-0"
+})(["height:20px;transform:translateX(4px);svg{cursor:pointer;height:20px;width:20px;}"]);

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

@@ -0,0 +1 @@
+export * from './PasswordInput';

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

@@ -0,0 +1 @@
+export * from './PasswordInput';

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { PopoverProps as PolarisPopoverProps, PopoverPublicAPI } from 'polaris-glints';
+export declare type PopoverProps = PolarisPopoverProps;
+/** Using Popover from polaris-glints repository internally
+ * Please add `<div id="glints-portal-container"></div>` as a sibling element of where your React app is rendered.
+ * This is a temporary workaround, as React Portal need this as the anchor */
+export declare const Popover: React.ForwardRefExoticComponent<PolarisPopoverProps & React.RefAttributes<PopoverPublicAPI>> & {
+    Pane: typeof import("polaris-glints/build/ts/latest/src/components/Popover/components").Pane;
+    Section: typeof import("polaris-glints/build/ts/latest/src/components/Popover/components").Section;
+};

package/es/@next/Popover/Popover.js

@@ -0,0 +1,17 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { Popover as PolarisPopover } from 'polaris-glints';
+import { StyledPopover } from './PopoverStyle';
+var PopoverComponent = /*#__PURE__*/React.forwardRef(function Popoever(props, ref) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledPopover, null), /*#__PURE__*/React.createElement(PolarisPopover, _extends({
+    ref: ref
+  }, props)));
+});
+
+/** Using Popover from polaris-glints repository internally
+ * Please add `<div id="glints-portal-container"></div>` as a sibling element of where your React app is rendered.
+ * This is a temporary workaround, as React Portal need this as the anchor */
+export var Popover = Object.assign(PopoverComponent, {
+  Pane: PolarisPopover.Pane,
+  Section: PolarisPopover.Section
+});

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

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;

package/es/@next/Popover/PopoverFilter.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;

package/es/@next/Popover/PopoverStyle.d.ts

@@ -0,0 +1 @@
+export declare const StyledPopover: any;

package/es/@next/Popover/PopoverStyle.js

@@ -0,0 +1,7 @@
+import { createGlobalStyle } from 'styled-components';
+import { borderRadius8 } from '../utilities/borderRadius';
+import { Blue, Neutral } from '../utilities/colors';
+import { space16, space4, space8 } from '../utilities/spacing';
+
+// we need to use global style here because popover is created outside the root element for react app
+export var StyledPopover = createGlobalStyle([".Polaris-Popover{max-width:calc(100vw - ", ");margin:0.3125rem 2px ", ";box-shadow:0px ", " 20px rgba(71,71,71,0.2),0px 3px 6px -3px rgba(71,71,71,0.08);border-radius:", ";backface-visibility:hidden;will-change:left,top;}.Polaris-Popover__PopoverOverlay{opacity:0;transition:opacity 100ms ease,transform 100ms ease;transform:translateY(-0.3125rem);}.Polaris-Popover__PopoverOverlay--entering{opacity:1;transform:translateY(0);}.Polaris-Popover__PopoverOverlay--open{opacity:1;transform:none;}.Polaris-Popover__PopoverOverlay--exiting{opacity:1;transform:translateY(0);transition-duration:0ms;}.Polaris-Popover--measuring:not(.Polaris-Popover__PopoverOverlay--exiting){opacity:0;transform:translateY(-0.3125rem);}.Polaris-Popover--fullWidth{margin:0.3125rem auto 0 auto;width:100%;&.Polaris-Popover--fitContent{width:fit-content;}}.Polaris-Popover--fullWidth .Polaris-Popover__Content{max-width:none;}.Polaris-Popover--positionedAbove{margin:", " 2px 0.3125rem;}.Polaris-Popover--positionedAbove.Polaris-Popover--fullWidth{margin:0 auto 0.3125rem auto;}.Polaris-Popover__Wrapper{position:relative;overflow:hidden;background-color:", ";border-radius:", ";outline:1px solid transparent;}.Polaris-Popover__Content{position:relative;display:flex;flex-direction:column;border-radius:1px;max-width:25rem;max-height:31.25rem;}.Polaris-Popover__Content:focus{outline:none;}.Polaris-Popover__Content--fullHeight{max-height:none;}.Polaris-Popover__Content--fluidContent{max-height:none;max-width:none;}.Polaris-Popover__Pane{flex:1 1;max-width:100%;}.Polaris-Popover__Pane + .Polaris-Popover__Pane{border-top:1px solid ", ";}.Polaris-Popover__Pane:focus{outline:none;}.Polaris-Popover__Pane--fixed{overflow:visible;flex:0 0 auto;}.Polaris-Popover__Pane--captureOverscroll{overscroll-behavior:contain;}.Polaris-Popover__Section{padding:", ";color:", ";}.Polaris-Popover__Section + .Polaris-Popover__Section{border-top:1px solid #e1e3e5;}.Polaris-Popover__FocusTracker{position:absolute !important;top:0;width:0.0625rem !important;height:0.0625rem !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important;}@media print{.Polaris-Popover__PopoverOverlay--hideOnPrint{display:none !important;}}.Polaris-PositionedOverlay{position:absolute;z-index:400;}.Polaris-PositionedOverlay--fixed{position:fixed;}.Polaris-PositionedOverlay--calculating{visibility:hidden;}.Polaris-PositionedOverlay--preventInteraction{pointer-events:none;}.Polaris-Scrollable{position:relative;max-height:none;overflow-x:hidden;overflow-y:hidden;:focus{outline:0.125rem solid ", ";outline-offset:0.125rem;}}.Polaris-Scrollable--horizontal{overflow-x:auto;}.Polaris-Scrollable--vertical{overflow-y:auto;}"], space8, space4, space8, borderRadius8, space4, Neutral.B100, borderRadius8, Neutral.B85, space16, Neutral.B40, Blue.S54);

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

@@ -0,0 +1 @@
+export * from './Popover';

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

@@ -0,0 +1 @@
+export * from './Popover';

package/es/@next/Popover/popoverStoryHelper/CheckboxGroup.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare type Props = {
+    country: string;
+    cities: string[];
+    onChanged: (action: 'Add' | 'Remove', cities: string[]) => void;
+};
+export declare const CheckboxGroup: ({ country, cities, onChanged }: Props) => JSX.Element;
+export {};

package/es/@next/Popover/popoverStoryHelper/CheckboxGroup.js

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { Checkbox } from '../../Checkbox';
+export var CheckboxGroup = function CheckboxGroup(_ref) {
+  var country = _ref.country,
+    cities = _ref.cities,
+    onChanged = _ref.onChanged;
+  var _useState = useState(false),
+    isCountrySelected = _useState[0],
+    setIsCountrySelected = _useState[1];
+  var _useState2 = useState([]),
+    selectedCities = _useState2[0],
+    setSelectedCities = _useState2[1];
+  var handleCountryChanged = function handleCountryChanged(checked) {
+    setIsCountrySelected(checked);
+    if (checked) {
+      setSelectedCities(cities);
+    } else {
+      setSelectedCities([]);
+    }
+    onChanged(checked ? 'Add' : 'Remove', cities);
+  };
+  var handleCityChanged = function handleCityChanged(checked, id) {
+    if (checked && !selectedCities.includes(id)) {
+      var selected = [].concat(selectedCities, [id]);
+      setSelectedCities(selected);
+      onChanged('Add', [id]);
+      return;
+    }
+    if (!checked) {
+      var _selected = selectedCities.filter(function (s) {
+        return s !== id;
+      });
+      setSelectedCities(_selected);
+      onChanged('Remove', [id]);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    key: country
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    id: country,
+    label: country,
+    checked: isCountrySelected,
+    onChange: function onChange(newChecked) {
+      return handleCountryChanged(newChecked);
+    }
+  }), cities.map(function (city) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "div-" + city,
+      style: {
+        marginLeft: '10px'
+      }
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      id: city,
+      label: city,
+      key: city,
+      checked: selectedCities.includes(city) || isCountrySelected,
+      onChange: handleCityChanged
+    }));
+  }));
+};

package/es/@next/Popover/popoverStoryHelper/SalarySelector.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare type Props = {
+    onFromChanged: (amount: number) => void;
+    onToChanged: (amount: number) => void;
+};
+export declare const SalarySelector: ({ onFromChanged, onToChanged }: Props) => JSX.Element;
+export {};

package/es/@next/Popover/popoverStoryHelper/SalarySelector.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { CurrencyInput } from '../../CurrencyInput/CurrencyInput';
+import { Typography } from '../../Typography';
+export var SalarySelector = function SalarySelector(_ref) {
+  var onFromChanged = _ref.onFromChanged,
+    onToChanged = _ref.onToChanged;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '4px',
+      padding: '10px',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "caption"
+  }, "IDR"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CurrencyInput, {
+    currencyCode: "USD",
+    onChange: onFromChanged
+  })), /*#__PURE__*/React.createElement("div", null, "-"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CurrencyInput, {
+    currencyCode: "USD",
+    onChange: onToChanged
+  }))));
+};

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Portal: ({ children }: {
+    children: React.ReactNode;
+}) => import("react").ReactPortal;

package/es/@next/Portal/Portal.js

@@ -0,0 +1,9 @@
+import { createPortal } from 'react-dom';
+export var Portal = function Portal(_ref) {
+  var children = _ref.children;
+  var container = document.getElementById('glints-portal-container');
+  if (!container) {
+    throw new Error("Portal component requires div with id \"glints-portal-container\" as container, \n      please add it as a sibling to where your react app is rendered!");
+  }
+  return /*#__PURE__*/createPortal(children, container);
+};

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

@@ -0,0 +1 @@
+export * from './Portal';

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

@@ -0,0 +1 @@
+export * from './Portal';

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

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+export interface RadioButtonProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {
+    label?: ReactNode;
+    helperText?: ReactNode;
+    disabled?: boolean;
+    name?: string;
+    checked?: boolean;
+    value?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+/**
+ * This is a controlled component, so you need to pass in the `checked` and `onChange` prop to make it work.
+ */
+export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;

package/es/@next/RadioButton/RadioButton.js

@@ -0,0 +1,50 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["label", "helperText", "disabled", "name", "checked", "value", "onChange"];
+import React from 'react';
+import { Colors } from '..';
+import { Typography } from '../Typography';
+import { LabelWrapper, RadioButtonInput, RadioButtonWrapper } from './RadioButtonStyle';
+/**
+ * This is a controlled component, so you need to pass in the `checked` and `onChange` prop to make it work.
+ */
+export var RadioButton = /*#__PURE__*/React.forwardRef(function RadioButton(_ref, ref) {
+  var label = _ref.label,
+    helperText = _ref.helperText,
+    disabled = _ref.disabled,
+    name = _ref.name,
+    checked = _ref.checked,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var renderLabel = function renderLabel() {
+    if (!label) return null;
+    return /*#__PURE__*/React.createElement(Typography, {
+      variant: "body1",
+      as: typeof label === 'string' ? 'span' : 'div',
+      color: Colors.Neutral.B18
+    }, label);
+  };
+  var renderHelperText = function renderHelperText() {
+    if (!helperText) return null;
+    return /*#__PURE__*/React.createElement(Typography, {
+      variant: "subtitle2",
+      as: typeof label === 'string' ? 'span' : 'div',
+      color: Colors.Neutral.B40
+    }, helperText);
+  };
+  return /*#__PURE__*/React.createElement(RadioButtonWrapper, null, /*#__PURE__*/React.createElement(RadioButtonInput, _extends({
+    ref: ref,
+    disabled: disabled,
+    name: name,
+    checked: checked,
+    value: value,
+    type: "radio",
+    onChange: onChange,
+    onMouseDown: function onMouseDown(e) {
+      return e.preventDefault();
+    }
+  }, props)), /*#__PURE__*/React.createElement(LabelWrapper, {
+    "data-disabled": disabled
+  }, renderLabel(), renderHelperText()));
+});

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;
+export declare const ControlledRadioButton: () => JSX.Element;

package/es/@next/RadioButton/RadioButtonStyle.d.ts

@@ -0,0 +1,3 @@
+export declare const RadioButtonWrapper: import("styled-components").StyledComponent<"label", any, {}, never>;
+export declare const RadioButtonInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const LabelWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/@next/RadioButton/RadioButtonStyle.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import { Breakpoints, Colors } from '..';
+import { space4, space8 } from '../utilities/spacing';
+import { borderRadiusHalf } from '../utilities/borderRadius';
+export var RadioButtonWrapper = styled.label.withConfig({
+  displayName: "RadioButtonStyle__RadioButtonWrapper",
+  componentId: "sc-138orlx-0"
+})(["display:flex;align-items:flex-start;gap:", ";padding:", " 0;"], space8, space4);
+export var RadioButtonInput = styled.input.withConfig({
+  displayName: "RadioButtonStyle__RadioButtonInput",
+  componentId: "sc-138orlx-1"
+})(["cursor:pointer;appearance:none;margin:0;width:18px;height:18px;border:2px solid ", ";border-radius:", ";transform:translateY(1.5px);&::after{content:'';display:block;border-radius:", ";width:8px;height:8px;margin:3px;}@media (min-width:", "){width:22px;height:22px;transform:none;&::after{width:10px;height:10px;margin:", ";}}&:hover{border-color:", ";}&:focus-visible{box-shadow:0px 0px 0px 1px ", ",0px 0px 0px 3px ", ";outline:none;}&:disabled{cursor:not-allowed;background-color:", ";border-color:", ";}&:checked{border-color:", ";&::after{background-color:", ";}&:disabled{background-color:", ";border-color:", ";&::after{background-color:", ";}}}"], Colors.Neutral.B68, borderRadiusHalf, borderRadiusHalf, Breakpoints.large, space4, Colors.Neutral.B68, Colors.Neutral.B100, Colors.Blue.S54, Colors.Neutral.B95, Colors.Neutral.B85, Colors.Blue.S99, Colors.Blue.S99, Colors.Neutral.B95, Colors.Neutral.B85, Colors.Neutral.B85);
+export var LabelWrapper = styled.div.withConfig({
+  displayName: "RadioButtonStyle__LabelWrapper",
+  componentId: "sc-138orlx-2"
+})(["cursor:pointer;display:flex;flex-direction:column;gap:", ";&[data-disabled='true']{span,div{color:", ";}cursor:not-allowed;}"], space4, Colors.Neutral.B85);

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

@@ -0,0 +1 @@
+export * from './RadioButton';

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

@@ -0,0 +1 @@
+export * from './RadioButton';

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Option, Section } from '../Menu';
+import { IconNames } from '../Icon/icons/icons';
+interface SearchableProps {
+    /** value of TextInput activator when Select is searchable */
+    inputValue?: string;
+    /** onChange of TextInput activator when Select is searchable */
+    onInputChange?(value: string): void;
+}
+interface OptionsPlaceholderProps {
+    idle?: React.ReactNode;
+    noResult?: React.ReactNode;
+}
+export interface SelectProps {
+    allowMultiple?: boolean;
+    customActivatorIcon?: IconNames;
+    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;
+    loadingOptions?: boolean;
+    name?: string;
+    onBlur?: () => void;
+    onClose?: () => void;
+    onFocus?: () => void;
+    onRemoveTag?({ option }: {
+        option: string;
+    }): void;
+    onSelect?({ value }: {
+        value: string;
+    }): void;
+    /** callback function when select component is clicked (opened) */
+    onSelectClick?: () => void;
+    options?: Option[];
+    /** sets whether OptionList will follow content's width */
+    optionListFitContent?: boolean;
+    placeholder?: string;
+    prefix?: React.ReactNode;
+    /** sets whether Select is searchable */
+    searchable?: boolean;
+    /** props used for searchable Select */
+    searchableProps?: SearchableProps;
+    optionsPlaceholderProps?: OptionsPlaceholderProps;
+    showPopoverOnFocus?: boolean;
+    /** true = Allow vertical scroll, default by 6 options. */
+    scrollable?: boolean;
+    sections?: Section[];
+    selectedValues?: string[];
+    /** sets a width for the Select component*/
+    width: string;
+    /** sets z-index override for option list dropdown. z-index default to 400 */
+    zIndexOverride?: number;
+}
+export declare const Select: ({ allowMultiple, customActivatorIcon, disabled, hasError, helpText, label, listHeight, loadingOptions, name, onBlur, onClose, onFocus, onRemoveTag, onSelect, onSelectClick, optionListFitContent, options, placeholder, prefix, searchable, searchableProps, optionsPlaceholderProps, showPopoverOnFocus, scrollable, sections, selectedValues, width, zIndexOverride, }: SelectProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,196 @@
+import React, { useEffect, useState } from 'react';
+import { isEmpty } from 'lodash-es';
+import { Popover } from '../Popover';
+import { Typography } from '../Typography';
+import { Neutral } from '../utilities/colors';
+import { ActivatorTextInput, OptionList } from './components';
+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,
+    customActivatorIcon = _ref.customActivatorIcon,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$hasError = _ref.hasError,
+    hasError = _ref$hasError === void 0 ? false : _ref$hasError,
+    helpText = _ref.helpText,
+    label = _ref.label,
+    listHeight = _ref.listHeight,
+    _ref$loadingOptions = _ref.loadingOptions,
+    loadingOptions = _ref$loadingOptions === void 0 ? false : _ref$loadingOptions,
+    name = _ref.name,
+    onBlur = _ref.onBlur,
+    onClose = _ref.onClose,
+    onFocus = _ref.onFocus,
+    onRemoveTag = _ref.onRemoveTag,
+    onSelect = _ref.onSelect,
+    onSelectClick = _ref.onSelectClick,
+    _ref$optionListFitCon = _ref.optionListFitContent,
+    optionListFitContent = _ref$optionListFitCon === void 0 ? false : _ref$optionListFitCon,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? [] : _ref$options,
+    placeholder = _ref.placeholder,
+    prefix = _ref.prefix,
+    _ref$searchable = _ref.searchable,
+    searchable = _ref$searchable === void 0 ? false : _ref$searchable,
+    searchableProps = _ref.searchableProps,
+    optionsPlaceholderProps = _ref.optionsPlaceholderProps,
+    _ref$showPopoverOnFoc = _ref.showPopoverOnFocus,
+    showPopoverOnFocus = _ref$showPopoverOnFoc === void 0 ? false : _ref$showPopoverOnFoc,
+    _ref$scrollable = _ref.scrollable,
+    scrollable = _ref$scrollable === void 0 ? false : _ref$scrollable,
+    sections = _ref.sections,
+    selectedValues = _ref.selectedValues,
+    width = _ref.width,
+    zIndexOverride = _ref.zIndexOverride;
+  var _useState = useState(false),
+    popoverActive = _useState[0],
+    setPopoverActive = _useState[1];
+  var _useState2 = useState(''),
+    optionListHeight = _useState2[0],
+    setOptionListHeight = _useState2[1];
+  var _useState3 = useState(options),
+    menuOptions = _useState3[0],
+    setMenuOptions = _useState3[1];
+  var optionsLength = options.length;
+  var _useState4 = useState((searchableProps == null ? void 0 : searchableProps.inputValue) || ''),
+    inputValue = _useState4[0],
+    setInputValue = _useState4[1];
+  var _useState5 = useState({
+      showSelected: false,
+      showInput: true,
+      showPlaceholder: true
+    }),
+    searchableSelectState = _useState5[0],
+    setSearchableSelectState = _useState5[1];
+  var _updateSearchableSelectState = function updateSearchableSelectState(newState) {
+    setSearchableSelectState(newState);
+  };
+  var updateInputValue = function updateInputValue(newValue) {
+    setInputValue(newValue);
+  };
+  var updateMenuOptions = function updateMenuOptions(newState) {
+    setMenuOptions(newState);
+  };
+  var handleClose = function handleClose() {
+    setPopoverActive(false);
+    onClose == null ? void 0 : onClose();
+  };
+  var handleFocus = function handleFocus() {
+    if (showPopoverOnFocus) {
+      setPopoverActive(true);
+      return;
+    }
+    if (options.length < 1) {
+      setPopoverActive(false);
+      return;
+    }
+    setPopoverActive(true);
+    onFocus == null ? void 0 : onFocus();
+  };
+  var handleSelectClick = function handleSelectClick() {
+    setPopoverActive(!popoverActive);
+  };
+  useEffect(function syncInputValueFromSearchableProps() {
+    setInputValue(searchableProps == null ? void 0 : searchableProps.inputValue);
+  }, [searchableProps == null ? void 0 : searchableProps.inputValue]);
+  useEffect(function () {
+    setMenuOptions(options);
+  }, [options]);
+  useEffect(function () {
+    if (showPopoverOnFocus) return;
+    if (!isEmpty(inputValue) && optionsLength > 0) {
+      setPopoverActive(true);
+    }
+    if (inputValue === '' && optionsLength < 1) {
+      setPopoverActive(false);
+    }
+  }, [inputValue, optionsLength, showPopoverOnFocus]);
+  useEffect(function () {
+    if (listHeight) {
+      setOptionListHeight(listHeight + 24 + "px");
+      return;
+    }
+    if (scrollable) {
+      setOptionListHeight(296 + 24 + "px");
+      return;
+    }
+  }, [listHeight, scrollable]);
+  var activator = function activator() {
+    if (searchable || searchableProps) {
+      return /*#__PURE__*/React.createElement(ActivatorTextInput, {
+        allowMultiple: allowMultiple,
+        disabled: disabled,
+        hasError: hasError,
+        onChange: searchableProps == null ? void 0 : searchableProps.onInputChange,
+        placeholder: placeholder != null ? placeholder : 'Search',
+        width: width,
+        selectedValues: selectedValues,
+        onBlur: onBlur,
+        onSelect: onSelect,
+        onFocus: handleFocus,
+        inputValue: inputValue,
+        updateInputValue: updateInputValue,
+        searchableSelectState: searchableSelectState,
+        updateSearchableSelectState: function updateSearchableSelectState(newState) {
+          return _updateSearchableSelectState(newState);
+        },
+        options: options,
+        updateMenuOptions: updateMenuOptions,
+        prefix: prefix,
+        name: name
+      });
+    }
+    return /*#__PURE__*/React.createElement(ActivatorSelect, {
+      allowMultiple: allowMultiple,
+      customActivatorIcon: customActivatorIcon,
+      disabled: disabled,
+      hasError: hasError,
+      placeholder: placeholder != null ? placeholder : 'Placeholder',
+      onBlur: onBlur,
+      onRemoveTag: onRemoveTag,
+      onSelectClick: handleSelectClick,
+      width: width,
+      selectedValues: selectedValues,
+      options: options,
+      name: name,
+      prefix: prefix,
+      onClick: onSelectClick
+    });
+  };
+  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,
+    preferredAlignment: "left",
+    preferredPosition: "below",
+    fullWidth: true,
+    fitContent: optionListFitContent,
+    zIndexOverride: zIndexOverride
+  }, !disabled && /*#__PURE__*/React.createElement(Popover.Pane, {
+    height: optionListHeight
+  }, /*#__PURE__*/React.createElement(OptionList, {
+    loading: loadingOptions,
+    menuOptions: menuOptions,
+    allowMultiple: allowMultiple,
+    onSelect: onSelect,
+    sections: sections,
+    selectedValues: selectedValues,
+    width: width,
+    onMenuClose: handleClose,
+    noOptionsMessage: optionsPlaceholderProps && (!inputValue ? optionsPlaceholderProps.idle : optionsPlaceholderProps.noResult),
+    updateSearchableSelectState: function updateSearchableSelectState(newState) {
+      return _updateSearchableSelectState(newState);
+    }
+  })));
+};

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

@@ -0,0 +1,20 @@
+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 NonSearchablePrefixed: any;
+export declare const SearchableMultiSelect: any;
+export declare const SearchableSingleSelect: any;
+export declare const SearchableSingleSelectWithOverflowingInputState: any;
+export declare const SearchableSingleSelectWithInitialValue: any;
+export declare const SearchableSingleWithInputState: any;
+export declare const AsyncSearchableSingleWithInputState: any;
+export declare const AsyncSearchableSingleWithInputStateCustomPopoverPlaceholder: any;
+export declare const MultiSelectScrollable: any;
+export declare const WithInlineError: any;
+export declare const SearchableDisabled: any;
+export declare const WithCustomPrefix: any;
+export declare const OptionsWithSublabel: 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 {};