@cube-dev/ui-kit 0.72.3 → 0.73.0

package/types/components/content/List/index.d.ts

@@ -0,0 +1 @@
+export * from './SectionHeading';

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

@@ -1,7 +1,8 @@
 import { ForwardedRef, ReactElement, RefObject } from 'react';
 import { AriaComboBoxProps, AriaTextFieldProps } from 'react-aria';
-import { Section as BaseSection, Item } from 'react-stately';
+import { Section as BaseSection } from 'react-stately';
 import { FieldBaseProps } from '../../../shared';
+import { Item } from '../../Item';
 import type { KeyboardDelegate, LoadingState } from '@react-types/shared';
 import type { CubeSelectBaseProps } from '../Select';
 type FilterFn = (textValue: string, inputValue: string) => boolean;

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

@@ -2,6 +2,7 @@ import { Key } from '@react-types/shared';
 import { ForwardedRef, ReactElement, ReactNode, RefObject } from 'react';
 import { Section as BaseSection, Item } from 'react-stately';
 import { Styles } from '../../../tasty';
+import { CubeItemProps } from '../../Item';
 import { CubeListBoxProps } from '../ListBox/ListBox';
 import type { FieldBaseProps } from '../../../shared';
 type FilterFn = (textValue: string, inputValue: string) => boolean;
@@ -41,6 +42,15 @@ export interface CubeFilterListBoxProps<T> extends CubeListBoxProps<T>, FieldBas
      * Used by FilterPicker to close the popover on non-checkbox clicks.
      */
     onOptionClick?: (key: Key) => void;
+    /**
+     * Props to apply to existing custom values (values that are already selected but not in the predefined options).
+     */
+    customValueProps?: Partial<CubeItemProps<T>>;
+    /**
+     * Props to apply to new custom values (values typed in the search input that are about to be added).
+     * These are merged with customValueProps for new custom values.
+     */
+    newCustomValueProps?: Partial<CubeItemProps<T>>;
 }
 export declare const FilterListBox: (<T>(props: CubeFilterListBoxProps<T> & {
     ref?: ForwardedRef<HTMLDivElement>;

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

@@ -1,18 +1,14 @@
 import { ForwardedRef, MutableRefObject, ReactElement, ReactNode } from 'react';
 import { Section as BaseSection, Item, ListState } from 'react-stately';
 import { BasePropsWithoutChildren, BaseStyleProps, ColorStyleProps, OuterStyleProps, Styles } from '../../../tasty';
-import { CubeButtonProps } from '../../actions';
+import { CubeItemButtonProps } from '../../actions';
+import { CubeItemBaseProps } from '../../content/ItemBase';
+import { CubeTooltipProviderProps } from '../../overlays/Tooltip/TooltipProvider';
 import { CubeFilterListBoxProps } from '../FilterListBox/FilterListBox';
 import type { FieldBaseProps } from '../../../shared';
-export interface CubeFilterPickerProps<T> extends Omit<CubeFilterListBoxProps<T>, 'size'>, BasePropsWithoutChildren, BaseStyleProps, OuterStyleProps, ColorStyleProps, FieldBaseProps, Pick<CubeButtonProps, 'type' | 'theme' | 'icon' | 'rightIcon'> {
+export interface CubeFilterPickerProps<T> extends Omit<CubeFilterListBoxProps<T>, 'size' | 'tooltip'>, Omit<CubeItemBaseProps, 'children' | 'size'>, BasePropsWithoutChildren, BaseStyleProps, OuterStyleProps, ColorStyleProps, Omit<FieldBaseProps, 'tooltip'>, Pick<CubeItemButtonProps, 'type' | 'theme' | 'icon' | 'rightIcon' | 'prefix' | 'suffix' | 'hotkeys'> {
     /** Placeholder text when no selection is made */
     placeholder?: string;
-    /** Icon to show in the trigger button */
-    icon?: ReactElement;
-    /** Button styling type */
-    type?: 'outline' | 'clear' | 'primary' | 'secondary' | 'neutral' | (string & {});
-    /** Button theme */
-    theme?: 'default' | 'special';
     /** Size of the picker component */
     size?: 'small' | 'medium' | 'large';
     /** Custom styles for the list box popover */
@@ -25,6 +21,10 @@ export interface CubeFilterPickerProps<T> extends Omit<CubeFilterListBoxProps<T>
     isCheckable?: boolean;
     /** Whether to flip the popover placement */
     shouldFlip?: boolean;
+    /** Tooltip for the trigger button (separate from field tooltip) */
+    triggerTooltip?: string | Omit<CubeTooltipProviderProps, 'children'>;
+    /** Description for the trigger button (separate from field description) */
+    triggerDescription?: ReactNode;
     /**
      * Custom renderer for the summary shown inside the trigger when there is a selection.
      *

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

@@ -1,7 +1,8 @@
 import { ForwardedRef, MutableRefObject, ReactElement, ReactNode, RefObject } from 'react';
 import { AriaListBoxProps } from 'react-aria';
-import { Section as BaseSection, Item } from 'react-stately';
+import { Section as BaseSection } from 'react-stately';
 import { BasePropsWithoutChildren, Styles } from '../../../tasty';
+import { CubeItemProps, Item } from '../../Item';
 import type { CollectionBase, Key } from '@react-types/shared';
 import type { FieldBaseProps } from '../../../shared';
 export interface CubeListBoxProps<T> extends AriaListBoxProps<T>, CollectionBase<T>, FieldBaseProps, BasePropsWithoutChildren {
@@ -28,7 +29,7 @@ export interface CubeListBoxProps<T> extends AriaListBoxProps<T>, CollectionBase
     /** The selection mode of the ListBox */
     selectionMode?: 'single' | 'multiple';
     /** Ref for accessing the list DOM element */
-    listRef?: RefObject<HTMLDivElement>;
+    listRef?: RefObject<HTMLUListElement>;
     /** Whether to disallow empty selection */
     disallowEmptySelection?: boolean;
     /** Whether to wrap focus when reaching the end of the list */
@@ -86,6 +87,10 @@ export interface CubeListBoxProps<T> extends AriaListBoxProps<T>, CollectionBase
      * Label for the "Select All" option. Defaults to "Select All".
      */
     selectAllLabel?: ReactNode;
+    /**
+     * Props to apply to the "Select All" option.
+     */
+    allValueProps?: Partial<CubeItemProps<T>>;
 }
 export declare const ListBox: (<T>(props: CubeListBoxProps<T> & {
     ref?: ForwardedRef<HTMLDivElement>;

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

@@ -1,14 +1,31 @@
 import { AriaLabelingProps, CollectionBase } from '@react-types/shared';
 import React, { ReactElement, ReactNode, RefObject } from 'react';
 import { AriaSelectProps } from 'react-aria';
-import { Section as BaseSection, Item, useSelectState } from 'react-stately';
+import { Section as BaseSection, useSelectState } from 'react-stately';
+import { CubeTooltipProviderProps } from 'src/components/overlays/Tooltip/TooltipProvider';
 import { FieldBaseProps } from '../../../shared/index';
 import { BasePropsWithoutChildren, BaseStyleProps, ColorStyleProps, OuterStyleProps, Props, Styles } from '../../../tasty/index';
+import { Item } from '../../Item';
 export declare const ListBoxElement: React.ComponentType<Omit<Props, "variant"> & import("../../../tasty/tasty").WithVariant<import("../../../tasty/tasty").VariantMap>>;
-export interface CubeSelectBaseProps<T> extends BasePropsWithoutChildren, AriaLabelingProps, BaseStyleProps, OuterStyleProps, ColorStyleProps, FieldBaseProps, CollectionBase<T>, Omit<AriaSelectProps<T>, 'errorMessage'> {
+export interface CubeSelectBaseProps<T> extends BasePropsWithoutChildren, AriaLabelingProps, BaseStyleProps, OuterStyleProps, ColorStyleProps, Omit<FieldBaseProps, 'tooltip'>, CollectionBase<T>, Omit<AriaSelectProps<T>, 'errorMessage'> {
     icon?: ReactElement;
+    rightIcon?: ReactNode;
     prefix?: ReactNode;
     suffix?: ReactNode;
+    /** Description text for the trigger. Note: Different from field-level description. */
+    description?: ReactNode;
+    descriptionPlacement?: 'inline' | 'block' | 'auto';
+    /** Keyboard shortcut that triggers the select when pressed */
+    hotkeys?: string;
+    /**
+     * Tooltip content and configuration for the trigger:
+     * - string: simple tooltip text
+     * - true: auto tooltip on overflow (shows selected value as tooltip when truncated)
+     * - object: advanced configuration with optional auto property
+     */
+    tooltip?: string | boolean | (Omit<CubeTooltipProviderProps, 'children'> & {
+        auto?: boolean;
+    });
     triggerRef?: RefObject<HTMLButtonElement>;
     isLoading?: boolean;
     loadingIndicator?: ReactNode;
@@ -61,10 +78,7 @@ declare const __Select: React.ForwardRefExoticComponent<Omit<CubeSelectProps<obj
     Item: typeof Item;
     Section: typeof SelectSectionComponent;
 } & {
-    Item: (props: {
-        description?: ReactNode;
-        [key: string]: any;
-    }) => ReactElement;
+    Item: <T>(props: import("../../Item").CubeItemProps<T>) => ReactElement;
     Section: any;
 };
 export { __Select as Select };

package/types/data/item-themes.d.ts

@@ -0,0 +1,31 @@
+import { Styles } from 'src/tasty';
+export declare const VALIDATION_STYLES: Styles;
+export declare const DEFAULT_PRIMARY_STYLES: Styles;
+export declare const DEFAULT_SECONDARY_STYLES: Styles;
+export declare const DEFAULT_OUTLINE_STYLES: Styles;
+export declare const DEFAULT_NEUTRAL_STYLES: Styles;
+export declare const DEFAULT_CLEAR_STYLES: Styles;
+export declare const DEFAULT_LINK_STYLES: Styles;
+export declare const DEFAULT_ITEM_STYLES: Styles;
+export declare const DANGER_PRIMARY_STYLES: Styles;
+export declare const DANGER_SECONDARY_STYLES: Styles;
+export declare const DANGER_OUTLINE_STYLES: Styles;
+export declare const DANGER_NEUTRAL_STYLES: Styles;
+export declare const DANGER_CLEAR_STYLES: Styles;
+export declare const DANGER_LINK_STYLES: Styles;
+export declare const DANGER_ITEM_STYLES: Styles;
+export declare const SUCCESS_PRIMARY_STYLES: Styles;
+export declare const SUCCESS_SECONDARY_STYLES: Styles;
+export declare const SUCCESS_OUTLINE_STYLES: Styles;
+export declare const SUCCESS_NEUTRAL_STYLES: Styles;
+export declare const SUCCESS_CLEAR_STYLES: Styles;
+export declare const SUCCESS_LINK_STYLES: Styles;
+export declare const SUCCESS_ITEM_STYLES: Styles;
+export declare const SPECIAL_PRIMARY_STYLES: Styles;
+export declare const SPECIAL_SECONDARY_STYLES: Styles;
+export declare const SPECIAL_OUTLINE_STYLES: Styles;
+export declare const SPECIAL_NEUTRAL_STYLES: Styles;
+export declare const SPECIAL_CLEAR_STYLES: Styles;
+export declare const SPECIAL_LINK_STYLES: Styles;
+export declare const SPECIAL_ITEM_STYLES: Styles;
+export type ItemVariant = 'default.primary' | 'default.secondary' | 'default.outline' | 'default.neutral' | 'default.clear' | 'default.link' | 'default.item' | 'danger.primary' | 'danger.secondary' | 'danger.outline' | 'danger.neutral' | 'danger.clear' | 'danger.link' | 'danger.item' | 'success.primary' | 'success.secondary' | 'success.outline' | 'success.neutral' | 'success.clear' | 'success.link' | 'success.item' | 'special.primary' | 'special.secondary' | 'special.outline' | 'special.neutral' | 'special.clear' | 'special.link' | 'special.item';

package/types/data/themes.d.ts

@@ -2,7 +2,7 @@ declare const _default: {
     readonly special: {
         readonly fill: "#purple";
         readonly color: "#white";
-        readonly border: "#purple";
+        readonly border: "#white";
     };
     readonly success: {
         readonly fill: "#success-bg";

package/types/index.d.ts

@@ -2,10 +2,13 @@ import { CubeParagraphProps, Paragraph } from './components/content/Paragraph';
 import { CubeTextProps, Text } from './components/content/Text';
 import { CubeTitleProps, Title } from './components/content/Title';
 import './version';
-export { Item, Section } from 'react-stately';
+export { Section } from 'react-stately';
 export * from '@internationalized/date';
+export { Item } from './components/Item';
 export { Block } from './components/Block';
 export type { CubeBlockProps } from './components/Block';
+export { ItemBase } from './components/content/ItemBase/ItemBase';
+export type { CubeItemBaseProps } from './components/content/ItemBase/ItemBase';
 export { ActiveZone } from './components/content/ActiveZone/ActiveZone';
 export type { CubeActiveZoneProps } from './components/content/ActiveZone/ActiveZone';
 export * from './components/content/CopySnippet';

package/es/components/portal/storybook/templates/CustomRoot.js

@@ -1,16 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.3
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef } from 'react';
-import { Portal } from '../../Portal';
-export const CustomRootTemplate = (args) => {
-    const rootRef = useRef(null);
-    return (_jsxs(_Fragment, { children: ["Disabled portal's content should be there ", ' -> ', _jsx(Portal, { ...args, root: rootRef, children: "Portal's content" }), _jsxs("div", { ref: rootRef, children: ["Using custom portal root content should be there ", ' -> '] }), "By default, Portal content should be there ", ' -> '] }));
-};
-
-        

package/es/components/portal/storybook/templates/PortalOrder.js

@@ -1,13 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.3
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Block } from '../../../Block';
-import { Portal } from '../../Portal';
-export const PortalOrderTemplate = (args) => (_jsxs(_Fragment, { children: [_jsxs(Portal, { ...args, children: [_jsx(Block, { children: "Portal 1" }), _jsx(Portal, { children: _jsx(Block, { children: "Portal 3" }) }), _jsx(Portal, { children: _jsx(Block, { children: "Portal 4" }) })] }), _jsx(Portal, { children: _jsx(Block, { children: "Portal 2" }) })] }));
-
-        

package/es/components/portal/storybook/templates/basic.js

@@ -1,13 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.3
- * Released under the MIT license.
- */
-
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { Divider } from '../../../content/Divider';
-import { Portal } from '../../Portal';
-export const Basic = (args) => (_jsxs(_Fragment, { children: ["By default, Portal content should be there ", ' -> ', _jsxs(Portal, { ...args, children: ["Portal's content.", !args.isDisabled && " But, if you disable me, I'll be near the arrow"] }), _jsx(Divider, {})] }));
-
-        

package/es/components/portal/storybook/templates/index.js

@@ -1,12 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.3
- * Released under the MIT license.
- */
-
-export * from './basic';
-export * from './PortalOrder';
-export * from './CustomRoot';
-
-        

package/types/components/portal/storybook/templates/CustomRoot.d.ts

@@ -1,3 +0,0 @@
-import { StoryFn } from '@storybook/react';
-import { PortalProps } from '../../types';
-export declare const CustomRootTemplate: StoryFn<PortalProps>;

package/types/components/portal/storybook/templates/PortalOrder.d.ts

@@ -1,3 +0,0 @@
-import { StoryFn } from '@storybook/react';
-import { PortalProps } from '../../types';
-export declare const PortalOrderTemplate: StoryFn<PortalProps>;

package/types/components/portal/storybook/templates/basic.d.ts

@@ -1,3 +0,0 @@
-import { StoryFn } from '@storybook/react';
-import { PortalProps } from '../../types';
-export declare const Basic: StoryFn<PortalProps>;

package/types/components/portal/storybook/templates/index.d.ts

@@ -1,3 +0,0 @@
-export * from './basic';
-export * from './PortalOrder';
-export * from './CustomRoot';