@canlooks/can-ui 0.0.1

package/dist/cjs/components/inputBase/inputBase.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputBase = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const inputBase_style_1 = require("./inputBase.style");
+const utils_1 = require("../../utils");
+const app_1 = require("../app");
+const icons_1 = require("@ant-design/icons");
+const button_1 = require("../button");
+const loadingIndicator_1 = require("../loadingIndicator");
+exports.InputBase = (0, react_1.forwardRef)(({ variant = 'outlined', size, shape, color = 'primary', children, prefix, suffix, onClear, loading, type, clearable = type !== 'number', 
+// 以下属性传递给<input />
+min = -Infinity, max = Infinity, step, precision, placeholder, disabled, readOnly, autoFocus, defaultValue, value, onChange, ...props }, ref) => {
+    const theme = (0, app_1.useTheme)();
+    size ??= theme.size;
+    const innerInputRef = (0, react_1.useRef)(null);
+    const wrapClickHandler = (e) => {
+        props.onClick?.(e);
+        // 点击包裹元素时，聚焦到内部的input元素
+        !disabled && innerInputRef.current && innerInputRef.current !== document.activeElement && innerInputRef.current.focus();
+    };
+    const [innerValue, setInnerValue] = (0, utils_1.useControlled)(defaultValue, value);
+    const changeHandler = (e) => {
+        onChange?.(e);
+        setInnerValue(e.target.value);
+    };
+    const clear = (e) => {
+        // 阻止冒泡，防止触发clickAway事件，如输入框在popper内的情况
+        e.stopPropagation();
+        if (innerInputRef.current) {
+            innerInputRef.current.value = '';
+            e.target = e.currentTarget = innerInputRef.current;
+            onClear?.();
+            changeHandler(e);
+            innerInputRef.current.focus();
+        }
+    };
+    const blurHandler = (e) => {
+        if (type !== 'number') {
+            return;
+        }
+        const value = (0, utils_1.fixInputNumber)(e.target.value, { min, max, precision });
+        if (e.target.value !== value) {
+            e.target.value = value;
+            changeHandler(e);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: (0, inputBase_style_1.useStyle)({ color }), className: (0, utils_1.classnames)(inputBase_style_1.classes.root, props.className), "data-variant": variant, "data-size": size, "data-shape": shape, onClick: wrapClickHandler, 
+        // 防止点击wrap时，输入框失去焦点
+        onPointerDown: e => {
+            props.onPointerDown?.(e);
+            const tagName = e.target?.tagName;
+            tagName !== 'TEXTAREA' && tagName !== 'INPUT' && e.preventDefault();
+        }, children: [!!prefix &&
+                (0, jsx_runtime_1.jsx)("div", { className: inputBase_style_1.classes.prefix, children: prefix }), (0, jsx_runtime_1.jsx)("div", { className: inputBase_style_1.classes.content, children: children({
+                    ref: innerInputRef,
+                    type,
+                    min,
+                    max,
+                    step,
+                    precision,
+                    placeholder,
+                    disabled,
+                    readOnly,
+                    autoFocus,
+                    // 复制disabled与readOnly属性用于定义样式
+                    'data-disabled': !!disabled + '',
+                    'data-read-only': !!readOnly + '',
+                    value: innerValue.current ?? '',
+                    onChange: changeHandler,
+                    onBlur: blurHandler,
+                    onKeyDown: (e) => e.key === 'Enter' && blurHandler(e)
+                }) }), loading &&
+                (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, {}), clearable && !disabled && !readOnly && (Array.isArray(innerValue.current) ? !!innerValue.current.length : !!innerValue.current) &&
+                (0, jsx_runtime_1.jsx)(button_1.Button, { className: inputBase_style_1.classes.clear, variant: "plain", color: "disabled", onClick: clear, children: (0, jsx_runtime_1.jsx)(icons_1.CloseCircleFilled, {}) }), !!suffix &&
+                (0, jsx_runtime_1.jsx)("div", { className: inputBase_style_1.classes.suffix, children: suffix })] }));
+});

package/dist/cjs/components/inputBase/inputBase.style.d.ts

@@ -0,0 +1,10 @@
+import { InputBaseProps } from './inputBase';
+export declare const classes: {
+    content: string;
+    prefix: string;
+    clear: string;
+    suffix: string;
+} & {
+    root: string;
+};
+export declare function useStyle({ color }: Required<Pick<InputBaseProps<any>, 'color'>>): import("@emotion/react").SerializedStyles;

package/dist/cjs/components/inputBase/inputBase.style.js

@@ -0,0 +1,231 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.classes = void 0;
+exports.useStyle = useStyle;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+exports.classes = (0, utils_1.defineClasses)('input-base', [
+    'prefix',
+    'content',
+    'suffix',
+    'clear'
+]);
+function useStyle({ color }) {
+    const colorValue = (0, utils_1.useColor)(color);
+    return (0, utils_1.useCss)(({ spacing, background, divider, borderRadius, text, easing, gray }) => (0, react_1.css) `
+        display: flex;
+        gap: ${spacing[2]}px;
+        align-items: center;
+        cursor: text;
+        transition: border-color .2s ${easing.easeOut};
+        position: relative;
+
+        &[data-variant=outlined] {
+            background-color: ${background.card};
+        }
+
+        &[data-size=medium] {
+            min-height: 32px;
+            padding: 0 ${spacing[4]}px;
+        }
+
+        &[data-size=small] {
+            min-height: 24px;
+            padding: 0 ${spacing[3]}px;
+        }
+
+        &[data-size=large] {
+            min-height: 40px;
+            padding: 3px ${spacing[5]}px;
+        }
+
+        &[data-variant=outlined] {
+            border: 1px solid ${color === 'primary' ? divider : colorValue};
+            border-radius: ${borderRadius}px;
+
+            &:before,
+            &:after {
+                content: '';
+                width: 0;
+                height: 0;
+                border-style: solid;
+                border-color: transparent;
+                border-width: 2px;
+                border-radius: inherit;
+                position: absolute;
+                display: none;
+                pointer-events: none;
+                z-index: 3;
+            }
+    
+            &:before {
+                top: -1px;
+                right: -1px;
+                border-top-color: ${colorValue};
+                border-left-color: ${colorValue};
+            }
+    
+            &:after {
+                bottom: -1px;
+                left: -1px;
+                border-bottom-color: ${colorValue};
+                border-right-color: ${colorValue};
+            }
+    
+            &:not(:has([data-read-only=true])):not(:has([data-disabled=true])):hover {
+                ${color === 'primary' ? `border-color: ${gray(.5)};` : ''}
+            }
+    
+            &:not(:has([data-read-only=true]))[data-focused=true],
+            &:not(:has([data-read-only=true])):has(:focus) {
+                &:before, &:after {
+                    display: block;
+                    animation: ${borderAnim} .4s ${easing.easeOut} forwards;
+                }
+            }
+
+            &[data-shape=rounded] {
+                border-radius: 1000em;
+            }
+        }
+        
+        &[data-variant=underlined] {
+            border-bottom: 1px solid ${divider};
+
+            &:not([data-disabled=true]):hover {
+                border-color: ${gray(.5)};
+            }
+
+            &:after {
+                content: '';
+                width: 0;
+                height: 2px;
+                background-color: ${colorValue};
+                position: absolute;
+                bottom: -1px;
+                left: 0;
+                transition: width .2s ${easing.easeOut};
+                z-index: 3;
+            }
+            
+            &[data-focused=true],
+            &:has(:focus) {
+                &:after {
+                    width: 100%;
+                }
+            }
+        }
+
+        &:has([data-disabled=true]) {
+            cursor: not-allowed;
+            background-color: ${gray(.1)};
+
+            [data-disabled=true] {
+                cursor: not-allowed;
+            }
+        }
+
+        &:has([data-read-only=true]) {
+            cursor: default;
+
+            [data-read-only=true] {
+                cursor: default;
+            }
+        }
+
+        .${exports.classes.content} {
+            flex: 1;
+            min-width: 0;
+
+            input, textarea {
+                color: ${text.primary};
+
+                &::placeholder {
+                    color: ${text.placeholder};
+                }
+
+                &[data-hidden=true] {
+                    position: absolute;
+                    opacity: 0;
+                    inset: 0;
+                    pointer-events: none;
+                }
+            }
+        }
+
+        &[data-compact=row] {
+            &:hover {
+                z-index: 1;
+            }
+    
+            &[data-focused=true],
+            &:has(:focus) {
+                z-index: 2;
+            }
+    
+            &:not([data-last=true]) {
+                &, &:before, &:after {
+                    border-top-right-radius: 0;
+                    border-bottom-right-radius: 0;
+                }
+            }
+    
+            &:not([data-first=true]) {
+                margin-left: -1px;
+    
+                &, &:before, &:after {
+                    border-top-left-radius: 0;
+                    border-bottom-left-radius: 0;
+                }
+            }
+        }
+    
+        &[data-compact=column] {
+            &:hover {
+                z-index: 1;
+            }
+    
+            &[data-focused=true],
+            &:has(:focus) {
+                z-index: 2;
+            }
+    
+            &:not([data-last=true]) {
+                &, &:before, &:after {
+                    border-bottom-left-radius: 0;
+                    border-bottom-right-radius: 0;
+                }
+            }
+    
+            &:not([data-first=true]) {
+                margin-top: -1px;
+    
+                &, &:before, &:after {
+                    border-top-left-radius: 0;
+                    border-top-right-radius: 0;
+                }
+            }
+        }
+
+        .${exports.classes.prefix},
+        .${exports.classes.suffix} {
+            color: ${text.secondary};
+        }
+    `, [colorValue]);
+}
+const borderAnim = (0, react_1.keyframes) `
+    0% {
+        width: 0;
+        height: 0;
+    }
+
+    50% {
+        width: calc(100% - 2px);
+        height: 0;
+    }
+
+    100% {
+        width: calc(100% - 2px);
+        height: calc(100% - 2px);
+    }
+`;

package/dist/cjs/components/loading/index.d.ts

@@ -0,0 +1 @@
+export * from './loading';

package/dist/cjs/components/loading/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./loading"), exports);

package/dist/cjs/components/loading/loading.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { ColorPropsValue, DIVProps } from '../../../types';
+import { LoadingIndicatorProps } from '../loadingIndicator';
+import { ProgressProps } from '../progress';
+export interface LoadingProps extends DIVProps {
+    loading?: boolean;
+    text?: ReactNode;
+    /** 传入progress字段会显示进度条 */
+    progress?: number;
+    color?: ColorPropsValue;
+    indicatorProps?: LoadingIndicatorProps;
+    progressProps?: ProgressProps;
+}
+export declare const Loading: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<LoadingProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/cjs/components/loading/loading.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loading = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("../../utils");
+const loading_style_1 = require("./loading.style");
+const loadingIndicator_1 = require("../loadingIndicator");
+const transitionBase_1 = require("../transitionBase");
+const progress_1 = require("../progress");
+exports.Loading = (0, react_1.memo)((0, react_1.forwardRef)(({ loading = false, text = '加载中...', progress, indicatorProps, progressProps, color, ...props }, ref) => {
+    const [showMask, setShowMask] = (0, utils_1.useDerivedState)((prevLoading) => {
+        // 只有第一次需要原样返回loading，之后showMask不会立即变为false，交由onTransitionEnd()处理
+        return typeof prevLoading === 'undefined' ? loading : true;
+    }, [loading]);
+    const onExited = () => {
+        // 动画结束后，loading为false才需要改变showMask
+        setShowMask(false);
+    };
+    const showProgress = typeof progress === 'number';
+    return ((0, jsx_runtime_1.jsxs)("div", { ...props, ref: ref, css: loading_style_1.style, className: (0, utils_1.classnames)(loading_style_1.classes.root, props.className), "data-show-progress": showProgress, children: [(0, jsx_runtime_1.jsx)("div", { className: loading_style_1.classes.container, children: props.children }), (loading || showMask.current) &&
+                (0, jsx_runtime_1.jsxs)(transitionBase_1.Fade, { in: loading, className: loading_style_1.classes.mask, onExited: onExited, children: [(0, jsx_runtime_1.jsxs)("div", { className: loading_style_1.classes.indicator, children: [(0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, { size: showProgress ? 14 : 30, width: showProgress ? 2 : 3, color: color, ...indicatorProps }), (0, jsx_runtime_1.jsx)("div", { className: loading_style_1.classes.text, children: text })] }), showProgress &&
+                            (0, jsx_runtime_1.jsx)(progress_1.Progress, { className: loading_style_1.classes.progress, value: progress, ...progressProps })] })] }));
+}));

package/dist/cjs/components/loading/loading.style.d.ts

@@ -0,0 +1,10 @@
+export declare const classes: {
+    text: string;
+    mask: string;
+    container: string;
+    progress: string;
+    indicator: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;

package/dist/cjs/components/loading/loading.style.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+const tslib_1 = require("tslib");
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+const color_1 = tslib_1.__importDefault(require("color"));
+const progress_style_1 = require("../progress/progress.style");
+exports.classes = (0, utils_1.defineClasses)('loading', [
+    'container',
+    'mask',
+    'indicator',
+    'text',
+    'progress'
+]);
+exports.style = (0, utils_1.defineCss)(({ background, spacing, text }) => {
+    const maskColor = (0, color_1.default)(background.card).alpha(.8).string();
+    return (0, react_1.css) `
+        & {
+            width: 100%;
+            height: 100%;
+            flex: 1;
+            position: relative;
+            z-index: 0;
+        }
+
+        .${exports.classes.container} {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            z-index: 0;
+        }
+
+        .${exports.classes.mask} {
+            position: absolute;
+            inset: 0;
+            z-index: 1;
+            background-color: ${maskColor};
+            display: flex;
+            flex-direction: column;
+            gap: ${spacing[3]}px;
+            align-items: center;
+            justify-content: center;
+
+            .${exports.classes.indicator} {
+                display: flex;
+                gap: ${spacing[2]}px;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+
+                .${exports.classes.text} {
+                    color: ${text.secondary};
+                }
+            }
+
+            .${exports.classes.progress} {
+                width: calc(100% - 24px);
+                max-width: 300px;
+
+                .${progress_style_1.classes.track} {
+                    height: 4px;
+                }
+            }
+        }
+
+        &[data-show-progress=true] .${exports.classes.indicator} {
+            flex-direction: row;
+        }
+    `;
+});

package/dist/cjs/components/loadingIndicator/index.d.ts

@@ -0,0 +1 @@
+export * from './loadingIndicator';

package/dist/cjs/components/loadingIndicator/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./loadingIndicator"), exports);

package/dist/cjs/components/loadingIndicator/loadingIndicator.d.ts

@@ -0,0 +1,7 @@
+import { ColorPropsValue, DIVProps } from '../../../types';
+export interface LoadingIndicatorProps extends DIVProps {
+    size?: number;
+    width?: number;
+    color?: ColorPropsValue;
+}
+export declare const LoadingIndicator: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<LoadingIndicatorProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>;

package/dist/cjs/components/loadingIndicator/loadingIndicator.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingIndicator = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const utils_1 = require("../../utils");
+const loadingIndicator_style_1 = require("./loadingIndicator.style");
+const react_1 = require("react");
+exports.LoadingIndicator = (0, react_1.memo)((0, react_1.forwardRef)(({ size, width = 2, color = 'primary', ...props }, ref) => {
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, css: (0, loadingIndicator_style_1.useStyle)({ color, width }), className: (0, utils_1.classnames)(loadingIndicator_style_1.classes.root, props.className), style: {
+            width: size ?? '1em',
+            height: size ?? '1em',
+            ...props.style
+        }, children: (0, jsx_runtime_1.jsx)("div", { className: loadingIndicator_style_1.classes.indicator }) }));
+}));

package/dist/cjs/components/loadingIndicator/loadingIndicator.style.d.ts

@@ -0,0 +1,7 @@
+import { LoadingIndicatorProps } from './loadingIndicator';
+export declare const classes: {
+    indicator: string;
+} & {
+    root: string;
+};
+export declare function useStyle({ color, width }: Required<Pick<LoadingIndicatorProps, 'color' | 'width'>>): import("@emotion/react").SerializedStyles;

package/dist/cjs/components/loadingIndicator/loadingIndicator.style.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.classes = void 0;
+exports.useStyle = useStyle;
+const tslib_1 = require("tslib");
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+const color_1 = tslib_1.__importDefault(require("color"));
+exports.classes = (0, utils_1.defineClasses)('loading-indicator', [
+    'indicator'
+]);
+function useStyle({ color, width }) {
+    const colorValue = (0, utils_1.useColor)(color);
+    const borderWidth = width;
+    return (0, utils_1.useCss)(({ mode }) => {
+        const borderColor = mode === 'light' ? (0, color_1.default)(colorValue).alpha(.6).string() : colorValue;
+        return (0, react_1.css) `
+            .${exports.classes.indicator} {
+                width: 100%;
+                height: 100%;
+                aspect-ratio: 1;
+                border-radius: 50%;
+                border: ${borderWidth}px solid;
+                border-color: ${borderColor} transparent;
+                animation: ${spinning} 1.2s infinite;
+            }
+        `;
+    }, [colorValue, borderWidth]);
+}
+const spinning = (0, react_1.keyframes) `
+    100% {
+        transform: rotate(1.5turn)
+    }
+`;

package/dist/cjs/components/menu/index.d.ts

@@ -0,0 +1 @@
+export * from './menu';

package/dist/cjs/components/menu/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./menu"), exports);

package/dist/cjs/components/menu/menu.d.ts

@@ -0,0 +1,45 @@
+import { ReactElement } from 'react';
+import { DIVProps, Id, Obj, Size } from '../../../types';
+import { MenuItemProps } from '../menuItem';
+export type ForwardProps = {
+    size?: Size;
+    showCheckbox?: boolean;
+    ellipsis?: boolean;
+    indent?: number;
+};
+export interface ItemPropType extends Omit<MenuItemProps, 'children'>, Obj {
+    children?: ItemPropType[];
+}
+interface MenuBaseProps<I extends ItemPropType, V extends Id = Id> extends ForwardProps, Omit<DIVProps, 'defaultValue' | 'onChange'> {
+    items?: I[];
+    primaryKey?: keyof I;
+    labelKey?: keyof I;
+    childrenKey?: keyof I;
+    defaultExpanded?: V[];
+    expanded?: V[];
+    onExpandedChange?(expanded: V[], itemValue: V, isExpand: boolean): void;
+}
+interface MenuSingleProps<I extends ItemPropType, V extends Id = Id> extends MenuBaseProps<I, V> {
+    multiple?: false;
+    defaultValue?: V;
+    value?: V;
+    onChange?(value: V): void;
+}
+interface MenuMultipleProps<I extends ItemPropType, V extends Id = Id> extends MenuBaseProps<I, V> {
+    multiple: true;
+    defaultValue?: V[];
+    value?: V[];
+    onChange?(value: V[]): void;
+}
+export type MenuProps<I extends ItemPropType, V extends Id = Id> = MenuSingleProps<I, V> | MenuMultipleProps<I, V>;
+interface MenuContext<V extends Id = Id> extends ForwardProps {
+    inMenu?: boolean;
+    expandedSet?: Set<V>;
+    setExpanded?(key: V, expanded: boolean): void;
+    multiple?: boolean;
+    selected?: V | V[];
+    toggleSelected?(key: V): void;
+}
+export declare function useMenuContext<V extends Id = Id>(): MenuContext<V>;
+export declare const Menu: <I extends ItemPropType, V extends Id = Id>(props: MenuProps<I, V>) => ReactElement;
+export {};

package/dist/cjs/components/menu/menu.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menu = void 0;
+exports.useMenuContext = useMenuContext;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_1 = require("react");
+const menu_style_1 = require("./menu.style");
+const menuItem_1 = require("../menuItem");
+const utils_1 = require("../../utils");
+const app_1 = require("../app");
+const menuContext = (0, react_1.createContext)({});
+function useMenuContext() {
+    const theme = (0, app_1.useTheme)();
+    const { size = theme.size, ellipsis = true, indent = theme.spacing[8], ...context } = (0, react_1.useContext)(menuContext);
+    return { size, ellipsis, indent, ...context };
+}
+exports.Menu = (0, react_1.memo)((0, react_1.forwardRef)(({ items, primaryKey = 'value', labelKey = 'label', childrenKey = 'children', defaultExpanded = [], expanded, onExpandedChange, multiple, defaultValue, value, onChange, 
+// 以下属性传递给<MenuItem />
+size = 'large', showCheckbox, ellipsis, indent, ...props }, ref) => {
+    const [innerExpanded, setInnerExpanded] = (0, utils_1.useControlled)(defaultExpanded, expanded);
+    const expandedSet = (0, react_1.useMemo)(() => {
+        return new Set(innerExpanded.current);
+    }, [innerExpanded.current]);
+    const setExpanded = (key, isExpand) => {
+        setInnerExpanded(o => {
+            const newExpanded = isExpand ? [...o, key] : o.filter(k => k !== key);
+            onExpandedChange?.(newExpanded, key, isExpand);
+            return newExpanded;
+        });
+    };
+    const [innerValue, toggleSelected] = (0, utils_1.useControlledSelect)({ multiple, defaultValue, value, onChange });
+    const renderItems = (items) => {
+        return items?.map((p, i) => (0, jsx_runtime_1.jsx)(menuItem_1.MenuItem, { size: p.size, color: p.color, emphasized: p.emphasized, selected: p.selected, focused: p.focused, disabled: p.disabled, showCheckbox: p.showCheckbox, checkboxProps: p.checkboxProps, ellipsis: p.ellipsis, prefix: p.prefix, suffix: p.suffix, indent: p.indent, expandIcon: p.expandIcon, onExpandedChange: p.onExpandedChange, value: p[primaryKey], label: p[labelKey], children: renderItems(p[childrenKey]) }, p[primaryKey] ?? i));
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, css: menu_style_1.style, children: (0, jsx_runtime_1.jsx)(menuContext.Provider, { value: (0, react_1.useMemo)(() => ({
+                inMenu: true,
+                expandedSet, setExpanded, multiple, selected: innerValue.current, toggleSelected,
+                size, showCheckbox, ellipsis, indent
+            }), [
+                expandedSet, multiple, innerValue.current,
+                size, showCheckbox, ellipsis, indent
+            ]), children: props.children ?? renderItems(items) }) }));
+}));

package/dist/cjs/components/menu/menu.style.d.ts

@@ -0,0 +1,4 @@
+export declare const classes: {
+    root: string;
+};
+export declare const style: import("@emotion/react").SerializedStyles;

package/dist/cjs/components/menu/menu.style.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.style = exports.classes = void 0;
+const react_1 = require("@emotion/react");
+const utils_1 = require("../../utils");
+const menuItem_style_1 = require("../menuItem/menuItem.style");
+exports.classes = (0, utils_1.defineClasses)('menu');
+exports.style = (0, react_1.css) `
+    padding: ${menuItem_style_1.menuListPadding}px;
+`;

package/dist/cjs/components/menuItem/index.d.ts

@@ -0,0 +1 @@
+export * from './menuItem';

package/dist/cjs/components/menuItem/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./menuItem"), exports);