@uni-design-system/uni-react 0.0.6 → 0.0.8

package/dist/cjs/components/button/button.component.d.ts

@@ -5,10 +5,11 @@ export interface ButtonProps {
     text?: string;
     children?: ReactNode;
     buttonType?: ButtonType;
+    active?: boolean;
     disabled?: boolean;
     iconName?: IconName;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    useRipple?: boolean;
+    disableRipple?: boolean;
     style?: CSSProperties;
 }
-export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Button: ({ text, children, buttonType, disabled, iconName, onClick, disableRipple, style: userStyle, ...rest }: ButtonProps) => JSX.Element;

package/dist/cjs/components/button/button.component.js

@@ -40,19 +40,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
 const react_1 = __importStar(require("react"));
 const core_1 = require("../../core");
-const icon_text_row_component_1 = require("../icon-text-row/icon-text-row.component");
+const icon_text_row_1 = require("../icon-text-row");
 const layout_hook_1 = __importDefault(require("../../core/layout/layout.hook"));
-exports.Button = (0, react_1.forwardRef)((_a, ref) => {
-    var { text, children, buttonType = 'filled', disabled = false, iconName, onClick, useRipple = true, style: userStyle } = _a, rest = __rest(_a, ["text", "children", "buttonType", "disabled", "iconName", "onClick", "useRipple", "style"]);
+const use_ripple_1 = __importDefault(require("../../core/hooks/use-ripple"));
+const Button = (_a) => {
+    var { text, children, buttonType = 'filled', disabled = false, iconName, onClick, disableRipple = false, style: userStyle } = _a, rest = __rest(_a, ["text", "children", "buttonType", "disabled", "iconName", "onClick", "disableRipple", "style"]);
     const { deviceSize } = (0, layout_hook_1.default)();
     const theme = (0, core_1.useTheme)();
+    const [ref, createRipple] = (0, use_ripple_1.default)({ disabled: disableRipple || buttonType === 'elevated' });
     const buttonProps = theme.buttons[buttonType];
     const getOnColorToken = (color) => `on-${color}`;
     const defaultContentColor = getOnColorToken(buttonProps.color);
     const [hover, setHover] = (0, react_1.useState)(false);
     const [click, setClick] = (0, react_1.useState)(false);
     const [contentColor, setContentColor] = (0, react_1.useState)(defaultContentColor);
-    const style = Style(theme, buttonType, deviceSize, hover, disabled, click, useRipple);
+    const style = Style(theme, buttonType, deviceSize, hover, disabled, click);
     (0, react_1.useEffect)(() => {
         setContentColor(getOnColorToken(disabled ? 'inverse-on-surface' : buttonProps.color));
     }, [disabled]);
@@ -62,17 +64,15 @@ exports.Button = (0, react_1.forwardRef)((_a, ref) => {
         }, 250);
     }, [click]);
     const handleClick = (event) => {
-        useRipple && (0, core_1.createRipple)(event);
         setClick(true);
         onClick && onClick(event);
     };
-    return (react_1.default.createElement("button", Object.assign({ onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onClick: handleClick, disabled: disabled, style: Object.assign(Object.assign({}, style), userStyle), ref: ref }, rest), iconName ? (react_1.default.createElement(icon_text_row_component_1.IconTextRow, { iconName: iconName, color: contentColor, textRole: "button" }, text || children)) : (react_1.default.createElement(core_1.Text, { align: "center", role: "button", color: contentColor }, text || children))));
-});
-exports.Button.displayName = 'Button';
-function Style(theme, buttonType, size = 'md', hover, disabled, click, useRipple) {
+    return (react_1.default.createElement("button", Object.assign({ onMouseDown: createRipple, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onClick: handleClick, disabled: disabled, style: Object.assign(Object.assign({}, style), userStyle), ref: ref }, rest), iconName ? (react_1.default.createElement(icon_text_row_1.IconTextRow, { iconName: iconName, color: contentColor, textRole: "button" }, text || children)) : (react_1.default.createElement(core_1.Text, { align: "center", role: "button", color: contentColor }, text || children))));
+};
+exports.Button = Button;
+function Style(theme, buttonType, size = 'md', hover, disabled, click) {
     const { color, horizontalPadding, verticalPadding, borderColor, borderWidth, borderRadius, contentColor } = theme.buttons[buttonType];
     const styles = {
-        position: useRipple ? 'relative' : undefined,
         overflow: 'hidden',
         transition: 'all 0.3s cubic-bezier(.25,.8,.25,1)',
         cursor: 'pointer',
@@ -101,4 +101,3 @@ function Style(theme, buttonType, size = 'md', hover, disabled, click, useRipple
     }
     return styles;
 }
-//# sourceMappingURL=button.component.js.map

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

@@ -15,4 +15,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./button.component"), exports);
-//# sourceMappingURL=index.js.map

package/dist/cjs/components/card/card.component.js

@@ -21,4 +21,3 @@ function Card({ children, cardType, elevation, colorToken = 'primary-container',
     return (react_1.default.createElement(framer_motion_1.motion.div, { style: style, initial: { y: 36, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: 36, opacity: 0 }, transition: { duration: 0.2 } }, children));
 }
 exports.Card = Card;
-//# sourceMappingURL=card.component.js.map

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

@@ -15,4 +15,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./card.component"), exports);
-//# sourceMappingURL=index.js.map

package/dist/cjs/components/draggable/SortableList/components/DragHandle/dragHandle.component.js

@@ -41,9 +41,8 @@ const button_1 = require("../../../../button");
 const core_1 = require("@dnd-kit/core");
 const DragHandle = (_a) => {
     var rest = __rest(_a, []);
-    const { attributes, listeners, ref } = (0, react_1.useContext)(sortableItem_context_1.SortableItemContext);
+    const { attributes, listeners } = (0, react_1.useContext)(sortableItem_context_1.SortableItemContext);
     const dndContext = (0, core_1.useDndContext)();
-    return (react_1.default.createElement(button_1.Button, Object.assign({ style: { cursor: dndContext.activatorEvent ? 'grabbing' : 'grab' }, iconName: "bars3", buttonType: "icon" }, attributes, listeners, { ref: ref }, rest)));
+    return (react_1.default.createElement(button_1.Button, Object.assign({ style: { cursor: dndContext.activatorEvent ? 'grabbing' : 'grab' }, iconName: "bars3", buttonType: "icon" }, attributes, listeners, rest)));
 };
 exports.DragHandle = DragHandle;
-//# sourceMappingURL=dragHandle.component.js.map

package/dist/cjs/components/draggable/SortableList/components/DragHandle/index.js

@@ -3,4 +3,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DragHandle = void 0;
 var dragHandle_component_1 = require("./dragHandle.component");
 Object.defineProperty(exports, "DragHandle", { enumerable: true, get: function () { return dragHandle_component_1.DragHandle; } });
-//# sourceMappingURL=index.js.map

package/dist/cjs/components/draggable/SortableList/components/SortableItem/index.js

@@ -3,4 +3,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SortableItem = void 0;
 var sortableItem_component_1 = require("./sortableItem.component");
 Object.defineProperty(exports, "SortableItem", { enumerable: true, get: function () { return sortableItem_component_1.SortableItem; } });
-//# sourceMappingURL=index.js.map

package/dist/cjs/components/draggable/SortableList/components/SortableItem/sortableItem.component.js

@@ -42,4 +42,3 @@ const SortableItem = ({ children, id, style: userStyle, onRemove, }) => {
         react_1.default.createElement("li", { className: "SortableItem", ref: setNodeRef, style: style }, children)));
 };
 exports.SortableItem = SortableItem;
-//# sourceMappingURL=sortableItem.component.js.map

package/dist/cjs/components/draggable/SortableList/components/SortableItem/sortableItem.context.js

@@ -7,4 +7,3 @@ exports.SortableItemContext = (0, react_1.createContext)({
     listeners: undefined,
     ref() { },
 });
-//# sourceMappingURL=sortableItem.context.js.map

package/dist/cjs/components/draggable/SortableList/components/SortableOverlay/index.js

@@ -3,4 +3,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SortableOverlay = void 0;
 var sortableOverlay_component_1 = require("./sortableOverlay.component");
 Object.defineProperty(exports, "SortableOverlay", { enumerable: true, get: function () { return sortableOverlay_component_1.SortableOverlay; } });
-//# sourceMappingURL=index.js.map

package/dist/cjs/components/draggable/SortableList/components/SortableOverlay/sortableOverlay.component.js

@@ -17,4 +17,3 @@ const dropAnimationConfig = {
 };
 const SortableOverlay = ({ children }) => (react_1.default.createElement(core_1.DragOverlay, { dropAnimation: dropAnimationConfig }, children));
 exports.SortableOverlay = SortableOverlay;
-//# sourceMappingURL=sortableOverlay.component.js.map

package/dist/cjs/components/draggable/SortableList/components/index.js

@@ -7,4 +7,3 @@ var SortableItem_1 = require("./SortableItem");
 Object.defineProperty(exports, "SortableItem", { enumerable: true, get: function () { return SortableItem_1.SortableItem; } });
 var SortableOverlay_1 = require("./SortableOverlay");
 Object.defineProperty(exports, "SortableOverlay", { enumerable: true, get: function () { return SortableOverlay_1.SortableOverlay; } });
-//# sourceMappingURL=index.js.map

package/dist/cjs/components/draggable/SortableList/index.js

@@ -16,4 +16,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./sortableList.component"), exports);
 __exportStar(require("./components"), exports);
-//# sourceMappingURL=index.js.map

package/dist/cjs/components/draggable/SortableList/mockData.js

@@ -51,4 +51,3 @@ exports.findManyChannelStatus = [
         name: 'Archived',
     },
 ];
-//# sourceMappingURL=mockData.js.map

package/dist/cjs/components/draggable/SortableList/sortableList.component.js

@@ -55,4 +55,3 @@ const SortableList = ({ items, onChange, renderItem, style: userStyle, }) => {
         react_1.default.createElement(components_1.SortableOverlay, null, activeItem ? renderItem(activeItem) : null)));
 };
 exports.SortableList = SortableList;
-//# sourceMappingURL=sortableList.component.js.map

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

@@ -15,4 +15,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./SortableList"), exports);
-//# sourceMappingURL=index.js.map

package/dist/cjs/components/draggable/utilities/createRange.js

@@ -6,4 +6,3 @@ function createRange(length, initializer = defaultInitializer) {
     return [...new Array(length)].map((_, index) => initializer(index));
 }
 exports.createRange = createRange;
-//# sourceMappingURL=createRange.js.map

package/dist/cjs/components/draggable/utilities/index.js

@@ -3,4 +3,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createRange = void 0;
 var createRange_1 = require("./createRange");
 Object.defineProperty(exports, "createRange", { enumerable: true, get: function () { return createRange_1.createRange; } });
-//# sourceMappingURL=index.js.map

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

@@ -15,4 +15,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./text-input"), exports);
-//# sourceMappingURL=index.js.map

package/dist/cjs/components/forms/text-input/index.js

@@ -15,4 +15,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./text-input.component"), exports);
-//# sourceMappingURL=index.js.map

package/dist/cjs/components/forms/text-input/text-input.component.js

@@ -10,4 +10,3 @@ const TextInput = ({ value, onChange }) => {
         react_1.default.createElement("input", { type: "text", value: value, onChange: onChange })));
 };
 exports.TextInput = TextInput;
-//# sourceMappingURL=text-input.component.js.map

package/dist/cjs/components/forms/utils/validations.js

@@ -53,4 +53,3 @@ exports.validations = {
         },
     },
 };
-//# sourceMappingURL=validations.js.map

package/dist/cjs/components/icon-text-row/icon-text-row.component.js

@@ -33,4 +33,3 @@ const IconTextRow = ({ iconName, color, align = 'left', text, textRole = 'title-
         react_1.default.createElement(RowIcon, null)));
 };
 exports.IconTextRow = IconTextRow;
-//# sourceMappingURL=icon-text-row.component.js.map

package/dist/cjs/components/icon-text-row/index.js

@@ -15,4 +15,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./icon-text-row.component"), exports);
-//# sourceMappingURL=index.js.map

package/dist/cjs/components/index.js

@@ -21,4 +21,3 @@ __exportStar(require("./forms"), exports);
 __exportStar(require("./icon-text-row"), exports);
 __exportStar(require("./modal"), exports);
 __exportStar(require("./switch"), exports);
-//# sourceMappingURL=index.js.map

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

@@ -15,4 +15,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./modal.component"), exports);
-//# sourceMappingURL=index.js.map

package/dist/cjs/components/modal/modal-close-button.component.js

@@ -25,7 +25,6 @@ const ModalCloseButton = (_a) => {
         right: '8px',
         padding: '8px',
     };
-    return react_1.default.createElement(button_1.Button, Object.assign({ useRipple: false, buttonType: "icon", iconName: "xMark", style: style }, rest));
+    return react_1.default.createElement(button_1.Button, Object.assign({ buttonType: "icon", iconName: "xMark", style: style }, rest));
 };
 exports.ModalCloseButton = ModalCloseButton;
-//# sourceMappingURL=modal-close-button.component.js.map

package/dist/cjs/components/modal/modal.component.js

@@ -18,4 +18,3 @@ const Modal = ({ children, isOpen, size = 'lg' }) => {
             react_1.default.createElement(card_1.Card, { colorToken: "background", width: ModalSizes[size], cardType: "elevated", elevation: "modal" }, children))));
 };
 exports.Modal = Modal;
-//# sourceMappingURL=modal.component.js.map

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

@@ -15,4 +15,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./switch.component"), exports);
-//# sourceMappingURL=index.js.map

package/dist/cjs/components/switch/switch.component.js

@@ -63,4 +63,3 @@ const Switch = ({ size = 'sm', on = false, onChange }) => {
         react_1.default.createElement(framer_motion_1.motion.div, { style: handleStyle, className: "handle", layout: true, transition: spring })));
 };
 exports.Switch = Switch;
-//# sourceMappingURL=switch.component.js.map

package/dist/cjs/components/switch/switch.config.js

@@ -23,4 +23,3 @@ exports.SwitchConfigs = {
         padding: 5,
     },
 };
-//# sourceMappingURL=switch.config.js.map

package/dist/cjs/core/background/background.component.js

@@ -18,4 +18,3 @@ function BackgroundStyle({ image, gradiant, theme }) {
         backgroundImage: image || gradiant,
     };
 }
-//# sourceMappingURL=background.component.js.map

package/dist/cjs/core/border/border.style.js

@@ -28,4 +28,3 @@ exports.BorderStyle = BorderStyle;
 function extractColor(theme, border, key) {
     return theme.colors[(0, uni_core_1.getValue)(border, key, 'color')];
 }
-//# sourceMappingURL=border.style.js.map

package/dist/cjs/core/border/index.js

@@ -15,4 +15,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./border.style"), exports);
-//# sourceMappingURL=index.js.map

package/dist/cjs/core/container/container.component.js

@@ -20,4 +20,3 @@ function Container(_a) {
     return (react_1.default.createElement("div", Object.assign({ style: style }, rest), children));
 }
 exports.default = Container;
-//# sourceMappingURL=container.component.js.map

package/dist/cjs/core/container/index.js

@@ -15,4 +15,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./container.component"), exports);
-//# sourceMappingURL=index.js.map

package/dist/cjs/core/filter/filter.argTypes.js

@@ -102,4 +102,3 @@ exports.filterArgTypes = {
             '100% will make the image completely sepia.',
     },
 };
-//# sourceMappingURL=filter.argTypes.js.map

package/dist/cjs/core/filter/filter.component.js

@@ -13,4 +13,3 @@ const Filter = (filterProps) => {
     return react_1.default.createElement(container_component_1.default, { style: style }, children);
 };
 exports.Filter = Filter;
-//# sourceMappingURL=filter.component.js.map

package/dist/cjs/core/filter/filter.config.js

@@ -66,4 +66,3 @@ exports.FilterConfigs = {
         rangeHigh: 100,
     },
 };
-//# sourceMappingURL=filter.config.js.map

package/dist/cjs/core/filter/filter.model.js

@@ -1,3 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=filter.model.js.map

package/dist/cjs/core/filter/filter.style.js

@@ -19,4 +19,3 @@ const FilterStyle = (filterSettings) => {
     return { filter: filterArray.join(' ') };
 };
 exports.FilterStyle = FilterStyle;
-//# sourceMappingURL=filter.style.js.map

package/dist/cjs/core/filter/filter.types.js

@@ -1,3 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=filter.types.js.map

package/dist/cjs/core/filter/index.js

@@ -18,4 +18,3 @@ __exportStar(require("./filter.component"), exports);
 __exportStar(require("./filter.config"), exports);
 __exportStar(require("./filter.model"), exports);
 __exportStar(require("./filter.types"), exports);
-//# sourceMappingURL=index.js.map

package/dist/cjs/core/flex/flex.component.js

@@ -26,18 +26,8 @@ const react_2 = require("react");
  * @see Docs
  */
 exports.Flex = (0, react_2.forwardRef)((props, ref) => {
-    const { direction, align, justify, wrap, basis, grow, shrink } = props, rest = __rest(props, ["direction", "align", "justify", "wrap", "basis", "grow", "shrink"]);
-    const styles = {
-        display: 'flex',
-        flexDirection: direction,
-        alignItems: align,
-        justifyContent: justify,
-        flexWrap: wrap,
-        flexBasis: basis,
-        flexGrow: grow,
-        flexShrink: shrink,
-    };
+    const { direction, align, justify, wrap, basis, grow, shrink, style } = props, rest = __rest(props, ["direction", "align", "justify", "wrap", "basis", "grow", "shrink", "style"]);
+    const styles = Object.assign({ display: 'flex', flexDirection: direction, alignItems: align, justifyContent: justify, flexWrap: wrap, flexBasis: basis, flexGrow: grow, flexShrink: shrink }, style);
     return react_1.default.createElement("div", Object.assign({ ref: ref, style: styles }, rest));
 });
 exports.Flex.displayName = 'Flex';
-//# sourceMappingURL=flex.component.js.map

package/dist/cjs/core/flex/flex.style.js

@@ -84,4 +84,3 @@ exports.flexColumnSpaceAround = {
 exports.flexOff = {
     position: 'relative'
 };
-//# sourceMappingURL=flex.style.js.map

package/dist/cjs/core/flex/index.js

@@ -16,4 +16,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./flex.style"), exports);
 __exportStar(require("./flex.component"), exports);
-//# sourceMappingURL=index.js.map

package/dist/cjs/core/hooks/index.d.ts

@@ -1 +1,3 @@
 export * from './use-toggle';
+export * from './use-ripple';
+export * from './use-media';

package/dist/cjs/core/hooks/index.js

@@ -15,4 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./use-toggle"), exports);
-//# sourceMappingURL=index.js.map
+__exportStar(require("./use-ripple"), exports);
+__exportStar(require("./use-media"), exports);

package/dist/cjs/core/hooks/use-media.js

@@ -27,4 +27,3 @@ const useMedia = (queries, values, defaultValue) => {
     return value;
 };
 exports.useMedia = useMedia;
-//# sourceMappingURL=use-media.js.map

package/dist/cjs/core/hooks/use-ripple.d.ts

@@ -0,0 +1,48 @@
+/// <reference types="react" />
+export type Options<T extends HTMLElement = any> = {
+    duration: number;
+    color: string;
+    timingFunction: string;
+    disabled?: boolean;
+    className: string;
+    containerClassName: string;
+    ignoreNonLeftClick: boolean;
+    onSpawn?: (ctx: {
+        /** the ripple element */
+        readonly ripple: HTMLDivElement;
+        /** cancels the current ripple animation */
+        readonly cancelRipple: () => void;
+        /** the ref to the ripple host element */
+        readonly ref: React.RefObject<T>;
+        /** the event that triggered the ripple (ts: casting required) */
+        readonly event: unknown;
+        /** the ripple container element */
+        readonly container: HTMLDivElement;
+    }) => void;
+    cancelAutomatically: boolean;
+    ref: React.RefObject<T>;
+};
+export type MinimalEvent = {
+    clientX: number;
+    clientY: number;
+    nativeEvent?: {
+        which?: number;
+        type?: string;
+    };
+};
+/**
+ * useRipple - Material UI style ripple effect React hook
+ * @author Jonathan Asplund <jonathan@asplund.net>
+ * @param inputOptions Ripple options
+ * @returns Tuple `[ref, event]`. See https://github.com/asplunds/use-ripple for usage
+ */
+export default function useRipple<T extends HTMLElement = any>(inputOptions?: Partial<Options<T>>): readonly [import("react").RefObject<any>, (event: MinimalEvent) => void];
+/**
+ * HOF useRipple - Generate a custom ripple hook with predefined options
+ *
+ * After generating a HOF useRipple you can then override some or all predefined options by passing a new option object.
+ * @author Jonathan Asplund <jonathan@asplund.net>
+ * @param inputOptions ripple options
+ * @returns Custom HOC useRipple hook
+ */
+export declare function customRipple<T extends HTMLElement = any>(inputOptions?: Partial<Omit<Options<T>, 'ref'>>): (overrideOptions?: Partial<Options<T>>) => readonly [import("react").RefObject<any>, (event: MinimalEvent) => void];

package/dist/cjs/core/hooks/use-ripple.js

@@ -0,0 +1,171 @@
+"use strict";
+// https://github.com/asplunds/use-ripple
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.customRipple = void 0;
+const react_1 = require("react");
+const self = () => document;
+const completedFactor = 0.4;
+const className = '__useRipple--ripple';
+const containerClassName = '__useRipple--ripple-container';
+/**
+ * useRipple - Material UI style ripple effect React hook
+ * @author Jonathan Asplund <jonathan@asplund.net>
+ * @param inputOptions Ripple options
+ * @returns Tuple `[ref, event]`. See https://github.com/asplunds/use-ripple for usage
+ */
+function useRipple(inputOptions) {
+    const internalRef = (0, react_1.useRef)(null);
+    const _a = Object.assign({ duration: 450, color: 'rgba(255, 255, 255, .3)', cancelAutomatically: false, timingFunction: 'cubic-bezier(.42,.36,.28,.88)', disabled: false, className,
+        containerClassName, ignoreNonLeftClick: true, ref: internalRef }, (inputOptions !== null && inputOptions !== void 0 ? inputOptions : {})), { ref } = _a, options = __rest(_a, ["ref"]);
+    const event = (0, react_1.useCallback)((event) => {
+        var _a, _b;
+        if (!ref.current ||
+            options.disabled ||
+            (options.ignoreNonLeftClick && ((_a = event.nativeEvent) === null || _a === void 0 ? void 0 : _a.which) !== 1 && ((_b = event.nativeEvent) === null || _b === void 0 ? void 0 : _b.type) === 'mousedown'))
+            return;
+        const target = ref.current;
+        if (window.getComputedStyle(target).position === 'static')
+            void applyStyles([['position', 'relative']], target);
+        if (!target)
+            return;
+        const existingContainer = target.querySelector(`:scope > .${options.containerClassName}`);
+        const container = existingContainer !== null && existingContainer !== void 0 ? existingContainer : createRippleContainer(options.containerClassName);
+        if (!existingContainer)
+            target.appendChild(container);
+        // Used to ensure overflow: hidden is registered properly on IOS Safari before ripple is shown
+        void requestAnimationFrame(() => {
+            var _a;
+            const begun = Date.now();
+            const ripple = centerElementToPointer(event, target, createRipple(target, event, options));
+            const events = ['mouseup', 'touchend'];
+            const cancelRipple = () => {
+                const now = Date.now();
+                const diff = now - begun;
+                // Ensure the transform animation is complete before cancellation
+                void setTimeout(() => {
+                    void cancelRippleAnimation(ripple, options);
+                }, diff > 0.4 * options.duration ? 0 : completedFactor * options.duration - diff);
+                for (const event of events)
+                    void self().removeEventListener(event, cancelRipple);
+            };
+            if (!options.cancelAutomatically && !isTouchDevice())
+                for (const event of events)
+                    void self().addEventListener(event, cancelRipple);
+            else
+                setTimeout(() => void cancelRippleAnimation(ripple, options), options.duration * completedFactor);
+            void container.appendChild(ripple);
+            void ((_a = options.onSpawn) === null || _a === void 0 ? void 0 : _a.call(options, {
+                ripple,
+                cancelRipple,
+                event,
+                ref,
+                container,
+            }));
+        });
+    }, [ref, options]);
+    return [ref, event];
+}
+exports.default = useRipple;
+/**
+ * HOF useRipple - Generate a custom ripple hook with predefined options
+ *
+ * After generating a HOF useRipple you can then override some or all predefined options by passing a new option object.
+ * @author Jonathan Asplund <jonathan@asplund.net>
+ * @param inputOptions ripple options
+ * @returns Custom HOC useRipple hook
+ */
+function customRipple(inputOptions) {
+    return (overrideOptions) => useRipple(Object.assign(Object.assign({}, inputOptions), overrideOptions));
+}
+exports.customRipple = customRipple;
+function centerElementToPointer(event, ref, element) {
+    const { top, left } = ref.getBoundingClientRect();
+    void element.style.setProperty('top', px(event.clientY - top));
+    void element.style.setProperty('left', px(event.clientX - left));
+    return element;
+}
+function px(arg) {
+    return `${arg}px`;
+}
+function createRipple(ref, event, { duration, color, timingFunction, className }, ctx = document) {
+    const element = ctx.createElement('div');
+    const { clientX, clientY } = event;
+    const { height, width, top, left } = ref.getBoundingClientRect();
+    const maxHeight = Math.max(clientY - top, height - clientY + top);
+    const maxWidth = Math.max(clientX - left, width - clientX + left);
+    // @ts-ignore
+    const size = px(Math.hypot(maxHeight, maxWidth) * 2);
+    const styles = [
+        ['position', 'absolute'],
+        ['height', size],
+        ['width', size],
+        ['transform', 'translate(-50%, -50%) scale(0)'],
+        ['pointer-events', 'none'],
+        ['border-radius', '50%'],
+        ['opacity', '.6'],
+        ['background', color],
+        [
+            'transition',
+            `transform ${duration * 0.6}ms ${timingFunction}, opacity ${Math.max(duration * 0.05, 140)}ms ease-out`,
+        ],
+    ];
+    void element.classList.add(className);
+    void window.requestAnimationFrame(() => {
+        void applyStyles([['transform', 'translate(-50%, -50%) scale(1)']], element);
+    });
+    return applyStyles(styles, element);
+}
+function applyStyles(styles, target) {
+    if (!target)
+        return target;
+    for (const [property, value] of styles) {
+        void target.style.setProperty(property, value);
+    }
+    return target;
+}
+function cancelRippleAnimation(element, options) {
+    const { duration, timingFunction } = options;
+    void applyStyles([
+        ['opacity', '0'],
+        [
+            'transition',
+            `transform ${duration * 0.6}ms ${timingFunction}, opacity ${duration * 0.65}ms ease-in-out ${duration * 0.13}ms`,
+        ],
+    ], element);
+    void window.requestAnimationFrame(() => {
+        void element.addEventListener('transitionend', (e) => {
+            if (e.propertyName === 'opacity')
+                void element.remove();
+        });
+    });
+}
+function createRippleContainer(className) {
+    const container = self().createElement('div');
+    void container.classList.add(className);
+    return applyStyles([
+        ['position', 'absolute'],
+        ['height', '100%'],
+        ['width', '100%'],
+        ['border-radius', 'inherit'],
+        ['top', '0'],
+        ['left', '0'],
+        ['pointer-events', 'none'],
+        ['overflow', 'hidden'],
+    ], container);
+}
+/** taken from https://stackoverflow.com/a/4819886/13188385 */
+function isTouchDevice() {
+    var _a;
+    return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || ((_a = navigator === null || navigator === void 0 ? void 0 : navigator.msMaxTouchPoints) !== null && _a !== void 0 ? _a : 0 > 0);
+}

package/dist/cjs/core/hooks/use-toggle.js

@@ -19,4 +19,3 @@ function useToggle(initialState = false) {
     return [value, callbacks];
 }
 exports.useToggle = useToggle;
-//# sourceMappingURL=use-toggle.js.map