@cube-dev/ui-kit 0.12.1 → 0.12.4

package/es/components/forms/NumberInput/StepButton.js

@@ -1,15 +1,15 @@
 /**
  * @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 } from "react/jsx-runtime";
-import { Button } from '../../actions';
 import { CaretDownOutlined, CaretUpOutlined } from '@ant-design/icons';
+import { Button } from '../../actions';
 const STEP_BUTTON_STYLES = {
-    padding: '0 .5x',
+    width: '4x',
     radius: {
         '': '0 (1r - 1bw) 0 0',
         down: '0 0 (1r - 1bw) 0',
@@ -22,7 +22,7 @@ const STEP_BUTTON_STYLES = {
  * Buttons for NumberField.
  */
 export function StepButton(props) {
-    return (_jsx(Button, { type: "neutral", styles: STEP_BUTTON_STYLES, preventDefault: true, icon: props.direction === 'up' ? _jsx(CaretUpOutlined, {}, void 0) : _jsx(CaretDownOutlined, {}, void 0), mods: {
+    return (_jsx(Button, { preventDefault: true, type: "neutral", styles: STEP_BUTTON_STYLES, icon: props.direction === 'up' ? _jsx(CaretUpOutlined, {}, void 0) : _jsx(CaretDownOutlined, {}, void 0), mods: {
             up: props.direction === 'up',
             down: props.direction === 'down',
         }, label: `Step ${props.direction}`, ...props }, void 0));

package/es/components/forms/PasswordInput/PasswordInput.js

@@ -1,17 +1,17 @@
 /**
  * @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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useRef, useState } from 'react';
+import { useTextField } from '@react-aria/textfield';
+import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
 import { TextInputBase, } from '../TextInput/TextInputBase';
 import { useProviderProps } from '../../../provider';
-import { useTextField } from '@react-aria/textfield';
 import { Button } from '../../actions';
-import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
 function PasswordInput(props, ref) {
     props = castNullableStringValue(props);
@@ -25,8 +25,8 @@ function PasswordInput(props, ref) {
     const toggleType = useCallback((e) => {
         setType((type) => (type === 'password' ? 'text' : 'password'));
     }, []);
-    const wrappedSuffix = (_jsxs(_Fragment, { children: [suffix, _jsx(Button, { type: "neutral", htmlType: "button", onPress: toggleType, placeSelf: "stretch", height: "auto", radius: "right (1r - 1bw)", padding: ".5x 1x", width: "auto", label: "Toggle masking", excludeFromTabOrder: true, icon: type === 'password' ? _jsx(EyeInvisibleOutlined, {}, void 0) : _jsx(EyeOutlined, {}, void 0) }, void 0)] }, void 0));
-    return (_jsx(TextInputBase, { labelProps: labelProps, inputProps: inputProps, ref: ref, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...otherProps }, void 0));
+    const wrappedSuffix = (_jsxs(_Fragment, { children: [suffix, _jsx(Button, { excludeFromTabOrder: true, type: "neutral", htmlType: "button", placeSelf: "stretch", height: "auto", radius: "right", width: "4x", label: "Toggle masking", icon: type === 'password' ? _jsx(EyeInvisibleOutlined, {}, void 0) : _jsx(EyeOutlined, {}, void 0), onPress: toggleType }, void 0)] }, void 0));
+    return (_jsx(TextInputBase, { ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: type, suffixPosition: "after", suffix: wrappedSuffix, multiLine: multiLine, ...otherProps }, void 0));
 }
 /**
  * PasswordInputs are password inputs that allow users to input passwords or code entries

package/es/components/forms/RadioGroup/Radio.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.
  */
 
@@ -10,15 +10,15 @@ import { useFocusableRef } from '@react-spectrum/utils';
 import { forwardRef, useRef } from 'react';
 import { useHover } from '@react-aria/interactions';
 import { useRadio } from '@react-aria/radio';
-import { useRadioProvider } from './context';
 import { extractStyles, filterBaseProps, OUTER_STYLES, tasty, } from '../../../tasty';
 import { useFocus } from '../../../utils/react/interactions';
 import { mergeProps } from '../../../utils/react';
 import { useProviderProps } from '../../../provider';
 import { INLINE_LABEL_STYLES } from '../Label';
 import { HiddenInput } from '../../HiddenInput';
+import { useFormProps } from '../Form';
 import { RadioGroup } from './RadioGroup';
-import { useFormProps } from '../Form/Form';
+import { useRadioProvider } from './context';
 const RadioWrapperElement = tasty({
     as: 'label',
     qa: 'RadioWrapper',
@@ -142,7 +142,7 @@ function Radio(props, ref) {
             invalid: validationState === 'invalid',
             hovered: isHovered,
             button: isButton,
-        }, children: [_jsx(HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...mergeProps(inputProps, focusProps), isButton: isButton, ref: inputRef }, void 0), _jsx(RadioElement, { mods: {
+        }, children: [_jsx(HiddenInput, { "data-qa": qa || 'Radio', "aria-label": ariaLabel, ...mergeProps(inputProps, focusProps), ref: inputRef, isButton: isButton }, void 0), _jsx(RadioElement, { mods: {
                     checked: inputProps.checked,
                     invalid: validationState === 'invalid',
                     valid: validationState === 'valid',
@@ -157,7 +157,7 @@ function Radio(props, ref) {
 }
 function RadioButton(props, ref) {
     const Radio = _Radio;
-    return _jsx(Radio, { ...props, type: "button", ref: ref }, void 0);
+    return _jsx(Radio, { ...props, ref: ref, type: "button" }, void 0);
 }
 /**
  * Radio buttons allow users to select a single option from a list of mutually exclusive options.

package/es/components/forms/RadioGroup/RadioGroup.js

@@ -1,21 +1,21 @@
 /**
  * @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 } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { useDOMRef } from '@react-spectrum/utils';
-import { useProviderProps } from '../../../provider';
 import { useRadioGroup } from '@react-aria/radio';
 import { useRadioGroupState } from '@react-stately/radio';
-import { FormContext, useFormProps } from '../Form/Form';
-import { RadioContext } from './context';
+import { useProviderProps } from '../../../provider';
+import { FormContext, useFormProps } from '../Form';
 import { BLOCK_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
 import { FieldWrapper } from '../FieldWrapper';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
+import { RadioContext } from './context';
 const RadioGroupElement = tasty({
     qa: 'RadioGroup',
     styles: {
@@ -40,7 +40,7 @@ function RadioGroup(props, ref) {
     props = castNullableStringValue(props);
     props = useProviderProps(props);
     props = useFormProps(props);
-    let { isDisabled, isRequired, necessityIndicator, label, extra, labelPosition = 'top', validationState, children, orientation = 'vertical', message, description, labelStyles, requiredMark = true, tooltip, isHidden, styles, groupStyles, insideForm, ...otherProps } = props;
+    let { isDisabled, isRequired, necessityIndicator, label, extra, labelPosition = 'top', validationState, children, orientation = 'vertical', message, description, labelStyles, requiredMark = true, tooltip, isHidden, styles, groupStyles, insideForm, labelSuffix, ...otherProps } = props;
     let domRef = useDOMRef(ref);
     styles = extractStyles(otherProps, OUTER_STYLES, styles);
     groupStyles = extractStyles(otherProps, BLOCK_STYLES, groupStyles);
@@ -74,6 +74,7 @@ function RadioGroup(props, ref) {
             isHidden,
             Component: radioGroup,
             ref: domRef,
+            labelSuffix,
         } }, void 0));
 }
 /**

package/es/components/forms/RadioGroup/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/forms/SearchInput/SearchInput.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.
  */
 
@@ -16,10 +16,20 @@ import { useProviderProps } from '../../../provider';
 import { Button } from '../../actions';
 import { ariaToCubeButtonProps } from '../../../utils/react/mapProps';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
-export const SearchInput = forwardRef((props, ref) => {
+import { tasty } from '../../../tasty';
+const ClearButton = tasty(Button, {
+    icon: _jsx(CloseOutlined, {}, void 0),
+    styles: {
+        radius: 'right (1r - 1bw)',
+        width: '4x',
+        height: 'auto',
+        placeSelf: 'stretch',
+    },
+});
+export const SearchInput = forwardRef(function SearchInput(props, ref) {
     props = castNullableStringValue(props);
     props = useProviderProps(props);
-    let { isClearable, value } = props;
+    let { isClearable, value, validationState } = props;
     const localRef = useRef(null);
     const combinedRef = useCombinedRefs(ref, localRef);
     let inputRef = useRef(null);
@@ -31,12 +41,9 @@ export const SearchInput = forwardRef((props, ref) => {
     }, [combinedRef, value]);
     let state = useSearchFieldState(props);
     let { inputProps, clearButtonProps } = useSearchField(props, state, inputRef);
-    return (_jsx(TextInputBase, { inputProps: inputProps, ref: ref, inputRef: inputRef, inputStyles: { paddingRight: '4x' }, type: "search", prefix: _jsx(SearchOutlined, {}, void 0), suffixPosition: "after", suffix: isClearable &&
+    return (_jsx(TextInputBase, { ref: ref, inputProps: inputProps, inputRef: inputRef, type: "search", icon: _jsx(SearchOutlined, {}, void 0), suffixPosition: "after", suffix: isClearable &&
             state.value !== '' &&
-            !props.isReadOnly && (_jsx(Button, { type: "clear", ...ariaToCubeButtonProps(clearButtonProps), color: {
-                '': '#dark.50',
-                'hovered | pressed': '#purple-text',
-            }, radius: "right (1r - 1bw)", padding: ".5x 1x", placeSelf: "stretch", icon: _jsx(CloseOutlined, {}, void 0) }, void 0)), ...props }, void 0));
+            !props.isReadOnly && (_jsx(ClearButton, { type: validationState === 'invalid' ? 'clear' : 'neutral', theme: validationState === 'invalid' ? 'danger' : undefined, ...ariaToCubeButtonProps(clearButtonProps) }, void 0)), ...props }, void 0));
 });
 
         

package/es/components/forms/Switch/Switch.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.
  */
 
@@ -11,13 +11,13 @@ import { forwardRef, useMemo, useRef } from 'react';
 import { useSwitch } from '@react-aria/switch';
 import { useHover } from '@react-aria/interactions';
 import { useToggleState } from '@react-stately/toggle';
+import { LoadingOutlined } from '@ant-design/icons';
 import { useProviderProps } from '../../../provider';
 import { BLOCK_STYLES, Element, extractStyles, filterBaseProps, OUTER_STYLES, tasty, } from '../../../tasty';
 import { useFocus } from '../../../utils/react/interactions';
 import { mergeProps } from '../../../utils/react';
 import { HiddenInput } from '../../HiddenInput';
 import { INLINE_LABEL_STYLES, LABEL_STYLES } from '../Label';
-import { LoadingOutlined } from '@ant-design/icons';
 import { useFormProps } from '../Form/Form';
 import { FieldWrapper } from '../FieldWrapper';
 import { castNullableIsSelected, } from '../../../utils/react/nullableValue';
@@ -94,7 +94,7 @@ function Switch(props, ref) {
     props = castNullableIsSelected(props);
     props = useProviderProps(props);
     props = useFormProps(props);
-    let { qa, isDisabled = false, autoFocus, children, label, extra, labelProps, labelStyles, isLoading, insideForm, validationState, message, description, labelPosition, inputStyles, requiredMark = true, tooltip, ...otherProps } = props;
+    let { qa, isDisabled = false, autoFocus, children, label, extra, labelProps, labelStyles, isLoading, insideForm, validationState, message, description, labelPosition, inputStyles, requiredMark = true, tooltip, labelSuffix, ...otherProps } = props;
     label = label || children;
     let styles = extractStyles(props, OUTER_STYLES);
     inputStyles = extractStyles(props, BLOCK_STYLES, inputStyles);
@@ -132,6 +132,7 @@ function Switch(props, ref) {
                 description,
                 requiredMark,
                 tooltip,
+                labelSuffix,
                 Component: switchField,
                 ref: domRef,
             } }, void 0));

package/es/components/forms/TextArea/TextArea.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 } from "react/jsx-runtime";
 import { forwardRef, useCallback, useRef } from 'react';
-import { TextInputBase, } from '../TextInput/TextInputBase';
 import { useControlledState } from '@react-stately/utils';
-import { useProviderProps } from '../../../provider';
 import { useTextField } from '@react-aria/textfield';
+import { TextInputBase, } from '../TextInput/TextInputBase';
+import { useProviderProps } from '../../../provider';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
 import { chain, useLayoutEffect } from '../../../utils/react';
 function TextArea(props, ref) {
@@ -46,7 +46,7 @@ function TextArea(props, ref) {
         onChange: chain(onChange, setInputValue),
         inputElementType: 'textarea',
     }, inputRef);
-    return (_jsx(TextInputBase, { ...otherProps, ref: ref, inputRef: inputRef, labelProps: labelProps, inputProps: inputProps, multiLine: true, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, rows: rows }, void 0));
+    return (_jsx(TextInputBase, { ...otherProps, ref: ref, multiLine: true, inputRef: inputRef, labelProps: labelProps, inputProps: inputProps, isDisabled: isDisabled, isReadOnly: isReadOnly, isRequired: isRequired, rows: rows }, void 0));
 }
 /**
  * TextInputs are text inputs that allow users to input custom text entries

package/es/components/forms/TextInput/TextInput.js

@@ -1,22 +1,22 @@
 /**
  * @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 } from "react/jsx-runtime";
 import { forwardRef, useRef } from 'react';
-import { TextInputBase } from './TextInputBase';
-import { useProviderProps } from '../../../provider';
 import { useTextField } from '@react-aria/textfield';
+import { useProviderProps } from '../../../provider';
 import { castNullableStringValue, } from '../../../utils/react/nullableValue';
+import { TextInputBase } from './TextInputBase';
 export const TextInput = forwardRef(function TextInput(props, ref) {
     castNullableStringValue(props);
     props = useProviderProps(props);
     let inputRef = useRef(null);
     let { labelProps, inputProps } = useTextField(props, inputRef);
-    return (_jsx(TextInputBase, { ...props, labelProps: labelProps, inputProps: inputProps, ref: ref, inputRef: inputRef }, void 0));
+    return (_jsx(TextInputBase, { ...props, ref: ref, labelProps: labelProps, inputProps: inputProps, inputRef: inputRef }, void 0));
 });
 /**
  * TextInputs are text inputs that allow users to input custom text entries

package/es/components/forms/TextInput/TextInputBase.js

@@ -1,52 +1,39 @@
 /**
  * @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 { createFocusableRef } from '@react-spectrum/utils';
-import { cloneElement, forwardRef, useImperativeHandle, useRef, useState, } from 'react';
-import { useFormProps } from '../Form/Form';
+import { cloneElement, forwardRef, useImperativeHandle, useMemo, useRef, } from 'react';
 import { useHover } from '@react-aria/interactions';
+import { useFormProps } from '../Form/Form';
 import { useProviderProps } from '../../../provider';
 import { BLOCK_STYLES, DIMENSION_STYLES, extractStyles, POSITION_STYLES, tasty, } from '../../../tasty';
 import { useFocus } from '../../../utils/react/interactions';
-import { Prefix } from '../../layout/Prefix';
-import { Suffix } from '../../layout/Suffix';
 import { FieldWrapper } from '../FieldWrapper';
-import { Space } from '../../layout/Space';
-import { Block } from '../../Block';
 import { mergeProps } from '../../../utils/react';
-const InputWrapperElement = tasty({
-    styles: {
-        display: 'grid',
-        position: 'relative',
-        Prefix: {
-            padding: {
-                '': '0 1x 0 1.5x',
-                'text-prefix': '0 1x 0 2.5x',
-            },
-        },
-        Suffix: {
-            padding: '.5x left',
-        },
-    },
-});
-const STYLE_LIST = [...POSITION_STYLES, ...DIMENSION_STYLES];
-const INPUT_STYLE_PROPS_LIST = [...BLOCK_STYLES, 'resize'];
-export const DEFAULT_INPUT_STYLES = {
-    display: 'block',
-    width: 'initial 100% initial',
-    height: 'initial initial initial',
-    color: {
-        '': '#dark.85',
-        invalid: '#danger-text',
-        focused: '#dark.85',
-        disabled: '#dark.30',
+const ADD_STYLES = {
+    display: 'grid',
+    placeContent: 'stretch',
+    placeItems: 'center',
+    flow: 'column',
+    gap: 0,
+    cursor: 'inherit',
+    opacity: {
+        '': 1,
+        disabled: '@disabled-opacity',
     },
+};
+export const INPUT_WRAPPER_STYLES = {
+    display: 'grid',
+    position: 'relative',
+    gridAreas: '"prefix input suffix"',
+    gridColumns: 'auto 1fr auto',
+    placeItems: 'stretch',
     fill: {
         '': '#white',
         disabled: '#dark.04',
@@ -64,12 +51,70 @@ export const DEFAULT_INPUT_STYLES = {
         'invalid & focused': '#danger.50',
         'valid & focused': '#success.50',
     },
-    transition: 'theme',
     radius: true,
-    padding: {
-        '': '(1.25x - 1bw) 1x (1.25x - 1bw) (1.5x - 1bw)',
-        '[data-size="small"]': '(.75x - 1px) (1.5x - 1px)',
+    cursor: 'text',
+    color: {
+        '': '#dark.85',
+        focused: '#dark.85',
+        invalid: '#danger-text',
+        disabled: '#dark.30',
+    },
+    zIndex: {
+        '': 'initial',
+        focused: 1,
+    },
+    boxSizing: 'border-box',
+    Prefix: {
+        ...ADD_STYLES,
+        gridArea: 'prefix',
+    },
+    Suffix: {
+        ...ADD_STYLES,
+        gridArea: 'suffix',
     },
+    State: {
+        display: 'flex',
+    },
+    InputIcon: {
+        display: 'grid',
+        placeItems: 'center',
+        width: 'min 4x',
+        color: 'inherit',
+        fontSize: {
+            '': 'initial',
+            '[data-size="small"]': '14px',
+            '[data-size="medium"]': '16px',
+        },
+    },
+    ValidationIcon: {
+        display: 'grid',
+        placeItems: 'center',
+        width: {
+            '': 'min 4x',
+            suffix: 'min 3x',
+        },
+        fontSize: {
+            '': 'initial',
+            '[data-size="small"]': '14px',
+            '[data-size="medium"]': '16px',
+        },
+    },
+};
+const InputWrapperElement = tasty({
+    styles: INPUT_WRAPPER_STYLES,
+});
+const STYLE_LIST = [...POSITION_STYLES, ...DIMENSION_STYLES];
+const INPUT_STYLE_PROPS_LIST = [...BLOCK_STYLES, 'resize'];
+export const DEFAULT_INPUT_STYLES = {
+    display: 'block',
+    width: 'initial 100% initial',
+    height: 'initial initial initial',
+    color: 'inherit',
+    fill: '#clear',
+    border: 0,
+    transition: 'theme',
+    radius: true,
+    padding: '@vertical-padding @right-padding @vertical-padding @left-padding',
     fontWeight: 400,
     textAlign: 'left',
     reset: 'input',
@@ -77,26 +122,33 @@ export const DEFAULT_INPUT_STYLES = {
     flexGrow: 1,
     margin: 0,
     resize: 'none',
+    '@vertical-padding': {
+        '': '(1.25x - 1bw)',
+        '[data-size="small"]': '(.75x - 1bw)',
+    },
+    '@left-padding': {
+        '': '(1.5x - 1bw)',
+        prefix: '0',
+    },
+    '@right-padding': {
+        '': '(1.5x - 1bw)',
+        suffix: '0',
+    },
 };
 const InputElement = tasty({
     qa: 'Input',
-    styles: DEFAULT_INPUT_STYLES,
+    styles: {
+        ...DEFAULT_INPUT_STYLES,
+        gridArea: 'input',
+    },
 });
 function TextInputBase(props, ref) {
     props = useProviderProps(props);
     props = useFormProps(props);
-    let { qa, label, extra, labelPosition = 'top', labelStyles, isRequired, necessityIndicator, necessityLabel, validationState, message, description, prefix, isDisabled, multiLine, autoFocus, labelProps, inputProps, wrapperProps, inputRef, isLoading, loadingIndicator, value, inputStyles = {}, wrapperStyles = {}, suffix, suffixPosition = 'before', wrapperRef, requiredMark = true, tooltip, isHidden, rows = 1, size, ...otherProps } = props;
-    let [suffixWidth, setSuffixWidth] = useState(0);
-    let [prefixWidth, setPrefixWidth] = useState(0);
+    let { qa, label, extra, mods, labelPosition = 'top', labelStyles, isRequired, necessityIndicator, necessityLabel, validationState, message, description, prefix, isDisabled, multiLine, autoFocus, labelProps, inputProps, wrapperProps, inputRef, isLoading, loadingIndicator, value, inputStyles = {}, wrapperStyles = {}, suffix, suffixPosition = 'before', wrapperRef, requiredMark = true, tooltip, isHidden, rows = 1, size, icon, labelSuffix, ...otherProps } = props;
     let styles = extractStyles(otherProps, STYLE_LIST);
     let type = otherProps.type;
     inputStyles = extractStyles(otherProps, INPUT_STYLE_PROPS_LIST, inputStyles);
-    if (prefix) {
-        inputStyles.paddingLeft = `${prefixWidth}px`;
-    }
-    if (validationState || isLoading || suffix) {
-        inputStyles.paddingRight = `${suffixWidth}px`;
-    }
     let ElementType = multiLine ? 'textarea' : 'input';
     let { isFocused, focusProps } = useFocus({ isDisabled });
     let { hoverProps, isHovered } = useHover({ isDisabled });
@@ -116,10 +168,8 @@ function TextInputBase(props, ref) {
         },
     }));
     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);
-    suffix =
-        typeof suffix === 'string' ? (_jsx(Block, { padding: "1x right", children: suffix }, void 0)) : (suffix);
     // Fix safari bug: https://github.com/philipwalton/flexbugs/issues/270
     if (!(inputProps === null || inputProps === void 0 ? void 0 : inputProps.placeholder)) {
         if (!inputProps) {
@@ -127,21 +177,41 @@ function TextInputBase(props, ref) {
         }
         inputProps.placeholder = ' ';
     }
-    let textField = (_jsxs(InputWrapperElement, { ref: wrapperRef, qa: qa || 'TextInput', mods: {
-            invalid: isInvalid,
-            valid: validationState === 'valid',
-            loadable: !!loadingIndicator,
-            multiline: multiLine,
-            'text-prefix': prefix === 'string',
-        }, "data-size": size, styles: wrapperStyles, ...wrapperProps, children: [_jsx(InputElement, { as: ElementType, ...mergeProps(inputProps, focusProps, hoverProps), ref: inputRef, rows: multiLine ? rows : undefined, mods: {
-                    invalid: isInvalid,
-                    valid: validationState === 'valid',
-                    disabled: isDisabled,
-                    hovered: isHovered,
-                    focused: isFocused,
-                }, style: {
+    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;
+        }
+    }
+    const modifiers = useMemo(() => ({
+        invalid: isInvalid,
+        valid: validationState === 'valid',
+        loadable: !!loadingIndicator,
+        focused: isFocused,
+        hovered: isHovered,
+        disabled: isDisabled,
+        multiline: multiLine,
+        prefix: !!prefix,
+        suffix: !!suffix,
+        ...mods,
+    }), [
+        mods,
+        isInvalid,
+        validationState,
+        loadingIndicator,
+        isFocused,
+        isDisabled,
+        isHovered,
+        multiLine,
+        prefix,
+        suffix,
+    ]);
+    let textField = (_jsxs(InputWrapperElement, { ref: wrapperRef, qa: qa || 'TextInput', mods: modifiers, "data-size": size, styles: wrapperStyles, ...wrapperProps, children: [_jsx(InputElement, { as: ElementType, ...mergeProps(inputProps, focusProps, hoverProps), ref: inputRef, rows: multiLine ? rows : undefined, mods: modifiers, style: {
                     WebkitTextSecurity: multiLine && type === 'password' ? 'disc' : 'initial',
-                }, autoFocus: autoFocus, "data-size": size, styles: inputStyles, isDisabled: isDisabled }, void 0), _jsx(Prefix, { onWidthChange: setPrefixWidth, opacity: isDisabled ? '@disabled-opacity' : false, placeItems: "center", children: prefix }, void 0), _jsxs(Suffix, { onWidthChange: setSuffixWidth, opacity: isDisabled ? '@disabled-opacity' : false, children: [suffixPosition === 'before' ? suffix : null, (validationState && !isLoading) || isLoading ? (_jsxs(Space, { gap: false, padding: `0 ${suffix ? '1x' : '1.5x'} 0 0`, children: [validationState && !isLoading ? validation : null, isLoading && _jsx(LoadingOutlined, {}, void 0)] }, void 0)) : null, suffixPosition === 'after' ? suffix : null] }, void 0)] }, void 0));
+                }, autoFocus: autoFocus, "data-size": size, styles: inputStyles, isDisabled: isDisabled }, 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) || isLoading ? (_jsxs("div", { "data-element": "State", children: [validationState && !isLoading ? validation : null, isLoading && _jsx(LoadingOutlined, { "data-element": "InputIcon" }, void 0)] }, void 0)) : null, suffixPosition === 'after' ? suffix : null] }, void 0)] }, void 0));
     return (_jsx(FieldWrapper, { ...{
             labelPosition,
             label,
@@ -159,6 +229,7 @@ function TextInputBase(props, ref) {
             requiredMark,
             tooltip,
             isHidden,
+            labelSuffix,
             Component: textField,
             ref: domRef,
         } }, void 0));

package/es/components/forms/index.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/layout/Flex.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.
  */
 
@@ -14,9 +14,9 @@ const FlexElement = tasty({
         flow: 'row',
     },
 });
-export const Flex = forwardRef((props, ref) => {
+export const Flex = forwardRef(function Flex(props, ref) {
     const styles = extractStyles(props, CONTAINER_STYLES);
-    return (_jsx(FlexElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    return (_jsx(FlexElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles }, void 0));
 });
 
         

package/es/components/layout/Flow.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.
  */
 
@@ -15,9 +15,9 @@ const FlowElement = tasty({
     },
 });
 const STYLE_PROPS = CONTAINER_STYLES;
-export const Flow = forwardRef((props, ref) => {
+export const Flow = forwardRef(function Flow(props, ref) {
     const styles = extractStyles(props, STYLE_PROPS);
-    return (_jsx(FlowElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    return (_jsx(FlowElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles }, void 0));
 });
 
         

package/es/components/layout/Grid.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.
  */
 
@@ -20,9 +20,9 @@ const PROP_MAP = {
     rows: 'gridRows',
     areas: 'gridAreas',
 };
-export const Grid = forwardRef((props, ref) => {
+export const Grid = forwardRef(function Grid(props, ref) {
     const styles = extractStyles(props, CONTAINER_STYLES, undefined, PROP_MAP);
-    return (_jsx(GridElement, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
+    return (_jsx(GridElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles }, void 0));
 });