@cube-dev/ui-kit 0.85.1 → 0.86.0

package/es/components/content/Tag/Tag.js

@@ -1,37 +1,20 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.85.1
+ * @cube-dev/ui-kit v0.86.0
  * Released under the MIT license.
  */
 
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import THEMES from '../../../data/themes';
 import { CloseIcon } from '../../../icons';
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../../tasty';
-import { Action } from '../../actions';
-import { Suffix } from '../../layout/Suffix';
-const TagElement = tasty({
+import { tasty } from '../../../tasty';
+import { Item } from '../Item';
+const TagElement = tasty(Item, {
     qa: 'Tag',
     role: 'status',
     styles: {
-        position: 'relative',
-        display: 'inline-flex',
-        gap: '.5x',
-        placeContent: 'center',
-        placeItems: 'center start',
-        radius: '1r',
-        preset: 'tag',
-        boxSizing: 'border-box',
-        width: '2.5x max-content max-content',
-        height: 'min-content',
-        textAlign: 'left',
-        whiteSpace: 'nowrap',
-        padding: {
-            '': '0 (.5x - 1bw)',
-            closable: '0 (2.5x - 1bw) 0 (.75x - 1bw)',
-        },
         fill: {
             '': '#dark.04',
             ...Object.keys(THEMES).reduce((map, type) => {
@@ -53,34 +36,12 @@ const TagElement = tasty({
                 return map;
             }, {}),
         },
-        Content: {
-            display: 'block',
-            width: 'max 100%',
-            textOverflow: 'ellipsis',
-            overflow: 'hidden',
-            pointerEvents: 'none',
-        },
-    },
-});
-const CloseAction = tasty(Action, {
-    label: 'Close',
-    styles: {
-        display: 'grid',
-        placeItems: 'center',
-        color: true,
-        placeSelf: 'stretch',
-        opacity: {
-            '': 0.85,
-            'pressed | hovered': 1,
-        },
-        transition: 'opacity',
-        padding: '0 .5x',
     },
 });
 function Tag(allProps, ref) {
-    let { type, theme, icon, isClosable, onClose, closeButtonStyles, children, mods, ...props } = allProps;
-    const styles = extractStyles(props, CONTAINER_STYLES);
-    return (_jsxs(TagElement, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles, "data-type": theme ?? type, mods: { ...mods, closable: isClosable }, children: [icon, _jsx("div", { "data-element": "Content", children: children }), isClosable ? (_jsx(Suffix, { outerGap: "0", children: _jsx(CloseAction, { styles: closeButtonStyles, onPress: onClose, children: _jsx(CloseIcon, { size: 12, stroke: 3 }) }) })) : undefined] }));
+    let { type, theme, isClosable, onClose, closeButtonStyles, children, size = 'inline', mods, ...props } = allProps;
+    const tagTheme = theme ?? type;
+    return (_jsx(TagElement, { ref: ref, size: size, "data-type": tagTheme, type: tagTheme === 'special' ? 'primary' : 'neutral', mods: mods, actions: isClosable ? (_jsx(Item.Action, { "aria-label": "Close", styles: { color: 'currentColor', ...closeButtonStyles }, icon: _jsx(CloseIcon, {}), onPress: onClose })) : undefined, ...props, children: children }));
 }
 const _Tag = forwardRef(Tag);
 _Tag.displayName = 'Tag';

package/es/components/content/Text.js

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

package/es/components/content/Title.js

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

package/es/components/fields/Checkbox/Checkbox.js

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

package/es/components/fields/Checkbox/CheckboxGroup.js

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

package/es/components/fields/Checkbox/context.js

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

package/es/components/fields/Checkbox/index.js

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

package/es/components/fields/ComboBox/ComboBox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.85.1
+ * @cube-dev/ui-kit v0.86.0
  * Released under the MIT license.
  */
 
@@ -18,10 +18,9 @@ import { generateRandomId } from '../../../utils/random';
 import { mergeProps, useCombinedRefs, useLayoutEffect, } from '../../../utils/react';
 import { useFocus } from '../../../utils/react/interactions';
 import { useEventBus } from '../../../utils/react/useEventBus';
-import { ItemAction } from '../../actions';
+import { CollectionItem as Item } from '../../CollectionItem';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
 import { DisplayTransition } from '../../helpers';
-import { Item } from '../../Item';
 import { Portal } from '../../portal';
 import { InvalidIcon } from '../../shared/InvalidIcon';
 import { ValidIcon } from '../../shared/ValidIcon';
@@ -964,7 +963,7 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
     }, [shouldShowPopover, ensureInitialFocus]);
     const comboBoxField = (_jsxs(ComboBoxWrapperElement, { ref: wrapperRef, mods: mods, styles: styles, style: {
             zIndex: isFocused ? 1 : 'initial',
-        }, "data-size": size, ...compositeFocusProps, children: [prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }) : null, _jsx(ComboBoxInput, { qa: qa || 'ComboBox', inputRef: inputRef, id: id, value: effectiveInputValue, placeholder: placeholder, isDisabled: isDisabled, isReadOnly: isReadOnly, autoFocus: autoFocus, autoComplete: autoComplete, size: size, mods: mods, inputStyles: inputStyles, keyboardProps: keyboardProps, focusProps: { ...focusProps, onBlur: handleInputBlur }, isPopoverOpen: isPopoverOpen, hasResults: hasResults, comboBoxId: comboBoxId, listStateRef: listStateRef, onChange: handleInputChange, onFocus: handleInputFocus }), _jsxs("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, validationState || isLoading ? (_jsxs(_Fragment, { children: [validationState && !isLoading ? validation : null, isLoading ? _jsx(LoadingIcon, {}) : null] })) : null, suffixPosition === 'after' ? suffix : null, showClearButton && (_jsx(ItemAction, { icon: _jsx(CloseIcon, {}), size: size, theme: validationState === 'invalid' ? 'danger' : undefined, qa: "ComboBoxClearButton", "data-no-trigger": hideTrigger ? '' : undefined, "aria-label": "Clear value", onPress: clearValue })), !hideTrigger ? (_jsx(ItemAction, { ref: triggerRef, "data-popover-trigger": true, icon: _jsx(DirectionIcon, { to: isPopoverOpen ? 'up' : 'down' }), qa: "ComboBoxTrigger", mods: {
+        }, "data-size": size, ...compositeFocusProps, children: [prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }) : null, _jsx(ComboBoxInput, { qa: qa || 'ComboBox', inputRef: inputRef, id: id, value: effectiveInputValue, placeholder: placeholder, isDisabled: isDisabled, isReadOnly: isReadOnly, autoFocus: autoFocus, autoComplete: autoComplete, size: size, mods: mods, inputStyles: inputStyles, keyboardProps: keyboardProps, focusProps: { ...focusProps, onBlur: handleInputBlur }, isPopoverOpen: isPopoverOpen, hasResults: hasResults, comboBoxId: comboBoxId, listStateRef: listStateRef, onChange: handleInputChange, onFocus: handleInputFocus }), _jsxs("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, validationState || isLoading ? (_jsxs(_Fragment, { children: [validationState && !isLoading ? validation : null, isLoading ? _jsx(LoadingIcon, {}) : null] })) : null, suffixPosition === 'after' ? suffix : null, showClearButton && (_jsx(Item.Action, { icon: _jsx(CloseIcon, {}), size: size, theme: validationState === 'invalid' ? 'danger' : undefined, qa: "ComboBoxClearButton", "data-no-trigger": hideTrigger ? '' : undefined, "aria-label": "Clear value", onPress: clearValue })), !hideTrigger ? (_jsx(Item.Action, { ref: triggerRef, "data-popover-trigger": true, icon: _jsx(DirectionIcon, { to: isPopoverOpen ? 'up' : 'down' }), qa: "ComboBoxTrigger", mods: {
                             pressed: isPopoverOpen,
                             disabled: isDisabled,
                             loading: isLoading,

package/es/components/fields/ComboBox/index.js

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

package/es/components/fields/DatePicker/DateInput.js

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

package/es/components/fields/DatePicker/DateInputBase.js

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

package/es/components/fields/DatePicker/DatePicker.js

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

package/es/components/fields/DatePicker/DatePickerButton.js

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

package/es/components/fields/DatePicker/DatePickerElement.js

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

package/es/components/fields/DatePicker/DatePickerInput.js

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

package/es/components/fields/DatePicker/DatePickerSegment.js

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

package/es/components/fields/DatePicker/DateRangePicker.js

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

package/es/components/fields/DatePicker/DateRangeSeparatedPicker.js

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

package/es/components/fields/DatePicker/TimeInput.js

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

package/es/components/fields/DatePicker/index.js

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

package/es/components/fields/DatePicker/intl.js

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

package/es/components/fields/DatePicker/parseDate.js

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

package/es/components/fields/DatePicker/props.js

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

package/es/components/fields/DatePicker/types.js

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

package/es/components/fields/DatePicker/utils.js

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

package/es/components/fields/FileInput/FileInput.js

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

package/es/components/fields/FilterListBox/FilterListBox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.85.1
+ * @cube-dev/ui-kit v0.86.0
  * Released under the MIT license.
  */
 
@@ -15,7 +15,6 @@ import { BASE_STYLES, COLOR_STYLES, extractStyles, OUTER_STYLES, tasty, } from '
 import { mergeProps, modAttrs, useCombinedRefs } from '../../../utils/react';
 import { useFocus } from '../../../utils/react/interactions';
 import { StyledHeader } from '../../actions/Menu/styled';
-import { ItemBase } from '../../content/ItemBase';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
 import { ListBox } from '../ListBox/ListBox';
 import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES, } from '../TextInput/TextInputBase';
@@ -67,12 +66,9 @@ const SearchInputElement = tasty({
         ...DEFAULT_INPUT_STYLES,
         fill: '#clear',
         padding: {
-            '': '.5x $inline-padding',
-            prefix: '0 $inline-padding 0 .5x',
+            '': '.5x 1.5x',
+            prefix: '0 1.5x 0 .5x',
         },
-        '$inline-padding': 'max($min-inline-padding, (($size - 1lh) / 2 + $inline-compensation))',
-        '$inline-compensation': '1x',
-        '$min-inline-padding': '1x',
     },
 });
 const StyledHeaderWithoutBorder = tasty(StyledHeader, {
@@ -505,19 +501,6 @@ export const FilterListBox = forwardRef(function FilterListBox(props, ref) {
         isLoading,
         externalMods,
     ]);
-    const hasResults = useMemo(() => {
-        if (!listStateRef.current?.collection)
-            return !!enhancedChildren;
-        // Collection is already filtered by React Stately, just check if it has items
-        for (const node of listStateRef.current.collection) {
-            if (node.type === 'item')
-                return true;
-            if (node.childNodes && [...node.childNodes].length > 0)
-                return true;
-        }
-        return false;
-    }, [listStateRef.current?.collection, enhancedChildren, searchValue]);
-    const showEmptyMessage = !hasResults && searchValue.trim();
     // Handler must be defined before we render ListBox so we can pass it.
     const handleSelectionChange = (selection) => {
         if (allowsCustomValue) {
@@ -565,7 +548,11 @@ export const FilterListBox = forwardRef(function FilterListBox(props, ref) {
                     const value = e.target.value;
                     handleSearchChange(value);
                 }, ...keyboardProps, ...modAttrs(mods) })] }));
-    const filterListBoxField = (_jsxs(FilterListBoxWrapperElement, { ref: ref, qa: "FilterListBoxWrapper", ...modAttrs(mods), styles: styles, ...focusProps, children: [header ? (_jsx(StyledHeaderWithoutBorder, { "data-size": size, styles: headerStyles, children: header })) : (_jsx("div", { role: "presentation" })), searchInput, showEmptyMessage ? (_jsx(ItemBase, { preset: "t4", color: "#dark-03", size: size, padding: "(.5x - 1bw)", children: emptyLabel !== undefined ? emptyLabel : 'No results found' })) : (_jsx(ListBox, { ref: listBoxRef, "aria-label": innerAriaLabel, selectedKey: selectedKey, defaultSelectedKey: defaultSelectedKey, selectedKeys: selectedKeys, defaultSelectedKeys: defaultSelectedKeys, selectionMode: selectionMode, isDisabled: isDisabled, listRef: listRef, stateRef: listStateRef, listStyles: listStyles, shouldFocusWrap: shouldFocusWrap, optionStyles: optionStyles, sectionStyles: sectionStyles, headingStyles: headingStyles, validationState: validationState, disallowEmptySelection: props.disallowEmptySelection, disabledKeys: props.disabledKeys, focusOnHover: focusOnHover, shouldUseVirtualFocus: true, showSelectAll: showSelectAll, selectAllLabel: selectAllLabel, footer: footer, footerStyles: footerStyles, mods: mods, size: "medium", styles: listBoxStyles, isCheckable: isCheckable, items: items, allValueProps: allValueProps, filter: filterFn, onSelectionChange: handleSelectionChange, onEscape: onEscape, onOptionClick: handleOptionClick, children: enhancedChildren }))] }));
+    const filterListBoxField = (_jsxs(FilterListBoxWrapperElement, { ref: ref, qa: "FilterListBoxWrapper", ...modAttrs(mods), styles: styles, ...focusProps, children: [header ? (_jsx(StyledHeaderWithoutBorder, { "data-size": size, styles: headerStyles, children: header })) : (_jsx("div", { role: "presentation" })), searchInput, _jsx(ListBox, { ref: listBoxRef, "aria-label": innerAriaLabel, selectedKey: selectedKey, defaultSelectedKey: defaultSelectedKey, selectedKeys: selectedKeys, defaultSelectedKeys: defaultSelectedKeys, selectionMode: selectionMode, isDisabled: isDisabled, listRef: listRef, stateRef: listStateRef, listStyles: listStyles, shouldFocusWrap: shouldFocusWrap, optionStyles: optionStyles, sectionStyles: sectionStyles, headingStyles: headingStyles, validationState: validationState, disallowEmptySelection: props.disallowEmptySelection, disabledKeys: props.disabledKeys, focusOnHover: focusOnHover, shouldUseVirtualFocus: true, showSelectAll: showSelectAll, selectAllLabel: selectAllLabel, footer: footer, footerStyles: footerStyles, mods: mods, size: "medium", styles: listBoxStyles, isCheckable: isCheckable, items: items, allValueProps: allValueProps, filter: filterFn, emptyLabel: searchValue.trim()
+                    ? emptyLabel !== undefined
+                        ? emptyLabel
+                        : 'No results found'
+                    : 'No items', onSelectionChange: handleSelectionChange, onEscape: onEscape, onOptionClick: handleOptionClick, children: enhancedChildren })] }));
     const finalProps = { ...props, styles: undefined };
     return wrapWithField(filterListBoxField, ref, mergeProps(finalProps, {}));
 });

package/es/components/fields/FilterListBox/index.js

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

package/es/components/fields/FilterPicker/FilterPicker.js

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

package/es/components/fields/FilterPicker/index.js

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

package/es/components/fields/Input/Input.js

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

package/es/components/fields/Input/index.js

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