@cube-dev/ui-kit 0.72.3 → 0.73.1

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

@@ -1,15 +1,16 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.3
+ * @cube-dev/ui-kit v0.73.1
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, forwardRef, useMemo } from 'react';
+import { useWarn } from '../../../_internal/hooks/use-warn';
+import { DANGER_CLEAR_STYLES, DANGER_LINK_STYLES, DANGER_NEUTRAL_STYLES, DANGER_OUTLINE_STYLES, DANGER_PRIMARY_STYLES, DANGER_SECONDARY_STYLES, DEFAULT_CLEAR_STYLES, DEFAULT_LINK_STYLES, DEFAULT_NEUTRAL_STYLES, DEFAULT_OUTLINE_STYLES, DEFAULT_PRIMARY_STYLES, DEFAULT_SECONDARY_STYLES, SPECIAL_CLEAR_STYLES, SPECIAL_LINK_STYLES, SPECIAL_NEUTRAL_STYLES, SPECIAL_OUTLINE_STYLES, SPECIAL_PRIMARY_STYLES, SPECIAL_SECONDARY_STYLES, SUCCESS_CLEAR_STYLES, SUCCESS_LINK_STYLES, SUCCESS_NEUTRAL_STYLES, SUCCESS_OUTLINE_STYLES, SUCCESS_PRIMARY_STYLES, SUCCESS_SECONDARY_STYLES, } from '../../../data/item-themes';
 import { LoadingIcon } from '../../../icons';
 import { CONTAINER_STYLES, extractStyles, tasty, TEXT_STYLES, } from '../../../tasty';
-import { accessibilityWarning } from '../../../utils/warnings';
 import { Text } from '../../content/Text';
 import { useAction } from '../use-action';
 const STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];
@@ -88,425 +89,6 @@ export const DEFAULT_BUTTON_STYLES = {
         placeSelf: 'center end',
     },
 };
-// ---------- DEFAULT THEME ----------
-export const DEFAULT_PRIMARY_STYLES = {
-    outline: {
-        '': '0 #purple-text.0',
-        focused: '1bw #purple-text',
-    },
-    border: {
-        '': '#clear',
-        pressed: '#purple-text',
-        focused: '#purple-text',
-        '[disabled] | disabled': '#border',
-    },
-    fill: {
-        '': '#purple',
-        hovered: '#purple-text',
-        pressed: '#purple',
-        '[disabled] | disabled': '#dark.04',
-    },
-    color: {
-        '': '#white',
-        '[disabled] | disabled': '#dark-04',
-    },
-};
-export const DEFAULT_SECONDARY_STYLES = {
-    border: {
-        '': '#purple.15',
-        pressed: '#purple.3',
-        focused: '#purple-text',
-        '[disabled] | disabled': '#border',
-    },
-    fill: {
-        '': '#purple.10',
-        hovered: '#purple.16',
-        pressed: '#purple-text.10',
-        '[disabled] | disabled': '#dark.04',
-    },
-    color: {
-        '': '#purple',
-        '[disabled] | disabled': '#dark-04',
-    },
-};
-export const DEFAULT_OUTLINE_STYLES = {
-    border: {
-        '': '#dark.12',
-        focused: '#purple-text',
-        '[disabled] | disabled': '#border',
-    },
-    fill: {
-        '': '#dark.0',
-        hovered: '#dark.03',
-        'pressed | (selected & !hovered)': '#dark.06',
-        '[disabled] | disabled': '#dark.04',
-    },
-    color: {
-        '': '#dark-02',
-        hovered: '#dark-02',
-        'pressed | (selected & !hovered)': '#dark',
-        '[disabled] | disabled': '#dark-04',
-    },
-};
-export const DEFAULT_NEUTRAL_STYLES = {
-    border: {
-        '': '#clear',
-        focused: '#purple-text',
-    },
-    fill: {
-        '': '#dark.0',
-        hovered: '#dark.03',
-        'pressed | (selected & !hovered)': '#dark.06',
-    },
-    color: {
-        '': '#dark-02',
-        hovered: '#dark-02',
-        pressed: '#dark',
-        '[disabled] | disabled': '#dark-04',
-    },
-};
-export const DEFAULT_CLEAR_STYLES = {
-    border: {
-        '': '#clear',
-        pressed: '#purple-text.10',
-        focused: '#purple-text',
-    },
-    fill: {
-        '': '#purple.0',
-        hovered: '#purple.16',
-        'pressed | (selected & !hovered)': '#purple.10',
-    },
-    color: {
-        '': '#purple-text',
-        '[disabled] | disabled': '#dark-04',
-    },
-};
-export const DEFAULT_LINK_STYLES = {
-    outline: {
-        '': '0 #purple-text.0',
-        focused: '1bw #purple-text',
-    },
-    border: '0',
-    fill: {
-        '': '#clear',
-    },
-    color: {
-        '': '#purple-text',
-        'hovered & !pressed': '#purple',
-        '[disabled] | disabled': '#dark-04',
-    },
-};
-// ---------- DANGER THEME ----------
-export const DANGER_PRIMARY_STYLES = {
-    outline: {
-        '': '0 #danger-text.0',
-        focused: '1bw #danger-text',
-    },
-    border: {
-        '': '#clear',
-        'pressed | focused': '#danger-text',
-        '[disabled] | disabled': '#border',
-    },
-    fill: {
-        '': '#danger',
-        'hovered & !pressed': '#danger-text',
-        '[disabled] | disabled': '#dark.04',
-    },
-    color: {
-        '': '#white',
-        '[disabled] | disabled': '#dark-04',
-    },
-};
-export const DANGER_SECONDARY_STYLES = {
-    border: {
-        '': '#danger.15',
-        pressed: '#danger.3',
-        focused: '#danger-text',
-        '[disabled] | disabled': '#border',
-    },
-    fill: {
-        '': '#danger.05',
-        'hovered & !pressed': '#danger.1',
-        '[disabled] | disabled': '#dark.04',
-    },
-    color: {
-        '': '#danger',
-        '[disabled] | disabled': '#dark-04',
-    },
-};
-export const DANGER_OUTLINE_STYLES = {
-    border: {
-        '': '#danger.15',
-        pressed: '#danger.3',
-        focused: '#danger-text',
-        '[disabled] | disabled': '#border',
-    },
-    fill: {
-        '': '#danger.0',
-        hovered: '#danger.1',
-        'pressed | (selected & !hovered)': '#danger.05',
-        '[disabled] | disabled': '#dark.04',
-    },
-    color: {
-        '': '#danger-text',
-        '[disabled] | disabled': '#dark-04',
-    },
-};
-export const DANGER_NEUTRAL_STYLES = {
-    border: {
-        '': '#clear',
-        focused: '#danger-text',
-    },
-    fill: {
-        '': '#dark.0',
-        hovered: '#dark.04',
-        'pressed | (selected & !hovered)': '#dark.05',
-    },
-    color: {
-        '': '#dark-02',
-        'pressed | (selected & !hovered)': '#danger-text',
-        '[disabled] | disabled': '#dark-04',
-    },
-};
-export const DANGER_CLEAR_STYLES = {
-    border: {
-        '': '#clear',
-        pressed: '#danger.05',
-        focused: '#danger-text',
-    },
-    fill: {
-        '': '#danger.0',
-        hovered: '#danger.1',
-        'pressed | (selected & !hovered)': '#danger.05',
-    },
-    color: {
-        '': '#danger-text',
-        '[disabled] | disabled': '#dark-04',
-    },
-};
-export const DANGER_LINK_STYLES = {
-    outline: {
-        '': '0 #danger-text.0',
-        focused: '1bw #danger-text',
-    },
-    border: 0,
-    fill: {
-        '': '#clear',
-    },
-    color: {
-        '': '#danger-text',
-        'hovered & !pressed': '#danger',
-        '[disabled] | disabled': '#dark-04',
-    },
-};
-// ---------- SUCCESS THEME ----------
-export const SUCCESS_PRIMARY_STYLES = {
-    outline: {
-        '': '0 #success-text.0',
-        focused: '1bw #success-text',
-    },
-    border: {
-        '': '#clear',
-        'pressed | focused': '#success-text',
-        '[disabled] | disabled': '#border',
-    },
-    fill: {
-        '': '#success',
-        'hovered & !pressed': '#success-text',
-        '[disabled] | disabled': '#dark.04',
-    },
-    color: {
-        '': '#white',
-        '[disabled] | disabled': '#dark-04',
-    },
-};
-export const SUCCESS_SECONDARY_STYLES = {
-    border: {
-        '': '#success.15',
-        pressed: '#success.3',
-        focused: '#success-text',
-        '[disabled] | disabled': '#border',
-    },
-    fill: {
-        '': '#success.05',
-        'hovered & !pressed': '#success.1',
-        '[disabled] | disabled': '#dark.04',
-    },
-    color: {
-        '': '#success',
-        '[disabled] | disabled': '#dark-04',
-    },
-};
-export const SUCCESS_OUTLINE_STYLES = {
-    border: {
-        '': '#success.15',
-        pressed: '#success.3',
-        focused: '#success-text',
-        '[disabled] | disabled': '#border',
-    },
-    fill: {
-        '': '#success.0',
-        hovered: '#success.1',
-        'pressed | (selected & !hovered)': '#success.05',
-        '[disabled] | disabled': '#dark.04',
-    },
-    color: {
-        '': '#success-text',
-        '[disabled] | disabled': '#dark-04',
-    },
-};
-export const SUCCESS_NEUTRAL_STYLES = {
-    border: {
-        '': '#clear',
-        focused: '#success-text',
-    },
-    fill: {
-        '': '#dark.0',
-        hovered: '#dark.04',
-        'pressed | (selected & !hovered)': '#dark.05',
-    },
-    color: {
-        '': '#dark-02',
-        'pressed | (selected & !hovered)': '#success-text',
-        '[disabled] | disabled': '#dark-04',
-    },
-};
-export const SUCCESS_CLEAR_STYLES = {
-    border: {
-        '': '#clear',
-        pressed: '#success.05',
-        focused: '#success-text',
-    },
-    fill: {
-        '': '#success.0',
-        hovered: '#success.1',
-        'pressed | (selected & !hovered)': '#success.05',
-    },
-    color: {
-        '': '#success-text',
-        '[disabled] | disabled': '#dark-04',
-    },
-};
-export const SUCCESS_LINK_STYLES = {
-    outline: {
-        '': '0 #success-text.0',
-        focused: '1bw #success-text',
-    },
-    border: '0',
-    fill: {
-        '': '#clear',
-    },
-    color: {
-        '': '#success-text',
-        'hovered & !pressed': '#success',
-        '[disabled] | disabled': '#dark-04',
-    },
-};
-// ---------- SPECIAL THEME ----------
-export const SPECIAL_PRIMARY_STYLES = {
-    outline: {
-        '': '0 #white.0',
-        focused: '1bw #white',
-    },
-    border: {
-        '': '#clear',
-        pressed: '#purple-03',
-        '[disabled] | disabled': '#white.3',
-    },
-    fill: {
-        '': '#purple',
-        'hovered & !pressed': '#purple-text',
-        '[disabled] | disabled': '#white.12',
-    },
-    color: {
-        '': '#white',
-        '[disabled] | disabled': '#white.4',
-    },
-};
-export const SPECIAL_SECONDARY_STYLES = {
-    border: {
-        '': '#white.3',
-        pressed: '#white.4',
-        focused: '#white',
-    },
-    fill: {
-        '': '#white.12',
-        'hovered & !pressed': '#white.18',
-        '[disabled] | disabled': '#white.12',
-    },
-    color: {
-        '': '#white',
-        '[disabled] | disabled': '#white.4',
-    },
-};
-export const SPECIAL_OUTLINE_STYLES = {
-    border: {
-        '': '#white.3',
-        pressed: '#white.12',
-        focused: '#white',
-    },
-    fill: {
-        '': '#white.0',
-        hovered: '#white.18',
-        'pressed | (selected & !hovered)': '#white.12',
-        '[disabled] | disabled': '#white.12',
-    },
-    color: {
-        '': '#white',
-        '[disabled] | disabled': '#white.4',
-    },
-};
-export const SPECIAL_NEUTRAL_STYLES = {
-    border: {
-        '': 0,
-        focused: '#white',
-    },
-    fill: {
-        '': '#white.0',
-        hovered: '#white.12',
-        'pressed | (selected & !hovered)': '#white.18',
-    },
-    color: {
-        '': '#white',
-        '[disabled] | disabled': '#white.4',
-    },
-};
-export const SPECIAL_CLEAR_STYLES = {
-    outline: {
-        focused: '1bw #white',
-    },
-    border: {
-        '': '#clear',
-        'pressed | focused': '#white',
-        '[disabled] | disabled': '#white.3',
-    },
-    fill: {
-        '': '#white',
-        'hovered & !pressed': '#white.94',
-        '[disabled] | disabled': '#white.12',
-    },
-    color: {
-        '': '#purple-text',
-        hovered: '#purple',
-        'pressed & hovered': '#purple-text',
-        '[disabled] | disabled': '#white.4',
-    },
-};
-export const SPECIAL_LINK_STYLES = {
-    outline: {
-        '': '0 #white.0',
-        focused: '1bw #white',
-    },
-    border: '0',
-    fill: {
-        '': '#clear',
-    },
-    color: {
-        '': '#white',
-        'hovered & !pressed': '#white.9',
-        '[disabled] | disabled': '#white.4',
-    },
-};
 const ButtonElement = tasty({
     qa: 'Button',
     styles: DEFAULT_BUTTON_STYLES,
@@ -547,20 +129,24 @@ export const Button = forwardRef(function Button(allProps, ref) {
     const isLoading = props.isLoading;
     const isSelected = props.isSelected;
     children = children || icon || rightIcon ? children : label;
-    if (!children) {
-        const specifiedLabel = label ?? props['aria-label'] ?? props['aria-labelledby'];
-        if (icon) {
-            if (!specifiedLabel) {
-                accessibilityWarning('If you provide `icon` property for a Button and do not provide any children then you should specify the `aria-label` property to make sure the Button element stays accessible.');
-                label = 'Unnamed'; // fix to avoid warning in production
-            }
-        }
-        else {
-            if (!specifiedLabel) {
-                accessibilityWarning('If you provide no children for a Button then you should specify the `aria-label` property to make sure the Button element stays accessible.');
-                label = 'Unnamed'; // fix to avoid warning in production
-            }
-        }
+    const specifiedLabel = label ?? props['aria-label'] ?? props['aria-labelledby'];
+    // Warn about accessibility issues when button has no accessible label
+    useWarn(!children && icon && !specifiedLabel, {
+        key: ['button-icon-no-label', !!icon],
+        args: [
+            'accessibility issue:',
+            'If you provide `icon` property for a Button and do not provide any children then you should specify the `aria-label` property to make sure the Button element stays accessible.',
+        ],
+    });
+    useWarn(!children && !icon && !specifiedLabel, {
+        key: ['button-no-content-no-label', !!icon],
+        args: [
+            'accessibility issue:',
+            'If you provide no children for a Button then you should specify the `aria-label` property to make sure the Button element stays accessible.',
+        ],
+    });
+    if (!children && !specifiedLabel) {
+        label = 'Unnamed'; // fix to avoid warning in production
     }
     if (icon) {
         icon = cloneElement(icon, {

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

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

package/es/components/actions/ButtonGroup/ButtonGroup.js

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

package/es/components/actions/CommandMenu/CommandMenu.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.3
+ * @cube-dev/ui-kit v0.73.1
  * Released under the MIT license.
  */
 
@@ -224,11 +224,11 @@ function CommandMenu(props, ref) {
                 if (!isFirstSection) {
                     items.push(_jsx(StyledDivider, { role: "separator", "aria-orientation": "horizontal" }, `divider-${String(item.key)}`));
                 }
-                items.push(_jsx(MenuSection, { item: item, state: treeState, styles: completeProps.sectionStyles, itemStyles: completeProps.itemStyles, headingStyles: completeProps.sectionHeadingStyles, selectionIcon: completeProps.selectionIcon, size: size }, item.key));
+                items.push(_jsx(MenuSection, { item: item, state: treeState, styles: completeProps.sectionStyles, itemStyles: completeProps.itemStyles, headingStyles: completeProps.sectionHeadingStyles, size: size }, item.key));
                 isFirstSection = false;
                 return;
             }
-            let menuItem = (_jsx(MenuItem, { item: item, state: treeState, styles: completeProps.itemStyles, selectionIcon: completeProps.selectionIcon, size: size, onAction: item.onAction }, item.key));
+            let menuItem = (_jsx(MenuItem, { item: item, state: treeState, styles: completeProps.itemStyles, size: size, onAction: item.onAction }, item.key));
             // Apply tooltip wrapper if tooltip property is provided
             if (item.props.tooltip) {
                 const tooltipProps = typeof item.props.tooltip === 'string'
@@ -249,7 +249,6 @@ function CommandMenu(props, ref) {
         treeState,
         completeProps.sectionStyles,
         completeProps.itemStyles,
-        completeProps.selectionIcon,
         completeProps.sectionHeadingStyles,
     ]);
     // Auto-focus search input

package/es/components/actions/CommandMenu/index.js

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

package/es/components/actions/CommandMenu/styled.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.72.3
+ * @cube-dev/ui-kit v0.73.1
  * Released under the MIT license.
  */
 
@@ -42,25 +42,31 @@ export const StyledSearchInput = tasty({
         display: 'grid',
         width: '100%',
         color: '#dark',
-        fill: '#white',
+        fill: '#clear',
         border: '#border bottom',
         outline: 'none',
         transition: 'theme',
         radius: 0,
-        padding: '.5x 1.5x',
         textAlign: 'left',
         reset: 'input',
         preset: 't3',
         margin: 0,
         boxSizing: 'border-box',
         userSelect: 'auto',
-        height: {
-            '': '$size-md $size-md',
-            '[data-size="large"]': '$size-lg $size-lg',
+        height: '($size + 1x)',
+        padding: {
+            '': '.5x $inline-padding',
+            prefix: '0 $inline-padding 0 .5x',
         },
-        '&::placeholder': {
-            color: '#dark-03',
+        $size: {
+            '': '$size-md',
+            '[data-size="small"]': '$size-sm',
+            '[data-size="medium"]': '$size-md',
+            '[data-size="large"]': '$size-lg',
         },
+        '$inline-padding': 'max($min-inline-padding, (($size - 1lh) / 2 + $inline-compensation))',
+        '$inline-compensation': '1x',
+        '$min-inline-padding': '1x',
     },
 });
 export const StyledLoadingWrapper = tasty({

package/es/components/actions/ItemButton/ItemButton.js

@@ -0,0 +1,29 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.73.1
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { tasty } from '../../../tasty';
+import { mergeProps } from '../../../utils/react';
+import { ItemBase } from '../../content/ItemBase';
+import { useAction } from '../use-action';
+const StyledItemBase = tasty(ItemBase, {
+    as: 'button',
+    type: 'neutral',
+    theme: 'default',
+    styles: {
+        reset: 'button',
+        placeContent: 'center stretch',
+    },
+});
+export const ItemButton = forwardRef(function ItemButton(allProps, ref) {
+    const { mods, to, htmlType, buttonType, as, type, ...rest } = allProps;
+    const { actionProps } = useAction({ ...allProps, type: buttonType, to, htmlType, as, mods }, ref);
+    return (_jsx(StyledItemBase, { ...mergeProps(rest, actionProps), type: type, buttonType: actionProps.type }));
+});
+
+        

package/es/components/actions/ItemButton/index.js

@@ -0,0 +1,10 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.73.1
+ * Released under the MIT license.
+ */
+
+export * from './ItemButton';
+
+