@cube-dev/ui-kit 0.64.0 → 0.65.0

package/es/utils/react/interactions.js

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

package/es/utils/react/isTextOnly.js

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

package/es/utils/react/mapProps.js

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

package/es/utils/react/mergeProps.js

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

package/es/utils/react/nullableValue.js

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

package/es/utils/react/useCombinedRefs.js

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

package/es/utils/react/useId.js

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

package/es/utils/react/useIsDarwin.js

@@ -0,0 +1,42 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.65.0
+ * Released under the MIT license.
+ */
+
+import { useEffect, useState } from 'react';
+/**
+ * useIsDarwin
+ * ----------
+ * @returns true  – if the browser is running on macOS / iOS
+ *          false – otherwise (Windows, Linux, Android…)
+ *
+ * • Safe to call during server-side rendering: it defaults to `true`
+ *   until it can really inspect the client.
+ * • Uses the modern UA-Client-Hints platform field where available,
+ *   then falls back to navigator.platform, then navigator.userAgent.
+ */
+export function useIsDarwin(defaultValue = true) {
+    const [isDarwin, setIsDarwin] = useState(defaultValue);
+    useEffect(() => {
+        if (typeof navigator === 'undefined')
+            return; // ← running on the server
+        // 1 — Prefer UA-CH (Chromium 89+, Edge 94+, Arc, Opera, Android Chrome)
+        const chPlatform = navigator.userAgentData?.platform;
+        if (chPlatform) {
+            setIsDarwin(/mac|iphone|ipad|ipod/i.test(chPlatform));
+            return;
+        }
+        // 2 — Safari & Firefox: navigator.platform is still reliable
+        if (navigator.platform) {
+            setIsDarwin(/mac|iphone|ipad|ipod/i.test(navigator.platform));
+            return;
+        }
+        // 3 — Last-ditch for very old browsers
+        setIsDarwin(/mac|iphone|ipad|ipod/i.test(navigator.userAgent));
+    }, []);
+    return isDarwin;
+}
+
+        

package/es/utils/react/useKeySymbols.js

@@ -0,0 +1,81 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.65.0
+ * Released under the MIT license.
+ */
+
+import { useMemo } from 'react';
+import { useIsDarwin } from './useIsDarwin';
+/* symbols that are identical on every OS */
+const COMMON = {
+    esc: '⎋',
+    escape: '⎋',
+    enter: '⏎',
+    return: '⏎',
+    space: '␣',
+    backspace: '⌫',
+    delete: '⌦',
+    up: '↑',
+    arrowup: '↑',
+    down: '↓',
+    arrowdown: '↓',
+    left: '←',
+    arrowleft: '←',
+    right: '→',
+    arrowright: '→',
+};
+/* modifiers for macOS / iOS */
+const MAC = {
+    mod: '⌘',
+    meta: '⌘',
+    cmd: '⌘',
+    command: '⌘',
+    ctrl: '⌃',
+    control: '⌃',
+    alt: '⌥',
+    option: '⌥',
+    shift: '⇧',
+};
+/* modifiers for Windows / Linux */
+const PC = {
+    mod: 'Ctrl',
+    ctrl: 'Ctrl',
+    control: 'Ctrl',
+    meta: '⊞',
+    win: '⊞',
+    windows: '⊞',
+    cmd: '⊞',
+    command: '⊞',
+    alt: '⎇',
+    option: '⎇',
+    shift: '⇧',
+};
+/**
+ * useKeySymbols
+ * -------------
+ * Turns an author string such as
+ *   "mod+k, ctrl+k"
+ * into
+ *   [["⌘", "K"], ["Ctrl", "K"]]
+ */
+export function useKeySymbols(combo) {
+    const isDarwin = useIsDarwin(); // ⌘ by default during SSR
+    const modifiers = isDarwin ? MAC : PC;
+    return useMemo(() => {
+        /** split on commas, trim each alternative */
+        return combo
+            .split(',')
+            .map((raw) => raw.trim().toLowerCase())
+            .filter(Boolean) // drop empty fragments
+            .map((alternative) => alternative.split('+').map((part) => {
+            const key = part.trim();
+            return (modifiers[key] ?? // platform-specific modifier
+                COMMON[key] ?? // shared glyphs
+                part.toUpperCase() // plain key
+            );
+        }));
+    }, [combo, modifiers]);
+}
+
+        

package/es/utils/react/useLayoutEffect.js

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

package/es/utils/react/useQaProps.js

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

package/es/utils/react/useViewportSize.js

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

package/es/utils/react/wrapNodeIfPlain.js

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

package/es/version.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.64.0
+ * @cube-dev/ui-kit v0.65.0
  * Released under the MIT license.
  */
 
 "use strict";
 if (typeof window !== 'undefined') {
-    const version = '0.64.0';
+    const version = '0.65.0';
     // 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.64.0",
+  "version": "0.65.0",
   "description": "UIKit for Cube Projects",
   "keywords": [
     "uikit"
@@ -32,6 +32,7 @@
     "@react-spectrum/utils": "^3.12.1",
     "@react-stately/utils": "^3.10.5",
     "@react-types/shared": "^3.27.0",
+    "@sparticuz/chromium": "^137.0.1",
     "@tabler/icons-react": "^3.31.0",
     "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@vitejs/plugin-react": "^4.3.2",
@@ -40,16 +41,19 @@
     "diff": "^7.0.0",
     "email-validator": "^2.0.4",
     "globals": "^16.0.0",
+    "playwright-core": "^1.53.2",
     "prism-react-renderer": "^2.4.1",
     "prismjs": "^1.30.0",
     "react-aria": "^3.37.0",
     "react-focus-lock": "^2.13.5",
+    "react-hotkeys-hook": "^5.1.0",
     "react-is": "^18.3.1",
     "react-keyed-flatten-children": "^1.3.0",
     "react-stately": "^3.35.0",
     "react-transition-group": "^4.4.5",
     "react-types": "^0.1.0",
     "remark-gfm": "^4.0.1",
+    "serve-handler": "^6.1.6",
     "tiny-invariant": "^1.3.3",
     "typescript-eslint": "^8.31.0",
     "usehooks-ts": "^3.1.0",

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

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

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

@@ -0,0 +1,2 @@
+export { HotKeys } from './HotKeys';
+export type { CubeHotKeysProps } from './HotKeys';

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

@@ -13,10 +13,7 @@ declare let __Checkbox: import("react").ForwardRefExoticComponent<Omit<CubeCheck
 } & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>> & {
     Group: typeof CheckboxGroup;
 } & {
-    Group: import("react").ForwardRefExoticComponent<Omit<import("./CheckboxGroup").CubeCheckboxGroupProps, "value" | "defaultValue"> & {
-        value?: T_1["value"] | any;
-        defaultValue?: T_1["defaultValue"] | any;
-    } & import("react").RefAttributes<unknown>>;
+    Group: import("react").ForwardRefExoticComponent<Omit<import("../../../utils/react/nullableValue").WithNullableValue<import("./CheckboxGroup").CubeCheckboxGroupProps>, "ref"> & import("react").RefAttributes<unknown>>;
 };
 export { __Checkbox as Checkbox };
 export type { AriaCheckboxProps };

package/types/components/fields/Checkbox/CheckboxGroup.d.ts

@@ -1,7 +1,8 @@
 import { AriaCheckboxGroupProps } from 'react-aria';
 import { FieldBaseProps } from '../../../shared';
 import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
-export interface CubeCheckboxGroupProps extends BaseProps, AriaCheckboxGroupProps, FieldBaseProps, ContainerStyleProps {
+import { WithNullableValue } from '../../../utils/react/nullableValue';
+export interface CubeCheckboxGroupProps extends BaseProps, Omit<AriaCheckboxGroupProps, 'errorMessage'>, FieldBaseProps, ContainerStyleProps {
     orientation?: 'vertical' | 'horizontal';
     inputStyles?: Styles;
 }
@@ -9,8 +10,5 @@ export interface CubeCheckboxGroupProps extends BaseProps, AriaCheckboxGroupProp
  * Checkbox groups allow users to select a single option from a list of mutually exclusive options.
  * All possible options are exposed up front for users to compare.
  */
-declare const _CheckboxGroup: import("react").ForwardRefExoticComponent<Omit<CubeCheckboxGroupProps, "value" | "defaultValue"> & {
-    value?: T["value"] | any;
-    defaultValue?: T["defaultValue"] | any;
-} & import("react").RefAttributes<unknown>>;
+declare const _CheckboxGroup: import("react").ForwardRefExoticComponent<Omit<WithNullableValue<CubeCheckboxGroupProps>, "ref"> & import("react").RefAttributes<unknown>>;
 export { _CheckboxGroup as CheckboxGroup };

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

@@ -1,11 +1,12 @@
 import { ForwardedRef, ReactElement, RefObject } from 'react';
 import { AriaComboBoxProps, AriaTextFieldProps } from 'react-aria';
 import { Section as BaseSection, Item } from 'react-stately';
+import { FieldBaseProps } from '../../../shared';
 import type { KeyboardDelegate, LoadingState } from '@react-types/shared';
 import type { CubeSelectBaseProps } from '../Select';
 type FilterFn = (textValue: string, inputValue: string) => boolean;
 export type MenuTriggerAction = 'focus' | 'input' | 'manual';
-export interface CubeComboBoxProps<T> extends Omit<CubeSelectBaseProps<T>, 'onOpenChange' | 'onBlur' | 'onFocus' | 'validate' | 'onSelectionChange'>, AriaComboBoxProps<T>, AriaTextFieldProps {
+export interface CubeComboBoxProps<T> extends Omit<CubeSelectBaseProps<T>, 'onOpenChange' | 'onBlur' | 'onFocus' | 'validate' | 'onSelectionChange'>, Omit<AriaComboBoxProps<T>, 'errorMessage'>, Omit<AriaTextFieldProps, 'errorMessage'>, FieldBaseProps {
     defaultSelectedKey?: string | null;
     selectedKey?: string | null;
     onSelectionChange?: (selectedKey: string | null) => void;

package/types/components/fields/DatePicker/DateInput.d.ts

@@ -2,7 +2,7 @@ import { FocusableRef } from '@react-types/shared';
 import { AriaDateFieldProps, DateValue } from 'react-aria';
 import { FieldBaseProps, ValidationState } from '../../../shared';
 import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
-export interface CubeDateInputProps<T extends DateValue = DateValue> extends AriaDateFieldProps<T>, BaseProps, ContainerStyleProps, FieldBaseProps {
+export interface CubeDateInputProps<T extends DateValue = DateValue> extends Omit<AriaDateFieldProps<T>, 'errorMessage'>, BaseProps, ContainerStyleProps, FieldBaseProps {
     wrapperStyles?: Styles;
     inputStyles?: Styles;
     styles?: Styles;

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

@@ -2,7 +2,7 @@ import { AriaDatePickerProps, DateValue } from 'react-aria';
 import { FieldBaseProps, ValidationState } from '../../../shared';
 import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
 import { DateFieldBase } from './types';
-export interface CubeDatePickerProps<T extends DateValue = DateValue> extends AriaDatePickerProps<T>, DateFieldBase<T>, BaseProps, ContainerStyleProps, FieldBaseProps {
+export interface CubeDatePickerProps<T extends DateValue = DateValue> extends Omit<AriaDatePickerProps<T>, 'errorMessage'>, DateFieldBase<T>, BaseProps, ContainerStyleProps, FieldBaseProps {
     wrapperStyles?: Styles;
     inputStyles?: Styles;
     triggerStyles?: Styles;
@@ -13,5 +13,5 @@ export interface CubeDatePickerProps<T extends DateValue = DateValue> extends Ar
     shouldFlip?: boolean;
     useLocale?: boolean;
 }
-declare const _DatePicker: import("react").ForwardRefExoticComponent<CubeDatePickerProps<DateValue> & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;
+declare const _DatePicker: import("react").ForwardRefExoticComponent<Omit<CubeDatePickerProps<DateValue>, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;
 export { _DatePicker as DatePicker };

package/types/components/fields/DatePicker/DatePickerInput.d.ts

@@ -1,6 +1,6 @@
 import { AriaDatePickerProps, DateValue } from 'react-aria';
 import { DateFieldBase, Granularity } from './types';
-interface CubeDatePickerInputProps<T extends DateValue> extends AriaDatePickerProps<T>, DateFieldBase<T> {
+interface CubeDatePickerInputProps<T extends DateValue> extends Omit<AriaDatePickerProps<T>, 'errorMessage'>, DateFieldBase<T> {
     hideValidationIcon?: boolean;
     maxGranularity?: Granularity;
     useLocale?: boolean;

package/types/components/fields/DatePicker/DateRangePicker.d.ts

@@ -3,7 +3,7 @@ import { AriaDateRangePickerProps, DateValue } from 'react-aria';
 import { FieldBaseProps, ValidationState } from '../../../shared';
 import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
 import { DateFieldBase } from './types';
-export interface CubeDateRangePickerProps<T extends DateValue = DateValue> extends AriaDateRangePickerProps<T>, BaseProps, DateFieldBase<T>, ContainerStyleProps, FieldBaseProps {
+export interface CubeDateRangePickerProps<T extends DateValue = DateValue> extends Omit<AriaDateRangePickerProps<T>, 'errorMessage'>, BaseProps, DateFieldBase<T>, ContainerStyleProps, FieldBaseProps {
     wrapperStyles?: Styles;
     inputStyles?: Styles;
     styles?: Styles;

package/types/components/fields/DatePicker/DateRangeSeparatedPicker.d.ts

@@ -4,7 +4,7 @@ import { AriaDateRangePickerProps, DateValue } from 'react-aria';
 import { FieldBaseProps, ValidationState } from '../../../shared';
 import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
 import { DateFieldBase } from './types';
-export interface CubeDateRangeSeparatedPickerProps<T extends DateValue = DateValue> extends AriaDateRangePickerProps<T>, BaseProps, ContainerStyleProps, DateFieldBase<T>, FieldBaseProps {
+export interface CubeDateRangeSeparatedPickerProps<T extends DateValue = DateValue> extends Omit<AriaDateRangePickerProps<T>, 'errorMessage'>, BaseProps, ContainerStyleProps, DateFieldBase<T>, FieldBaseProps {
     wrapperStyles?: Styles;
     inputStyles?: Styles;
     styles?: Styles;

package/types/components/fields/DatePicker/TimeInput.d.ts

@@ -2,7 +2,7 @@ import { AriaTimeFieldProps, DateValue, TimeValue } from 'react-aria';
 import { FieldBaseProps, ValidationState } from '../../../shared';
 import { BaseProps, ContainerStyleProps, Styles } from '../../../tasty';
 import { Granularity } from './types';
-export interface CubeTimeInputProps<T extends TimeValue = TimeValue> extends AriaTimeFieldProps<T>, BaseProps, ContainerStyleProps, FieldBaseProps {
+export interface CubeTimeInputProps<T extends TimeValue = TimeValue> extends Omit<AriaTimeFieldProps<T>, 'errorMessage'>, BaseProps, ContainerStyleProps, FieldBaseProps {
     wrapperStyles?: Styles;
     inputStyles?: Styles;
     styles?: Styles;
@@ -32,5 +32,5 @@ export interface CubeTimeInputProps<T extends TimeValue = TimeValue> extends Ari
  * TimeFields allow users to enter and edit time values using a keyboard.
  * Each part of the time is displayed in an individually editable segment.
  */
-declare const _TimeInput: import("react").ForwardRefExoticComponent<CubeTimeInputProps<TimeValue> & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;
+declare const _TimeInput: import("react").ForwardRefExoticComponent<Omit<CubeTimeInputProps<TimeValue>, "ref"> & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;
 export { _TimeInput as TimeInput };

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

@@ -0,0 +1,52 @@
+import { ForwardedRef, ReactElement, ReactNode, 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;
+    /** Whether the search input should have autofocus */
+    autoFocus?: boolean;
+    /** The filter function used to determine if an option should be included in the filtered list */
+    filter?: FilterFn;
+    /** Custom label to display when no results are found after filtering */
+    emptyLabel?: ReactNode;
+    /** 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 as a whole is loading (generic loading indicator) */
+    isLoading?: boolean;
+    /** The selected key(s) */
+    selectedKey?: Key | null;
+    selectedKeys?: Key[] | 'all';
+    /** Default selected key(s) */
+    defaultSelectedKey?: Key | null;
+    defaultSelectedKeys?: Key[] | 'all';
+    /** Selection change handler */
+    onSelectionChange?: (key: Key | null | Key[]) => 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 {};

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

@@ -0,0 +1,2 @@
+export * from './ListBox';
+export type { CubeListBoxProps } from './ListBox';