@bolttech/ob-atoms-backdrop 1.0.1 → 1.0.2

package/index.cjs.js

@@ -1,20 +1,10 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('classnames');
 var react = require('react');
 var reactDom = require('react-dom');
 var uiUtils = require('@bolttech/ui-utils');
-var jsxDevRuntime = require('react/jsx-dev-runtime');
-
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (-1 !== e.indexOf(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
-}
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -1077,24 +1067,56 @@ $({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign },
   assign: assign
 });
 
-const _excluded = ["id", "dataTestId", "onClick", "appendTo", "className", "children"];
-var _jsxFileName = "/home/silas-silva/Documents/projects/bgs-frontend-ui/libs/ob/atoms/backdrop/src/lib/backdrop.tsx";
-const Backdrop = /*#__PURE__*/react.forwardRef((_ref, ref) => {
-  let {
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __rest(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;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+const Backdrop = /*#__PURE__*/react.forwardRef((_a, ref) => {
+  var {
       id = 'backdrop-id',
       dataTestId = 'backdrop-data-testid',
       onClick,
       appendTo,
       className,
       children
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = _a,
+    props = __rest(_a, ["id", "dataTestId", "onClick", "appendTo", "className", "children"]);
   const handleClick = event => {
     if (!onClick || event.currentTarget !== event.target) return;
     onClick(event);
     return;
   };
-  const backdrop = react.useMemo(() => /*#__PURE__*/jsxDevRuntime.jsxDEV("div", Object.assign({
+  const backdrop = react.useMemo(() => jsxRuntime.jsx("div", Object.assign({
     ref: ref,
     id: id,
     "data-testid": dataTestId,
@@ -1102,11 +1124,7 @@ const Backdrop = /*#__PURE__*/react.forwardRef((_ref, ref) => {
     className: classNames('w-screen h-screen fixed inset-0 bg-black/30 z-4', className)
   }, uiUtils.applyDataAttributes(props), {
     children: children
-  }), void 0, false, {
-    fileName: _jsxFileName,
-    lineNumber: 30,
-    columnNumber: 9
-  }, undefined), [className, children, onClick, id]);
+  })), [className, children, onClick, id]);
   if (!appendTo) return backdrop;
   return /*#__PURE__*/reactDom.createPortal(backdrop, appendTo);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bolttech/ob-atoms-backdrop",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "dependencies": {
     "@bolttech/ui-utils": "0.6.7",
     "react": "19.1.2",

package/src/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/backdrop';

package/src/lib/backdrop.d.ts

@@ -0,0 +1,2 @@
+import { IBackdropProps } from './backdrop.interface';
+export declare const Backdrop: import("react").ForwardRefExoticComponent<IBackdropProps & import("react").RefAttributes<HTMLDivElement>>;

package/src/lib/backdrop.interface.d.ts

@@ -0,0 +1,37 @@
+import { DefaultProps } from '@bolttech/ui-utils';
+import { ReactNode } from 'react';
+/**
+ * @interface IBackdropProps Backdrop component props
+ * @property {string | undefined} id - component identification
+ * @property {string | undefined} dataTestId - react-testing-library identification
+ * @property {HTMLElement | undefined} appendTo - html element reference that the backdrop will be attached to using react portal
+ * @property {function | undefined} onClick - function that will run when user clicks on backdrop
+ * @property {string | undefined} className - classname for allowing customization
+ * @property {string | React.ReactElement | React.ReactElement[] | undefined} children - children component that will render inside the backdrop
+ */
+export interface IBackdropProps extends DefaultProps {
+    /** Component identification */
+    id?: string;
+    /** React-testing-library identification */
+    dataTestId?: string;
+    /** HTML Element reference that the backdrop will be attached to using react portal */
+    appendTo?: HTMLElement;
+    /** Function that will run when user clicks on backdrop
+     *
+     * NOTE: this function will not run when clicking on the content of the children component, only when clicking on the `Backdrop`
+     *
+     *
+     * @example
+     * ```ts
+     *<Backdrop onClick={(event) => setIsOpen(false)}>
+          <h1>Backdrop content</h1>
+      </Backdrop>
+     * ```
+     *
+     */
+    onClick?: (event: React.MouseEvent) => void;
+    /** Classname for allowing customization */
+    className?: string;
+    /** Children component that will render inside the backdrop */
+    children?: ReactNode;
+}

package/src/lib/backdrop.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta } from '@storybook/react';
+import { Backdrop } from './backdrop';
+declare const Story: Meta<typeof Backdrop>;
+export default Story;
+export declare const Primary: import("storybook/internal/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./backdrop.interface").IBackdropProps & import("react").RefAttributes<HTMLDivElement>>;