@cube-dev/ui-kit 0.0.0-canary-a6187c8 → 0.0.0-canary-521eedd

package/es/_internal/hooks/index.js

@@ -1,18 +1,18 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 
-export * from './use-deprecation-warning.js';
-export * from './use-event.js';
-export * from './use-sync-ref.js';
-export * from './use-chained-callback.js';
-export * from './use-timer/index.js';
-export * from './use-effect-once.js';
-export * from './use-warn.js';
-export * from './use-is-first-render.js';
-export * from './use-debounced-value.js';
+export * from './use-deprecation-warning';
+export * from './use-event';
+export * from './use-sync-ref';
+export * from './use-chained-callback';
+export * from './use-timer';
+export * from './use-effect-once';
+export * from './use-warn';
+export * from './use-is-first-render';
+export * from './use-debounced-value';
 
         

package/es/_internal/hooks/use-chained-callback.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 
-import { useEvent } from './use-event.js';
+import { useEvent } from './use-event';
 export function useChainedCallback(...callbacks) {
     return useEvent((...args) => {
         callbacks.forEach((callback) => {

package/es/_internal/hooks/use-debounced-value.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-deprecation-warning.js

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 
 import React, { useEffect } from 'react';
-import { deprecationWarning } from '../../utils/warnings.js';
+import { deprecationWarning } from '../../utils/warnings';
 export function useDeprecationWarning(...args) {
     const didWarn = React.useRef(false);
     useEffect(() => {

package/es/_internal/hooks/use-effect-once.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-event.js

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 
 import { useCallback } from 'react';
-import { useSyncRef } from './use-sync-ref.js';
+import { useSyncRef } from './use-sync-ref';
 /**
  * useEvent shim from the latest React RFC.
  *

package/es/_internal/hooks/use-is-first-render.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-sync-ref.js

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 
 import { useRef } from 'react';
-import { useLayoutEffect } from '../../utils/react/index.js';
+import { useLayoutEffect } from '../../utils/react';
 export function useSyncRef(value) {
     const ref = useRef(value);
     useLayoutEffect(() => {

package/es/_internal/hooks/use-timer/index.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 
-export * from './timer.js';
-export * from './use-timer.js';
+export * from './timer';
+export * from './use-timer';
 
         

package/es/_internal/hooks/use-timer/timer.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 

package/es/_internal/hooks/use-timer/use-timer.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 
 import { useEffect, useState } from 'react';
-import { useEvent } from '../use-event.js';
-import { Timer } from './timer.js';
+import { useEvent } from '../use-event';
+import { Timer } from './timer';
 export function useTimer(props = {}) {
     const { callback, delay, isDisabled, timer: propsTimer = null } = props;
     const callbackEvent = useEvent(() => callback?.());

package/es/_internal/hooks/use-update-effect.js

@@ -1,12 +1,12 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 
 import { useEffect } from 'react';
-import { useIsFirstRender } from './use-is-first-render.js';
+import { useIsFirstRender } from './use-is-first-render';
 export function useUpdateEffect(effect, deps) {
     const isFirst = useIsFirstRender();
     useEffect(() => {

package/es/_internal/hooks/use-warn.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 
 import { useRef } from 'react';
-import { warn } from '../../utils/warnings.js';
-import { useEvent } from './use-event.js';
+import { warn } from '../../utils/warnings';
+import { useEvent } from './use-event';
 const GLOBAL_WARNED = new Set();
 export function useWarn(condition, params) {
     const { once = true, key, args } = params;

package/es/_internal/index.js

@@ -1,10 +1,10 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 
-export * from './hooks/index.js';
+export * from './hooks';
 
         

package/es/components/Block.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../tasty/index.js';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../tasty';
 const BlockElement = tasty({
     styles: {
         display: 'block',

package/es/components/CollectionItem.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 
 import { Item } from 'react-stately';
-import { ItemAction } from './actions/ItemAction/index.js';
-import { ItemBadge } from './content/ItemBadge/index.js';
+import { ItemAction } from './actions/ItemAction';
+import { ItemBadge } from './content/ItemBadge';
 /**
  * Service props that are used by react-stately or parent components
  * and should not be passed to the Item component.

package/es/components/GlobalStyles.js

@@ -1,36 +1,65 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 
-import { useMemo } from 'react';
-import { useGlobalStyles, useRawCSS } from '../tasty/index.js';
-import { TOKENS } from '../tokens/index.js';
-/**
- * Body styles applied via useGlobalStyles.
- * These use tasty syntax and get processed correctly.
- */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createGlobalStyle } from '../tasty';
+import { TOKENS } from '../tokens';
 const BODY_STYLES = {
-    overscrollBehaviorY: 'none',
-    fill: '#white',
-    fontFamily: 'var(--font)',
+    'overscroll-behavior-y': 'none',
+    'background-color': 'white !important',
+    'font-family': 'var(--font)',
     '-webkit-font-smoothing': 'antialiased',
     '-moz-osx-font-smoothing': 'grayscale',
-    margin: 0,
-    padding: 0,
-    color: '#dark-02',
-    preset: 't3',
-    letterSpacing: '0.02em',
+    margin: '0',
+    padding: '0',
+    color: 'var(--dark-02-color)',
+    'font-size': '14px',
+    'line-height': '20px',
+    'letter-spacing': '0.02em',
+    'font-weight': '400',
 };
-// Static CSS that doesn't depend on props
-const STATIC_CSS = `
+const GlobalStylesElement = createGlobalStyle `
+  body {
+    ${({ $applyLegacyTokens }) => {
+    return $applyLegacyTokens
+        ? Object.entries(TOKENS)
+            .map(([key, value]) => {
+            // `inherit` value in custom property is reserved for inheritance behavior
+            if (value === 'inherit') {
+                // so we should rewrite it to contain the actual `inherit` value.
+                value = `var(--non-existent-${key}, inherit)`;
+            }
+            return `--${key}: ${value};`;
+        })
+            .join('\n    ')
+        : '';
+}}
+    ${({ $bodyStyles }) => {
+    return Object.entries({ ...BODY_STYLES, ...$bodyStyles })
+        .map(([key, value]) => {
+        return `${key}: ${value};`;
+    })
+        .join('\n    ');
+}}
+  }
+
   @font-face {
     font-family: text-security-disc;
     src: url(data:font/woff2;base64,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) format('woff2');
   }
 
+  html {
+    overscroll-behavior-y: none;
+    --font: ${({ $font }) => $font
+    ? `${$font}, `
+    : ''}-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    --monospace-font: ${({ $monospaceFont }) => `${$monospaceFont ? `${$monospaceFont}, ` : ''}Menlo, Monaco, Consolas, 'Courier New', monospace;`}
+  }
+
   kbd {
     font-family: var(--c2-font-family);
     font-weight: var(--c2-font-weight);
@@ -94,10 +123,10 @@ const STATIC_CSS = `
     margin-bottom: 8px;
     transform: translate(0, 0);
     transition: all 300ms ease-in;
-  }
 
-  .cube-notification-enter-active > * {
-    margin-bottom: 0px;
+    & > * {
+      margin-bottom: 0px;
+    }
   }
 
   .cube-notification-exit {
@@ -113,10 +142,10 @@ const STATIC_CSS = `
     margin-bottom: 0px;
     transform: translate(100%, 0);
     transition: all 300ms ease-in;
-  }
 
-  .cube-notification-exit-active > * {
-    margin-bottom: 0px;
+    & > * {
+      margin-bottom: 0px;
+    }
   }
 
   b, strong {
@@ -131,7 +160,9 @@ const STATIC_CSS = `
     font-family: var(--monospace-font);
   }
 
-  /* Prism Code */
+  
+
+  // Prism Code
   code[class*="language-"],
   pre[class*="language-"] {
     color: var(--dark-color);
@@ -204,7 +235,7 @@ const STATIC_CSS = `
 
   .token.deleted-sign {
     background-color: #ffeef0;
-    color: var(--danger-color);
+    color: (--danger-color);
   }
 
   .token.deleted {
@@ -289,36 +320,14 @@ const STATIC_CSS = `
     cursor: help;
   }
 `;
-export function GlobalStyles(props) {
-    const { bodyStyles, font, monospaceFont } = props;
-    // Merge token styles with body styles
-    const bodyTokenStyles = useMemo(() => {
-        // Start with design tokens
-        const styles = { ...TOKENS };
-        // Add base body styles
-        Object.assign(styles, BODY_STYLES);
-        // Override with custom body styles if provided
-        // Keys are passed through as-is (tasty handles both camelCase and kebab-case)
-        if (bodyStyles) {
-            Object.assign(styles, bodyStyles);
+export const GlobalStyles = (props) => {
+    const newProps = {};
+    Object.entries(props).forEach(([key, value]) => {
+        if (value !== undefined) {
+            newProps[`$${key}`] = value;
         }
-        return styles;
-    }, [bodyStyles]);
-    // Apply tokens and body styles via useGlobalStyles
-    useGlobalStyles('body', bodyTokenStyles);
-    // Apply static CSS and font definitions via useRawCSS
-    useRawCSS(() => {
-        const fontValue = font ? `${font}, ` : '';
-        const monospaceFontValue = monospaceFont ? `${monospaceFont}, ` : '';
-        return `
-  html {
-    overscroll-behavior-y: none;
-    --font: ${fontValue}-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-    --monospace-font: ${monospaceFontValue}Menlo, Monaco, Consolas, 'Courier New', monospace;
-  }
-${STATIC_CSS}`;
-    }, [font, monospaceFont]);
-    return null;
-}
+    });
+    return _jsx(GlobalStylesElement, { ...newProps });
+};
 
         

package/es/components/GridProvider.js

@@ -1,14 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useState } from 'react';
-import { filterBaseProps, tasty } from '../tasty/index.js';
-import { useCombinedRefs } from '../utils/react/index.js';
+import { filterBaseProps, tasty } from '../tasty';
+import { useCombinedRefs } from '../utils/react';
 const GridElement = tasty({
     styles: {
         display: 'contents',
@@ -36,7 +36,7 @@ export const GridProvider = forwardRef(function GridProvider(props, outerRef) {
         if (!el)
             return;
         let sensor;
-        import('../utils/ResizeSensor.js')
+        import('../utils/ResizeSensor')
             .then((module) => module.ResizeSensor)
             .then((ResizeSensor) => {
             sensor = new ResizeSensor(el, resizeCallback);

package/es/components/HiddenInput.js

@@ -1,11 +1,11 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 
-import { tasty } from '../tasty/index.js';
+import { tasty } from '../tasty';
 export const HiddenInput = tasty({
     as: 'input',
     styles: {

package/es/components/OpenTrasition.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 

package/es/components/Root.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 
@@ -9,42 +9,83 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { ModalProvider } from 'react-aria';
 import { StyleSheetManager } from 'styled-components';
-import { Provider } from '../provider.js';
-import { TrackingProvider } from '../providers/TrackingProvider.js';
-import { BASE_STYLES, BLOCK_STYLES, extractStyles, filterBaseProps, tasty, } from '../tasty/index.js';
-import { EventBusProvider } from '../utils/react/useEventBus.js';
-import { VERSION } from '../version.js';
-import { GlobalStyles } from './GlobalStyles.js';
-import { AlertDialogApiProvider } from './overlays/AlertDialog/index.js';
-import { NotificationsProvider } from './overlays/NewNotifications/NotificationsContext/NotificationsProvider.js';
-import { PortalProvider } from './portal/index.js';
+import { Provider } from '../provider';
+import { TrackingProvider } from '../providers/TrackingProvider';
+import { BASE_STYLES, BLOCK_STYLES, extractStyles, filterBaseProps, tasty, } from '../tasty';
+import { TOKENS } from '../tokens';
+import { useViewportSize } from '../utils/react';
+import { EventBusProvider } from '../utils/react/useEventBus';
+import { VERSION } from '../version';
+import { GlobalStyles } from './GlobalStyles';
+import { AlertDialogApiProvider } from './overlays/AlertDialog';
+import { NotificationsProvider } from './overlays/NewNotifications/NotificationsContext/NotificationsProvider';
+import { PortalProvider } from './portal';
 const RootElement = tasty({
     id: 'cube-ui-kit-root',
-    styles: {
-        display: 'contents',
-        color: '#dark-02',
-        preset: 't3',
-    },
 });
+const DEFAULT_STYLES = {
+    display: 'block',
+    preset: 't3',
+    ...Object.keys(TOKENS).reduce((map, key) => {
+        map[`$${key}`] = TOKENS[key];
+        return map;
+    }, {}),
+};
 const STYLES = [...BASE_STYLES, ...BLOCK_STYLES];
+const IS_DVH_SUPPORTED = typeof CSS !== 'undefined' && typeof CSS?.supports === 'function'
+    ? CSS.supports('height: 100dvh')
+    : false;
 export function Root(allProps) {
     let { children, 
     /** Raw css styles for body element */
-    bodyStyles, fontDisplay = 'swap', fonts, publicUrl, navigation, font, monospaceFont, applyLegacyTokens: _applyLegacyTokens, // deprecated, ignored
-    tracking, cursorStrategy = 'web', style, tokens, ...props } = allProps;
+    bodyStyles, breakpoints = [980], fontDisplay = 'swap', fonts, publicUrl, navigation, font, monospaceFont, applyLegacyTokens, tracking, cursorStrategy = 'web', style, ...props } = allProps;
     const ref = useRef(null);
     const [rootRef, setRootRef] = useState();
+    // We need to measure the window's height in JS rather than using percentages in CSS
+    // so that contents (e.g. menu) can inherit the max-height properly. Using percentages
+    // does not work properly because there is nothing to base the percentage on.
+    // We cannot use vh units because mobile browsers adjust the window height dynamically
+    // when the address bar/bottom toolbars show and hide on scroll and vh units are fixed.
+    // Also, the visual viewport is smaller than the layout viewport when the virtual keyboard
+    // is up, so use the VisualViewport API to ensure the tray is displayed above the keyboard.
+    let viewport = useViewportSize({ isDisabled: IS_DVH_SUPPORTED });
+    let [height, setHeight] = useState(IS_DVH_SUPPORTED ? undefined : viewport.height);
+    let timeoutRef = useRef(null);
+    useEffect(() => {
+        if (IS_DVH_SUPPORTED && typeof window !== 'undefined') {
+            return;
+        }
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        // When the height is decreasing, and the keyboard is visible
+        // (visual viewport smaller than layout viewport), delay setting
+        // the new max height until after the animation is complete
+        // so that there isn't an empty space under the tray briefly.
+        if (viewport.height < (height || 0) &&
+            viewport.height < window.innerHeight) {
+            timeoutRef.current = setTimeout(() => {
+                setHeight(viewport.height);
+            }, 500);
+        }
+        else {
+            setHeight(viewport.height);
+        }
+    }, [height, viewport.height]);
     useEffect(() => {
         if (!rootRef) {
             // @ts-ignore
             setRootRef(ref?.current);
         }
     }, []);
-    const styles = extractStyles(props, STYLES);
-    return (_jsx(Provider, { navigation: navigation, root: rootRef, children: _jsx(TrackingProvider, { event: tracking?.event, children: _jsx(StyleSheetManager, { children: _jsxs(RootElement, { ref: ref, "data-tasty": VERSION, "data-font-display": fontDisplay, ...filterBaseProps(props, { eventProps: true }), styles: styles, style: {
+    const styles = extractStyles(props, STYLES, DEFAULT_STYLES);
+    return (_jsx(Provider, { navigation: navigation, root: rootRef, breakpoints: breakpoints, children: _jsx(TrackingProvider, { event: tracking?.event, children: _jsx(StyleSheetManager, { children: _jsxs(RootElement, { ref: ref, "data-tasty": VERSION, "data-font-display": fontDisplay, ...filterBaseProps(props, { eventProps: true }), styles: styles, style: {
+                        '--cube-dynamic-viewport-height': height
+                            ? height + 'px'
+                            : '100dvh',
                         '--pointer': cursorStrategy === 'web' ? 'pointer' : 'default',
                         ...style,
-                    }, tokens: tokens, children: [_jsx(GlobalStyles, { bodyStyles: bodyStyles, publicUrl: publicUrl, fonts: fonts, font: font, monospaceFont: monospaceFont, fontDisplay: fontDisplay }), _jsx(ModalProvider, { children: _jsx(PortalProvider, { value: ref, children: _jsx(EventBusProvider, { children: _jsx(NotificationsProvider, { rootRef: ref, children: _jsx(AlertDialogApiProvider, { children: children }) }) }) }) })] }) }) }) }));
+                    }, children: [_jsx(GlobalStyles, { bodyStyles: bodyStyles, applyLegacyTokens: applyLegacyTokens, publicUrl: publicUrl, fonts: fonts, font: font, monospaceFont: monospaceFont, fontDisplay: fontDisplay }), _jsx(ModalProvider, { children: _jsx(PortalProvider, { value: ref, children: _jsx(EventBusProvider, { children: _jsx(NotificationsProvider, { rootRef: ref, children: _jsx(AlertDialogApiProvider, { children: children }) }) }) }) })] }) }) }) }));
 }
 
         

package/es/components/actions/Action/Action.js

@@ -1,14 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-a6187c8
+ * @cube-dev/ui-kit v0.0.0-canary-521eedd
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
-import { CONTAINER_STYLES, extractStyles, tasty, TEXT_STYLES, } from '../../../tasty/index.js';
-import { useAction } from '../use-action.js';
+import { CONTAINER_STYLES, extractStyles, tasty, TEXT_STYLES, } from '../../../tasty';
+import { useAction } from '../use-action';
 const ActionElement = tasty({
     as: 'button',
     styles: {