glints-aries 4.0.245 → 4.0.247

package/es/helpers/debounce.js

@@ -0,0 +1,16 @@
+var _this = this;
+export var debounce = function debounce(func, delay) {
+  if (delay === void 0) {
+    delay = 500;
+  }
+  var timeoutID;
+  return function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    clearTimeout(timeoutID);
+    timeoutID = setTimeout(function () {
+      func.apply(_this, args);
+    }, delay);
+  };
+};

package/lib/@next/Bar/Bar.d.ts

@@ -7,5 +7,8 @@ export declare type BarProps = {
     secondaryAction?: ComponentAction;
     tertiaryAction?: ComponentAction;
     position?: 'top' | 'bottom';
+    showBackButton?: boolean;
+    onBack?: () => void;
+    customActionGroup?: React.ReactNode;
 };
 export declare const Bar: React.ForwardRefExoticComponent<BarProps & React.RefAttributes<HTMLDivElement>>;

package/lib/@next/Bar/Bar.js

@@ -7,6 +7,7 @@ var _react = _interopRequireDefault(require("react"));
 var _ = require("..");
 var _Button = require("../Button");
 var _ButtonGroup = require("../ButtonGroup");
+var _Icon = require("../Icon");
 var _Typography = require("../Typography");
 var _BarStyle = require("./BarStyle");
 var _useWindowSize2 = require("./useWindowSize");
@@ -16,7 +17,11 @@ var Bar = /*#__PURE__*/_react["default"].forwardRef(function Bar(_ref, ref) {
     primaryAction = _ref.primaryAction,
     secondaryAction = _ref.secondaryAction,
     tertiaryAction = _ref.tertiaryAction,
-    position = _ref.position;
+    position = _ref.position,
+    _ref$showBackButton = _ref.showBackButton,
+    showBackButton = _ref$showBackButton === void 0 ? false : _ref$showBackButton,
+    onBack = _ref.onBack,
+    customActionGroup = _ref.customActionGroup;
   var headerMarkup = function headerMarkup() {
     if (subheading) {
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
@@ -42,7 +47,11 @@ var Bar = /*#__PURE__*/_react["default"].forwardRef(function Bar(_ref, ref) {
   return /*#__PURE__*/_react["default"].createElement(_BarStyle.StyledBar, {
     "data-align": position,
     ref: ref
-  }, /*#__PURE__*/_react["default"].createElement(_BarStyle.StyledBarContainer, null, /*#__PURE__*/_react["default"].createElement(_BarStyle.StyledBarHeaderWrapper, null, headerMarkup(), " "), /*#__PURE__*/_react["default"].createElement(_BarStyle.StyledBarActionWrapper, null, /*#__PURE__*/_react["default"].createElement(_ButtonGroup.ButtonGroup, null, tertiaryAction && /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+  }, /*#__PURE__*/_react["default"].createElement(_BarStyle.StyledBarContainer, null, showBackButton && /*#__PURE__*/_react["default"].createElement(_BarStyle.StyledButtonContainer, {
+    onClick: onBack
+  }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+    name: "ri-arrow-left-line"
+  })), /*#__PURE__*/_react["default"].createElement(_BarStyle.StyledBarHeaderWrapper, null, headerMarkup(), " "), /*#__PURE__*/_react["default"].createElement(_BarStyle.StyledBarActionWrapper, null, customActionGroup ? customActionGroup : /*#__PURE__*/_react["default"].createElement(_ButtonGroup.ButtonGroup, null, tertiaryAction && /*#__PURE__*/_react["default"].createElement(_Button.Button, {
     onClick: tertiaryAction.action,
     size: buttonSize
   }, tertiaryAction.label), secondaryAction && /*#__PURE__*/_react["default"].createElement(_Button.Button, {

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

@@ -4,3 +4,5 @@ export default _default;
 export declare const Interactive: any;
 export declare const PrimaryActionOnly: any;
 export declare const CustomHeading: any;
+export declare const BackButton: any;
+export declare const customActionGroup: any;

package/lib/@next/Bar/BarStyle.d.ts

@@ -3,3 +3,4 @@ export declare const StyledBarHeaderWrapper: import("styled-components").StyledC
 export declare const StyledBarActionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledBarContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledCustomHeadingWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/@next/Bar/BarStyle.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.StyledCustomHeadingWrapper = exports.StyledBarHeaderWrapper = exports.StyledBarContainer = exports.StyledBarActionWrapper = exports.StyledBar = void 0;
+exports.StyledCustomHeadingWrapper = exports.StyledButtonContainer = exports.StyledBarHeaderWrapper = exports.StyledBarContainer = exports.StyledBarActionWrapper = exports.StyledBar = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var Breakpoints = _interopRequireWildcard(require("../utilities/breakpoints"));
 var _colors = require("../utilities/colors");
@@ -12,7 +12,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var StyledBar = _styledComponents["default"].div.withConfig({
   displayName: "BarStyle__StyledBar",
   componentId: "sc-1m51mld-0"
-})(["display:flex;flex-direction:row;padding:20px 0;width:100%;position:absolute;height:90px;@media (max-width:", "){height:70px;}&[data-align='bottom']{bottom:0;}&[data-align='top']{top:0;}box-shadow:0px 0px 0px 1px rgba(63,63,68,0.05),0px 1px 3px rgba(63,63,68,0.15);background:", ";"], Breakpoints.large, _colors.Neutral.B100);
+})(["display:flex;flex-direction:row;padding:12px 0;width:100%;position:absolute;min-height:90px;height:fit-content;&[data-align='bottom']{bottom:0;}&[data-align='top']{top:0;}box-shadow:0px 0px 0px 1px rgba(63,63,68,0.05),0px 1px 3px rgba(63,63,68,0.15);background:", ";@media (max-width:", "){padding:8px 0;min-height:70px;}"], _colors.Neutral.B100, Breakpoints.large);
 exports.StyledBar = StyledBar;
 var StyledBarHeaderWrapper = _styledComponents["default"].div.withConfig({
   displayName: "BarStyle__StyledBarHeaderWrapper",
@@ -27,10 +27,15 @@ exports.StyledBarActionWrapper = StyledBarActionWrapper;
 var StyledBarContainer = _styledComponents["default"].div.withConfig({
   displayName: "BarStyle__StyledBarContainer",
   componentId: "sc-1m51mld-3"
-})(["position:relative;margin:0 auto;padding:0 50px;width:100%;*,*:before,*:after{box-sizing:border-box;}justify-content:space-between;align-items:center;flex-direction:row;display:flex;@media (max-width:", "){gap:16px;padding:0 24px;}"], Breakpoints.large);
+})(["position:relative;margin:0 auto;padding:0 50px;width:100%;*,*:before,*:after{box-sizing:border-box;}justify-content:space-between;align-items:center;flex-direction:row;display:flex;@media (max-width:", "){gap:16px;padding:0 16px;}"], Breakpoints.large);
 exports.StyledBarContainer = StyledBarContainer;
 var StyledCustomHeadingWrapper = _styledComponents["default"].div.withConfig({
   displayName: "BarStyle__StyledCustomHeadingWrapper",
   componentId: "sc-1m51mld-4"
 })(["display:flex;flex-direction:row;gap:", ";"], _spacing.space8);
-exports.StyledCustomHeadingWrapper = StyledCustomHeadingWrapper;
+exports.StyledCustomHeadingWrapper = StyledCustomHeadingWrapper;
+var StyledButtonContainer = _styledComponents["default"].div.withConfig({
+  displayName: "BarStyle__StyledButtonContainer",
+  componentId: "sc-1m51mld-5"
+})(["cursor:pointer;margin-right:24px;svg{width:24px;fill:", ";}@media (max-width:", "){margin-right:16px;svg{width:16px;}}"], _colors.Neutral.B40, Breakpoints.large);
+exports.StyledButtonContainer = StyledButtonContainer;

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

@@ -14,6 +14,7 @@ export interface SelectProps {
     label?: React.ReactNode;
     /** Margin Top = 8 ; Option height = 48 ; optionListHeight = (n options * option height) + margin top; */
     listHeight?: number;
+    loadingOptions?: boolean;
     onClose?: () => void;
     onRemoveTag?({ option }: {
         option: string;
@@ -35,5 +36,5 @@ export interface SelectProps {
     /** sets a width for the Select component*/
     width: string;
 }
-export declare const Select: ({ allowMultiple, disabled, hasError, helpText, label, onClose, onRemoveTag, onSelect, options, placeholder, listHeight, prefix, searchable, searchableProps, scrollable, sections, selectedValues, width, }: SelectProps) => JSX.Element;
+export declare const Select: ({ allowMultiple, disabled, hasError, helpText, label, loadingOptions, onClose, onRemoveTag, onSelect, options, placeholder, listHeight, prefix, searchable, searchableProps, scrollable, sections, selectedValues, width, }: SelectProps) => JSX.Element;
 export {};

package/lib/@next/Select/Select.js

@@ -21,6 +21,8 @@ var Select = function Select(_ref) {
     hasError = _ref$hasError === void 0 ? false : _ref$hasError,
     helpText = _ref.helpText,
     label = _ref.label,
+    _ref$loadingOptions = _ref.loadingOptions,
+    loadingOptions = _ref$loadingOptions === void 0 ? false : _ref$loadingOptions,
     onClose = _ref.onClose,
     onRemoveTag = _ref.onRemoveTag,
     onSelect = _ref.onSelect,
@@ -46,6 +48,7 @@ var Select = function Select(_ref) {
   var _useState3 = (0, _react.useState)(options),
     menuOptions = _useState3[0],
     setMenuOptions = _useState3[1];
+  var optionsLength = options.length;
   var _useState4 = (0, _react.useState)((searchableProps == null ? void 0 : searchableProps.inputValue) || ''),
     inputValue = _useState4[0],
     setInputValue = _useState4[1];
@@ -70,11 +73,26 @@ var Select = function Select(_ref) {
     onClose == null ? void 0 : onClose();
   };
   var handleFocus = function handleFocus() {
+    if (options.length < 1) {
+      setPopoverActive(false);
+      return;
+    }
     setPopoverActive(true);
   };
   var handleSelectClick = function handleSelectClick() {
     setPopoverActive(!popoverActive);
   };
+  (0, _react.useEffect)(function () {
+    setMenuOptions(options);
+  }, [options]);
+  (0, _react.useEffect)(function () {
+    if (inputValue != '' && optionsLength > 0) {
+      setPopoverActive(true);
+    }
+    if (inputValue === '' && optionsLength < 1) {
+      setPopoverActive(false);
+    }
+  }, [inputValue, optionsLength]);
   (0, _react.useEffect)(function () {
     if (listHeight) {
       setOptionListHeight(listHeight + 24 + "px");
@@ -135,6 +153,7 @@ var Select = function Select(_ref) {
   }, !disabled && /*#__PURE__*/_react["default"].createElement(_Popover.Popover.Pane, {
     height: optionListHeight
   }, /*#__PURE__*/_react["default"].createElement(_components.OptionList, {
+    loading: loadingOptions,
     menuOptions: menuOptions,
     allowMultiple: allowMultiple,
     onSelect: onSelect,

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

@@ -7,6 +7,8 @@ export declare const WithErrorNonSearchable: any;
 export declare const NonSearchableDisabled: any;
 export declare const SearchableMultiSelect: any;
 export declare const SearchableSingleSelect: any;
+export declare const SearchableSingleWithInputState: any;
+export declare const AsyncSearchableSingleWithInputState: any;
 export declare const MultiSelectScrollable: any;
 export declare const WithInlineError: any;
 export declare const SearchableDisabled: any;

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

@@ -62,6 +62,7 @@ var ActivatorTextInput = function ActivatorTextInput(_ref) {
     }).length > 0);
   }, [selectedValues]);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, allowMultiple ? /*#__PURE__*/_react["default"].createElement(_ActivatorStyle.StyledTextInput, (0, _extends2["default"])({}, props, {
+    className: "select-input",
     ref: activatorRef,
     prefix: prefix,
     onChange: function onChange(value) {
@@ -78,6 +79,7 @@ var ActivatorTextInput = function ActivatorTextInput(_ref) {
     prefix: prefix,
     filterOptions: filterOptions,
     onFocus: onFocus,
+    onInputChange: onChange,
     onSelect: onSelect,
     error: hasError,
     disabled: disabled,

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { MenuProps, Option } from '../../../Menu';
 import { SearchableSelectState } from '../SearchableSelectInput/SearchableSelectInput';
 export interface OptionListProps extends MenuProps {
-    isEmpty?: boolean;
+    loading?: boolean;
     noOptionsMessage?: React.ReactNode;
     onMenuClose?: () => void;
     onSelect?({ value }: {
@@ -12,8 +12,9 @@ export interface OptionListProps extends MenuProps {
     updateSearchableSelectState?: (newState: SearchableSelectState) => void;
     menuOptions?: Option[];
 }
+export declare const MenuOptionLoading: () => JSX.Element;
 export interface NoOptionListProps {
     noOptionsMessage?: React.ReactNode;
 }
 export declare const NoOptionList: ({ noOptionsMessage, }: NoOptionListProps) => JSX.Element;
-export declare const OptionList: ({ allowMultiple, noOptionsMessage, onMenuClose, onSelect, sections, selectedValues, title, updateSearchableSelectState, width, menuOptions, }: OptionListProps) => JSX.Element;
+export declare const OptionList: ({ allowMultiple, loading, noOptionsMessage, onMenuClose, onSelect, sections, selectedValues, title, updateSearchableSelectState, width, menuOptions, }: OptionListProps) => JSX.Element;

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

@@ -1,18 +1,30 @@
 "use strict";
 
 exports.__esModule = true;
-exports.OptionList = exports.NoOptionList = void 0;
+exports.OptionList = exports.NoOptionList = exports.MenuOptionLoading = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Menu = require("../../../Menu");
+var _Spinner = require("../../../Spinner");
 var _Typography = require("../../../Typography");
 var _colors = require("../../../utilities/colors");
 var _OptionListStyle = require("./OptionListStyle");
 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 MenuOptionLoading = function MenuOptionLoading() {
+  return /*#__PURE__*/_react["default"].createElement(_OptionListStyle.EmptyOptionContainer, {
+    className: "menu-option-loading"
+  }, /*#__PURE__*/_react["default"].createElement(_Spinner.Spinner, {
+    size: "small",
+    fill: _colors.Blue.S99
+  }));
+};
+exports.MenuOptionLoading = MenuOptionLoading;
 var NoOptionList = function NoOptionList(_ref) {
   var _ref$noOptionsMessage = _ref.noOptionsMessage,
     noOptionsMessage = _ref$noOptionsMessage === void 0 ? 'No matching results' : _ref$noOptionsMessage;
-  return /*#__PURE__*/_react["default"].createElement(_OptionListStyle.EmptyOptionContainer, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+  return /*#__PURE__*/_react["default"].createElement(_OptionListStyle.EmptyOptionContainer, {
+    className: "menu-option-empty"
+  }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
     as: "span",
     variant: "body2",
     color: _colors.Neutral.B40
@@ -21,6 +33,8 @@ var NoOptionList = function NoOptionList(_ref) {
 exports.NoOptionList = NoOptionList;
 var OptionList = function OptionList(_ref2) {
   var allowMultiple = _ref2.allowMultiple,
+    _ref2$loading = _ref2.loading,
+    loading = _ref2$loading === void 0 ? false : _ref2$loading,
     noOptionsMessage = _ref2.noOptionsMessage,
     onMenuClose = _ref2.onMenuClose,
     onSelect = _ref2.onSelect,
@@ -51,8 +65,14 @@ var OptionList = function OptionList(_ref2) {
       onMenuClose();
     }
   };
+  if (loading) {
+    return /*#__PURE__*/_react["default"].createElement(_OptionListStyle.OptionListContainer, {
+      width: width
+    }, /*#__PURE__*/_react["default"].createElement(MenuOptionLoading, null));
+  }
   return /*#__PURE__*/_react["default"].createElement(_OptionListStyle.OptionListContainer, {
-    width: width
+    width: width,
+    className: "menu-option-list"
   }, hasMenuOptions ? /*#__PURE__*/_react["default"].createElement(_Menu.Menu, {
     allowMultiple: allowMultiple,
     options: menuOptions,

package/lib/@next/Select/components/SearchableSelectInput/SearchableSelectInput.d.ts

@@ -9,6 +9,7 @@ export interface SearchableSelectState {
 export declare type SearchableSelectInputProps = Omit<InputProps, 'type' | 'onChange' | 'onSelect'> & {
     canClear?: boolean;
     filterOptions?: (str: string) => Option[];
+    onInputChange?(value: string): void;
     onSelect?({ value }: {
         value: string;
     }): void;
@@ -23,6 +24,7 @@ export declare type SearchableSelectInputProps = Omit<InputProps, 'type' | 'onCh
 export declare const SearchableSelectInput: React.ForwardRefExoticComponent<Omit<InputProps, "type" | "onChange" | "onSelect"> & {
     canClear?: boolean;
     filterOptions?: (str: string) => Option[];
+    onInputChange?(value: string): void;
     onSelect?({ value }: {
         value: string;
     }): void;

package/lib/@next/Select/components/SearchableSelectInput/SearchableSelectInput.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _InputStyle = require("../../../Input/InputStyle");
 var _ClearSelected = require("./ClearSelected");
 var _SearchableSelectInputStyle = require("./SearchableSelectInputStyle");
-var _excluded = ["disabled", "error", "filterOptions", "onSelect", "placeholder", "prefix", "selectedValue", "width", "inputValue", "updateInputValue", "onFocus", "searchableSelectState", "updateSearchableSelectState", "options", "updateMenuOptions"];
+var _excluded = ["disabled", "error", "filterOptions", "onSelect", "placeholder", "prefix", "selectedValue", "width", "inputValue", "updateInputValue", "onInputChange", "onFocus", "searchableSelectState", "updateSearchableSelectState", "options", "updateMenuOptions"];
 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 SearchableSelectInput = /*#__PURE__*/(0, _react.forwardRef)(function SearchableSelectInput(_ref, ref) {
@@ -24,6 +24,7 @@ var SearchableSelectInput = /*#__PURE__*/(0, _react.forwardRef)(function Searcha
     width = _ref.width,
     inputValue = _ref.inputValue,
     updateInputValue = _ref.updateInputValue,
+    onInputChange = _ref.onInputChange,
     onFocus = _ref.onFocus,
     _ref$searchableSelect = _ref.searchableSelectState,
     showInput = _ref$searchableSelect.showInput,
@@ -56,6 +57,9 @@ var SearchableSelectInput = /*#__PURE__*/(0, _react.forwardRef)(function Searcha
   };
   var handleInputChange = function handleInputChange(e) {
     var str = e.currentTarget.value;
+    if (onInputChange) {
+      onInputChange(str);
+    }
     updateInputValue(str);
     var filteredOptions = filterOptions(str);
     updateMenuOptions(filteredOptions);
@@ -104,6 +108,7 @@ var SearchableSelectInput = /*#__PURE__*/(0, _react.forwardRef)(function Searcha
     setShowClear(false);
   }, [selectedValue]);
   return /*#__PURE__*/_react["default"].createElement(_SearchableSelectInputStyle.StyledContainer, {
+    className: "select-input-container",
     ref: ref,
     "data-error": error,
     "data-disabled": disabled,

package/lib/@next/Select/selectStoryHelper/SearchableSingleSelect.d.ts

@@ -4,4 +4,6 @@ interface SearchableSingleSelectProps {
     data?: Option[];
 }
 export declare const SearchableSingle: ({ data, ...args }: SearchableSingleSelectProps) => JSX.Element;
+export declare const SearchableSingleWithInputState: ({ data, ...args }: SearchableSingleSelectProps) => JSX.Element;
+export declare const AsyncSearchableSingleWithInputState: ({ data, ...args }: SearchableSingleSelectProps) => JSX.Element;
 export {};

package/lib/@next/Select/selectStoryHelper/SearchableSingleSelect.js

@@ -2,12 +2,17 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.SearchableSingle = void 0;
+exports.SearchableSingleWithInputState = exports.SearchableSingle = exports.AsyncSearchableSingleWithInputState = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
+var _debounce = require("../../../helpers/debounce");
 var _Select = require("../Select");
-var _excluded = ["data"];
+var _excluded = ["data"],
+  _excluded2 = ["data"],
+  _excluded3 = ["data"];
 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 SearchableSingle = function SearchableSingle(_ref) {
@@ -29,4 +34,142 @@ var SearchableSingle = function SearchableSingle(_ref) {
     label: "Label"
   }));
 };
-exports.SearchableSingle = SearchableSingle;
+exports.SearchableSingle = SearchableSingle;
+var SearchableSingleWithInputState = function SearchableSingleWithInputState(_ref3) {
+  var data = _ref3.data,
+    args = (0, _objectWithoutPropertiesLoose2["default"])(_ref3, _excluded2);
+  var _useState2 = (0, _react.useState)(''),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var _useState3 = (0, _react.useState)(''),
+    selected = _useState3[0],
+    setSelected = _useState3[1];
+  var handleInputChange = function handleInputChange(value) {
+    setInputValue(value);
+  };
+  var handleSelect = function handleSelect(_ref4) {
+    var value = _ref4.value;
+    setSelected(value);
+  };
+  return /*#__PURE__*/_react["default"].createElement(_Select.Select, (0, _extends2["default"])({}, args, {
+    onSelect: handleSelect,
+    options: data,
+    selectedValues: [selected],
+    searchableProps: {
+      inputValue: inputValue,
+      onInputChange: function onInputChange(value) {
+        return handleInputChange(value);
+      }
+    },
+    width: "600px",
+    label: "Label"
+  }));
+};
+exports.SearchableSingleWithInputState = SearchableSingleWithInputState;
+var filterOptions = function filterOptions(str, data) {
+  if (str === '') {
+    return data;
+  }
+  var filterRegex = new RegExp(str, 'i');
+  var filterOptions = data.filter(function (option) {
+    return option.label.match(filterRegex);
+  });
+  return filterOptions;
+};
+var mockAsyncOptions = function mockAsyncOptions(str, data) {
+  return new Promise(function (resolve) {
+    setTimeout(function () {
+      var filteredOptions = filterOptions(str, data);
+      resolve(filteredOptions);
+    }, 1000);
+  });
+};
+var AsyncSearchableSingleWithInputState = function AsyncSearchableSingleWithInputState(_ref5) {
+  var data = _ref5.data,
+    args = (0, _objectWithoutPropertiesLoose2["default"])(_ref5, _excluded3);
+  var _useState4 = (0, _react.useState)(false),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
+  var _useState5 = (0, _react.useState)([]),
+    mockData = _useState5[0],
+    setMockData = _useState5[1];
+  var _useState6 = (0, _react.useState)(''),
+    inputValue = _useState6[0],
+    setInputValue = _useState6[1];
+  var _useState7 = (0, _react.useState)(''),
+    selected = _useState7[0],
+    setSelected = _useState7[1];
+  var handleInputChange = /*#__PURE__*/function () {
+    var _ref6 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(value) {
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setInputValue(value);
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleInputChange(_x) {
+      return _ref6.apply(this, arguments);
+    };
+  }();
+  var debounceHandleInputChange = (0, _debounce.debounce)(handleInputChange);
+  var handleSelect = function handleSelect(_ref7) {
+    var value = _ref7.value;
+    setSelected(value);
+  };
+  (0, _react.useEffect)(function () {
+    var fetchMockData = /*#__PURE__*/function () {
+      var _ref8 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+        var response;
+        return _regenerator["default"].wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              setLoading(true);
+              _context2.next = 4;
+              return mockAsyncOptions(inputValue, data);
+            case 4:
+              response = _context2.sent;
+              setMockData(response);
+              setLoading(false);
+              _context2.next = 12;
+              break;
+            case 9:
+              _context2.prev = 9;
+              _context2.t0 = _context2["catch"](0);
+              setLoading(false);
+            case 12:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, null, [[0, 9]]);
+      }));
+      return function fetchMockData() {
+        return _ref8.apply(this, arguments);
+      };
+    }();
+    if (inputValue === '') {
+      setMockData([]);
+      return;
+    }
+    fetchMockData();
+  }, [data, inputValue]);
+  return /*#__PURE__*/_react["default"].createElement(_Select.Select, (0, _extends2["default"])({}, args, {
+    loadingOptions: loading,
+    onSelect: handleSelect,
+    options: mockData,
+    selectedValues: [selected],
+    searchableProps: {
+      inputValue: inputValue,
+      onInputChange: function onInputChange(value) {
+        return debounceHandleInputChange(value);
+      }
+    },
+    width: "600px",
+    label: "Label"
+  }));
+};
+exports.AsyncSearchableSingleWithInputState = AsyncSearchableSingleWithInputState;

package/lib/@next/SideSheet/SideSheet.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ComponentAction } from '../../types/componentAction';
+export interface SideSheetProps {
+    isOpen: boolean;
+    title: string;
+    description?: string;
+    showHorizontalLine?: boolean;
+    children?: React.ReactNode;
+    basicButtonAction?: ComponentAction;
+    primaryButtonAction?: ComponentAction;
+    showBackButton?: boolean;
+    onBack?: () => void;
+    showCloseButton?: boolean;
+    onClose?: () => void;
+}
+declare const SideSheet: React.ForwardRefExoticComponent<SideSheetProps & React.RefAttributes<HTMLDivElement>>;
+export { SideSheet };

package/lib/@next/SideSheet/SideSheet.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.SideSheet = 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 _ButtonGroup = require("../ButtonGroup");
+var _Icon = require("../Icon");
+var _colors = require("../utilities/colors");
+var _Portal = require("../Portal/Portal");
+var _SideSheetStyle = require("./SideSheetStyle");
+var _Typography = require("../Typography");
+var _excluded = ["isOpen", "title", "description", "showHorizontalLine", "children", "basicButtonAction", "primaryButtonAction", "showBackButton", "onBack", "showCloseButton", "onClose"];
+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 SideSheet = /*#__PURE__*/_react["default"].forwardRef(function SideSheet(_ref, ref) {
+  var isOpen = _ref.isOpen,
+    title = _ref.title,
+    description = _ref.description,
+    _ref$showHorizontalLi = _ref.showHorizontalLine,
+    showHorizontalLine = _ref$showHorizontalLi === void 0 ? true : _ref$showHorizontalLi,
+    children = _ref.children,
+    basicButtonAction = _ref.basicButtonAction,
+    primaryButtonAction = _ref.primaryButtonAction,
+    _ref$showBackButton = _ref.showBackButton,
+    showBackButton = _ref$showBackButton === void 0 ? true : _ref$showBackButton,
+    onBack = _ref.onBack,
+    _ref$showCloseButton = _ref.showCloseButton,
+    showCloseButton = _ref$showCloseButton === void 0 ? true : _ref$showCloseButton,
+    onClose = _ref.onClose,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  (0, _react.useEffect)(function () {
+    if (typeof window === 'undefined' || !window.document) return;
+    var enableScroll = function enableScroll() {
+      return document.body.style.overflow = 'unset';
+    };
+    isOpen ? document.body.style.overflow = 'hidden' : enableScroll();
+    return function () {
+      enableScroll();
+    };
+  }, [isOpen]);
+
+  // store state for closing animation, and cleanup when unmounting
+  var _useState = (0, _react.useState)(false),
+    isClosedAnimation = _useState[0],
+    setIsClosedAnimation = _useState[1];
+  var timeoutId = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    return function () {
+      if (timeoutId.current) {
+        clearTimeout(timeoutId.current);
+      }
+    };
+  }, []);
+
+  // fade out effect for 0.2seconds when closed
+  var handleClose = function handleClose() {
+    setIsClosedAnimation(true);
+    timeoutId.current = setTimeout(function () {
+      setIsClosedAnimation(false);
+      onClose();
+    }, 190); // purposefully made this 0.19sec (to prevent rare animation glitch)
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isOpen && /*#__PURE__*/_react["default"].createElement(_Portal.Portal, null, /*#__PURE__*/_react["default"].createElement(_SideSheetStyle.StyledSideSheetWrapper, {
+    className: "side-sheet-wrapper " + (isClosedAnimation ? 'closed' : ''),
+    onClick: handleClose
+  }, /*#__PURE__*/_react["default"].createElement(_SideSheetStyle.StyledSideSheetContainer, (0, _extends2["default"])({
+    className: "" + (isClosedAnimation ? 'closed' : ''),
+    ref: ref,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, props), /*#__PURE__*/_react["default"].createElement(_SideSheetStyle.StyledSideSheetHeader, null, showBackButton && /*#__PURE__*/_react["default"].createElement(_SideSheetStyle.StyledButtonContainer, {
+    onClick: onBack
+  }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+    name: "ri-arrow-left-line"
+  })), /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    as: "div",
+    variant: "subtitle1",
+    style: {
+      color: _colors.Neutral.B18
+    }
+  }, title, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    as: "div",
+    variant: "body1",
+    style: {
+      color: _colors.Neutral.B18
+    }
+  }, description)), showCloseButton && /*#__PURE__*/_react["default"].createElement(_SideSheetStyle.StyledRightContainer, null, /*#__PURE__*/_react["default"].createElement(_SideSheetStyle.StyledButtonContainer, {
+    "data-testid": "sidesheet-close-btn",
+    onClick: handleClose
+  }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+    name: "ri-close"
+  })))), showHorizontalLine && /*#__PURE__*/_react["default"].createElement(_SideSheetStyle.StyledHorizontalLine, null), children, /*#__PURE__*/_react["default"].createElement(_SideSheetStyle.StyledSideSheetFooter, null, /*#__PURE__*/_react["default"].createElement(_SideSheetStyle.StyledHorizontalLine, null), /*#__PURE__*/_react["default"].createElement(_SideSheetStyle.StyledButtonGroupContainer, null, /*#__PURE__*/_react["default"].createElement(_ButtonGroup.ButtonGroup, {
+    fullWidth: true
+  }, basicButtonAction && /*#__PURE__*/_react["default"].createElement(_Button.Button, {
+    onClick: basicButtonAction.action,
+    fullWidth: true
+  }, basicButtonAction.label), primaryButtonAction && /*#__PURE__*/_react["default"].createElement(_Button.PrimaryButton, {
+    onClick: primaryButtonAction.action
+  }, primaryButtonAction.label))))))));
+});
+exports.SideSheet = SideSheet;

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

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