@cube-dev/ui-kit 0.14.10 → 0.14.12

package/es/components/GridProvider.js

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

package/es/components/HiddenInput.js

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

package/es/components/OpenTrasition.js

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

package/es/components/actions/Action.js

@@ -1,85 +1,19 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.14.10
+ * @cube-dev/ui-kit v0.14.12
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useContext } from 'react';
-import { useHover } from '@react-aria/interactions';
-import { useButton } from '@react-aria/button';
-import { useFocusableRef } from '@react-spectrum/utils';
-import { UIKitContext } from '../../provider';
-import { mergeProps } from '../../utils/react';
-import { useFocus } from '../../utils/react/interactions';
-import { CONTAINER_STYLES, extractStyles, filterBaseProps, TEXT_STYLES, Element, } from '../../tasty';
-const FILTER_OPTIONS = { propNames: new Set(['onMouseEnter', 'onMouseLeave']) };
-/**
- * Helper to open link.
- * @param {String} href
- * @param {String|Boolean} [target]
- */
-export function openLink(href, target) {
-    const link = document.createElement('a');
-    link.href = href;
-    if (target) {
-        link.target = target === true ? '_blank' : target;
-    }
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-}
-export function parseTo(to) {
-    const newTab = to && typeof to === 'string' && to.startsWith('!');
-    const nativeRoute = to && typeof to === 'string' && to.startsWith('@');
-    const href = to && typeof to === 'string'
-        ? newTab || nativeRoute
-            ? to.slice(1)
-            : to
-        : undefined;
-    return {
-        newTab,
-        nativeRoute,
-        href,
-    };
-}
-export function performClickHandler(evt, router, to, onPress) {
-    const { newTab, nativeRoute, href } = parseTo(to);
-    onPress?.(evt);
-    if (!to)
-        return;
-    if (evt.shiftKey || evt.metaKey || newTab) {
-        openLink(href, true);
-        return;
-    }
-    if (nativeRoute) {
-        openLink(href || window.location.href);
-    }
-    else if (href && href.startsWith('#')) {
-        const id = href.slice(1);
-        const element = document.getElementById(id);
-        if (element) {
-            element.scrollIntoView({
-                behavior: 'smooth',
-                block: 'start',
-                inline: 'nearest',
-            });
-            return;
-        }
-    }
-    if (router) {
-        router.push(href);
-    }
-    else if (href) {
-        window.location.href = href;
-    }
-}
-const DEFAULT_STYLES = {
+import { forwardRef } from 'react';
+import { CONTAINER_STYLES, extractStyles, TEXT_STYLES, tasty, } from '../../tasty';
+import { useAction } from './use-action';
+const DEFAULT_ACTION_STYLES = {
     reset: 'button',
     position: 'relative',
     margin: 0,
-    fontFamily: 'var(--font)',
+    preset: 'inherit',
     border: 0,
     padding: 0,
     outline: {
@@ -88,39 +22,18 @@ const DEFAULT_STYLES = {
     },
     transition: 'theme',
     cursor: 'pointer',
+    textDecoration: 'none',
+    fill: '#clear',
 };
+const ActionElement = tasty({
+    as: 'button',
+    styles: DEFAULT_ACTION_STYLES,
+});
 const STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];
 export const Action = forwardRef(function Action({ to, as, htmlType, label, theme, mods, onPress, ...props }, ref) {
-    as = to ? 'a' : as || 'button';
-    const router = useContext(UIKitContext).router;
-    const isDisabled = props.isDisabled;
-    const { newTab, href } = parseTo(to);
-    const target = newTab ? '_blank' : undefined;
-    const domRef = useFocusableRef(ref);
-    const styles = extractStyles(props, STYLE_PROPS, DEFAULT_STYLES);
-    const customOnPress = useCallback((evt) => {
-        performClickHandler(evt, router, to, onPress);
-    }, [router, to, onPress]);
-    let { buttonProps, isPressed } = useButton({
-        ...props,
-        onPress: customOnPress,
-    }, domRef);
-    let { hoverProps, isHovered } = useHover({ isDisabled });
-    let { focusProps, isFocused } = useFocus({ isDisabled }, true);
-    const customProps = to
-        ? {
-            onClick(evt) {
-                evt.preventDefault();
-            },
-        }
-        : {};
-    return (_jsx(Element, { mods: {
-            hovered: isHovered && !isDisabled,
-            pressed: isPressed && !isDisabled,
-            focused: isFocused && !isDisabled,
-            disabled: isDisabled,
-            ...mods,
-        }, "aria-label": label, "data-theme": theme, ...mergeProps(buttonProps, hoverProps, focusProps, customProps, filterBaseProps(props, FILTER_OPTIONS)), ref: domRef, type: htmlType || 'button', rel: as === 'a' && newTab ? 'rel="noopener noreferrer"' : undefined, as: as, isDisabled: isDisabled, styles: styles, target: target, href: href }, void 0));
+    const { actionProps } = useAction({ to, as, htmlType, label, onPress, mods, ...props }, ref);
+    const styles = extractStyles(props, STYLE_PROPS);
+    return _jsx(ActionElement, { "data-theme": theme, ...actionProps, styles: styles }, void 0);
 });
 
         

package/es/components/actions/Button/Button.js

@@ -1,261 +1,230 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.14.10
+ * @cube-dev/ui-kit v0.14.12
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, forwardRef, useMemo } from 'react';
 import { LoadingOutlined } from '@ant-design/icons';
-import { Action } from '../Action';
+import { CONTAINER_STYLES, extractStyles, tasty, TEXT_STYLES, } from '../../../tasty';
 import { accessibilityWarning } from '../../../utils/warnings';
-export function provideButtonStyles({ type, theme }) {
-    return {
-        ...(theme === 'danger' ? DANGER_STYLES_BY_TYPE : DEFAULT_STYLES_BY_TYPE)[type ?? 'secondary'],
-    };
-}
-const DEFAULT_STYLES_BY_TYPE = {
-    primary: {
-        border: {
-            '': '#clear',
-            pressed: '#purple-text',
-        },
-        fill: {
-            hovered: '#purple-text',
-            'pressed | !hovered': '#purple',
-            '[disabled]': '#dark.04',
-        },
-        color: {
-            '': '#white',
-            '[disabled]': '#dark.30',
-        },
+import { useAction } from '../use-action';
+const STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];
+export const DEFAULT_BUTTON_STYLES = {
+    display: 'inline-grid',
+    placeItems: 'center stretch',
+    placeContent: 'center',
+    position: 'relative',
+    margin: 0,
+    outline: {
+        '': '#purple-03.0',
+        focused: '#purple-03',
     },
-    secondary: {
-        border: {
-            '': '#clear',
-            pressed: '#purple.30',
-        },
-        fill: {
-            '': '#purple.10',
-            hovered: '#purple.16',
-            pressed: '#purple.10',
-            '[disabled]': '#dark.04',
-        },
-        color: {
-            '': '#purple',
-            '[disabled]': '#dark.30',
-        },
+    cursor: 'pointer',
+    gap: '1x',
+    flow: 'column',
+    preset: {
+        '': 't3m',
+        '[data-size="large"]': 't2m',
     },
-    clear: {
-        border: {
-            '': '#clear',
-            pressed: '#purple-text.10',
-        },
-        fill: {
-            '': '#purple.0',
-            hovered: '#purple.16',
-            pressed: '#purple.10',
-            '[disabled]': '#purple.0',
-        },
-        color: {
-            '': '#purple-text',
-            '[disabled]': '#dark.30',
-        },
+    textDecoration: 'none',
+    transition: 'theme',
+    reset: 'button',
+    padding: {
+        '': '(1.25x - 1bw) (2x - 1bw)',
+        '[data-size="small"]': '(.75x - 1bw) (1.5x - 1bw)',
+        '[data-size="medium"]': '(1.25x - 1bw) (2x - 1bw)',
+        '[data-size="large"]': '(1.5x - 1bw) (2.5x - 1bw)',
+        'single-icon-only | [data-type="link"]': 0,
     },
-    outline: {
-        border: {
-            '': '#purple.30',
-            pressed: '#purple-text.10',
-            '[disabled]': '#dark.12',
-        },
-        fill: {
-            '': '#purple.0',
-            hovered: '#purple.16',
-            pressed: '#purple.10',
-            '[disabled]': '#purple.0',
-        },
-        color: {
-            '': '#purple-text',
-            '[disabled]': '#dark.30',
-        },
+    width: {
+        '': 'initial',
+        '[data-size="small"] & single-icon-only': '4x 4x',
+        '[data-size="medium"] & single-icon-only': '5x 5x',
+        '[data-size="large"] & single-icon-only': '6x 6x',
     },
-    link: {
-        padding: '0',
-        radius: {
-            '': '0',
-            focused: true,
-        },
-        fill: '#clear',
-        color: {
-            '': '#purple-text',
-            pressed: '#purple',
-            '[disabled]': '#dark.30',
-        },
-        shadow: {
-            '': '0 @border-width 0 0 #purple-03.20',
-            focused: '0 0 0 @outline-width #purple-03.20',
-            'pressed | hovered | [disabled]': '0 0 0 0 #purple.20',
-        },
+    height: {
+        '': 'initial',
+        '[data-size="small"] & single-icon-only': '4x 4x',
+        '[data-size="medium"] & single-icon-only': '5x 5x',
+        '[data-size="large"] & single-icon-only': '6x 6x',
     },
-    neutral: {
-        border: '#clear',
-        fill: {
-            '': '#dark.0',
-            hovered: '#dark.04',
-            pressed: '#purple.10',
-            '[disabled]': '#dark.04',
-        },
-        color: {
-            '': '#dark.75',
-            hovered: '#dark.75',
-            pressed: '#purple',
-            '[disabled]': '#dark.30',
-        },
+    whiteSpace: 'nowrap',
+    radius: {
+        '': true,
+        '[data-type="link"] & !focused': 0,
+    },
+    '& .anticon': {
+        transition: 'display .2s steps(1, start), margin .2s linear, opacity .2s linear',
+    },
+    ButtonIcon: {
+        display: 'grid',
+        fontSize: '@icon-size',
     },
 };
-const DANGER_STYLES_BY_TYPE = {
-    primary: {
+const DefaultButtonElement = tasty({
+    qa: 'Button',
+    'data-theme': 'default',
+    styles: {
+        ...DEFAULT_BUTTON_STYLES,
+        shadow: {
+            '': false,
+            '[data-type="link"]': '0 @border-width 0 0 #purple.20',
+            '[data-type="link"] & (pressed | hovered | [disabled])': '0 0 0 0 #purple.20',
+        },
+        outline: {
+            '': '0 #purple-03.0',
+            focused: '@outline-width #purple-03',
+        },
         border: {
+            // default
             '': '#clear',
-            pressed: '#danger-text',
+            '[data-type="primary"] & pressed': '#purple-text',
+            '[data-type="secondary"] & pressed': '#purple.3',
+            '[data-type="outline"]': '#purple.3',
+            '[data-type="outline"] & [disabled]': '#dark.12',
+            '([data-type="clear"] | [data-type="outline"]) & pressed': '#purple-text.10',
+            '[data-type="link"]': '0',
         },
         fill: {
-            hovered: '#danger-text',
-            'pressed | !hovered': '#danger',
-            '[disabled]': '#dark.04',
+            '': '#clear',
+            '[data-type="primary"]': '#purple',
+            '[data-type="primary"] & pressed': '#purple',
+            '[data-type="primary"] & hovered': '#purple-text',
+            '[data-type="secondary"]': '#purple.10',
+            '[data-type="secondary"] & hovered': '#purple.16',
+            '[data-type="secondary"] & pressed': '#purple-text.10',
+            '[data-type="neutral"]': '#dark.0',
+            '[data-type="neutral"] & hovered': '#dark.04',
+            '[data-type="neutral"] & pressed': '#dark.05',
+            '[disabled] & ![data-type="link"]': '#dark.04',
+            '([data-type="clear"] | [data-type="outline"])': '#purple.0',
+            '([data-type="clear"] | [data-type="outline"]) & hovered': '#purple.16',
+            '([data-type="clear"] | [data-type="outline"]) & pressed': '#purple.10',
+            '([data-type="clear"] | [data-type="outline"]) & [disabled]': '#purple.0',
         },
         color: {
+            // default
             '': '#white',
+            '[data-type="secondary"]': '#purple',
+            '[data-type="clear"] | [data-type="outline"] | [data-type="link"]': '#purple-text',
+            '[data-type="link"] & pressed': '#purple',
+            '[data-type="neutral"]': '#dark.75',
+            '[data-type="neutral"] & hovered': '#dark.75',
+            '[data-type="neutral"] & pressed': '#purple',
+            // other
             '[disabled]': '#dark.30',
         },
     },
-    secondary: {
-        border: {
-            '': '#clear',
-            pressed: '#danger.30',
-        },
-        fill: {
-            '': '#danger.05',
-            hovered: '#danger.1',
-            pressed: '#danger.05',
-            '[disabled]': '#dark.04',
+});
+const DangerButtonElement = tasty({
+    qa: 'Button',
+    'data-theme': 'default',
+    styles: {
+        ...DEFAULT_BUTTON_STYLES,
+        shadow: {
+            '': false,
+            '[data-type="link"]': '0 @border-width 0 0 #danger.20',
+            '[data-type="link"] & (pressed | hovered | [disabled])': '0 0 0 0 #danger.20',
         },
-        color: {
-            '': '#danger',
-            '[disabled]': '#dark.30',
+        outline: {
+            '': '0 #danger.0',
+            focused: '@outline-width #danger.50',
         },
-    },
-    clear: {
         border: {
             '': '#clear',
-            pressed: '#danger-text.10',
+            '[data-type="primary"] & pressed': '#danger-text',
+            '[data-type="secondary"] & pressed': '#danger.3',
+            '[data-type="outline"]': '#danger-text.3',
+            '([data-type="clear"] | [data-type="outline"]) & pressed': '#danger-text.10',
+            '[data-type="outline"] & pressed': '#danger.3',
+            '[data-type="link"]': '#clear',
         },
         fill: {
-            '': '#danger.0',
-            hovered: '#danger.1',
-            pressed: '#danger.05',
-            '[disabled]': '#danger.0',
+            '': '#clear',
+            '[data-type="primary"]': '#danger-text',
+            '[data-type="primary"] & hovered': '#danger-text',
+            '[data-type="primary"] & pressed': '#danger',
+            '[data-type="secondary"]': '#danger.05',
+            '[data-type="secondary"] & hovered': '#danger.1',
+            '[data-type="secondary"] & pressed': '#danger.05',
+            '[data-type="neutral"]': '#dark.0',
+            '[data-type="neutral"] & hovered': '#dark.04',
+            '[data-type="neutral"] & pressed': '#dark.05',
+            '[disabled] & ![data-type="link"]': '#dark.04',
+            '[data-type="clear"] | [data-type="outline"]': '#danger.0',
+            '([data-type="clear"] | [data-type="outline"]) & hovered': '#danger.1',
+            '([data-type="clear"] | [data-type="outline"]) & pressed': '#danger.05',
+            '([data-type="clear"] | [data-type="outline"]) & [disabled]': '#danger.0',
         },
         color: {
-            '': '#danger-text',
+            '': '#white',
+            '[data-type="neutral"]': '#dark.75',
+            '[data-type="neutral"] & hovered': '#dark.75',
+            '[data-type="secondary"]': '#danger',
+            '[data-type="clear"] | [data-type="outline"] | [data-type="link"]': '#danger-text',
+            '[data-type="link"] & pressed': '#danger',
+            '[data-type="neutral"] & pressed': '#danger',
             '[disabled]': '#dark.30',
         },
     },
-    outline: {
-        border: {
-            '': '#danger.30',
-            pressed: '#danger-text.10',
-            '[disabled]': '#dark.04',
-        },
-        fill: {
-            '': '#danger.0',
-            hovered: '#danger.1',
-            pressed: '#danger.05',
-            '[disabled]': '#danger.0',
-        },
-        color: {
-            '': '#danger-text',
-            '[disabled]': '#dark.30',
+});
+const SpecialButtonElement = tasty({
+    qa: 'Button',
+    'data-theme': 'default',
+    styles: {
+        ...DEFAULT_BUTTON_STYLES,
+        shadow: {
+            '': false,
+            '[data-type="link"]': '0 @border-width 0 0 #white.44',
+            '[data-type="link"] & (pressed | hovered | [disabled])': '0 0 0 0 #white.44',
         },
-    },
-    link: {
-        ...DEFAULT_STYLES_BY_TYPE.link,
-        color: {
-            '': '#danger-text',
-            pressed: '#danger',
-            '[disabled]': '#dark.30',
+        outline: {
+            '': '0 #white.0',
+            focused: '@outline-width #white.44',
+            '([data-type="primary"] | [data-type="clear"])': '0 #dark-03.80',
+            '([data-type="primary"] | [data-type="clear"]) & focused': '@outline-width #purple-03.80',
         },
-        shadow: {
-            '': '0 @border-width 0 0 #danger.20',
-            focused: '0 0 0 @outline-width #danger.20',
-            'pressed | hovered | [disabled]': '0 0 0 0 #danger.20',
+        border: {
+            '': '#clear',
+            '[data-type="primary"] & pressed': '#purple-03',
+            '[data-type="secondary"] & pressed': '#white.44',
+            '[data-type="outline"] & !pressed': '#white.44',
         },
-    },
-    neutral: {
-        border: '0',
         fill: {
-            '': '#dark.0',
-            hovered: '#dark.04',
-            pressed: '#dark.05',
-            '[disabled]': '#dark.04',
+            '': '#clear',
+            '[data-type="primary"]': '#purple',
+            '[data-type="primary"] & pressed': '#purple',
+            '[data-type="primary"] & hovered': '#purple-text',
+            '[data-type="secondary"]': '#white.12',
+            '[data-type="clear"]': '#white',
+            '[data-type="clear"] & hovered': '#white.94',
+            '[data-type="clear"] & pressed': '#white',
+            '[disabled] & ![data-type="link"]': '#white.12',
+            '([data-type="neutral"] | [data-type="outline"])': '#white.0',
+            '([data-type="neutral"] | [data-type="outline"] | [data-type="secondary"]) & hovered': '#white.18',
+            '([data-type="neutral"] | [data-type="outline"] | [data-type="secondary"]) & pressed': '#white.12',
+            '([data-type="clear"] | [data-type="outline"]) & [disabled]': '#white.0',
         },
         color: {
-            '': '#dark.75',
-            hovered: '#dark.75',
-            pressed: '#danger',
-            '[disabled]': '#dark.30',
-        },
-    },
-};
-export const DEFAULT_BUTTON_STYLES = {
-    display: 'inline-grid',
-    placeItems: 'center stretch',
-    placeContent: 'center',
-    gap: '1x',
-    flow: 'column',
-    radius: true,
-    preset: {
-        '': 't3m',
-        '[data-size="large"]': 't2m',
-    },
-    textDecoration: 'none',
-    transition: 'theme',
-    padding: {
-        '': '(1.25x - 1bw) (2x - 1bw)',
-        '[data-size="small"]': '(.75x - 1bw) (1.5x - 1bw)',
-        '[data-size="medium"]': '(1.25x - 1bw) (2x - 1bw)',
-        '[data-size="large"]': '(1.5x - 1bw) (2.5x - 1bw)',
-        'single-icon-only': 0,
-    },
-    width: {
-        '': 'initial',
-        '[data-size="small"] & single-icon-only': '4x',
-        '[data-size="medium"] & single-icon-only': '5x',
-        '[data-size="large"] & single-icon-only': '6x',
-    },
-    height: {
-        '': 'initial',
-        '[data-size="small"] & single-icon-only': '4x',
-        '[data-size="medium"] & single-icon-only': '5x',
-        '[data-size="large"] & single-icon-only': '6x',
-    },
-    whiteSpace: 'nowrap',
-    '& .anticon': {
-        transition: 'display .2s steps(1, start), margin .2s linear, opacity .2s linear',
-    },
-    ButtonIcon: {
-        fontSize: {
-            '': 'initial',
-            '[data-size="small"]': '14px',
-            '[data-size="medium"]': '16px',
-            '[data-size="large"]': '18px',
+            // default
+            '': '#white',
+            '[data-type="clear"]': '#purple',
+            // other
+            '[disabled]': '#white.30',
         },
     },
+});
+const ElementMap = {
+    default: DefaultButtonElement,
+    danger: DangerButtonElement,
+    special: SpecialButtonElement,
 };
 export const Button = forwardRef(function Button(allProps, ref) {
-    let { type, size, label, styles, children, theme, icon, rightIcon, mods, ...props } = allProps;
-    const isDisabled = props.isDisabled;
+    let { type, size, label, children, theme = 'default', icon, rightIcon, mods, ...props } = allProps;
+    const isDisabled = props.isDisabled || props.isLoading;
     const isLoading = props.isLoading;
     const isSelected = props.isSelected;
     if (!children) {
@@ -271,11 +240,6 @@ export const Button = forwardRef(function Button(allProps, ref) {
         }
     }
     children = children || icon || rightIcon ? children : label;
-    styles = useMemo(() => ({
-        ...DEFAULT_BUTTON_STYLES,
-        ...provideButtonStyles({ type, theme }),
-        ...styles,
-    }), [type, theme, styles]);
     if (icon) {
         icon = cloneElement(icon, {
             'data-element': 'ButtonIcon',
@@ -289,13 +253,15 @@ export const Button = forwardRef(function Button(allProps, ref) {
     const singleIcon = !!(((icon && !rightIcon) || (rightIcon && !icon)) &&
         !children);
     const modifiers = useMemo(() => ({
-        disabled: isDisabled,
         loading: isLoading,
         selected: isSelected,
         'single-icon-only': singleIcon,
         ...mods,
     }), [mods, isDisabled, isLoading, isSelected, singleIcon]);
-    return (_jsxs(Action, { as: props.to ? 'a' : undefined, ...props, ref: ref, isDisabled: isLoading || isDisabled, theme: theme, "data-type": type ?? 'secondary', "data-size": size ?? 'medium', mods: modifiers, styles: styles, label: label, children: [icon || isLoading ? !isLoading ? icon : _jsx(LoadingOutlined, {}, void 0) : null, children, rightIcon] }, void 0));
+    const ButtonElement = ElementMap[theme];
+    const { actionProps } = useAction({ ...allProps, isDisabled, mods: modifiers }, ref);
+    const styles = extractStyles(props, STYLE_PROPS);
+    return (_jsxs(ButtonElement, { ...actionProps, "data-theme": theme, "data-type": type ?? 'secondary', "data-size": size ?? 'medium', styles: styles, children: [icon || isLoading ? !isLoading ? icon : _jsx(LoadingOutlined, {}, void 0) : null, children, rightIcon] }, void 0));
 });
 
         

package/es/components/actions/Button/Submit.js

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