@cube-dev/ui-kit 0.12.1 → 0.12.4

package/es/components/overlays/Tooltip/Tooltip.js

@@ -1,19 +1,19 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useContext, useImperativeHandle, useRef, } from 'react';
-import { mergeProps } from '../../../utils/react';
 import { createDOMRef } from '@react-spectrum/utils';
-import { TooltipContext } from './context';
 import { useTooltip } from '@react-aria/tooltip';
-import { CONTAINER_STYLES, extractStyles, tasty, } from '../../../tasty';
-import { getOverlayTransitionCSS } from '../../../utils/transitions';
 import styled from 'styled-components';
+import { getOverlayTransitionCSS } from '../../../utils/transitions';
+import { CONTAINER_STYLES, extractStyles, tasty, } from '../../../tasty';
+import { mergeProps } from '../../../utils/react';
+import { TooltipContext } from './context';
 const TooltipElement = tasty({
     styles: {
         display: 'block',
@@ -90,10 +90,10 @@ function Tooltip(props, ref) {
     if (typeof minScale === 'number') {
         minScale = String(minScale);
     }
-    return (_jsxs(StyledTooltipElement, { ...tooltipProps, ...overlayProps, styles: styles, mods: {
+    return (_jsxs(StyledTooltipElement, { ...tooltipProps, ...overlayProps, ref: overlayRef, styles: styles, mods: {
             open: isOpen,
             material: isMaterial,
-        }, "data-min-offset": minOffset, "data-min-slale": minScale, "data-placement": placement, ref: overlayRef, children: [props.children, _jsx(TooltipTipElement, { "data-placement": placement, styles: tipStyles, ...arrowProps }, void 0)] }, void 0));
+        }, "data-min-offset": minOffset, "data-min-slale": minScale, "data-placement": placement, children: [props.children, _jsx(TooltipTipElement, { "data-placement": placement, styles: tipStyles, ...arrowProps }, void 0)] }, void 0));
 }
 /**
  * Display container for Tooltip content. Has a directional arrow dependent on its placement.

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

@@ -1,14 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import { TooltipTrigger } from './TooltipTrigger';
 import { Tooltip } from './Tooltip';
-import { useEffect, useState } from 'react';
 function TooltipProvider(props) {
     const [rendered, setRendered] = useState(false);
     const { title, children, tooltipStyles, width, ...otherProps } = props;

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

@@ -1,20 +1,20 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FocusableProvider } from '@react-aria/focus';
 import { Children, useRef } from 'react';
-import { TooltipContext } from './context';
 import { useOverlayPosition } from '@react-aria/overlays';
 import { useTooltipTrigger } from '@react-aria/tooltip';
 import { useTooltipTriggerState } from '@react-stately/tooltip';
 import { OverlayWrapper } from '../OverlayWrapper';
 import { ActiveZone } from '../../content/ActiveZone/ActiveZone';
 import { Block } from '../../Block';
+import { TooltipContext } from './context';
 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) {

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

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

package/es/components/pickers/ComboBox/ComboBox.js

@@ -1,48 +1,41 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckOutlined, LoadingOutlined, WarningOutlined, } from '@ant-design/icons';
-import { cloneElement, forwardRef, useState } from 'react';
+import { cloneElement, forwardRef, useMemo, } from 'react';
 import { useComboBoxState } from '@react-stately/combobox';
 import { useComboBox } from '@react-aria/combobox';
 import { useButton } from '@react-aria/button';
-import { useFormProps } from '../../forms/Form';
 import { useHover } from '@react-aria/interactions';
-import { useProviderProps } from '../../../provider';
 import { useFilter } from '@react-aria/i18n';
+import { Item } from '@react-stately/collections';
+import { useOverlayPosition } from '@react-aria/overlays';
+import { useFormProps } from '../../forms/Form';
+import { useProviderProps } from '../../../provider';
 import { BLOCK_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
 import { useFocus } from '../../../utils/react/interactions';
 import { mergeProps, modAttrs, useCombinedRefs } from '../../../utils/react';
 import { FieldWrapper } from '../../forms/FieldWrapper';
 import { ListBoxPopup } from '../Select/Select';
-import { Prefix } from '../../layout/Prefix';
-import { Suffix } from '../../layout/Suffix';
-import { Space } from '../../layout/Space';
-import { Item } from '@react-stately/collections';
-import { DEFAULT_INPUT_STYLES } from '../../forms/TextInput/TextInputBase';
-import { useOverlayPosition } from '@react-aria/overlays';
+import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES, } from '../../forms/TextInput/TextInputBase';
 import { OverlayWrapper } from '../../overlays/OverlayWrapper';
-const CaretDownIcon = () => (_jsx("svg", { "aria-hidden": "true", width: "14", height: "14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _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));
+function CaretDownIcon() {
+    return (_jsx("svg", { "aria-hidden": "true", width: "14", height: "14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _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 = tasty({
     styles: {
-        position: 'relative',
-        display: 'grid',
-        zIndex: {
-            '': 'initial',
-            focused: 1,
-        },
+        ...INPUT_WRAPPER_STYLES,
     },
 });
 const InputElement = tasty({
     as: 'input',
     styles: {
         ...DEFAULT_INPUT_STYLES,
-        width: '100%',
     },
 });
 const TriggerElement = tasty({
@@ -53,7 +46,7 @@ const TriggerElement = tasty({
         placeContent: 'center',
         placeSelf: 'stretch',
         radius: 'right',
-        padding: '0 1x',
+        width: '4x',
         color: {
             '': '#dark.75',
             hovered: '#dark.75',
@@ -76,11 +69,9 @@ function ComboBox(props, ref) {
     var _a;
     props = useProviderProps(props);
     props = 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, ...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 } = useFilter({ sensitivity: 'base' });
-    let [suffixWidth, setSuffixWidth] = useState(0);
-    let [prefixWidth, setPrefixWidth] = useState(0);
     let state = useComboBoxState({
         ...props,
         defaultFilter: filter || contains,
@@ -89,6 +80,7 @@ function ComboBox(props, ref) {
     const outerStyles = extractStyles(otherProps, OUTER_STYLES, styles);
     inputStyles = extractStyles(otherProps, BLOCK_STYLES, inputStyles);
     ref = useCombinedRefs(ref);
+    wrapperRef = useCombinedRefs(wrapperRef);
     inputRef = useCombinedRefs(inputRef);
     triggerRef = useCombinedRefs(triggerRef);
     popoverRef = useCombinedRefs(popoverRef);
@@ -111,10 +103,6 @@ function ComboBox(props, ref) {
         onClose: state.close,
         offset: overlayOffset,
     });
-    if (prefix) {
-        inputStyles.paddingLeft = `${prefixWidth}px`;
-    }
-    inputStyles.paddingRight = `${suffixWidth}px`;
     let { isFocused, focusProps } = useFocus({ isDisabled });
     let { hoverProps, isHovered } = useHover({ isDisabled });
     // Get props for the button based on the trigger props from useComboBox
@@ -122,26 +110,45 @@ function ComboBox(props, ref) {
     let { hoverProps: triggerHoverProps, isHovered: isTriggerHovered } = useHover({ isDisabled });
     let { focusProps: triggerFocusProps, isFocused: isTriggerFocused } = useFocus({ isDisabled }, true);
     let isInvalid = validationState === 'invalid';
-    let validationIcon = isInvalid ? (_jsx(WarningOutlined, { style: { color: 'var(--danger-color)' } }, void 0)) : (_jsx(CheckOutlined, { style: { color: 'var(--success-color)' } }, void 0));
+    let validationIcon = isInvalid ? (_jsx(WarningOutlined, { "data-element": "ValidationIcon", style: { color: 'var(--danger-color)' } }, void 0)) : (_jsx(CheckOutlined, { "data-element": "ValidationIcon", style: { color: 'var(--success-color)' } }, void 0));
     let validation = 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 = _jsx("div", { "data-element": "InputIcon", children: icon }, void 0);
+        if (prefix) {
+            prefix = (_jsxs(_Fragment, { children: [icon, prefix] }, void 0));
+        }
+        else {
+            prefix = icon;
+        }
+    }
+    let mods = useMemo(() => ({
         invalid: isInvalid,
         valid: validationState === 'valid',
         disabled: isDisabled,
         hovered: isHovered,
         focused: isFocused,
         loading: isLoading,
-    };
-    let comboBoxField = (_jsxs(ComboBoxWrapperElement, { ref: ref, qa: qa || 'ComboBox', ...modAttrs(mods), styles: outerStyles, style: {
+        prefix: !!prefix,
+        suffix: true,
+    }), [
+        isInvalid,
+        validationState,
+        isDisabled,
+        isHovered,
+        isFocused,
+        isLoading,
+        prefix,
+    ]);
+    let comboBoxField = (_jsxs(ComboBoxWrapperElement, { ref: wrapperRef, qa: qa || 'ComboBox', ...modAttrs(mods), styles: outerStyles, style: {
             zIndex: isFocused ? 1 : 'initial',
-        }, "data-size": size, children: [_jsx(InputElement, { qa: "Input", ...mergeProps(inputProps, hoverProps, focusProps), ref: inputRef, autoComplete: autoComplete, styles: inputStyles, ...modAttrs(mods), "data-size": size }, void 0), prefix ? (_jsx(Prefix, { onWidthChange: setPrefixWidth, padding: "0 1x 0 1.5x", opacity: isDisabled ? '@disabled-opacity' : false, placeItems: "center", outerGap: 0, children: prefix }, void 0)) : null, _jsxs(Suffix, { onWidthChange: setSuffixWidth, opacity: isDisabled ? '@disabled-opacity' : false, children: [validationState || isLoading ? (_jsxs(Space, { gap: false, padding: "0 1x", children: [validationState && !isLoading ? validation : null, isLoading && _jsx(LoadingOutlined, {}, void 0)] }, void 0)) : null, suffix, !hideTrigger ? (_jsx(TriggerElement, { ...mergeProps(buttonProps, triggerFocusProps, triggerHoverProps), ...modAttrs({
+        }, "data-size": size, children: [_jsx(InputElement, { qa: "Input", ...mergeProps(inputProps, hoverProps, focusProps), ref: inputRef, autoComplete: autoComplete, styles: inputStyles, ...modAttrs(mods), "data-size": size }, void 0), prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }, void 0) : null, _jsxs("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, validationState || isLoading ? (_jsxs(_Fragment, { children: [validationState && !isLoading ? validation : null, isLoading ? _jsx(LoadingOutlined, {}, void 0) : null] }, void 0)) : null, suffixPosition === 'after' ? suffix : null, !hideTrigger ? (_jsx(TriggerElement, { qa: "ComboBoxTrigger", ...mergeProps(buttonProps, triggerFocusProps, triggerHoverProps), ...modAttrs({
                             pressed: isTriggerPressed,
                             focused: isTriggerFocused,
                             hovered: isTriggerHovered,
                             disabled: isDisabled,
                             loading: isLoading,
-                        }), "data-size": size, isDisabled: isDisabled, ref: triggerRef, styles: triggerStyles, children: _jsx(CaretDownIcon, {}, void 0) }, void 0)) : null] }, void 0), _jsx(OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: _jsx(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));
+                        }), ref: triggerRef, "data-size": size, isDisabled: isDisabled, styles: triggerStyles, children: _jsx(CaretDownIcon, {}, void 0) }, void 0)) : null] }, void 0), _jsx(OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: _jsx(ListBoxPopup, { ...listBoxProps, shouldUseVirtualFocus: true, listBoxRef: listBoxRef, popoverRef: popoverRef, overlayProps: overlayProps, placement: placement, state: state, listBoxStyles: listBoxStyles, overlayStyles: overlayStyles, optionStyles: optionStyles, minWidth: comboBoxWidth }, void 0) }, void 0)] }, void 0));
     return (_jsx(FieldWrapper, { ...{
             labelPosition,
             label,
@@ -156,6 +163,7 @@ function ComboBox(props, ref) {
             message,
             description,
             requiredMark,
+            labelSuffix,
             Component: comboBoxField,
             ref: ref,
         } }, void 0));

package/es/components/pickers/Menu/Menu.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
@@ -13,13 +13,13 @@ import { useSyncRef } from '@react-aria/utils';
 import { useDOMRef } from '@react-spectrum/utils';
 import { useTreeState } from '@react-stately/tree';
 import { CONTAINER_STYLES, extractStyles, } from '../../../tasty';
+import { mergeProps } from '../../../utils/react';
 import { StyledMenu, StyledMenuHeader } from './styled';
 import { MenuItem } from './MenuItem';
 import { MenuSection } from './MenuSection';
 import { useMenuContext } from './context';
-import { mergeProps } from '../../../utils/react';
 function Menu(props, ref) {
-    const { header, footer, selectionIcon } = props;
+    const { header, footer, selectionIcon, qa } = props;
     const domRef = useDOMRef(ref);
     const contextProps = useMenuContext();
     const completeProps = mergeProps(contextProps, props);
@@ -29,6 +29,7 @@ function Menu(props, ref) {
     const { menuProps } = useMenu(completeProps, state, domRef);
     const styles = extractStyles(completeProps, CONTAINER_STYLES);
     const baseProps = {
+        qa,
         styles,
         mods: {
             sections: hasSections,

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

@@ -1,16 +1,16 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckOutlined } from '@ant-design/icons';
 import { Button } from '../../actions';
 import { Text } from '../../content/Text';
 import { tasty } from '../../../tasty';
 import { Space } from '../../layout/Space';
-import { CheckOutlined } from '@ant-design/icons';
 const ACTION_BUTTON = {
     border: {
         '': '#clear',
@@ -87,7 +87,7 @@ export function MenuButton({ children, icon, postfix, ...props }) {
         selectable: isSelectable,
         selected: isSelected,
     };
-    return (_jsxs(Button, { type: "neutral", size: "small", styles: ACTION_BUTTON, ...props, icon: checkIcon, mods: mods, children: [icon && _jsx(Text, { color: "inherit", children: icon }, void 0), _jsxs(Space, { gap: "1x", placeContent: "space-between", overflow: "auto", width: "100%", children: [_jsx(Text, { color: "inherit", ellipsis: true, children: children }, void 0), postfix && getPostfix(postfix)] }, void 0)] }, void 0));
+    return (_jsxs(Button, { type: "neutral", size: "small", styles: ACTION_BUTTON, ...props, icon: checkIcon, mods: mods, children: [icon && _jsx(Text, { color: "inherit", children: icon }, void 0), _jsxs(Space, { gap: "1x", placeContent: "space-between", overflow: "auto", width: "100%", children: [_jsx(Text, { ellipsis: true, color: "inherit", children: children }, void 0), postfix && getPostfix(postfix)] }, void 0)] }, void 0));
 }
 
         

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

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

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

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { MenuItem } from './MenuItem';
 import { useMenuSection } from '@react-aria/menu';
+import { MenuItem } from './MenuItem';
 import { StyledMenu, StyledMenuSection, StyledMenuSectionHeading, } from './styled';
 /** @private */
 export function MenuSection(props) {

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

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

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

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

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

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

package/es/components/pickers/Select/Select.js

@@ -1,43 +1,77 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.1
+ * @cube-dev/ui-kit v0.12.4
  * Released under the MIT license.
  */
 
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckOutlined, LoadingOutlined, WarningOutlined, } from '@ant-design/icons';
-import { mergeProps, useCombinedRefs } from '../../../utils/react';
-import { cloneElement, forwardRef, useRef, useState, } from 'react';
+import { cloneElement, forwardRef, useMemo, useRef, useState, } from 'react';
 import { useSelectState } from '@react-stately/select';
 import { HiddenSelect, useSelect } from '@react-aria/select';
 import { useListBox, useOption } from '@react-aria/listbox';
 import { useButton } from '@react-aria/button';
 import { FocusScope } from '@react-aria/focus';
 import { DismissButton, useOverlay, useOverlayPosition, } from '@react-aria/overlays';
-import { useFormProps } from '../../forms/Form/Form';
 import { useFocus as useAriaFocus, useHover } from '@react-aria/interactions';
+import { Item } from '@react-stately/collections';
+import styled from 'styled-components';
+import { useFormProps } from '../../forms/Form/Form';
 import { useProviderProps } from '../../../provider';
 import { BLOCK_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
 import { useFocus } from '../../../utils/react/interactions';
 import { FieldWrapper } from '../../forms/FieldWrapper';
-import { Item } from '@react-stately/collections';
 import { OverlayWrapper } from '../../overlays/OverlayWrapper';
 import { getOverlayTransitionCSS } from '../../../utils/transitions';
-import styled from 'styled-components';
-const CaretDownIcon = () => (_jsx("svg", { "aria-hidden": "true", width: "14", height: "14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _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));
+import { mergeProps, useCombinedRefs } from '../../../utils/react';
+import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES, } from '../../forms/TextInput/TextInputBase';
+import { provideButtonStyles } from '../../actions';
+function CaretDownIcon() {
+    return (_jsx("svg", { "aria-hidden": "true", width: "14", height: "14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _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 = 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: {
+            ...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',
+            },
         },
     },
 });
@@ -45,47 +79,15 @@ const SelectElement = 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)',
-        },
+        ...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,
         },
     },
 });
@@ -144,10 +146,20 @@ function Select(props, ref) {
     var _a;
     props = useProviderProps(props);
     props = 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, ...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 = useSelectState(props);
     const outerStyles = extractStyles(otherProps, OUTER_STYLES, styles);
-    inputStyles = extractStyles(otherProps, BLOCK_STYLES, inputStyles);
+    inputStyles = extractStyles(otherProps, BLOCK_STYLES, {
+        ...(() => {
+            let styles = provideButtonStyles({ type, theme });
+            delete styles['border'];
+            if (isDisabled || validationState === 'invalid') {
+                styles.color = 'inherit';
+            }
+            return styles;
+        })(),
+        ...inputStyles,
+    });
     ref = useCombinedRefs(ref);
     triggerRef = useCombinedRefs(triggerRef);
     popoverRef = useCombinedRefs(popoverRef);
@@ -168,22 +180,41 @@ function Select(props, ref) {
     // Get props for the button based on the trigger props from useSelect
     let { buttonProps } = useButton(triggerProps, triggerRef);
     let isInvalid = validationState === 'invalid';
-    let validationIcon = isInvalid ? (_jsx(WarningOutlined, { style: { color: 'var(--danger-color)' } }, void 0)) : (_jsx(CheckOutlined, { style: { color: 'var(--success-color)' } }, void 0));
+    let validationIcon = isInvalid ? (_jsx(WarningOutlined, { "data-element": "ValidationIcon", style: { color: 'var(--danger-color)' } }, void 0)) : (_jsx(CheckOutlined, { "data-element": "ValidationIcon", style: { color: 'var(--success-color)' } }, void 0));
     let validation = 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 = _jsx("div", { "data-element": "ButtonIcon", children: icon }, void 0);
+        if (prefix) {
+            prefix = (_jsxs(_Fragment, { children: [icon, prefix] }, void 0));
+        }
+        else {
+            prefix = icon;
+        }
+    }
+    const showPlaceholder = !!(placeholder === null || placeholder === void 0 ? void 0 : placeholder.trim()) && !state.selectedItem;
+    const modifiers = 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 = (_jsxs(SelectWrapperElement, { qa: qa || 'Select', mods: mods, styles: outerStyles, "data-size": size, children: [_jsx(HiddenSelect, { state: state, triggerRef: triggerRef, label: props.label, name: props.name }, void 0), _jsxs(SelectElement, { ...mergeProps(buttonProps, hoverProps, focusProps), ref: triggerRef, styles: inputStyles, "data-size": size, mods: mods, children: [prefix, _jsx("span", { "data-element": "Value", ...valueProps, children: state.selectedItem
+        placeholder: showPlaceholder,
+        prefix: !!prefix,
+        suffix: true,
+    }), [
+        validationState,
+        isDisabled,
+        isLoading,
+        isHovered,
+        isFocused,
+        showPlaceholder,
+        prefix,
+    ]);
+    let selectField = (_jsxs(SelectWrapperElement, { qa: qa || 'Select', mods: modifiers, styles: outerStyles, "data-size": size, children: [_jsx(HiddenSelect, { state: state, triggerRef: triggerRef, label: props.label, name: props.name }, void 0), _jsxs(SelectElement, { ...mergeProps(buttonProps, hoverProps, focusProps), ref: triggerRef, styles: inputStyles, "data-size": size, "data-type": type || 'neutral', mods: modifiers, children: [prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }, void 0) : null, _jsx("span", { "data-element": "Value", ...valueProps, children: state.selectedItem
                             ? state.selectedItem.rendered
-                            : placeholder || _jsx(_Fragment, { children: "\u00A0" }, void 0) }, void 0), (validationState || isLoading || suffix) && (_jsxs("div", { children: [validationState && !isLoading ? validation : null, isLoading && _jsx(LoadingOutlined, {}, void 0), suffix] }, void 0)), _jsx(CaretDownIcon, {}, void 0)] }, void 0), _jsx(OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: _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 || _jsx(_Fragment, { children: "\u00A0" }, void 0) }, void 0), _jsxs("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, validationState && !isLoading ? validation : null, isLoading && _jsx(LoadingOutlined, {}, void 0), suffixPosition === 'after' ? suffix : null, _jsx("div", { "data-element": "CaretIcon", children: _jsx(CaretDownIcon, {}, void 0) }, void 0)] }, void 0)] }, void 0), _jsx(OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: _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 (_jsx(FieldWrapper, { ...{
             labelPosition,
             label,
@@ -199,6 +230,7 @@ function Select(props, ref) {
             description,
             requiredMark,
             tooltip,
+            labelSuffix,
             Component: selectField,
             ref: ref,
         } }, void 0));
@@ -222,10 +254,10 @@ export function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, ove
     // trigger when the popup is closed. In addition, add hidden
     // <DismissButton> components at the start and end of the list
     // to allow screen reader users to dismiss the popup easily.
-    return (_jsx(StyledOverlayElement, { ...overlayProps, ...parentOverlayProps, styles: overlayStyles, style: {
+    return (_jsx(StyledOverlayElement, { ...overlayProps, ...parentOverlayProps, ref: popoverRef, styles: overlayStyles, style: {
             '--overlay-min-width': minWidth ? `${minWidth}px` : 'initial',
             ...parentOverlayProps === null || parentOverlayProps === void 0 ? void 0 : parentOverlayProps.style,
-        }, "data-position": placement, ref: popoverRef, children: _jsxs(FocusScope, { restoreFocus: true, children: [_jsx(DismissButton, { onDismiss: () => state.close() }, void 0), _jsx(ListBoxElement, { styles: listBoxStyles, ...mergeProps(listBoxProps, otherProps), ref: listBoxRef, children: Array.from(state.collection).map((item) => (_jsx(Option, { item: item, state: state, styles: optionStyles, shouldUseVirtualFocus: shouldUseVirtualFocus }, item.key))) }, void 0), _jsx(DismissButton, { onDismiss: () => state.close() }, void 0)] }, void 0) }, void 0));
+        }, "data-position": placement, children: _jsxs(FocusScope, { restoreFocus: true, children: [_jsx(DismissButton, { onDismiss: () => state.close() }, void 0), _jsx(ListBoxElement, { styles: listBoxStyles, ...mergeProps(listBoxProps, otherProps), ref: listBoxRef, children: Array.from(state.collection).map((item) => (_jsx(Option, { item: item, state: state, styles: optionStyles, shouldUseVirtualFocus: shouldUseVirtualFocus }, item.key))) }, void 0), _jsx(DismissButton, { onDismiss: () => state.close() }, void 0)] }, void 0) }, void 0));
 }
 function Option({ item, state, styles, shouldUseVirtualFocus }) {
     let ref = useRef(null);
@@ -244,11 +276,11 @@ function Option({ item, state, styles, shouldUseVirtualFocus }) {
     // style to the focused option
     let [isFocused, setFocused] = useState(false);
     let { focusProps } = useAriaFocus({ onFocusChange: setFocused });
-    return (_createElement(OptionElement, { ...mergeProps(optionProps, focusProps), ref: ref, mods: {
+    return (_createElement(OptionElement, { ...mergeProps(optionProps, focusProps), ref: ref, key: item.key, mods: {
             selected: isSelected,
             focused: shouldUseVirtualFocus ? isVirtualFocused : isFocused,
             disabled: isDisabled,
-        }, "data-theme": isSelected ? 'special' : undefined, styles: styles, key: item.key }, item.rendered));
+        }, "data-theme": isSelected ? 'special' : undefined, styles: styles }, item.rendered));
 }
 const _Select = forwardRef(Select);
 _Select.cubeInputType = 'Select';

package/es/components/portal/Portal.js

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