glints-aries 4.0.222 → 4.0.224

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

@@ -5,9 +5,13 @@ export interface ComboboxProps {
     children?: React.ReactNode;
     label?: React.ReactNode;
     onClose?: () => void;
+    /** Margin Top = 8 ; Option height = 48 ; optionListHeight = (n options * option height) + margin top; */
+    listHeight?: number;
+    /** true = Allow vertical scroll, default by 6 options. */
+    scrollable?: boolean;
 }
 export declare const Combobox: {
-    ({ activator, allowMultiple, children, onClose, }: ComboboxProps): JSX.Element;
+    ({ activator, allowMultiple, children, onClose, listHeight, scrollable, }: ComboboxProps): JSX.Element;
     Label: ({ children }: {
         children: React.ReactNode;
     }) => JSX.Element;

package/es/@next/Combobox/Combobox.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Popover } from '../Popover';
 import { Typography } from '../Typography';
 import { Neutral } from '../utilities/colors';
@@ -10,13 +10,28 @@ export var Combobox = function Combobox(_ref) {
     _ref$allowMultiple = _ref.allowMultiple,
     allowMultiple = _ref$allowMultiple === void 0 ? false : _ref$allowMultiple,
     children = _ref.children,
-    onClose = _ref.onClose;
+    onClose = _ref.onClose,
+    listHeight = _ref.listHeight,
+    scrollable = _ref.scrollable;
   var _useState = useState(false),
     popoverActive = _useState[0],
     setPopoverActive = _useState[1];
   var _useState2 = useState(),
     textInputWidth = _useState2[0],
     setTextInputWidth = _useState2[1];
+  var _useState3 = useState(''),
+    optionListHeight = _useState3[0],
+    setOptionListHeight = _useState3[1];
+  useEffect(function () {
+    if (listHeight) {
+      setOptionListHeight(listHeight + 24 + "px");
+      return;
+    }
+    if (scrollable) {
+      setOptionListHeight(296 + 24 + "px");
+      return;
+    }
+  }, [listHeight, scrollable]);
   var handleClose = useCallback(function () {
     setPopoverActive(false);
     onClose == null ? void 0 : onClose();
@@ -47,7 +62,9 @@ export var Combobox = function Combobox(_ref) {
     autofocusTarget: "none",
     preventFocusOnClose: true,
     fullWidth: true
-  }, /*#__PURE__*/React.createElement(Popover.Pane, null, /*#__PURE__*/React.createElement(ComboboxOptionContext.Provider, {
+  }, /*#__PURE__*/React.createElement(Popover.Pane, {
+    height: optionListHeight
+  }, /*#__PURE__*/React.createElement(ComboboxOptionContext.Provider, {
     value: optionContextValue
   }, /*#__PURE__*/React.createElement(ComboboxTextInputContext.Provider, {
     value: textInputContextValue

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

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

package/es/@next/Combobox/comboboxStoryHelper/ComboboxMultuSelect.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { OptionType } from '../components/OptionList/Option';
+interface ComboboxMultiSelectProps {
+    countries: OptionType[];
+}
+export declare const ComboboxMultiSelect: ({ countries, ...args }: ComboboxMultiSelectProps) => JSX.Element;
+export {};

package/es/@next/Combobox/comboboxStoryHelper/ComboboxMultuSelect.js

@@ -0,0 +1,97 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["countries"];
+import React, { useCallback, useEffect, useState } from 'react';
+import { Blue } from '../../utilities/colors';
+import { space8 } from '../../utilities/spacing';
+import { Combobox } from '../Combobox';
+import { StyledTag } from './TagStyle';
+export var ComboboxMultiSelect = function ComboboxMultiSelect(_ref) {
+  var countries = _ref.countries,
+    args = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useState = useState(''),
+    inputValue = _useState[0],
+    setInputValue = _useState[1];
+  var _useState2 = useState([]),
+    selectedOptions = _useState2[0],
+    setSelectedOptions = _useState2[1];
+  var _useState3 = useState(false),
+    isSearchEmpty = _useState3[0],
+    setIsSearchEmpty = _useState3[1];
+  var _useState4 = useState(countries),
+    options = _useState4[0],
+    setOptions = _useState4[1];
+  var handleInputChange = function handleInputChange(value) {
+    setInputValue(value);
+    if (value === '') {
+      setOptions(countries);
+      return;
+    }
+    var filterRegex = new RegExp(value, 'i');
+    var filterOptions = options.filter(function (country) {
+      return country.label.match(filterRegex);
+    });
+    setOptions(filterOptions);
+  };
+  var handleSelect = function handleSelect(selected) {
+    if (selectedOptions.includes(selected)) {
+      setSelectedOptions(selectedOptions.filter(function (option) {
+        return option !== selected;
+      }));
+    } else {
+      setSelectedOptions([].concat(selectedOptions, [selected]));
+    }
+  };
+  var optionsMarkup = (options == null ? void 0 : options.length) > 0 ? options.map(function (option) {
+    var label = option.label,
+      value = option.value;
+    return /*#__PURE__*/React.createElement(Combobox.Option, {
+      key: value,
+      label: label,
+      value: value,
+      selected: selectedOptions.includes(value)
+    });
+  }) : null;
+  var removeTag = useCallback(function (tag) {
+    return function () {
+      var options = [].concat(selectedOptions);
+      options.splice(options.indexOf(tag), 1);
+      setSelectedOptions(options);
+    };
+  }, [selectedOptions]);
+  var tagsMarkup = selectedOptions.map(function (option) {
+    return /*#__PURE__*/React.createElement(StyledTag, {
+      key: "option-" + option,
+      onRemove: removeTag(option),
+      textColor: Blue.S99
+    }, option);
+  });
+  useEffect(function () {
+    if (options.length === 0) {
+      setIsSearchEmpty(true);
+    }
+    if (options.length > 0 && isSearchEmpty === true) {
+      setIsSearchEmpty(false);
+    }
+  }, [isSearchEmpty, options]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: '500px'
+    }
+  }, /*#__PURE__*/React.createElement(Combobox.Label, null, "Label"), /*#__PURE__*/React.createElement(Combobox, _extends({}, args, {
+    activator: /*#__PURE__*/React.createElement(Combobox.TextInput, {
+      value: inputValue,
+      onChange: function onChange(value) {
+        return handleInputChange(value);
+      },
+      placeholder: "Search"
+    })
+  }), /*#__PURE__*/React.createElement(Combobox.OptionList, {
+    onSelect: handleSelect,
+    isEmpty: isSearchEmpty
+  }, optionsMarkup)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      paddingTop: space8
+    }
+  }, tagsMarkup));
+};

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

@@ -3,6 +3,7 @@ import { NoOptionListProps } from './Option';
 export interface OptionListProps extends NoOptionListProps {
     children: React.ReactNode;
     isEmpty?: boolean;
+    height?: string;
     onSelect?(value: string): void;
 }
 export declare const OptionList: ({ children, isEmpty, noOptionsMessage, onSelect, }: OptionListProps) => JSX.Element;

package/es/@next/Modal/ModalStyle.js

@@ -18,7 +18,7 @@ export var StyledModalHeader = styled.div.withConfig({
 export var StyledModalContent = styled.div.withConfig({
   displayName: "ModalStyle__StyledModalContent",
   componentId: "sc-1694up4-3"
-})(["min-height:24px;color:#202223;width:fit-content;padding:20px;word-break:break-all;@media (max-width:", "){padding:20px ", ";}"], Breakpoints.large, space16);
+})(["min-height:24px;color:#202223;width:fit-content;padding:20px;@media (max-width:", "){padding:20px ", ";}"], Breakpoints.large, space16);
 export var StyledModalActions = styled.div.withConfig({
   displayName: "ModalStyle__StyledModalActions",
   componentId: "sc-1694up4-4"

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

@@ -1,7 +1,7 @@
 import { createGlobalStyle } from 'styled-components';
 import { borderRadius8 } from '../utilities/borderRadius';
-import { Neutral } from '../utilities/colors';
+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: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;}"], space8, space4, space8, borderRadius8, space4, Neutral.B100, borderRadius8, Neutral.B85, space16, Neutral.B40);
+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: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/lib/@next/Combobox/Combobox.d.ts

@@ -5,9 +5,13 @@ export interface ComboboxProps {
     children?: React.ReactNode;
     label?: React.ReactNode;
     onClose?: () => void;
+    /** Margin Top = 8 ; Option height = 48 ; optionListHeight = (n options * option height) + margin top; */
+    listHeight?: number;
+    /** true = Allow vertical scroll, default by 6 options. */
+    scrollable?: boolean;
 }
 export declare const Combobox: {
-    ({ activator, allowMultiple, children, onClose, }: ComboboxProps): JSX.Element;
+    ({ activator, allowMultiple, children, onClose, listHeight, scrollable, }: ComboboxProps): JSX.Element;
     Label: ({ children }: {
         children: React.ReactNode;
     }) => JSX.Element;

package/lib/@next/Combobox/Combobox.js

@@ -16,13 +16,28 @@ var Combobox = function Combobox(_ref) {
     _ref$allowMultiple = _ref.allowMultiple,
     allowMultiple = _ref$allowMultiple === void 0 ? false : _ref$allowMultiple,
     children = _ref.children,
-    onClose = _ref.onClose;
+    onClose = _ref.onClose,
+    listHeight = _ref.listHeight,
+    scrollable = _ref.scrollable;
   var _useState = (0, _react.useState)(false),
     popoverActive = _useState[0],
     setPopoverActive = _useState[1];
   var _useState2 = (0, _react.useState)(),
     textInputWidth = _useState2[0],
     setTextInputWidth = _useState2[1];
+  var _useState3 = (0, _react.useState)(''),
+    optionListHeight = _useState3[0],
+    setOptionListHeight = _useState3[1];
+  (0, _react.useEffect)(function () {
+    if (listHeight) {
+      setOptionListHeight(listHeight + 24 + "px");
+      return;
+    }
+    if (scrollable) {
+      setOptionListHeight(296 + 24 + "px");
+      return;
+    }
+  }, [listHeight, scrollable]);
   var handleClose = (0, _react.useCallback)(function () {
     setPopoverActive(false);
     onClose == null ? void 0 : onClose();
@@ -53,7 +68,9 @@ var Combobox = function Combobox(_ref) {
     autofocusTarget: "none",
     preventFocusOnClose: true,
     fullWidth: true
-  }, /*#__PURE__*/_react["default"].createElement(_Popover.Popover.Pane, null, /*#__PURE__*/_react["default"].createElement(_OptionListContext.ComboboxOptionContext.Provider, {
+  }, /*#__PURE__*/_react["default"].createElement(_Popover.Popover.Pane, {
+    height: optionListHeight
+  }, /*#__PURE__*/_react["default"].createElement(_OptionListContext.ComboboxOptionContext.Provider, {
     value: optionContextValue
   }, /*#__PURE__*/_react["default"].createElement(_TextInputContext.ComboboxTextInputContext.Provider, {
     value: textInputContextValue

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

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

package/lib/@next/Combobox/comboboxStoryHelper/ComboboxMultuSelect.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { OptionType } from '../components/OptionList/Option';
+interface ComboboxMultiSelectProps {
+    countries: OptionType[];
+}
+export declare const ComboboxMultiSelect: ({ countries, ...args }: ComboboxMultiSelectProps) => JSX.Element;
+export {};

package/lib/@next/Combobox/comboboxStoryHelper/ComboboxMultuSelect.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.ComboboxMultiSelect = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireWildcard(require("react"));
+var _colors = require("../../utilities/colors");
+var _spacing = require("../../utilities/spacing");
+var _Combobox = require("../Combobox");
+var _TagStyle = require("./TagStyle");
+var _excluded = ["countries"];
+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 ComboboxMultiSelect = function ComboboxMultiSelect(_ref) {
+  var countries = _ref.countries,
+    args = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var _useState = (0, _react.useState)(''),
+    inputValue = _useState[0],
+    setInputValue = _useState[1];
+  var _useState2 = (0, _react.useState)([]),
+    selectedOptions = _useState2[0],
+    setSelectedOptions = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    isSearchEmpty = _useState3[0],
+    setIsSearchEmpty = _useState3[1];
+  var _useState4 = (0, _react.useState)(countries),
+    options = _useState4[0],
+    setOptions = _useState4[1];
+  var handleInputChange = function handleInputChange(value) {
+    setInputValue(value);
+    if (value === '') {
+      setOptions(countries);
+      return;
+    }
+    var filterRegex = new RegExp(value, 'i');
+    var filterOptions = options.filter(function (country) {
+      return country.label.match(filterRegex);
+    });
+    setOptions(filterOptions);
+  };
+  var handleSelect = function handleSelect(selected) {
+    if (selectedOptions.includes(selected)) {
+      setSelectedOptions(selectedOptions.filter(function (option) {
+        return option !== selected;
+      }));
+    } else {
+      setSelectedOptions([].concat(selectedOptions, [selected]));
+    }
+  };
+  var optionsMarkup = (options == null ? void 0 : options.length) > 0 ? options.map(function (option) {
+    var label = option.label,
+      value = option.value;
+    return /*#__PURE__*/_react["default"].createElement(_Combobox.Combobox.Option, {
+      key: value,
+      label: label,
+      value: value,
+      selected: selectedOptions.includes(value)
+    });
+  }) : null;
+  var removeTag = (0, _react.useCallback)(function (tag) {
+    return function () {
+      var options = [].concat(selectedOptions);
+      options.splice(options.indexOf(tag), 1);
+      setSelectedOptions(options);
+    };
+  }, [selectedOptions]);
+  var tagsMarkup = selectedOptions.map(function (option) {
+    return /*#__PURE__*/_react["default"].createElement(_TagStyle.StyledTag, {
+      key: "option-" + option,
+      onRemove: removeTag(option),
+      textColor: _colors.Blue.S99
+    }, option);
+  });
+  (0, _react.useEffect)(function () {
+    if (options.length === 0) {
+      setIsSearchEmpty(true);
+    }
+    if (options.length > 0 && isSearchEmpty === true) {
+      setIsSearchEmpty(false);
+    }
+  }, [isSearchEmpty, options]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      maxWidth: '500px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Combobox.Combobox.Label, null, "Label"), /*#__PURE__*/_react["default"].createElement(_Combobox.Combobox, (0, _extends2["default"])({}, args, {
+    activator: /*#__PURE__*/_react["default"].createElement(_Combobox.Combobox.TextInput, {
+      value: inputValue,
+      onChange: function onChange(value) {
+        return handleInputChange(value);
+      },
+      placeholder: "Search"
+    })
+  }), /*#__PURE__*/_react["default"].createElement(_Combobox.Combobox.OptionList, {
+    onSelect: handleSelect,
+    isEmpty: isSearchEmpty
+  }, optionsMarkup)), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      paddingTop: _spacing.space8
+    }
+  }, tagsMarkup));
+};
+exports.ComboboxMultiSelect = ComboboxMultiSelect;

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

@@ -3,6 +3,7 @@ import { NoOptionListProps } from './Option';
 export interface OptionListProps extends NoOptionListProps {
     children: React.ReactNode;
     isEmpty?: boolean;
+    height?: string;
     onSelect?(value: string): void;
 }
 export declare const OptionList: ({ children, isEmpty, noOptionsMessage, onSelect, }: OptionListProps) => JSX.Element;

package/lib/@next/Modal/ModalStyle.js

@@ -28,7 +28,7 @@ exports.StyledModalHeader = StyledModalHeader;
 var StyledModalContent = _styledComponents["default"].div.withConfig({
   displayName: "ModalStyle__StyledModalContent",
   componentId: "sc-1694up4-3"
-})(["min-height:24px;color:#202223;width:fit-content;padding:20px;word-break:break-all;@media (max-width:", "){padding:20px ", ";}"], Breakpoints.large, _spacing.space16);
+})(["min-height:24px;color:#202223;width:fit-content;padding:20px;@media (max-width:", "){padding:20px ", ";}"], Breakpoints.large, _spacing.space16);
 exports.StyledModalContent = StyledModalContent;
 var StyledModalActions = _styledComponents["default"].div.withConfig({
   displayName: "ModalStyle__StyledModalActions",

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

@@ -7,5 +7,5 @@ var _borderRadius = require("../utilities/borderRadius");
 var _colors = require("../utilities/colors");
 var _spacing = require("../utilities/spacing");
 // we need to use global style here because popover is created outside the root element for react app
-var StyledPopover = (0, _styledComponents.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: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;}"], _spacing.space8, _spacing.space4, _spacing.space8, _borderRadius.borderRadius8, _spacing.space4, _colors.Neutral.B100, _borderRadius.borderRadius8, _colors.Neutral.B85, _spacing.space16, _colors.Neutral.B40);
+var StyledPopover = (0, _styledComponents.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: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;}"], _spacing.space8, _spacing.space4, _spacing.space8, _borderRadius.borderRadius8, _spacing.space4, _colors.Neutral.B100, _borderRadius.borderRadius8, _colors.Neutral.B85, _spacing.space16, _colors.Neutral.B40, _colors.Blue.S54);
 exports.StyledPopover = StyledPopover;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glints-aries",
-  "version": "4.0.222",
+  "version": "4.0.224",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",