@canlooks/can-ui 0.0.159 → 0.0.161

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

@@ -28,8 +28,11 @@ type EachRowType<R extends RowType, T> = T | ((row: R) => T);
 export type CurdRef<R extends RowType = RowType, F extends FormValue = FormValue> = {
     reload(): Promise<void>;
     setPage(page: number): void;
+    getPage(): number;
     setPageSize(size: number): void;
+    getPageSize(): number;
     setFilterValue(filterValue: FormValue): void;
+    getFilterValue(): FormValue;
     resetFilter(): void;
     openCreateDialog(defaultValue?: F): Promise<F> | undefined;
     openUpdateDialog(row: R, defaultValue?: F): Promise<F> | undefined;

package/dist/cjs/components/curd/curd.js

@@ -36,13 +36,16 @@ exports.Curd = (0, react_1.memo)((props) => {
         setPage(page) {
             setInnerPage(page);
         },
+        getPage: () => innerPage.current,
         setPageSize(size) {
             setInnerPageSize(size);
         },
+        getPageSize: () => innerPageSize.current,
         setFilterValue(filterValue) {
             innerFilterRef.current.setFormValue(filterValue);
             innerLoadRows().then();
         },
+        getFilterValue: () => innerFilterRef.current.getFormValue(),
         resetFilter() {
             innerFilterRef.current.resetForm();
             innerLoadRows().then();

package/dist/cjs/components/curd/curdColumnConfig.d.ts

@@ -2,11 +2,10 @@ import { Dispatch, ReactElement, SetStateAction } from 'react';
 import { CurdColumn } from './curd';
 import { RowType } from '../dataGrid';
 import { Id } from '../../types';
-type CurdColumnConfigProps<R extends RowType> = {
+export type CurdColumnConfigProps<R extends RowType> = {
     columns?: CurdColumn<R>[];
     innerVisible: Id[];
     setInnerVisible: Dispatch<SetStateAction<Id[]>>;
     setInnerOrder: Dispatch<SetStateAction<Id[]>>;
 };
 export declare const CurdColumnConfig: <R extends RowType>(props: CurdColumnConfigProps<R>) => ReactElement;
-export {};

package/dist/cjs/components/curd/curdColumnConfig.js

@@ -14,7 +14,7 @@ const sortable_1 = require("@dnd-kit/sortable");
 const utils_1 = require("../../utils");
 const icon_1 = require("../icon");
 const faGear_1 = require("@fortawesome/free-solid-svg-icons/faGear");
-exports.CurdColumnConfig = (0, react_1.memo)(({ columns, innerVisible, setInnerVisible, setInnerOrder, }) => {
+exports.CurdColumnConfig = (0, react_1.memo)(({ columns, innerVisible, setInnerVisible, setInnerOrder }) => {
     columns ||= [];
     const dragEndHandler = (e) => {
         const newColumns = (0, utils_1.onDndDragEnd)(e, columns, '_key');
@@ -24,9 +24,16 @@ exports.CurdColumnConfig = (0, react_1.memo)(({ columns, innerVisible, setInnerV
         return new Set(innerVisible);
     }, [innerVisible]);
     const toggleVisible = (key, checked) => {
-        setInnerVisible(o => checked
+        !(0, utils_1.isUnset)(key) && setInnerVisible(o => checked
             ? [...o, key]
             : o.filter(k => k !== key));
     };
-    return ((0, jsx_runtime_1.jsx)(bubble_1.Bubble, { css: curdColumnConfig_style_1.style, placement: "bottomRight", content: (0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: (0, utils_1.useDndSensors)(), onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: columns?.map((col, i) => col._key ?? i), children: (0, jsx_runtime_1.jsxs)("div", { className: curdColumnConfig_style_1.classes.content, children: [(0, jsx_runtime_1.jsxs)("div", { className: curdColumnConfig_style_1.classes.title, children: [(0, jsx_runtime_1.jsx)("div", { className: curdColumnConfig_style_1.classes.titleText, children: "\u5217\u8BBE\u7F6E" }), (0, jsx_runtime_1.jsx)("div", { className: curdColumnConfig_style_1.classes.description, children: "\u62D6\u62FD\u8C03\u6574\u987A\u5E8F" })] }), columns?.map((col, i) => (0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { id: col._key ?? i, component: menuItem_1.MenuItem, className: curdColumnConfig_style_1.classes.item, prefix: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: curdColumnConfig_style_1.classes.checkbox, checked: !(0, utils_1.isUnset)(col._key) && visibleSet.has(col._key), onChange: e => !(0, utils_1.isUnset)(col._key) && toggleVisible(col._key, e.target.checked) }), label: col.title }, col._key ?? i))] }) }) }), autoClose: false, children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text.secondary", children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faGear_1.faGear }) }) }));
+    return ((0, jsx_runtime_1.jsx)(bubble_1.Bubble, { css: curdColumnConfig_style_1.style, placement: "bottomRight", content: (0, jsx_runtime_1.jsx)(core_1.DndContext, { sensors: (0, utils_1.useDndSensors)(), onDragEnd: dragEndHandler, children: (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: columns?.map((col, i) => col._key ?? i), children: (0, jsx_runtime_1.jsxs)("div", { className: curdColumnConfig_style_1.classes.content, children: [(0, jsx_runtime_1.jsxs)("div", { className: curdColumnConfig_style_1.classes.title, children: [(0, jsx_runtime_1.jsx)("div", { className: curdColumnConfig_style_1.classes.titleText, children: "\u5217\u8BBE\u7F6E" }), (0, jsx_runtime_1.jsx)("div", { className: curdColumnConfig_style_1.classes.description, children: "\u62D6\u62FD\u8C03\u6574\u987A\u5E8F" })] }), columns?.map((col, i) => {
+                            const id = col._key;
+                            const checked = !(0, utils_1.isUnset)(id) && visibleSet.has(id);
+                            return ((0, jsx_runtime_1.jsx)(sortableItem_1.SortableItem, { id: id ?? i, component: menuItem_1.MenuItem, className: curdColumnConfig_style_1.classes.item, prefix: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { className: curdColumnConfig_style_1.classes.checkbox, checked: checked, onChange: e => {
+                                        e.stopPropagation();
+                                        toggleVisible(id, e.target.checked);
+                                    } }), onClick: () => toggleVisible(id, !checked), label: col.titleText ?? col.title, noStyle: true }, id ?? i));
+                        })] }) }) }), autoClose: false, children: (0, jsx_runtime_1.jsx)(button_1.Button, { shape: "circular", variant: "text", color: "text.secondary", children: (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faGear_1.faGear }) }) }));
 });

package/dist/cjs/components/curd/curdColumnConfig.style.js

@@ -32,8 +32,8 @@ exports.style = (0, utils_1.defineCss)(({ spacing, text }) => (0, react_1.css) `
             }
 
             .${exports.classes.item} {
-                cursor: move;
-
+                    cursor: pointer;
+                
                 &[data-dragging=true] {
                     position: relative;
                     z-index: 1;

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

@@ -12,6 +12,8 @@ import { BubbleProps } from '../bubble';
 export type RowType = Obj;
 export interface ColumnType<R extends RowType = RowType> extends Omit<ComponentProps<'td'>, 'key' | 'ref' | 'title' | 'children'>, Omit<ComponentProps<'th'>, 'key' | 'ref' | 'title' | 'children'> {
     title?: ReactNode;
+    /** 当`title`非字符串时，可指定该属性，用于渲染在 “列设置” 中 */
+    titleText?: string;
     /** 若不指定key，默认使用{@link field}作为key */
     key?: string | number;
     children?: ColumnType<R>[];
@@ -26,7 +28,7 @@ export interface ColumnType<R extends RowType = RowType> extends Omit<ComponentP
      */
     sorter?: boolean | ((a: R, b: R) => number);
     /**
-     * @enum true 不会弹出气泡框，需配合{@link DataGridBaseProps.onFilterClick}实现筛选逻辑
+     * @enum true 不会弹出气泡框，需配合{@link DataGridBaseProp['onFilterClick']}实现筛选逻辑
      * @enum FilterOptionsProps 传递至`OptionsBase`组件
      * @example FilterOptionsProps
      * {

package/dist/cjs/components/dataGrid/dataGridHead.js

@@ -82,7 +82,7 @@ exports.DataGridHead = (0, react_2.memo)(({ allowSelectAll, columnResizable, fla
                 }
                 const { 
                 // 排除无需加入dom节点的属性
-                title, key, children, field, render, sorter, filter, _key, _negativeRowSpan = 0, ...colProps } = col;
+                title, titleText, key, children, field, render, sorter, filter, _key, _negativeRowSpan = 0, ...colProps } = col;
                 const sortable = sorter && !children?.length;
                 const isOrderingColumn = orderColumn === _key;
                 const currentOrderType = isOrderingColumn ? orderType : 'descend';

package/dist/cjs/components/dataGrid/dataGridRows.js

@@ -56,7 +56,7 @@ exports.DataGridRows = (0, react_2.memo)(({ rows, _level = 0 }) => {
                 // 排除无需加入dom节点的属性
                 // width属性只需加入thead列中，普通列需排除
                 // rowSpan与colSpan需排除
-                title, key, children, field, render, sorter, filter, width, _key, _negativeRowSpan, rowSpan, colSpan, ..._colProps } = col;
+                title, titleText, key, children, field, render, sorter, filter, width, _key, _negativeRowSpan, rowSpan, colSpan, ..._colProps } = col;
                 const renderedContent = (0, utils_1.renderCell)({ render, field }, row, i, arr);
                 const shouldRenderExpand = expandableIndex === j - 1;
                 return ((0, react_1.createElement)(table_1.TdCell, { ..._colProps, key: _key, className: (0, utils_1.clsx)(_colProps.className, shouldRenderExpand && dataGrid_style_1.classes.expandable) }, shouldRenderExpand

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

@@ -5,6 +5,7 @@ export type SortableItemOwnProps = {
     id: Id;
     disabled?: boolean;
     sortableArguments?: Arguments;
+    noStyle?: boolean;
 };
 export type SortableItemProps<C extends ElementType = 'div'> = OverridableProps<SortableItemOwnProps, C>;
 export declare const SortableItem: OverridableComponent<SortableItemOwnProps>;

package/dist/cjs/components/sortableItem/sortableItem.js

@@ -8,7 +8,7 @@ const utilities_1 = require("@dnd-kit/utilities");
 const utils_1 = require("../../utils");
 const react_2 = require("@emotion/react");
 const sortableItem_style_1 = require("./sortableItem.style");
-exports.SortableItem = (({ component: Component = 'div', id, disabled, sortableArguments, ...props }) => {
+exports.SortableItem = (({ component: Component = 'div', id, disabled, sortableArguments, noStyle, ...props }) => {
     const { attributes, isDragging, listeners, setNodeRef, transform, transition } = (0, sortable_1.useSortable)({
         ...sortableArguments,
         disabled,
@@ -36,5 +36,5 @@ exports.SortableItem = (({ component: Component = 'div', id, disabled, sortableA
                     transform: utilities_1.CSS.Transform.toString(transform),
                     transition,
                     ...props.style
-                }, onTouchStart: disabled ? void 0 : onTouchStart, "data-dragging": isDragging, "data-draggable": !disabled }), isDragging && (0, jsx_runtime_1.jsx)(react_2.Global, { styles: sortableItem_style_1.globalGrabbingStyle })] }));
+                }, onTouchStart: disabled ? void 0 : onTouchStart, "data-no-style": noStyle, "data-dragging": isDragging, "data-draggable": !disabled }), !noStyle && isDragging && (0, jsx_runtime_1.jsx)(react_2.Global, { styles: sortableItem_style_1.globalGrabbingStyle })] }));
 });

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

@@ -5,11 +5,15 @@ const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 exports.classes = (0, utils_1.defineInnerClasses)('sortable-item');
 exports.style = (0, react_1.css) `
-    &[data-draggable=true] {
-        cursor: grab;
+    @layer reset {
+        &:not([data-no-style=true]) {
+            &[data-draggable=true] {
+                cursor: grab;
 
-        &:active {
-            cursor: grabbing;
+                &:active {
+                    cursor: grabbing;
+                }
+            }
         }
     }
 `;

package/dist/cjs/utils/keyboard.js

@@ -84,7 +84,7 @@ function useEscapeClosable({ escapeClosable, close }, onEscape) {
         if (escapeClosable) {
             const keydown = (e) => {
                 if (e.key === 'Escape') {
-                    const { nextSibling } = overlayRef.current;
+                    const nextSibling = overlayRef.current?.nextSibling;
                     if (!nextSibling || nextSibling.dataset.open !== 'true') {
                         // 后面无元素，或后一个元素已关闭，才能关闭当前
                         e.preventDefault();

package/dist/esm/components/accordion/accordion.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { DivProps, Size } from '../../types';
+import { DivProps, Size } from '../../types.js';
 export interface AccordionProps extends Omit<DivProps, 'title' | 'prefix'> {
     size?: Size;
     title?: ReactNode;

package/dist/esm/components/accordion/accordion.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { classes, style } from './accordion.style';
-import { clsx, useControlled } from '../../utils';
-import { useTheme } from '../theme';
-import { Collapse } from '../transitionBase';
-import { Icon } from '../icon';
+import { classes, style } from './accordion.style.js';
+import { clsx, useControlled } from '../../utils/index.js';
+import { useTheme } from '../theme/index.js';
+import { Collapse } from '../transitionBase/index.js';
+import { Icon } from '../icon/index.js';
 import { faCaretRight } from '@fortawesome/free-solid-svg-icons';
 export function Accordion({ size, title, prefix, suffix, expandIconPlacement = 'left', expandIcon, defaultExpanded = false, expanded, onExpandedChange, readOnly, disabled, ...props }) {
     const theme = useTheme();

package/dist/esm/components/accordion/accordion.style.js

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { defineInnerClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils/index.js';
 export const classes = defineInnerClasses('accordion', [
     'titleRow',
     'expandIcon',

package/dist/esm/components/accordion/index.d.ts

@@ -1 +1 @@
-export * from './accordion';
+export * from './accordion.js';

package/dist/esm/components/accordion/index.js

@@ -1 +1 @@
-export * from './accordion';
+export * from './accordion.js';

package/dist/esm/components/actionSheet/actionSheet.d.ts

@@ -1,8 +1,8 @@
 import React, { ReactElement, ReactNode } from 'react';
-import { OverlayBaseProps } from '../overlayBase';
-import { TransitionBaseProps } from '../transitionBase';
-import { MenuItemProps } from '../menuItem';
-import { Obj } from '../../types';
+import { OverlayBaseProps } from '../overlayBase/index.js';
+import { TransitionBaseProps } from '../transitionBase/index.js';
+import { MenuItemProps } from '../menuItem/index.js';
+import { Obj } from '../../types.js';
 export type ActionSheetCloseReason = 'escape' | 'canceled' | 'confirmed' | 'maskClicked' | 'action';
 export interface ActionSheetProps<A extends MenuItemProps & Obj> extends Omit<OverlayBaseProps, 'title'> {
     title?: ReactNode;

package/dist/esm/components/actionSheet/actionSheet.js

@@ -1,11 +1,11 @@
 import { createElement as _createElement } from "@emotion/react";
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
-import { classes, style } from './actionSheet.style';
-import { clsx, useControlled, useEscapeClosable, mergeComponentProps } from '../../utils';
-import { OverlayBase } from '../overlayBase';
-import { Slide } from '../transitionBase';
-import { MenuItem } from '../menuItem';
+import { classes, style } from './actionSheet.style.js';
+import { clsx, useControlled, useEscapeClosable, mergeComponentProps } from '../../utils/index.js';
+import { OverlayBase } from '../overlayBase/index.js';
+import { Slide } from '../transitionBase/index.js';
+import { MenuItem } from '../menuItem/index.js';
 const placementToDirection = {
     top: 'down',
     bottom: 'up'

package/dist/esm/components/actionSheet/actionSheet.style.js

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { defineInnerClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils/index.js';
 export const classes = defineInnerClasses('action-sheet', [
     'sheet',
     'card',

package/dist/esm/components/actionSheet/index.d.ts

@@ -1 +1 @@
-export * from './actionSheet';
+export * from './actionSheet.js';

package/dist/esm/components/actionSheet/index.js

@@ -1 +1 @@
-export * from './actionSheet';
+export * from './actionSheet.js';

package/dist/esm/components/alert/alert.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { ColorPropsValue, DivProps, Status } from '../../types';
+import { ColorPropsValue, DivProps, Status } from '../../types.js';
 export interface AlertProps extends Omit<DivProps, 'title' | 'prefix' | 'children'> {
     variant?: 'filled' | 'outlined' | 'standard';
     status?: Status;

package/dist/esm/components/alert/alert.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
-import { clsx } from '../../utils';
-import { classes, useStyle } from './alert.style';
-import { Button } from '../button';
-import { Skeleton } from '../skeleton';
+import { clsx } from '../../utils/index.js';
+import { classes, useStyle } from './alert.style.js';
+import { Button } from '../button/index.js';
+import { Skeleton } from '../skeleton/index.js';
 import { faXmark } from '@fortawesome/free-solid-svg-icons/faXmark';
-import { Icon } from '../icon';
-import { statusMapToIconDefinition } from '../status';
+import { Icon } from '../icon/index.js';
+import { statusMapToIconDefinition } from '../status/index.js';
 export const Alert = memo(({ variant = 'standard', status = 'error', color = status, showIcon = true, icon, title, description, prefix, suffix, closable, onClose, loading, ...props }) => {
     return (_jsxs("div", { ...props, css: useStyle({ color: color || 'error' }), className: clsx(classes.root, props.className), "data-variant": variant, children: [showIcon &&
                 _jsx("div", { className: classes.icon, children: loading

package/dist/esm/components/alert/alert.style.d.ts

@@ -1,4 +1,4 @@
-import { ColorPropsValue } from '../../types';
+import { ColorPropsValue } from '../../types.js';
 export declare const classes: {
     title: string;
     prefix: string;

package/dist/esm/components/alert/alert.style.js

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { defineInnerClasses, useColor, useCss } from '../../utils';
+import { defineInnerClasses, useColor, useCss } from '../../utils/index.js';
 import Color from 'color';
 export const classes = defineInnerClasses('alert', [
     'icon',

package/dist/esm/components/alert/index.d.ts

@@ -1 +1 @@
-export * from './alert';
+export * from './alert.js';

package/dist/esm/components/alert/index.js

@@ -1 +1 @@
-export * from './alert';
+export * from './alert.js';

package/dist/esm/components/anchorList/activeIndicator.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { classes } from './anchorList.style';
+import { classes } from './anchorList.style.js';
 import { useEffect, useState } from 'react';
 export function ActiveIndicator({ activeId, anchorRefs, onTransitionEnd }) {
     const [top, setTop] = useState();

package/dist/esm/components/anchorList/anchorList.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
-import { FlexProps } from '../flex';
-import { DefineElement } from '../../types';
+import { FlexProps } from '../flex/index.js';
+import { DefineElement } from '../../types.js';
 export type AnchorItem = {
     id: string;
     label?: ReactNode;

package/dist/esm/components/anchorList/anchorList.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { classes, style } from './anchorList.style';
-import { clsx, listenAllPredecessorsScroll, useDerivedState, useExternalClass, useSyncState } from '../../utils';
+import { classes, style } from './anchorList.style.js';
+import { clsx, listenAllPredecessorsScroll, useDerivedState, useExternalClass, useSyncState } from '../../utils/index.js';
 import { memo, useEffect, useRef } from 'react';
-import { Flex } from '../flex';
-import { ActiveIndicator } from './activeIndicator';
+import { Flex } from '../flex/index.js';
+import { ActiveIndicator } from './activeIndicator.js';
 export const AnchorList = memo(({ anchors, renderAnchorItem, indent = 24, scroller, routeMode = 'history', offset = 0, scrollBehavior = 'smooth', ...props }) => {
     const anchorRefs = useRef(new Map());
     /**

package/dist/esm/components/anchorList/anchorList.style.js

@@ -1,4 +1,4 @@
-import { defineInnerClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils/index.js';
 import { css } from '@emotion/react';
 export const classes = defineInnerClasses('anchor-list', [
     'item',

package/dist/esm/components/anchorList/index.d.ts

@@ -1 +1 @@
-export * from './anchorList';
+export * from './anchorList.js';

package/dist/esm/components/anchorList/index.js

@@ -1 +1 @@
-export * from './anchorList';
+export * from './anchorList.js';

package/dist/esm/components/app/app.d.ts

@@ -1,18 +1,18 @@
 import { ElementType } from 'react';
-import { OverridableComponent, OverridableProps } from '../../types';
-import { ThemeProviderProps } from '../theme';
-import { AppDialogMethods } from './appDialog';
-import { AppMessageMethods } from './appMessage';
-import { AppNotificationMethods } from './appNotification';
-import { AppActionSheetMethods } from './appActionSheet';
+import { OverridableComponent, OverridableProps } from '../../types.js';
+import { ThemeProviderProps } from '../theme/index.js';
+import { AppDialogMethods } from './appDialog.js';
+import { AppMessageMethods } from './appMessage.js';
+import { AppNotificationMethods } from './appNotification.js';
+import { AppActionSheetMethods } from './appActionSheet.js';
 export interface AppOwnProps extends ThemeProviderProps {
     fill?: boolean;
 }
 export type AppProps<C extends ElementType = 'div'> = OverridableProps<AppOwnProps, C>;
 export declare function useAppContext(): {
     dialog: AppDialogMethods;
-    message: AppMessageMethods<import("../snackbarBase").SnackbarBaseProps>;
-    notification: AppNotificationMethods<import("./appNotification").AppNotificationProps>;
+    message: AppMessageMethods<import("../snackbarBase/index.js").SnackbarBaseProps>;
+    notification: AppNotificationMethods<import("./appNotification.js").AppNotificationProps>;
     actionSheet: AppActionSheetMethods;
 };
 export declare const App: OverridableComponent<AppOwnProps> & {

package/dist/esm/components/app/app.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { createContext, useContext } from 'react';
-import { clsx, defineCss, useExternalClass } from '../../utils';
-import { classes, style } from './app.style';
-import { ThemeProvider } from '../theme';
-import { AppDialog, AppDialogMethods } from './appDialog';
-import { AppMessage, AppMessageMethods } from './appMessage';
-import { AppNotification, AppNotificationMethods } from './appNotification';
-import { AppActionSheet, AppActionSheetMethods } from './appActionSheet';
+import { clsx, defineCss, useExternalClass } from '../../utils/index.js';
+import { classes, style } from './app.style.js';
+import { ThemeProvider } from '../theme/index.js';
+import { AppDialog, AppDialogMethods } from './appDialog.js';
+import { AppMessage, AppMessageMethods } from './appMessage.js';
+import { AppNotification, AppNotificationMethods } from './appNotification.js';
+import { AppActionSheet, AppActionSheetMethods } from './appActionSheet.js';
 import { css } from '@emotion/react';
-import { GlobalEventDelegation } from './globalEventDelegation';
+import { GlobalEventDelegation } from './globalEventDelegation.js';
 const AppContext = createContext({
     dialog: new AppDialogMethods(),
     message: new AppMessageMethods(),

package/dist/esm/components/app/app.style.d.ts

@@ -1,4 +1,4 @@
-import { Theme } from '../theme';
+import { Theme } from '../theme/index.js';
 export declare const classes: {
     root: string;
 };

package/dist/esm/components/app/app.style.js

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
-import { defineInnerClasses, defineCss } from '../../utils';
-import { defaultMonospaceFontFamily } from '../theme';
+import { defineInnerClasses, defineCss } from '../../utils/index.js';
+import { defaultMonospaceFontFamily } from '../theme/index.js';
 export const classes = defineInnerClasses('app');
 export const appStyleCallback = (theme) => css `
     @layer reset, override;

package/dist/esm/components/app/appActionSheet.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
-import { ActionSheetProps } from '../actionSheet';
-import { MenuItemProps } from '../menuItem';
-import { Obj } from '../../types';
+import { ActionSheetProps } from '../actionSheet/index.js';
+import { MenuItemProps } from '../menuItem/index.js';
+import { Obj } from '../../types.js';
 export interface AppActionSheetProps<A extends MenuItemProps & Obj> extends Omit<ActionSheetProps<A>, 'onAction' | 'onConfirm'> {
     onAction?(action: A, ...args: any[]): any;
     onConfirm?(...args: any[]): any;

package/dist/esm/components/app/appActionSheet.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { createElement as _createElement } from "@emotion/react";
 import { isValidElement, memo, useState } from 'react';
-import { ActionSheet } from '../actionSheet';
-import { getRandomId } from '../../utils';
+import { ActionSheet } from '../actionSheet/index.js';
+import { getRandomId } from '../../utils/index.js';
 export class AppActionSheetMethods {
     async confirm() {
     }

package/dist/esm/components/app/appDialog.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { DialogProps } from '../dialog';
+import { DialogProps } from '../dialog/index.js';
 export interface AppDialogProps extends Omit<DialogProps, 'content' | 'onConfirm' | 'onCancel'> {
     content?: ReactNode;
     onConfirm?(...args: any[]): any;

package/dist/esm/components/app/appDialog.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { createElement as _createElement } from "@emotion/react";
 import { memo, useState } from 'react';
-import { Dialog } from '../dialog';
-import { StatusIcon } from '../status';
-import { getRandomId } from '../../utils';
+import { Dialog } from '../dialog/index.js';
+import { StatusIcon } from '../status/index.js';
+import { getRandomId } from '../../utils/index.js';
 export class AppDialogMethods {
     async info(props, ...args) {
     }

package/dist/esm/components/app/appMessage.d.ts

@@ -1,5 +1,5 @@
-import { SnackbarBaseProps } from '../snackbarBase';
-import { SnackbarBaseMethods } from '../snackbarBase';
+import { SnackbarBaseProps } from '../snackbarBase/index.js';
+import { SnackbarBaseMethods } from '../snackbarBase/index.js';
 export declare class AppMessageMethods<P extends SnackbarBaseProps = SnackbarBaseProps> extends SnackbarBaseMethods<P> {
 }
 export declare const AppMessage: import("react").MemoExoticComponent<({ methods }: {

package/dist/esm/components/app/appMessage.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
-import { SnackbarBase } from '../snackbarBase';
-import { SnackbarBaseMethods } from '../snackbarBase';
+import { SnackbarBase } from '../snackbarBase/index.js';
+import { SnackbarBaseMethods } from '../snackbarBase/index.js';
 export class AppMessageMethods extends SnackbarBaseMethods {
 }
 export const AppMessage = memo(({ methods }) => {

package/dist/esm/components/app/appNotification.d.ts

@@ -1,6 +1,6 @@
-import { SnackbarBaseProps } from '../snackbarBase';
-import { SnackbarBaseMethods } from '../snackbarBase';
-import { CornerPlacement } from '../../types';
+import { SnackbarBaseProps } from '../snackbarBase/index.js';
+import { SnackbarBaseMethods } from '../snackbarBase/index.js';
+import { CornerPlacement } from '../../types.js';
 export interface AppNotificationProps extends Omit<SnackbarBaseProps, 'placement'> {
     placement?: CornerPlacement;
 }

package/dist/esm/components/app/appNotification.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { memo } from 'react';
-import { SnackbarBase } from '../snackbarBase';
-import { SnackbarBaseMethods } from '../snackbarBase';
+import { SnackbarBase } from '../snackbarBase/index.js';
+import { SnackbarBaseMethods } from '../snackbarBase/index.js';
 export class AppNotificationMethods extends SnackbarBaseMethods {
 }
 export const AppNotification = memo(({ methods }) => {

package/dist/esm/components/app/index.d.ts

@@ -1 +1 @@
-export * from './app';
+export * from './app.js';

package/dist/esm/components/app/index.js

@@ -1 +1 @@
-export * from './app';
+export * from './app.js';

package/dist/esm/components/autocomplete/autocomplete.d.ts

@@ -1,8 +1,8 @@
 import { ReactElement, ReactNode, Ref } from 'react';
-import { PopperProps, PopperRef } from '../popper';
-import { MenuOptionType } from '../optionsBase';
-import { InputProps } from '../input';
-import { MenuItem } from '../menuItem';
+import { PopperProps, PopperRef } from '../popper/index.js';
+import { MenuOptionType } from '../optionsBase/index.js';
+import { InputProps } from '../input/index.js';
+import { MenuItem } from '../menuItem/index.js';
 export interface AutocompleteProps<O extends MenuOptionType> extends Omit<InputProps, 'onSelect'> {
     children?: ReactNode;
     options?: O[];

package/dist/esm/components/autocomplete/autocomplete.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { isValidElement, memo, useCallback, useMemo, useRef, useState } from 'react';
-import { Popper } from '../popper';
-import { OptionsBase } from '../optionsBase';
-import { Input } from '../input';
-import { isUnset, useControlled, useDerivedState, useLoading, useSync, mergeComponentProps, useStrictEffect } from '../../utils';
-import { classes } from './autocomplete.style';
-import { popperStyle } from '../popper/popper.style';
-import { useFilterOptions } from '../optionsBase/filterOptions';
+import { Popper } from '../popper/index.js';
+import { OptionsBase } from '../optionsBase/index.js';
+import { Input } from '../input/index.js';
+import { isUnset, useControlled, useDerivedState, useLoading, useSync, mergeComponentProps, useStrictEffect } from '../../utils/index.js';
+import { classes } from './autocomplete.style.js';
+import { popperStyle } from '../popper/popper.style.js';
+import { useFilterOptions } from '../optionsBase/filterOptions.js';
 export const Autocomplete = memo(({ children, loading, options, loadOptions, primaryKey = 'value', labelKey = 'label', onSelect, renderInput, popperProps, popperRef, defaultValue = '', value, onChange, ...props }) => {
     const [focused, _setFocused] = useState(false);
     const setFocused = (focused) => {

package/dist/esm/components/autocomplete/autocomplete.style.js

@@ -1,2 +1,2 @@
-import { defineInnerClasses } from '../../utils';
+import { defineInnerClasses } from '../../utils/index.js';
 export const classes = defineInnerClasses('autocomplete');

package/dist/esm/components/autocomplete/index.d.ts

@@ -1 +1 @@
-export * from './autocomplete';
+export * from './autocomplete.js';

package/dist/esm/components/autocomplete/index.js

@@ -1 +1 @@
-export * from './autocomplete';
+export * from './autocomplete.js';