@canlooks/can-ui 0.0.70 → 0.0.72

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

@@ -13,128 +13,128 @@ export const classes = defineInnerClasses('calendar', [
     'yearItem',
     'foot'
 ]);
-export const style = defineCss(({ divider, text, spacing }) => css `
-    .${classes.head} {
-        height: 40px;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border-bottom: 1px solid ${divider};
-        padding: 0 ${menuListPadding}px;
-        position: relative;
-
-        .${classes.headSide} {
-            z-index: 1;
-        }
-
-        .${classes.headControl} {
-            color: ${text.placeholder};
-        }
-
-        .${classes.headCenter} {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: absolute;
-            inset: 0;
-
-            .${classes.headButton} {
-                font-weight: bold;
-                color: ${text.primary};
-            }
-        }
-    }
-
-    .${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);
-
-            .${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);
-
-            .${classes.monthItem},
-            .${classes.yearItem} {
-                width: 72px;
-                padding-inline: 0;
-
-                &:not([data-variant=filled]) {
-                    color: ${text.primary};
-                }
-            }
-        }
-    }
-    
-    &[data-size=small] {
-        .${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);
-
-                .${classes.monthItem},
-                .${classes.yearItem} {
-                    width: 60px;
-                }
-            }
-        }
-    }
-
-    &[data-size=large] {
-        .${classes.body} {
-            &[data-view-type=date] {
-                font-size: 1em;
-                grid-template-columns: repeat(7, 42px);
-                grid-template-rows: repeat(7, 42px);
-
-                .${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);
-            }
-        }
-    }
-
-    .${classes.foot} {
-        height: 41px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border-top: 1px solid ${divider};
-    }
+export const style = defineCss(({ divider, text, spacing }) => css `
+    .${classes.head} {
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border-bottom: 1px solid ${divider};
+        padding: 0 ${menuListPadding}px;
+        position: relative;
+
+        .${classes.headSide} {
+            z-index: 1;
+        }
+
+        .${classes.headControl} {
+            color: ${text.placeholder};
+        }
+
+        .${classes.headCenter} {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            inset: 0;
+
+            .${classes.headButton} {
+                font-weight: bold;
+                color: ${text.primary};
+            }
+        }
+    }
+
+    .${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);
+
+            .${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);
+
+            .${classes.monthItem},
+            .${classes.yearItem} {
+                width: 72px;
+                padding-inline: 0;
+
+                &:not([data-variant=filled]) {
+                    color: ${text.primary};
+                }
+            }
+        }
+    }
+    
+    &[data-size=small] {
+        .${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);
+
+                .${classes.monthItem},
+                .${classes.yearItem} {
+                    width: 60px;
+                }
+            }
+        }
+    }
+
+    &[data-size=large] {
+        .${classes.body} {
+            &[data-view-type=date] {
+                font-size: 1em;
+                grid-template-columns: repeat(7, 42px);
+                grid-template-rows: repeat(7, 42px);
+
+                .${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);
+            }
+        }
+    }
+
+    .${classes.foot} {
+        height: 41px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-top: 1px solid ${divider};
+    }
 `);

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

@@ -1,4 +1,4 @@
-import { Dispatch, ReactElement, ReactNode, Ref, SetStateAction, JSX } from 'react';
+import { Dispatch, ReactElement, ReactNode, Ref, SetStateAction, ComponentProps } from 'react';
 import { InputProps } from '../input';
 import { InputBaseProps } from '../inputBase';
 import { PopperProps, PopperRef } from '../popper';
@@ -7,7 +7,7 @@ import { MenuOptionType, OptionsBaseSharedProps } from '../optionsBase';
 import { Id, SelectableMultipleProps, SelectableSingleProps } from '../../types';
 export interface CascadeBaseProps<O extends MenuOptionType<V>, V extends Id = Id> extends Omit<OptionsBaseSharedProps<O>, 'filterPredicate'>, Omit<InputBaseProps<'input'>, 'children' | 'defaultValue' | 'value' | 'onChange'> {
     /** cascade内部由<input />实现 */
-    inputProps?: JSX.IntrinsicElements['input'];
+    inputProps?: ComponentProps<'input'>;
     defaultOpen?: boolean;
     open?: boolean;
     onOpenChange?(open: boolean): void;

package/dist/esm/components/cascade/cascade.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { createContext, memo, useContext, useDeferredValue, useEffect, useMemo, useState } from 'react';
-import { useControlled, useLoading, useKeyboard, joinNodes, clsx, cloneRef, toArray } from '../../utils';
+import { useControlled, useLoading, useKeyboard, joinNodes, clsx, toArray, mergeComponentProps } from '../../utils';
 import { Input } from '../input';
 import { InputBase } from '../inputBase';
 import { Popper } from '../popper';
@@ -33,12 +33,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
      * 打开的弹框与面板
      */
     const [innerOpen, setInnerOpen] = useControlled(defaultOpen, open, onOpenChange);
-    const openChangeHandler = (open) => {
-        popperProps?.onOpenChange?.(open);
-        setInnerOpen(open);
-    };
     const onOpenChangeEnd = (open) => {
-        popperProps?.onOpenChangeEnd?.(open);
         // 关闭动画结束后清空搜索框
         searchable && !open && setInnerSearchValue('');
     };
@@ -113,8 +108,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         clearable,
         integration
     });
-    const clearHandler = () => {
-        props.onClear?.();
+    const onClear = () => {
         setInnerValue([]);
         setOpenedPanels([]);
     };
@@ -191,19 +185,37 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
             return (_jsx("div", { className: classes.backfillWrap, children: joinNodes(pathifiedValue.current, v => optionsMap.get(v)?.[labelKey] ?? v.toString()) }));
         }
     };
-    return (_jsx(Popper, { css: cascadePopperStyle, open: innerOpen.current, placement: "bottomLeft", trigger: ['click', 'enter'], disabled: props.disabled, content: _jsxs("div", { children: [searchable &&
-                    _jsx(Input, { prefix: _jsx(Icon, { icon: faMagnifyingGlass }), placeholder: "\u641C\u7D22", value: innerSearchValue.current, ...searchInputProps, className: clsx(classes.searchInput, searchInputProps?.className), onChange: e => {
-                            searchInputProps?.onChange?.(e);
-                            setInnerSearchValue(e.target.value);
-                        } }), deferredSearchValue
-                    ? _jsx(SearchResult, { primaryKey: primaryKey, labelKey: labelKey, childrenKey: childrenKey, searchTokenKey: searchTokenKey, options: actualOptions, searchValue: deferredSearchValue, onSelect: toggleSelected, selectionStatus: selectionStatus })
-                    : _jsx("div", { className: classes.panelContainer, children: _jsx(CascadeContext, { value: {
-                                innerLoading: innerLoading.current, loadingOption, multiple, showCheckbox,
-                                primaryKey, labelKey, childrenKey, pathifiedValue: pathifiedValue.current,
-                                selectionStatus, optionsMap,
-                                openedPanels, onOptionClick, onCheckboxClick,
-                                verticalIndex: verticalIndex.current, setVerticalIndex, horizontalIndex: horizontalIndex.current
-                            }, children: _jsx(CascadePanel, { options: actualOptions }) }) })] }), ...popperProps, popperRef: popperRef, onOpenChange: openChangeHandler, onOpenChangeEnd: onOpenChangeEnd, children: _jsx(InputBase, { ...props, css: style, className: clsx(classes.root, props.className), onClear: clearHandler, clearable: clearable, value: pathifiedValue.current, "data-focused": innerOpen.current, loading: innerLoading.current, children: ({ ref, ...rest }) => _jsxs("div", { className: classes.contentWrap, children: [!pathifiedValue.current?.length
+    return (_jsx(Popper, { ...mergeComponentProps({
+            css: cascadePopperStyle,
+            open: innerOpen.current,
+            placement: 'bottomLeft',
+            trigger: ['click', 'enter'],
+            disabled: props.disabled,
+            content: (_jsxs("div", { children: [searchable &&
+                        _jsx(Input, { prefix: _jsx(Icon, { icon: faMagnifyingGlass }), placeholder: "\u641C\u7D22", value: innerSearchValue.current, ...searchInputProps, className: clsx(classes.searchInput, searchInputProps?.className), onChange: e => {
+                                searchInputProps?.onChange?.(e);
+                                setInnerSearchValue(e.target.value);
+                            } }), deferredSearchValue
+                        ? _jsx(SearchResult, { primaryKey: primaryKey, labelKey: labelKey, childrenKey: childrenKey, searchTokenKey: searchTokenKey, options: actualOptions, searchValue: deferredSearchValue, onSelect: toggleSelected, selectionStatus: selectionStatus })
+                        : _jsx("div", { className: classes.panelContainer, children: _jsx(CascadeContext, { value: {
+                                    innerLoading: innerLoading.current, loadingOption, multiple, showCheckbox,
+                                    primaryKey, labelKey, childrenKey, pathifiedValue: pathifiedValue.current,
+                                    selectionStatus, optionsMap,
+                                    openedPanels, onOptionClick, onCheckboxClick,
+                                    verticalIndex: verticalIndex.current, setVerticalIndex, horizontalIndex: horizontalIndex.current
+                                }, children: _jsx(CascadePanel, { options: actualOptions }) }) })] }))
+        }, popperProps, {
+            popperRef,
+            onOpenChange: setInnerOpen,
+            onOpenChangeEnd
+        }), children: _jsx(InputBase, { ...mergeComponentProps(props, {
+                css: style,
+                className: classes.root,
+                onClear,
+                clearable,
+                value: pathifiedValue.current,
+                loading: innerLoading.current
+            }), "data-focused": innerOpen.current, children: inputBaseProps => _jsxs("div", { className: classes.contentWrap, children: [!pathifiedValue.current?.length
                         ? _jsx("div", { className: classes.placeholder, children: props.placeholder })
-                        : _jsx("div", { className: classes.backfill, children: renderBackfillFn() }), _jsx("input", { ...rest, ...inputProps, ref: cloneRef(ref, inputProps?.ref), "data-hidden": "true" }), _jsx("div", { className: classes.arrow, "data-open": innerOpen.current, children: _jsx(Icon, { icon: faCaretDown }) })] }) }) }));
+                        : _jsx("div", { className: classes.backfill, children: renderBackfillFn() }), _jsx("input", { ...mergeComponentProps(inputBaseProps, inputProps), "data-hidden": "true" }), _jsx("div", { className: classes.arrow, "data-open": innerOpen.current, children: _jsx(Icon, { icon: faCaretDown }) })] }) }) }));
 });

package/dist/esm/components/cascade/cascadePanel.js

@@ -6,7 +6,7 @@ import { Placeholder } from '../placeholder';
 import { classes } from './cascade.style';
 import { Collapse } from '../transitionBase';
 import { useCascadeContext } from './cascade';
-import { isUnset } from '../../utils';
+import { isUnset, mergeComponentProps } from '../../utils';
 import { Icon } from '../icon';
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
 export function CascadePanel({ options, index = 0 }) {
@@ -36,20 +36,30 @@ export function CascadePanel({ options, index = 0 }) {
             const status = selectionStatus?.get(optVal);
             const opened = openedPanels[index] === optVal;
             const hasChildren = !!opt[childrenKey]?.length;
-            return (_jsx(MenuItem, { showCheckbox: showCheckbox, ...opt, checkboxProps: {
-                    ...opt?.checkboxProps,
-                    ...showCheckbox && {
-                        indeterminate: status === 1,
-                        checked: status === 2,
-                        async onClick(e) {
-                            opt.onClick?.(e);
-                            e.stopPropagation();
-                            onCheckboxClick(opt, index);
+            return (_jsx(MenuItem, { ...mergeComponentProps({
+                    showCheckbox,
+                    key: optVal
+                }, opt, {
+                    checkboxProps: mergeComponentProps(opt?.checkboxProps, showCheckbox
+                        ? {
+                            indeterminate: status === 1,
+                            checked: status === 2,
+                            async onClick(e) {
+                                e.stopPropagation();
+                                onCheckboxClick(opt, index);
+                            }
                         }
-                    }
-                }, selected: isSelected(optVal) || (opened && hasChildren), focused: horizontalIndex === index && verticalIndex === i, label: opt[labelKey], onClick: () => onOptionClick(opt, index), onPointerEnter: onPointerEnter, suffix: innerLoading && loadingOption === optVal
-                    ? _jsx(LoadingIndicator, {})
-                    : hasChildren && _jsx(Icon, { icon: faChevronRight }), children: null }, optVal));
+                        : void 0),
+                    selected: isSelected(optVal) || (opened && hasChildren),
+                    focused: horizontalIndex === index && verticalIndex === i,
+                    label: opt[labelKey],
+                    onClick: () => onOptionClick(opt, index),
+                    onPointerEnter,
+                    suffix: innerLoading && loadingOption === optVal
+                        ? _jsx(LoadingIndicator, {})
+                        : hasChildren && _jsx(Icon, { icon: faChevronRight }),
+                    children: null
+                }) }));
         });
     };
     const nextOptions = optionsMap.get(openedPanels[index])?.[childrenKey];

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

@@ -1,7 +1,7 @@
-import React, { ReactNode, JSX } from 'react';
+import React, { ReactNode, ComponentProps } from 'react';
 import { ColorPropsValue, DivProps, Id, Size } from '../../types';
 export interface CheckboxBaseProps extends DivProps {
-    inputProps?: JSX.IntrinsicElements['input'];
+    inputProps?: ComponentProps<'input'>;
     /** @private 内部使用 */
     _type: 'checkbox' | 'radio';
     size?: Size;

package/dist/esm/components/checkboxBase/checkboxBase.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { memo, useRef } from 'react';
-import { clsx, cloneRef, useControlled, useTouchSpread } from '../../utils';
+import { clsx, useControlled, useTouchSpread, mergeComponentProps } from '../../utils';
 import { classes, useStyle } from './checkboxBase.style';
 import { useCheckboxBaseGroupContext } from '../checkboxBaseGroup';
 import { Icon } from '../icon';
@@ -28,7 +28,7 @@ export const CheckboxBase = memo(({ inputProps, _type, size, color, label, value
         onChange?.(e);
         setInnerChecked(newChecked);
     };
-    const inputKeydown = (e) => {
+    const onKeyDown = (e) => {
         inputProps?.onKeyDown?.(e);
         e.key === 'Enter' && clickHandler(e);
     };
@@ -41,5 +41,12 @@ export const CheckboxBase = memo(({ inputProps, _type, size, color, label, value
                 : _jsx("div", { ref: checkboxRef, className: `${classes.checkbox} ${classes.radio}`, children: innerChecked.current
                         ? _jsx("div", { className: classes.radioChecked })
                         : null }), !!label &&
-                _jsx("div", { className: classes.label, children: label }), _jsx("input", { type: _type, disabled: disabled, readOnly: readOnly, ...inputProps, ref: cloneRef(innerInputRef, inputProps?.ref), className: clsx(classes.input, inputProps?.className), onKeyDown: inputKeydown })] }));
+                _jsx("div", { className: classes.label, children: label }), _jsx("input", { ...mergeComponentProps({
+                    type: _type,
+                    disabled,
+                    readOnly,
+                    ref: innerInputRef,
+                    className: classes.input,
+                    onKeyDown
+                }, inputProps) })] }));
 });

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

@@ -3,8 +3,8 @@ export declare const classes: {
     input: string;
     label: string;
     icon: string;
-    checkbox: string;
     radio: string;
+    checkbox: string;
     radioChecked: string;
     indeterminate: string;
 } & {

package/dist/esm/components/checkboxBaseGroup/checkboxBaseGroup.js

@@ -7,20 +7,20 @@ import { classes } from './checkboxBaseGroup.style';
 import { Checkbox } from '../checkbox';
 import { Radio } from '../radio';
 import { useTheme } from '../theme';
-import { useShallowSelection } from '../selectionContext';
+import { useFlatSelection } from '../selectionContext';
 const CheckboxBaseGroupContext = createContext({});
 export function useCheckboxBaseGroupContext() {
     return useContext(CheckboxBaseGroupContext);
 }
 export const CheckboxBaseGroup = (({ size, color, items, primaryKey = 'value', multiple, defaultValue, value, onChange, ...props }) => {
     const { spacing } = useTheme();
-    const [innerValue, toggleSelected] = useShallowSelection({ multiple, defaultValue, value, onChange });
+    const [innerValue, toggleSelected] = useFlatSelection({ multiple, defaultValue, value, onChange });
     const renderItems = () => {
         if (items) {
             return items.map((p, i) => {
                 const Component = multiple ? Checkbox : Radio;
                 const itemValue = p[primaryKey];
-                return (_createElement(Component, { ...p, key: p.key ?? itemValue ?? i, size: p.size ?? size, color: p.color ?? color, checked: isSelected(itemValue, innerValue), onChange: e => {
+                return (_createElement(Component, { size: size, color: color, ...p, key: p.key ?? itemValue ?? i, checked: isSelected(itemValue, innerValue), onChange: e => {
                         p.onChange?.(e);
                         toggleSelected(itemValue);
                     } }));

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

@@ -18,26 +18,26 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     suppressContentEditableWarning: boolean;
     suppressHydrationWarning: boolean;
     accessKey: string;
-    autoCapitalize: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters";
+    autoCapitalize: "none" | (string & {}) | "off" | "on" | "sentences" | "words" | "characters";
     autoFocus: boolean;
     className: string;
-    contentEditable: boolean | "inherit" | "false" | "true" | "plaintext-only";
+    contentEditable: boolean | "true" | "inherit" | "false" | "plaintext-only";
     contextMenu: string;
     dir: string;
-    draggable: boolean | "false" | "true";
-    enterKeyHint: "search" | "done" | "next" | "enter" | "go" | "previous" | "send";
+    draggable: boolean | "true" | "false";
+    enterKeyHint: "search" | "done" | "send" | "next" | "enter" | "go" | "previous";
     hidden: boolean;
     id: string;
     lang: string;
     nonce: string;
     slot: string;
-    spellCheck: boolean | "false" | "true";
+    spellCheck: boolean | "true" | "false";
     style: import("react").CSSProperties;
     tabIndex: number;
     title: string;
-    translate: "yes" | "no";
+    translate: "no" | "yes";
     radioGroup: string;
-    role: "article" | "button" | "dialog" | "figure" | "form" | "img" | "link" | "main" | "menu" | "menuitem" | "option" | "search" | "table" | "switch" | "status" | (string & {}) | "none" | "checkbox" | "listbox" | "radio" | "region" | "cell" | "grid" | "row" | "listitem" | "menubar" | "progressbar" | "separator" | "tab" | "tabpanel" | "toolbar" | "tooltip" | "treeitem" | "scrollbar" | "alert" | "alertdialog" | "application" | "banner" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "directory" | "document" | "feed" | "gridcell" | "group" | "heading" | "list" | "log" | "marquee" | "math" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "note" | "presentation" | "radiogroup" | "rowgroup" | "rowheader" | "searchbox" | "slider" | "spinbutton" | "tablist" | "term" | "textbox" | "timer" | "tree" | "treegrid";
+    role: "article" | "button" | "dialog" | "figure" | "form" | "img" | "link" | "main" | "menu" | "menuitem" | "option" | "search" | "table" | "switch" | "none" | "status" | "feed" | "grid" | "heading" | "list" | "note" | "presentation" | "radio" | "slider" | "timer" | "tree" | (string & {}) | "checkbox" | "listbox" | "region" | "cell" | "row" | "listitem" | "menubar" | "progressbar" | "separator" | "tab" | "tabpanel" | "toolbar" | "tooltip" | "treeitem" | "scrollbar" | "alert" | "alertdialog" | "application" | "banner" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "directory" | "document" | "gridcell" | "group" | "log" | "marquee" | "math" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "radiogroup" | "rowgroup" | "rowheader" | "searchbox" | "spinbutton" | "tablist" | "term" | "textbox" | "treegrid";
     about: string;
     content: string;
     datatype: string;
@@ -60,8 +60,8 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     results: number;
     security: string;
     unselectable: "off" | "on";
-    popover: "" | "auto" | "manual";
-    popoverTargetAction: "hide" | "show" | "toggle";
+    popover: "" | "auto" | "manual" | "hint";
+    popoverTargetAction: "toggle" | "hide" | "show";
     popoverTarget: string;
     inert: boolean;
     inputMode: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
@@ -69,52 +69,52 @@ export declare function ClickAway({ ref, container, eventType, onClickAway, disa
     exportparts: string;
     part: string;
     "aria-activedescendant": string;
-    "aria-atomic": boolean | "false" | "true";
-    "aria-autocomplete": "both" | "none" | "inline" | "list";
+    "aria-atomic": boolean | "true" | "false";
+    "aria-autocomplete": "none" | "list" | "both" | "inline";
     "aria-braillelabel": string;
     "aria-brailleroledescription": string;
-    "aria-busy": boolean | "false" | "true";
-    "aria-checked": boolean | "mixed" | "false" | "true";
+    "aria-busy": boolean | "true" | "false";
+    "aria-checked": boolean | "true" | "mixed" | "false";
     "aria-colcount": number;
     "aria-colindex": number;
     "aria-colindextext": string;
     "aria-colspan": number;
     "aria-controls": string;
-    "aria-current": boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date";
+    "aria-current": boolean | "time" | "true" | "location" | "page" | "false" | "step" | "date";
     "aria-describedby": string;
     "aria-description": string;
     "aria-details": string;
-    "aria-disabled": boolean | "false" | "true";
-    "aria-dropeffect": "link" | "none" | "copy" | "move" | "execute" | "popup";
+    "aria-disabled": boolean | "true" | "false";
+    "aria-dropeffect": "link" | "copy" | "none" | "move" | "execute" | "popup";
     "aria-errormessage": string;
-    "aria-expanded": boolean | "false" | "true";
+    "aria-expanded": boolean | "true" | "false";
     "aria-flowto": string;
-    "aria-grabbed": boolean | "false" | "true";
-    "aria-haspopup": boolean | "dialog" | "menu" | "listbox" | "grid" | "false" | "true" | "tree";
-    "aria-hidden": boolean | "false" | "true";
-    "aria-invalid": boolean | "false" | "true" | "grammar" | "spelling";
+    "aria-grabbed": boolean | "true" | "false";
+    "aria-haspopup": boolean | "dialog" | "menu" | "true" | "grid" | "tree" | "listbox" | "false";
+    "aria-hidden": boolean | "true" | "false";
+    "aria-invalid": boolean | "true" | "false" | "grammar" | "spelling";
     "aria-keyshortcuts": string;
     "aria-label": string;
     "aria-labelledby": string;
     "aria-level": number;
     "aria-live": "off" | "assertive" | "polite";
-    "aria-modal": boolean | "false" | "true";
-    "aria-multiline": boolean | "false" | "true";
-    "aria-multiselectable": boolean | "false" | "true";
+    "aria-modal": boolean | "true" | "false";
+    "aria-multiline": boolean | "true" | "false";
+    "aria-multiselectable": boolean | "true" | "false";
     "aria-orientation": "horizontal" | "vertical";
     "aria-owns": string;
     "aria-placeholder": string;
     "aria-posinset": number;
-    "aria-pressed": boolean | "mixed" | "false" | "true";
-    "aria-readonly": boolean | "false" | "true";
+    "aria-pressed": boolean | "true" | "mixed" | "false";
+    "aria-readonly": boolean | "true" | "false";
     "aria-relevant": "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
-    "aria-required": boolean | "false" | "true";
+    "aria-required": boolean | "true" | "false";
     "aria-roledescription": string;
     "aria-rowcount": number;
     "aria-rowindex": number;
     "aria-rowindextext": string;
     "aria-rowspan": number;
-    "aria-selected": boolean | "false" | "true";
+    "aria-selected": boolean | "true" | "false";
     "aria-setsize": number;
     "aria-sort": "none" | "ascending" | "descending" | "other";
     "aria-valuemax": number;

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

@@ -1,9 +1,9 @@
-import { ReactNode, Ref, JSX } from 'react';
+import { ReactNode, Ref, ComponentProps } from 'react';
 import { PopperProps, PopperRef } from '../popper';
 import { ColorPropsValue, DivProps, Size } from '../../types';
 import { ColorInstance } from 'color';
 export interface ColorPickerProps extends Omit<DivProps, 'defaultValue' | 'onChange'> {
-    inputProps?: JSX.IntrinsicElements['input'];
+    inputProps?: ComponentProps<'input'>;
     popperProps?: PopperProps;
     popperRef?: Ref<PopperRef>;
     size?: Size;