@canlooks/can-ui 0.0.64 → 0.0.66

package/dist/cjs/components/button/button.js

@@ -31,7 +31,7 @@ const Button = ({ component: Component = 'button', color = 'primary', shape = 's
                 ? actualPrefix
                     ? (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, { color: reverseTextColor })
                     : (0, jsx_runtime_1.jsx)(transitionBase_1.Collapse, { orientation: "horizontal", in: true, children: (0, jsx_runtime_1.jsx)(loadingIndicator_1.LoadingIndicator, { color: reverseTextColor }) })
-                : actualPrefix, !!actualChildren &&
+                : (0, jsx_runtime_1.jsx)("div", { className: button_style_1.classes.prefix, children: actualPrefix }), !!actualChildren &&
                 (0, jsx_runtime_1.jsx)("div", { className: button_style_1.classes.content, children: actualChildren }), !!suffix &&
                 (0, jsx_runtime_1.jsx)("div", { className: button_style_1.classes.suffix, children: suffix })] }));
 };

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

@@ -23,6 +23,7 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, gray, text, colors, eas
     min-height: 0;
     
     .${loading_style_1.classes.container} {
+        height: auto;
         display: flex;
         flex-direction: column;
     }

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

@@ -358,7 +358,12 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, cont
     const hoverable = triggersSet.has('hover');
     const enterTimeout = (0, react_1.useRef)(void 0);
     const leaveTimeout = (0, react_1.useRef)(void 0);
-    const pointerEnter = (e) => {
+    const isEntered = (0, react_1.useRef)(false);
+    const pointerEnter = () => {
+        if (isEntered.current) {
+            return;
+        }
+        isEntered.current = true;
         hold(true);
         clearTimeout(enterTimeout.current);
         mouseEnterDelay
@@ -366,6 +371,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, cont
             : setInnerOpen(true);
     };
     const pointerLeave = () => {
+        isEntered.current = false;
         hold(false);
         clearTimeout(leaveTimeout.current);
         mouseLeaveDelay

package/dist/cjs/components/upload/dropArea.js

@@ -7,7 +7,6 @@ const dropArea_style_1 = require("./dropArea.style");
 const utils_1 = require("../../utils");
 const __1 = require("../..");
 const faInbox_1 = require("@fortawesome/free-solid-svg-icons/faInbox");
-const faPlus_1 = require("@fortawesome/free-solid-svg-icons/faPlus");
 exports.DropArea = (0, react_1.memo)(({ description = '点击选择文件，或将文件拖拽到这里', onDrop, ...props }) => {
     const [draggingOver, setDraggingOver] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
@@ -34,5 +33,5 @@ exports.DropArea = (0, react_1.memo)(({ description = '点击选择文件，或
         }, onDragLeave: e => {
             props.onDragLeave?.(e);
             setDraggingOver(false);
-        }, onDrop: dropHandler, children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: faInbox_1.faInbox, className: dropArea_style_1.classes.icon, "data-hover": "false" }), (0, jsx_runtime_1.jsx)(__1.Icon, { icon: faPlus_1.faPlus, className: dropArea_style_1.classes.icon, "data-hover": "true" }), (0, jsx_runtime_1.jsx)("div", { className: dropArea_style_1.classes.description, children: description })] }));
+        }, onDrop: dropHandler, children: [(0, jsx_runtime_1.jsx)(__1.Icon, { icon: faInbox_1.faInbox, className: dropArea_style_1.classes.icon }), (0, jsx_runtime_1.jsx)("div", { className: dropArea_style_1.classes.description, children: description })] }));
 });

package/dist/cjs/components/upload/dropArea.style.js

@@ -7,7 +7,7 @@ exports.classes = (0, utils_1.defineInnerClasses)('upload-drop-area', [
     'icon',
     'description'
 ]);
-exports.style = (0, utils_1.defineCss)(({ spacing, gray, divider, borderRadius, text, colors }) => (0, react_1.css) `
+exports.style = (0, utils_1.defineCss)(({ spacing, gray, divider, borderRadius, text, colors, easing }) => (0, react_1.css) `
     height: 100px;
     display: flex;
     gap: ${spacing[1]}px;
@@ -15,10 +15,20 @@ exports.style = (0, utils_1.defineCss)(({ spacing, gray, divider, borderRadius,
     align-items: center;
     justify-content: center;
     border: 1px dashed ${divider};
-    background-color: ${gray(.1)};
     border-radius: ${borderRadius}px;
     color: ${text.disabled};
     cursor: pointer;
+    background-color: ${gray(.1)};
+    transition: background-color .25s ${easing.easeOut};
+
+    &:hover {
+        background-color: ${gray(.15)};
+    }
+
+    &:active {
+        background-color: ${gray(.08)};
+        transition: background-color 0s;
+    }
     
     .${exports.classes.icon}, .${exports.classes.description} {
         pointer-events: none;
@@ -26,22 +36,6 @@ exports.style = (0, utils_1.defineCss)(({ spacing, gray, divider, borderRadius,
 
     .${exports.classes.icon} {
         font-size: ${30 / 14}em;
-        
-        &[data-hover="true"] {
-            display: none;
-        }
-    }
-
-    &:hover {
-        .${exports.classes.icon} {
-            &[data-hover="false"] {
-                display: none;
-            }
-
-            &[data-hover="true"] {
-                display: block;
-            }
-        }
     }
 
     &[data-over=true] {

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

@@ -3,18 +3,18 @@ import { DivProps } from '../../types';
 import { ButtonProps } from '../button';
 import { DropArea } from './dropArea';
 export type UploadStatus = 'default' | 'uploading' | 'success' | 'error';
-export interface UploadFile<R, A extends any[]> extends File {
+export interface UploadFile<R = any, A extends any[] = any[]> extends File {
     id: string;
     progress?: number;
     status?: UploadStatus;
     url?: string;
     upload?(...args: A): Promise<R | undefined>;
 }
-export interface UploadSharedProps<R, A extends any[]> {
+export interface UploadSharedProps<R = any, A extends any[] = any[]> {
     type?: 'file' | 'image';
     onUpload?(files: UploadFile<R, A>[], setProgress: Dispatch<SetStateAction<number>>, ...args: A): Promise<R>;
 }
-export interface UploadProps<R, A extends any[]> extends UploadSharedProps<R, A>, Omit<DivProps, 'defaultValue' | 'onChange'> {
+export interface UploadProps<R = any, A extends any[] = any[]> extends UploadSharedProps<R, A>, Omit<DivProps, 'defaultValue' | 'onChange'> {
     inputProps?: JSX.IntrinsicElements['input'];
     accept?: string;
     max?: number;
@@ -40,6 +40,6 @@ export interface UploadRef<R = any, A extends any[] = any[]> extends HTMLDivElem
     upload(...args: A): Promise<R | undefined>;
 }
 export declare const Upload: {
-    <R, A extends any[]>(props: UploadProps<R, A>): ReactElement;
+    <R = any, A extends any[] = any[]>(props: UploadProps<R, A>): ReactElement;
     DropArea: typeof DropArea;
 };

package/dist/esm/components/button/button.js

@@ -28,7 +28,7 @@ export const Button = ({ component: Component = 'button', color = 'primary', sha
                 ? actualPrefix
                     ? _jsx(LoadingIndicator, { color: reverseTextColor })
                     : _jsx(Collapse, { orientation: "horizontal", in: true, children: _jsx(LoadingIndicator, { color: reverseTextColor }) })
-                : actualPrefix, !!actualChildren &&
+                : _jsx("div", { className: classes.prefix, children: actualPrefix }), !!actualChildren &&
                 _jsx("div", { className: classes.content, children: actualChildren }), !!suffix &&
                 _jsx("div", { className: classes.suffix, children: suffix })] }));
 };

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

@@ -20,6 +20,7 @@ export const style = defineCss(({ spacing, mode, gray, text, colors, easing }) =
     min-height: 0;
     
     .${loadingClasses.container} {
+        height: auto;
         display: flex;
         flex-direction: column;
     }

package/dist/esm/components/popper/popper.js

@@ -355,7 +355,12 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
     const hoverable = triggersSet.has('hover');
     const enterTimeout = useRef(void 0);
     const leaveTimeout = useRef(void 0);
-    const pointerEnter = (e) => {
+    const isEntered = useRef(false);
+    const pointerEnter = () => {
+        if (isEntered.current) {
+            return;
+        }
+        isEntered.current = true;
         hold(true);
         clearTimeout(enterTimeout.current);
         mouseEnterDelay
@@ -363,6 +368,7 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
             : setInnerOpen(true);
     };
     const pointerLeave = () => {
+        isEntered.current = false;
         hold(false);
         clearTimeout(leaveTimeout.current);
         mouseLeaveDelay

package/dist/esm/components/upload/dropArea.js

@@ -4,7 +4,6 @@ import { classes, style } from './dropArea.style';
 import { clsx } from '../../utils';
 import { Icon } from '../..';
 import { faInbox } from '@fortawesome/free-solid-svg-icons/faInbox';
-import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
 export const DropArea = memo(({ description = '点击选择文件，或将文件拖拽到这里', onDrop, ...props }) => {
     const [draggingOver, setDraggingOver] = useState(false);
     useEffect(() => {
@@ -31,5 +30,5 @@ export const DropArea = memo(({ description = '点击选择文件，或将文件
         }, onDragLeave: e => {
             props.onDragLeave?.(e);
             setDraggingOver(false);
-        }, onDrop: dropHandler, children: [_jsx(Icon, { icon: faInbox, className: classes.icon, "data-hover": "false" }), _jsx(Icon, { icon: faPlus, className: classes.icon, "data-hover": "true" }), _jsx("div", { className: classes.description, children: description })] }));
+        }, onDrop: dropHandler, children: [_jsx(Icon, { icon: faInbox, className: classes.icon }), _jsx("div", { className: classes.description, children: description })] }));
 });

package/dist/esm/components/upload/dropArea.style.js

@@ -4,7 +4,7 @@ export const classes = defineInnerClasses('upload-drop-area', [
     'icon',
     'description'
 ]);
-export const style = defineCss(({ spacing, gray, divider, borderRadius, text, colors }) => css `
+export const style = defineCss(({ spacing, gray, divider, borderRadius, text, colors, easing }) => css `
     height: 100px;
     display: flex;
     gap: ${spacing[1]}px;
@@ -12,10 +12,20 @@ export const style = defineCss(({ spacing, gray, divider, borderRadius, text, co
     align-items: center;
     justify-content: center;
     border: 1px dashed ${divider};
-    background-color: ${gray(.1)};
     border-radius: ${borderRadius}px;
     color: ${text.disabled};
     cursor: pointer;
+    background-color: ${gray(.1)};
+    transition: background-color .25s ${easing.easeOut};
+
+    &:hover {
+        background-color: ${gray(.15)};
+    }
+
+    &:active {
+        background-color: ${gray(.08)};
+        transition: background-color 0s;
+    }
     
     .${classes.icon}, .${classes.description} {
         pointer-events: none;
@@ -23,22 +33,6 @@ export const style = defineCss(({ spacing, gray, divider, borderRadius, text, co
 
     .${classes.icon} {
         font-size: ${30 / 14}em;
-        
-        &[data-hover="true"] {
-            display: none;
-        }
-    }
-
-    &:hover {
-        .${classes.icon} {
-            &[data-hover="false"] {
-                display: none;
-            }
-
-            &[data-hover="true"] {
-                display: block;
-            }
-        }
     }
 
     &[data-over=true] {

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

@@ -3,18 +3,18 @@ import { DivProps } from '../../types';
 import { ButtonProps } from '../button';
 import { DropArea } from './dropArea';
 export type UploadStatus = 'default' | 'uploading' | 'success' | 'error';
-export interface UploadFile<R, A extends any[]> extends File {
+export interface UploadFile<R = any, A extends any[] = any[]> extends File {
     id: string;
     progress?: number;
     status?: UploadStatus;
     url?: string;
     upload?(...args: A): Promise<R | undefined>;
 }
-export interface UploadSharedProps<R, A extends any[]> {
+export interface UploadSharedProps<R = any, A extends any[] = any[]> {
     type?: 'file' | 'image';
     onUpload?(files: UploadFile<R, A>[], setProgress: Dispatch<SetStateAction<number>>, ...args: A): Promise<R>;
 }
-export interface UploadProps<R, A extends any[]> extends UploadSharedProps<R, A>, Omit<DivProps, 'defaultValue' | 'onChange'> {
+export interface UploadProps<R = any, A extends any[] = any[]> extends UploadSharedProps<R, A>, Omit<DivProps, 'defaultValue' | 'onChange'> {
     inputProps?: JSX.IntrinsicElements['input'];
     accept?: string;
     max?: number;
@@ -40,6 +40,6 @@ export interface UploadRef<R = any, A extends any[] = any[]> extends HTMLDivElem
     upload(...args: A): Promise<R | undefined>;
 }
 export declare const Upload: {
-    <R, A extends any[]>(props: UploadProps<R, A>): ReactElement;
+    <R = any, A extends any[] = any[]>(props: UploadProps<R, A>): ReactElement;
     DropArea: typeof DropArea;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.64",
+  "version": "0.0.66",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",