@cube-dev/ui-kit 0.0.0-canary-2573082 → 0.0.0-canary-d5d9d5d

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @cube-dev/ui-kit
 
+## 0.98.8
+
+### Patch Changes
+
+- [#942](https://github.com/cube-js/cube-ui-kit/pull/942) [`f5a5b05c`](https://github.com/cube-js/cube-ui-kit/commit/f5a5b05c669ba3548a68b9b1bcfcd4777f36119d) Thanks [@tenphi](https://github.com/tenphi)! - Fix Dialog focus management to ensure Escape key works reliably when dialog opens and focus properly returns to the trigger when dialog closes. Focus now properly falls back to the first tabbable element or the dialog element itself if no priority focusable element is found. Replaced react-focus-lock with React Aria's FocusScope for better focus restoration behavior.
+
 ## 0.98.7
 
 ### Patch Changes

package/es/_internal/hooks/index.js

@@ -1,18 +1,18 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2573082
+ * @cube-dev/ui-kit v0.0.0-canary-d5d9d5d
  * Released under the MIT license.
  */
 
-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';
+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';
 
         

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-2573082
+ * @cube-dev/ui-kit v0.0.0-canary-d5d9d5d
  * Released under the MIT license.
  */
 
-import { useEvent } from './use-event';
+import { useEvent } from './use-event.js';
 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-2573082
+ * @cube-dev/ui-kit v0.0.0-canary-d5d9d5d
  * 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-2573082
+ * @cube-dev/ui-kit v0.0.0-canary-d5d9d5d
  * Released under the MIT license.
  */
 
 import React, { useEffect } from 'react';
-import { deprecationWarning } from '../../utils/warnings';
+import { deprecationWarning } from '../../utils/warnings.js';
 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-2573082
+ * @cube-dev/ui-kit v0.0.0-canary-d5d9d5d
  * 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-2573082
+ * @cube-dev/ui-kit v0.0.0-canary-d5d9d5d
  * Released under the MIT license.
  */
 
 import { useCallback } from 'react';
-import { useSyncRef } from './use-sync-ref';
+import { useSyncRef } from './use-sync-ref.js';
 /**
  * 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-2573082
+ * @cube-dev/ui-kit v0.0.0-canary-d5d9d5d
  * 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-2573082
+ * @cube-dev/ui-kit v0.0.0-canary-d5d9d5d
  * Released under the MIT license.
  */
 
 import { useRef } from 'react';
-import { useLayoutEffect } from '../../utils/react';
+import { useLayoutEffect } from '../../utils/react/index.js';
 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-2573082
+ * @cube-dev/ui-kit v0.0.0-canary-d5d9d5d
  * Released under the MIT license.
  */
 
-export * from './timer';
-export * from './use-timer';
+export * from './timer.js';
+export * from './use-timer.js';
 
         

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-2573082
+ * @cube-dev/ui-kit v0.0.0-canary-d5d9d5d
  * 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-2573082
+ * @cube-dev/ui-kit v0.0.0-canary-d5d9d5d
  * Released under the MIT license.
  */
 
 import { useEffect, useState } from 'react';
-import { useEvent } from '../use-event';
-import { Timer } from './timer';
+import { useEvent } from '../use-event.js';
+import { Timer } from './timer.js';
 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-2573082
+ * @cube-dev/ui-kit v0.0.0-canary-d5d9d5d
  * Released under the MIT license.
  */
 
 import { useEffect } from 'react';
-import { useIsFirstRender } from './use-is-first-render';
+import { useIsFirstRender } from './use-is-first-render.js';
 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-2573082
+ * @cube-dev/ui-kit v0.0.0-canary-d5d9d5d
  * Released under the MIT license.
  */
 
 import { useRef } from 'react';
-import { warn } from '../../utils/warnings';
-import { useEvent } from './use-event';
+import { warn } from '../../utils/warnings.js';
+import { useEvent } from './use-event.js';
 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-2573082
+ * @cube-dev/ui-kit v0.0.0-canary-d5d9d5d
  * Released under the MIT license.
  */
 
-export * from './hooks';
+export * from './hooks/index.js';
 
         

package/es/components/Block.js

@@ -1,13 +1,13 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2573082
+ * @cube-dev/ui-kit v0.0.0-canary-d5d9d5d
  * 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';
+import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../tasty/index.js';
 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-2573082
+ * @cube-dev/ui-kit v0.0.0-canary-d5d9d5d
  * Released under the MIT license.
  */
 
 import { Item } from 'react-stately';
-import { ItemAction } from './actions/ItemAction';
-import { ItemBadge } from './content/ItemBadge';
+import { ItemAction } from './actions/ItemAction/index.js';
+import { ItemBadge } from './content/ItemBadge/index.js';
 /**
  * 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,65 +1,36 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2573082
+ * @cube-dev/ui-kit v0.0.0-canary-d5d9d5d
  * Released under the MIT license.
  */
 
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createGlobalStyle } from '../tasty';
-import { TOKENS } from '../tokens';
+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.
+ */
 const BODY_STYLES = {
-    'overscroll-behavior-y': 'none',
-    'background-color': 'white !important',
-    'font-family': 'var(--font)',
+    overscrollBehaviorY: 'none',
+    fill: '#white',
+    fontFamily: 'var(--font)',
     '-webkit-font-smoothing': 'antialiased',
     '-moz-osx-font-smoothing': 'grayscale',
-    margin: '0',
-    padding: '0',
-    color: 'var(--dark-02-color)',
-    'font-size': '14px',
-    'line-height': '20px',
-    'letter-spacing': '0.02em',
-    'font-weight': '400',
+    margin: 0,
+    padding: 0,
+    color: '#dark-02',
+    preset: 't3',
+    letterSpacing: '0.02em',
 };
-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    ');
-}}
-  }
-
+// Static CSS that doesn't depend on props
+const STATIC_CSS = `
   @font-face {
     font-family: text-security-disc;
     src: url(data:font/woff2;base64,d09GMgABAAAAAAjoAAsAAAAAMGgAAAidAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGVgDWYgpQdQE2AiQDCAsGAAQgBYUOBy4bvi8lYxtWw7BxAPB87x5FmeAMlf3/96RzDN74RcXUcjTKmrJ3T2VDSShiPhfiIJxxS7DiLkHFfQV33CM4427mAred74pWur/J3dyVsKy7coREA8fzvPvpfUk+tB3R8YTCzE0SCLepejmJ2u1yqp+kC7W4Rc/tDTs3GpNJ8ttRPOSTPhsXlwbi4kVYWQmAcXmlrqYHMMsBwP/zHMz7fkF1gijOKuFQIxjwlGa2lkARhYaBxFHT54IOgBMQADi3LipIMAA3geO41EUkBTCO2gkxnOwnKYBx1E6p5WS+QUCMq50rNch6MwUCAAiAcdgttYVSIfPJ5kn6ApRFQ6I88BxLvvIC/maHUHS3TIoKiwLbbM8nEFWgE1oDz3woSxpagWbBXcQWhKtPeIlg6tK+7vX57QOszwU3sGUJrA7h2Mx1IWCNr9BKxsYo+pzS/OCO0OG9mwBkx337+lcuSxRdBcc+fJxlcAjK/zCfdgtBzuxQcTqfY4Yn6EB/Az3JS/RMu5f6B8wrn55S0IxdlLn+4Yb/ctIT+ocWYPcGAOvxSjEjpSiVMqSgFWVjzpCCXjAIRirTABpEQ2gYjaBRNIbG0QSaRFNoGs2gWTSH5tECWkRLaBmtoFW0htbRBtpEW2gb7aBdtIf20QE6REdFDlkZEh2jE3SKztA5ukCX6Apdoxt0i+7QPXpAj+gJPaMX9Ire0Dv6QJ/oC/qKvqHv6Af6iX6h3+gP+ov+of+I+ECMxETMiDmxIJbEilgTG2JL7Ig9cSCOxIk4ExfiStyIO/EgnsSLeBMf4kv8iD/taQANoiE0jEbQKBpD42gCTaIpNI1m0CyaQ/NoAS2iJbSMVtAqWkPraANtoi20jXbQLtpD++gAHaIjdIxO0Ck6Q+foAl2iK3SNbtAtukP36AE9oif0jF7QK3pD79B79AF9RJ/QZ/QFfUXf0Hf0A/1Ev9Bv9Af9Rf/Qf9DQABpEQ2gYjaBRNIbG0QSaRFNoGs2gWTSH5tECWkRLaBmtoFW0htbRBtpEW2gb7aBdtIf20QE6REfoGJ2gU3SGztEFukRX6BrdoFt0h+7RA3pET+gZvaBX9Aa9Re/Qe/QBfUSf0Gf0BX1F39B39AP9RL/Qb/QH/UX/0P8l9vq9gXwDIUCliyAhRAgTIoQoIUaIExKEJCFFSBMyhCwhR8gTCoQioUQoEyqEKqFGqBMahCahRWgTOoQuoUfoEwaEIWFEGBMmhClhRpgTFoQlYUVYEzaELWFH2BMOhGPCCeGUcEY4J1wQLglXhGvCDeGWcEe4JzwQHglPhGfCC+GV8EZ4J3wQPglfhG/CD+GX8Ef4p9sdgoQQIUyIEKKEGCFOSBCShBQhTcgQsoQcIU8oEIqEEqFMqBCqhBqhTmgkNBGaCS2EVkIboZ3QQegkdBG6CT2EXkIfoZ8wQBgkDBGGCSOEUcIYYZwwQZgkTBGmCTOEWcIcYZ6wQFgkLBGWCSuEVcIaYZ2wQdgkbBG2CTuEXcIeYZ9wQDgkHBGOCSeEU8IZ4ZxwQbgkXBGuCTeEW8Id4Z7wQHgkPBGeCS+EV8Ib4Z3wQfgkfBG+CT+EX8If4Z8AZpAQIoQJEUKUECPECQlCkpAipAkZQpaQI+QJBUKRUCKUCRVClVAj1AkNQpPQIrQJHUKX0CP0CQPCkDAijAkTwpQwI8wJC8KSsCKsCRvClrAj7AkHwpFwIpwJF8IV4ZpwQ7gl3BHuCQ+ER8IT4ZnwQnglvBHeCR+ET8IX4ZvwQ/gl/BH+lzv+AmMkTYAmSBOiCdNEaKI0MZo4TYImSZOiSdNkaLI0OZo8TYGmSFOiKdNUaKo0NZo6TYOmSdOiadN0aLo0PZo+zYBmSDOiGdNMaKY0M5o5zYJmSbOiWdNsaLY0O5o9zYHmmOaE5pTmjOac5oLmkuaK5prmhuaW5o7mnuaB5pHmieaZ5oXmleaN5p3mg+aT5ovmm+aH5pfmj2ZRAqCCoEKgwqAioKKgYqDioBKgkqBSoNKgMqCyoHKg8qAKoIqgSqDKoCqgqqBqoOqgGkE1gWoG1QKqFVQbqHZQHaA6QXWB6gbVA6oXVB+oflADoAZBDYH+uxaEWDBiIYiFIhaGWDhiEYhFIhaFWDRiMYjFIhaHWDxiCYglIpaEWDJiKYilIpaGWDpiGYhlIpaFWDZiOYjlIpaHWD5iBYgVIlaEWDFiJYiVIlaGWDliFYhVIlaFWDViNYjVIlaHWD1iDYg1ItaEWDNiLYi1ItaGWDtiHYh1ItaFWDdiPYj1ItaHWD9iA4gNIjaE2DBiI4iNIjaG2DhiE4hNIjaF2DRiM4jNIjaH2DxiC4gtIraE2DJiK4itIraG2DpiG4htIraF2DZiO4jtIraH2D5iB4gdInaE2DFiJ4idInaG2DliF4hdInaF2DViN4jdInaH2D1iD4g9IvaE2DNiL4i9IvaG2DvE3iP2AbGPiH1C7DNiXxD7itg3xL4j9gOxn4j9Quw3Yn8Q+4vYP8T+M6cIDBz9EXfeUHR1JyygPL/++I3R1cRvdDr+E12Jfh3Q0EN/fHn2mXptpJxUkIqu/Cs2egM33OjSLcT33I82+B9nP37X/c0W52623s45CYCo03QIBCVrAFAycnSYSqvO4YJt/NP73YqA/giNZhJ6sBbmql+0SQZaxNOZudJbc2nqxNvpM+veq7Sz2LUgFEu+VLs+Ay3yp7MVertp6i23v2Rmv5gmHDhSQ6t5GmTaqTsqhpWwmbOk3uKJrNOmwSSMC17jghqygilDOUU3KlLmHHNrajw3DVNVGWytGZDisM/cbkdRnvfIUJkaGJlgAYcoQ5bGptTmGc1R7pBC3XhFsLXnXR54qrMc+dGNBkqE4laBi4KmZYGom8vIy0lTyBkppBjLoTndMmrofIRORirsNlCbXzCgulmo36KztS2iV8rrNoRUL5VdkMSGoSXroC1KOQAA) 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);
@@ -123,10 +94,10 @@ const GlobalStylesElement = createGlobalStyle `
     margin-bottom: 8px;
     transform: translate(0, 0);
     transition: all 300ms ease-in;
+  }
 
-    & > * {
-      margin-bottom: 0px;
-    }
+  .cube-notification-enter-active > * {
+    margin-bottom: 0px;
   }
 
   .cube-notification-exit {
@@ -142,10 +113,10 @@ const GlobalStylesElement = createGlobalStyle `
     margin-bottom: 0px;
     transform: translate(100%, 0);
     transition: all 300ms ease-in;
+  }
 
-    & > * {
-      margin-bottom: 0px;
-    }
+  .cube-notification-exit-active > * {
+    margin-bottom: 0px;
   }
 
   b, strong {
@@ -160,9 +131,7 @@ const GlobalStylesElement = createGlobalStyle `
     font-family: var(--monospace-font);
   }
 
-  
-
-  // Prism Code
+  /* Prism Code */
   code[class*="language-"],
   pre[class*="language-"] {
     color: var(--dark-color);
@@ -235,7 +204,7 @@ const GlobalStylesElement = createGlobalStyle `
 
   .token.deleted-sign {
     background-color: #ffeef0;
-    color: (--danger-color);
+    color: var(--danger-color);
   }
 
   .token.deleted {
@@ -320,14 +289,36 @@ const GlobalStylesElement = createGlobalStyle `
     cursor: help;
   }
 `;
-export const GlobalStyles = (props) => {
-    const newProps = {};
-    Object.entries(props).forEach(([key, value]) => {
-        if (value !== undefined) {
-            newProps[`$${key}`] = value;
+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);
         }
-    });
-    return _jsx(GlobalStylesElement, { ...newProps });
-};
+        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;
+}
 
         

package/es/components/GridProvider.js

@@ -1,14 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-2573082
+ * @cube-dev/ui-kit v0.0.0-canary-d5d9d5d
  * 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';
-import { useCombinedRefs } from '../utils/react';
+import { filterBaseProps, tasty } from '../tasty/index.js';
+import { useCombinedRefs } from '../utils/react/index.js';
 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')
+        import('../utils/ResizeSensor.js')
             .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-2573082
+ * @cube-dev/ui-kit v0.0.0-canary-d5d9d5d
  * Released under the MIT license.
  */
 
-import { tasty } from '../tasty';
+import { tasty } from '../tasty/index.js';
 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-2573082
+ * @cube-dev/ui-kit v0.0.0-canary-d5d9d5d
  * 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-2573082
+ * @cube-dev/ui-kit v0.0.0-canary-d5d9d5d
  * Released under the MIT license.
  */
 
@@ -9,83 +9,42 @@ 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';
-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';
+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';
 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, breakpoints = [980], fontDisplay = 'swap', fonts, publicUrl, navigation, font, monospaceFont, applyLegacyTokens, tracking, cursorStrategy = 'web', style, ...props } = allProps;
+    bodyStyles, fontDisplay = 'swap', fonts, publicUrl, navigation, font, monospaceFont, applyLegacyTokens: _applyLegacyTokens, // deprecated, ignored
+    tracking, cursorStrategy = 'web', style, tokens, ...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, 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',
+    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: {
                         '--pointer': cursorStrategy === 'web' ? 'pointer' : 'default',
                         ...style,
-                    }, 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 }) }) }) }) })] }) }) }) }));
+                    }, 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 }) }) }) }) })] }) }) }) }));
 }
 
         

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-2573082
+ * @cube-dev/ui-kit v0.0.0-canary-d5d9d5d
  * 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';
-import { useAction } from '../use-action';
+import { CONTAINER_STYLES, extractStyles, tasty, TEXT_STYLES, } from '../../../tasty/index.js';
+import { useAction } from '../use-action.js';
 const ActionElement = tasty({
     as: 'button',
     styles: {