@cube-dev/ui-kit 0.9.5 → 0.9.8

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

@@ -0,0 +1,17 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * 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.TooltipContext = void 0;
+const react_1 = __importDefault(require("react"));
+exports.TooltipContext = react_1.default.createContext({});
+
+        

package/cjs/components/pickers/ComboBox/ComboBox.js

@@ -0,0 +1,171 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComboBox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@ant-design/icons");
+const utils_1 = require("@react-aria/utils");
+const react_1 = require("react");
+const combobox_1 = require("@react-stately/combobox");
+const combobox_2 = require("@react-aria/combobox");
+const button_1 = require("@react-aria/button");
+const Form_1 = require("../../forms/Form");
+const interactions_1 = require("@react-aria/interactions");
+const provider_1 = require("../../../provider");
+const i18n_1 = require("@react-aria/i18n");
+const Base_1 = require("../../Base");
+const styles_1 = require("../../../utils/styles");
+const list_1 = require("../../../styles/list");
+const interactions_2 = require("../../../utils/interactions");
+const StylesProvider_1 = require("../../../providers/StylesProvider");
+const react_2 = require("../../../utils/react");
+const FieldWrapper_1 = require("../../forms/FieldWrapper");
+const Select_1 = require("../Select/Select");
+const Prefix_1 = require("../../layout/Prefix");
+const Suffix_1 = require("../../layout/Suffix");
+const Space_1 = require("../../layout/Space");
+const collections_1 = require("@react-stately/collections");
+const TextInputBase_1 = require("../../forms/TextInput/TextInputBase");
+const overlays_1 = require("@react-aria/overlays");
+const OverlayWrapper_1 = require("../../overlays/OverlayWrapper");
+const CaretDownIcon = () => ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", width: "14", height: "14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.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 = {
+    ...TextInputBase_1.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 = (0, provider_1.useProviderProps)(props);
+    props = (0, Form_1.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 } = (0, i18n_1.useFilter)({ sensitivity: 'base' });
+    let [suffixWidth, setSuffixWidth] = (0, react_1.useState)(0);
+    let [prefixWidth, setPrefixWidth] = (0, react_1.useState)(0);
+    let state = (0, combobox_1.useComboBoxState)({
+        ...props,
+        defaultFilter: filter || contains,
+        allowsEmptyCollection: isAsync,
+    });
+    const outerStyles = (0, styles_1.extractStyles)(otherProps, list_1.OUTER_STYLES, {
+        ...COMBOBOX_STYLES,
+        ...(0, StylesProvider_1.useContextStyles)('ComboBox_Wrapper', props),
+        ...styles,
+    });
+    inputStyles = (0, styles_1.extractStyles)(otherProps, list_1.BLOCK_STYLES, {
+        ...INPUT_STYLES,
+        ...(0, StylesProvider_1.useContextStyles)('ComboBox', props),
+        ...inputStyles,
+    });
+    triggerStyles = {
+        ...TRIGGER_STYLES,
+        ...(0, StylesProvider_1.useContextStyles)('ComboBox_Trigger', props),
+        ...triggerStyles,
+    };
+    ref = (0, react_2.useCombinedRefs)(ref);
+    inputRef = (0, react_2.useCombinedRefs)(inputRef);
+    triggerRef = (0, react_2.useCombinedRefs)(triggerRef);
+    popoverRef = (0, react_2.useCombinedRefs)(popoverRef);
+    listBoxRef = (0, react_2.useCombinedRefs)(listBoxRef);
+    let { labelProps, inputProps, listBoxProps, buttonProps: triggerProps, } = (0, combobox_2.useComboBox)({
+        ...props,
+        inputRef,
+        buttonRef: triggerRef,
+        listBoxRef,
+        popoverRef,
+        menuTrigger,
+    }, state);
+    let { overlayProps, placement } = (0, overlays_1.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 } = (0, interactions_2.useFocus)({ isDisabled });
+    let { hoverProps, isHovered } = (0, interactions_1.useHover)({ isDisabled });
+    // Get props for the button based on the trigger props from useComboBox
+    let { buttonProps, isPressed: isTriggerPressed } = (0, button_1.useButton)(triggerProps, triggerRef);
+    let { hoverProps: triggerHoverProps, isHovered: isTriggerHovered } = (0, interactions_1.useHover)({ isDisabled });
+    let { focusProps: triggerFocusProps, isFocused: isTriggerFocused } = (0, interactions_2.useFocus)({ isDisabled }, true);
+    let isInvalid = validationState === 'invalid';
+    let validationIcon = isInvalid ? ((0, jsx_runtime_1.jsx)(icons_1.WarningOutlined, { style: { color: 'var(--danger-color)' } }, void 0)) : ((0, jsx_runtime_1.jsx)(icons_1.CheckOutlined, { style: { color: 'var(--success-color)' } }, void 0));
+    let validation = (0, react_1.cloneElement)(validationIcon);
+    let comboBoxWidth = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+    let comboBoxField = ((0, jsx_runtime_1.jsxs)(Base_1.Base, { ref: ref, qa: "ComboBoxWrapper", ...(0, react_2.modAttrs)({
+            invalid: isInvalid,
+            valid: validationState === 'valid',
+            disabled: isDisabled,
+            hovered: isHovered,
+            focused: isFocused,
+        }), styles: outerStyles, style: {
+            zIndex: isFocused ? 1 : 'initial',
+        }, "data-size": size, children: [(0, jsx_runtime_1.jsx)(Base_1.Base, { qa: qa || 'ComboBox', as: "input", ...(0, utils_1.mergeProps)(inputProps, hoverProps, focusProps), ref: inputRef, autoComplete: autoComplete, styles: inputStyles, ...(0, react_2.modAttrs)({
+                    invalid: isInvalid,
+                    valid: validationState === 'valid',
+                    disabled: isDisabled,
+                    hovered: isHovered,
+                    focused: isFocused,
+                }), "data-size": size }, void 0), prefix ? ((0, jsx_runtime_1.jsx)(Prefix_1.Prefix, { onWidthChange: setPrefixWidth, padding: "0 1x 0 1.5x", opacity: isDisabled ? '@disabled-opacity' : false, placeItems: "center", outerGap: 0, children: prefix }, void 0)) : null, (0, jsx_runtime_1.jsxs)(Suffix_1.Suffix, { onWidthChange: setSuffixWidth, opacity: isDisabled ? '@disabled-opacity' : false, children: [validationState || isLoading ? ((0, jsx_runtime_1.jsxs)(Space_1.Space, { gap: false, padding: "0 1x", children: [validationState && !isLoading ? validation : null, isLoading && (0, jsx_runtime_1.jsx)(icons_1.LoadingOutlined, {}, void 0)] }, void 0)) : null, suffix, !hideTrigger ? ((0, jsx_runtime_1.jsx)(Base_1.Base, { as: "button", ...(0, utils_1.mergeProps)(buttonProps, triggerFocusProps, triggerHoverProps), ...(0, react_2.modAttrs)({
+                            pressed: isTriggerPressed,
+                            focused: isTriggerFocused,
+                            hovered: isTriggerHovered,
+                            disabled: isDisabled,
+                        }), "data-size": size, isDisabled: isDisabled, ref: triggerRef, styles: triggerStyles, children: (0, jsx_runtime_1.jsx)(CaretDownIcon, {}, void 0) }, void 0)) : null] }, void 0), (0, jsx_runtime_1.jsx)(OverlayWrapper_1.OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: (0, jsx_runtime_1.jsx)(Select_1.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 ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...{
+            labelPosition,
+            label,
+            styles,
+            isRequired,
+            labelStyles,
+            necessityIndicator,
+            labelProps,
+            isDisabled,
+            validationState,
+            message,
+            description,
+            requiredMark,
+            Component: comboBoxField,
+            ref: ref,
+        } }, void 0));
+}
+const _ComboBox = (0, react_1.forwardRef)(ComboBox);
+const __ComboBox = Object.assign(_ComboBox, { Item: collections_1.Item });
+exports.ComboBox = __ComboBox;
+__ComboBox.cubeInputType = 'ComboBox';
+
+        

package/cjs/components/pickers/Select/Select.js

@@ -0,0 +1,258 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = exports.ListBoxPopup = void 0;
+const react_1 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_1 = require("@ant-design/icons");
+const react_2 = require("../../../utils/react");
+const react_3 = require("react");
+const select_1 = require("@react-stately/select");
+const select_2 = require("@react-aria/select");
+const listbox_1 = require("@react-aria/listbox");
+const button_1 = require("@react-aria/button");
+const focus_1 = require("@react-aria/focus");
+const overlays_1 = require("@react-aria/overlays");
+const Form_1 = require("../../forms/Form/Form");
+const interactions_1 = require("@react-aria/interactions");
+const provider_1 = require("../../../provider");
+const Base_1 = require("../../Base");
+const styles_1 = require("../../../utils/styles");
+const list_1 = require("../../../styles/list");
+const interactions_2 = require("../../../utils/interactions");
+const StylesProvider_1 = require("../../../providers/StylesProvider");
+const react_4 = require("../../../utils/react");
+const FieldWrapper_1 = require("../../forms/FieldWrapper");
+const collections_1 = require("@react-stately/collections");
+const OverlayWrapper_1 = require("../../overlays/OverlayWrapper");
+const transitions_1 = require("../../../utils/transitions");
+const CaretDownIcon = () => ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", width: "14", height: "14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.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 = (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 state = (0, select_1.useSelectState)(props);
+    const outerStyles = (0, styles_1.extractStyles)(otherProps, list_1.OUTER_STYLES, {
+        ...SELECT_STYLES,
+        ...(0, StylesProvider_1.useContextStyles)('Select_Wrapper', otherProps),
+        ...styles,
+    });
+    inputStyles = (0, styles_1.extractStyles)(otherProps, list_1.BLOCK_STYLES, {
+        ...INPUT_STYLES,
+        ...(0, StylesProvider_1.useContextStyles)('Select', otherProps),
+        ...inputStyles,
+    });
+    if (styles) {
+    }
+    ref = (0, react_4.useCombinedRefs)(ref);
+    triggerRef = (0, react_4.useCombinedRefs)(triggerRef);
+    popoverRef = (0, react_4.useCombinedRefs)(popoverRef);
+    listBoxRef = (0, react_4.useCombinedRefs)(listBoxRef);
+    let { labelProps, triggerProps, valueProps, menuProps } = (0, select_2.useSelect)(props, state, triggerRef);
+    let { overlayProps, placement } = (0, overlays_1.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 } = (0, interactions_2.useFocus)({ isDisabled }, true);
+    let { hoverProps, isHovered } = (0, interactions_1.useHover)({ isDisabled });
+    // Get props for the button based on the trigger props from useSelect
+    let { buttonProps } = (0, button_1.useButton)(triggerProps, triggerRef);
+    let isInvalid = validationState === 'invalid';
+    let validationIcon = isInvalid ? ((0, jsx_runtime_1.jsx)(icons_1.WarningOutlined, { style: { color: 'var(--danger-color)' } }, void 0)) : ((0, jsx_runtime_1.jsx)(icons_1.CheckOutlined, { style: { color: 'var(--success-color)' } }, void 0));
+    let validation = (0, react_3.cloneElement)(validationIcon);
+    let triggerWidth = (_a = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+    let selectField = ((0, jsx_runtime_1.jsxs)(Base_1.Base, { qa: "SelectWrapper", mods: {
+            invalid: isInvalid,
+            valid: validationState === 'valid',
+            disabled: isDisabled,
+            hovered: isHovered,
+            focused: isFocused,
+        }, styles: outerStyles, "data-size": size, children: [(0, jsx_runtime_1.jsx)(select_2.HiddenSelect, { state: state, triggerRef: triggerRef, label: props.label, name: props.name }, void 0), (0, jsx_runtime_1.jsxs)(Base_1.Base, { qa: qa || 'Select', as: "button", ...(0, react_2.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, (0, jsx_runtime_1.jsx)("span", { ...valueProps, children: state.selectedItem ? state.selectedItem.rendered : placeholder }, void 0), (validationState || isLoading || suffix) && ((0, jsx_runtime_1.jsxs)("div", { children: [validationState && !isLoading ? validation : null, isLoading && (0, jsx_runtime_1.jsx)(icons_1.LoadingOutlined, {}, void 0), suffix] }, void 0)), (0, jsx_runtime_1.jsx)(CaretDownIcon, {}, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(OverlayWrapper_1.OverlayWrapper, { isOpen: state.isOpen && !isDisabled, children: (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)(FieldWrapper_1.FieldWrapper, { ...{
+            labelPosition,
+            label,
+            styles,
+            isRequired,
+            labelStyles,
+            necessityIndicator,
+            labelProps,
+            isDisabled,
+            validationState,
+            message,
+            description,
+            requiredMark,
+            tooltip,
+            Component: selectField,
+            ref: ref,
+        } }, void 0));
+}
+function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, overlayStyles, optionStyles, overlayProps: parentOverlayProps, shouldUseVirtualFocus = false, placement, minWidth, ...otherProps }) {
+    // Get props for the listbox
+    let { listBoxProps } = (0, listbox_1.useListBox)({
+        autoFocus: state.focusStrategy || true,
+        shouldUseVirtualFocus,
+        ...otherProps,
+    }, state, listBoxRef);
+    listBoxStyles = {
+        ...LISTBOX_STYLES,
+        ...(0, StylesProvider_1.useContextStyles)('ListBoxPopup'),
+        ...listBoxStyles,
+    };
+    // Handle events that should cause the popup to close,
+    // e.g. blur, clicking outside, or pressing the escape key.
+    let { overlayProps } = (0, overlays_1.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 ((0, jsx_runtime_1.jsx)(Base_1.Base, { styles: {
+            minWidth: minWidth ? `${minWidth}px` : 'initial',
+            ...OVERLAY_STYLES,
+            overlayStyles,
+        }, ...parentOverlayProps, ...overlayProps, css: (0, transitions_1.getOverlayTransitionCSS)({ placement }), "data-position": placement, ref: popoverRef, children: (0, jsx_runtime_1.jsxs)(focus_1.FocusScope, { restoreFocus: true, children: [(0, jsx_runtime_1.jsx)(overlays_1.DismissButton, { onDismiss: () => state.close() }, void 0), (0, jsx_runtime_1.jsx)(Base_1.Base, { as: "ul", styles: listBoxStyles, ...(0, react_2.mergeProps)(listBoxProps, otherProps), ref: listBoxRef, children: Array.from(state.collection).map((item) => ((0, jsx_runtime_1.jsx)(Option, { item: item, state: state, styles: optionStyles, shouldUseVirtualFocus: shouldUseVirtualFocus }, item.key))) }, void 0), (0, jsx_runtime_1.jsx)(overlays_1.DismissButton, { onDismiss: () => state.close() }, void 0)] }, void 0) }, void 0));
+}
+exports.ListBoxPopup = ListBoxPopup;
+function Option({ item, state, styles, shouldUseVirtualFocus }) {
+    let ref = (0, react_3.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,
+        ...(0, StylesProvider_1.useContextStyles)('Option'),
+        ...styles,
+    };
+    let { optionProps } = (0, listbox_1.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] = (0, react_3.useState)(false);
+    let { focusProps } = (0, interactions_1.useFocus)({ onFocusChange: setFocused });
+    return ((0, react_1.createElement)(Base_1.Base, { as: "li", ...(0, react_2.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 = (0, react_3.forwardRef)(Select);
+_Select.cubeInputType = 'Select';
+const __Select = Object.assign(_Select, { Item: collections_1.Item });
+exports.Select = __Select;
+
+        

package/cjs/components/portal/Portal.js

@@ -0,0 +1,48 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * 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.Portal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_dom_1 = __importDefault(require("react-dom"));
+const usePortal_1 = require("./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>
+ * ```
+ */
+function Portal(props) {
+    const { children, mountRoot, isDisabled } = (0, usePortal_1.usePortal)(props);
+    if (isDisabled)
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }, void 0);
+    return mountRoot ? react_dom_1.default.createPortal(children, mountRoot) : null;
+}
+exports.Portal = Portal;
+
+        

package/cjs/components/portal/PortalProvider.js

@@ -0,0 +1,28 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PortalProvider = exports.usePortalContext = void 0;
+const react_1 = require("react");
+const PortalContext = (0, react_1.createContext)(null);
+/**
+ * @private
+ * @internal Don't even try to use it
+ */
+function usePortalContext() {
+    const root = (0, react_1.useContext)(PortalContext);
+    return { root };
+}
+exports.usePortalContext = usePortalContext;
+/**
+ * @private
+ * @internal Don't even try to use it
+ */
+exports.PortalProvider = PortalContext.Provider;
+
+        

package/cjs/components/portal/index.js

@@ -0,0 +1,25 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * 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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PortalProvider = void 0;
+var PortalProvider_1 = require("./PortalProvider");
+Object.defineProperty(exports, "PortalProvider", { enumerable: true, get: function () { return PortalProvider_1.PortalProvider; } });
+__exportStar(require("./Portal"), exports);
+
+        

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

@@ -0,0 +1,17 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Basic = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Portal_1 = require("../../Portal");
+const Divider_1 = require("../../../content/Divider");
+const Basic = (args) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["By default, Portal content should be there ", ' -> ', (0, jsx_runtime_1.jsxs)(Portal_1.Portal, { ...args, children: ["Portal's content.", !args.isDisabled && ' But, if you disable me, I\'ll be near the arrow'] }, void 0), (0, jsx_runtime_1.jsx)(Divider_1.Divider, {}, void 0)] }, void 0));
+exports.Basic = Basic;
+
+        

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

@@ -0,0 +1,22 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * 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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./basic"), exports);
+
+        

package/cjs/components/portal/types.js

@@ -0,0 +1,11 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+
+        

package/cjs/components/portal/usePortal.js

@@ -0,0 +1,50 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * 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.usePortal = void 0;
+const react_1 = require("react");
+const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
+const PortalProvider_1 = require("./PortalProvider");
+/**
+ * @internal Do not use it
+ */
+function usePortal(props) {
+    const { children, isDisabled = false, root = null, onMount } = props;
+    const onMountRef = (0, react_1.useRef)(onMount);
+    const portalContext = (0, PortalProvider_1.usePortalContext)();
+    const [mountRoot, setMountRoot] = (0, react_1.useState)(null);
+    onMountRef.current = onMount;
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        if (!isDisabled) {
+            const contextRoot = portalContext.root;
+            const currentRoot = (_a = root === null || root === void 0 ? void 0 : root.current) !== null && _a !== void 0 ? _a : null;
+            const currentContextRoot = (_b = contextRoot === null || contextRoot === void 0 ? void 0 : contextRoot.current) !== null && _b !== void 0 ? _b : null;
+            (0, tiny_invariant_1.default)(!(contextRoot === null && currentRoot === null), 'Before using Portal, you need to specify a root, where the component should be mounted or put the component under the <Root /> component');
+            setMountRoot(currentRoot !== null && currentRoot !== void 0 ? currentRoot : currentContextRoot);
+        }
+    }, [root, portalContext.root, isDisabled]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (isDisabled || mountRoot) {
+            (_a = onMountRef.current) === null || _a === void 0 ? void 0 : _a.call(onMountRef);
+        }
+    }, [isDisabled, mountRoot]);
+    return {
+        isDisabled,
+        children,
+        mountRoot,
+    };
+}
+exports.usePortal = usePortal;
+
+