@cerberus-design/react/build/legacy/components/deprecated/Notification.cjs

The Cerberus Design React component library.

"use strict";
"use client";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/components/deprecated/Notification.tsx
var Notification_exports = {};
__export(Notification_exports, {
  Notification: () => Notification
});
module.exports = __toCommonJS(Notification_exports);
var import_css = require("styled-system/css");
var import_patterns = require("styled-system/patterns");
var import_recipes = require("styled-system/recipes");
var import_react2 = require("react");

// src/context/cerberus.tsx
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var CerberusContext = (0, import_react.createContext)(null);
function useCerberusContext() {
  const context = (0, import_react.useContext)(CerberusContext);
  if (!context) {
    throw new Error("useCerberus must be used within a CerberusProvider");
  }
  return context;
}

// src/components/deprecated/aria-helpers/trap-focus.aria.ts
function trapFocus(modalRef) {
  var _a;
  const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
  const focusable = Array.from(
    ((_a = modalRef.current) == null ? void 0 : _a.querySelectorAll(focusableElements)) ?? []
  );
  const firstFocusable = focusable[0];
  const lastFocusable = focusable[focusable.length - 1];
  return function handleKeyDown(event) {
    if (event.key === "Tab") {
      if (event.shiftKey) {
        if (document.activeElement === firstFocusable) {
          lastFocusable.focus();
          event.preventDefault();
        }
      } else {
        if (document.activeElement === lastFocusable) {
          firstFocusable.focus();
          event.preventDefault();
        }
      }
    }
  };
}

// src/components/deprecated/Notification.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
function MatchNotificationIcon(props) {
  const { icons } = useCerberusContext();
  const palette = props.palette || "info";
  const key = `${palette}Notification`;
  const Icon = icons[key];
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, {});
}
function Notification(props) {
  const { children, palette, onClose, ...nativeProps } = props;
  const ref = (0, import_react2.useRef)(null);
  const onKeyDown = trapFocus(ref);
  const styles = (0, import_recipes.notification)({ palette });
  const { icons } = useCerberusContext();
  const { close: CloseIcon } = icons;
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
    "dialog",
    {
      ...nativeProps,
      "data-placement": "left",
      className: (0, import_css.cx)(
        nativeProps.className,
        (0, import_patterns.hstack)({
          position: "relative",
          gap: "4"
        }),
        styles.dialog
      ),
      onKeyDown,
      ref,
      children: [
        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MatchNotificationIcon, { palette }) }),
        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
          "div",
          {
            className: (0, import_patterns.vstack)({
              alignItems: "flex-start",
              gap: "0",
              py: "2"
            }),
            children
          }
        ),
        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
          "button",
          {
            "aria-label": "Close",
            className: styles.close,
            onClick: onClose,
            value: props.id,
            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CloseIcon, {})
          }
        )
      ]
    }
  );
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Notification
});
//# sourceMappingURL=Notification.cjs.map