@cube-dev/ui-kit 0.12.2 → 0.12.3

package/cjs/components/overlays/OverlayWrapper.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.2
+ * @cube-dev/ui-kit v0.12.3
  * 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.12.2
+ * @cube-dev/ui-kit v0.12.3
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.2
+ * @cube-dev/ui-kit v0.12.3
  * 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.12.2
+ * @cube-dev/ui-kit v0.12.3
  * 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.12.2
+ * @cube-dev/ui-kit v0.12.3
  * 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.12.2
+ * @cube-dev/ui-kit v0.12.3
  * 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.12.2
+ * @cube-dev/ui-kit v0.12.3
  * Released under the MIT license.
  */
 

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.2
+ * @cube-dev/ui-kit v0.12.3
  * 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.12.2
+ * @cube-dev/ui-kit v0.12.3
  * Released under the MIT license.
  */
 
@@ -23,9 +23,6 @@ const interactions_2 = require("../../../utils/react/interactions");
 const react_2 = require("../../../utils/react");
 const FieldWrapper_1 = require("../../forms/FieldWrapper");
 const Select_1 = require("../Select/Select");
-const Prefix_1 = require("../../layout/Prefix");
-const Suffix_1 = require("../../layout/Suffix");
-const Space_1 = require("../../layout/Space");
 const collections_1 = require("@react-stately/collections");
 const TextInputBase_1 = require("../../forms/TextInput/TextInputBase");
 const overlays_1 = require("@react-aria/overlays");
@@ -33,19 +30,13 @@ const OverlayWrapper_1 = require("../../overlays/OverlayWrapper");
 const CaretDownIcon = () => ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", width: "14", height: "14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M11.49 4.102H2.51c-.269 0-.42.284-.253.478l4.49 5.206a.342.342 0 00.506 0l4.49-5.206c.167-.194.016-.478-.253-.478z", fill: "currentColor" }, void 0) }, void 0));
 const ComboBoxWrapperElement = (0, tasty_1.tasty)({
     styles: {
-        position: 'relative',
-        display: 'grid',
-        zIndex: {
-            '': 'initial',
-            focused: 1,
-        },
+        ...TextInputBase_1.INPUT_WRAPPER_STYLES,
     },
 });
 const InputElement = (0, tasty_1.tasty)({
     as: 'input',
     styles: {
         ...TextInputBase_1.DEFAULT_INPUT_STYLES,
-        width: '100%',
     },
 });
 const TriggerElement = (0, tasty_1.tasty)({
@@ -56,7 +47,7 @@ const TriggerElement = (0, tasty_1.tasty)({
         placeContent: 'center',
         placeSelf: 'stretch',
         radius: 'right',
-        padding: '0 1x',
+        width: '4x',
         color: {
             '': '#dark.75',
             hovered: '#dark.75',
@@ -79,11 +70,9 @@ function ComboBox(props, ref) {
     var _a;
     props = (0, provider_1.useProviderProps)(props);
     props = (0, Form_1.useFormProps)(props);
-    let { qa, label, extra, labelPosition = 'top', labelStyles, isRequired, necessityIndicator, validationState, prefix, isDisabled, multiLine, autoFocus, inputRef, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, optionStyles, triggerStyles, suffix, listBoxStyles, overlayStyles, hideTrigger, message, description, size, autoComplete = 'off', direction = 'bottom', shouldFlip = true, requiredMark = true, menuTrigger = 'input', loadingState, filter, styles, labelSuffix, ...otherProps } = props;
+    let { qa, label, extra, labelPosition = 'top', labelStyles, isRequired, necessityIndicator, validationState, icon, prefix, isDisabled, multiLine, autoFocus, wrapperRef, inputRef, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, optionStyles, triggerStyles, suffix, listBoxStyles, overlayStyles, hideTrigger, message, description, size, autoComplete = 'off', direction = 'bottom', shouldFlip = true, requiredMark = true, menuTrigger = 'input', suffixPosition = 'before', loadingState, filter, styles, labelSuffix, ...otherProps } = props;
     let isAsync = loadingState != null;
     let { contains } = (0, i18n_1.useFilter)({ sensitivity: 'base' });
-    let [suffixWidth, setSuffixWidth] = (0, react_1.useState)(0);
-    let [prefixWidth, setPrefixWidth] = (0, react_1.useState)(0);
     let state = (0, combobox_1.useComboBoxState)({
         ...props,
         defaultFilter: filter || contains,
@@ -92,6 +81,7 @@ function ComboBox(props, ref) {
     const outerStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, styles);
     inputStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.BLOCK_STYLES, inputStyles);
     ref = (0, react_2.useCombinedRefs)(ref);
+    wrapperRef = (0, react_2.useCombinedRefs)(wrapperRef);
     inputRef = (0, react_2.useCombinedRefs)(inputRef);
     triggerRef = (0, react_2.useCombinedRefs)(triggerRef);
     popoverRef = (0, react_2.useCombinedRefs)(popoverRef);
@@ -114,10 +104,6 @@ function ComboBox(props, ref) {
         onClose: state.close,
         offset: overlayOffset,
     });
-    if (prefix) {
-        inputStyles.paddingLeft = `${prefixWidth}px`;
-    }
-    inputStyles.paddingRight = `${suffixWidth}px`;
     let { isFocused, focusProps } = (0, interactions_2.useFocus)({ isDisabled });
     let { hoverProps, isHovered } = (0, interactions_1.useHover)({ isDisabled });
     // Get props for the button based on the trigger props from useComboBox
@@ -125,20 +111,39 @@ function ComboBox(props, ref) {
     let { hoverProps: triggerHoverProps, isHovered: isTriggerHovered } = (0, interactions_1.useHover)({ isDisabled });
     let { focusProps: triggerFocusProps, isFocused: isTriggerFocused } = (0, interactions_2.useFocus)({ isDisabled }, true);
     let isInvalid = validationState === 'invalid';
-    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 validationIcon = isInvalid ? ((0, jsx_runtime_1.jsx)(icons_1.WarningOutlined, { "data-element": "ValidationIcon", style: { color: 'var(--danger-color)' } }, void 0)) : ((0, jsx_runtime_1.jsx)(icons_1.CheckOutlined, { "data-element": "ValidationIcon", 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 mods = {
+    let comboBoxWidth = (_a = wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+    if (icon) {
+        icon = (0, jsx_runtime_1.jsx)("div", { "data-element": "InputIcon", children: icon }, void 0);
+        if (prefix) {
+            prefix = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, prefix] }, void 0));
+        }
+        else {
+            prefix = icon;
+        }
+    }
+    let mods = (0, react_1.useMemo)(() => ({
         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: {
+        prefix: !!prefix,
+        suffix: true,
+    }), [
+        isInvalid,
+        validationState,
+        isDisabled,
+        isHovered,
+        isFocused,
+        isLoading,
+        prefix,
+    ]);
+    let comboBoxField = ((0, jsx_runtime_1.jsxs)(ComboBoxWrapperElement, { ref: wrapperRef, 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, 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)({
+        }, "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)("div", { "data-element": "Prefix", children: prefix }, void 0) : null, (0, jsx_runtime_1.jsxs)("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, validationState || isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [validationState && !isLoading ? validation : null, isLoading ? (0, jsx_runtime_1.jsx)(icons_1.LoadingOutlined, {}, void 0) : null] }, void 0)) : null, suffixPosition === 'after' ? suffix : null, !hideTrigger ? ((0, jsx_runtime_1.jsx)(TriggerElement, { qa: "ComboBoxTrigger", ...(0, react_2.mergeProps)(buttonProps, triggerFocusProps, triggerHoverProps), ...(0, react_2.modAttrs)({
                             pressed: isTriggerPressed,
                             focused: isTriggerFocused,
                             hovered: isTriggerHovered,

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.2
+ * @cube-dev/ui-kit v0.12.3
  * Released under the MIT license.
  */
 
@@ -25,7 +25,7 @@ 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 { header, footer, selectionIcon, qa } = props;
     const domRef = (0, utils_2.useDOMRef)(ref);
     const contextProps = (0, context_1.useMenuContext)();
     const completeProps = (0, react_2.mergeProps)(contextProps, props);
@@ -35,6 +35,7 @@ function Menu(props, ref) {
     const { menuProps } = (0, menu_1.useMenu)(completeProps, state, domRef);
     const styles = (0, tasty_1.extractStyles)(completeProps, tasty_1.CONTAINER_STYLES);
     const baseProps = {
+        qa,
         styles,
         mods: {
             sections: hasSections,

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

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

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.2
+ * @cube-dev/ui-kit v0.12.3
  * 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.12.2
+ * @cube-dev/ui-kit v0.12.3
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.2
+ * @cube-dev/ui-kit v0.12.3
  * 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.12.2
+ * @cube-dev/ui-kit v0.12.3
  * 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.12.2
+ * @cube-dev/ui-kit v0.12.3
  * Released under the MIT license.
  */
 
@@ -32,18 +32,50 @@ const collections_1 = require("@react-stately/collections");
 const OverlayWrapper_1 = require("../../overlays/OverlayWrapper");
 const transitions_1 = require("../../../utils/transitions");
 const styled_components_1 = __importDefault(require("styled-components"));
+const TextInputBase_1 = require("../../forms/TextInput/TextInputBase");
+const actions_1 = require("../../actions");
 const CaretDownIcon = () => ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", width: "14", height: "14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M11.49 4.102H2.51c-.269 0-.42.284-.253.478l4.49 5.206a.342.342 0 00.506 0l4.49-5.206c.167-.194.016-.478-.253-.478z", fill: "currentColor" }, void 0) }, void 0));
 const SelectWrapperElement = (0, tasty_1.tasty)({
     styles: {
         display: 'grid',
         position: 'relative',
         radius: true,
-        fill: '#white',
+        fill: {
+            '': '#white',
+            disabled: '#dark.04',
+        },
         color: {
             '': '#dark.85',
-            invalid: '#danger-text',
             focused: '#dark.85',
-            disabled: '#dark.3',
+            invalid: '#danger-text',
+            disabled: '#dark.30',
+        },
+        Value: {
+            ...TextInputBase_1.DEFAULT_INPUT_STYLES,
+            color: 'inherit',
+            opacity: {
+                '': 1,
+                placeholder: '.6',
+            },
+            textAlign: 'left',
+            fill: '#clear',
+        },
+        CaretIcon: {
+            display: 'grid',
+            placeItems: 'center',
+            width: 'min 4x',
+            cursor: 'pointer',
+        },
+        ButtonIcon: {
+            display: 'grid',
+            placeItems: 'center',
+            width: 'min 4x',
+            color: 'inherit',
+            fontSize: {
+                '': 'initial',
+                '[data-size="small"]': '14px',
+                '[data-size="medium"]': '16px',
+            },
         },
     },
 });
@@ -51,47 +83,15 @@ const SelectElement = (0, tasty_1.tasty)({
     as: 'button',
     qa: 'Button',
     styles: {
-        display: 'grid',
-        flow: 'column',
-        gridColumns: {
-            '': '1fr auto',
-            'with-prefix': 'auto 1fr auto',
-        },
-        placeItems: 'center stretch',
-        placeContent: 'center stretch',
-        gap: '1x',
-        padding: {
-            '': '(1.25x - 1bw) 1x (1.25x - 1bw) (1.5x - 1bw)',
-            '[data-size="small"]': '(.75x - 1px) 1x (.75x - 1px)  (1.5x - 1px)',
-        },
+        ...TextInputBase_1.INPUT_WRAPPER_STYLES,
+        cursor: 'pointer',
+        padding: '0',
         border: {
             '': true,
-            invalid: '#danger-text.50',
             valid: '#success-text.50',
-            focused: true,
-        },
-        radius: '@context-radius',
-        reset: 'button',
-        margin: 0,
-        preset: 'default',
-        outline: {
-            '': '#purple-03.0',
-            focused: '#purple-03',
-        },
-        color: 'inherit',
-        fill: {
-            '': '#dark.0',
-            'hovered | disabled': '#dark.04',
-        },
-        fontWeight: 400,
-        textAlign: 'left',
-        cursor: 'pointer',
-        transition: 'theme',
-        Value: {
-            color: {
-                '': 'inherit',
-                placeholder: '#dark.4',
-            },
+            invalid: '#danger-text.50',
+            '[data-type="clear"]': '#clear',
+            disabled: true,
         },
     },
 });
@@ -150,10 +150,20 @@ function Select(props, ref) {
     var _a;
     props = (0, provider_1.useProviderProps)(props);
     props = (0, Form_1.useFormProps)(props);
-    let { qa, label, extra, labelPosition = 'top', labelStyles, isRequired, necessityIndicator, validationState, prefix, isDisabled, autoFocus, inputProps, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, optionStyles, suffix, listBoxStyles, overlayStyles, message, description, direction = 'bottom', shouldFlip = true, requiredMark = true, placeholder, tooltip, size, styles, labelSuffix, ...otherProps } = props;
+    let { qa, label, extra, icon, labelPosition = 'top', labelStyles, isRequired, necessityIndicator, validationState, prefix, isDisabled, autoFocus, inputProps, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, optionStyles, suffix, listBoxStyles, overlayStyles, message, description, direction = 'bottom', shouldFlip = true, requiredMark = true, placeholder, tooltip, size, styles, type = 'neutral', theme, labelSuffix, suffixPosition = 'before', ...otherProps } = props;
     let state = (0, select_1.useSelectState)(props);
     const outerStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.OUTER_STYLES, styles);
-    inputStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.BLOCK_STYLES, inputStyles);
+    inputStyles = (0, tasty_1.extractStyles)(otherProps, tasty_1.BLOCK_STYLES, {
+        ...(() => {
+            let styles = (0, actions_1.provideButtonStyles)({ type, theme });
+            delete styles['border'];
+            if (isDisabled || validationState === 'invalid') {
+                styles.color = 'inherit';
+            }
+            return styles;
+        })(),
+        ...inputStyles,
+    });
     ref = (0, react_2.useCombinedRefs)(ref);
     triggerRef = (0, react_2.useCombinedRefs)(triggerRef);
     popoverRef = (0, react_2.useCombinedRefs)(popoverRef);
@@ -174,22 +184,41 @@ function Select(props, ref) {
     // Get props for the button based on the trigger props from useSelect
     let { buttonProps } = (0, button_1.useButton)(triggerProps, triggerRef);
     let isInvalid = validationState === 'invalid';
-    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 validationIcon = isInvalid ? ((0, jsx_runtime_1.jsx)(icons_1.WarningOutlined, { "data-element": "ValidationIcon", style: { color: 'var(--danger-color)' } }, void 0)) : ((0, jsx_runtime_1.jsx)(icons_1.CheckOutlined, { "data-element": "ValidationIcon", 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 mods = {
+    if (icon) {
+        icon = (0, jsx_runtime_1.jsx)("div", { "data-element": "ButtonIcon", children: icon }, void 0);
+        if (prefix) {
+            prefix = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon, prefix] }, void 0));
+        }
+        else {
+            prefix = icon;
+        }
+    }
+    const showPlaceholder = !!(placeholder === null || placeholder === void 0 ? void 0 : placeholder.trim()) && !state.selectedItem;
+    const modifiers = (0, react_3.useMemo)(() => ({
         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
+        placeholder: showPlaceholder,
+        prefix: !!prefix,
+        suffix: true,
+    }), [
+        validationState,
+        isDisabled,
+        isLoading,
+        isHovered,
+        isFocused,
+        showPlaceholder,
+        prefix,
+    ]);
+    let selectField = ((0, jsx_runtime_1.jsxs)(SelectWrapperElement, { qa: qa || 'Select', mods: modifiers, 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, "data-type": type || 'neutral', mods: modifiers, children: [prefix ? (0, jsx_runtime_1.jsx)("div", { "data-element": "Prefix", children: prefix }, void 0) : null, (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));
+                            : placeholder || (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "\u00A0" }, void 0) }, void 0), (0, jsx_runtime_1.jsxs)("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, validationState && !isLoading ? validation : null, isLoading && (0, jsx_runtime_1.jsx)(icons_1.LoadingOutlined, {}, void 0), suffixPosition === 'after' ? suffix : null, (0, jsx_runtime_1.jsx)("div", { "data-element": "CaretIcon", children: (0, jsx_runtime_1.jsx)(CaretDownIcon, {}, void 0) }, void 0)] }, 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, { ...{
             labelPosition,
             label,

package/cjs/components/portal/Portal.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.2
+ * @cube-dev/ui-kit v0.12.3
  * 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.12.2
+ * @cube-dev/ui-kit v0.12.3
  * 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.12.2
+ * @cube-dev/ui-kit v0.12.3
  * 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.12.2
+ * @cube-dev/ui-kit v0.12.3
  * 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.12.2
+ * @cube-dev/ui-kit v0.12.3
  * 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.12.2
+ * @cube-dev/ui-kit v0.12.3
  * 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.12.2
+ * @cube-dev/ui-kit v0.12.3
  * 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.12.2
+ * @cube-dev/ui-kit v0.12.3
  * 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.12.2
+ * @cube-dev/ui-kit v0.12.3
  * 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.12.2
+ * @cube-dev/ui-kit v0.12.3
  * 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.12.2
+ * @cube-dev/ui-kit v0.12.3
  * 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.12.2
+ * @cube-dev/ui-kit v0.12.3
  * 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.12.2
+ * @cube-dev/ui-kit v0.12.3
  * 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.12.2
+ * @cube-dev/ui-kit v0.12.3
  * Released under the MIT license.
  */
 

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

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