@canlooks/can-ui 0.0.73 → 0.0.75

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" | "hint";
+    popover: "" | "auto" | "manual";
     popoverTargetAction: "toggle" | "hide" | "show";
     popoverTarget: string;
     inert: boolean;

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

@@ -38,6 +38,7 @@ exports.style = (0, utils_1.defineCss)(({ background, borderRadius, boxShadow, s
     }
 
     .${exports.classes.content} {
+        min-width: 0;
         flex: 1;
         display: flex;
         flex-direction: column;
@@ -93,6 +94,7 @@ exports.style = (0, utils_1.defineCss)(({ background, borderRadius, boxShadow, s
         }
 
         .${exports.classes.bodyWrap} {
+            min-width: 0;
             flex: 1;
         }
 

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/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;
+    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;
 };
 export interface StatusIconProps extends Partial<FontAwesomeIconProps> {
     status?: StatusType;

package/dist/cjs/components/theme/themeVariables.js

@@ -128,8 +128,8 @@ exports.defaultLightTheme = {
     spacing: defaultSpacing,
     gap: defaultSpacing[6],
     gray,
-    /* divider: gray(.1), */
-    divider: '#e6e6e6',
+    /* divider: gray(.15), */
+    divider: '#d9d9d9',
     colors: {
         primary: '#1E71EC',
         secondary: '#925CC1',

package/dist/cjs/components/touchRipple/touchRipple.js

@@ -14,7 +14,10 @@ exports.TouchRipple = (0, react_1.memo)(({ color = 'primary', container, effectC
     (0, react_1.useEffect)(() => {
         const parentElement = containerEl.current ?? ref.current.parentElement;
         if (parentElement) {
-            const pointerDown = ({ offsetX, offsetY }) => {
+            const pointerDown = ({ clientX, clientY }) => {
+                const { left, top } = parentElement.getBoundingClientRect();
+                const offsetX = clientX - left;
+                const offsetY = clientY - top;
                 const maxWidth = Math.max(parentElement.clientWidth - offsetX, offsetX);
                 const maxHeight = Math.max(parentElement.clientHeight - offsetY, offsetY);
                 setRipples(o => {

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/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" | "hint";
+    popover: "" | "auto" | "manual";
     popoverTargetAction: "toggle" | "hide" | "show";
     popoverTarget: string;
     inert: boolean;

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

@@ -35,6 +35,7 @@ export const style = defineCss(({ background, borderRadius, boxShadow, spacing,
     }
 
     .${classes.content} {
+        min-width: 0;
         flex: 1;
         display: flex;
         flex-direction: column;
@@ -90,6 +91,7 @@ export const style = defineCss(({ background, borderRadius, boxShadow, spacing,
         }
 
         .${classes.bodyWrap} {
+            min-width: 0;
             flex: 1;
         }
 

package/dist/esm/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/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;
+    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;
 };
 export interface StatusIconProps extends Partial<FontAwesomeIconProps> {
     status?: StatusType;

package/dist/esm/components/theme/themeVariables.js

@@ -122,8 +122,8 @@ export const defaultLightTheme = {
     spacing: defaultSpacing,
     gap: defaultSpacing[6],
     gray,
-    /* divider: gray(.1), */
-    divider: '#e6e6e6',
+    /* divider: gray(.15), */
+    divider: '#d9d9d9',
     colors: {
         primary: '#1E71EC',
         secondary: '#925CC1',

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

@@ -11,7 +11,10 @@ export const TouchRipple = memo(({ color = 'primary', container, effectContainer
     useEffect(() => {
         const parentElement = containerEl.current ?? ref.current.parentElement;
         if (parentElement) {
-            const pointerDown = ({ offsetX, offsetY }) => {
+            const pointerDown = ({ clientX, clientY }) => {
+                const { left, top } = parentElement.getBoundingClientRect();
+                const offsetX = clientX - left;
+                const offsetY = clientY - top;
                 const maxWidth = Math.max(parentElement.clientWidth - offsetX, offsetX);
                 const maxHeight = Math.max(parentElement.clientHeight - offsetY, offsetY);
                 setRipples(o => {