@canlooks/can-ui 0.0.72 → 0.0.74

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

@@ -4,6 +4,7 @@ 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");
+const classes = (0, utils_1.defineInnerClasses)('icon');
 function Icon({ color, ...props }) {
-    return (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { ...props, color: (0, utils_1.useColor)(color) });
+    return ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { ...props, className: (0, utils_1.clsx)(classes.root, props.className), color: (0, utils_1.useColor)(color) }));
 }

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/icon/icon.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useColor } from '../../utils';
+import { clsx, defineInnerClasses, useColor } from '../../utils';
+const classes = defineInnerClasses('icon');
 export function Icon({ color, ...props }) {
-    return _jsx(FontAwesomeIcon, { ...props, color: useColor(color) });
+    return (_jsx(FontAwesomeIcon, { ...props, className: clsx(classes.root, props.className), color: useColor(color) }));
 }

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 => {

package/package.json

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