@canlooks/can-ui 0.0.45 → 0.0.46

package/dist/cjs/components/dateTimePicker/dateTimePicker.js

@@ -11,7 +11,7 @@ const utils_1 = require("../../utils");
 const dateTimePicker_style_1 = require("./dateTimePicker.style");
 const dayjs_1 = tslib_1.__importDefault(require("dayjs"));
 const customParseFormat_1 = tslib_1.__importDefault(require("dayjs/plugin/customParseFormat"));
-const calendar_1 = require("./calendar");
+const calendar_1 = require("../calendar");
 const timer_1 = require("./timer");
 const __1 = require("../..");
 const faCalendar_1 = require("@fortawesome/free-regular-svg-icons/faCalendar");
@@ -81,11 +81,11 @@ exports.DateTimePicker = (0, react_1.memo)(({ inputProps, popperProps, min, max,
         }
         selectFn();
     };
-    const focusHandler = (e) => {
+    const focusHandler = () => {
         focused.current = true;
         selectFn();
     };
-    const blurHandler = (e) => {
+    const blurHandler = () => {
         resetContinue();
         focused.current = false;
         _setInnerOpen(false);
@@ -207,21 +207,18 @@ exports.DateTimePicker = (0, react_1.memo)(({ inputProps, popperProps, min, max,
         input.setSelectionRange(nextRange.start, nextRange.end);
     };
     const contextValue = (0, react_1.useMemo)(() => ({
-        min, max, disabledDates,
-        disabledHours, disabledMinutes, disabledSeconds
+        min, max, disabledHours, disabledMinutes, disabledSeconds
     }), [
-        min, max, disabledDates,
-        disabledHours, disabledMinutes, disabledSeconds
+        min, max, disabledHours, disabledMinutes, disabledSeconds
     ]);
     const showCalendar = /[YMD]/.test(format);
     const showTimer = /[Hms]/.test(format);
     const _dateVal = dateValue.current || (0, dayjs_1.default)();
-    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { css: dateTimePicker_style_1.datePickerPopperStyle, open: innerOpen.current, placement: "bottomLeft", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, content: (0, jsx_runtime_1.jsxs)(DateTimePickerContext, { value: contextValue, children: [showCalendar &&
-                    (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { type: format.includes('D') ? 'dates'
-                            : format.includes('M') ? 'months'
-                                : format.includes('Y') ? 'years'
-                                    : 'dates', defaultNull: !dateValue.current, value: _dateVal, onChange: setDateValue }), showTimer &&
-                    (0, jsx_runtime_1.jsx)(timer_1.Timer, { showHours: format.includes('H'), showMinutes: format.includes('m'), showSeconds: format.includes('s'), value: _dateVal, onChange: setDateValue })] }), ...popperProps, onOpenChange: setInnerOpen, onPointerDown: e => {
+    return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { css: dateTimePicker_style_1.datePickerPopperStyle, open: innerOpen.current, placement: "bottomLeft", trigger: ['click', 'enter'], disabled: props.disabled || props.readOnly, content: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showCalendar &&
+                    (0, jsx_runtime_1.jsx)(calendar_1.Calendar, { viewLevel: format.includes('D') ? 'date'
+                            : format.includes('M') ? 'month'
+                                : 'year', _defaultNull: !dateValue.current, value: _dateVal, onChange: setDateValue, min: min, max: max, disabledDates: disabledDates }), showTimer &&
+                    (0, jsx_runtime_1.jsx)(DateTimePickerContext, { value: contextValue, children: (0, jsx_runtime_1.jsx)(timer_1.Timer, { showHours: format.includes('H'), showMinutes: format.includes('m'), showSeconds: format.includes('s'), value: _dateVal, onChange: setDateValue }) })] }), ...popperProps, onOpenChange: setInnerOpen, onPointerDown: e => {
             popperProps?.onPointerDown?.(e);
             e.preventDefault();
         }, children: (0, jsx_runtime_1.jsx)(inputBase_1.InputBase, { ...props, css: dateTimePicker_style_1.style, className: (0, utils_1.clsx)(dateTimePicker_style_1.classes.root, props.className), "data-focused": innerOpen.current, value: dateValue.current, onClear: clearHandler, onSelect: selectHandler, onFocus: focusHandler, onBlur: blurHandler, onKeyDown: keydownHandler, children: ({ ref, value, onChange, ...rest }) => (0, jsx_runtime_1.jsxs)("div", { className: dateTimePicker_style_1.classes.container, children: [(0, jsx_runtime_1.jsx)("input", { ...rest, ...inputProps, ref: (0, utils_1.cloneRef)(ref, inputProps?.ref, innerInputRef), className: (0, utils_1.clsx)(dateTimePicker_style_1.classes.input, inputProps?.className) }), (0, jsx_runtime_1.jsx)("div", { className: dateTimePicker_style_1.classes.dateTimeIcon, children: showTimer && !showCalendar

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

@@ -2,16 +2,16 @@ export declare const classes: {
     input: string;
     container: string;
     calendar: string;
+    dateItem: string;
+    inputGroup: string;
+    inputUnit: string;
+    dateTimeIcon: string;
     calendarHead: string;
     calendarHeadSide: string;
     calendarHeadControl: string;
     calendarHeadCenter: string;
     calendarHeadButton: string;
     calendarBody: string;
-    dateItem: string;
-    inputGroup: string;
-    inputUnit: string;
-    dateTimeIcon: string;
     calendarDays: string;
 } & {
     root: string;

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

@@ -4,7 +4,7 @@ exports.datePickerPopperStyle = exports.style = exports.classes = void 0;
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const input_style_1 = require("../input/input.style");
-const calendar_style_1 = require("./calendar.style");
+const calendar_style_1 = require("../calendar/calendar.style");
 const timer_style_1 = require("./timer.style");
 const popper_style_1 = require("../popper/popper.style");
 exports.classes = (0, utils_1.defineInnerClasses)('date-time-picker', [

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

@@ -1,3 +1,3 @@
-export * from './calendar';
+export * from '../calendar/calendar';
 export * from './dateTimePicker';
 export * from './timer';

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

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

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

@@ -15,6 +15,7 @@ export interface DateTimeRangePickerProps extends DatePickerSharedProps, Omit<Di
     onOpenPickerChange?(openPicker?: 'start' | 'end' | 'closed'): void;
     autoClose?: boolean;
     separator?: ReactNode;
+    disabledDates?: (date: Dayjs) => any;
     variant?: 'outlined' | 'underlined' | 'plain';
     size?: Size;
     color?: ColorPropsValue;

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

@@ -0,0 +1,6 @@
+import { FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
+import { ColorPropsValue } from '../../types';
+export interface IconProps extends Omit<FontAwesomeIconProps, 'color'> {
+    color?: ColorPropsValue;
+}
+export declare function Icon({ color, ...props }: IconProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/cjs/components/icon/icon.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = Icon;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
+const utils_1 = require("../../utils");
+function Icon({ color, ...props }) {
+    return (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { ...props, color: (0, utils_1.useColor)(color) });
+}

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

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

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

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

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.style = exports.classes = void 0;
 const utils_1 = require("../../utils");
 const react_1 = require("@emotion/react");
-exports.classes = (0, utils_1.defineClasses)('pinchable', [
+exports.classes = (0, utils_1.defineInnerClasses)('pinchable', [
     'content'
 ]);
 exports.style = (0, utils_1.defineCss)(({ easing }) => (0, react_1.css) `

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

@@ -484,7 +484,7 @@ function Popper({ ref, popperRef, anchorElement, container = document.body, cont
         onChildrenOpenChange,
         beforeOpenCallbacks: beforeOpenCallbacks.current
     }), [innerOpen.current, autoClose]);
-    const childRef = (0, react_1.useCallback)((0, utils_1.cloneRef)(children?.props.ref, anchorRef, ref), [children?.props.ref]);
+    const childRef = (0, react_1.useCallback)((0, utils_1.cloneRef)(children?.props.ref, anchorRef, ref), [children?.props.ref, ref]);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, react_1.isValidElement)(children)
                 ? (0, react_1.cloneElement)(children, { ref: childRef })
                 : children, renderedOnce.current && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(clickAway_1.ClickAway, { disabled: !clickable && !enterable && !contextMenuable, 

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

@@ -39,7 +39,6 @@ interface SliderBaseProps extends Omit<DivProps, 'defaultValue' | 'onChange' | '
     marks?: MarkItem[];
     /** mark中的标签与滑动轨道的距离，默认为`6` */
     markLabelOffset?: number;
-    markSize?: number;
     disableTrack?: boolean;
     gestureOptions?: GestureOptions;
 }

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

@@ -15,6 +15,7 @@ function useStyle({ color }) {
     let colorValue = (0, utils_1.useColor)(color);
     colorValue = (0, color_1.default)(colorValue).alpha(.7).string();
     return (0, utils_1.useCss)(({ spacing, borderRadius, boxShadow }) => (0, react_1.css) `
+        pointer-events: none;
         z-index: ${theme_1.zIndex.tooltip};
 
         .${exports.classes.title} {

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

@@ -4,7 +4,7 @@ exports.classes = void 0;
 exports.useStyle = useStyle;
 const utils_1 = require("../../utils");
 const react_1 = require("@emotion/react");
-exports.classes = (0, utils_1.defineClasses)('waterfall', [
+exports.classes = (0, utils_1.defineInnerClasses)('waterfall', [
     'item'
 ]);
 function useStyle({ columnCount, columnGap, rowGap }) {

package/dist/cjs/components/waterfall/waterfallItem.js

@@ -24,7 +24,7 @@ const WaterfallItem = ({ ref, onLoad, child }) => {
             }
         })).then(() => onLoad());
     });
-    const clonedRef = (0, react_1.useCallback)((0, utils_1.cloneRef)(child.props.ref, innerRef, ref), [child.props.ref]);
+    const clonedRef = (0, react_1.useCallback)((0, utils_1.cloneRef)(child.props.ref, innerRef, ref), [child.props.ref, ref]);
     return (0, react_1.cloneElement)(child, {
         ref: clonedRef,
         className: (0, utils_1.clsx)(waterfall_style_1.classes.item, child.props.className),

package/dist/cjs/extensions/documentViewer/documentViewer.js

@@ -31,7 +31,7 @@ exports.DocumentViewer = (0, react_1.memo)(({ src, filename, onError, type, exte
             return ext && mime_1.default.getType(ext);
         }
         return null;
-    }, [src, type, extension]);
+    }, [src, type, extension, filename]);
     const downloadHandler = () => {
         if (src) {
             const a = document.createElement('a');

package/dist/cjs/index.d.ts

@@ -1,5 +1,4 @@
 export * from './utils';
-export { FontAwesomeIcon as Icon } from '@fortawesome/react-fontawesome';
 export * from './components/accordion';
 export * from './components/actionSheet';
 export * from './components/alert';
@@ -15,6 +14,7 @@ export * from './components/breadcrumb';
 export * from './components/bubble';
 export * from './components/bubbleConfirm';
 export * from './components/button';
+export * from './components/calendar';
 export * from './components/card';
 export * from './components/cascade';
 export * from './components/checkbox';
@@ -40,6 +40,7 @@ export * from './components/formDialog';
 export * from './components/gallery';
 export * from './components/grid';
 export * from './components/highlight';
+export * from './components/icon';
 export * from './components/image';
 export * from './components/input';
 export * from './components/inputBase';

package/dist/cjs/index.js

@@ -1,10 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Icon = void 0;
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./utils"), exports);
-var react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return react_fontawesome_1.FontAwesomeIcon; } });
 tslib_1.__exportStar(require("./components/accordion"), exports);
 tslib_1.__exportStar(require("./components/actionSheet"), exports);
 tslib_1.__exportStar(require("./components/alert"), exports);
@@ -20,6 +17,7 @@ tslib_1.__exportStar(require("./components/breadcrumb"), exports);
 tslib_1.__exportStar(require("./components/bubble"), exports);
 tslib_1.__exportStar(require("./components/bubbleConfirm"), exports);
 tslib_1.__exportStar(require("./components/button"), exports);
+tslib_1.__exportStar(require("./components/calendar"), exports);
 tslib_1.__exportStar(require("./components/card"), exports);
 tslib_1.__exportStar(require("./components/cascade"), exports);
 tslib_1.__exportStar(require("./components/checkbox"), exports);
@@ -45,6 +43,7 @@ tslib_1.__exportStar(require("./components/formDialog"), exports);
 tslib_1.__exportStar(require("./components/gallery"), exports);
 tslib_1.__exportStar(require("./components/grid"), exports);
 tslib_1.__exportStar(require("./components/highlight"), exports);
+tslib_1.__exportStar(require("./components/icon"), exports);
 tslib_1.__exportStar(require("./components/image"), exports);
 tslib_1.__exportStar(require("./components/input"), exports);
 tslib_1.__exportStar(require("./components/inputBase"), exports);

package/dist/cjs/utils/style.d.ts

@@ -51,12 +51,12 @@ export declare function colorTransfer(colorPropsValue: ColorPropsValue, theme: T
  * 将useCss()与colorTransfer()方法结合封装
  * @param colorPropsValue
  */
-export declare function useColor(colorPropsValue: ColorPropsValue): string;
+export declare function useColor(colorPropsValue: ColorPropsValue | undefined): string | undefined;
 /**
  * 点击的波纹效果
  * @param colorPropsValue
  */
-export declare function useTouchRipple(colorPropsValue: ColorPropsValue): (element: Animatable) => void;
+export declare function useTouchSpread(colorPropsValue: ColorPropsValue): (element: Animatable) => void;
 /**
  * 生成响应式样式，与{@link responsiveStyles}的区别在于，本方法会遍历{@link Theme}中的所有`breakpoints`，触发回调函数
  * @param breakpoints 传入{@link Theme}中的断点，或自定义断点

package/dist/cjs/utils/style.js

@@ -7,7 +7,7 @@ exports.defineCss = defineCss;
 exports.useCss = useCss;
 exports.colorTransfer = colorTransfer;
 exports.useColor = useColor;
-exports.useTouchRipple = useTouchRipple;
+exports.useTouchSpread = useTouchSpread;
 exports.responsiveVariables = responsiveVariables;
 exports.responsiveStyles = responsiveStyles;
 exports.toResponsiveValue = toResponsiveValue;
@@ -96,14 +96,14 @@ function colorTransfer(colorPropsValue, theme) {
  */
 function useColor(colorPropsValue) {
     return useCss(theme => {
-        return colorTransfer(colorPropsValue, theme);
+        return colorPropsValue && colorTransfer(colorPropsValue, theme);
     }, [colorPropsValue]);
 }
 /**
  * 点击的波纹效果
  * @param colorPropsValue
  */
-function useTouchRipple(colorPropsValue) {
+function useTouchSpread(colorPropsValue) {
     const theme = (0, theme_1.useTheme)();
     const outlineColor = (0, react_1.useMemo)(() => {
         return (0, color_1.default)(colorTransfer(colorPropsValue, theme)).alpha(.6).string();

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { useTheme } from '../theme';
-import { useTouchRipple } from '../../utils';
+import { useTouchSpread } from '../../utils';
 import { clsx } from '../../utils';
 import { LoadingIndicator } from '../loadingIndicator';
 import { classes, useStyle } from './button.style';
@@ -8,14 +8,14 @@ import { Collapse } from '../transitionBase';
 export const Button = ({ component: Component = 'button', color = 'primary', shape = 'square', size, variant = 'filled', orientation = 'horizontal', prefix, suffix, loading = false, readOnly, icon, label, ...props }) => {
     const theme = useTheme();
     size ??= theme.size;
-    const showRipple = useTouchRipple(color);
+    const showSpread = useTouchSpread(color);
     const onPointerUp = (e) => {
         props.onPointerUp?.(e);
         if (!props.disabled
             && !loading
             && !readOnly
             && { flatted: true, filled: true, outlined: true, dashed: true }[variant]) {
-            showRipple(e.currentTarget);
+            showSpread(e.currentTarget);
         }
     };
     const onClick = (e) => {

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

@@ -268,11 +268,13 @@ export function useStyle({ color }) {
                 &[data-size=small] {
                     width: 24px;
                     height: 24px;
+                    padding: 0;
                 }
 
                 &[data-size=large] {
                     width: 40px;
                     height: 40px;
+                    padding: 0;
                 }
             }
         `;

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

@@ -0,0 +1,32 @@
+import { Size } from '../../types';
+import { Dayjs } from 'dayjs';
+import { Dispatch, SetStateAction } from 'react';
+import { FlexProps } from '../flex';
+export type ViewLevel = 'date' | 'month' | 'year';
+type SharedProps = {
+    min?: Dayjs;
+    max?: Dayjs;
+    disabledDates?: (date: Dayjs) => boolean;
+    /** 是否显示`回今天`按钮，默认为`true` */
+    showToday?: boolean;
+    /** @private */
+    _defaultNull?: boolean;
+};
+export interface CalendarProps extends SharedProps, Omit<FlexProps, 'defaultValue' | 'onChange'> {
+    /** 视图等级，默认为`date` */
+    viewLevel?: ViewLevel;
+    size?: Size;
+    defaultValue?: Dayjs | null;
+    value?: Dayjs | null;
+    onChange?(value: Dayjs | null): void;
+}
+export interface PanelProps extends SharedProps {
+    value: Dayjs | null;
+    setValue: Dispatch<SetStateAction<Dayjs | null>>;
+    innerD: Dayjs;
+    setInnerD: Dispatch<SetStateAction<Dayjs>>;
+    setViewType: Dispatch<SetStateAction<'date' | 'month' | 'year'>>;
+    onSelected(newValue: Dayjs): void;
+}
+export declare const Calendar: ({ viewLevel, showToday, size, defaultValue, min, max, disabledDates, value, onChange, _defaultNull, ...props }: CalendarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import dayjs from 'dayjs';
+import { clsx, useControlled } from '../../utils';
+import { PanelDates } from './panelDates';
+import { useState } from 'react';
+import { classes, style } from './calendar.style';
+import { Flex } from '../flex';
+import { PanelYear } from './panelYear';
+import { PanelMonth } from './panelMonth';
+export const Calendar = ({ viewLevel = 'date', showToday = true, size = 'medium', defaultValue = null, min, max, disabledDates, value, onChange, _defaultNull, ...props }) => {
+    const [innerValue, setInnerValue] = useControlled(defaultValue, value, onChange);
+    const [viewType, setViewType] = useState(viewLevel);
+    const [innerD, setInnerD] = useState(() => innerValue.current ?? dayjs().startOf('date'));
+    const commonProps = {
+        value: innerValue.current,
+        setValue: setInnerValue,
+        innerD,
+        setInnerD,
+        setViewType,
+        min,
+        max,
+        disabledDates,
+        onSelected: (newValue) => {
+            if (viewLevel === 'date') {
+                setViewType('date');
+            }
+            else {
+                // 视图等级不为`date`时，选中年或月即完成
+                setInnerValue(newValue);
+            }
+        },
+        showToday,
+        _defaultNull
+    };
+    const renderPanel = () => {
+        switch (viewType) {
+            case 'date':
+                return _jsx(PanelDates, { ...commonProps });
+            case 'month':
+                return _jsx(PanelMonth, { ...commonProps });
+            default:
+                return _jsx(PanelYear, { ...commonProps });
+        }
+    };
+    return (_jsx(Flex, { inline: true, direction: "column", ...props, css: style, className: clsx(classes.root, props.className), "data-size": size, children: renderPanel() }));
+};

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

@@ -0,0 +1,15 @@
+export declare const classes: {
+    body: string;
+    head: string;
+    headSide: string;
+    headControl: string;
+    headCenter: string;
+    headButton: string;
+    dateItem: string;
+    monthItem: string;
+    yearItem: string;
+    foot: string;
+} & {
+    root: string;
+};
+export declare const style: () => import("@emotion/react").SerializedStyles;