@cube-dev/ui-kit 0.11.2 → 0.12.0

package/cjs/components/overlays/NewNotifications/hooks/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/overlays/NewNotifications/hooks/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/overlays/NewNotifications/hooks/use-notification-list-item.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/overlays/NewNotifications/hooks/use-notifications-api.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/overlays/NewNotifications/hooks/use-notifications-list.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/overlays/NewNotifications/hooks/use-notifications-observer.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/overlays/NewNotifications/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/overlays/NewNotifications/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/overlays/Notification/Notification.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/overlays/OverlayWrapper.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/overlays/Toasts/Toast.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 
@@ -10,20 +10,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Toast = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const utils_1 = require("@react-aria/utils");
 const use_toasts_api_1 = require("./use-toasts-api");
+const _internal_1 = require("../../../_internal");
+const useId_1 = require("../../../utils/react/useId");
 function Toast(props) {
-    const { id: propsId } = props;
+    const { id: propsId, disableRemoveOnUnmount } = props;
+    const defaultId = (0, useId_1.useId)();
+    const disableRemoveOnUnmountRef = (0, _internal_1.useSyncRef)(disableRemoveOnUnmount);
     const { toast, update, remove } = (0, use_toasts_api_1.useToastsApi)();
-    const defaultId = (0, utils_1.useId)();
     const id = propsId !== null && propsId !== void 0 ? propsId : defaultId;
+    const removeNotification = (0, _internal_1.useEvent)((id) => disableRemoveOnUnmountRef.current ? void 0 : remove(id));
     (0, react_1.useEffect)(() => {
-        toast({ ...props, id });
-        return () => remove(id);
+        toast({ id, ...props });
     }, [id]);
-    (0, react_1.useEffect)(() => {
-        update(id, props);
-    });
+    (0, react_1.useEffect)(() => () => removeNotification(id), [id]);
+    (0, react_1.useEffect)(() => update(id, props));
     return null;
 }
 exports.Toast = Toast;

package/cjs/components/overlays/Toasts/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/overlays/Toasts/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/overlays/Toasts/use-toasts-api.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/overlays/Tooltip/Tooltip.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/overlays/Tooltip/TooltipProvider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 
@@ -18,7 +18,7 @@ function TooltipProvider(props) {
     (0, react_1.useEffect)(() => {
         setRendered(true);
     }, []);
-    return rendered ? ((0, jsx_runtime_1.jsxs)(TooltipTrigger_1.TooltipTrigger, { ...otherProps, children: [children, (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { styles: tooltipStyles, ...(width ? { width } : null), children: title }, void 0)] }, void 0)) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "children" }, void 0));
+    return rendered ? ((0, jsx_runtime_1.jsxs)(TooltipTrigger_1.TooltipTrigger, { ...otherProps, children: [children, (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { styles: tooltipStyles, ...(width ? { width } : null), children: title }, void 0)] }, void 0)) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }, void 0));
 }
 let _TooltipProvider = TooltipProvider;
 exports.TooltipProvider = _TooltipProvider;

package/cjs/components/overlays/Tooltip/TooltipTrigger.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 
@@ -21,17 +21,18 @@ const Block_1 = require("../../Block");
 const DEFAULT_OFFSET = 8; // Offset needed to reach 4px/5px (med/large) distance between tooltip and trigger button
 const DEFAULT_CROSS_OFFSET = 0;
 function TooltipTrigger(props) {
-    let { children, activeWrap, crossOffset = DEFAULT_CROSS_OFFSET, isDisabled, isMaterial, offset = DEFAULT_OFFSET, trigger: triggerAction, } = props;
+    let { children, activeWrap, crossOffset = DEFAULT_CROSS_OFFSET, isDisabled, isMaterial, offset = DEFAULT_OFFSET, trigger: triggerAction, delay = 250, isOpen, onOpenChange, defaultOpen, } = props;
     let [trigger, tooltip] = react_1.Children.toArray(children);
-    let state = (0, tooltip_2.useTooltipTriggerState)({
-        delay: 750,
-        ...props,
-    });
+    let state = (0, tooltip_2.useTooltipTriggerState)({ delay, ...props });
     let tooltipTriggerRef = (0, react_1.useRef)(null);
     let overlayRef = (0, react_1.useRef)(null);
     let { triggerProps, tooltipProps } = (0, tooltip_1.useTooltipTrigger)({
         isDisabled,
         trigger: triggerAction,
+        delay,
+        isOpen,
+        onOpenChange,
+        defaultOpen,
     }, state, tooltipTriggerRef);
     let { overlayProps, arrowProps, placement } = (0, overlays_1.useOverlayPosition)({
         placement: props.placement || 'top',

package/cjs/components/overlays/Tooltip/context.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/pickers/ComboBox/ComboBox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 
@@ -10,7 +10,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComboBox = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_1 = require("@ant-design/icons");
-const utils_1 = require("@react-aria/utils");
 const react_1 = require("react");
 const combobox_1 = require("@react-stately/combobox");
 const combobox_2 = require("@react-aria/combobox");
@@ -129,25 +128,22 @@ function ComboBox(props, ref) {
     let validationIcon = isInvalid ? ((0, jsx_runtime_1.jsx)(icons_1.WarningOutlined, { style: { color: 'var(--danger-color)' } }, void 0)) : ((0, jsx_runtime_1.jsx)(icons_1.CheckOutlined, { style: { color: 'var(--success-color)' } }, void 0));
     let validation = (0, react_1.cloneElement)(validationIcon);
     let comboBoxWidth = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
-    let comboBoxField = ((0, jsx_runtime_1.jsxs)(ComboBoxWrapperElement, { ref: ref, qa: qa || 'ComboBox', ...(0, react_2.modAttrs)({
-            invalid: isInvalid,
-            valid: validationState === 'valid',
-            disabled: isDisabled,
-            hovered: isHovered,
-            focused: isFocused,
-        }), styles: outerStyles, style: {
+    let mods = {
+        invalid: isInvalid,
+        valid: validationState === 'valid',
+        disabled: isDisabled,
+        hovered: isHovered,
+        focused: isFocused,
+        loading: isLoading,
+    };
+    let comboBoxField = ((0, jsx_runtime_1.jsxs)(ComboBoxWrapperElement, { ref: ref, qa: qa || 'ComboBox', ...(0, react_2.modAttrs)(mods), styles: outerStyles, style: {
             zIndex: isFocused ? 1 : 'initial',
-        }, "data-size": size, children: [(0, jsx_runtime_1.jsx)(InputElement, { qa: "Input", ...(0, utils_1.mergeProps)(inputProps, hoverProps, focusProps), ref: inputRef, autoComplete: autoComplete, styles: inputStyles, ...(0, react_2.modAttrs)({
-                    invalid: isInvalid,
-                    valid: validationState === 'valid',
-                    disabled: isDisabled,
-                    hovered: isHovered,
-                    focused: isFocused,
-                }), "data-size": size }, void 0), prefix ? ((0, jsx_runtime_1.jsx)(Prefix_1.Prefix, { onWidthChange: setPrefixWidth, padding: "0 1x 0 1.5x", opacity: isDisabled ? '@disabled-opacity' : false, placeItems: "center", outerGap: 0, children: prefix }, void 0)) : null, (0, jsx_runtime_1.jsxs)(Suffix_1.Suffix, { onWidthChange: setSuffixWidth, opacity: isDisabled ? '@disabled-opacity' : false, children: [validationState || isLoading ? ((0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: false, padding: "0 1x", children: [validationState && !isLoading ? validation : null, isLoading && (0, jsx_runtime_1.jsx)(icons_1.LoadingOutlined, {}, void 0)] }, void 0)) : null, suffix, !hideTrigger ? ((0, jsx_runtime_1.jsx)(TriggerElement, { ...(0, utils_1.mergeProps)(buttonProps, triggerFocusProps, triggerHoverProps), ...(0, react_2.modAttrs)({
+        }, "data-size": size, children: [(0, jsx_runtime_1.jsx)(InputElement, { qa: "Input", ...(0, react_2.mergeProps)(inputProps, hoverProps, focusProps), ref: inputRef, autoComplete: autoComplete, styles: inputStyles, ...(0, react_2.modAttrs)(mods), "data-size": size }, void 0), prefix ? ((0, jsx_runtime_1.jsx)(Prefix_1.Prefix, { onWidthChange: setPrefixWidth, padding: "0 1x 0 1.5x", opacity: isDisabled ? '@disabled-opacity' : false, placeItems: "center", outerGap: 0, children: prefix }, void 0)) : null, (0, jsx_runtime_1.jsxs)(Suffix_1.Suffix, { onWidthChange: setSuffixWidth, opacity: isDisabled ? '@disabled-opacity' : false, children: [validationState || isLoading ? ((0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: false, padding: "0 1x", children: [validationState && !isLoading ? validation : null, isLoading && (0, jsx_runtime_1.jsx)(icons_1.LoadingOutlined, {}, void 0)] }, void 0)) : null, suffix, !hideTrigger ? ((0, jsx_runtime_1.jsx)(TriggerElement, { ...(0, react_2.mergeProps)(buttonProps, triggerFocusProps, triggerHoverProps), ...(0, react_2.modAttrs)({
                             pressed: isTriggerPressed,
                             focused: isTriggerFocused,
                             hovered: isTriggerHovered,
                             disabled: isDisabled,
+                            loading: isLoading,
                         }), "data-size": size, isDisabled: isDisabled, ref: triggerRef, styles: triggerStyles, children: (0, jsx_runtime_1.jsx)(CaretDownIcon, {}, void 0) }, void 0)) : null] }, void 0), (0, jsx_runtime_1.jsx)(OverlayWrapper_1.OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: (0, jsx_runtime_1.jsx)(Select_1.ListBoxPopup, { ...listBoxProps, listBoxRef: listBoxRef, popoverRef: popoverRef, overlayProps: overlayProps, shouldUseVirtualFocus: true, placement: placement, state: state, listBoxStyles: listBoxStyles, overlayStyles: overlayStyles, optionStyles: optionStyles, minWidth: comboBoxWidth }, void 0) }, void 0)] }, void 0));
     return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...{
             labelPosition,

package/cjs/components/pickers/Menu/Menu.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 
@@ -23,11 +23,12 @@ const styled_1 = require("./styled");
 const MenuItem_1 = require("./MenuItem");
 const MenuSection_1 = require("./MenuSection");
 const context_1 = require("./context");
+const react_2 = require("../../../utils/react");
 function Menu(props, ref) {
     const { header, footer, selectionIcon } = props;
     const domRef = (0, utils_2.useDOMRef)(ref);
     const contextProps = (0, context_1.useMenuContext)();
-    const completeProps = (0, utils_1.mergeProps)(contextProps, props);
+    const completeProps = (0, react_2.mergeProps)(contextProps, props);
     const state = (0, tree_1.useTreeState)(completeProps);
     const items = [...state.collection];
     const hasSections = items.some((item) => item.type === 'section');
@@ -42,7 +43,7 @@ function Menu(props, ref) {
         },
     };
     (0, utils_1.useSyncRef)(contextProps, domRef);
-    return ((0, jsx_runtime_1.jsxs)(styled_1.StyledMenu, { ...(0, utils_1.mergeProps)(menuProps, completeProps, baseProps), ref: domRef, children: [header && (0, jsx_runtime_1.jsx)(styled_1.StyledMenuHeader, { children: header }, void 0), items.map((item) => {
+    return ((0, jsx_runtime_1.jsxs)(styled_1.StyledMenu, { ...(0, react_2.mergeProps)(menuProps, completeProps, baseProps), ref: domRef, children: [header && (0, jsx_runtime_1.jsx)(styled_1.StyledMenuHeader, { children: header }, void 0), items.map((item) => {
                 if (item.type === 'section') {
                     return ((0, jsx_runtime_1.jsx)(MenuSection_1.MenuSection, { item: item, state: state, selectionIcon: selectionIcon, onAction: completeProps.onAction }, item.key));
                 }

package/cjs/components/pickers/Menu/MenuButton.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 
@@ -76,12 +76,14 @@ const getSelectionTypeIcon = (selectionIcon) => {
         case 'radio':
             return (0, jsx_runtime_1.jsx)(RadioIcon, {}, void 0);
         default:
-            return null;
+            return undefined;
     }
 };
 function MenuButton({ children, icon, postfix, ...props }) {
     const { selectionIcon, isSelected, isSelectable } = props;
-    const checkIcon = isSelectable && isSelected ? getSelectionTypeIcon(selectionIcon) : null;
+    const checkIcon = isSelectable && isSelected
+        ? getSelectionTypeIcon(selectionIcon)
+        : undefined;
     const mods = {
         ...props.mods,
         selectionIcon: !!selectionIcon,

package/cjs/components/pickers/Menu/MenuItem.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 
@@ -37,7 +37,7 @@ function MenuItem(props) {
         isVirtualized,
         onAction,
     }, state, ref);
-    let contents = typeof rendered === 'string' ? ((0, jsx_runtime_1.jsx)(MenuButton_1.MenuButton, { ...itemProps, selectionIcon: selectionIcon, isSelectable: isSelectable, isSelected: isSelected, isDisabled: isDisabled, children: rendered }, void 0)) : (rendered);
+    const contents = ((0, jsx_runtime_1.jsx)(MenuButton_1.MenuButton, { ...itemProps, selectionIcon: selectionIcon, isSelectable: isSelectable, isSelected: isSelected, isDisabled: isDisabled, children: rendered }, void 0));
     return ((0, jsx_runtime_1.jsx)(focus_1.FocusRing, { children: (0, jsx_runtime_1.jsx)(styled_1.StyledMenuItem, { ...(0, react_2.mergeProps)(menuItemProps, hoverProps), ref: ref, mods: {
                 disabled: isDisabled,
                 selected: isSelected,

package/cjs/components/pickers/Menu/MenuSection.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/pickers/Menu/MenuTrigger.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 
@@ -96,7 +96,7 @@ function MenuTrigger(props, ref) {
         overlay = ((0, jsx_runtime_1.jsx)(Modal_1.Tray, { isOpen: state.isOpen, onClose: state.close, children: contents }, void 0));
     }
     else {
-        overlay = ((0, jsx_runtime_1.jsx)(Modal_1.Popover, { isOpen: state.isOpen, style: positionProps.style, ref: menuPopoverRef, placement: placement, hideArrow: true, onClose: state.close, shouldCloseOnBlur: true, children: contents }, void 0));
+        overlay = ((0, jsx_runtime_1.jsx)(Modal_1.Popover, { isOpen: state.isOpen, style: positionProps.style, ref: menuPopoverRef, placement: placement, hideArrow: true, onClose: state.close, isNonModal: true, children: contents }, void 0));
     }
     return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.SlotProvider, { slots: { actionButton: { holdAffordance: trigger === 'longPress' } }, children: (0, jsx_runtime_1.jsx)(interactions_1.PressResponder, { ...menuTriggerProps, ref: menuTriggerRef, isPressed: state.isOpen, children: menuTrigger }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(context_1.MenuContext.Provider, { value: menuContext, children: overlay }, void 0)] }, void 0));
 }

package/cjs/components/pickers/Menu/context.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/pickers/Menu/styled.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/pickers/Select/Select.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 
@@ -43,7 +43,7 @@ const SelectWrapperElement = (0, tasty_1.tasty)({
             '': '#dark.85',
             invalid: '#danger-text',
             focused: '#dark.85',
-            disabled: '#dark.30',
+            disabled: '#dark.3',
         },
     },
 });
@@ -87,6 +87,12 @@ const SelectElement = (0, tasty_1.tasty)({
         textAlign: 'left',
         cursor: 'pointer',
         transition: 'theme',
+        Value: {
+            color: {
+                '': 'inherit',
+                placeholder: '#dark.4',
+            },
+        },
     },
 });
 const ListBoxElement = (0, tasty_1.tasty)({
@@ -171,20 +177,17 @@ function Select(props, ref) {
     let validationIcon = isInvalid ? ((0, jsx_runtime_1.jsx)(icons_1.WarningOutlined, { style: { color: 'var(--danger-color)' } }, void 0)) : ((0, jsx_runtime_1.jsx)(icons_1.CheckOutlined, { style: { color: 'var(--success-color)' } }, void 0));
     let validation = (0, react_3.cloneElement)(validationIcon);
     let triggerWidth = (_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
-    let selectField = ((0, jsx_runtime_1.jsxs)(SelectWrapperElement, { qa: qa || 'Select', mods: {
-            invalid: isInvalid,
-            valid: validationState === 'valid',
-            disabled: isDisabled,
-            hovered: isHovered,
-            focused: isFocused,
-        }, styles: outerStyles, "data-size": size, children: [(0, jsx_runtime_1.jsx)(select_2.HiddenSelect, { state: state, triggerRef: triggerRef, label: props.label, name: props.name }, void 0), (0, jsx_runtime_1.jsxs)(SelectElement, { ...(0, react_2.mergeProps)(buttonProps, hoverProps, focusProps), ref: triggerRef, styles: inputStyles, "data-size": size, mods: {
-                    invalid: isInvalid,
-                    valid: validationState === 'valid',
-                    disabled: isDisabled,
-                    hovered: isHovered,
-                    focused: isFocused,
-                    'with-prefix': !!prefix,
-                }, children: [prefix, (0, jsx_runtime_1.jsx)("span", { ...valueProps, children: state.selectedItem
+    let mods = {
+        invalid: isInvalid,
+        valid: validationState === 'valid',
+        disabled: isDisabled,
+        loading: isLoading,
+        hovered: isHovered,
+        focused: isFocused,
+        placeholder: !!(placeholder === null || placeholder === void 0 ? void 0 : placeholder.trim()) && !state.selectedItem,
+        'with-prefix': !!prefix,
+    };
+    let selectField = ((0, jsx_runtime_1.jsxs)(SelectWrapperElement, { qa: qa || 'Select', mods: mods, styles: outerStyles, "data-size": size, children: [(0, jsx_runtime_1.jsx)(select_2.HiddenSelect, { state: state, triggerRef: triggerRef, label: props.label, name: props.name }, void 0), (0, jsx_runtime_1.jsxs)(SelectElement, { ...(0, react_2.mergeProps)(buttonProps, hoverProps, focusProps), ref: triggerRef, styles: inputStyles, "data-size": size, mods: mods, children: [prefix, (0, jsx_runtime_1.jsx)("span", { "data-element": "Value", ...valueProps, children: state.selectedItem
                             ? state.selectedItem.rendered
                             : placeholder || (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "\u00A0" }, void 0) }, void 0), (validationState || isLoading || suffix) && ((0, jsx_runtime_1.jsxs)("div", { children: [validationState && !isLoading ? validation : null, isLoading && (0, jsx_runtime_1.jsx)(icons_1.LoadingOutlined, {}, void 0), suffix] }, void 0)), (0, jsx_runtime_1.jsx)(CaretDownIcon, {}, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(OverlayWrapper_1.OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: (0, jsx_runtime_1.jsx)(ListBoxPopup, { ...menuProps, popoverRef: popoverRef, listBoxRef: listBoxRef, overlayProps: overlayProps, placement: placement, state: state, listBoxStyles: listBoxStyles, overlayStyles: overlayStyles, optionStyles: optionStyles, minWidth: triggerWidth }, void 0) }, void 0)] }, void 0));
     return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...{

package/cjs/components/portal/Portal.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/portal/PortalProvider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/portal/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/portal/storybook/templates/CustomRoot.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/portal/storybook/templates/PortalOrder.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/portal/storybook/templates/basic.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/portal/storybook/templates/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/portal/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/portal/usePortal.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/status/LoadingAnimation/LoadingAnimation.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/status/LoadingAnimation/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/status/Spin/Cube.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/status/Spin/InternalSpinner.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */
 

package/cjs/components/status/Spin/Spin.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.11.2
+ * @cube-dev/ui-kit v0.12.0
  * Released under the MIT license.
  */