@cube-dev/ui-kit 0.12.2 → 0.12.3

package/es/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/es/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.
  */
 
@@ -9,7 +9,7 @@ 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';
@@ -26,18 +26,50 @@ import { Item } from '@react-stately/collections';
 import { OverlayWrapper } from '../../overlays/OverlayWrapper';
 import { getOverlayTransitionCSS } from '../../../utils/transitions';
 import styled from 'styled-components';
+import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES, } from '../../forms/TextInput/TextInputBase';
+import { provideButtonStyles } from '../../actions';
 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));
 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 +77,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 +144,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, 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 = 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 +178,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,

package/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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/es/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.
  */
 

package/es/components/status/Spin/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/es/components/status/Spin/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/es/components/status/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/es/data/themes.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/es/icons/Attention.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/es/icons/Cross.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/es/icons/Danger.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/es/icons/Success.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/es/icons/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/es/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/es/provider.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/es/providers/StyleProvider.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/es/services/notification.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/es/shared/form.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/es/shared/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/es/stories/FormFieldArgs.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.
  */
 
@@ -286,5 +286,18 @@ export const SELECTED_KEY_ARG = {
         },
     },
 };
+export const ICON_ARG = {
+    icon: {
+        // defaultValue: true,
+        description: 'Whether to show an icon on the element',
+        control: {
+            type: 'boolean',
+        },
+        table: {
+            type: { summary: 'boolean' },
+            defaultValue: { summary: true },
+        },
+    },
+};
 
         

package/es/stories/components/ConfirmDeletionDialogForm.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/es/stories/components/DialogFormApp.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/es/stories/components/StyledButton.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/es/stories/lists/baseProps.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/es/styled/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/es/styled/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/es/tasty/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/es/tasty/providers/BreakpointsProvider.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/es/tasty/styles/align.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/es/tasty/styles/border.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/es/tasty/styles/boxShadow.combinator.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.
  */