glints-aries 4.0.231 → 4.0.233

package/lib/@next/Menu/Menu.js

@@ -8,44 +8,97 @@ var _reactIdGenerator = _interopRequireDefault(require("react-id-generator"));
 var _Typography = require("../Typography");
 var _colors = require("../utilities/colors");
 var _MenuStyle = require("./MenuStyle");
+var _MenuOptionLabel = require("./components/MenuOptionLabel");
+var _MenuOption = require("./components/MenuOption");
+var _MenuOptionCheckbox = require("./components/MenuOptionCheckbox");
 var Menu = function Menu(_ref) {
-  var id = _ref.id,
-    onChange = _ref.onChange,
+  var allowMultiple = _ref.allowMultiple,
+    id = _ref.id,
+    onClick = _ref.onClick,
     options = _ref.options,
+    sections = _ref.sections,
     selectedValues = _ref.selectedValues,
     title = _ref.title;
   var randomId = (0, _reactIdGenerator["default"])('glints-menu');
   var menuId = id ? id : randomId;
-  var handleClick = function handleClick(value) {
-    onChange([value]);
+  var renderTitle = function renderTitle(_ref2) {
+    var title = _ref2.title;
+    return /*#__PURE__*/_react["default"].createElement(_MenuStyle.TitleContainer, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+      variant: "subtitle2",
+      as: "span",
+      color: _colors.Neutral.B40
+    }, title));
+  };
+  var renderOptions = function renderOptions(_ref3) {
+    var options = _ref3.options;
+    return /*#__PURE__*/_react["default"].createElement(_MenuStyle.StyledMenu, null, options == null ? void 0 : options.map(function (option) {
+      var value = option.value,
+        label = option.label,
+        disabled = option.disabled,
+        id = option.id;
+      var randomId = (0, _reactIdGenerator["default"])('glints-menu-option');
+      var menuOptionId = id ? id : randomId;
+      var isSelected = selectedValues == null ? void 0 : selectedValues.includes(value);
+      return /*#__PURE__*/_react["default"].createElement(_MenuOption.MenuOption, {
+        key: menuOptionId,
+        value: value,
+        disabled: disabled,
+        isSelected: isSelected,
+        onClick: onClick,
+        allowMultiple: allowMultiple
+      }, /*#__PURE__*/_react["default"].createElement(_MenuOptionLabel.MenuOptionLabel, {
+        label: label
+      }));
+    }));
+  };
+  var renderOptionsWithCheckbox = function renderOptionsWithCheckbox(_ref4) {
+    var options = _ref4.options;
+    return /*#__PURE__*/_react["default"].createElement(_MenuStyle.StyledMenu, null, options == null ? void 0 : options.map(function (option) {
+      var value = option.value,
+        label = option.label,
+        disabled = option.disabled,
+        id = option.id;
+      var randomId = (0, _reactIdGenerator["default"])('glints-menu-option');
+      var menuOptionId = id ? id : randomId;
+      var isSelected = selectedValues == null ? void 0 : selectedValues.includes(value);
+      return /*#__PURE__*/_react["default"].createElement(_MenuOption.MenuOption, {
+        key: menuOptionId,
+        value: value,
+        disabled: disabled,
+        isSelected: isSelected,
+        onClick: onClick,
+        allowMultiple: allowMultiple
+      }, /*#__PURE__*/_react["default"].createElement(_MenuOptionCheckbox.MenuOptionCheckbox, {
+        isSelected: isSelected,
+        disabled: disabled,
+        label: label
+      }));
+    }));
   };
-  return /*#__PURE__*/_react["default"].createElement(_MenuStyle.StyledMenu, {
+  var renderSections = function renderSections(_ref5) {
+    var sections = _ref5.sections;
+    return /*#__PURE__*/_react["default"].createElement(_MenuStyle.StyledSections, null, sections.map(function (section, index) {
+      return /*#__PURE__*/_react["default"].createElement("li", {
+        key: "menu-section-" + title + "-" + index
+      }, renderTitle({
+        title: section == null ? void 0 : section.title
+      }), allowMultiple ? renderOptionsWithCheckbox({
+        options: section == null ? void 0 : section.options
+      }) : renderOptions({
+        options: section == null ? void 0 : section.options
+      }));
+    }));
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", {
     id: menuId
-  }, title && /*#__PURE__*/_react["default"].createElement(_MenuStyle.TitleContainer, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
-    variant: "subtitle2",
-    as: "span",
-    color: _colors.Neutral.B40
-  }, title)), options.map(function (option) {
-    var value = option.value,
-      label = option.label,
-      disabled = option.disabled,
-      id = option.id;
-    var isSelected = selectedValues == null ? void 0 : selectedValues.includes(value);
-    return /*#__PURE__*/_react["default"].createElement(_MenuStyle.ListContainer, {
-      key: id
-    }, /*#__PURE__*/_react["default"].createElement("li", {
-      key: id,
-      "aria-disabled": disabled,
-      "data-active": isSelected,
-      value: value,
-      onClick: function onClick() {
-        return handleClick(value);
-      }
-    }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
-      as: "span",
-      variant: "body1",
-      color: _colors.Neutral.B18
-    }, label)));
+  }, title && renderTitle({
+    title: title
+  }), allowMultiple ? renderOptionsWithCheckbox({
+    options: options
+  }) : renderOptions({
+    options: options
+  }), sections && renderSections({
+    sections: sections
   }));
 };
 exports.Menu = Menu;

package/lib/@next/Menu/Menu.stories.d.ts

@@ -2,3 +2,5 @@ import { Meta } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Basic: any;
+export declare const AllowMultiple: any;
+export declare const WithSections: any;

package/lib/@next/Menu/MenuStyle.d.ts

@@ -2,3 +2,4 @@ import { MenuProps } from './Menu';
 export declare const StyledMenu: import("styled-components").StyledComponent<"ul", any, MenuProps, never>;
 export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSections: import("styled-components").StyledComponent<"ul", any, {}, never>;

package/lib/@next/Menu/MenuStyle.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.TitleContainer = exports.StyledMenu = exports.ListContainer = void 0;
+exports.TitleContainer = exports.StyledSections = exports.StyledMenu = exports.ListContainer = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _borderRadius = require("../utilities/borderRadius");
 var _colors = require("../utilities/colors");
@@ -10,15 +10,20 @@ var _spacing = require("../utilities/spacing");
 var StyledMenu = _styledComponents["default"].ul.withConfig({
   displayName: "MenuStyle__StyledMenu",
   componentId: "sc-zm0l1a-0"
-})(["list-style:none;margin:", " 0;padding:0;li{display:flex;height:44px;position:relative;align-items:center;padding:0 ", ";margin-bottom:", ";&:hover{background:", ";border-radius:", ";cursor:pointer;}&:focus{outline:none;background:rgba(255,255,255,0.001);border:2px solid ", ";border-radius:", ";}&[aria-disabled='true']{cursor:default;pointer-events:none;span{color:", ";}}&[data-active='true']{background:", ";border-radius:", ";cursor:default;::before{content:'';display:block;position:absolute;top:0;left:-", ";height:44px;width:3px;background-color:", ";border-radius:0px 4px 4px 0px;}}}"], _spacing.space8, _spacing.space8, _spacing.space4, _colors.Neutral.B99, _borderRadius.borderRadius4, _colors.Blue.S54, _spacing.space4, _colors.Neutral.B85, _colors.Blue.S08, _borderRadius.borderRadius4, _spacing.space8, _colors.Blue.S99);
+})(["list-style:none;padding:0;margin:0;li{display:flex;height:44px;position:relative;align-items:center;padding:0 ", ";margin-bottom:", ";svg{height:24px;width:24px;}&:hover{background:", ";border-radius:", ";cursor:pointer;}&:focus{outline:none;background:rgba(255,255,255,0.001);border:2px solid ", ";border-radius:", ";}&[aria-disabled='true']{cursor:default;pointer-events:none;span{color:", ";}}&[data-active='true']{background:", ";border-radius:", ";cursor:default;::before{content:'';display:block;position:absolute;top:0;left:-", ";height:44px;width:3px;background-color:", ";border-radius:0px 4px 4px 0px;}&[data-multiple='true']{background:", ";::before{content:none;}}}}"], _spacing.space8, _spacing.space4, _colors.Neutral.B99, _borderRadius.borderRadius4, _colors.Blue.S54, _spacing.space4, _colors.Neutral.B85, _colors.Blue.S08, _borderRadius.borderRadius4, _spacing.space8, _colors.Blue.S99, _colors.Neutral.B100);
 exports.StyledMenu = StyledMenu;
 var TitleContainer = _styledComponents["default"].div.withConfig({
   displayName: "MenuStyle__TitleContainer",
   componentId: "sc-zm0l1a-1"
-})(["padding:", " ", ";span{text-transform:uppercase;}"], _spacing.space8, _spacing.space16);
+})(["margin:", " 0 ", ";padding:", " ", ";span{text-transform:uppercase;}"], _spacing.space8, _spacing.space4, _spacing.space8, _spacing.space16);
 exports.TitleContainer = TitleContainer;
 var ListContainer = _styledComponents["default"].div.withConfig({
   displayName: "MenuStyle__ListContainer",
   componentId: "sc-zm0l1a-2"
 })(["padding:0 ", ";"], _spacing.space8);
-exports.ListContainer = ListContainer;
+exports.ListContainer = ListContainer;
+var StyledSections = _styledComponents["default"].ul.withConfig({
+  displayName: "MenuStyle__StyledSections",
+  componentId: "sc-zm0l1a-3"
+})(["list-style:none;padding:0;margin:", " 0;"], _spacing.space8);
+exports.StyledSections = StyledSections;

package/lib/@next/Menu/components/MenuOption.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface MenuOptionProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'onClick'> {
+    id?: string;
+    disabled?: boolean;
+    isSelected?: boolean;
+    value: string;
+    onClick?({ value }: {
+        value: string;
+    }): void;
+    allowMultiple?: boolean;
+}
+export declare const MenuOption: ({ children, disabled, isSelected, onClick, value, allowMultiple, }: MenuOptionProps) => JSX.Element;

package/lib/@next/Menu/components/MenuOption.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.MenuOption = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _MenuStyle = require("../MenuStyle");
+var MenuOption = function MenuOption(_ref) {
+  var children = _ref.children,
+    disabled = _ref.disabled,
+    isSelected = _ref.isSelected,
+    onClick = _ref.onClick,
+    value = _ref.value,
+    allowMultiple = _ref.allowMultiple;
+  var handleClick = function handleClick(value) {
+    onClick({
+      value: value
+    });
+  };
+  return /*#__PURE__*/_react["default"].createElement(_MenuStyle.ListContainer, null, /*#__PURE__*/_react["default"].createElement("li", {
+    "aria-disabled": disabled,
+    "data-active": isSelected,
+    "data-multiple": allowMultiple,
+    value: value,
+    onClick: function onClick() {
+      return handleClick(value);
+    }
+  }, children));
+};
+exports.MenuOption = MenuOption;

package/lib/@next/Menu/components/MenuOptionCheckbox.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const MenuOptionCheckbox: ({ disabled, isSelected, label, }: {
+    disabled: boolean;
+    isSelected: boolean;
+    label: React.ReactNode;
+}) => JSX.Element;

package/lib/@next/Menu/components/MenuOptionCheckbox.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.MenuOptionCheckbox = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Checkbox = require("../../Checkbox");
+var MenuOptionCheckbox = function MenuOptionCheckbox(_ref) {
+  var disabled = _ref.disabled,
+    isSelected = _ref.isSelected,
+    label = _ref.label;
+  return /*#__PURE__*/_react["default"].createElement(_Checkbox.Checkbox, {
+    label: label,
+    checked: isSelected,
+    disabled: disabled
+  });
+};
+exports.MenuOptionCheckbox = MenuOptionCheckbox;

package/lib/@next/Menu/components/MenuOptionLabel.d.ts

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

package/lib/@next/Menu/components/MenuOptionLabel.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.MenuOptionLabel = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Typography = require("../../Typography");
+var _colors = require("../../utilities/colors");
+var MenuOptionLabel = function MenuOptionLabel(_ref) {
+  var label = _ref.label;
+  return /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    as: "span",
+    variant: "body1",
+    color: _colors.Neutral.B18
+  }, label);
+};
+exports.MenuOptionLabel = MenuOptionLabel;

package/lib/@next/Menu/components/index.d.ts

@@ -0,0 +1,3 @@
+export { MenuOption, MenuOptionProps } from './MenuOption';
+export { MenuOptionLabel } from './MenuOptionLabel';
+export { MenuOptionCheckbox } from './MenuOptionCheckbox';

package/lib/@next/Menu/components/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+exports.__esModule = true;
+exports.MenuOptionProps = exports.MenuOptionLabel = exports.MenuOptionCheckbox = exports.MenuOption = void 0;
+var _MenuOption = require("./MenuOption");
+exports.MenuOption = _MenuOption.MenuOption;
+exports.MenuOptionProps = _MenuOption.MenuOptionProps;
+var _MenuOptionLabel = require("./MenuOptionLabel");
+exports.MenuOptionLabel = _MenuOptionLabel.MenuOptionLabel;
+var _MenuOptionCheckbox = require("./MenuOptionCheckbox");
+exports.MenuOptionCheckbox = _MenuOptionCheckbox.MenuOptionCheckbox;

package/lib/@next/Menu/index.d.ts

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

package/lib/@next/Menu/index.js

@@ -6,4 +6,10 @@ Object.keys(_Menu).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _Menu[key]) return;
   exports[key] = _Menu[key];
+});
+var _components = require("./components");
+Object.keys(_components).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _components[key]) return;
+  exports[key] = _components[key];
 });

package/lib/@next/Menu/menuStoryHelper/PopoverMenu.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { MenuProps } from '../Menu';
+interface PopoverMenuProps extends MenuProps {
+    activatorLabel?: string;
+}
+export declare const PopoverMenu: ({ activatorLabel, allowMultiple, ...props }: PopoverMenuProps) => JSX.Element;
+export {};

package/lib/@next/Menu/menuStoryHelper/PopoverMenu.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.PopoverMenu = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireWildcard(require("react"));
+var _Button = require("../../Button");
+var _Popover = require("../../Popover");
+var _Menu = require("../Menu");
+var _excluded = ["activatorLabel", "allowMultiple"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 PopoverMenu = function PopoverMenu(_ref) {
+  var _ref$activatorLabel = _ref.activatorLabel,
+    activatorLabel = _ref$activatorLabel === void 0 ? 'Menu' : _ref$activatorLabel,
+    allowMultiple = _ref.allowMultiple,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var _useState = (0, _react.useState)(true),
+    popoverActive = _useState[0],
+    setPopoverActive = _useState[1];
+  var _useState2 = (0, _react.useState)([]),
+    selectedOptions = _useState2[0],
+    setSelectedOptions = _useState2[1];
+  var togglePopoverActive = (0, _react.useCallback)(function () {
+    return setPopoverActive(function (popoverActive) {
+      return !popoverActive;
+    });
+  }, []);
+  var handleSelect = function handleSelect(_ref2) {
+    var value = _ref2.value;
+    if (!allowMultiple) {
+      setSelectedOptions([value]);
+      return;
+    }
+    if (!selectedOptions.includes(value)) {
+      setSelectedOptions([].concat(selectedOptions, [value]));
+      return;
+    }
+    setSelectedOptions(selectedOptions.filter(function (option) {
+      return option !== value;
+    }));
+  };
+  var activator = /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+    onClick: togglePopoverActive
+  }, activatorLabel);
+  return /*#__PURE__*/_react["default"].createElement(_Popover.Popover, {
+    active: popoverActive,
+    activator: activator,
+    onClose: function onClose() {
+      return setPopoverActive(false);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Popover.Popover.Pane, null, /*#__PURE__*/_react["default"].createElement(_Menu.Menu, (0, _extends2["default"])({}, props, {
+    allowMultiple: allowMultiple,
+    onClick: handleSelect,
+    selectedValues: selectedOptions
+  }))));
+};
+exports.PopoverMenu = PopoverMenu;

package/lib/@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/lib/@next/Select/Select.js

@@ -0,0 +1,125 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Select = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Popover = require("../Popover");
+var _Typography = require("../Typography");
+var _colors = require("../utilities/colors");
+var _components = require("./components");
+var _ActivatorContext = require("./components/Activator/ActivatorContext");
+var _ActivatorSelect = require("./components/Activator/ActivatorSelect");
+var _Label = require("./components/Label/Label");
+var _SelectStyle = require("./SelectStyle");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 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 = (0, _react.useState)(false),
+    popoverActive = _useState[0],
+    setPopoverActive = _useState[1];
+  var _useState2 = (0, _react.useState)(''),
+    optionListHeight = _useState2[0],
+    setOptionListHeight = _useState2[1];
+  var handleClose = (0, _react.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
+  };
+  (0, _react.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["default"].createElement(_ActivatorContext.ActivatorTextInputContext.Provider, {
+        value: activatorTextInputContextValue
+      }, /*#__PURE__*/_react["default"].createElement(_components.ActivatorTextInput, {
+        value: inputValue,
+        onChange: _onInputChange,
+        placeholder: placeholder != null ? placeholder : 'Search',
+        width: width
+      }));
+    }
+    return /*#__PURE__*/_react["default"].createElement(_ActivatorContext.ActivatorSelectContext.Provider, {
+      value: activatorSelectContextValue
+    }, /*#__PURE__*/_react["default"].createElement(_ActivatorSelect.ActivatorSelect, {
+      disabled: disabled,
+      placeholder: "Placeholder",
+      onRemoveTag: onRemoveTag,
+      width: width,
+      values: selectedValues
+    }));
+  };
+  return /*#__PURE__*/_react["default"].createElement(_Popover.Popover, {
+    active: popoverActive,
+    activator: /*#__PURE__*/_react["default"].createElement(_SelectStyle.ActivatorWrapper, {
+      width: width
+    }, label && /*#__PURE__*/_react["default"].createElement(_Label.Label, null, label), activator(), helpText && /*#__PURE__*/_react["default"].createElement(_SelectStyle.HelpTextContainer, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+      as: "span",
+      variant: "subtitle2",
+      color: disabled ? _colors.Neutral.B85 : _colors.Neutral.B40
+    }, helpText))),
+    onClose: handleClose,
+    autofocusTarget: "none",
+    preventFocusOnClose: true,
+    fullWidth: true
+  }, /*#__PURE__*/_react["default"].createElement(_Popover.Popover.Pane, {
+    height: optionListHeight
+  }, /*#__PURE__*/_react["default"].createElement(_components.OptionList, {
+    allowMultiple: allowMultiple,
+    onSelect: onSelect,
+    options: options,
+    sections: sections,
+    selectedValues: selectedValues,
+    width: width
+  })));
+};
+exports.Select = Select;

package/lib/@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/lib/@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/lib/@next/Select/SelectStyle.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.HelpTextContainer = exports.ActivatorWrapper = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _spacing = require("../utilities/spacing");
+var HelpTextContainer = _styledComponents["default"].div.withConfig({
+  displayName: "SelectStyle__HelpTextContainer",
+  componentId: "sc-c6sc8m-0"
+})(["margin-top:", ";"], _spacing.space4);
+exports.HelpTextContainer = HelpTextContainer;
+var ActivatorWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "SelectStyle__ActivatorWrapper",
+  componentId: "sc-c6sc8m-1"
+})(["display:flex;flex-direction:column;width:", ";"], function (props) {
+  return props.width;
+});
+exports.ActivatorWrapper = ActivatorWrapper;

package/lib/@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/lib/@next/Select/components/Activator/ActivatorContext.js

@@ -0,0 +1,25 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useActivatorTextInput = exports.useActivatorSelect = exports.ActivatorTextInputContext = exports.ActivatorSelectContext = void 0;
+var _react = require("react");
+var ActivatorSelectContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+exports.ActivatorSelectContext = ActivatorSelectContext;
+var ActivatorTextInputContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+exports.ActivatorTextInputContext = ActivatorTextInputContext;
+var useActivatorSelect = function useActivatorSelect() {
+  var context = (0, _react.useContext)(ActivatorSelectContext);
+  if (!context) {
+    throw new Error('No ActivatorSelectContext was provided. Your component must be wrapped in a <ActivatorSelectContext.Provider>');
+  }
+  return context;
+};
+exports.useActivatorSelect = useActivatorSelect;
+var useActivatorTextInput = function useActivatorTextInput() {
+  var context = (0, _react.useContext)(ActivatorTextInputContext);
+  if (!context) {
+    throw new Error('No ActivatorTextInputContext was provided. Your component must be wrapped in a <ActivatorTextInputContext.Provider>');
+  }
+  return context;
+};
+exports.useActivatorTextInput = useActivatorTextInput;

package/lib/@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;