@basic-ui/material 1.0.0-alpha.51 → 1.0.0-alpha.54

package/build/esm/Ripple/useRipple.js

@@ -1,35 +1,33 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _extends from "@babel/runtime/helpers/extends";
 import { useState, useRef, useEffect } from 'react';
 import { radiusIn, opacityIn, opacityOut } from './keyframes';
 import { RIPPLE_TRANSLATE_START, RIPPLE_TRANSLATE_END, RIPPLE_OPACITY_END, RIPPLE_SCALE_END, RIPPLE_SIZE, RIPPLE_BACKGROUND_COLOR, RIPPLE_POSITION } from './constants';
-var defaultRipple = {
+const defaultRipple = {
   x: 0,
   y: 0,
   size: 0,
   scale: 0,
   centerX: 0,
   centerY: 0
-}; // Surface diameter is treated differently for unbounded vs. bounded ripples.
+};
+
+// Surface diameter is treated differently for unbounded vs. bounded ripples.
 // Unbounded ripple diameter is calculated smaller since the surface is expected to already be padded appropriately
 // to extend the hitbox, and the ripple is expected to meet the edges of the padded hitbox (which is typically
 // square). Bounded ripples, on the other hand, are fully expected to expand beyond the surface's longest diameter
 // (calculated based on the diagonal plus a constant padding), and are clipped at the surface's border via
 // `overflow: hidden`.
-
-var getBoundedRadius = function getBoundedRadius(rect, padding) {
-  var hypotenuse = Math.sqrt(Math.pow(rect.width, 2) + Math.pow(rect.height, 2));
+const getBoundedRadius = (rect, padding) => {
+  const hypotenuse = Math.sqrt(Math.pow(rect.width, 2) + Math.pow(rect.height, 2));
   return hypotenuse + padding;
 };
-
 function getScale(rect) {
-  var maxDim = Math.max(rect.height, rect.width);
-  var padding = 10;
-  var initialOriginScale = 0.6;
-  var maxRadius = getBoundedRadius(rect, padding); // Ripple is sized as a fraction of the largest dimension of the surface, then scales up using a CSS scale transform
+  const maxDim = Math.max(rect.height, rect.width);
+  const padding = 10;
+  const initialOriginScale = 0.6;
+  const maxRadius = getBoundedRadius(rect, padding);
 
-  var initialSize = Math.floor(maxDim * initialOriginScale);
+  // Ripple is sized as a fraction of the largest dimension of the surface, then scales up using a CSS scale transform
+  const initialSize = Math.floor(maxDim * initialOriginScale);
   return {
     size: initialSize,
     scale: maxRadius / initialSize,
@@ -37,130 +35,127 @@ function getScale(rect) {
     centerY: rect.height / 2
   };
 }
-
 function calculateRipplePosition(rect, clientX, clientY) {
-  var center = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-  var rippleStart = center ? {
+  let center = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  const rippleStart = center ? {
     x: rect.width / 2,
     y: rect.height / 2
   } : {
     x: clientX - rect.left,
     y: clientY - rect.top
   };
-  return _extends(_extends({
-    state: 'entering'
-  }, rippleStart), getScale(rect));
+  return {
+    state: 'entering',
+    ...rippleStart,
+    ...getScale(rect)
+  };
 }
-
-export var useRipple = function useRipple(opts) {
-  var _style;
-
-  var opacity = opts.opacity,
-      backgroundColor = opts.backgroundColor,
-      _opts$enterDuration = opts.enterDuration,
-      enterDuration = _opts$enterDuration === void 0 ? 225 : _opts$enterDuration,
-      _opts$leaveDuration = opts.leaveDuration,
-      leaveDuration = _opts$leaveDuration === void 0 ? 150 : _opts$leaveDuration; // rippleState must be a ref, because it accesses the current value
+export const useRipple = opts => {
+  const {
+    opacity,
+    backgroundColor,
+    enterDuration = 225,
+    leaveDuration = 150
+  } = opts;
+
+  // rippleState must be a ref, because it accesses the current value
   // inside closures... if we use state, it's gonna recapture
   // the state variable and won't work correctly
-
-  var rippleState = useRef('left');
-
-  var _useState = useState(defaultRipple),
-      _useState2 = _slicedToArray(_useState, 2),
-      ripple = _useState2[0],
-      setRipple = _useState2[1];
-
-  var leavingTimeout = useRef();
-  var enteringTimeout = useRef();
-  var restartTimeout = useRef();
-  var shouldLeave = useRef(false); // clear timeouts to avoid setting state on unmounted component
-
-  useEffect(function () {
-    return function () {
+  const rippleState = useRef('left');
+  const [ripple, setRipple] = useState(defaultRipple);
+  const leavingTimeout = useRef(undefined);
+  const enteringTimeout = useRef(undefined);
+  const restartTimeout = useRef(undefined);
+  const shouldLeave = useRef(false);
+
+  // clear timeouts to avoid setting state on unmounted component
+  useEffect(() => {
+    return () => {
       restartTimeout.current && cancelAnimationFrame(restartTimeout.current);
       clearTimeout(enteringTimeout.current);
       clearTimeout(leavingTimeout.current);
     };
-  }, []); // State handling
+  }, []);
 
-  var setLeft = function setLeft() {
+  // State handling
+  const setLeft = () => {
     rippleState.current = 'left';
-    setRipple(_extends({}, defaultRipple));
+    setRipple({
+      ...defaultRipple
+    });
   };
-
-  var setLeaving = function setLeaving() {
+  const setLeaving = () => {
     clearTimeout(enteringTimeout.current);
     rippleState.current = 'leaving';
-    setRipple(function (ripple) {
-      return _extends({}, ripple);
-    });
+    setRipple(ripple => ({
+      ...ripple
+    }));
     leavingTimeout.current = window.setTimeout(setLeft, leaveDuration);
   };
-
-  var setEntered = function setEntered() {
+  const setEntered = () => {
     rippleState.current = 'entered';
-    setRipple(function (ripple) {
-      return _extends({}, ripple);
-    });
-
+    setRipple(ripple => ({
+      ...ripple
+    }));
     if (shouldLeave.current) {
       setLeaving();
     }
   };
-
-  var deactivate = function deactivate() {
+  const deactivate = () => {
     shouldLeave.current = true;
-
     if (rippleState.current === 'entered') {
       setLeaving();
     }
   };
-
-  var activate = function activate(rect, clientX, clientY) {
-    var center = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  const activate = function (rect, clientX, clientY) {
+    let center = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     clearTimeout(leavingTimeout.current);
     clearTimeout(enteringTimeout.current);
     shouldLeave.current = false;
     rippleState.current = 'restart';
-    setRipple(_extends({}, defaultRipple));
-    restartTimeout.current = requestAnimationFrame(function () {
+    setRipple({
+      ...defaultRipple
+    });
+    restartTimeout.current = requestAnimationFrame(() => {
       rippleState.current = 'entering';
       setRipple(calculateRipplePosition(rect, clientX, clientY, center));
       enteringTimeout.current = window.setTimeout(setEntered, enterDuration);
     });
-  }; // Styling
-
-
-  var animation = undefined;
+  };
 
+  // Styling
+  let animation = undefined;
   switch (rippleState.current) {
     case 'entering':
     case 'entered':
-      animation = "".concat(radiusIn, " ").concat(enterDuration, "ms forwards,") + "".concat(opacityIn, " ").concat(enterDuration / 3, "ms forwards");
+      animation = `${radiusIn} ${enterDuration}ms forwards,` + `${opacityIn} ${enterDuration / 3}ms forwards`;
       break;
-
     case 'leaving':
-      animation = "".concat(radiusIn, " ").concat(enterDuration, "ms forwards,") + "".concat(opacityOut, " ").concat(leaveDuration, "ms forwards");
+      animation = `${radiusIn} ${enterDuration}ms forwards,` + `${opacityOut} ${leaveDuration}ms forwards`;
       break;
   }
-
-  var style = {};
-
+  let style = {};
   switch (rippleState.current) {
     case 'entering':
     case 'entered':
     case 'leaving':
-      style = (_style = {}, _defineProperty(_style, RIPPLE_SIZE, "".concat(ripple.size, "px")), _defineProperty(_style, RIPPLE_POSITION, "".concat(-ripple.size / 2, "px")), _defineProperty(_style, RIPPLE_BACKGROUND_COLOR, backgroundColor), _defineProperty(_style, RIPPLE_TRANSLATE_START, "".concat(ripple.x, "px, ").concat(ripple.y, "px")), _defineProperty(_style, RIPPLE_TRANSLATE_END, "".concat(ripple.centerX, "px, ").concat(ripple.centerY, "px")), _defineProperty(_style, RIPPLE_OPACITY_END, opacity), _defineProperty(_style, RIPPLE_SCALE_END, "".concat(ripple.scale)), _style);
+      style = {
+        [RIPPLE_SIZE]: `${ripple.size}px`,
+        [RIPPLE_POSITION]: `${-ripple.size / 2}px`,
+        [RIPPLE_BACKGROUND_COLOR]: backgroundColor,
+        [RIPPLE_TRANSLATE_START]: `${ripple.x}px, ${ripple.y}px`,
+        [RIPPLE_TRANSLATE_END]: `${ripple.centerX}px, ${ripple.centerY}px`,
+        [RIPPLE_OPACITY_END]: opacity,
+        [RIPPLE_SCALE_END]: `${ripple.scale}`
+      };
       break;
   }
-
   return {
-    activate: activate,
-    deactivate: deactivate,
-    style: style,
-    animation: animation // key: counter,
-
+    activate,
+    deactivate,
+    style,
+    animation
+    // key: counter,
   };
 };
 //# sourceMappingURL=useRipple.js.map

package/build/esm/Ripple/useRipple.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRipple.js","names":["useState","useRef","useEffect","radiusIn","opacityIn","opacityOut","RIPPLE_TRANSLATE_START","RIPPLE_TRANSLATE_END","RIPPLE_OPACITY_END","RIPPLE_SCALE_END","RIPPLE_SIZE","RIPPLE_BACKGROUND_COLOR","RIPPLE_POSITION","defaultRipple","x","y","size","scale","centerX","centerY","getBoundedRadius","rect","padding","hypotenuse","Math","sqrt","pow","width","height","getScale","maxDim","max","initialOriginScale","maxRadius","initialSize","floor","calculateRipplePosition","clientX","clientY","center","rippleStart","left","top","state","useRipple","opts","opacity","backgroundColor","enterDuration","leaveDuration","rippleState","ripple","setRipple","leavingTimeout","enteringTimeout","restartTimeout","shouldLeave","current","cancelAnimationFrame","clearTimeout","setLeft","setLeaving","window","setTimeout","setEntered","deactivate","activate","requestAnimationFrame","animation","undefined","style"],"sources":["../../../src/Ripple/useRipple.ts"],"sourcesContent":["import { useState, useRef, useEffect } from 'react';\r\n\r\nimport { radiusIn, opacityIn, opacityOut } from './keyframes';\r\nimport {\r\n  RIPPLE_TRANSLATE_START,\r\n  RIPPLE_TRANSLATE_END,\r\n  RIPPLE_OPACITY_END,\r\n  RIPPLE_SCALE_END,\r\n  RIPPLE_SIZE,\r\n  RIPPLE_BACKGROUND_COLOR,\r\n  RIPPLE_POSITION,\r\n} from './constants';\r\n\r\nconst defaultRipple = {\r\n  x: 0,\r\n  y: 0,\r\n  size: 0,\r\n  scale: 0,\r\n  centerX: 0,\r\n  centerY: 0,\r\n};\r\n\r\n// Surface diameter is treated differently for unbounded vs. bounded ripples.\r\n// Unbounded ripple diameter is calculated smaller since the surface is expected to already be padded appropriately\r\n// to extend the hitbox, and the ripple is expected to meet the edges of the padded hitbox (which is typically\r\n// square). Bounded ripples, on the other hand, are fully expected to expand beyond the surface's longest diameter\r\n// (calculated based on the diagonal plus a constant padding), and are clipped at the surface's border via\r\n// `overflow: hidden`.\r\nconst getBoundedRadius = (rect: ClientRect, padding: number) => {\r\n  const hypotenuse = Math.sqrt(\r\n    Math.pow(rect.width, 2) + Math.pow(rect.height, 2)\r\n  );\r\n  return hypotenuse + padding;\r\n};\r\n\r\nfunction getScale(rect: ClientRect) {\r\n  const maxDim = Math.max(rect.height, rect.width);\r\n  const padding = 10;\r\n  const initialOriginScale = 0.6;\r\n  const maxRadius = getBoundedRadius(rect, padding);\r\n\r\n  // Ripple is sized as a fraction of the largest dimension of the surface, then scales up using a CSS scale transform\r\n  const initialSize = Math.floor(maxDim * initialOriginScale);\r\n\r\n  return {\r\n    size: initialSize,\r\n    scale: maxRadius / initialSize,\r\n    centerX: rect.width / 2,\r\n    centerY: rect.height / 2,\r\n  };\r\n}\r\n\r\nfunction calculateRipplePosition(\r\n  rect: ClientRect,\r\n  clientX: number,\r\n  clientY: number,\r\n  center = false\r\n) {\r\n  const rippleStart = center\r\n    ? {\r\n        x: rect.width / 2,\r\n        y: rect.height / 2,\r\n      }\r\n    : {\r\n        x: clientX - rect.left,\r\n        y: clientY - rect.top,\r\n      };\r\n\r\n  return {\r\n    state: 'entering' as const,\r\n    ...rippleStart,\r\n    ...getScale(rect),\r\n  };\r\n}\r\n\r\nexport interface RippleOptions {\r\n  opacity: number;\r\n  backgroundColor: string;\r\n  enterDuration?: number;\r\n  leaveDuration?: number;\r\n  center?: boolean;\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const useRipple = (opts: RippleOptions) => {\r\n  const {\r\n    opacity,\r\n    backgroundColor,\r\n    enterDuration = 225,\r\n    leaveDuration = 150,\r\n  } = opts;\r\n\r\n  // rippleState must be a ref, because it accesses the current value\r\n  // inside closures... if we use state, it's gonna recapture\r\n  // the state variable and won't work correctly\r\n  const rippleState = useRef(\r\n    'left' as 'entering' | 'entered' | 'leaving' | 'left' | 'restart'\r\n  );\r\n  const [ripple, setRipple] = useState(defaultRipple);\r\n  const leavingTimeout = useRef<number>();\r\n  const enteringTimeout = useRef<number>();\r\n  const restartTimeout = useRef<number>();\r\n\r\n  const shouldLeave = useRef(false);\r\n\r\n  // clear timeouts to avoid setting state on unmounted component\r\n  useEffect(() => {\r\n    return () => {\r\n      restartTimeout.current && cancelAnimationFrame(restartTimeout.current);\r\n      clearTimeout(enteringTimeout.current);\r\n      clearTimeout(leavingTimeout.current);\r\n    };\r\n  }, []);\r\n\r\n  // State handling\r\n  const setLeft = () => {\r\n    rippleState.current = 'left';\r\n    setRipple({ ...defaultRipple });\r\n  };\r\n\r\n  const setLeaving = () => {\r\n    clearTimeout(enteringTimeout.current);\r\n    rippleState.current = 'leaving';\r\n    setRipple((ripple) => ({\r\n      ...ripple,\r\n    }));\r\n\r\n    leavingTimeout.current = window.setTimeout(setLeft, leaveDuration);\r\n  };\r\n\r\n  const setEntered = () => {\r\n    rippleState.current = 'entered';\r\n    setRipple((ripple) => ({\r\n      ...ripple,\r\n    }));\r\n\r\n    if (shouldLeave.current) {\r\n      setLeaving();\r\n    }\r\n  };\r\n\r\n  const deactivate = () => {\r\n    shouldLeave.current = true;\r\n    if (rippleState.current === 'entered') {\r\n      setLeaving();\r\n    }\r\n  };\r\n\r\n  const activate = (\r\n    rect: ClientRect,\r\n    clientX: number,\r\n    clientY: number,\r\n    center = false\r\n  ) => {\r\n    clearTimeout(leavingTimeout.current);\r\n    clearTimeout(enteringTimeout.current);\r\n    shouldLeave.current = false;\r\n\r\n    rippleState.current = 'restart';\r\n    setRipple({ ...defaultRipple });\r\n    restartTimeout.current = requestAnimationFrame(() => {\r\n      rippleState.current = 'entering';\r\n      setRipple(calculateRipplePosition(rect, clientX, clientY, center));\r\n\r\n      enteringTimeout.current = window.setTimeout(setEntered, enterDuration);\r\n    });\r\n  };\r\n\r\n  // Styling\r\n  let animation: string | undefined = undefined;\r\n  switch (rippleState.current) {\r\n    case 'entering':\r\n    case 'entered':\r\n      animation =\r\n        `${radiusIn} ${enterDuration}ms forwards,` +\r\n        `${opacityIn} ${enterDuration / 3}ms forwards`;\r\n      break;\r\n    case 'leaving':\r\n      animation =\r\n        `${radiusIn} ${enterDuration}ms forwards,` +\r\n        `${opacityOut} ${leaveDuration}ms forwards`;\r\n      break;\r\n  }\r\n\r\n  let style = {};\r\n  switch (rippleState.current) {\r\n    case 'entering':\r\n    case 'entered':\r\n    case 'leaving':\r\n      style = {\r\n        [RIPPLE_SIZE]: `${ripple.size}px`,\r\n        [RIPPLE_POSITION]: `${-ripple.size / 2}px`,\r\n        [RIPPLE_BACKGROUND_COLOR]: backgroundColor,\r\n        [RIPPLE_TRANSLATE_START]: `${ripple.x}px, ${ripple.y}px`,\r\n        [RIPPLE_TRANSLATE_END]: `${ripple.centerX}px, ${ripple.centerY}px`,\r\n        [RIPPLE_OPACITY_END]: opacity,\r\n        [RIPPLE_SCALE_END]: `${ripple.scale}`,\r\n      };\r\n      break;\r\n  }\r\n\r\n  return {\r\n    activate,\r\n    deactivate,\r\n    style,\r\n    animation,\r\n    // key: counter,\r\n  };\r\n};\r\n"],"mappings":"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"}
+{"version":3,"file":"useRipple.js","names":["useState","useRef","useEffect","radiusIn","opacityIn","opacityOut","RIPPLE_TRANSLATE_START","RIPPLE_TRANSLATE_END","RIPPLE_OPACITY_END","RIPPLE_SCALE_END","RIPPLE_SIZE","RIPPLE_BACKGROUND_COLOR","RIPPLE_POSITION","defaultRipple","x","y","size","scale","centerX","centerY","getBoundedRadius","rect","padding","hypotenuse","Math","sqrt","pow","width","height","getScale","maxDim","max","initialOriginScale","maxRadius","initialSize","floor","calculateRipplePosition","clientX","clientY","center","arguments","length","undefined","rippleStart","left","top","state","useRipple","opts","opacity","backgroundColor","enterDuration","leaveDuration","rippleState","ripple","setRipple","leavingTimeout","enteringTimeout","restartTimeout","shouldLeave","current","cancelAnimationFrame","clearTimeout","setLeft","setLeaving","window","setTimeout","setEntered","deactivate","activate","requestAnimationFrame","animation","style"],"sources":["../../../src/Ripple/useRipple.ts"],"sourcesContent":["import { useState, useRef, useEffect } from 'react';\n\nimport { radiusIn, opacityIn, opacityOut } from './keyframes';\nimport {\n  RIPPLE_TRANSLATE_START,\n  RIPPLE_TRANSLATE_END,\n  RIPPLE_OPACITY_END,\n  RIPPLE_SCALE_END,\n  RIPPLE_SIZE,\n  RIPPLE_BACKGROUND_COLOR,\n  RIPPLE_POSITION,\n} from './constants';\n\nconst defaultRipple = {\n  x: 0,\n  y: 0,\n  size: 0,\n  scale: 0,\n  centerX: 0,\n  centerY: 0,\n};\n\n// Surface diameter is treated differently for unbounded vs. bounded ripples.\n// Unbounded ripple diameter is calculated smaller since the surface is expected to already be padded appropriately\n// to extend the hitbox, and the ripple is expected to meet the edges of the padded hitbox (which is typically\n// square). Bounded ripples, on the other hand, are fully expected to expand beyond the surface's longest diameter\n// (calculated based on the diagonal plus a constant padding), and are clipped at the surface's border via\n// `overflow: hidden`.\nconst getBoundedRadius = (rect: ClientRect, padding: number) => {\n  const hypotenuse = Math.sqrt(\n    Math.pow(rect.width, 2) + Math.pow(rect.height, 2)\n  );\n  return hypotenuse + padding;\n};\n\nfunction getScale(rect: ClientRect) {\n  const maxDim = Math.max(rect.height, rect.width);\n  const padding = 10;\n  const initialOriginScale = 0.6;\n  const maxRadius = getBoundedRadius(rect, padding);\n\n  // Ripple is sized as a fraction of the largest dimension of the surface, then scales up using a CSS scale transform\n  const initialSize = Math.floor(maxDim * initialOriginScale);\n\n  return {\n    size: initialSize,\n    scale: maxRadius / initialSize,\n    centerX: rect.width / 2,\n    centerY: rect.height / 2,\n  };\n}\n\nfunction calculateRipplePosition(\n  rect: ClientRect,\n  clientX: number,\n  clientY: number,\n  center = false\n) {\n  const rippleStart = center\n    ? {\n        x: rect.width / 2,\n        y: rect.height / 2,\n      }\n    : {\n        x: clientX - rect.left,\n        y: clientY - rect.top,\n      };\n\n  return {\n    state: 'entering' as const,\n    ...rippleStart,\n    ...getScale(rect),\n  };\n}\n\nexport interface RippleOptions {\n  opacity: number;\n  backgroundColor: string;\n  enterDuration?: number;\n  leaveDuration?: number;\n  center?: boolean;\n  disabled?: boolean;\n}\n\nexport const useRipple = (opts: RippleOptions) => {\n  const {\n    opacity,\n    backgroundColor,\n    enterDuration = 225,\n    leaveDuration = 150,\n  } = opts;\n\n  // rippleState must be a ref, because it accesses the current value\n  // inside closures... if we use state, it's gonna recapture\n  // the state variable and won't work correctly\n  const rippleState = useRef(\n    'left' as 'entering' | 'entered' | 'leaving' | 'left' | 'restart'\n  );\n  const [ripple, setRipple] = useState(defaultRipple);\n  const leavingTimeout = useRef<number | undefined>(undefined);\n  const enteringTimeout = useRef<number | undefined>(undefined);\n  const restartTimeout = useRef<number | undefined>(undefined);\n\n  const shouldLeave = useRef(false);\n\n  // clear timeouts to avoid setting state on unmounted component\n  useEffect(() => {\n    return () => {\n      restartTimeout.current && cancelAnimationFrame(restartTimeout.current);\n      clearTimeout(enteringTimeout.current);\n      clearTimeout(leavingTimeout.current);\n    };\n  }, []);\n\n  // State handling\n  const setLeft = () => {\n    rippleState.current = 'left';\n    setRipple({ ...defaultRipple });\n  };\n\n  const setLeaving = () => {\n    clearTimeout(enteringTimeout.current);\n    rippleState.current = 'leaving';\n    setRipple((ripple) => ({\n      ...ripple,\n    }));\n\n    leavingTimeout.current = window.setTimeout(setLeft, leaveDuration);\n  };\n\n  const setEntered = () => {\n    rippleState.current = 'entered';\n    setRipple((ripple) => ({\n      ...ripple,\n    }));\n\n    if (shouldLeave.current) {\n      setLeaving();\n    }\n  };\n\n  const deactivate = () => {\n    shouldLeave.current = true;\n    if (rippleState.current === 'entered') {\n      setLeaving();\n    }\n  };\n\n  const activate = (\n    rect: ClientRect,\n    clientX: number,\n    clientY: number,\n    center = false\n  ) => {\n    clearTimeout(leavingTimeout.current);\n    clearTimeout(enteringTimeout.current);\n    shouldLeave.current = false;\n\n    rippleState.current = 'restart';\n    setRipple({ ...defaultRipple });\n    restartTimeout.current = requestAnimationFrame(() => {\n      rippleState.current = 'entering';\n      setRipple(calculateRipplePosition(rect, clientX, clientY, center));\n\n      enteringTimeout.current = window.setTimeout(setEntered, enterDuration);\n    });\n  };\n\n  // Styling\n  let animation: string | undefined = undefined;\n  switch (rippleState.current) {\n    case 'entering':\n    case 'entered':\n      animation =\n        `${radiusIn} ${enterDuration}ms forwards,` +\n        `${opacityIn} ${enterDuration / 3}ms forwards`;\n      break;\n    case 'leaving':\n      animation =\n        `${radiusIn} ${enterDuration}ms forwards,` +\n        `${opacityOut} ${leaveDuration}ms forwards`;\n      break;\n  }\n\n  let style = {};\n  switch (rippleState.current) {\n    case 'entering':\n    case 'entered':\n    case 'leaving':\n      style = {\n        [RIPPLE_SIZE]: `${ripple.size}px`,\n        [RIPPLE_POSITION]: `${-ripple.size / 2}px`,\n        [RIPPLE_BACKGROUND_COLOR]: backgroundColor,\n        [RIPPLE_TRANSLATE_START]: `${ripple.x}px, ${ripple.y}px`,\n        [RIPPLE_TRANSLATE_END]: `${ripple.centerX}px, ${ripple.centerY}px`,\n        [RIPPLE_OPACITY_END]: opacity,\n        [RIPPLE_SCALE_END]: `${ripple.scale}`,\n      };\n      break;\n  }\n\n  return {\n    activate,\n    deactivate,\n    style,\n    animation,\n    // key: counter,\n  };\n};\n"],"mappings":"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","ignoreList":[]}

package/build/esm/Ripple/useRippleHandlers.d.ts

@@ -1,8 +1,8 @@
-import type { KeyboardEvent as ReactKeyboardEvent, PointerEvent } from 'react';
-import type { RippleOptions } from './useRipple';
-export declare function useRippleHandlers<T extends HTMLElement>(opts: RippleOptions): {
-    style: {};
-    animation: string | undefined;
-    handleKeyDown: (e: ReactKeyboardEvent<T>) => void;
-    handlePointerDown: (e: PointerEvent<T>) => void;
-};
+import type { KeyboardEvent as ReactKeyboardEvent, PointerEvent } from 'react';
+import type { RippleOptions } from './useRipple';
+export declare function useRippleHandlers<T extends HTMLElement>(opts: RippleOptions): {
+    style: {};
+    animation: string | undefined;
+    handleKeyDown: (e: ReactKeyboardEvent<T>) => void;
+    handlePointerDown: (e: PointerEvent<T>) => void;
+};

package/build/esm/Ripple/useRippleHandlers.js

@@ -1,60 +1,51 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["activate", "deactivate"];
 import { useRef } from 'react';
 import { useRipple } from './useRipple';
-
-var disabledHandler = function disabledHandler() {
+const disabledHandler = () => {
   /* When disabled, we don't wanna handle neither keyDown, nor pointerDown */
 };
-
 export function useRippleHandlers(opts) {
-  var _useRipple = useRipple(opts),
-      activate = _useRipple.activate,
-      deactivate = _useRipple.deactivate,
-      rest = _objectWithoutProperties(_useRipple, _excluded); // Pointer activation
-
-
-  var handlePointerUp = function handlePointerUp() {
+  const {
+    activate,
+    deactivate,
+    ...rest
+  } = useRipple(opts);
+
+  // Pointer activation
+  const handlePointerUp = () => {
     window.removeEventListener('pointerup', handlePointerUp);
     window.removeEventListener('pointercancel', handlePointerUp);
     deactivate();
   };
-
-  var handlePointerDown = function handlePointerDown(e) {
-    var rect = e.currentTarget.getBoundingClientRect();
+  const handlePointerDown = e => {
+    const rect = e.currentTarget.getBoundingClientRect();
     activate(rect, e.clientX, e.clientY, opts.center);
     window.addEventListener('pointerup', handlePointerUp);
     window.addEventListener('pointercancel', handlePointerUp);
-  }; // Keyboard activation
-
-
-  var keyReleased = useRef(true);
+  };
 
-  var handleKeyUp = function handleKeyUp(e) {
+  // Keyboard activation
+  const keyReleased = useRef(true);
+  const handleKeyUp = e => {
     if (e.key !== ' ') {
       return;
     }
-
     window.removeEventListener('keyup', handleKeyUp);
     keyReleased.current = true;
     deactivate();
   };
-
-  var handleKeyDown = function handleKeyDown(e) {
+  const handleKeyDown = e => {
     if (e.key !== ' ' || !keyReleased.current) {
       return;
     }
-
-    var rect = e.currentTarget.getBoundingClientRect();
+    const rect = e.currentTarget.getBoundingClientRect();
     keyReleased.current = false;
     activate(rect, 0, 0, true);
     window.addEventListener('keyup', handleKeyUp);
   };
-
-  return _extends({
+  return {
     handleKeyDown: opts.disabled ? disabledHandler : handleKeyDown,
-    handlePointerDown: opts.disabled ? disabledHandler : handlePointerDown
-  }, rest);
+    handlePointerDown: opts.disabled ? disabledHandler : handlePointerDown,
+    ...rest
+  };
 }
 //# sourceMappingURL=useRippleHandlers.js.map

package/build/esm/Ripple/useRippleHandlers.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRippleHandlers.js","names":["useRef","useRipple","disabledHandler","useRippleHandlers","opts","activate","deactivate","rest","handlePointerUp","window","removeEventListener","handlePointerDown","e","rect","currentTarget","getBoundingClientRect","clientX","clientY","center","addEventListener","keyReleased","handleKeyUp","key","current","handleKeyDown","disabled"],"sources":["../../../src/Ripple/useRippleHandlers.ts"],"sourcesContent":["import type { KeyboardEvent as ReactKeyboardEvent, PointerEvent } from 'react';\r\nimport { useRef } from 'react';\r\n\r\nimport type { RippleOptions } from './useRipple';\r\nimport { useRipple } from './useRipple';\r\n\r\nconst disabledHandler = () => {\r\n  /* When disabled, we don't wanna handle neither keyDown, nor pointerDown */\r\n};\r\n\r\nexport function useRippleHandlers<T extends HTMLElement>(opts: RippleOptions) {\r\n  const { activate, deactivate, ...rest } = useRipple(opts);\r\n\r\n  // Pointer activation\r\n  const handlePointerUp = () => {\r\n    window.removeEventListener('pointerup', handlePointerUp);\r\n    window.removeEventListener('pointercancel', handlePointerUp);\r\n    deactivate();\r\n  };\r\n\r\n  const handlePointerDown = (e: PointerEvent<T>) => {\r\n    const rect = e.currentTarget.getBoundingClientRect();\r\n    activate(rect, e.clientX, e.clientY, opts.center);\r\n    window.addEventListener('pointerup', handlePointerUp);\r\n    window.addEventListener('pointercancel', handlePointerUp);\r\n  };\r\n\r\n  // Keyboard activation\r\n  const keyReleased = useRef(true);\r\n  const handleKeyUp = (e: KeyboardEvent) => {\r\n    if (e.key !== ' ') {\r\n      return;\r\n    }\r\n    window.removeEventListener('keyup', handleKeyUp);\r\n    keyReleased.current = true;\r\n    deactivate();\r\n  };\r\n\r\n  const handleKeyDown = (e: ReactKeyboardEvent<T>) => {\r\n    if (e.key !== ' ' || !keyReleased.current) {\r\n      return;\r\n    }\r\n    const rect = e.currentTarget.getBoundingClientRect();\r\n    keyReleased.current = false;\r\n    activate(rect, 0, 0, true);\r\n    window.addEventListener('keyup', handleKeyUp);\r\n  };\r\n\r\n  return {\r\n    handleKeyDown: opts.disabled ? disabledHandler : handleKeyDown,\r\n    handlePointerDown: opts.disabled ? disabledHandler : handlePointerDown,\r\n    ...rest,\r\n  };\r\n}\r\n"],"mappings":";;;AACA,SAASA,MAAT,QAAuB,OAAvB;AAGA,SAASC,SAAT,QAA0B,aAA1B;;AAEA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,GAAM;EAC5B;AACD,CAFD;;AAIA,OAAO,SAASC,iBAAT,CAAkDC,IAAlD,EAAuE;EAC5E,iBAA0CH,SAAS,CAACG,IAAD,CAAnD;EAAA,IAAQC,QAAR,cAAQA,QAAR;EAAA,IAAkBC,UAAlB,cAAkBA,UAAlB;EAAA,IAAiCC,IAAjC,mDAD4E,CAG5E;;;EACA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,GAAM;IAC5BC,MAAM,CAACC,mBAAP,CAA2B,WAA3B,EAAwCF,eAAxC;IACAC,MAAM,CAACC,mBAAP,CAA2B,eAA3B,EAA4CF,eAA5C;IACAF,UAAU;EACX,CAJD;;EAMA,IAAMK,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,CAAD,EAAwB;IAChD,IAAMC,IAAI,GAAGD,CAAC,CAACE,aAAF,CAAgBC,qBAAhB,EAAb;IACAV,QAAQ,CAACQ,IAAD,EAAOD,CAAC,CAACI,OAAT,EAAkBJ,CAAC,CAACK,OAApB,EAA6Bb,IAAI,CAACc,MAAlC,CAAR;IACAT,MAAM,CAACU,gBAAP,CAAwB,WAAxB,EAAqCX,eAArC;IACAC,MAAM,CAACU,gBAAP,CAAwB,eAAxB,EAAyCX,eAAzC;EACD,CALD,CAV4E,CAiB5E;;;EACA,IAAMY,WAAW,GAAGpB,MAAM,CAAC,IAAD,CAA1B;;EACA,IAAMqB,WAAW,GAAG,SAAdA,WAAc,CAACT,CAAD,EAAsB;IACxC,IAAIA,CAAC,CAACU,GAAF,KAAU,GAAd,EAAmB;MACjB;IACD;;IACDb,MAAM,CAACC,mBAAP,CAA2B,OAA3B,EAAoCW,WAApC;IACAD,WAAW,CAACG,OAAZ,GAAsB,IAAtB;IACAjB,UAAU;EACX,CAPD;;EASA,IAAMkB,aAAa,GAAG,SAAhBA,aAAgB,CAACZ,CAAD,EAA8B;IAClD,IAAIA,CAAC,CAACU,GAAF,KAAU,GAAV,IAAiB,CAACF,WAAW,CAACG,OAAlC,EAA2C;MACzC;IACD;;IACD,IAAMV,IAAI,GAAGD,CAAC,CAACE,aAAF,CAAgBC,qBAAhB,EAAb;IACAK,WAAW,CAACG,OAAZ,GAAsB,KAAtB;IACAlB,QAAQ,CAACQ,IAAD,EAAO,CAAP,EAAU,CAAV,EAAa,IAAb,CAAR;IACAJ,MAAM,CAACU,gBAAP,CAAwB,OAAxB,EAAiCE,WAAjC;EACD,CARD;;EAUA;IACEG,aAAa,EAAEpB,IAAI,CAACqB,QAAL,GAAgBvB,eAAhB,GAAkCsB,aADnD;IAEEb,iBAAiB,EAAEP,IAAI,CAACqB,QAAL,GAAgBvB,eAAhB,GAAkCS;EAFvD,GAGKJ,IAHL;AAKD"}
+{"version":3,"file":"useRippleHandlers.js","names":["useRef","useRipple","disabledHandler","useRippleHandlers","opts","activate","deactivate","rest","handlePointerUp","window","removeEventListener","handlePointerDown","e","rect","currentTarget","getBoundingClientRect","clientX","clientY","center","addEventListener","keyReleased","handleKeyUp","key","current","handleKeyDown","disabled"],"sources":["../../../src/Ripple/useRippleHandlers.ts"],"sourcesContent":["import type { KeyboardEvent as ReactKeyboardEvent, PointerEvent } from 'react';\nimport { useRef } from 'react';\n\nimport type { RippleOptions } from './useRipple';\nimport { useRipple } from './useRipple';\n\nconst disabledHandler = () => {\n  /* When disabled, we don't wanna handle neither keyDown, nor pointerDown */\n};\n\nexport function useRippleHandlers<T extends HTMLElement>(opts: RippleOptions) {\n  const { activate, deactivate, ...rest } = useRipple(opts);\n\n  // Pointer activation\n  const handlePointerUp = () => {\n    window.removeEventListener('pointerup', handlePointerUp);\n    window.removeEventListener('pointercancel', handlePointerUp);\n    deactivate();\n  };\n\n  const handlePointerDown = (e: PointerEvent<T>) => {\n    const rect = e.currentTarget.getBoundingClientRect();\n    activate(rect, e.clientX, e.clientY, opts.center);\n    window.addEventListener('pointerup', handlePointerUp);\n    window.addEventListener('pointercancel', handlePointerUp);\n  };\n\n  // Keyboard activation\n  const keyReleased = useRef(true);\n  const handleKeyUp = (e: KeyboardEvent) => {\n    if (e.key !== ' ') {\n      return;\n    }\n    window.removeEventListener('keyup', handleKeyUp);\n    keyReleased.current = true;\n    deactivate();\n  };\n\n  const handleKeyDown = (e: ReactKeyboardEvent<T>) => {\n    if (e.key !== ' ' || !keyReleased.current) {\n      return;\n    }\n    const rect = e.currentTarget.getBoundingClientRect();\n    keyReleased.current = false;\n    activate(rect, 0, 0, true);\n    window.addEventListener('keyup', handleKeyUp);\n  };\n\n  return {\n    handleKeyDown: opts.disabled ? disabledHandler : handleKeyDown,\n    handlePointerDown: opts.disabled ? disabledHandler : handlePointerDown,\n    ...rest,\n  };\n}\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,OAAO;AAG9B,SAASC,SAAS,QAAQ,aAAa;AAEvC,MAAMC,eAAe,GAAGA,CAAA,KAAM;EAC5B;AAAA,CACD;AAED,OAAO,SAASC,iBAAiBA,CAAwBC,IAAmB,EAAE;EAC5E,MAAM;IAAEC,QAAQ;IAAEC,UAAU;IAAE,GAAGC;EAAK,CAAC,GAAGN,SAAS,CAACG,IAAI,CAAC;;EAEzD;EACA,MAAMI,eAAe,GAAGA,CAAA,KAAM;IAC5BC,MAAM,CAACC,mBAAmB,CAAC,WAAW,EAAEF,eAAe,CAAC;IACxDC,MAAM,CAACC,mBAAmB,CAAC,eAAe,EAAEF,eAAe,CAAC;IAC5DF,UAAU,CAAC,CAAC;EACd,CAAC;EAED,MAAMK,iBAAiB,GAAIC,CAAkB,IAAK;IAChD,MAAMC,IAAI,GAAGD,CAAC,CAACE,aAAa,CAACC,qBAAqB,CAAC,CAAC;IACpDV,QAAQ,CAACQ,IAAI,EAAED,CAAC,CAACI,OAAO,EAAEJ,CAAC,CAACK,OAAO,EAAEb,IAAI,CAACc,MAAM,CAAC;IACjDT,MAAM,CAACU,gBAAgB,CAAC,WAAW,EAAEX,eAAe,CAAC;IACrDC,MAAM,CAACU,gBAAgB,CAAC,eAAe,EAAEX,eAAe,CAAC;EAC3D,CAAC;;EAED;EACA,MAAMY,WAAW,GAAGpB,MAAM,CAAC,IAAI,CAAC;EAChC,MAAMqB,WAAW,GAAIT,CAAgB,IAAK;IACxC,IAAIA,CAAC,CAACU,GAAG,KAAK,GAAG,EAAE;MACjB;IACF;IACAb,MAAM,CAACC,mBAAmB,CAAC,OAAO,EAAEW,WAAW,CAAC;IAChDD,WAAW,CAACG,OAAO,GAAG,IAAI;IAC1BjB,UAAU,CAAC,CAAC;EACd,CAAC;EAED,MAAMkB,aAAa,GAAIZ,CAAwB,IAAK;IAClD,IAAIA,CAAC,CAACU,GAAG,KAAK,GAAG,IAAI,CAACF,WAAW,CAACG,OAAO,EAAE;MACzC;IACF;IACA,MAAMV,IAAI,GAAGD,CAAC,CAACE,aAAa,CAACC,qBAAqB,CAAC,CAAC;IACpDK,WAAW,CAACG,OAAO,GAAG,KAAK;IAC3BlB,QAAQ,CAACQ,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC;IAC1BJ,MAAM,CAACU,gBAAgB,CAAC,OAAO,EAAEE,WAAW,CAAC;EAC/C,CAAC;EAED,OAAO;IACLG,aAAa,EAAEpB,IAAI,CAACqB,QAAQ,GAAGvB,eAAe,GAAGsB,aAAa;IAC9Db,iBAAiB,EAAEP,IAAI,CAACqB,QAAQ,GAAGvB,eAAe,GAAGS,iBAAiB;IACtE,GAAGJ;EACL,CAAC;AACH","ignoreList":[]}