@cube-dev/ui-kit 0.0.0-canary-e354d70 → 0.0.0-canary-d5351b8

package/es/components/content/ItemBase/index.js

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

package/es/components/content/List/SectionHeading.js

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

package/es/components/content/List/index.js

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

package/es/components/content/Paragraph.js

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

package/es/components/content/Placeholder/Placeholder.js

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

package/es/components/content/PrismCode/PrismCode.js

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

package/es/components/content/PrismCode/prismSetup.js

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

package/es/components/content/PrismDiffCode/PrismDiffCode.js

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

package/es/components/content/Result/Result.js

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

package/es/components/content/Skeleton/Skeleton.js

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

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

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

package/es/components/content/Text.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e354d70
+ * @cube-dev/ui-kit v0.0.0-canary-d5351b8
  * 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.0.0-canary-e354d70
+ * @cube-dev/ui-kit v0.0.0-canary-d5351b8
  * 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.0.0-canary-e354d70
+ * @cube-dev/ui-kit v0.0.0-canary-d5351b8
  * 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.0.0-canary-e354d70
+ * @cube-dev/ui-kit v0.0.0-canary-d5351b8
  * 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.0.0-canary-e354d70
+ * @cube-dev/ui-kit v0.0.0-canary-d5351b8
  * 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.0.0-canary-e354d70
+ * @cube-dev/ui-kit v0.0.0-canary-d5351b8
  * 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.0.0-canary-e354d70
+ * @cube-dev/ui-kit v0.0.0-canary-d5351b8
  * Released under the MIT license.
  */
 
@@ -10,13 +10,14 @@ import { cloneElement, forwardRef, useEffect, useMemo, } from 'react';
 import { useButton, useComboBox, useFilter, useHover, useOverlayPosition, } from 'react-aria';
 import { Section as BaseSection, useComboBoxState } from 'react-stately';
 import { useEvent } from '../../../_internal/index';
-import { DownIcon, LoadingIcon } from '../../../icons';
+import { CloseIcon, DownIcon, LoadingIcon } from '../../../icons';
 import { useProviderProps } from '../../../provider';
 import { BASE_STYLES, COLOR_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
 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 { Button } from '../../actions';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
 import { Item } from '../../Item';
 import { OverlayWrapper } from '../../overlays/OverlayWrapper';
@@ -40,7 +41,9 @@ const TriggerElement = tasty({
         placeContent: 'center',
         placeSelf: 'stretch',
         radius: '(1r - 1bw) right',
+        padding: '0',
         width: '3x',
+        boxSizing: 'border-box',
         color: {
             '': '#dark-02',
             hovered: '#dark-02',
@@ -59,6 +62,14 @@ const TriggerElement = tasty({
         cursor: 'pointer',
     },
 });
+const ClearButton = tasty(Button, {
+    icon: _jsx(CloseIcon, {}),
+    styles: {
+        height: '($size - 1x)',
+        width: '($size - 1x)',
+        margin: '0 .5x',
+    },
+});
 const PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];
 export const ComboBox = forwardRef(function ComboBox(props, ref) {
     props = useProviderProps(props);
@@ -83,7 +94,7 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
             };
         },
     });
-    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, icon, prefix, isDisabled, multiLine, autoFocus, wrapperRef, inputRef, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, optionStyles, triggerStyles, listBoxStyles, overlayStyles, wrapperStyles, suffix, hideTrigger, message, description, size = 'medium', autoComplete = 'off', direction = 'bottom', shouldFlip = true, menuTrigger = 'input', suffixPosition = 'before', loadingState, filter, styles, labelSuffix, selectedKey, defaultSelectedKey, ...otherProps } = props;
+    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, icon, prefix, isDisabled, multiLine, autoFocus, wrapperRef, inputRef, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, optionStyles, triggerStyles, listBoxStyles, overlayStyles, wrapperStyles, suffix, hideTrigger, message, description, size = 'medium', autoComplete = 'off', direction = 'bottom', shouldFlip = true, menuTrigger = 'input', suffixPosition = 'before', loadingState, filter, styles, labelSuffix, selectedKey, defaultSelectedKey, isClearable, ...otherProps } = props;
     let isAsync = loadingState != null;
     let { contains } = useFilter({ sensitivity: 'base' });
     let comboBoxStateProps = {
@@ -153,6 +164,26 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
     let isInvalid = validationState === 'invalid';
     let validationIcon = isInvalid ? InvalidIcon : ValidIcon;
     let validation = cloneElement(validationIcon);
+    // Clear button logic
+    let hasValue = props.allowsCustomValue
+        ? state.inputValue !== ''
+        : state.selectedKey != null;
+    let showClearButton = isClearable && hasValue && !isDisabled && !props.isReadOnly;
+    // Clear function
+    let clearValue = useEvent(() => {
+        if (props.allowsCustomValue) {
+            props.onInputChange?.('');
+            state.setInputValue('');
+        }
+        props.onSelectionChange?.(null);
+        state.setSelectedKey(null);
+        // Close the popup if it's open
+        if (state.isOpen) {
+            state.close();
+        }
+        // Focus back to the input
+        inputRef.current?.focus();
+    });
     let comboBoxWidth = wrapperRef?.current?.offsetWidth;
     if (icon) {
         icon = _jsx("div", { "data-element": "InputIcon", children: icon });
@@ -172,6 +203,7 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
         loading: isLoading,
         prefix: !!prefix,
         suffix: true,
+        clearable: showClearButton,
     }), [
         isInvalid,
         validationState,
@@ -180,6 +212,7 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
         isFocused,
         isLoading,
         prefix,
+        showClearButton,
     ]);
     // If input is not full and the user presses Enter, pick the first option.
     let onKeyPress = useEvent((e) => {
@@ -239,7 +272,7 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
     let allInputProps = useMemo(() => mergeProps(inputProps, hoverProps, focusProps), [inputProps, hoverProps, focusProps]);
     let comboBoxField = (_jsxs(ComboBoxWrapperElement, { ref: wrapperRef, qa: qa || 'ComboBox', mods: mods, styles: wrapperStyles, style: {
             zIndex: isFocused ? 1 : 'initial',
-        }, "data-size": size, children: [prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }) : null, _jsx(InputElement, { ref: inputRef, qa: "Input", autoFocus: autoFocus, "data-autofocus": autoFocus ? '' : undefined, ...allInputProps, autoComplete: autoComplete, styles: inputStyles, mods: mods, "data-size": size }), _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, !hideTrigger ? (_jsx(TriggerElement, { "data-popover-trigger": true, qa: "ComboBoxTrigger", ...mergeProps(buttonProps, triggerFocusProps, triggerHoverProps), ref: triggerRef, mods: {
+        }, "data-size": size, children: [prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }) : null, _jsx(InputElement, { ref: inputRef, qa: "Input", autoFocus: autoFocus, "data-autofocus": autoFocus ? '' : undefined, ...allInputProps, autoComplete: autoComplete, styles: inputStyles, mods: mods, "data-size": size }), _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(ClearButton, { size: size, type: validationState === 'invalid' ? 'clear' : 'neutral', theme: validationState === 'invalid' ? 'danger' : undefined, qa: "ComboBoxClearButton", "data-no-trigger": hideTrigger ? '' : undefined, onPress: clearValue })), !hideTrigger ? (_jsx(TriggerElement, { "data-popover-trigger": true, qa: "ComboBoxTrigger", ...mergeProps(buttonProps, triggerFocusProps, triggerHoverProps), ref: triggerRef, mods: {
                             pressed: isTriggerPressed,
                             focused: isTriggerFocused,
                             hovered: isTriggerHovered,

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-e354d70
+ * @cube-dev/ui-kit v0.0.0-canary-d5351b8
  * 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.0.0-canary-e354d70
+ * @cube-dev/ui-kit v0.0.0-canary-d5351b8
  * Released under the MIT license.
  */
 
@@ -9,14 +9,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { FocusScope, useKeyboard } from 'react-aria';
 import { Section as BaseSection, Item } from 'react-stately';
+import { useEvent } from '../../../_internal';
 import { useWarn } from '../../../_internal/hooks/use-warn';
-import { DirectionIcon, LoadingIcon } from '../../../icons';
+import { CloseIcon, DirectionIcon, LoadingIcon } from '../../../icons';
 import { useProviderProps } from '../../../provider';
 import { BASE_STYLES, COLOR_STYLES, extractStyles, filterBaseProps, OUTER_STYLES, tasty, } from '../../../tasty';
 import { generateRandomId } from '../../../utils/random';
 import { mergeProps } from '../../../utils/react';
 import { useEventBus } from '../../../utils/react/useEventBus';
-import { ItemButton } from '../../actions';
+import { Button, ItemButton } from '../../actions';
 import { Text } from '../../content/Text';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
 import { Dialog, DialogTrigger } from '../../overlays/Dialog';
@@ -33,6 +34,15 @@ const FilterPickerWrapper = tasty({
         placeItems: 'stretch',
     },
 });
+const ClearButton = tasty(Button, {
+    children: _jsx(CloseIcon, {}),
+    type: 'neutral',
+    mods: { pressed: false },
+    styles: {
+        height: '($size - 1x)',
+        width: '($size - 1x)',
+    },
+});
 export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
     props = useProviderProps(props);
     props = useFormProps(props);
@@ -62,7 +72,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
             return fieldProps;
         },
     });
-    let { qa, label, extra, icon, rightIcon, prefix, suffix, hotkeys, triggerTooltip, triggerDescription, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, message, mods: externalMods, description, descriptionPlacement, placeholder, size = 'medium', styles, listBoxStyles, popoverStyles, type = 'outline', theme = 'default', labelSuffix, shouldFocusWrap, children, shouldFlip = true, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, selectionMode = 'single', listStateRef, focusOnHover, showSelectAll, selectAllLabel = 'All', items, header, footer, headerStyles, footerStyles, triggerStyles, allowsCustomValue, renderSummary, isCheckable, allValueProps, customValueProps, newCustomValueProps, searchPlaceholder, autoFocus, filter, emptyLabel, searchInputStyles, searchInputRef, listStyles, optionStyles, sectionStyles, headingStyles, listRef, disallowEmptySelection, shouldUseVirtualFocus, onEscape, onOptionClick, ...otherProps } = props;
+    let { qa, label, extra, icon, rightIcon, prefix, suffix, hotkeys, triggerTooltip, triggerDescription, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, message, mods: externalMods, description, descriptionPlacement, placeholder, size = 'medium', styles, listBoxStyles, popoverStyles, type = 'outline', theme = 'default', labelSuffix, shouldFocusWrap, children, shouldFlip = true, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, selectionMode = 'single', listStateRef, focusOnHover, showSelectAll, selectAllLabel = 'All', items, header, footer, headerStyles, footerStyles, triggerStyles, allowsCustomValue, renderSummary, isCheckable, allValueProps, customValueProps, newCustomValueProps, searchPlaceholder, autoFocus, filter, emptyLabel, searchInputStyles, searchInputRef, listStyles, optionStyles, sectionStyles, headingStyles, listRef, disallowEmptySelection, shouldUseVirtualFocus, onEscape, onOptionClick, isClearable, ...otherProps } = props;
     styles = extractStyles(otherProps, PROP_STYLES, styles);
     // Generate a unique ID for this FilterPicker instance
     const filterPickerId = useMemo(() => generateRandomId(), []);
@@ -337,6 +347,23 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
     };
     const selectedLabels = getSelectedLabels();
     const hasSelection = selectedLabels.length > 0;
+    // Clear button logic
+    let showClearButton = isClearable && hasSelection && !isDisabled && !props.isReadOnly;
+    // Clear function
+    let clearValue = useEvent(() => {
+        if (selectionMode === 'multiple') {
+            if (!isControlledMultiple) {
+                setInternalSelectedKeys([]);
+            }
+            onSelectionChange?.([]);
+        }
+        else {
+            if (!isControlledSingle) {
+                setInternalSelectedKey(null);
+            }
+            onSelectionChange?.(null);
+        }
+    });
     // Always keep the latest selection in a ref (with normalized keys) so that we can read it synchronously in the popover close effect.
     const latestSelectionRef = useRef({
         single: effectiveSelectedKey != null ? String(effectiveSelectedKey) : null,
@@ -652,7 +679,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
                 placeholder: !hasSelection,
                 selected: hasSelection,
                 ...externalMods,
-            }, icon: icon, rightIcon: isLoading ? (_jsx(LoadingIcon, {})) : rightIcon !== undefined ? (rightIcon) : (_jsx(DirectionIcon, { to: state.isOpen ? 'top' : 'bottom' })), prefix: prefix, suffix: suffix, hotkeys: hotkeys, tooltip: triggerTooltip, description: triggerDescription, descriptionPlacement: descriptionPlacement, styles: styles, ...keyboardProps, "aria-label": `${props['aria-label'] ?? props.label ?? ''}`, children: renderTriggerContent() }));
+            }, icon: icon, rightIcon: isLoading ? (_jsx(LoadingIcon, {})) : rightIcon !== undefined ? (rightIcon) : showClearButton ? (_jsx(ClearButton, { size: size, theme: validationState === 'invalid' ? 'danger' : undefined, qa: "FilterPickerClearButton", onPress: clearValue })) : (_jsx(DirectionIcon, { to: state.isOpen ? 'top' : 'bottom' })), prefix: prefix, suffix: suffix, hotkeys: hotkeys, tooltip: triggerTooltip, description: triggerDescription, descriptionPlacement: descriptionPlacement, styles: styles, ...keyboardProps, "aria-label": `${props['aria-label'] ?? props.label ?? ''}`, children: renderTriggerContent() }));
     };
     const filterPickerField = (_jsx(FilterPickerWrapper, { qa: props.qa || 'FilterPicker', styles: styles, ...filterBaseProps(otherProps, { eventProps: true }), children: _jsxs(DialogTrigger, { type: "popover", placement: "bottom start", styles: triggerStyles, shouldUpdatePosition: shouldUpdatePosition, shouldFlip: shouldFlip, isDismissable: true, shouldCloseOnInteractOutside: (el) => {
                 const menuTriggerEl = el.closest('[data-popover-trigger]');

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

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

package/es/components/fields/ListBox/ListBox.js

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

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

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

package/es/components/fields/NumberInput/NumberInput.js

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

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

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