@canlooks/can-ui 0.0.45 → 0.0.47

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

@@ -1,6 +1,6 @@
-import { defineClasses, defineCss } from '../../utils';
+import { defineInnerClasses, defineCss } from '../../utils';
 import { css } from '@emotion/react';
-export const classes = defineClasses('pinchable', [
+export const classes = defineInnerClasses('pinchable', [
     'content'
 ]);
 export const style = defineCss(({ easing }) => css `

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

@@ -481,7 +481,7 @@ export function Popper({ ref, popperRef, anchorElement, container = document.bod
         onChildrenOpenChange,
         beforeOpenCallbacks: beforeOpenCallbacks.current
     }), [innerOpen.current, autoClose]);
-    const childRef = useCallback(cloneRef(children?.props.ref, anchorRef, ref), [children?.props.ref]);
+    const childRef = useCallback(cloneRef(children?.props.ref, anchorRef, ref), [children?.props.ref, ref]);
     return (_jsxs(_Fragment, { children: [isValidElement(children)
                 ? cloneElement(children, { ref: childRef })
                 : children, renderedOnce.current && createPortal(_jsx(ClickAway, { disabled: !clickable && !enterable && !contextMenuable, 

package/dist/esm/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/esm/components/tooltip/tooltip.style.js

@@ -10,6 +10,7 @@ export function useStyle({ color }) {
     let colorValue = useColor(color);
     colorValue = Color(colorValue).alpha(.7).string();
     return useCss(({ spacing, borderRadius, boxShadow }) => css `
+        pointer-events: none;
         z-index: ${zIndex.tooltip};
 
         .${classes.title} {

package/dist/esm/components/touchRipple/touchRipple.js

@@ -17,10 +17,6 @@ export const Ripple = memo(({ ref, color = 'primary', ...props }) => {
     useLayoutEffect(() => {
         const wrapper = rippleRef.current?.parentElement;
         if (wrapper) {
-            const { position } = getComputedStyle(wrapper);
-            if (position === 'static') {
-                wrapper.style.position = 'relative';
-            }
             const pointerDown = (e) => {
                 setRipples(o => [
                     ...o,

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

@@ -1,6 +1,6 @@
-import { defineClasses, responsiveVariables, useCss } from '../../utils';
+import { defineInnerClasses, responsiveVariables, useCss } from '../../utils';
 import { css } from '@emotion/react';
-export const classes = defineClasses('waterfall', [
+export const classes = defineInnerClasses('waterfall', [
     'item'
 ]);
 export function useStyle({ columnCount, columnGap, rowGap }) {

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

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

package/dist/esm/extensions/documentViewer/documentViewer.js

@@ -25,7 +25,7 @@ export const DocumentViewer = memo(({ src, filename, onError, type, extension, s
             return ext && mime.getType(ext);
         }
         return null;
-    }, [src, type, extension]);
+    }, [src, type, extension, filename]);
     const downloadHandler = () => {
         if (src) {
             const a = document.createElement('a');

package/dist/esm/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/esm/index.js

@@ -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/esm/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/esm/utils/style.js

@@ -80,14 +80,14 @@ export function colorTransfer(colorPropsValue, theme) {
  */
 export function useColor(colorPropsValue) {
     return useCss(theme => {
-        return colorTransfer(colorPropsValue, theme);
+        return colorPropsValue && colorTransfer(colorPropsValue, theme);
     }, [colorPropsValue]);
 }
 /**
  * 点击的波纹效果
  * @param colorPropsValue
  */
-export function useTouchRipple(colorPropsValue) {
+export function useTouchSpread(colorPropsValue) {
     const theme = useTheme();
     const outlineColor = useMemo(() => {
         return Color(colorTransfer(colorPropsValue, theme)).alpha(.6).string();