@cube-dev/ui-kit 0.9.9 → 0.9.12

package/es/components/organisms/StatsCard/StatsCard.js

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

package/es/components/organisms/TopBar/TopBar.js

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

package/es/components/other/Base64Upload/Base64Upload.js

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

package/es/components/other/CloudLogo/CloudLogo.js

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

package/es/components/overlays/AlertDialog/AlertDialog.js

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

package/es/components/overlays/AlertDialog/AlertDialogApiProvider.js

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

package/es/components/overlays/AlertDialog/AlertDialogZone.js

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

package/es/components/overlays/AlertDialog/index.js

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

package/es/components/overlays/AlertDialog/types.js

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

package/es/components/overlays/Dialog/Dialog.js

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

package/es/components/overlays/Dialog/DialogContainer.js

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

package/es/components/overlays/Dialog/DialogForm.js

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

package/es/components/overlays/Dialog/DialogTrigger.js

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

package/es/components/overlays/Dialog/context.js

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

package/es/components/overlays/Dialog/index.js

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

package/es/components/overlays/Modal/Modal.js

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

package/es/components/overlays/Modal/OpenTransition.js

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

package/es/components/overlays/Modal/Overlay.js

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

package/es/components/overlays/Modal/Popover.js

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

package/es/components/overlays/Modal/Tray.js

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

package/es/components/overlays/Modal/Underlay.js

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

package/es/components/overlays/Modal/index.js

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

package/es/components/overlays/Notification/Notification.js

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

package/es/components/overlays/OverlayWrapper.js

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

package/es/components/overlays/Tooltip/Tooltip.js

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

package/es/components/overlays/Tooltip/TooltipProvider.js

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

package/es/components/overlays/Tooltip/TooltipTrigger.js

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

package/es/components/overlays/Tooltip/context.js

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.9
+ * @cube-dev/ui-kit v0.9.12
  * Released under the MIT license.
  */
 
@@ -61,7 +61,7 @@ function ComboBox(props, ref) {
     var _a;
     props = useProviderProps(props);
     props = useFormProps(props);
-    let { qa, label, labelPosition = 'top', labelStyles, isRequired, necessityIndicator, validationState, prefix, isDisabled, multiLine, autoFocus, 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', loadingState, filter, styles, ...otherProps } = props;
+    let { qa, label, extra, labelPosition = 'top', labelStyles, isRequired, necessityIndicator, validationState, prefix, isDisabled, multiLine, autoFocus, 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', loadingState, filter, styles, ...otherProps } = props;
     let isAsync = loadingState != null;
     let { contains } = useFilter({ sensitivity: 'base' });
     let [suffixWidth, setSuffixWidth] = useState(0);
@@ -146,6 +146,7 @@ function ComboBox(props, ref) {
     return (_jsx(FieldWrapper, { ...{
             labelPosition,
             label,
+            extra,
             styles,
             isRequired,
             labelStyles,

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

@@ -0,0 +1,72 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.12
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Item as BaseItem, Section as BaseSection, } from '@react-stately/collections';
+import { useMenu } from '@react-aria/menu';
+import { mergeProps, useSyncRef } from '@react-aria/utils';
+import { useDOMRef } from '@react-spectrum/utils';
+import { useTreeState } from '@react-stately/tree';
+import { useContextStyles } from '../../../providers/StylesProvider';
+import { CONTAINER_STYLES } from '../../../styles/list';
+import { extractStyles } from '../../../utils/styles';
+import { StyledMenu, StyledMenuHeader } from './styled';
+import { MenuItem } from './MenuItem';
+import { MenuSection } from './MenuSection';
+import { useMenuContext } from './context';
+function Menu(props, ref) {
+    const domRef = useDOMRef(ref);
+    const contextProps = useMenuContext();
+    const { header, footer, styles } = props;
+    const completeProps = {
+        ...mergeProps(contextProps, props, {
+            mods: {
+                footer: !!footer,
+                header: !!header,
+            },
+        }),
+    };
+    const state = useTreeState(completeProps);
+    const { menuProps } = useMenu(completeProps, state, domRef);
+    const containerStyles = extractStyles(completeProps, CONTAINER_STYLES);
+    const menuStyles = useContextStyles('Menu', props) || {};
+    const completeStyles = {
+        ...menuStyles,
+        ...containerStyles,
+        ...styles,
+    };
+    useSyncRef(contextProps, domRef);
+    return (_jsxs(StyledMenu, { ...mergeProps(menuProps, completeProps), styles: completeStyles, ref: domRef, children: [header && _jsx(StyledMenuHeader, { children: header }, void 0), [...state.collection].map((item) => {
+                if (item.type === 'section') {
+                    return (_jsx(MenuSection, { item: item, state: state, onAction: completeProps.onAction }, item.key));
+                }
+                let menuItem = (_jsx(MenuItem, { item: item, state: state, onAction: completeProps.onAction }, item.key));
+                if (item.wrapper) {
+                    menuItem = item.wrapper(menuItem);
+                }
+                return menuItem;
+            })] }, void 0));
+}
+// forwardRef doesn't support generic parameters, so cast the result to the correct type
+// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
+const _Menu = React.forwardRef(Menu);
+const Item = Object.assign(BaseItem, {
+    displayName: 'Item',
+});
+const Section = Object.assign(BaseSection, {
+    displayName: 'Section',
+});
+const __Menu = Object.assign(_Menu, {
+    Item,
+    Section,
+    displayName: 'Menu',
+});
+__Menu.displayName = 'Menu';
+export { __Menu as Menu };
+
+        

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

@@ -0,0 +1,63 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.12
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../actions';
+import { Text } from '../../content/Text';
+import { Space } from '../../layout/Space';
+import { CheckOutlined } from '@ant-design/icons';
+const ACTION_BUTTON = {
+    border: {
+        '': '#clear',
+        pressed: '#clear',
+    },
+    fill: {
+        '': '#clear',
+        hovered: '#dark.04',
+        'pressed | selected': '#purple.1',
+        disabled: '#clear',
+    },
+    color: {
+        '': '#dark-02',
+        hovered: '#dark-02',
+        'pressed | selected': '#purple-text',
+        disabled: '#dark-04',
+    },
+    cursor: {
+        '': 'pointer',
+        disabled: 'default',
+    },
+    shadow: '#clear',
+    padding: {
+        '': '(0.75x - 1px) (1.5x - 1px)',
+        'selectable & !selected': '(0.75x - 1px) (1.5x - 1px) (0.75x - 1px) (1.5x - 1px + 22px)',
+    },
+    display: 'flex',
+    flow: 'row',
+    justifyContent: 'start',
+    Postfix: {
+        color: {
+            '': '#dark-03',
+            hovered: '#dark-03',
+            'pressed | selected': '#purple-text',
+            disabled: '#dark-04',
+        },
+    },
+};
+const getPostfix = (postfix) => typeof postfix === 'string' ? (_jsx(Text, { nowrap: true, color: "inherit", "data-element": "Postfix", children: postfix }, void 0)) : (postfix);
+export function MenuButton({ children, icon, postfix, ...props }) {
+    const { isSelected, isSelectable } = props;
+    const checkIcon = isSelectable && isSelected ? _jsx(CheckOutlined, {}, void 0) : null;
+    const mods = {
+        ...props.mods,
+        selectable: isSelectable,
+        selected: isSelected,
+    };
+    return (_jsxs(Button, { type: "neutral", size: "small", styles: ACTION_BUTTON, ...props, icon: checkIcon, mods: mods, children: [icon && _jsx(Text, { color: "inherit", children: icon }, void 0), _jsxs(Space, { gap: "1x", placeContent: "space-between", overflow: "auto", width: "100%", children: [_jsx(Text, { color: "inherit", ellipsis: true, children: children }, void 0), postfix && getPostfix(postfix)] }, void 0)] }, void 0));
+}
+
+        

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

@@ -0,0 +1,52 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.12
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { useHover } from '@react-aria/interactions';
+import { FocusRing } from '@react-aria/focus';
+import { useMenuItem } from '@react-aria/menu';
+import { mergeProps, ClearSlots, SlotProvider } from '../../../utils/react';
+import { useMenuContext } from './context';
+import { StyledMenuItem } from './styled';
+import { MenuButton } from './MenuButton';
+/** @private */
+export function MenuItem(props) {
+    const { item, state, isVirtualized, onAction } = 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 ref = useRef(null);
+    const { hoverProps, isHovered } = useHover({ isDisabled });
+    const { menuItemProps, labelProps, descriptionProps, keyboardShortcutProps } = useMenuItem({
+        isSelected,
+        isDisabled,
+        'aria-label': item['aria-label'],
+        key,
+        onClose,
+        closeOnSelect,
+        isVirtualized,
+        onAction,
+    }, state, ref);
+    let contents = typeof rendered === 'string' ? (_jsx(MenuButton, { ...itemProps, isSelectable: isSelectable, isSelected: isSelected, isDisabled: isDisabled, children: rendered }, void 0)) : (rendered);
+    return (_jsx(FocusRing, { children: _jsx(StyledMenuItem, { ...mergeProps(menuItemProps, hoverProps), ref: ref, mods: {
+                disabled: isDisabled,
+                selected: isSelected,
+                selectable: isSelectable,
+                hovered: isHovered,
+            }, children: _jsx(ClearSlots, { children: _jsx(SlotProvider, { slots: {
+                        text: { className: 'itemLabel', ...labelProps },
+                        end: { className: 'end', ...descriptionProps },
+                        icon: { className: 'icon', size: 'S' },
+                        description: { className: 'description', ...descriptionProps },
+                        keyboard: { className: 'keyboard', ...keyboardShortcutProps },
+                    }, children: contents }, void 0) }, void 0) }, void 0) }, void 0));
+}
+
+        

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

@@ -0,0 +1,30 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.12
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { MenuItem } from './MenuItem';
+import { useMenuSection } from '@react-aria/menu';
+import { StyledMenu, StyledMenuItem, StyledMenuSectionHeading } from './styled';
+/** @private */
+export function MenuSection(props) {
+    let { item, state, onAction } = props;
+    let { itemProps, headingProps, groupProps } = useMenuSection({
+        heading: item.rendered,
+        'aria-label': item['aria-label'],
+    });
+    const isFirstKey = item.key === state.collection.getFirstKey();
+    return (_jsx(Fragment, { children: _jsxs(StyledMenuItem, { ...itemProps, children: [item.rendered && (_jsx(StyledMenuSectionHeading, { ...headingProps, mods: { first: isFirstKey }, children: item.rendered }, void 0)), _jsx(StyledMenu, { ...groupProps, mods: { section: true }, children: [...item.childNodes].map((node) => {
+                        let item = (_jsx(MenuItem, { item: node, state: state, onAction: onAction }, node.key));
+                        if (node.wrapper) {
+                            item = node.wrapper(item);
+                        }
+                        return item;
+                    }) }, void 0)] }, void 0) }, void 0));
+}
+
+        

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

@@ -0,0 +1,89 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.12
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef, Fragment, useRef } from 'react';
+import { useDOMRef, useIsMobileDevice, } from '@react-spectrum/utils';
+import { DismissButton, useOverlayPosition } from '@react-aria/overlays';
+import { PressResponder } from '@react-aria/interactions';
+import { useMenuTrigger } from '@react-aria/menu';
+import { useMenuTriggerState } from '@react-stately/menu';
+import { Popover, Tray } from '../../overlays/Modal';
+import { SlotProvider } from '../../../utils/react';
+import { MenuContext } from './context';
+function MenuTrigger(props, ref) {
+    const menuPopoverRef = useRef(null);
+    const triggerRef = useRef();
+    const domRef = useDOMRef(ref);
+    const menuTriggerRef = domRef || triggerRef;
+    const menuRef = useRef(null);
+    const { children, align = 'start', shouldFlip = true, direction = 'bottom', closeOnSelect, trigger = 'press', isDisabled, } = props;
+    const [menuTrigger, menu] = React.Children.toArray(children);
+    const state = useMenuTriggerState(props);
+    const { menuTriggerProps, menuProps } = useMenuTrigger({ isDisabled }, state, menuTriggerRef);
+    let initialPlacement;
+    switch (direction) {
+        case 'left':
+        case 'right':
+        case 'start':
+        case 'end':
+            initialPlacement = `${direction} ${align === 'end' ? 'bottom' : 'top'}`;
+            break;
+        case 'bottom':
+        case 'top':
+        default:
+            initialPlacement = `${direction} ${align}`;
+    }
+    const isMobile = useIsMobileDevice();
+    const { overlayProps: positionProps, placement } = useOverlayPosition({
+        targetRef: menuTriggerRef,
+        overlayRef: menuPopoverRef,
+        scrollRef: menuRef,
+        placement: initialPlacement,
+        shouldFlip: shouldFlip,
+        isOpen: state.isOpen && !isMobile,
+        onClose: state.close,
+        containerPadding: props.containerPadding,
+        offset: props.offset || 8,
+        crossOffset: props.crossOffset,
+    });
+    const menuContext = {
+        ...menuProps,
+        ref: menuRef,
+        onClose: state.close,
+        closeOnSelect,
+        autoFocus: state.focusStrategy || true,
+        style: isMobile
+            ? {
+                width: '100%',
+                maxHeight: 'inherit',
+            }
+            : undefined,
+        mods: {
+            popover: !isMobile,
+        },
+    };
+    const contents = (_jsxs(_Fragment, { children: [_jsx(DismissButton, { onDismiss: state.close }, void 0), menu, _jsx(DismissButton, { onDismiss: state.close }, void 0)] }, void 0));
+    // On small screen devices, the menu is rendered in a tray, otherwise a popover.
+    let overlay;
+    if (isMobile) {
+        overlay = (_jsx(Tray, { isOpen: state.isOpen, onClose: state.close, children: contents }, void 0));
+    }
+    else {
+        overlay = (_jsx(Popover, { isOpen: state.isOpen, style: positionProps.style, ref: menuPopoverRef, placement: placement, hideArrow: true, onClose: state.close, shouldCloseOnBlur: true, children: contents }, void 0));
+    }
+    return (_jsxs(Fragment, { children: [_jsx(SlotProvider, { slots: { actionButton: { holdAffordance: trigger === 'longPress' } }, children: _jsx(PressResponder, { ...menuTriggerProps, ref: menuTriggerRef, isPressed: state.isOpen, children: menuTrigger }, void 0) }, void 0), _jsx(MenuContext.Provider, { value: menuContext, children: overlay }, void 0)] }, void 0));
+}
+/**
+ * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,
+ * linking the Menu's open state with the trigger's press state.
+ */
+let _MenuTrigger = forwardRef(MenuTrigger);
+_MenuTrigger.displayName = 'MenuTrigger';
+export { _MenuTrigger as MenuTrigger };
+
+        

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

@@ -0,0 +1,14 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.12
+ * Released under the MIT license.
+ */
+
+import React, { useContext } from 'react';
+export const MenuContext = React.createContext({});
+export function useMenuContext() {
+    return useContext(MenuContext);
+}
+
+