@cube-dev/ui-kit 0.9.9 → 0.9.12

package/cjs/components/pickers/Menu/Menu.js

@@ -0,0 +1,78 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.12
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menu = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const collections_1 = require("@react-stately/collections");
+const menu_1 = require("@react-aria/menu");
+const utils_1 = require("@react-aria/utils");
+const utils_2 = require("@react-spectrum/utils");
+const tree_1 = require("@react-stately/tree");
+const StylesProvider_1 = require("../../../providers/StylesProvider");
+const list_1 = require("../../../styles/list");
+const styles_1 = require("../../../utils/styles");
+const styled_1 = require("./styled");
+const MenuItem_1 = require("./MenuItem");
+const MenuSection_1 = require("./MenuSection");
+const context_1 = require("./context");
+function Menu(props, ref) {
+    const domRef = (0, utils_2.useDOMRef)(ref);
+    const contextProps = (0, context_1.useMenuContext)();
+    const { header, footer, styles } = props;
+    const completeProps = {
+        ...(0, utils_1.mergeProps)(contextProps, props, {
+            mods: {
+                footer: !!footer,
+                header: !!header,
+            },
+        }),
+    };
+    const state = (0, tree_1.useTreeState)(completeProps);
+    const { menuProps } = (0, menu_1.useMenu)(completeProps, state, domRef);
+    const containerStyles = (0, styles_1.extractStyles)(completeProps, list_1.CONTAINER_STYLES);
+    const menuStyles = (0, StylesProvider_1.useContextStyles)('Menu', props) || {};
+    const completeStyles = {
+        ...menuStyles,
+        ...containerStyles,
+        ...styles,
+    };
+    (0, utils_1.useSyncRef)(contextProps, domRef);
+    return ((0, jsx_runtime_1.jsxs)(styled_1.StyledMenu, { ...(0, utils_1.mergeProps)(menuProps, completeProps), styles: completeStyles, ref: domRef, children: [header && (0, jsx_runtime_1.jsx)(styled_1.StyledMenuHeader, { children: header }, void 0), [...state.collection].map((item) => {
+                if (item.type === 'section') {
+                    return ((0, jsx_runtime_1.jsx)(MenuSection_1.MenuSection, { item: item, state: state, onAction: completeProps.onAction }, item.key));
+                }
+                let menuItem = ((0, jsx_runtime_1.jsx)(MenuItem_1.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_1.default.forwardRef(Menu);
+const Item = Object.assign(collections_1.Item, {
+    displayName: 'Item',
+});
+const Section = Object.assign(collections_1.Section, {
+    displayName: 'Section',
+});
+const __Menu = Object.assign(_Menu, {
+    Item,
+    Section,
+    displayName: 'Menu',
+});
+exports.Menu = __Menu;
+__Menu.displayName = 'Menu';
+
+        

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

@@ -0,0 +1,67 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.12
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const actions_1 = require("../../actions");
+const Text_1 = require("../../content/Text");
+const Space_1 = require("../../layout/Space");
+const icons_1 = require("@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' ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { nowrap: true, color: "inherit", "data-element": "Postfix", children: postfix }, void 0)) : (postfix);
+function MenuButton({ children, icon, postfix, ...props }) {
+    const { isSelected, isSelectable } = props;
+    const checkIcon = isSelectable && isSelected ? (0, jsx_runtime_1.jsx)(icons_1.CheckOutlined, {}, void 0) : null;
+    const mods = {
+        ...props.mods,
+        selectable: isSelectable,
+        selected: isSelected,
+    };
+    return ((0, jsx_runtime_1.jsxs)(actions_1.Button, { type: "neutral", size: "small", styles: ACTION_BUTTON, ...props, icon: checkIcon, mods: mods, children: [icon && (0, jsx_runtime_1.jsx)(Text_1.Text, { color: "inherit", children: icon }, void 0), (0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: "1x", placeContent: "space-between", overflow: "auto", width: "100%", children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { color: "inherit", ellipsis: true, children: children }, void 0), postfix && getPostfix(postfix)] }, void 0)] }, void 0));
+}
+exports.MenuButton = MenuButton;
+
+        

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

@@ -0,0 +1,56 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.12
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const interactions_1 = require("@react-aria/interactions");
+const focus_1 = require("@react-aria/focus");
+const menu_1 = require("@react-aria/menu");
+const react_2 = require("../../../utils/react");
+const context_1 = require("./context");
+const styled_1 = require("./styled");
+const MenuButton_1 = require("./MenuButton");
+/** @private */
+function MenuItem(props) {
+    const { item, state, isVirtualized, onAction } = props;
+    const { onClose, closeOnSelect } = (0, context_1.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 = (0, react_1.useRef)(null);
+    const { hoverProps, isHovered } = (0, interactions_1.useHover)({ isDisabled });
+    const { menuItemProps, labelProps, descriptionProps, keyboardShortcutProps } = (0, menu_1.useMenuItem)({
+        isSelected,
+        isDisabled,
+        'aria-label': item['aria-label'],
+        key,
+        onClose,
+        closeOnSelect,
+        isVirtualized,
+        onAction,
+    }, state, ref);
+    let contents = typeof rendered === 'string' ? ((0, jsx_runtime_1.jsx)(MenuButton_1.MenuButton, { ...itemProps, isSelectable: isSelectable, isSelected: isSelected, isDisabled: isDisabled, children: rendered }, void 0)) : (rendered);
+    return ((0, jsx_runtime_1.jsx)(focus_1.FocusRing, { children: (0, jsx_runtime_1.jsx)(styled_1.StyledMenuItem, { ...(0, react_2.mergeProps)(menuItemProps, hoverProps), ref: ref, mods: {
+                disabled: isDisabled,
+                selected: isSelected,
+                selectable: isSelectable,
+                hovered: isHovered,
+            }, children: (0, jsx_runtime_1.jsx)(react_2.ClearSlots, { children: (0, jsx_runtime_1.jsx)(react_2.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));
+}
+exports.MenuItem = MenuItem;
+
+        

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

@@ -0,0 +1,34 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.12
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuSection = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const MenuItem_1 = require("./MenuItem");
+const menu_1 = require("@react-aria/menu");
+const styled_1 = require("./styled");
+/** @private */
+function MenuSection(props) {
+    let { item, state, onAction } = props;
+    let { itemProps, headingProps, groupProps } = (0, menu_1.useMenuSection)({
+        heading: item.rendered,
+        'aria-label': item['aria-label'],
+    });
+    const isFirstKey = item.key === state.collection.getFirstKey();
+    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(styled_1.StyledMenuItem, { ...itemProps, children: [item.rendered && ((0, jsx_runtime_1.jsx)(styled_1.StyledMenuSectionHeading, { ...headingProps, mods: { first: isFirstKey }, children: item.rendered }, void 0)), (0, jsx_runtime_1.jsx)(styled_1.StyledMenu, { ...groupProps, mods: { section: true }, children: [...item.childNodes].map((node) => {
+                        let item = ((0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, { item: node, state: state, onAction: onAction }, node.key));
+                        if (node.wrapper) {
+                            item = node.wrapper(item);
+                        }
+                        return item;
+                    }) }, void 0)] }, void 0) }, void 0));
+}
+exports.MenuSection = MenuSection;
+
+        

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

@@ -0,0 +1,111 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.12
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuTrigger = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const utils_1 = require("@react-spectrum/utils");
+const overlays_1 = require("@react-aria/overlays");
+const interactions_1 = require("@react-aria/interactions");
+const menu_1 = require("@react-aria/menu");
+const menu_2 = require("@react-stately/menu");
+const Modal_1 = require("../../overlays/Modal");
+const react_2 = require("../../../utils/react");
+const context_1 = require("./context");
+function MenuTrigger(props, ref) {
+    const menuPopoverRef = (0, react_1.useRef)(null);
+    const triggerRef = (0, react_1.useRef)();
+    const domRef = (0, utils_1.useDOMRef)(ref);
+    const menuTriggerRef = domRef || triggerRef;
+    const menuRef = (0, react_1.useRef)(null);
+    const { children, align = 'start', shouldFlip = true, direction = 'bottom', closeOnSelect, trigger = 'press', isDisabled, } = props;
+    const [menuTrigger, menu] = react_1.default.Children.toArray(children);
+    const state = (0, menu_2.useMenuTriggerState)(props);
+    const { menuTriggerProps, menuProps } = (0, menu_1.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 = (0, utils_1.useIsMobileDevice)();
+    const { overlayProps: positionProps, placement } = (0, overlays_1.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 = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(overlays_1.DismissButton, { onDismiss: state.close }, void 0), menu, (0, jsx_runtime_1.jsx)(overlays_1.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 = ((0, jsx_runtime_1.jsx)(Modal_1.Tray, { isOpen: state.isOpen, onClose: state.close, children: contents }, void 0));
+    }
+    else {
+        overlay = ((0, jsx_runtime_1.jsx)(Modal_1.Popover, { isOpen: state.isOpen, style: positionProps.style, ref: menuPopoverRef, placement: placement, hideArrow: true, onClose: state.close, shouldCloseOnBlur: true, children: contents }, void 0));
+    }
+    return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.SlotProvider, { slots: { actionButton: { holdAffordance: trigger === 'longPress' } }, children: (0, jsx_runtime_1.jsx)(interactions_1.PressResponder, { ...menuTriggerProps, ref: menuTriggerRef, isPressed: state.isOpen, children: menuTrigger }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(context_1.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 = (0, react_1.forwardRef)(MenuTrigger);
+exports.MenuTrigger = _MenuTrigger;
+_MenuTrigger.displayName = 'MenuTrigger';
+
+        

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

@@ -0,0 +1,37 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.12
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMenuContext = exports.MenuContext = void 0;
+const react_1 = __importStar(require("react"));
+exports.MenuContext = react_1.default.createContext({});
+function useMenuContext() {
+    return (0, react_1.useContext)(exports.MenuContext);
+}
+exports.useMenuContext = useMenuContext;
+
+        

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

@@ -0,0 +1,89 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.12
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledMenuSectionHeading = exports.StyledMenuItem = exports.StyledMenuHeader = exports.StyledDivider = exports.StyledMenu = void 0;
+const styled_1 = require("../../../styled");
+const Space_1 = require("../../layout/Space");
+exports.StyledMenu = (0, styled_1.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',
+        },
+    },
+});
+exports.StyledDivider = (0, styled_1.styled)({
+    tag: 'li',
+    styles: {
+        display: 'flex',
+        flow: 'column',
+        margin: '0 -0.5x',
+        listStyle: 'none',
+        fill: '#dark.05',
+        height: '1px',
+    },
+});
+exports.StyledMenuHeader = (0, styled_1.styled)(Space_1.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',
+    },
+});
+exports.StyledMenuItem = (0, styled_1.styled)({
+    tag: 'li',
+    styles: {
+        display: 'flex',
+        flow: 'column',
+        margin: '1px 0',
+        padding: '0',
+        listStyle: 'none',
+        fill: '#white',
+        color: {
+            '': 'inherit',
+            disabled: '#dark-04',
+        },
+    },
+});
+exports.StyledMenuSectionHeading = (0, styled_1.styled)(Space_1.Space, {
+    tag: 'header',
+    styles: {
+        color: '#dark-04',
+        preset: 'c1',
+        padding: '(0.75x - 1bw) (1.5x - 1bw)',
+        placeContent: 'space-between',
+        align: 'start',
+    },
+});
+
+        

package/cjs/components/pickers/Select/Select.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.
  */
 
@@ -121,7 +121,7 @@ function Select(props, ref) {
     var _a;
     props = (0, provider_1.useProviderProps)(props);
     props = (0, Form_1.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 = (0, select_1.useSelectState)(props);
     const outerStyles = (0, styles_1.extractStyles)(otherProps, list_1.OUTER_STYLES, {
         ...SELECT_STYLES,
@@ -176,6 +176,7 @@ function Select(props, ref) {
     return ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...{
             labelPosition,
             label,
+            extra,
             styles,
             isRequired,
             labelStyles,

package/cjs/components/portal/Portal.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/cjs/components/portal/PortalProvider.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/cjs/components/portal/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/cjs/components/portal/storybook/templates/CustomRoot.js

@@ -0,0 +1,20 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.12
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomRootTemplate = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Portal_1 = require("../../Portal");
+const CustomRootTemplate = (args) => {
+    const rootRef = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Disabled portal's content should be there ", ' -> ', (0, jsx_runtime_1.jsx)(Portal_1.Portal, { ...args, root: rootRef, children: "Portal's content" }, void 0), (0, jsx_runtime_1.jsxs)("div", { ref: rootRef, children: ["Using custom portal root content should be there ", ' -> '] }, void 0), "By default, Portal content should be there ", ' -> '] }, void 0));
+};
+exports.CustomRootTemplate = CustomRootTemplate;
+
+        

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

@@ -0,0 +1,17 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.12
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PortalOrderTemplate = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Block_1 = require("../../../Block");
+const Portal_1 = require("../../Portal");
+const PortalOrderTemplate = (args) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Portal_1.Portal, { ...args, children: [(0, jsx_runtime_1.jsx)(Block_1.Block, { children: "Portal 1" }, void 0), (0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsx)(Block_1.Block, { children: "Portal 3" }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsx)(Block_1.Block, { children: "Portal 4" }, void 0) }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsx)(Block_1.Block, { children: "Portal 2" }, void 0) }, void 0)] }, void 0));
+exports.PortalOrderTemplate = PortalOrderTemplate;
+
+        

package/cjs/components/portal/storybook/templates/basic.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/cjs/components/portal/storybook/templates/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.
  */
 
@@ -18,5 +18,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./basic"), exports);
+__exportStar(require("./PortalOrder"), exports);
+__exportStar(require("./CustomRoot"), exports);
 
         

package/cjs/components/portal/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/cjs/components/portal/usePortal.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/cjs/components/status/LoadingAnimation/LoadingAnimation.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/cjs/components/status/Spin/Spin.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/cjs/components/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/cjs/data/themes.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.
  */