@canlooks/can-ui 0.0.79 → 0.0.81

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

@@ -16,128 +16,128 @@ exports.classes = (0, utils_1.defineInnerClasses)('calendar', [
     'yearItem',
     'foot'
 ]);
-exports.style = (0, utils_1.defineCss)(({ divider, text, spacing }) => (0, react_1.css) `
-    .${exports.classes.head} {
-        height: 40px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border-bottom: 1px solid ${divider};
-        padding: 0 ${menuItem_style_1.menuListPadding}px;
-        position: relative;
-
-        .${exports.classes.headSide} {
-            z-index: 1;
-        }
-
-        .${exports.classes.headControl} {
-            color: ${text.placeholder};
-        }
-
-        .${exports.classes.headCenter} {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: absolute;
-            inset: 0;
-
-            .${exports.classes.headButton} {
-                font-weight: bold;
-                color: ${text.primary};
-            }
-        }
-    }
-
-    .${exports.classes.body} {
-        padding: ${spacing[3]}px ${spacing[4]}px;
-        display: grid;
-        place-items: center;
-
-        &[data-view-type=date] {
-            font-size: ${13 / 14}em;
-            grid-template-columns: repeat(7, 36px);
-            grid-template-rows: repeat(7, 36px);
-
-            .${exports.classes.dateItem} {
-                width: 24px;
-                height: 24px;
-    
-                &:not([data-variant=filled]) {
-                    color: ${text.primary};
-                    border-color: ${text.disabled};
-    
-                    &[data-other-month=true] {
-                        color: ${text.placeholder};
-                    }
-                }
-
-                &:disabled {
-                    width: 100%;
-                    border-radius: 0;
-                }
-            }
-        }
-
-        &[data-view-type=month], &[data-view-type=year] {
-            grid-template-columns: repeat(3, 84px);
-            grid-template-rows: repeat(4, 63px);
-
-            .${exports.classes.monthItem},
-            .${exports.classes.yearItem} {
-                width: 72px;
-                padding-inline: 0;
-
-                &:not([data-variant=filled]) {
-                    color: ${text.primary};
-                }
-            }
-        }
-    }
-    
-    &[data-size=small] {
-        .${exports.classes.body} {
-            &[data-view-type=date] {
-                grid-template-columns: repeat(7, 30px);
-                grid-template-rows: repeat(7, 30px);
-            }
-
-            &[data-view-type=month], &[data-view-type=year] {
-                grid-template-columns: repeat(3, 70px);
-                grid-template-rows: repeat(4, 52.5px);
-
-                .${exports.classes.monthItem},
-                .${exports.classes.yearItem} {
-                    width: 60px;
-                }
-            }
-        }
-    }
-
-    &[data-size=large] {
-        .${exports.classes.body} {
-            &[data-view-type=date] {
-                font-size: 1em;
-                grid-template-columns: repeat(7, 42px);
-                grid-template-rows: repeat(7, 42px);
-
-                .${exports.classes.dateItem} {
-                    width: 32px;
-                    height: 32px;
-                }
-            }
-
-            &[data-view-type=month], &[data-view-type=year] {
-                grid-template-columns: repeat(3, 98px);
-                grid-template-rows: repeat(4, 73.5px);
-            }
-        }
-    }
-
-    .${exports.classes.foot} {
-        height: 41px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-top: 1px solid ${divider};
-    }
+exports.style = (0, utils_1.defineCss)(({ divider, text, spacing }) => (0, react_1.css) `
+    .${exports.classes.head} {
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid ${divider};
+        padding: 0 ${menuItem_style_1.menuListPadding}px;
+        position: relative;
+
+        .${exports.classes.headSide} {
+            z-index: 1;
+        }
+
+        .${exports.classes.headControl} {
+            color: ${text.placeholder};
+        }
+
+        .${exports.classes.headCenter} {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            inset: 0;
+
+            .${exports.classes.headButton} {
+                font-weight: bold;
+                color: ${text.primary};
+            }
+        }
+    }
+
+    .${exports.classes.body} {
+        padding: ${spacing[3]}px ${spacing[4]}px;
+        display: grid;
+        place-items: center;
+
+        &[data-view-type=date] {
+            font-size: ${13 / 14}em;
+            grid-template-columns: repeat(7, 36px);
+            grid-template-rows: repeat(7, 36px);
+
+            .${exports.classes.dateItem} {
+                width: 24px;
+                height: 24px;
+    
+                &:not([data-variant=filled]) {
+                    color: ${text.primary};
+                    border-color: ${text.disabled};
+    
+                    &[data-other-month=true] {
+                        color: ${text.placeholder};
+                    }
+                }
+
+                &:disabled {
+                    width: 100%;
+                    border-radius: 0;
+                }
+            }
+        }
+
+        &[data-view-type=month], &[data-view-type=year] {
+            grid-template-columns: repeat(3, 84px);
+            grid-template-rows: repeat(4, 63px);
+
+            .${exports.classes.monthItem},
+            .${exports.classes.yearItem} {
+                width: 72px;
+                padding-inline: 0;
+
+                &:not([data-variant=filled]) {
+                    color: ${text.primary};
+                }
+            }
+        }
+    }
+    
+    &[data-size=small] {
+        .${exports.classes.body} {
+            &[data-view-type=date] {
+                grid-template-columns: repeat(7, 30px);
+                grid-template-rows: repeat(7, 30px);
+            }
+
+            &[data-view-type=month], &[data-view-type=year] {
+                grid-template-columns: repeat(3, 70px);
+                grid-template-rows: repeat(4, 52.5px);
+
+                .${exports.classes.monthItem},
+                .${exports.classes.yearItem} {
+                    width: 60px;
+                }
+            }
+        }
+    }
+
+    &[data-size=large] {
+        .${exports.classes.body} {
+            &[data-view-type=date] {
+                font-size: 1em;
+                grid-template-columns: repeat(7, 42px);
+                grid-template-rows: repeat(7, 42px);
+
+                .${exports.classes.dateItem} {
+                    width: 32px;
+                    height: 32px;
+                }
+            }
+
+            &[data-view-type=month], &[data-view-type=year] {
+                grid-template-columns: repeat(3, 98px);
+                grid-template-rows: repeat(4, 73.5px);
+            }
+        }
+    }
+
+    .${exports.classes.foot} {
+        height: 41px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-top: 1px solid ${divider};
+    }
 `);

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

@@ -60,7 +60,7 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     results: number;
     security: string;
     unselectable: "off" | "on";
-    popover: "" | "auto" | "manual";
+    popover: "" | "auto" | "manual" | "hint";
     popoverTargetAction: "toggle" | "hide" | "show";
     popoverTarget: string;
     inert: boolean;

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

@@ -1,5 +1,5 @@
 import React, { ComponentProps, ReactElement, ReactNode } from 'react';
-import { DivProps, Id, Obj, ToRequired } from '../../types';
+import { DivProps, Id, Obj, SlotsAndProps, ToRequired } from '../../types';
 import { SelectionContextProps } from '../selectionContext';
 import { PaginationProps } from '../pagination';
 import { TableProps } from '../table';
@@ -35,7 +35,9 @@ export interface ColumnType<R extends RowType = RowType> extends Omit<ComponentP
     /** @private 内部使用，在{@link DataGridHead}内计算 */
     _negativeRowSpan?: number;
 }
-type DataGridSharedProps<R extends RowType = RowType> = {
+interface DataGridSharedProps<R extends RowType = RowType> extends SlotsAndProps<{
+    tr: ComponentProps<'tr'>;
+}> {
     rowProps?(row: R, index: number, rows: R[]): ComponentProps<'tr'>;
     /** 数据的主键名，默认为`id` */
     primaryKey?: keyof R;
@@ -50,7 +52,7 @@ type DataGridSharedProps<R extends RowType = RowType> = {
     /** 子行缩进，默认为`24` */
     indent?: number;
     renderExpandIcon?(key: Id, isExpand: boolean, expanded: Id[]): ReactNode;
-};
+}
 export type OrderType = 'ascend' | 'descend';
 export interface DataGridBaseProps<R extends RowType = RowType> extends DataGridSharedProps<R>, Omit<DivProps, 'defaultValue' | 'onChange'> {
     columns?: (ColumnType<R> | symbol)[];

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

@@ -19,7 +19,7 @@ const DataGridContext = (0, react_1.createContext)({});
 function useDataGridContext() {
     return (0, react_1.useContext)(DataGridContext);
 }
-exports.DataGrid = (0, react_1.memo)(({ columns, rows, rowProps, primaryKey = 'id', childrenKey = null, filterProps, initialFilterValue, onFilter, onFilterClick, filterPredicate, defaultOrderColumn, orderColumn, defaultOrderType = 'descend', orderType, onOrderChange, selectable, relation = 'dependent', integration = 'shallowest', allowSelectAll = true, clickRowToSelect = true, selectorProps, indent = 24, renderExpandIcon, defaultExpanded, expanded, onExpandedChange, paginatable = true, paginationProps, renderPagination, loading, emptyPlaceholder, columnResizable = false, size, bordered, striped, tableProps, multiple, defaultValue, value, onChange, ...props }) => {
+exports.DataGrid = (0, react_1.memo)(({ slots, slotProps, columns, rows, rowProps, primaryKey = 'id', childrenKey = null, filterProps, initialFilterValue, onFilter, onFilterClick, filterPredicate, defaultOrderColumn, orderColumn, defaultOrderType = 'descend', orderType, onOrderChange, selectable, relation = 'dependent', integration = 'shallowest', allowSelectAll = true, clickRowToSelect = true, selectorProps, indent = 24, renderExpandIcon, defaultExpanded, expanded, onExpandedChange, paginatable = true, paginationProps, renderPagination, loading, emptyPlaceholder, columnResizable = false, size, bordered, striped, tableProps, multiple, defaultValue, value, onChange, ...props }) => {
     /**
      * ---------------------------------------------------------------
      * 选择行
@@ -137,9 +137,11 @@ exports.DataGrid = (0, react_1.memo)(({ columns, rows, rowProps, primaryKey = 'i
                     className: dataGrid_style_1.classes.filterForm,
                     onFinish: filterHandler
                 }), children: (0, jsx_runtime_1.jsx)(columnResize_1.ColumnResizeContext, { columnResizable: columnResizable, children: ({ scrollerRef, tableRef }) => (0, jsx_runtime_1.jsxs)(table_1.TableContainer, { ref: scrollerRef, className: dataGrid_style_1.classes.container, children: [(0, jsx_runtime_1.jsx)(table_1.Table, { size: size, bordered: bordered, striped: striped, ...tableProps, ref: (0, utils_1.cloneRef)(tableProps?.ref, tableRef), children: (0, jsx_runtime_1.jsxs)(selectionContext_1.SelectionContext, { options: rows, primaryKey: primaryKey, childrenKey: childrenKey !== null ? childrenKey : void 0, relation: relation, integration: integration, disabled: !selectable, multiple: multiple, defaultValue: defaultValue, value: value, onChange: onChange, children: [(0, jsx_runtime_1.jsx)(dataGridHead_1.DataGridHead, { rows: rows, flattedColumns: flattedColumns, completedColumns: completedColumns, primaryKey: primaryKey, allowSelectAll: allowSelectAll, columnResizable: columnResizable, orderColumn: innerOrderColumn.current, orderType: innerOrderType.current, onOrderChange: orderChangeHandler, onFilterClick: onFilterClick }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsx)(DataGridContext, { value: (0, react_1.useMemo)(() => ({
+                                                    slots, slotProps,
                                                     rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
                                                     expandedSet, flattedColumns, toggleExpanded
                                                 }), [
+                                                    slots, slotProps,
                                                     rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon,
                                                     expandedSet, flattedColumns
                                                 ]), children: !!paginatedRows?.length &&

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

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataGridRows = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("@emotion/react");
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_2 = require("react");
 const dataGrid_1 = require("./dataGrid");
 const selectionContext_1 = require("../selectionContext");
@@ -18,7 +18,9 @@ const faPlusSquare_1 = require("@fortawesome/free-regular-svg-icons/faPlusSquare
 const dataGrid_style_1 = require("./dataGrid.style");
 exports.DataGridRows = (0, react_2.memo)(({ rows, _level = 0 }) => {
     const { multiple, toggleSelected, selectionStatus } = (0, selectionContext_1.useSelectionContext)();
-    const { rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon, expandedSet, flattedColumns, toggleExpanded } = (0, dataGrid_1.useDataGridContext)();
+    const { slots, slotProps, rowProps, primaryKey, childrenKey, clickRowToSelect, indent, renderExpandIcon, expandedSet, flattedColumns, toggleExpanded } = (0, dataGrid_1.useDataGridContext)();
+    const { tr: Tr = 'tr' } = slots || {};
+    const { tr: TrProps } = slotProps || {};
     return rows?.flatMap((row, i, arr) => {
         const trKey = row[primaryKey];
         if ((0, utils_1.isUnset)(trKey)) {
@@ -31,40 +33,43 @@ exports.DataGridRows = (0, react_2.memo)(({ rows, _level = 0 }) => {
         const currentExpanded = expandable && expandedSet.has(trKey);
         let expandableIndex = -2;
         const ret = [
-            (0, react_1.createElement)("tr", { ..._rowProps, key: trKey, className: (0, utils_1.clsx)(_rowProps, _level > 0 && dataGrid_style_1.classes.sub), onClick: e => {
-                    _rowProps?.onClick?.(e);
-                    clickRowToSelect && toggleSelected(trKey, row);
-                }, "data-selected": status === 2 }, flattedColumns?.flatMap((col, j) => {
-                if (typeof col === 'symbol') {
-                    if (col === dataGrid_1.DataGrid.EXPAND_COLUMN) {
-                        expandableIndex = j;
-                        return [];
+            (0, jsx_runtime_1.jsx)(Tr, { ...(0, utils_1.mergeComponentProps)(TrProps, _rowProps, {
+                    key: trKey,
+                    className: (0, utils_1.clsx)(_rowProps, _level > 0 && dataGrid_style_1.classes.sub),
+                    onClick() {
+                        clickRowToSelect && toggleSelected(trKey, row);
                     }
-                    // col === DataGrid.SELECT_COLUMN
-                    if (expandableIndex === j - 1) {
-                        // select column紧跟在expand column后面，需要顺延expandableIndex
-                        expandableIndex = j;
+                }), "data-selected": status === 2, children: flattedColumns?.flatMap((col, j) => {
+                    if (typeof col === 'symbol') {
+                        if (col === dataGrid_1.DataGrid.EXPAND_COLUMN) {
+                            expandableIndex = j;
+                            return [];
+                        }
+                        // col === DataGrid.SELECT_COLUMN
+                        if (expandableIndex === j - 1) {
+                            // select column紧跟在expand column后面，需要顺延expandableIndex
+                            expandableIndex = j;
+                        }
+                        const Component = multiple ? checkbox_1.Checkbox : radio_1.Radio;
+                        return ((0, jsx_runtime_1.jsx)(table_1.TdCell, { className: dataGrid_style_1.classes.selectable, sticky: j === 0 ? 'left' : void 0, children: (0, jsx_runtime_1.jsx)(Component, { checked: status === 2, indeterminate: status === 1, onChange: () => {
+                                    toggleSelected(trKey, row);
+                                }, onClick: e => e.stopPropagation() }) }, j + '_selectable'));
                     }
-                    const Component = multiple ? checkbox_1.Checkbox : radio_1.Radio;
-                    return ((0, jsx_runtime_1.jsx)(table_1.TdCell, { className: dataGrid_style_1.classes.selectable, sticky: j === 0 ? 'left' : void 0, children: (0, jsx_runtime_1.jsx)(Component, { checked: status === 2, indeterminate: status === 1, onChange: () => {
-                                toggleSelected(trKey, row);
-                            }, onClick: e => e.stopPropagation() }) }, j + '_selectable'));
-                }
-                const { 
-                // 排除无需加入dom节点的属性
-                // width属性只需加入thead列中，普通列需排除
-                // rowSpan与colSpan需排除
-                title, key, children, sticky, 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: shouldRenderExpand ? dataGrid_style_1.classes.expandable : void 0, sticky: sticky }, shouldRenderExpand
-                    ? (0, jsx_runtime_1.jsxs)("div", { className: dataGrid_style_1.classes.expandableWrap, style: { paddingLeft: _level * indent }, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "text", shape: "circular", color: "text.disabled", onClick: () => toggleExpanded(trKey), style: expandable ? void 0 : { visibility: 'hidden' }, children: renderExpandIcon
-                                    ? renderExpandIcon(trKey, currentExpanded, [...expandedSet])
-                                    : currentExpanded
-                                        ? (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faMinusSquare_1.faMinusSquare })
-                                        : (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faPlusSquare_1.faPlusSquare }) }), renderedContent] })
-                    : renderedContent));
-            }))
+                    const { 
+                    // 排除无需加入dom节点的属性
+                    // width属性只需加入thead列中，普通列需排除
+                    // rowSpan与colSpan需排除
+                    title, key, children, sticky, 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: shouldRenderExpand ? dataGrid_style_1.classes.expandable : void 0, sticky: sticky }, shouldRenderExpand
+                        ? (0, jsx_runtime_1.jsxs)("div", { className: dataGrid_style_1.classes.expandableWrap, style: { paddingLeft: _level * indent }, children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "text", shape: "circular", color: "text.disabled", onClick: () => toggleExpanded(trKey), style: expandable ? void 0 : { visibility: 'hidden' }, children: renderExpandIcon
+                                        ? renderExpandIcon(trKey, currentExpanded, [...expandedSet])
+                                        : currentExpanded
+                                            ? (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faMinusSquare_1.faMinusSquare })
+                                            : (0, jsx_runtime_1.jsx)(icon_1.Icon, { icon: faPlusSquare_1.faPlusSquare }) }), renderedContent] })
+                        : renderedContent));
+                }) })
         ];
         if (Array.isArray(children)) {
             currentExpanded && ret.push((0, jsx_runtime_1.jsx)(exports.DataGridRows, { rows: children, _level: _level + 1 }, trKey + '_children'));

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

@@ -60,7 +60,7 @@ min, max, step, precision, placeholder, disabled, readOnly, autoFocus, defaultVa
         if (!clearable || disabled || readOnly) {
             return false;
         }
-        return (0, utils_1.isNoValue)(innerValue.current);
+        return !(0, utils_1.isNoValue)(innerValue.current);
     };
     return ((0, jsx_runtime_1.jsxs)("div", { ...(0, utils_1.mergeComponentProps)(props, {
             ref: innerRef,

package/dist/cjs/components/popper/popper.js

@@ -468,9 +468,10 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, effe
             const click = () => {
                 setOpenForce(false);
             };
-            anchorRef.current.addEventListener('click', click);
+            const anchorEl = anchorRef.current;
+            anchorEl.addEventListener('click', click);
             return () => {
-                anchorRef.current.removeEventListener('click', click);
+                anchorEl.removeEventListener('click', click);
             };
         }
     }, [clickToClose]);

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

@@ -3,12 +3,12 @@ import { DivProps, Status as IStatus } from '../../types';
 import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
 export type StatusType = IStatus | 'confirm' | 'unknown';
 export declare const statusMapToIconDefinition: {
-    info: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    success: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    warning: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    error: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    confirm: import("@fortawesome/fontawesome-common-types").IconDefinition;
-    unknown: import("@fortawesome/fontawesome-common-types").IconDefinition;
+    info: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    success: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    warning: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    error: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    confirm: import("@fortawesome/free-solid-svg-icons").IconDefinition;
+    unknown: import("@fortawesome/free-solid-svg-icons").IconDefinition;
 };
 export interface StatusIconProps extends Partial<FontAwesomeIconProps> {
     status?: StatusType;