glints-aries 4.1.10 → 4.1.12

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/es/@next/Tabs/Tab.js

@@ -12,11 +12,13 @@ export var Tab = function Tab(_ref) {
     onSelect = _ref.onSelect;
   var tabRef = useRef(null);
   var handleClick = function handleClick(event) {
-    if (disabled || disabledScrollToTab) return;
+    if (disabled) return;
     event.preventDefault();
-    tabRef.current.scrollIntoView({
-      behavior: 'smooth'
-    });
+    if (!disabledScrollToTab) {
+      tabRef.current.scrollIntoView({
+        behavior: 'smooth'
+      });
+    }
     onSelect();
   };
   return /*#__PURE__*/React.createElement(StyledTabButton, {

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/lib/@next/Tabs/Tab.js

@@ -18,11 +18,13 @@ var Tab = function Tab(_ref) {
     onSelect = _ref.onSelect;
   var tabRef = (0, _react.useRef)(null);
   var handleClick = function handleClick(event) {
-    if (disabled || disabledScrollToTab) return;
+    if (disabled) return;
     event.preventDefault();
-    tabRef.current.scrollIntoView({
-      behavior: 'smooth'
-    });
+    if (!disabledScrollToTab) {
+      tabRef.current.scrollIntoView({
+        behavior: 'smooth'
+      });
+    }
     onSelect();
   };
   return /*#__PURE__*/_react["default"].createElement(_TabStyle.StyledTabButton, {

package/package.json

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