@adamjanicki/ui 1.2.9 → 1.3.1

package/components/Animated/Animated.d.ts

@@ -0,0 +1,52 @@
+import React from "react";
+type Props = {
+    /**
+     * Whether the component is visible or not
+     */
+    visible: boolean;
+    /**
+     * Duration of the animation in milliseconds
+     */
+    duration?: number;
+    /**
+     * Whether to keep the component mounted when it is not visible
+     */
+    keepMountedOnExit?: boolean;
+    /**
+     * Animation configuration for the enter state
+     */
+    enter?: {
+        /**
+         * Class name to apply to the component during the enter animation
+         */
+        className?: string;
+        /**
+         * Inline styles to apply to the component during the enter animation
+         */
+        style?: React.CSSProperties;
+    };
+    exit?: {
+        /**
+         * Class name to apply to the component during the exit animation
+         */
+        className?: string;
+        /**
+         * Inline styles to apply to the component during the exit animation
+         */
+        style?: React.CSSProperties;
+    };
+    /**
+     * Children to render
+     */
+    children: React.ReactNode | React.ReactNode[];
+    /**
+     * [Optional] className to apply to the component always
+     */
+    className?: string;
+    /**
+     * [Optional] Inline styles to apply to the component always
+     */
+    style?: React.CSSProperties;
+};
+declare const Animated: ({ visible, duration, keepMountedOnExit, enter, exit, children, className, style, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default Animated;

package/components/Animated/Animated.js

@@ -0,0 +1,39 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { classNames } from "../../utils/util";
+var Animated = function (_a) {
+    var visible = _a.visible, _b = _a.duration, duration = _b === void 0 ? 250 : _b, _c = _a.keepMountedOnExit, keepMountedOnExit = _c === void 0 ? false : _c, enter = _a.enter, exit = _a.exit, children = _a.children, className = _a.className, style = _a.style;
+    var _d = useState(visible), shouldRender = _d[0], setShouldRender = _d[1];
+    var _e = useState(visible ? "entering" : "exiting"), animationState = _e[0], setAnimationState = _e[1];
+    useEffect(function () {
+        var timeoutId;
+        if (visible && !shouldRender) {
+            // Start enter animation
+            setShouldRender(true);
+            setAnimationState("entering");
+        }
+        else if (!visible && shouldRender) {
+            // Start exit animation
+            setAnimationState("exiting");
+            timeoutId = setTimeout(function () {
+                if (!keepMountedOnExit) {
+                    setShouldRender(false);
+                }
+            }, duration);
+        }
+        return function () { return clearTimeout(timeoutId); };
+    }, [visible, shouldRender, duration, keepMountedOnExit]);
+    return (_jsx("div", { className: classNames(className, animationState === "entering" ? enter === null || enter === void 0 ? void 0 : enter.className : exit === null || exit === void 0 ? void 0 : exit.className), style: __assign(__assign(__assign({}, style), (animationState === "entering" ? enter === null || enter === void 0 ? void 0 : enter.style : exit === null || exit === void 0 ? void 0 : exit.style)), { transition: "all ".concat(duration, "ms ease-in-out") }), children: shouldRender && children }));
+};
+export default Animated;

package/components/Animated/index.d.ts

@@ -0,0 +1,2 @@
+import Animated from "./Animated";
+export default Animated;

package/components/Animated/index.js

@@ -0,0 +1,2 @@
+import Animated from "./Animated";
+export default Animated;

package/components/Layer/Layer.d.ts

@@ -23,19 +23,5 @@ type LayerProps = {
      */
     disableEscape?: boolean;
 };
-type AnimatedLayerProps = LayerProps & {
-    /**
-     * [Optional] Config for visibility, including styles and class names
-     * Set the `transition` property on the `style` prop to animate the layer
-     */
-    visibility: {
-        visible: boolean;
-        invisibleStyle?: React.CSSProperties;
-        visibleStyle?: React.CSSProperties;
-        invisibleClassName?: string;
-        visibleClassName?: string;
-    };
-};
 declare const Layer: (props: LayerProps) => JSX.Element;
-export declare const AnimatedLayer: ({ visibility, className, style, ...props }: AnimatedLayerProps) => JSX.Element;
 export default Layer;

package/components/Layer/Layer.js

@@ -9,17 +9,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-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;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect } from "react";
 import { useFocusTrap, useScrollLock } from "../../hooks";
@@ -54,18 +43,4 @@ var Layer = function (props) {
     useScrollLock();
     return _jsx(BaseLayer, __assign({}, props, { visible: true }));
 };
-var defaultInvisibleStyle = {
-    visibility: "hidden",
-    opacity: 0,
-};
-var defaultVisibleStyle = { opacity: 1 };
-export var AnimatedLayer = function (_a) {
-    var visibility = _a.visibility, className = _a.className, _b = _a.style, style = _b === void 0 ? {} : _b, props = __rest(_a, ["visibility", "className", "style"]);
-    var visible = visibility.visible, _c = visibility.invisibleStyle, invisibleStyle = _c === void 0 ? defaultInvisibleStyle : _c, _d = visibility.visibleStyle, visibleStyle = _d === void 0 ? defaultVisibleStyle : _d, invisibleClassName = visibility.invisibleClassName, visibleClassName = visibility.visibleClassName;
-    // lock and unlock on visibility change
-    useScrollLock(visible);
-    var mergedStyle = __assign(__assign({}, style), (visible ? visibleStyle : invisibleStyle));
-    var mergedClassName = classNames(className, visible ? visibleClassName : invisibleClassName);
-    return (_jsx(BaseLayer, __assign({}, props, { style: mergedStyle, className: mergedClassName, visible: visible })));
-};
 export default Layer;

package/components/Layer/index.d.ts

@@ -1,3 +1,2 @@
-import Layer, { AnimatedLayer } from "./Layer";
-export { AnimatedLayer };
+import Layer from "./Layer";
 export default Layer;

package/components/Layer/index.js

@@ -1,3 +1,2 @@
-import Layer, { AnimatedLayer } from "./Layer";
-export { AnimatedLayer };
+import Layer from "./Layer";
 export default Layer;

package/index.d.ts

@@ -5,11 +5,11 @@ export { default as Link } from "./components/Link";
 export * from "./components/Input";
 export { default as Input } from "./components/Input";
 export { default as Alert } from "./components/Alert";
+export { default as Animated } from "./components/Animated";
 export { default as Badge } from "./components/Badge";
 export { default as Banner } from "./components/Banner";
 export { default as Select } from "./components/Select";
 export { default as ClickOutside } from "./components/ClickOutside";
-export * from "./components/Layer";
 export { default as Layer } from "./components/Layer";
 export { default as Spinner } from "./components/Spinner";
 export * from "./hooks";

package/index.js

@@ -6,11 +6,11 @@ export { default as Link } from "./components/Link";
 export * from "./components/Input";
 export { default as Input } from "./components/Input";
 export { default as Alert } from "./components/Alert";
+export { default as Animated } from "./components/Animated";
 export { default as Badge } from "./components/Badge";
 export { default as Banner } from "./components/Banner";
 export { default as Select } from "./components/Select";
 export { default as ClickOutside } from "./components/ClickOutside";
-export * from "./components/Layer";
 export { default as Layer } from "./components/Layer";
 export { default as Spinner } from "./components/Spinner";
 // Hooks

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamjanicki/ui",
-  "version": "1.2.9",
+  "version": "1.3.1",
   "description": "Basic UI components and hooks for React in TypeScript",
   "main": "./index.js",
   "types": "./index.d.ts",