@cube-dev/ui-kit 0.0.0-canary-738f1ac → 0.0.0-canary-1190ef5

package/es/utils/react/wrapNodeIfPlain.js

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

package/es/utils/transitions.js

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

package/es/utils/tree.js

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

package/es/utils/warnings.js

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

package/es/version.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-738f1ac
+ * @cube-dev/ui-kit v0.0.0-canary-1190ef5
  * Released under the MIT license.
  */
 
 "use strict";
 if (typeof window !== 'undefined') {
-    const version = '0.0.0-canary-738f1ac';
+    const version = '0.0.0-canary-1190ef5';
     // Ensure CubeUIKit is defined on window in a way bundlers recognize
     window.CubeUIKit = window.CubeUIKit || { version };
     // Check for multiple versions

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.0.0-canary-738f1ac",
+  "version": "0.0.0-canary-1190ef5",
   "description": "UIKit for Cube Projects",
   "keywords": [
     "uikit"

package/types/components/fields/index.d.ts

@@ -12,5 +12,4 @@ export * from './Slider';
 export * from './Switch/Switch';
 export * from './Select';
 export * from './ComboBox';
-export * from './ListBox';
 export * from './TextInputMapper';

package/types/icons/ChartBarGroupedHorizontalIcon.d.ts

@@ -0,0 +1,4 @@
+export declare const ChartBarGroupedHorizontalIcon: {
+    (props: import("./Icon").CubeIconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/types/icons/ChartBarHorizontalIcon.d.ts

@@ -0,0 +1,4 @@
+export declare const ChartBarHorizontalIcon: {
+    (props: import("./Icon").CubeIconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/types/icons/ChartBarStackedHorizontalIcon.d.ts

@@ -0,0 +1,4 @@
+export declare const ChartBarStackedHorizontalIcon: {
+    (props: import("./Icon").CubeIconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/types/icons/ChartBarStackedPercentageHorizontalIcon.d.ts

@@ -0,0 +1,4 @@
+export declare const ChartBarStackedPercentageHorizontalIcon: {
+    (props: import("./Icon").CubeIconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/types/icons/index.d.ts

@@ -11,9 +11,13 @@ export { CalendarEditIcon } from './CalendarEditIcon';
 export { CalendarIcon } from './CalendarIcon';
 export { CaretDownIcon } from './CaretDownIcon';
 export { CaretUpIcon } from './CaretUpIcon';
+export { ChartBarGroupedHorizontalIcon } from './ChartBarGroupedHorizontalIcon';
 export { ChartBarGroupedIcon } from './ChartBarGroupedIcon';
+export { ChartBarHorizontalIcon } from './ChartBarHorizontalIcon';
 export { ChartBarLineIcon } from './ChartBarLineIcon';
+export { ChartBarStackedHorizontalIcon } from './ChartBarStackedHorizontalIcon';
 export { ChartBarStackedIcon } from './ChartBarStackedIcon';
+export { ChartBarStackedPercentageHorizontalIcon } from './ChartBarStackedPercentageHorizontalIcon';
 export { ChartBarStackedPercentageIcon } from './ChartBarStackedPercentageIcon';
 export { ChartBoxPlot2Icon } from './ChartBoxPlot2Icon';
 export { ChartBoxPlotIcon } from './ChartBoxPlotIcon';

package/es/components/fields/ListBox.js

@@ -1,363 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-738f1ac
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneElement, forwardRef, isValidElement, useMemo, useRef, useState, } from 'react';
-import { useFilter, useListBox, useListBoxSection, useOption, } from 'react-aria';
-import { Section as BaseSection, Item, useListState } from 'react-stately';
-import { SearchIcon } from '../../icons';
-import { useProviderProps } from '../../provider';
-import { BASE_STYLES, COLOR_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../tasty';
-import { mergeProps, modAttrs, useCombinedRefs } from '../../utils/react';
-import { useFocus } from '../../utils/react/interactions';
-import { useFieldProps, useFormProps, wrapWithField } from '../form';
-import { InvalidIcon } from '../shared/InvalidIcon';
-import { ValidIcon } from '../shared/ValidIcon';
-import { DEFAULT_INPUT_STYLES, INPUT_WRAPPER_STYLES, } from './TextInput/TextInputBase';
-const ListBoxWrapperElement = tasty({
-    styles: {
-        display: 'flex',
-        flow: 'column',
-        gap: 0,
-        position: 'relative',
-        radius: true,
-        fill: '#white',
-        color: '#dark-02',
-        transition: 'theme',
-        outline: {
-            '': '#purple-03.0',
-            'invalid & focused': '#danger.50',
-            focused: '#purple-03',
-        },
-        border: {
-            '': true,
-            focused: '#purple-text',
-            valid: '#success-text.50',
-            invalid: '#danger-text.50',
-            disabled: true,
-        },
-    },
-});
-const SearchWrapperElement = tasty({
-    styles: {
-        ...INPUT_WRAPPER_STYLES,
-        border: '#clear',
-        radius: '1r top',
-        borderBottom: '1bw solid #border',
-    },
-});
-const SearchInputElement = tasty({
-    as: 'input',
-    styles: DEFAULT_INPUT_STYLES,
-});
-const ListElement = tasty({
-    as: 'ul',
-    styles: {
-        display: 'flex',
-        gap: '1bw',
-        flow: 'column',
-        margin: '0',
-        padding: '.5x',
-        listStyle: 'none',
-        height: 'auto',
-        overflow: 'auto',
-        scrollbar: 'styled',
-    },
-});
-const OptionElement = tasty({
-    as: 'li',
-    styles: {
-        display: 'flex',
-        flow: 'column',
-        gap: '.25x',
-        padding: '.75x 1x',
-        radius: '1r',
-        cursor: 'pointer',
-        transition: 'theme',
-        outline: 0,
-        border: 0,
-        userSelect: 'none',
-        color: {
-            '': '#dark-02',
-            selected: '#dark',
-            disabled: '#dark-04',
-        },
-        fill: {
-            '': '#clear',
-            focused: '#dark.03',
-            selected: '#dark.06',
-            disabled: '#clear',
-        },
-        Label: {
-            preset: 't3',
-            color: 'inherit',
-        },
-        Description: {
-            preset: 't4',
-            color: {
-                '': '#dark-03',
-            },
-        },
-    },
-});
-const SectionWrapperElement = tasty({
-    as: 'li',
-    styles: {
-        display: 'block',
-    },
-});
-const SectionHeadingElement = tasty({
-    styles: {
-        preset: 't4 strong',
-        color: '#dark-03',
-        padding: '.5x 1x .25x',
-        userSelect: 'none',
-    },
-});
-const SectionListElement = tasty({
-    as: 'ul',
-    styles: {
-        display: 'flex',
-        gap: '1bw',
-        flow: 'column',
-        margin: '0',
-        padding: '0',
-        listStyle: 'none',
-    },
-});
-const DividerElement = tasty({
-    as: 'li',
-    styles: {
-        height: '1bw',
-        fill: '#border',
-        margin: '.5x 0',
-    },
-});
-const PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];
-export const ListBox = forwardRef(function ListBox(props, ref) {
-    props = useProviderProps(props);
-    props = useFormProps(props);
-    props = useFieldProps(props, {
-        valuePropsMapper: ({ value, onChange }) => {
-            return {
-                selectedKey: value ?? null,
-                onSelectionChange: (key) => {
-                    // React Aria always passes a Set for selection changes
-                    // For single selection mode, we extract the first (and only) key
-                    if (key instanceof Set) {
-                        if (key.size === 0) {
-                            onChange(null);
-                        }
-                        else if (props.selectionMode === 'multiple') {
-                            onChange(key); // Return the Set for multiple selection
-                        }
-                        else {
-                            // Single selection - extract the first key
-                            onChange(Array.from(key)[0]);
-                        }
-                    }
-                    else {
-                        onChange(key);
-                    }
-                },
-            };
-        },
-    });
-    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, isSearchable = false, searchPlaceholder = 'Search...', filter, searchInputStyles, listStyles, optionStyles, sectionStyles, headingStyles, searchInputRef, listRef, message, description, styles, labelSuffix, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, onSelectionChange, ...otherProps } = props;
-    const [searchValue, setSearchValue] = useState('');
-    const { contains } = useFilter({ sensitivity: 'base' });
-    // Create filtered children based on search
-    const filteredChildren = useMemo(() => {
-        if (!isSearchable || !searchValue.trim() || !props.children) {
-            return props.children;
-        }
-        const filterFn = filter || contains;
-        // Filter React children elements
-        const filterChild = (child) => {
-            if (!child || typeof child !== 'object')
-                return false;
-            // Handle regular items
-            const textValue = child.props?.children?.toString() || child.key?.toString() || '';
-            return filterFn(textValue, searchValue);
-        };
-        const filterSection = (section) => {
-            if (!section || typeof section !== 'object')
-                return null;
-            const sectionChildren = section.props?.children;
-            if (!sectionChildren)
-                return null;
-            let filteredSectionChildren;
-            if (Array.isArray(sectionChildren)) {
-                filteredSectionChildren = sectionChildren.filter(filterChild);
-            }
-            else {
-                filteredSectionChildren = filterChild(sectionChildren)
-                    ? [sectionChildren]
-                    : [];
-            }
-            // Only return the section if it has matching children
-            if (filteredSectionChildren.length === 0)
-                return null;
-            // Clone the section with filtered children
-            return {
-                ...section,
-                props: {
-                    ...section.props,
-                    children: filteredSectionChildren,
-                },
-            };
-        };
-        if (Array.isArray(props.children)) {
-            return props.children
-                .map((child) => {
-                // Handle sections
-                if (isValidElement(child) &&
-                    (child.type === BaseSection || child.props?.title)) {
-                    return filterSection(child);
-                }
-                // Handle regular items
-                return filterChild(child) ? child : null;
-            })
-                .filter(Boolean);
-        }
-        // Single child case
-        if (isValidElement(props.children) &&
-            (props.children.type === BaseSection || props.children.props?.title)) {
-            return filterSection(props.children);
-        }
-        return filterChild(props.children) ? props.children : null;
-    }, [isSearchable, searchValue, props.children, filter, contains]);
-    // Create filtered items based on search
-    const filteredItems = useMemo(() => {
-        if (!isSearchable || !searchValue.trim()) {
-            return props.items;
-        }
-        const filterFn = filter || contains;
-        if (props.items) {
-            return Array.from(props.items).filter((item) => {
-                const textValue = typeof item === 'string'
-                    ? item
-                    : item?.textValue || item?.name || String(item);
-                return filterFn(textValue, searchValue);
-            });
-        }
-        return undefined;
-    }, [isSearchable, searchValue, props.items, filter, contains]);
-    // Wrap onSelectionChange to prevent selection when disabled
-    const wrappedOnSelectionChange = useMemo(() => {
-        if (!onSelectionChange)
-            return undefined;
-        return (key) => {
-            // Don't allow selection changes when disabled
-            if (isDisabled) {
-                return;
-            }
-            onSelectionChange(key);
-        };
-    }, [onSelectionChange, isDisabled]);
-    const listState = useListState({
-        ...props,
-        items: filteredItems,
-        children: filteredChildren,
-        selectedKey,
-        defaultSelectedKey,
-        selectedKeys,
-        defaultSelectedKeys,
-        onSelectionChange: wrappedOnSelectionChange,
-        isDisabled,
-    });
-    styles = extractStyles(otherProps, PROP_STYLES, styles);
-    ref = useCombinedRefs(ref);
-    searchInputRef = useCombinedRefs(searchInputRef);
-    listRef = useCombinedRefs(listRef);
-    const { listBoxProps } = useListBox({
-        ...props,
-        'aria-label': props['aria-label'] || label?.toString(),
-        isDisabled,
-    }, listState, listRef);
-    const { isFocused, focusProps } = useFocus({ isDisabled });
-    const isInvalid = validationState === 'invalid';
-    const validationIcon = isInvalid ? InvalidIcon : ValidIcon;
-    const validation = cloneElement(validationIcon);
-    const mods = useMemo(() => ({
-        invalid: isInvalid,
-        valid: validationState === 'valid',
-        disabled: isDisabled,
-        focused: isFocused,
-        loading: isLoading,
-        searchable: isSearchable,
-    }), [
-        isInvalid,
-        validationState,
-        isDisabled,
-        isFocused,
-        isLoading,
-        isSearchable,
-    ]);
-    const searchInput = isSearchable ? (_jsxs(SearchWrapperElement, { mods: mods, "data-size": "small", children: [_jsx(SearchInputElement, { ref: searchInputRef, "data-is-prefix": true, type: "search", placeholder: searchPlaceholder, value: searchValue, disabled: isDisabled, styles: searchInputStyles, "data-size": "small", onChange: (e) => setSearchValue(e.target.value), ...modAttrs(mods) }), _jsx("div", { "data-element": "Prefix", children: _jsx("div", { "data-element": "InputIcon", children: _jsx(SearchIcon, {}) }) })] })) : null;
-    const listBoxField = (_jsxs(ListBoxWrapperElement, { ref: ref, qa: qa || 'ListBox', ...modAttrs(mods), styles: styles, ...focusProps, children: [searchInput, _jsx(ListElement, { ...listBoxProps, ref: listRef, styles: listStyles, "aria-disabled": isDisabled || undefined, children: (() => {
-                    const renderedItems = [];
-                    let isFirstSection = true;
-                    for (const item of listState.collection) {
-                        if (item.type === 'section') {
-                            if (!isFirstSection) {
-                                renderedItems.push(_jsx(DividerElement, { role: "separator", "aria-orientation": "horizontal" }, `divider-${String(item.key)}`));
-                            }
-                            renderedItems.push(_jsx(ListBoxSection, { item: item, state: listState, optionStyles: optionStyles, headingStyles: headingStyles, sectionStyles: sectionStyles, isParentDisabled: isDisabled }, item.key));
-                            isFirstSection = false;
-                        }
-                        else {
-                            renderedItems.push(_jsx(Option, { item: item, state: listState, styles: optionStyles, isParentDisabled: isDisabled }, item.key));
-                        }
-                    }
-                    return renderedItems;
-                })() }), (validationState && !isLoading) || isLoading ? (_jsxs("div", { "data-element": "ValidationState", style: { position: 'absolute', top: '1x', right: '1x' }, children: [validationState && !isLoading ? validation : null, isLoading && _jsx("div", { children: "Loading..." })] })) : null] }));
-    return wrapWithField(listBoxField, ref, mergeProps({ ...props, styles: undefined }, {}));
-});
-function Option({ item, state, styles, isParentDisabled }) {
-    const ref = useRef(null);
-    const isDisabled = isParentDisabled || state.disabledKeys.has(item.key);
-    const isSelected = state.selectionManager.isSelected(item.key);
-    const { optionProps, isPressed } = useOption({
-        key: item.key,
-        isDisabled,
-        isSelected,
-        shouldSelectOnPressUp: true,
-        shouldFocusOnHover: true,
-    }, state, ref);
-    const { isFocused, focusProps } = useFocus({ isDisabled });
-    const description = item?.props?.description;
-    return (_jsxs(OptionElement, { ...mergeProps(optionProps, focusProps), ref: ref, mods: {
-            selected: isSelected,
-            focused: isFocused,
-            disabled: isDisabled,
-            pressed: isPressed,
-        }, styles: styles, children: [_jsx("div", { "data-element": "Label", children: item.rendered }), description ? _jsx("div", { "data-element": "Description", children: description }) : null] }));
-}
-function ListBoxSection(props) {
-    const { item, state, optionStyles, headingStyles, sectionStyles, isParentDisabled, } = props;
-    const heading = item.rendered;
-    const { itemProps, headingProps, groupProps } = useListBoxSection({
-        heading,
-        'aria-label': item['aria-label'],
-    });
-    return (_jsxs(SectionWrapperElement, { ...itemProps, styles: sectionStyles, children: [heading && (_jsx(SectionHeadingElement, { ...headingProps, styles: headingStyles, children: heading })), _jsx(SectionListElement, { ...groupProps, children: [...item.childNodes]
-                    .filter((node) => state.collection.getItem(node.key))
-                    .map((node) => (_jsx(Option, { item: node, state: state, styles: optionStyles, isParentDisabled: isParentDisabled }, node.key))) })] }));
-}
-const ListBoxSectionComponent = Object.assign(BaseSection, {
-    displayName: 'Section',
-});
-ListBox.Item = Item;
-ListBox.Section = ListBoxSectionComponent;
-Object.defineProperty(ListBox, 'cubeInputType', {
-    value: 'ListBox',
-    enumerable: false,
-    configurable: false,
-});
-
-        

package/types/components/fields/ListBox.d.ts

@@ -1,48 +0,0 @@
-import { ForwardedRef, ReactElement, RefObject } from 'react';
-import { AriaListBoxProps } from 'react-aria';
-import { Section as BaseSection, Item } from 'react-stately';
-import { Styles } from '../../tasty';
-import type { CollectionBase, Key } from '@react-types/shared';
-import type { FieldBaseProps } from '../../shared';
-type FilterFn = (textValue: string, inputValue: string) => boolean;
-export interface CubeListBoxProps<T> extends Omit<AriaListBoxProps<T>, 'onSelectionChange'>, CollectionBase<T>, FieldBaseProps {
-    /** Whether the ListBox is searchable */
-    isSearchable?: boolean;
-    /** Placeholder text for the search input */
-    searchPlaceholder?: string;
-    /** The filter function used to determine if an option should be included in the filtered list */
-    filter?: FilterFn;
-    /** Custom styles for the search input */
-    searchInputStyles?: Styles;
-    /** Custom styles for the list container */
-    listStyles?: Styles;
-    /** Custom styles for options */
-    optionStyles?: Styles;
-    /** Custom styles for sections */
-    sectionStyles?: Styles;
-    /** Custom styles for section headings */
-    headingStyles?: Styles;
-    /** Whether the ListBox is disabled */
-    isDisabled?: boolean;
-    /** Whether the ListBox is loading */
-    isLoading?: boolean;
-    /** The selected key(s) */
-    selectedKey?: Key | null;
-    selectedKeys?: Set<Key> | 'all';
-    /** Default selected key(s) */
-    defaultSelectedKey?: Key | null;
-    defaultSelectedKeys?: Set<Key> | 'all';
-    /** Selection change handler */
-    onSelectionChange?: (key: Key | null) => void;
-    /** Ref for the search input */
-    searchInputRef?: RefObject<HTMLInputElement>;
-    /** Ref for the list */
-    listRef?: RefObject<HTMLElement>;
-}
-export declare const ListBox: (<T>(props: CubeListBoxProps<T> & {
-    ref?: ForwardedRef<HTMLDivElement>;
-}) => ReactElement) & {
-    Item: typeof Item;
-    Section: typeof BaseSection;
-};
-export {};