@cube-dev/ui-kit 0.12.6 → 0.13.0

package/es/tasty/utils/styles.js

@@ -1,12 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
 import { getModCombinations } from './index';
 const devMode = process.env.NODE_ENV !== 'production';
+const IS_DVH_SUPPORTED = typeof CSS?.supports !== 'undefined' ? CSS.supports('height: 100dvh') : false;
 export const CUSTOM_UNITS = {
     r: 'var(--radius)',
     bw: 'var(--border-width)',
@@ -17,8 +18,10 @@ export const CUSTOM_UNITS = {
     rp: 'var(--rem-pixel)',
     gp: 'var(--column-gap)',
     // global setting
-    wh: function wh(num) {
-        return `calc(var(--cube-visual-viewport-height) / 100 * ${num})`;
+    dvh: function dvh(num) {
+        return IS_DVH_SUPPORTED
+            ? `${num}dvh`
+            : `calc(var(--cube-dynamic-viewport-height, 100dvh) / 100 * ${num})`;
     },
     // span unit for GridProvider
     sp: function spanWidth(num) {

package/es/tasty/utils/warnings.js

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

package/es/test/index.js

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

package/es/test/render.js

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

package/es/test/setup.js

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

package/es/test/utils/index.js

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

package/es/test/utils/wait.js

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

package/es/tokens.js

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

package/es/type-checks.js

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

package/es/utils/ResizeSensor.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -14,12 +14,12 @@
  */
 function forEachElement(elements, callback) {
     let elementsType = Object.prototype.toString.call(elements);
-    let isCollectionTyped = '[object Array]' === elementsType
-        || '[object NodeList]' === elementsType
-        || '[object HTMLCollection]' === elementsType
-        || '[object Object]' === elementsType
-        || ('undefined' !== typeof jQuery && elements instanceof jQuery) //jquery
-        || ('undefined' !== typeof Elements && elements instanceof Elements); //mootools
+    let isCollectionTyped = '[object Array]' === elementsType ||
+        '[object NodeList]' === elementsType ||
+        '[object HTMLCollection]' === elementsType ||
+        '[object Object]' === elementsType ||
+        ('undefined' !== typeof jQuery && elements instanceof jQuery) || //jquery
+        ('undefined' !== typeof Elements && elements instanceof Elements); //mootools
     let i = 0, j = elements.length;
     if (isCollectionTyped) {
         for (; i < j; i++) {
@@ -75,16 +75,16 @@ export let ResizeSensor = function (element, callback) {
     // Only used for the dirty checking, so the event callback count is limited to max 1 call per fps per sensor.
     // In combination with the event based resize sensor this saves cpu time, because the sensor is too fast and
     // would generate too many unnecessary events.
-    let requestAnimationFrame = globalWindow.requestAnimationFrame
-        || globalWindow.mozRequestAnimationFrame
-        || globalWindow.webkitRequestAnimationFrame
-        || function (fn) {
+    let requestAnimationFrame = globalWindow.requestAnimationFrame ||
+        globalWindow.mozRequestAnimationFrame ||
+        globalWindow.webkitRequestAnimationFrame ||
+        function (fn) {
             return globalWindow.setTimeout(fn, 20);
         };
-    let cancelAnimationFrame = globalWindow.cancelAnimationFrame
-        || globalWindow.mozCancelAnimationFrame
-        || globalWindow.webkitCancelAnimationFrame
-        || function (timer) {
+    let cancelAnimationFrame = globalWindow.cancelAnimationFrame ||
+        globalWindow.mozCancelAnimationFrame ||
+        globalWindow.webkitCancelAnimationFrame ||
+        function (timer) {
             globalWindow.clearTimeout(timer);
         };
     //Is used when checking in reset() only for invisible elements
@@ -172,10 +172,10 @@ export let ResizeSensor = function (element, callback) {
         let position = computedStyle
             ? computedStyle.getPropertyValue('position')
             : null;
-        if ('absolute' !== position
-            && 'relative' !== position
-            && 'fixed' !== position
-            && 'sticky' !== position) {
+        if ('absolute' !== position &&
+            'relative' !== position &&
+            'fixed' !== position &&
+            'sticky' !== position) {
             element.style.position = 'relative';
         }
         let dirty = false;

package/es/utils/modules.js

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

package/es/utils/promise.js

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

package/es/utils/random.js

@@ -0,0 +1,14 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.13.0
+ * Released under the MIT license.
+ */
+
+export function random(min, max) {
+    const realMin = min < max ? min : max;
+    const realMax = min < max ? max : min;
+    return realMin + Math.random() * (realMax - realMin);
+}
+
+        

package/es/utils/range.js

@@ -0,0 +1,12 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.13.0
+ * Released under the MIT license.
+ */
+
+export function range(count) {
+    return Array.from({ length: count }, (_, i) => i);
+}
+
+        

package/es/utils/react/Slots.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -11,26 +11,21 @@ import { mergeProps } from './mergeProps';
 const INITIAL_VALUE = {};
 let SlotContext = createContext(INITIAL_VALUE);
 export function useSlotProps(props, defaultSlot) {
-    var _a;
     let slot = props.slot || defaultSlot;
-    let allSlots = (_a = useContext(SlotContext)) !== null && _a !== void 0 ? _a : INITIAL_VALUE;
+    let allSlots = useContext(SlotContext) ?? INITIAL_VALUE;
     let slotProps = allSlots[slot];
     return mergeProps(slotProps, props);
 }
 export function SlotProvider(props) {
-    var _a;
-    let parentSlots = (_a = useContext(SlotContext)) !== null && _a !== void 0 ? _a : INITIAL_VALUE;
+    let parentSlots = useContext(SlotContext) ?? INITIAL_VALUE;
     let { slots = {}, children } = props;
     // Merge props for each slot from parent context and props
     let value = useMemo(() => Object.keys(parentSlots)
         .concat(Object.keys(slots))
-        .reduce((o, p) => {
-        var _a, _b;
-        return ({
-            ...o,
-            [p]: mergeProps((_a = parentSlots[p]) !== null && _a !== void 0 ? _a : {}, (_b = slots[p]) !== null && _b !== void 0 ? _b : {}),
-        });
-    }, {}), [parentSlots, slots]);
+        .reduce((o, p) => ({
+        ...o,
+        [p]: mergeProps(parentSlots[p] ?? {}, slots[p] ?? {}),
+    }), {}), [parentSlots, slots]);
     return _jsx(SlotContext.Provider, { value: value, children: children }, void 0);
 }
 export function ClearSlots(props) {

package/es/utils/react/chain.js

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

package/es/utils/react/index.js

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

package/es/utils/react/interactions.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.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.12.6
+ * @cube-dev/ui-kit v0.13.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.12.6
+ * @cube-dev/ui-kit v0.13.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.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -40,8 +40,8 @@ export function mergeProps(...args) {
                 typeof props.styles === 'object') {
                 result[key] = mergeStyles(result[key], props[key]);
             }
-            else if (key === 'id' && result.id && (props === null || props === void 0 ? void 0 : props.id)) {
-                result.id = mergeIds(result.id, props === null || props === void 0 ? void 0 : props.id);
+            else if (key === 'id' && result.id && props?.id) {
+                result.id = mergeIds(result.id, props?.id);
                 // Override others
             }
             else {

package/es/utils/react/nullableValue.js

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

package/es/utils/react/useLayoutEffect.js

@@ -1,14 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
 import * as React from 'react';
 // During SSR, React emits a warning when calling useLayoutEffect.
 // Since neither useLayoutEffect nor useEffect run on the server,
-// we can suppress this by replace it with a noop on the server.
+// we can suppress this by replacing it with a noop on the server.
 export const useLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
         

package/es/utils/react/wrapNodeIfPlain.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.12.6",
+  "version": "0.13.0",
   "description": "UIKit for Cube Projects",
   "keywords": [
     "uikit"
@@ -22,7 +22,7 @@
     "@react-aria/i18n": "^3.3.4",
     "@react-aria/interactions": "^3.7.0",
     "@react-aria/listbox": "^3.5.0",
-    "@react-aria/menu": "3.4.3",
+    "@react-aria/menu": "3.6.1",
     "@react-aria/numberfield": "^3.1.1",
     "@react-aria/overlays": "^3.7.5",
     "@react-aria/radio": "^3.1.6",
@@ -41,6 +41,7 @@
     "@react-stately/collections": "^3.3.4",
     "@react-stately/combobox": "3.0.1",
     "@react-stately/list": "^3.5.1",
+    "@react-stately/menu": "3.4.1",
     "@react-stately/numberfield": "^3.0.2",
     "@react-stately/overlays": "^3.1.6",
     "@react-stately/radio": "^3.3.2",
@@ -49,13 +50,12 @@
     "@react-stately/toggle": "^3.2.3",
     "@react-stately/tooltip": "^3.0.8",
     "@react-stately/tree": "^3.3.1",
-    "@react-stately/menu": "^3.3.1",
     "@react-stately/utils": "^3.5.0",
     "@react-types/button": "^3.4.1",
     "@react-types/checkbox": "^3.2.5",
     "@react-types/combobox": "^3.2.1",
     "@react-types/dialog": "^3.3.4",
-    "@react-types/menu": "^3.5.2",
+    "@react-types/menu": "3.7.1",
     "@react-types/numberfield": "^3.1.3",
     "@react-types/overlays": "^3.5.5",
     "@react-types/radio": "^3.1.2",

package/types/components/forms/Form/Form.d.ts

@@ -10,13 +10,11 @@ export interface CubeFormProps<T extends FieldTypes = FieldTypes> extends FormBa
     /** Form name */
     name?: string;
     /** Default field values */
-    defaultValues?: {
-        [K in keyof T]?: T[K];
-    };
+    defaultValues?: Partial<T>;
     /** Trigger when any value of Field changed */
-    onValuesChange?: (data: CubeFormData<T>) => void | Promise<void>;
+    onValuesChange?: CubeFormInstance<T>['onValuesChange'];
     /** Trigger when form submit and success */
-    onSubmit?: (data: CubeFormData<T>) => void | Promise<void>;
+    onSubmit?: CubeFormInstance<T>['onSubmit'];
     /** Trigger when form submit and failed */
     onSubmitFailed?: (any?: any) => void | Promise<any>;
     /** Set form instance created by useForm */

package/types/components/overlays/NewNotifications/Bar/FloatingNotification.d.ts

@@ -9,4 +9,7 @@ export declare type FloatingNotificationProps = {
     item: NotificationItemNode<CubeNotifyApiPropsWithID>;
     state: NotificationsListState<CubeNotifyApiPropsWithID>;
 };
+/**
+ * @internal This component is unstable and must not be used outside of `NotificationsBar`.
+ */
 export declare const FloatingNotification: import("react").NamedExoticComponent<FloatingNotificationProps>;

package/types/components/overlays/NewNotifications/Bar/NotificationsBar.d.ts

@@ -6,7 +6,15 @@ export declare type NotificationsBarProps = {
     children: CollectionChildren<CubeNotifyApiPropsWithID>;
     onRemoveNotification: (id: Key) => void;
     onDismissNotification: (id: Key) => void;
+    /**
+     * Defines the amount of notifications that can be displayed at once.
+     * @default 5
+     */
+    limit?: number;
 };
+/**
+ * @internal Do not use it
+ */
 export declare function NotificationsBar(props: NotificationsBarProps): JSX.Element;
 export declare namespace NotificationsBar {
     var Item: (props: CubeNotifyApiPropsWithID) => null;

package/types/components/overlays/NewNotifications/Notification.d.ts

@@ -8,6 +8,9 @@ export declare type NotificationProps = {
      */
     disableRemoveOnUnmount?: boolean;
 } & CubeNotifyApiProps;
+/**
+ * Declarative wrap over the `useNotificationsApi` hook
+ */
 export declare function Notification(props: NotificationProps): null;
 export declare namespace Notification {
     var Success: (props: NotificationProps) => JSX.Element;

package/types/components/overlays/NewNotifications/NotificationView/NotificationAction.d.ts

@@ -7,4 +7,7 @@ export declare type NotificationActionProps = PropsWithChildren<{
      */
     disableCloseOnAction?: boolean;
 }> & Omit<CubeButtonProps, 'type' | 'size' | 'mods'>;
+/**
+ * @internal This component is unstable and must not be used outside of `NotificationView`.
+ */
 export declare function NotificationAction(props: NotificationActionProps): JSX.Element;

package/types/components/overlays/NewNotifications/NotificationView/NotificationCloseButton.d.ts

@@ -1,7 +1,5 @@
 /// <reference types="react" />
 export declare type NotificationCloseButtonProps = {
     onPress: () => void;
-    isHovered: boolean;
-    isFocused: boolean;
 };
 export declare const NotificationCloseButton: import("react").NamedExoticComponent<NotificationCloseButtonProps>;

package/types/components/overlays/NewNotifications/NotificationView/NotificationDescription.d.ts

@@ -3,6 +3,9 @@ import { NotificationProps } from './types';
 export declare type NotificationDescriptionProps = {
     description: NotificationProps['description'];
 } & HTMLAttributes<HTMLElement>;
+/**
+ * @internal This component is unstable and must not be used outside of `NotificationView`.
+ */
 export declare const NotificationDescription: import("react").NamedExoticComponent<{
     description: NotificationProps['description'];
 } & HTMLAttributes<HTMLElement>>;

package/types/components/overlays/NewNotifications/NotificationView/NotificationFooter.d.ts

@@ -6,5 +6,8 @@ interface NotificationFooterProps {
     onClose: () => void;
     onDismiss: () => void;
 }
+/**
+ * @internal This component is unstable and must not be used outside of `NotificationView`.
+ */
 export declare const NotificationFooter: React.NamedExoticComponent<NotificationFooterProps>;
 export {};

package/types/components/overlays/NewNotifications/NotificationView/NotificationHeader.d.ts

@@ -3,6 +3,9 @@ import { NotificationProps } from './types';
 export declare type NotificationHeaderProps = {
     header: NotificationProps['header'];
 } & HTMLAttributes<HTMLElement>;
+/**
+ * @internal This component is unstable and must not be used outside of `NotificationView`.
+ */
 export declare const NotificationHeader: import("react").NamedExoticComponent<{
     header: NotificationProps['header'];
 } & HTMLAttributes<HTMLElement>>;

package/types/components/overlays/NewNotifications/NotificationView/NotificationIcon.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="react" />
 import { NotificationIconProps } from './types';
+/**
+ * @internal This component is unstable and must not be used outside of `NotificationView`.
+ */
 export declare const NotificationIcon: import("react").NamedExoticComponent<NotificationIconProps>;

package/types/components/overlays/NewNotifications/NotificationView/NotificationProvider.d.ts

@@ -2,6 +2,9 @@ import { PropsWithChildren } from 'react';
 interface NotificationContextType {
     onClose?: () => void;
 }
+/**
+ * @internal This component is unstable and must not be used outside of `NotificationView`.
+ */
 export declare function NotificationProvider(props: PropsWithChildren<NotificationContextType>): JSX.Element;
 export declare function useNotificationContext(): NotificationContextType;
 export {};

package/types/components/overlays/NewNotifications/NotificationView/NotificationView.d.ts

@@ -1,4 +1,7 @@
 /// <reference types="react" />
+/**
+ * @internal This component is unstable and is a subject to change.
+ */
 export declare const NotificationView: import("react").ForwardRefExoticComponent<{
     qa?: string | undefined;
     attributes?: import("react").HTMLAttributes<HTMLDivElement> | undefined;

package/types/components/overlays/NewNotifications/NotificationsContext/use-notifications.d.ts

@@ -2,7 +2,7 @@ import { Key, RefObject } from 'react';
 import { CubeNotificationsApi, CubeNotifyApiPropsWithID } from '../types';
 export declare function useNotifications(rootRef: RefObject<HTMLElement | null> | null): {
     readonly api: CubeNotificationsApi;
-    readonly toasts: CubeNotifyApiPropsWithID[];
+    readonly notifications: CubeNotifyApiPropsWithID[];
     readonly onDismissNotification: (id: Key) => void;
     readonly addOnDismissListener: (listener: (notification: CubeNotifyApiPropsWithID) => void) => () => void | undefined;
 };

package/types/components/overlays/NewNotifications/NotificationsList/NotificationsList.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import type { NotificationsListProps } from './types';
+/**
+ * Provides ability to show notifications as a list.
+ *
+ * @example
+ *   <NotificationsList>
+ *     <NotificationsList.Item key="id_1" type="success" description="Edit and test your schema without affecting the production." />
+ *     <NotificationsList.Item key="id_2" type="attention" description="Edit and test your schema without affecting the production." />
+ *     <NotificationsList.Item key="id_3" type="danger" description="Edit and test your schema without affecting the production." />
+ *   </NotificationsList>
+ *
+ * @example Removing a notification
+ *   <NotificationsList onDismiss={(id) => removeNotification(id)}>
+ *     <NotificationsList.Item key="id_1" type="success" description="Edit and test your schema without affecting the production." />
+ *   </NotificationsList>
+ */
+export declare function NotificationsList<T extends object>(props: NotificationsListProps<T>): JSX.Element;
+export declare namespace NotificationsList {
+    var Item: (props: Omit<import("../types").BaseNotificationProps, "onDismiss">) => null;
+}

package/types/components/overlays/NewNotifications/NotificationsList/NotificationsListItem.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { NotificationListItemProps } from './types';
+/**
+ * @internal This component is not intended to be used
+ */
+export declare function NotificationListItem(props: NotificationListItemProps): JSX.Element;