@cube-dev/ui-kit 0.9.7 → 0.9.10

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

@@ -0,0 +1,89 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.10
+ * 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.10
+ * Released under the MIT license.
+ */
+
+import React, { useContext } from 'react';
+export const MenuContext = React.createContext({});
+export function useMenuContext() {
+    return useContext(MenuContext);
+}
+
+        

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

@@ -0,0 +1,86 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.10
+ * Released under the MIT license.
+ */
+
+import { styled } from '../../../styled';
+import { Space } from '../../layout/Space';
+export const StyledMenu = styled({
+    tag: 'ul',
+    name: 'Menu',
+    styles: {
+        display: 'flex',
+        flow: 'column',
+        fill: '#white',
+        margin: '0',
+        padding: {
+            '': '0.5x',
+            section: '0',
+        },
+        border: {
+            '': '#dark-05',
+            section: '',
+        },
+        radius: {
+            '': '1r',
+        },
+        boxShadow: {
+            '': '',
+            popover: '0px 5px 15px #dark.05',
+        },
+    },
+});
+export const StyledDivider = styled({
+    tag: 'li',
+    styles: {
+        display: 'flex',
+        flow: 'column',
+        margin: '0 -0.5x',
+        listStyle: 'none',
+        fill: '#dark.05',
+        height: '1px',
+    },
+});
+export const StyledMenuHeader = styled(Space, {
+    tag: 'li',
+    styles: {
+        fill: '#light',
+        color: '#dark-02',
+        preset: 'h5s',
+        padding: '0.75x 2x',
+        margin: '-0.5x -0.5x (0.5x - 1bw) -0.5x',
+        border: '#dark-05 bottom',
+        placeContent: 'space-between',
+        align: 'start',
+        radius: '1r 1r 0 0',
+    },
+});
+export const StyledMenuItem = styled({
+    tag: 'li',
+    styles: {
+        display: 'flex',
+        flow: 'column',
+        margin: '1px 0',
+        padding: '0',
+        listStyle: 'none',
+        fill: '#white',
+        color: {
+            '': 'inherit',
+            disabled: '#dark-04',
+        },
+    },
+});
+export const StyledMenuSectionHeading = styled(Space, {
+    tag: 'header',
+    styles: {
+        color: '#dark-04',
+        preset: 'c1',
+        padding: '(0.75x - 1bw) (1.5x - 1bw)',
+        placeContent: 'space-between',
+        align: 'start',
+    },
+});
+
+        

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.7
+ * @cube-dev/ui-kit v0.9.10
  * Released under the MIT license.
  */
 
@@ -118,7 +118,7 @@ function Select(props, ref) {
     var _a;
     props = useProviderProps(props);
     props = useFormProps(props);
-    let { qa, label, 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, ...otherProps } = props;
+    let { qa, label, extra, 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, ...otherProps } = props;
     let state = useSelectState(props);
     const outerStyles = extractStyles(otherProps, OUTER_STYLES, {
         ...SELECT_STYLES,
@@ -173,6 +173,7 @@ function Select(props, ref) {
     return (_jsx(FieldWrapper, { ...{
             labelPosition,
             label,
+            extra,
             styles,
             isRequired,
             labelStyles,

package/es/components/portal/Portal.js

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

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

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

package/es/components/types.js

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

package/es/index.js

@@ -1,14 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.7
+ * @cube-dev/ui-kit v0.9.10
  * Released under the MIT license.
  */
 
 import { Text } from './components/content/Text';
 import { Title } from './components/content/Title';
 import { Paragraph } from './components/content/Paragraph';
-export { Item } from '@react-stately/collections';
+export { Item, Section } from '@react-stately/collections';
 // generic components
 export { Base } from './components/Base';
 export { Block } from './components/Block';
@@ -51,6 +51,8 @@ export { CheckboxGroup } from './components/forms/Checkbox/CheckboxGroup';
 export { Switch } from './components/forms/Switch/Switch';
 export { Radio } from './components/forms/RadioGroup/Radio';
 export { ComboBox } from './components/pickers/ComboBox/ComboBox';
+export { Menu } from './components/pickers/Menu/Menu';
+export { MenuTrigger } from './components/pickers/Menu/MenuTrigger';
 export { Select, ListBoxPopup } from './components/pickers/Select/Select';
 export { NumberInput } from './components/forms/NumberInput/NumberInput';
 export { Avatar } from './components/content/Avatar/Avatar';

package/es/provider.js

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

package/es/providers/BreakpointsProvider.js

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

package/es/providers/StylesProvider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.7
+ * @cube-dev/ui-kit v0.9.10
  * 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.9.7
+ * @cube-dev/ui-kit v0.9.10
  * 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.9.7
+ * @cube-dev/ui-kit v0.9.10
  * 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.9.7
+ * @cube-dev/ui-kit v0.9.10
  * 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.9.7
+ * @cube-dev/ui-kit v0.9.10
  * Released under the MIT license.
  */
 
@@ -23,11 +23,16 @@ export const LABEL_POSITION_ARG = {
 };
 export const LABEL_ARG = {
     label: {
-        // defaultValue: 'Field label',
         control: 'text',
         description: 'The content to display as the label.',
     },
 };
+export const EXTRA_ARG = {
+    extra: {
+        control: 'text',
+        description: 'The extra content to display next to the label.',
+    },
+};
 export const DESCRIPTION_ARG = {
     description: {
         control: 'text',

package/es/stories/components/ConfirmDeletionDialogForm.js

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

package/es/styled/styled.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.7
+ * @cube-dev/ui-kit v0.9.10
  * Released under the MIT license.
  */
 
@@ -54,10 +54,11 @@ function styled(Component, options) {
         return _StyledComponent;
     }
     options = Component;
-    let { name, tag = 'div', css: defaultCSS, styles: defaultStyles, props: legacyDefaultProps, styleProps, ...defaultProps } = options;
+    let { name, tag = 'div', css: defaultCSS, styles: defaultStyles, props: defaultProps, styleProps, } = options;
     let Element = styledComponents[tag](({ css }) => css);
     let _StyledComponent = forwardRef((allProps, ref) => {
         let { as, styles, styleName, breakpoints, mods, element, qa, qaVal, css, ...props } = allProps;
+        let { qa: defaultQa, qaVal: defaultQaVal, ...otherDefaultProps } = defaultProps !== null && defaultProps !== void 0 ? defaultProps : {};
         let propStyles = useMemo(() => (styleProps
             ? styleProps.concat(BASE_STYLES)
             : BASE_STYLES).reduce((map, prop) => {
@@ -75,11 +76,12 @@ function styled(Component, options) {
         if (mods) {
             Object.assign(props, modAttrs(mods));
         }
-        return (_jsx(Element, { as: as !== null && as !== void 0 ? as : tag, "data-element": element, "data-qa": qa, "data-qaval": qaVal, ...legacyDefaultProps, ...defaultProps, ...props, ref: ref, css: css }, void 0));
+        return (_jsx(Element, { as: as !== null && as !== void 0 ? as : tag, "data-element": element, "data-qa": qa || defaultQa, "data-qaval": qaVal || defaultQaVal, ...otherDefaultProps, ...props, ref: ref, css: css }, void 0));
     });
     _StyledComponent.displayName = `CubeStyled(${(_f = (_e = Element.displayName) !== null && _e !== void 0 ? _e : Element.name) !== null && _f !== void 0 ? _f : tag})`;
     return _StyledComponent;
 }
-export { styled };
+const tasty = styled;
+export { styled, tasty };
 
         

package/es/styles/align.js

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

package/es/styles/border.js

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

package/es/styles/boxShadow.combinator.js

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

package/es/styles/color.js

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

package/es/styles/createStyle.js

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

package/es/styles/dimension.js

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

package/es/styles/display.js

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

package/es/styles/fill.js

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

package/es/styles/flow.js

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

package/es/styles/font.js

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

package/es/styles/fontStyle.js

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

package/es/styles/gap.js

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

package/es/styles/groupRadius.js

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