@cube-dev/ui-kit 0.85.2 → 0.86.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @cube-dev/ui-kit
 
+## 0.86.0
+
+### Minor Changes
+
+- [#847](https://github.com/cube-js/cube-ui-kit/pull/847) [`c1445d56`](https://github.com/cube-js/cube-ui-kit/commit/c1445d560ed1e04305032669341fb7b051df0d73) Thanks [@tenphi](https://github.com/tenphi)! - New Tag component based on Item component.
+
+- [#847](https://github.com/cube-js/cube-ui-kit/pull/847) [`c1445d56`](https://github.com/cube-js/cube-ui-kit/commit/c1445d560ed1e04305032669341fb7b051df0d73) Thanks [@tenphi](https://github.com/tenphi)! - Rename ItemBase -> Item. Item -> CollectionItem. Be careful.
+
+### Patch Changes
+
+- [#847](https://github.com/cube-js/cube-ui-kit/pull/847) [`c1445d56`](https://github.com/cube-js/cube-ui-kit/commit/c1445d560ed1e04305032669341fb7b051df0d73) Thanks [@tenphi](https://github.com/tenphi)! - New Badge component based on Item component.
+
+- [#847](https://github.com/cube-js/cube-ui-kit/pull/847) [`c1445d56`](https://github.com/cube-js/cube-ui-kit/commit/c1445d560ed1e04305032669341fb7b051df0d73) Thanks [@tenphi](https://github.com/tenphi)! - Fix auto-scroll in ListBox with sections.
+
+- [#847](https://github.com/cube-js/cube-ui-kit/pull/847) [`c1445d56`](https://github.com/cube-js/cube-ui-kit/commit/c1445d560ed1e04305032669341fb7b051df0d73) Thanks [@tenphi](https://github.com/tenphi)! - A new property for sub-element styles `# @cube-dev/ui-kit. Set `$: '>'` for sub-elements styles so they will only apply to the direct child of the root element.
+
 ## 0.85.2
 
 ### Patch Changes

package/es/_internal/hooks/index.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/es/_internal/index.js

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

package/es/components/Block.js

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

package/es/components/{Item.js → CollectionItem.js}

@@ -1,17 +1,17 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.85.2
+ * @cube-dev/ui-kit v0.86.0
  * Released under the MIT license.
  */
 
 import { Item } from 'react-stately';
 import { ItemAction } from './actions/ItemAction';
 import { ItemBadge } from './content/ItemBadge';
-const _Item = Object.assign(Item, {
+const _CollectionItem = Object.assign(Item, {
     Action: ItemAction,
     Badge: ItemBadge,
 });
-export { _Item as Item };
+export { _CollectionItem as CollectionItem };
 
         

package/es/components/GlobalStyles.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.85.2
+ * @cube-dev/ui-kit v0.86.0
  * Released under the MIT license.
  */
 
@@ -71,11 +71,13 @@ const GlobalStylesElement = createGlobalStyle `
     padding: 0 var(--outline-width);
   }
 
-  :not([data-qa="Icon"]) .tabler-icon {
-    max-width: var(--icon-size);
-    min-width: var(--icon-size);
-    min-height: var(--icon-size);
-    max-height: var(--icon-size);
+  :not([data-qa$="Icon"]) > .tabler-icon {
+    font-size: var(--icon-size);
+    width: 1em;
+    height: 1em;
+    min-width: 1em;
+    min-height: 1em;
+    max-height: 1em;
     stroke-width: var(--stroke-width);
   }
 

package/es/components/GridProvider.js

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

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.85.2
+ * @cube-dev/ui-kit v0.86.0
  * 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.85.2
+ * @cube-dev/ui-kit v0.86.0
  * Released under the MIT license.
  */
 
@@ -55,8 +55,8 @@ export const StyledSearchInput = tasty({
         userSelect: 'auto',
         height: '($size + 1x)',
         padding: {
-            '': '.5x $inline-padding',
-            prefix: '0 $inline-padding 0 .5x',
+            '': '.5x 1.5x',
+            prefix: '0 1.5x 0 .5x',
         },
         $size: {
             '': '$size-md',
@@ -64,9 +64,6 @@ export const StyledSearchInput = tasty({
             '[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/ItemAction/ItemAction.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.85.2
+ * @cube-dev/ui-kit v0.86.0
  * Released under the MIT license.
  */
 
@@ -23,6 +23,23 @@ const ItemActionElement = tasty({
         outline: 0,
         outlineOffset: 1,
         cursor: { '': 'pointer', disabled: 'default' },
+        padding: {
+            '': '0 $inline-padding',
+            'with-icon': 0,
+            'with-icon & with-label': '0 $inline-padding 0 0',
+        },
+        '$inline-padding': {
+            '': 'max($min-inline-padding, (($action-size - 1lh - 2bw) / 2 + $inline-compensation))',
+            '[data-size="inline"]': '.25x',
+        },
+        '$inline-compensation': '.5x',
+        '$min-inline-padding': '(.5x - 1bw)',
+        '$local-icon-size': '$icon-size',
+        Icon: {
+            $: '>',
+            ...ITEM_ACTION_BASE_STYLES.Icon,
+            '$icon-size': 'min($local-icon-size, ($action-size - .25x))',
+        },
     },
     variants: {
         // Default theme
@@ -49,7 +66,7 @@ const ItemActionElement = tasty({
 });
 export const ItemAction = forwardRef(function ItemAction(allProps, ref) {
     const { type: contextType, theme: contextTheme } = useItemActionContext();
-    const { type = contextType ?? 'neutral', theme = contextTheme ?? 'default', icon, children, isLoading = false, isSelected = false, tooltip, mods, ...rest } = allProps;
+    const { type = contextType ?? 'neutral', theme = contextTheme ?? 'default', icon, children, isLoading = false, isSelected = false, tooltip, mods, styles, ...rest } = allProps;
     // Determine if we should show checkbox
     const hasCheckbox = icon === 'checkbox';
     // Determine final icon (loading takes precedence)
@@ -61,6 +78,7 @@ export const ItemAction = forwardRef(function ItemAction(allProps, ref) {
         loading: isLoading,
         'with-label': !!children,
         context: !!contextType,
+        'with-icon': !!icon,
         ...mods,
     }), [hasCheckbox, isSelected, isLoading, children, contextType, mods]);
     // Extract aria-label from tooltip if needed
@@ -127,7 +145,7 @@ export const ItemAction = forwardRef(function ItemAction(allProps, ref) {
                 },
             })
             : mergeProps(actionProps, tooltipTriggerProps || {});
-        return (_jsxs(ItemActionElement, { ...mergedProps, variant: `${theme}.${finalType}`, "data-theme": theme, "data-type": finalType, tabIndex: finalTabIndex, children: [finalIcon && _jsx("div", { "data-element": "Icon", children: finalIcon }), children] }));
+        return (_jsxs(ItemActionElement, { ...mergedProps, variant: `${theme}.${finalType}`, "data-theme": theme, "data-type": finalType, tabIndex: finalTabIndex, styles: styles, children: [finalIcon && _jsx("div", { "data-element": "Icon", children: finalIcon }), children] }));
     };
     // Wrap with tooltip if needed
     if (showTooltip && tooltipContent) {

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

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

package/es/components/actions/ItemActionContext.js

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.85.2
+ * @cube-dev/ui-kit v0.86.0
  * Released under the MIT license.
  */
 
@@ -10,13 +10,13 @@ import { forwardRef, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { useHover } from 'react-aria';
 import { tasty } from '../../../tasty';
 import { mergeProps } from '../../../utils/react';
+import { Item } from '../../content/Item';
 import { ItemBadge } from '../../content/ItemBadge';
-import { ItemBase } from '../../content/ItemBase';
 import { DisplayTransition } from '../../helpers';
 import { ItemAction } from '../ItemAction';
 import { ItemActionProvider } from '../ItemActionContext';
 import { useAction } from '../use-action';
-const StyledItemBase = tasty(ItemBase, {
+const StyledItem = tasty(Item, {
     as: 'button',
     type: 'neutral',
     theme: 'default',
@@ -44,7 +44,8 @@ const ActionsWrapper = tasty({
             '[data-size="large"]': '$size-lg',
             '[data-size="xlarge"]': '$size-xl',
         },
-        '& > [data-element="Actions"]': {
+        Actions: {
+            $: '>',
             position: 'absolute',
             inset: '1bw 1bw auto auto',
             display: 'flex',
@@ -63,7 +64,10 @@ const ActionsWrapper = tasty({
                 'actions-hidden': '.5x 0',
             },
             transition: 'theme, translate',
-            '$side-padding': 'max(min(.5x, (($size - 3x + 2bw) / 2)), 1bw)',
+            // Size for the action buttons
+            '$action-size': 'min(max((2x + 2bw), ($size - 1x - 2bw)), (4x - 2bw))',
+            // Side padding for the button
+            '$side-padding': '(($size - $action-size - 2bw) / 2)',
         },
     },
 });
@@ -96,7 +100,7 @@ const ItemButton = forwardRef(function ItemButton(allProps, ref) {
             : undefined;
     }, [wrapperStyles]);
     const { actionProps } = useAction({ ...allProps, htmlType, to, as, mods }, ref);
-    const button = (_jsx(StyledItemBase, { actions: actions ? true : undefined, ...mergeProps(rest, actionProps), htmlType: actionProps.type, type: type, theme: theme, size: size }));
+    const button = (_jsx(StyledItem, { actions: actions ? true : undefined, ...mergeProps(rest, actionProps), htmlType: actionProps.type, type: type, theme: theme, size: size }));
     if (actions) {
         return (_jsxs(ActionsWrapper, { ...hoverProps, "data-size": size, mods: { 'actions-hidden': !areActionsShown && showActionsOnHover }, styles: finalWrapperStyles, style: {
                 '--actions-width': areActionsVisible || !showActionsOnHover

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

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

package/es/components/actions/Link/Link.js

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

package/es/components/actions/Menu/Menu.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.85.2
+ * @cube-dev/ui-kit v0.86.0
  * Released under the MIT license.
  */
 
@@ -13,7 +13,7 @@ import { useMenu } from 'react-aria';
 import { Section as BaseSection, useTreeState } from 'react-stately';
 import { CONTAINER_STYLES, extractStyles, filterBaseProps, } from '../../../tasty';
 import { mergeProps } from '../../../utils/react';
-import { Item } from '../../Item';
+import { CollectionItem } from '../../CollectionItem';
 import { useMenuContext } from './context';
 import { MenuItem } from './MenuItem';
 import { MenuSection } from './MenuSection';
@@ -124,7 +124,7 @@ const Section = Object.assign(BaseSection, {
     displayName: 'Section',
 });
 const __Menu = Object.assign(_Menu, {
-    Item,
+    Item: CollectionItem,
     Section,
     SubMenuTrigger,
     Trigger: MenuTrigger,

package/es/components/actions/Menu/MenuItem.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.85.2
+ * @cube-dev/ui-kit v0.86.0
  * Released under the MIT license.
  */
 
@@ -10,7 +10,7 @@ import { useContext, useRef } from 'react';
 import { FocusRing, useMenuItem } from 'react-aria';
 import { RightIcon } from '../../../icons';
 import { mergeProps } from '../../../utils/react';
-import { ItemBase } from '../../content/ItemBase/ItemBase';
+import { Item } from '../../content/Item/Item';
 import { useMenuContext } from './context';
 import { SubmenuTriggerContext } from './SubmenuTriggerContext';
 /** @private */
@@ -39,7 +39,7 @@ export function MenuItem(props) {
     }, state, elementRef);
     // Destructure presentation-related props from cleanItemProps so they are not spread onto DOM element
     const { suffix, description, icon, rightIcon, prefix, tooltip, actions, mods: itemMods, qa: itemQa, textValue, ...restCleanProps } = cleanItemProps;
-    // Selection indicator will be handled by ItemBase component
+    // Selection indicator will be handled by Item component
     const isVirtualFocused = state.selectionManager.focusedKey === key;
     const mods = {
         ...itemMods,
@@ -48,8 +48,9 @@ export function MenuItem(props) {
         selected: isSelected,
         disabled: isDisabled,
         submenu: !!submenuContext,
+        menuitem: true,
     };
-    return (_jsx(FocusRing, { children: _jsx(ItemBase, { ...mergeProps(menuItemProps, restCleanProps, {
+    return (_jsx(FocusRing, { children: _jsx(Item, { ...mergeProps(menuItemProps, restCleanProps, {
                 'data-popover-trigger': true,
                 qa: itemQa ? itemQa : `MenuItem-${key}`,
                 mods,

package/es/components/actions/Menu/MenuSection.js

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

package/es/components/actions/Menu/MenuTrigger.js

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

package/es/components/actions/Menu/SubMenuTrigger.js

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

package/es/components/actions/Menu/SubmenuTriggerContext.js

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

package/es/components/actions/Menu/context.js

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

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

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