@cube-dev/ui-kit 0.12.6 → 0.13.0

package/es/components/pickers/ComboBox/ComboBox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -62,7 +62,6 @@ const TriggerElement = tasty({
     },
 });
 function ComboBox(props, ref) {
-    var _a;
     props = useProviderProps(props);
     props = useFormProps(props);
     let { qa, label, extra, labelPosition = 'top', labelStyles, isRequired, necessityIndicator, validationState, icon, prefix, isDisabled, multiLine, autoFocus, wrapperRef, inputRef, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, optionStyles, triggerStyles, suffix, listBoxStyles, overlayStyles, hideTrigger, message, description, size, autoComplete = 'off', direction = 'bottom', shouldFlip = true, requiredMark = true, menuTrigger = 'input', suffixPosition = 'before', loadingState, filter, styles, labelSuffix, ...otherProps } = props;
@@ -108,7 +107,7 @@ function ComboBox(props, ref) {
     let isInvalid = validationState === 'invalid';
     let validationIcon = isInvalid ? (_jsx(WarningOutlined, { "data-element": "ValidationIcon", style: { color: 'var(--danger-color)' } }, void 0)) : (_jsx(CheckOutlined, { "data-element": "ValidationIcon", style: { color: 'var(--success-color)' } }, void 0));
     let validation = cloneElement(validationIcon);
-    let comboBoxWidth = (_a = wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+    let comboBoxWidth = wrapperRef?.current?.offsetWidth;
     if (icon) {
         icon = _jsx("div", { "data-element": "InputIcon", children: icon }, void 0);
         if (prefix) {

package/es/components/pickers/Menu/Menu.js

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

package/es/components/pickers/Menu/MenuButton.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -18,14 +18,18 @@ const ACTION_BUTTON = {
     },
     fill: {
         '': '#clear',
-        hovered: '#dark.04',
-        'pressed | selected': '#purple.1',
+        'hovered | focused': '#dark.04',
+        'pressed | selected': '#purple.10',
+        'focused & selected': '##purple.16',
+        'focused & pressed': '#purple.10',
         disabled: '#clear',
     },
     color: {
         '': '#dark-02',
-        hovered: '#dark-02',
+        'hovered | focused': '#dark-02',
         'pressed | selected': '#purple-text',
+        'focused & selected': '#purple-text',
+        'focused & pressed': '#purple-text',
         disabled: '#dark-04',
     },
     cursor: {
@@ -44,7 +48,7 @@ const ACTION_BUTTON = {
     Postfix: {
         color: {
             '': '#dark-03',
-            hovered: '#dark-03',
+            'hovered | focused': '#dark-03',
             'pressed | selected': '#purple-text',
             disabled: '#dark-04',
         },

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -20,13 +20,12 @@ export function MenuItem(props) {
     const { onClose, closeOnSelect } = useMenuContext();
     const { rendered, key, props: itemProps } = item;
     const isSelectable = state.selectionManager.selectionMode !== 'none';
-    const isSelected = state.selectionManager.isSelected(key);
-    const isDisabled = state.disabledKeys.has(key);
+    const isDisabledKey = state.disabledKeys.has(key);
     const ref = useRef(null);
-    const { hoverProps, isHovered } = useHover({ isDisabled });
-    const { menuItemProps, labelProps, descriptionProps, keyboardShortcutProps } = useMenuItem({
-        isSelected,
-        isDisabled,
+    const { hoverProps, isHovered } = useHover({ isDisabled: isDisabledKey });
+    const { menuItemProps, labelProps, descriptionProps, keyboardShortcutProps, isFocused, isSelected, isPressed, isDisabled, } = useMenuItem({
+        isSelected: state.selectionManager.isSelected(key),
+        isDisabled: isDisabledKey,
         'aria-label': item['aria-label'],
         key,
         onClose,
@@ -34,12 +33,22 @@ export function MenuItem(props) {
         isVirtualized,
         onAction,
     }, state, ref);
-    const contents = (_jsx(MenuButton, { ...itemProps, selectionIcon: selectionIcon, isSelectable: isSelectable, isSelected: isSelected, isDisabled: isDisabled, children: rendered }, void 0));
-    return (_jsx(FocusRing, { children: _jsx(StyledMenuItem, { ...mergeProps(menuItemProps, hoverProps), ref: ref, mods: {
+    const buttonProps = {
+        qa: itemProps.qa ? itemProps.qa : `MenuButton-${key}`,
+        mods: {
+            ...itemProps.mods,
+            hovered: isHovered,
+            focused: isFocused,
+            pressed: isPressed,
+        },
+    };
+    const contents = (_jsx(MenuButton, { ...mergeProps(itemProps, buttonProps), selectionIcon: selectionIcon, isSelectable: isSelectable, isSelected: isSelected, isDisabled: isDisabled, children: rendered }, void 0));
+    return (_jsx(FocusRing, { children: _jsx(StyledMenuItem, { ...mergeProps(menuItemProps, hoverProps), ref: ref, "data-qa": itemProps.qa ? `MenuItem-${itemProps.qa}` : `MenuItem-${key}`, mods: {
                 disabled: isDisabled,
                 selected: isSelected,
                 selectable: isSelectable,
                 hovered: isHovered,
+                focused: isFocused,
             }, children: _jsx(ClearSlots, { children: _jsx(SlotProvider, { slots: {
                         text: { className: 'itemLabel', ...labelProps },
                         end: { className: 'end', ...descriptionProps },

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

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

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

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

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

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

package/es/components/pickers/Menu/styled.js

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

package/es/components/pickers/Select/Select.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -139,11 +139,10 @@ const OverlayElement = tasty({
 });
 const StyledOverlayElement = styled(OverlayElement) `
   ${(props) => {
-    return getOverlayTransitionCSS({ placement: props === null || props === void 0 ? void 0 : props['data-position'] });
+    return getOverlayTransitionCSS({ placement: props?.['data-position'] });
 }}
 `;
 function Select(props, ref) {
-    var _a;
     props = useProviderProps(props);
     props = useFormProps(props);
     let { qa, label, extra, icon, labelPosition = 'top', labelStyles, isRequired, necessityIndicator, validationState, prefix, isDisabled, autoFocus, inputProps, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, optionStyles, suffix, listBoxStyles, overlayStyles, message, description, direction = 'bottom', shouldFlip = true, requiredMark = true, placeholder, tooltip, size, styles, type = 'neutral', theme, labelSuffix, suffixPosition = 'before', ...otherProps } = props;
@@ -182,7 +181,7 @@ function Select(props, ref) {
     let isInvalid = validationState === 'invalid';
     let validationIcon = isInvalid ? (_jsx(WarningOutlined, { "data-element": "ValidationIcon", style: { color: 'var(--danger-color)' } }, void 0)) : (_jsx(CheckOutlined, { "data-element": "ValidationIcon", style: { color: 'var(--success-color)' } }, void 0));
     let validation = cloneElement(validationIcon);
-    let triggerWidth = (_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+    let triggerWidth = triggerRef?.current?.offsetWidth;
     if (icon) {
         icon = _jsx("div", { "data-element": "ButtonIcon", children: icon }, void 0);
         if (prefix) {
@@ -192,7 +191,7 @@ function Select(props, ref) {
             prefix = icon;
         }
     }
-    const showPlaceholder = !!(placeholder === null || placeholder === void 0 ? void 0 : placeholder.trim()) && !state.selectedItem;
+    const showPlaceholder = !!placeholder?.trim() && !state.selectedItem;
     const modifiers = useMemo(() => ({
         invalid: isInvalid,
         valid: validationState === 'valid',
@@ -256,7 +255,7 @@ export function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, ove
     // to allow screen reader users to dismiss the popup easily.
     return (_jsx(StyledOverlayElement, { ...overlayProps, ...parentOverlayProps, ref: popoverRef, styles: overlayStyles, style: {
             '--overlay-min-width': minWidth ? `${minWidth}px` : 'initial',
-            ...parentOverlayProps === null || parentOverlayProps === void 0 ? void 0 : parentOverlayProps.style,
+            ...parentOverlayProps?.style,
         }, "data-position": placement, children: _jsxs(FocusScope, { restoreFocus: true, children: [_jsx(DismissButton, { onDismiss: () => state.close() }, void 0), _jsx(ListBoxElement, { styles: listBoxStyles, ...mergeProps(listBoxProps, otherProps), ref: listBoxRef, children: Array.from(state.collection).map((item) => (_jsx(Option, { item: item, state: state, styles: optionStyles, shouldUseVirtualFocus: shouldUseVirtualFocus }, item.key))) }, void 0), _jsx(DismissButton, { onDismiss: () => state.close() }, void 0)] }, void 0) }, void 0));
 }
 function Option({ item, state, styles, shouldUseVirtualFocus }) {

package/es/components/portal/Portal.js

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

package/es/components/portal/PortalProvider.js

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

package/es/components/portal/index.js

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

package/es/components/portal/storybook/templates/CustomRoot.js

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

package/es/components/portal/storybook/templates/PortalOrder.js

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

package/es/components/portal/storybook/templates/basic.js

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

package/es/components/portal/storybook/templates/index.js

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

package/es/components/portal/types.js

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

package/es/components/portal/usePortal.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -18,19 +18,17 @@ export function usePortal(props) {
     const [mountRoot, setMountRoot] = useState(null);
     onMountRef.current = onMount;
     useEffect(() => {
-        var _a, _b;
         if (!isDisabled) {
             const contextRoot = portalContext.root;
-            const currentRoot = (_a = root === null || root === void 0 ? void 0 : root.current) !== null && _a !== void 0 ? _a : null;
-            const currentContextRoot = (_b = contextRoot === null || contextRoot === void 0 ? void 0 : contextRoot.current) !== null && _b !== void 0 ? _b : null;
+            const currentRoot = root?.current ?? null;
+            const currentContextRoot = contextRoot?.current ?? null;
             invariant(!(contextRoot === null && currentRoot === null), 'Before using Portal, you need to specify a root, where the component should be mounted or put the component under the <Root /> component');
-            setMountRoot(currentRoot !== null && currentRoot !== void 0 ? currentRoot : currentContextRoot);
+            setMountRoot(currentRoot ?? currentContextRoot);
         }
     }, [root, portalContext.root, isDisabled]);
     useEffect(() => {
-        var _a;
         if (isDisabled || mountRoot) {
-            (_a = onMountRef.current) === null || _a === void 0 ? void 0 : _a.call(onMountRef);
+            onMountRef.current?.();
         }
     }, [isDisabled, mountRoot]);
     return {

package/es/components/status/LoadingAnimation/LoadingAnimation.js

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

package/es/components/status/LoadingAnimation/index.js

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

package/es/components/status/Spin/Cube.js

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

package/es/components/status/Spin/InternalSpinner.js

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

package/es/components/status/Spin/Spin.js

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

package/es/components/status/Spin/SpinsContainer.js

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

package/es/components/status/Spin/index.js

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

package/es/components/status/Spin/types.js

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

package/es/components/status/index.js

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

package/es/data/themes.js

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

package/es/icons/Attention.js

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

package/es/icons/Cross.js

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

package/es/icons/Danger.js

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

package/es/icons/Success.js

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

package/es/icons/index.js

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

package/es/index.js

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

package/es/provider.js

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

package/es/providers/StyleProvider.js

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

package/es/services/notification.js

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

package/es/shared/form.js

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

package/es/shared/index.js

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

package/es/stories/FormFieldArgs.js

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

package/es/stories/components/ConfirmDeletionDialogForm.js

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

package/es/stories/components/DialogFormApp.js

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

package/es/stories/components/StyledButton.js

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

package/es/stories/lists/baseProps.js

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

package/es/styled/index.js

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