glints-aries 4.1.11 → 4.1.13

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

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

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

@@ -33,6 +33,8 @@ export interface SelectProps {
     }): void;
     /** callback function when select component is clicked (opened) */
     onSelectClick?: () => void;
+    isPopoverActive?: boolean;
+    onPopoverActiveChange?: (isActive: boolean) => void;
     options?: Option[];
     /** sets whether OptionList will follow content's width */
     optionListFitContent?: boolean;
@@ -56,8 +58,7 @@ export interface SelectProps {
     border?: string;
     borderRadius?: string;
     required?: boolean;
-    isPopoverActive?: boolean;
     isPlaceholderFloating?: boolean;
 }
-export declare const Select: ({ allowMultiple, customActivatorIcon, disabled, hasError, helpText, label, listHeight, loadingOptions, name, onBlur, onClose, onFocus, onRemoveTag, onSelect, onSelectClick, optionListFitContent, options, placeholder, prefix, searchable, searchableProps, optionsPlaceholderProps, showPopoverOnFocus, scrollable, sections, selectedValues, width, height, zIndexOverride, border, borderRadius, required, isPlaceholderFloating, isPopoverActive, }: SelectProps) => JSX.Element;
+export declare const Select: ({ allowMultiple, customActivatorIcon, disabled, hasError, helpText, label, listHeight, loadingOptions, name, onBlur, onClose, onFocus, onRemoveTag, onSelect, onSelectClick, isPopoverActive, onPopoverActiveChange, optionListFitContent, options, placeholder, prefix, searchable, searchableProps, optionsPlaceholderProps, showPopoverOnFocus, scrollable, sections, selectedValues, width, height, zIndexOverride, border, borderRadius, required, isPlaceholderFloating, }: SelectProps) => JSX.Element;
 export {};

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

@@ -27,6 +27,8 @@ export var Select = function Select(_ref) {
     onRemoveTag = _ref.onRemoveTag,
     onSelect = _ref.onSelect,
     onSelectClick = _ref.onSelectClick,
+    isPopoverActive = _ref.isPopoverActive,
+    onPopoverActiveChange = _ref.onPopoverActiveChange,
     _ref$optionListFitCon = _ref.optionListFitContent,
     optionListFitContent = _ref$optionListFitCon === void 0 ? false : _ref$optionListFitCon,
     _ref$options = _ref.options,
@@ -48,11 +50,18 @@ export var Select = function Select(_ref) {
     border = _ref.border,
     borderRadius = _ref.borderRadius,
     required = _ref.required,
-    isPlaceholderFloating = _ref.isPlaceholderFloating,
-    isPopoverActive = _ref.isPopoverActive;
+    isPlaceholderFloating = _ref.isPlaceholderFloating;
   var _useState = useState(false),
-    popoverActive = _useState[0],
-    setPopoverActive = _useState[1];
+    internalPopoverActive = _useState[0],
+    setInternalPopoverActive = _useState[1];
+  var popoverActive = isPopoverActive !== undefined ? isPopoverActive : internalPopoverActive;
+  var setPopoverActive = function setPopoverActive(newState) {
+    if (isPopoverActive != undefined) {
+      onPopoverActiveChange == null ? void 0 : onPopoverActiveChange(newState);
+    } else {
+      setInternalPopoverActive(newState);
+    }
+  };
   var _useState2 = useState(''),
     optionListHeight = _useState2[0],
     setOptionListHeight = _useState2[1];
@@ -79,11 +88,6 @@ export var Select = function Select(_ref) {
   var updateMenuOptions = function updateMenuOptions(newState) {
     setMenuOptions(newState);
   };
-  useEffect(function () {
-    if (isPopoverActive === false && popoverActive) {
-      setPopoverActive(false);
-    }
-  }, [isPopoverActive, popoverActive]);
   var handleClose = function handleClose() {
     setPopoverActive(false);
     onClose == null ? void 0 : onClose();
@@ -112,10 +116,10 @@ export var Select = function Select(_ref) {
   useEffect(function () {
     if (showPopoverOnFocus) return;
     if (!isEmpty(inputValue) && optionsLength > 0) {
-      setPopoverActive(true);
+      setInternalPopoverActive(true);
     }
     if (inputValue === '' && optionsLength < 1) {
-      setPopoverActive(false);
+      setInternalPopoverActive(false);
     }
   }, [inputValue, optionsLength, showPopoverOnFocus]);
   useEffect(function () {

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:100%;&.Polaris-Popover--fitContent{width:fit-content;}}.Polaris-Popover--fullWidth .Polaris-Popover__Content{max-width:none;}.Polaris-Popover--positionedAbove{margin:", " 2px 0.3125rem;}.Polaris-Popover--positionedAbove.Polaris-Popover--fullWidth{margin:0 auto 0.3125rem auto;}.Polaris-Popover__Wrapper{position:relative;overflow:hidden;background-color:", ";border-radius:", ";outline:1px solid transparent;}.Polaris-Popover__Content{position:relative;display:flex;flex-direction:column;border-radius:1px;max-width:25rem;max-height:31.25rem;}.Polaris-Popover__Content:focus{outline:none;}.Polaris-Popover__Content--fullHeight{max-height:none;}.Polaris-Popover__Content--fluidContent{max-height:none;max-width:none;}.Polaris-Popover__Pane{flex:1 1;max-width:100%;}.Polaris-Popover__Pane + .Polaris-Popover__Pane{border-top:1px solid ", ";}.Polaris-Popover__Pane:focus{outline:none;}.Polaris-Popover__Pane--fixed{overflow:visible;flex:0 0 auto;}.Polaris-Popover__Pane--captureOverscroll{overscroll-behavior:contain;}.Polaris-Popover__Section{padding:", ";color:", ";}.Polaris-Popover__Section + .Polaris-Popover__Section{border-top:1px solid #e1e3e5;}.Polaris-Popover__FocusTracker{position:absolute !important;top:0;width:0.0625rem !important;height:0.0625rem !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important;}@media print{.Polaris-Popover__PopoverOverlay--hideOnPrint{display:none !important;}}.Polaris-PositionedOverlay{position:absolute;z-index:400;}.Polaris-PositionedOverlay--fixed{position:fixed;}.Polaris-PositionedOverlay--calculating{visibility:hidden;}.Polaris-PositionedOverlay--preventInteraction{pointer-events:none;}.Polaris-Scrollable{position:relative;max-height:none;overflow-x:hidden;overflow-y:hidden;:focus{outline:0.125rem solid ", ";outline-offset:0.125rem;}}.Polaris-Scrollable--horizontal{overflow-x:auto;}.Polaris-Scrollable--vertical{overflow-y:auto;}"], _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);
+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:100%;&.Polaris-Popover--fitContent{width:fit-content;}}.Polaris-Popover--fullWidth .Polaris-Popover__Content{max-width:none;}.Polaris-Popover--positionedAbove{margin:", " 2px 0.3125rem;}.Polaris-Popover--positionedAbove.Polaris-Popover--fullWidth{margin:0 auto 0.3125rem auto;}.Polaris-Popover__Wrapper{position:relative;overflow:hidden;background-color:", ";border-radius:", ";outline:1px solid transparent;}.Polaris-Popover__Content{position:relative;display:flex;flex-direction:column;border-radius:1px;max-width:25rem;max-height:31.25rem;}.Polaris-Popover__Content:focus{outline:none;}.Polaris-Popover__Content--fullHeight{max-height:none;}.Polaris-Popover__Content--fluidContent{max-height:none;max-width:none;}.Polaris-Popover__Pane{flex:1 1;max-width:100%;}.Polaris-Popover__Pane + .Polaris-Popover__Pane{border-top:1px solid ", ";}.Polaris-Popover__Pane:focus{outline:none;}.Polaris-Popover__Pane--fixed{overflow:visible;flex:0 0 auto;}.Polaris-Popover__Pane--captureOverscroll{overscroll-behavior:contain;}.Polaris-Popover__Section{padding:", ";color:", ";}.Polaris-Popover__Section + .Polaris-Popover__Section{border-top:1px solid #e1e3e5;}.Polaris-Popover__FocusTracker{position:absolute !important;top:0;width:0.0625rem !important;height:0.0625rem !important;margin:0 !important;padding:0 !important;overflow:hidden !important;clip-path:inset(50%) !important;border:0 !important;white-space:nowrap !important;}@media print{.Polaris-Popover__PopoverOverlay--hideOnPrint{display:none !important;}}.Polaris-PositionedOverlay{position:absolute;z-index:400;}.Polaris-PositionedOverlay--fixed{position:fixed;}.Polaris-PositionedOverlay--calculating{visibility:hidden;}.Polaris-PositionedOverlay--preventInteraction{pointer-events:none;}.Polaris-Scrollable{position:relative;max-height:none;overflow-x:hidden;overflow-y:hidden;:focus{outline:0.125rem solid ", ";outline-offset:0.125rem;}}.Polaris-Scrollable--horizontal{overflow-x:auto;}.Polaris-Scrollable--vertical{overflow-y:auto;-webkit-overflow-scrolling:touch;}"], _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/lib/@next/Select/Select.d.ts

@@ -33,6 +33,8 @@ export interface SelectProps {
     }): void;
     /** callback function when select component is clicked (opened) */
     onSelectClick?: () => void;
+    isPopoverActive?: boolean;
+    onPopoverActiveChange?: (isActive: boolean) => void;
     options?: Option[];
     /** sets whether OptionList will follow content's width */
     optionListFitContent?: boolean;
@@ -56,8 +58,7 @@ export interface SelectProps {
     border?: string;
     borderRadius?: string;
     required?: boolean;
-    isPopoverActive?: boolean;
     isPlaceholderFloating?: boolean;
 }
-export declare const Select: ({ allowMultiple, customActivatorIcon, disabled, hasError, helpText, label, listHeight, loadingOptions, name, onBlur, onClose, onFocus, onRemoveTag, onSelect, onSelectClick, optionListFitContent, options, placeholder, prefix, searchable, searchableProps, optionsPlaceholderProps, showPopoverOnFocus, scrollable, sections, selectedValues, width, height, zIndexOverride, border, borderRadius, required, isPlaceholderFloating, isPopoverActive, }: SelectProps) => JSX.Element;
+export declare const Select: ({ allowMultiple, customActivatorIcon, disabled, hasError, helpText, label, listHeight, loadingOptions, name, onBlur, onClose, onFocus, onRemoveTag, onSelect, onSelectClick, isPopoverActive, onPopoverActiveChange, optionListFitContent, options, placeholder, prefix, searchable, searchableProps, optionsPlaceholderProps, showPopoverOnFocus, scrollable, sections, selectedValues, width, height, zIndexOverride, border, borderRadius, required, isPlaceholderFloating, }: SelectProps) => JSX.Element;
 export {};

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

@@ -33,6 +33,8 @@ var Select = function Select(_ref) {
     onRemoveTag = _ref.onRemoveTag,
     onSelect = _ref.onSelect,
     onSelectClick = _ref.onSelectClick,
+    isPopoverActive = _ref.isPopoverActive,
+    onPopoverActiveChange = _ref.onPopoverActiveChange,
     _ref$optionListFitCon = _ref.optionListFitContent,
     optionListFitContent = _ref$optionListFitCon === void 0 ? false : _ref$optionListFitCon,
     _ref$options = _ref.options,
@@ -54,11 +56,18 @@ var Select = function Select(_ref) {
     border = _ref.border,
     borderRadius = _ref.borderRadius,
     required = _ref.required,
-    isPlaceholderFloating = _ref.isPlaceholderFloating,
-    isPopoverActive = _ref.isPopoverActive;
+    isPlaceholderFloating = _ref.isPlaceholderFloating;
   var _useState = (0, _react.useState)(false),
-    popoverActive = _useState[0],
-    setPopoverActive = _useState[1];
+    internalPopoverActive = _useState[0],
+    setInternalPopoverActive = _useState[1];
+  var popoverActive = isPopoverActive !== undefined ? isPopoverActive : internalPopoverActive;
+  var setPopoverActive = function setPopoverActive(newState) {
+    if (isPopoverActive != undefined) {
+      onPopoverActiveChange == null ? void 0 : onPopoverActiveChange(newState);
+    } else {
+      setInternalPopoverActive(newState);
+    }
+  };
   var _useState2 = (0, _react.useState)(''),
     optionListHeight = _useState2[0],
     setOptionListHeight = _useState2[1];
@@ -85,11 +94,6 @@ var Select = function Select(_ref) {
   var updateMenuOptions = function updateMenuOptions(newState) {
     setMenuOptions(newState);
   };
-  (0, _react.useEffect)(function () {
-    if (isPopoverActive === false && popoverActive) {
-      setPopoverActive(false);
-    }
-  }, [isPopoverActive, popoverActive]);
   var handleClose = function handleClose() {
     setPopoverActive(false);
     onClose == null ? void 0 : onClose();
@@ -118,10 +122,10 @@ var Select = function Select(_ref) {
   (0, _react.useEffect)(function () {
     if (showPopoverOnFocus) return;
     if (!(0, _lodash.isEmpty)(inputValue) && optionsLength > 0) {
-      setPopoverActive(true);
+      setInternalPopoverActive(true);
     }
     if (inputValue === '' && optionsLength < 1) {
-      setPopoverActive(false);
+      setInternalPopoverActive(false);
     }
   }, [inputValue, optionsLength, showPopoverOnFocus]);
   (0, _react.useEffect)(function () {

package/package.json

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