@adamjanicki/ui 1.2.4 → 1.2.5

package/components/Layer/Layer.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-type Props = {
+type LayerProps = {
     /**
      * Callback that fires when the user clicks outside the layer
      */
@@ -22,10 +22,13 @@ type Props = {
      * @default false
      */
     disableEscape?: boolean;
+};
+type AnimatedLayerProps = LayerProps & {
     /**
-     * [Optional] Config for visibility
+     * [Optional] Config for visibility, including styles and class names
+     * Set the `transition` property on the `style` prop to animate the layer
      */
-    visibility?: {
+    visibility: {
         visible: boolean;
         invisibleStyle?: React.CSSProperties;
         visibleStyle?: React.CSSProperties;
@@ -33,5 +36,6 @@ type Props = {
         visibleClassName?: string;
     };
 };
-declare const Layer: ({ onClose, children, style, className, disableEscape, visibility, }: Props) => JSX.Element | null;
+declare const Layer: ({ onClose, children, style, className, disableEscape, }: LayerProps) => JSX.Element;
+export declare const AnimatedLayer: ({ visibility, className, style, ...props }: AnimatedLayerProps) => JSX.Element;
 export default Layer;

package/components/Layer/Layer.js

@@ -9,19 +9,24 @@ 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";
 import { classNames } from "../../utils/util";
 var Layer = function (_a) {
-    var onClose = _a.onClose, children = _a.children, _b = _a.style, style = _b === void 0 ? {} : _b, className = _a.className, _c = _a.disableEscape, disableEscape = _c === void 0 ? false : _c, _d = _a.visibility, visibility = _d === void 0 ? { visible: true } : _d;
-    var visible = visibility.visible, _e = visibility.invisibleStyle, invisibleStyle = _e === void 0 ? {
-        zIndex: -1,
-        opacity: 0,
-        pointerEvents: "none",
-        userSelect: "none",
-    } : _e, _f = visibility.visibleStyle, visibleStyle = _f === void 0 ? { opacity: 1 } : _f, invisibleClassName = visibility.invisibleClassName, visibleClassName = visibility.visibleClassName;
-    var _g = useScrollLock(), lock = _g.lock, unlock = _g.unlock;
+    var onClose = _a.onClose, children = _a.children, style = _a.style, className = _a.className, _b = _a.disableEscape, disableEscape = _b === void 0 ? false : _b;
+    var _c = useScrollLock(), lock = _c.lock, unlock = _c.unlock;
     var focusRef = useFocusTrap(true);
     useEffect(function () {
         var handleEscape = function (event) {
@@ -40,7 +45,7 @@ var Layer = function (_a) {
         lock();
         return unlock;
     }, [lock, unlock]);
-    return (_jsx("div", { className: classNames("ajui-layer-backdrop", className, visible ? visibleClassName : invisibleClassName), style: __assign(__assign({}, style), (visible ? visibleStyle : invisibleStyle)), onClick: onClose, children: React.cloneElement(children, {
+    return (_jsx("div", { className: classNames("ajui-layer-backdrop", className), style: style, onClick: onClose, children: React.cloneElement(children, {
             ref: focusRef,
             onClick: function (e) {
                 var _a, _b;
@@ -49,4 +54,18 @@ var Layer = function (_a) {
             },
         }) }));
 };
+var defaultInvisibleStyle = {
+    zIndex: -1,
+    opacity: 0,
+    pointerEvents: "none",
+    userSelect: "none",
+};
+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;
+    var mergedStyle = __assign(__assign({}, style), (visible ? visibleStyle : invisibleStyle));
+    var mergedClassName = classNames(className, visible ? visibleClassName : invisibleClassName);
+    return _jsx(Layer, __assign({}, props, { style: mergedStyle, className: mergedClassName }));
+};
 export default Layer;

package/components/Layer/index.d.ts

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

package/components/Layer/index.js

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

package/index.d.ts

@@ -9,6 +9,7 @@ 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

@@ -10,6 +10,7 @@ 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.4",
+  "version": "1.2.5",
   "description": "Basic UI components and hooks for React in TypeScript",
   "main": "./index.js",
   "types": "./index.d.ts",