@cube-dev/ui-kit 0.9.6 → 0.9.7

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

@@ -0,0 +1,23 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { TooltipTrigger } from './TooltipTrigger';
+import { Tooltip } from './Tooltip';
+import { useEffect, useState } from 'react';
+function TooltipProvider(props) {
+    const [rendered, setRendered] = useState(false);
+    const { title, children, tooltipStyles, width, ...otherProps } = props;
+    useEffect(() => {
+        setRendered(true);
+    });
+    return rendered ? (_jsxs(TooltipTrigger, { ...otherProps, children: [children, _jsx(Tooltip, { styles: tooltipStyles, ...(width ? { width } : null), children: title }, void 0)] }, void 0)) : (_jsx(_Fragment, { children: "children" }, void 0));
+}
+let _TooltipProvider = TooltipProvider;
+export { _TooltipProvider as TooltipProvider };
+
+        

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

@@ -0,0 +1,69 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FocusableProvider } from '@react-aria/focus';
+import { Children, useRef } from 'react';
+import { TooltipContext } from './context';
+import { useOverlayPosition } from '@react-aria/overlays';
+import { useTooltipTrigger } from '@react-aria/tooltip';
+import { useTooltipTriggerState } from '@react-stately/tooltip';
+import { OverlayWrapper } from '../OverlayWrapper';
+import { ActiveZone } from '../../content/ActiveZone/ActiveZone';
+import { Block } from '../../Block';
+const DEFAULT_OFFSET = 8; // Offset needed to reach 4px/5px (med/large) distance between tooltip and trigger button
+const DEFAULT_CROSS_OFFSET = 0;
+function TooltipTrigger(props) {
+    let { children, activeWrap, crossOffset = DEFAULT_CROSS_OFFSET, isDisabled, isMaterial, offset = DEFAULT_OFFSET, trigger: triggerAction, } = props;
+    let [trigger, tooltip] = Children.toArray(children);
+    let state = useTooltipTriggerState({
+        delay: 750,
+        ...props,
+    });
+    let tooltipTriggerRef = useRef(null);
+    let overlayRef = useRef(null);
+    let { triggerProps, tooltipProps } = useTooltipTrigger({
+        isDisabled,
+        trigger: triggerAction,
+    }, state, tooltipTriggerRef);
+    let { overlayProps, arrowProps, placement } = useOverlayPosition({
+        placement: props.placement || 'top',
+        targetRef: tooltipTriggerRef,
+        overlayRef,
+        offset,
+        crossOffset,
+        isOpen: state.isOpen,
+    });
+    if (!activeWrap && typeof trigger === 'string') {
+        console.warn('CubeUIKit: Tooltips are only supported on elements that are both focusable and hoverable. To solve this issue you can: 1) Use active element as a trigger (`Button`, `Link`, etc); 2) Use `activeWrap` attribute to automatically wrap the content; 3) Use `ActiveZone` component to manually wrap the content.');
+        return _jsx(Block, { children: trigger }, void 0);
+    }
+    function onClick(e) {
+        var _a;
+        (_a = e === null || e === void 0 ? void 0 : e.currentTarget) === null || _a === void 0 ? void 0 : _a.parentNode.click();
+    }
+    return (_jsxs(FocusableProvider, { ...triggerProps, ref: tooltipTriggerRef, children: [activeWrap ? (_jsx(ActiveZone, { onClick: onClick, children: trigger }, void 0)) : (trigger), _jsx(TooltipContext.Provider, { value: {
+                    state,
+                    placement,
+                    ref: overlayRef,
+                    overlayProps,
+                    arrowProps,
+                    minOffset: 'var(--gap)',
+                    minScale: '1',
+                    isMaterial,
+                    ...tooltipProps,
+                }, children: _jsx(OverlayWrapper, { isOpen: state.isOpen, placement: props.placement || 'top', children: tooltip }, void 0) }, void 0)] }, void 0));
+}
+/**
+ * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing
+ * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip
+ * relative to the trigger.
+ */
+let _TooltipTrigger = TooltipTrigger;
+export { _TooltipTrigger as TooltipTrigger };
+
+        

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

@@ -0,0 +1,11 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import React from 'react';
+export const TooltipContext = React.createContext({});
+
+        

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

@@ -0,0 +1,168 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckOutlined, LoadingOutlined, WarningOutlined, } from '@ant-design/icons';
+import { mergeProps } from '@react-aria/utils';
+import { cloneElement, forwardRef, useState } from 'react';
+import { useComboBoxState } from '@react-stately/combobox';
+import { useComboBox } from '@react-aria/combobox';
+import { useButton } from '@react-aria/button';
+import { useFormProps } from '../../forms/Form';
+import { useHover } from '@react-aria/interactions';
+import { useProviderProps } from '../../../provider';
+import { useFilter } from '@react-aria/i18n';
+import { Base } from '../../Base';
+import { extractStyles } from '../../../utils/styles';
+import { BLOCK_STYLES, OUTER_STYLES } from '../../../styles/list';
+import { useFocus } from '../../../utils/interactions';
+import { useContextStyles } from '../../../providers/StylesProvider';
+import { modAttrs, useCombinedRefs } from '../../../utils/react';
+import { FieldWrapper } from '../../forms/FieldWrapper';
+import { ListBoxPopup } from '../Select/Select';
+import { Prefix } from '../../layout/Prefix';
+import { Suffix } from '../../layout/Suffix';
+import { Space } from '../../layout/Space';
+import { Item } from '@react-stately/collections';
+import { DEFAULT_INPUT_STYLES } from '../../forms/TextInput/TextInputBase';
+import { useOverlayPosition } from '@react-aria/overlays';
+import { OverlayWrapper } from '../../overlays/OverlayWrapper';
+const CaretDownIcon = () => (_jsx("svg", { "aria-hidden": "true", width: "14", height: "14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M11.49 4.102H2.51c-.269 0-.42.284-.253.478l4.49 5.206a.342.342 0 00.506 0l4.49-5.206c.167-.194.016-.478-.253-.478z", fill: "currentColor" }, void 0) }, void 0));
+const COMBOBOX_STYLES = {
+    position: 'relative',
+    display: 'grid',
+};
+const INPUT_STYLES = {
+    ...DEFAULT_INPUT_STYLES,
+    width: '100%',
+};
+const TRIGGER_STYLES = {
+    display: 'grid',
+    placeItems: 'center',
+    placeContent: 'center',
+    placeSelf: 'stretch',
+    radius: 'right',
+    padding: '0 1x',
+    color: 'inherit',
+    border: 0,
+    fill: {
+        '': '#purple.0',
+        hovered: '#dark.04',
+        pressed: '#dark.08',
+        disabled: '#clear',
+    },
+    cursor: 'pointer',
+};
+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 isAsync = loadingState != null;
+    let { contains } = useFilter({ sensitivity: 'base' });
+    let [suffixWidth, setSuffixWidth] = useState(0);
+    let [prefixWidth, setPrefixWidth] = useState(0);
+    let state = useComboBoxState({
+        ...props,
+        defaultFilter: filter || contains,
+        allowsEmptyCollection: isAsync,
+    });
+    const outerStyles = extractStyles(otherProps, OUTER_STYLES, {
+        ...COMBOBOX_STYLES,
+        ...useContextStyles('ComboBox_Wrapper', props),
+        ...styles,
+    });
+    inputStyles = extractStyles(otherProps, BLOCK_STYLES, {
+        ...INPUT_STYLES,
+        ...useContextStyles('ComboBox', props),
+        ...inputStyles,
+    });
+    triggerStyles = {
+        ...TRIGGER_STYLES,
+        ...useContextStyles('ComboBox_Trigger', props),
+        ...triggerStyles,
+    };
+    ref = useCombinedRefs(ref);
+    inputRef = useCombinedRefs(inputRef);
+    triggerRef = useCombinedRefs(triggerRef);
+    popoverRef = useCombinedRefs(popoverRef);
+    listBoxRef = useCombinedRefs(listBoxRef);
+    let { labelProps, inputProps, listBoxProps, buttonProps: triggerProps, } = useComboBox({
+        ...props,
+        inputRef,
+        buttonRef: triggerRef,
+        listBoxRef,
+        popoverRef,
+        menuTrigger,
+    }, state);
+    let { overlayProps, placement } = useOverlayPosition({
+        targetRef: triggerRef,
+        overlayRef: popoverRef,
+        scrollRef: listBoxRef,
+        placement: `${direction} end`,
+        shouldFlip: shouldFlip,
+        isOpen: state.isOpen,
+        onClose: state.close,
+        offset: overlayOffset,
+    });
+    if (prefix) {
+        inputStyles.paddingLeft = `${prefixWidth}px`;
+    }
+    inputStyles.paddingRight = `${suffixWidth}px`;
+    let { isFocused, focusProps } = useFocus({ isDisabled });
+    let { hoverProps, isHovered } = useHover({ isDisabled });
+    // Get props for the button based on the trigger props from useComboBox
+    let { buttonProps, isPressed: isTriggerPressed } = useButton(triggerProps, triggerRef);
+    let { hoverProps: triggerHoverProps, isHovered: isTriggerHovered } = useHover({ isDisabled });
+    let { focusProps: triggerFocusProps, isFocused: isTriggerFocused } = useFocus({ isDisabled }, true);
+    let isInvalid = validationState === 'invalid';
+    let validationIcon = isInvalid ? (_jsx(WarningOutlined, { style: { color: 'var(--danger-color)' } }, void 0)) : (_jsx(CheckOutlined, { style: { color: 'var(--success-color)' } }, void 0));
+    let validation = cloneElement(validationIcon);
+    let comboBoxWidth = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+    let comboBoxField = (_jsxs(Base, { ref: ref, qa: "ComboBoxWrapper", ...modAttrs({
+            invalid: isInvalid,
+            valid: validationState === 'valid',
+            disabled: isDisabled,
+            hovered: isHovered,
+            focused: isFocused,
+        }), styles: outerStyles, style: {
+            zIndex: isFocused ? 1 : 'initial',
+        }, "data-size": size, children: [_jsx(Base, { qa: qa || 'ComboBox', as: "input", ...mergeProps(inputProps, hoverProps, focusProps), ref: inputRef, autoComplete: autoComplete, styles: inputStyles, ...modAttrs({
+                    invalid: isInvalid,
+                    valid: validationState === 'valid',
+                    disabled: isDisabled,
+                    hovered: isHovered,
+                    focused: isFocused,
+                }), "data-size": size }, void 0), prefix ? (_jsx(Prefix, { onWidthChange: setPrefixWidth, padding: "0 1x 0 1.5x", opacity: isDisabled ? '@disabled-opacity' : false, placeItems: "center", outerGap: 0, children: prefix }, void 0)) : null, _jsxs(Suffix, { onWidthChange: setSuffixWidth, opacity: isDisabled ? '@disabled-opacity' : false, children: [validationState || isLoading ? (_jsxs(Space, { gap: false, padding: "0 1x", children: [validationState && !isLoading ? validation : null, isLoading && _jsx(LoadingOutlined, {}, void 0)] }, void 0)) : null, suffix, !hideTrigger ? (_jsx(Base, { as: "button", ...mergeProps(buttonProps, triggerFocusProps, triggerHoverProps), ...modAttrs({
+                            pressed: isTriggerPressed,
+                            focused: isTriggerFocused,
+                            hovered: isTriggerHovered,
+                            disabled: isDisabled,
+                        }), "data-size": size, isDisabled: isDisabled, ref: triggerRef, styles: triggerStyles, children: _jsx(CaretDownIcon, {}, void 0) }, void 0)) : null] }, void 0), _jsx(OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: _jsx(ListBoxPopup, { ...listBoxProps, listBoxRef: listBoxRef, popoverRef: popoverRef, overlayProps: overlayProps, shouldUseVirtualFocus: true, placement: placement, state: state, listBoxStyles: listBoxStyles, overlayStyles: overlayStyles, optionStyles: optionStyles, minWidth: comboBoxWidth }, void 0) }, void 0)] }, void 0));
+    return (_jsx(FieldWrapper, { ...{
+            labelPosition,
+            label,
+            styles,
+            isRequired,
+            labelStyles,
+            necessityIndicator,
+            labelProps,
+            isDisabled,
+            validationState,
+            message,
+            description,
+            requiredMark,
+            Component: comboBoxField,
+            ref: ref,
+        } }, void 0));
+}
+const _ComboBox = forwardRef(ComboBox);
+const __ComboBox = Object.assign(_ComboBox, { Item });
+__ComboBox.cubeInputType = 'ComboBox';
+export { __ComboBox as ComboBox };
+
+        

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

@@ -0,0 +1,254 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckOutlined, LoadingOutlined, WarningOutlined, } from '@ant-design/icons';
+import { mergeProps } from '../../../utils/react';
+import { cloneElement, forwardRef, useRef, useState, } from 'react';
+import { useSelectState } from '@react-stately/select';
+import { HiddenSelect, useSelect } from '@react-aria/select';
+import { useListBox, useOption } from '@react-aria/listbox';
+import { useButton } from '@react-aria/button';
+import { FocusScope } from '@react-aria/focus';
+import { DismissButton, useOverlay, useOverlayPosition, } from '@react-aria/overlays';
+import { useFormProps } from '../../forms/Form/Form';
+import { useFocus as useAriaFocus, useHover } from '@react-aria/interactions';
+import { useProviderProps } from '../../../provider';
+import { Base } from '../../Base';
+import { extractStyles } from '../../../utils/styles';
+import { BLOCK_STYLES, OUTER_STYLES } from '../../../styles/list';
+import { useFocus } from '../../../utils/interactions';
+import { useContextStyles } from '../../../providers/StylesProvider';
+import { useCombinedRefs } from '../../../utils/react';
+import { FieldWrapper } from '../../forms/FieldWrapper';
+import { Item } from '@react-stately/collections';
+import { OverlayWrapper } from '../../overlays/OverlayWrapper';
+import { getOverlayTransitionCSS } from '../../../utils/transitions';
+const CaretDownIcon = () => (_jsx("svg", { "aria-hidden": "true", width: "14", height: "14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M11.49 4.102H2.51c-.269 0-.42.284-.253.478l4.49 5.206a.342.342 0 00.506 0l4.49-5.206c.167-.194.016-.478-.253-.478z", fill: "currentColor" }, void 0) }, void 0));
+const SELECT_STYLES = {
+    display: 'grid',
+    position: 'relative',
+};
+const INPUT_STYLES = {
+    display: 'grid',
+    flow: 'column',
+    gridColumns: {
+        '': '1fr auto',
+        'with-prefix': 'auto 1fr auto',
+    },
+    placeItems: 'center stretch',
+    placeContent: 'center stretch',
+    gap: '1x',
+    padding: {
+        '': '(1.25x - 1bw) 1x (1.25x - 1bw) (1.5x - 1bw)',
+        '[data-size="small"]': '(.75x - 1px) 1x (.75x - 1px)  (1.5x - 1px)',
+    },
+    border: {
+        '': true,
+        invalid: '#danger-text.50',
+        valid: '#success-text.50',
+        focused: true,
+    },
+    radius: true,
+    reset: 'input',
+    preset: 'default',
+    outline: {
+        '': '#purple-03.0',
+        focused: '#purple-03',
+    },
+    color: {
+        '': '#dark.85',
+        invalid: '#danger-text',
+        focused: '#dark.85',
+        disabled: '#dark.30',
+    },
+    fill: {
+        '': '#purple.0',
+        hovered: '#dark.04',
+        pressed: '#dark.08',
+        disabled: '#dark.04',
+    },
+    fontWeight: 400,
+    textAlign: 'left',
+    cursor: 'pointer',
+    transition: 'theme',
+};
+const OVERLAY_STYLES = {
+    position: 'absolute',
+};
+const LISTBOX_STYLES = {
+    display: 'flex',
+    gap: '.5x',
+    flow: 'column',
+    margin: '0',
+    padding: '.5x',
+    listStyle: 'none',
+    radius: true,
+    fill: '#white',
+    shadow: '0px 4px 16px #shadow',
+    height: 'initial 30x',
+    overflow: 'hidden auto',
+    styledScrollbar: true,
+};
+const OPTION_STYLES = {
+    display: 'block',
+    padding: '(1x - 1px) (1.5x - 1px)',
+    cursor: 'pointer',
+    radius: true,
+    fill: {
+        '': '#white',
+        focused: '#dark.04',
+        selected: '#purple',
+        'focused & selected': '#purple-text',
+        disabled: '#dark.04',
+    },
+    color: {
+        '': '#dark.85',
+        selected: '#white',
+        disabled: '#dark.30',
+    },
+    preset: 't3m',
+};
+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 state = useSelectState(props);
+    const outerStyles = extractStyles(otherProps, OUTER_STYLES, {
+        ...SELECT_STYLES,
+        ...useContextStyles('Select_Wrapper', otherProps),
+        ...styles,
+    });
+    inputStyles = extractStyles(otherProps, BLOCK_STYLES, {
+        ...INPUT_STYLES,
+        ...useContextStyles('Select', otherProps),
+        ...inputStyles,
+    });
+    if (styles) {
+    }
+    ref = useCombinedRefs(ref);
+    triggerRef = useCombinedRefs(triggerRef);
+    popoverRef = useCombinedRefs(popoverRef);
+    listBoxRef = useCombinedRefs(listBoxRef);
+    let { labelProps, triggerProps, valueProps, menuProps } = useSelect(props, state, triggerRef);
+    let { overlayProps, placement } = useOverlayPosition({
+        targetRef: triggerRef,
+        overlayRef: popoverRef,
+        scrollRef: listBoxRef,
+        // @ts-ignore
+        placement: `${direction} end`,
+        shouldFlip: shouldFlip,
+        isOpen: state.isOpen,
+        onClose: state.close,
+        offset: overlayOffset,
+    });
+    let { isFocused, focusProps } = useFocus({ isDisabled }, true);
+    let { hoverProps, isHovered } = useHover({ isDisabled });
+    // Get props for the button based on the trigger props from useSelect
+    let { buttonProps } = useButton(triggerProps, triggerRef);
+    let isInvalid = validationState === 'invalid';
+    let validationIcon = isInvalid ? (_jsx(WarningOutlined, { style: { color: 'var(--danger-color)' } }, void 0)) : (_jsx(CheckOutlined, { 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 selectField = (_jsxs(Base, { qa: "SelectWrapper", mods: {
+            invalid: isInvalid,
+            valid: validationState === 'valid',
+            disabled: isDisabled,
+            hovered: isHovered,
+            focused: isFocused,
+        }, styles: outerStyles, "data-size": size, children: [_jsx(HiddenSelect, { state: state, triggerRef: triggerRef, label: props.label, name: props.name }, void 0), _jsxs(Base, { qa: qa || 'Select', as: "button", ...mergeProps(buttonProps, hoverProps, focusProps), ref: triggerRef, styles: inputStyles, "data-size": size, mods: {
+                    invalid: isInvalid,
+                    valid: validationState === 'valid',
+                    disabled: isDisabled,
+                    hovered: isHovered,
+                    focused: isFocused,
+                    'with-prefix': !!prefix,
+                }, children: [prefix, _jsx("span", { ...valueProps, children: state.selectedItem ? state.selectedItem.rendered : placeholder }, void 0), (validationState || isLoading || suffix) && (_jsxs("div", { children: [validationState && !isLoading ? validation : null, isLoading && _jsx(LoadingOutlined, {}, void 0), suffix] }, void 0)), _jsx(CaretDownIcon, {}, void 0)] }, void 0), _jsx(OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: _jsx(ListBoxPopup, { ...menuProps, popoverRef: popoverRef, listBoxRef: listBoxRef, overlayProps: overlayProps, placement: placement, state: state, listBoxStyles: listBoxStyles, overlayStyles: overlayStyles, optionStyles: optionStyles, minWidth: triggerWidth }, void 0) }, void 0)] }, void 0));
+    return (_jsx(FieldWrapper, { ...{
+            labelPosition,
+            label,
+            styles,
+            isRequired,
+            labelStyles,
+            necessityIndicator,
+            labelProps,
+            isDisabled,
+            validationState,
+            message,
+            description,
+            requiredMark,
+            tooltip,
+            Component: selectField,
+            ref: ref,
+        } }, void 0));
+}
+export function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, overlayStyles, optionStyles, overlayProps: parentOverlayProps, shouldUseVirtualFocus = false, placement, minWidth, ...otherProps }) {
+    // Get props for the listbox
+    let { listBoxProps } = useListBox({
+        autoFocus: state.focusStrategy || true,
+        shouldUseVirtualFocus,
+        ...otherProps,
+    }, state, listBoxRef);
+    listBoxStyles = {
+        ...LISTBOX_STYLES,
+        ...useContextStyles('ListBoxPopup'),
+        ...listBoxStyles,
+    };
+    // Handle events that should cause the popup to close,
+    // e.g. blur, clicking outside, or pressing the escape key.
+    let { overlayProps } = useOverlay({
+        onClose: () => state.close(),
+        shouldCloseOnBlur: true,
+        isOpen: state.isOpen,
+        isDismissable: true,
+    }, popoverRef);
+    // Wrap in <FocusScope> so that focus is restored back to the
+    // trigger when the popup is closed. In addition, add hidden
+    // <DismissButton> components at the start and end of the list
+    // to allow screen reader users to dismiss the popup easily.
+    return (_jsx(Base, { styles: {
+            minWidth: minWidth ? `${minWidth}px` : 'initial',
+            ...OVERLAY_STYLES,
+            overlayStyles,
+        }, ...parentOverlayProps, ...overlayProps, css: getOverlayTransitionCSS({ placement }), "data-position": placement, ref: popoverRef, children: _jsxs(FocusScope, { restoreFocus: true, children: [_jsx(DismissButton, { onDismiss: () => state.close() }, void 0), _jsx(Base, { as: "ul", 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 }) {
+    let ref = useRef(null);
+    let isDisabled = state.disabledKeys.has(item.key);
+    let isSelected = state.selectionManager.isSelected(item.key);
+    let isVirtualFocused = state.selectionManager.focusedKey === item.key;
+    styles = {
+        ...OPTION_STYLES,
+        ...useContextStyles('Option'),
+        ...styles,
+    };
+    let { optionProps } = useOption({
+        key: item.key,
+        isDisabled,
+        isSelected,
+        shouldSelectOnPressUp: true,
+        shouldFocusOnHover: true,
+        shouldUseVirtualFocus,
+    }, state, ref);
+    // Handle focus events so we can apply highlighted
+    // style to the focused option
+    let [isFocused, setFocused] = useState(false);
+    let { focusProps } = useAriaFocus({ onFocusChange: setFocused });
+    return (_createElement(Base, { as: "li", ...mergeProps(optionProps, focusProps), ref: ref, mods: {
+            selected: isSelected,
+            focused: shouldUseVirtualFocus ? isVirtualFocused : isFocused,
+            disabled: isDisabled,
+        }, "data-theme": isSelected ? 'special' : undefined, styles: styles, key: item.key }, item.rendered));
+}
+const _Select = forwardRef(Select);
+_Select.cubeInputType = 'Select';
+const __Select = Object.assign(_Select, { Item });
+export { __Select as Select };
+
+        

package/es/components/portal/Portal.js

@@ -0,0 +1,41 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import ReactDOM from 'react-dom';
+import { usePortal } from './usePortal';
+/**
+ * This component renders its children outside the current DOM hierarchy.
+ *
+ * React [doesn't support](https://github.com/facebook/react/issues/13097) portal API in SSR, so, if you want to
+ * render a Portal in SSR, use prop `disabled`.
+ *
+ * By default, Portal's children render under the `<Root />` component.
+ *
+ * ***Important***: Since React doesn't support portals on SSR, `<Portal />` children renders in the next tick.
+ * If you need to make some computations, use the `onMount` callback
+ *
+ * @see https://reactjs.org/docs/portals.html
+ *
+ * @example ```jsx
+ *  <div>
+ *    Portal will be rendered outside me!
+ *
+ *    <Portal>
+ *      <div>some content will be showed outside of parent container</div>
+ *    </Portal>
+ *  </div>
+ * ```
+ */
+export function Portal(props) {
+    const { children, mountRoot, isDisabled } = usePortal(props);
+    if (isDisabled)
+        return _jsx(_Fragment, { children: children }, void 0);
+    return mountRoot ? ReactDOM.createPortal(children, mountRoot) : null;
+}
+
+        

package/es/components/portal/PortalProvider.js

@@ -0,0 +1,24 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { createContext, useContext } from 'react';
+const PortalContext = createContext(null);
+/**
+ * @private
+ * @internal Don't even try to use it
+ */
+export function usePortalContext() {
+    const root = useContext(PortalContext);
+    return { root };
+}
+/**
+ * @private
+ * @internal Don't even try to use it
+ */
+export const PortalProvider = PortalContext.Provider;
+
+        

package/es/components/portal/index.js

@@ -0,0 +1,11 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+export { PortalProvider } from './PortalProvider';
+export * from './Portal';
+
+        

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

@@ -0,0 +1,13 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Portal } from '../../Portal';
+import { Divider } from '../../../content/Divider';
+export const Basic = (args) => (_jsxs(_Fragment, { children: ["By default, Portal content should be there ", ' -> ', _jsxs(Portal, { ...args, children: ["Portal's content.", !args.isDisabled && ' But, if you disable me, I\'ll be near the arrow'] }, void 0), _jsx(Divider, {}, void 0)] }, void 0));
+
+        

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

@@ -0,0 +1,10 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+export * from './basic';
+
+        

package/es/components/portal/types.js

@@ -0,0 +1,10 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+export {};
+
+