@adamjanicki/ui 1.2.3 → 1.2.5

package/components/Button/Button.js

@@ -28,7 +28,7 @@ export var UnstyledButton = forwardRef(function (_a, ref) {
     var to = _a.to, LinkElement = _a.LinkElement, className = _a.className, props = __rest(_a, ["to", "LinkElement", "className"]);
     className = classNames("ajui-button-base", className);
     if (to) {
-        return (_jsx(UnstyledLink, { to: to, className: className, style: props.style, role: "button", children: props.children, LinkElement: LinkElement, "aria-label": props["aria-label"] }));
+        return (_jsx(UnstyledLink, { to: to, className: className, style: props.style, role: "button", LinkElement: LinkElement, "aria-label": props["aria-label"], children: props.children }));
     }
     return _jsx("button", __assign({}, props, { className: className, ref: ref }));
 });

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
      */
@@ -23,5 +23,19 @@ type Props = {
      */
     disableEscape?: boolean;
 };
-declare const Layer: ({ onClose, children, style, className, disableEscape, }: Props) => JSX.Element | null;
+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: ({ 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

@@ -1,3 +1,25 @@
+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);
+};
+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";
@@ -32,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/components/Select/Select.js

@@ -25,7 +25,7 @@ import { forwardRef } from "react";
 import { classNames } from "../../utils/util";
 var identity = function (x) { return x; };
 var Select = function (_a, ref) {
-    var className = _a.className, options = _a.options, _b = _a.getOptionValue, getOptionValue = _b === void 0 ? identity : _b, _c = _a.getOptionLabel, getOptionLabel = _c === void 0 ? identity : _c, _d = _a.corners, corners = _d === void 0 ? "rounded" : _d, _e = _a.style, style = _e === void 0 ? {} : _e, innerStyle = _a.innerStyle, innerClassName = _a.innerClassName, disabled = _a.disabled, props = __rest(_a, ["className", "options", "getOptionValue", "getOptionLabel", "corners", "style", "innerStyle", "innerClassName", "disabled"]);
-    return (_jsxs("div", { className: classNames("ajui-select-container", disabled ? "ajui-select-disabled" : undefined, className) || undefined, children: [_jsx("select", __assign({}, props, { ref: ref, className: classNames("ajui-select-base corners--".concat(corners), innerClassName), style: innerStyle, disabled: disabled, children: options.map(function (option, index) { return (_jsx("option", { value: getOptionValue(option), children: getOptionLabel(option) }, index)); }) })), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", className: "ajui-select-triangle", "aria-hidden": "true", children: _jsx("path", { fill: "currentColor", d: "M 29.175781 50.824219 C 30.738281 52.386719 33.273438 52.386719 34.835938 50.824219 L 58.835938 26.824219 C 60.398438 25.261719 60.398438 22.726562 58.835938 21.164062 C 57.273438 19.601562 54.738281 19.601562 53.175781 21.164062 L 32 42.335938 L 10.824219 21.175781 C 9.261719 19.613281 6.726562 19.613281 5.164062 21.175781 C 3.601562 22.738281 3.601562 25.273438 5.164062 26.835938 L 29.164062 50.835938 Z M 29.175781 50.824219" }) })] }));
+    var className = _a.className, options = _a.options, _b = _a.getOptionValue, getOptionValue = _b === void 0 ? identity : _b, _c = _a.getOptionLabel, getOptionLabel = _c === void 0 ? identity : _c, _d = _a.corners, corners = _d === void 0 ? "rounded" : _d, style = _a.style, innerStyle = _a.innerStyle, innerClassName = _a.innerClassName, disabled = _a.disabled, props = __rest(_a, ["className", "options", "getOptionValue", "getOptionLabel", "corners", "style", "innerStyle", "innerClassName", "disabled"]);
+    return (_jsxs("div", { className: classNames("ajui-select-container", disabled ? "ajui-select-disabled" : undefined, className) || undefined, style: style, children: [_jsx("select", __assign({}, props, { ref: ref, className: classNames("ajui-select-base corners--".concat(corners), innerClassName), style: innerStyle, disabled: disabled, children: options.map(function (option, index) { return (_jsx("option", { value: getOptionValue(option), children: getOptionLabel(option) }, index)); }) })), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", className: "ajui-select-triangle", "aria-hidden": "true", children: _jsx("path", { fill: "currentColor", d: "M 29.175781 50.824219 C 30.738281 52.386719 33.273438 52.386719 34.835938 50.824219 L 58.835938 26.824219 C 60.398438 25.261719 60.398438 22.726562 58.835938 21.164062 C 57.273438 19.601562 54.738281 19.601562 53.175781 21.164062 L 32 42.335938 L 10.824219 21.175781 C 9.261719 19.613281 6.726562 19.613281 5.164062 21.175781 C 3.601562 22.738281 3.601562 25.273438 5.164062 26.835938 L 29.164062 50.835938 Z M 29.175781 50.824219" }) })] }));
 };
 export default forwardRef(Select);

package/components/Spinner/Spinner.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 type Props = {
     /**
      * [Optional] Additional class names to apply to the spinner.

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

package/style.css

@@ -53,7 +53,7 @@
   --ajui-static-color: var(--ajui-default-color);
   --ajui-static-border: var(--ajui-default-border);
   /* Layer */
-  --ajui-layer-backdrop-background: rgba(200, 200, 200, 0.6);
+  --ajui-layer-backdrop-background: rgba(200, 200, 200, 0.7);
   /* Link */
   --ajui-link-color: #0070ff;
 }
@@ -98,7 +98,7 @@
   --ajui-static-color: var(--ajui-default-color);
   --ajui-static-border: var(--ajui-default-border);
   /* Layer */
-  --ajui-layer-backdrop-background: rgba(40, 40, 40, 0.6);
+  --ajui-layer-backdrop-background: rgba(55, 55, 55, 0.7);
   /* Link */
   --ajui-link-color: #009ef3;
 }