@cube-dev/ui-kit 0.65.1 → 0.66.0

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

@@ -6,5 +6,7 @@ declare const Button: import("react").ForwardRefExoticComponent<Omit<import("./B
 };
 export * from './Button';
 export * from './Action/Action';
+export * from './Menu';
+export * from './CommandMenu';
 export * from './use-action';
 export { Button, ButtonGroup };

package/types/components/content/HotKeys/HotKeys.d.ts

@@ -1,6 +1,6 @@
-import { AllBaseProps, ContainerStyleProps } from '../../../tasty';
-export interface CubeHotKeysProps extends AllBaseProps, ContainerStyleProps {
-    keys: string;
+import { BasePropsWithoutChildren, ContainerStyleProps } from '../../../tasty';
+export interface CubeHotKeysProps extends BasePropsWithoutChildren, ContainerStyleProps {
+    children: string;
 }
 declare const _HotKeys: import("react").ForwardRefExoticComponent<CubeHotKeysProps & import("react").RefAttributes<unknown>>;
 export { _HotKeys as HotKeys };

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

@@ -30,7 +30,7 @@ export interface CubeComboBoxProps<T> extends Omit<CubeSelectBaseProps<T>, 'onOp
      * Has no effect when `items` is provided.
      */
     filter?: FilterFn;
-    size?: 'small' | 'default' | 'large' | string;
+    size?: 'small' | 'medium' | 'default' | 'large' | string;
     suffixPosition?: 'before' | 'after';
     menuTrigger?: MenuTriggerAction;
     allowsCustomValue?: boolean;

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

@@ -31,10 +31,10 @@ export interface CubeSelectProps<T> extends CubeSelectBaseProps<T> {
     popoverRef?: RefObject<HTMLInputElement>;
     /** The ref for the list box. */
     listBoxRef?: RefObject<HTMLElement>;
-    size?: 'small' | 'default' | 'large' | string;
+    size?: 'small' | 'medium' | 'default' | 'large' | string;
     placeholder?: string;
 }
-export declare function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, overlayStyles, optionStyles, overlayProps: parentOverlayProps, shouldUseVirtualFocus, placement, minWidth, ...otherProps }: {
+export declare function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, overlayStyles, optionStyles, overlayProps: parentOverlayProps, shouldUseVirtualFocus, placement, minWidth, size, ...otherProps }: {
     [x: string]: any;
     state: any;
     popoverRef: any;
@@ -46,6 +46,7 @@ export declare function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxSty
     shouldUseVirtualFocus?: boolean | undefined;
     placement: any;
     minWidth: any;
+    size?: string | undefined;
 }): import("react/jsx-runtime").JSX.Element;
 type SectionComponent = typeof BaseSection;
 declare const SelectSectionComponent: SectionComponent;

package/types/components/status/Spin/Cube.d.ts

@@ -1,4 +1,4 @@
 import { SpinCubeProps } from './types';
 export declare const Cube: import("react").MemoExoticComponent<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }>, SpinCubeProps>, never>>>;

package/types/components/status/Spin/SpinsContainer.d.ts

@@ -1,5 +1,5 @@
 export declare const SpinsContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
 }>, {
     $ownSize: number;
 }>, never>>;

package/types/index.d.ts

@@ -64,10 +64,12 @@ export * from './components/content/HotKeys';
 export type { CubeSearchInputProps } from './components/fields/SearchInput/SearchInput';
 export type { CubeListBoxProps } from './components/fields/ListBox';
 export { ListBox } from './components/fields/ListBox';
-export { Menu } from './components/pickers/Menu/Menu';
-export type { CubeMenuProps } from './components/pickers/Menu/Menu';
-export { MenuTrigger } from './components/pickers/Menu/MenuTrigger';
-export type { CubeMenuTriggerProps } from './components/pickers/Menu/MenuTrigger';
+export { Menu } from './components/actions/Menu/Menu';
+export type { CubeMenuProps } from './components/actions/Menu/Menu';
+export { MenuTrigger } from './components/actions/Menu/MenuTrigger';
+export type { CubeMenuTriggerProps } from './components/actions/Menu/MenuTrigger';
+export { CommandMenu } from './components/actions/CommandMenu';
+export type { CubeCommandMenuProps, CommandMenuItem, } from './components/actions/CommandMenu';
 export { Select, ListBoxPopup } from './components/fields/Select/Select';
 export type { CubeSelectProps, CubeSelectBaseProps, } from './components/fields/Select/Select';
 export { Avatar } from './components/content/Avatar/Avatar';

package/es/components/pickers/Menu/MenuButton.js

@@ -1,96 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.65.1
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconPointFilled } from '@tabler/icons-react';
-import { CheckIcon } from '../../../icons';
-import { tasty } from '../../../tasty';
-import { DEFAULT_BUTTON_STYLES, DEFAULT_NEUTRAL_STYLES } from '../../actions';
-import { Block } from '../../Block';
-import { Text } from '../../content/Text';
-import { Space } from '../../layout/Space';
-const StyledButton = tasty(Block, {
-    styles: {
-        ...DEFAULT_BUTTON_STYLES,
-        ...DEFAULT_NEUTRAL_STYLES,
-        height: 'min 4x',
-        border: '#clear',
-        fill: {
-            '': '#clear',
-            focused: '#dark.03',
-            selected: '#dark.06',
-            'selected & focused': '#dark.09',
-            pressed: '#dark.06',
-            disabled: '#clear',
-        },
-        color: {
-            '': '#dark-02',
-            'selected | pressed': '#dark',
-            disabled: '#dark-04',
-        },
-        cursor: {
-            '': 'pointer',
-            disabled: 'default',
-        },
-        shadow: '#clear',
-        padding: {
-            '': '0 (1x - 1bw)',
-            'selectionIcon & selectable & !selected': '0 (1x - 1bw) 0 (1x - 1bw + 3x)',
-        },
-        display: 'flex',
-        flow: 'row',
-        justifyContent: 'start',
-        gap: '.75x',
-        outline: false,
-        ButtonIcon: {
-            display: 'grid',
-            fontSize: '@icon-size',
-            width: '@icon-size',
-            height: '@icon-size',
-            placeSelf: 'center',
-            placeItems: 'center',
-        },
-        Postfix: {
-            color: {
-                '': '#dark-03',
-                pressed: '#dark-02',
-                disabled: '#dark-04',
-            },
-        },
-        Description: {
-            preset: 't4',
-            color: '#dark-03',
-        },
-    },
-});
-const getPostfix = (postfix) => typeof postfix === 'string' ? (_jsx(Text, { nowrap: true, color: "inherit", "data-element": "Postfix", children: postfix })) : (postfix);
-const getSelectionTypeIcon = (selectionIcon) => {
-    switch (selectionIcon) {
-        case 'checkbox':
-            return _jsx(CheckIcon, {});
-        case 'radio':
-            return _jsx(IconPointFilled, {});
-        default:
-            return undefined;
-    }
-};
-export function MenuButton({ children, icon, postfix, description, ...props }) {
-    const { selectionIcon, isSelected, isSelectable, isDisabled, ...rest } = props;
-    const checkIcon = isSelectable && isSelected
-        ? getSelectionTypeIcon(selectionIcon)
-        : undefined;
-    const mods = {
-        ...props.mods,
-        selectionIcon: !!selectionIcon,
-        selectable: isSelectable,
-        selected: isSelected,
-        disabled: isDisabled,
-    };
-    return (_jsxs(StyledButton, { "data-size": "small", ...rest, mods: mods, children: [checkIcon ? _jsx("div", { "data-element": "ButtonIcon", children: checkIcon }) : null, icon ? _jsx("div", { "data-element": "ButtonIcon", children: icon }) : null, _jsxs(Space, { gap: "1x", placeContent: "space-between", overflow: "clip", width: "100%", children: [_jsxs(Space, { flow: "column", gap: "0", width: "100%", children: [_jsx(Text, { ellipsis: true, color: "inherit", children: children }), description ? (_jsx(Text, { nowrap: true, ellipsis: true, "data-element": "Description", preset: "t4", color: "#dark-03", children: description })) : null] }), postfix && getPostfix(postfix)] })] }));
-}
-
-        

package/types/components/pickers/Menu/MenuButton.d.ts

@@ -1,14 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-import { CubeBlockProps } from '../../Block';
-export type MenuSelectionType = 'checkbox' | 'radio';
-export type MenuButtonProps = {
-    postfix?: ReactNode;
-    /** Optional description shown under the main label */
-    description?: ReactNode;
-    selectionIcon?: MenuSelectionType;
-    isSelectable?: boolean;
-    isSelected?: boolean;
-    icon?: ReactElement;
-    onAction?: () => void;
-} & CubeBlockProps;
-export declare function MenuButton({ children, icon, postfix, description, ...props }: MenuButtonProps): import("react/jsx-runtime").JSX.Element;