@postenbring/hedwig-react
Version:
React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).
312 lines (307 loc) • 11.3 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
target[prop] = source[prop];
}
return target;
};
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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/modal/index.tsx
var modal_exports = {};
__export(modal_exports, {
Modal: () => Modal,
ModalContent: () => ModalContent,
ModalFooter: () => ModalFooter,
ModalHeader: () => ModalHeader
});
module.exports = __toCommonJS(modal_exports);
// src/modal/modal.tsx
var import_react3 = require("react");
var import_typed_classname2 = require("@postenbring/hedwig-css/typed-classname");
var import_react_slot2 = require("@radix-ui/react-slot");
// src/box/box.tsx
var import_react = require("react");
var import_typed_classname = require("@postenbring/hedwig-css/typed-classname");
var import_react_slot = require("@radix-ui/react-slot");
var import_jsx_runtime = require("react/jsx-runtime");
function CloseIcon() {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: 32, height: 32, viewBox: "0 0 32 32", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"path",
{
d: "M17.5469 16.3333L22.375 11.5521L23.3594 10.5677C23.5 10.4271 23.5 10.1927 23.3594 10.0052L22.3281 8.97394C22.1406 8.83331 21.9062 8.83331 21.7656 8.97394L16 14.7864L10.1875 8.97394C10.0469 8.83331 9.8125 8.83331 9.625 8.97394L8.59375 10.0052C8.45312 10.1927 8.45312 10.4271 8.59375 10.5677L14.4062 16.3333L8.59375 22.1458C8.45312 22.2864 8.45312 22.5208 8.59375 22.7083L9.625 23.7396C9.8125 23.8802 10.0469 23.8802 10.1875 23.7396L16 17.9271L20.7812 22.7552L21.7656 23.7396C21.9062 23.8802 22.1406 23.8802 22.3281 23.7396L23.3594 22.7083C23.5 22.5208 23.5 22.2864 23.3594 22.1458L17.5469 16.3333Z",
fill: "currentColor"
}
) });
}
var BoxCloseButton = (0, import_react.forwardRef)(
(_a, ref) => {
var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"button",
__spreadProps(__spreadValues({
className: (0, import_typed_classname.clsx)("hds-box__close-button", className),
ref,
type: "button"
}, rest), {
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CloseIcon, {})
})
);
}
);
BoxCloseButton.displayName = "Box.CloseButton";
var convertVariantToColor = (variant) => {
switch (variant) {
case "lighter":
return "";
case "white":
return "";
case "warning":
return "warning";
default:
return "neutral";
}
};
var Box = (0, import_react.forwardRef)(
(_a, ref) => {
var _b = _a, {
"data-color": color = "",
asChild,
variant,
closeable = false,
onClose: onCloseProp,
closed: closedProp,
closeButtonProps,
children,
className
} = _b, rest = __objRest(_b, [
"data-color",
"asChild",
"variant",
"closeable",
"onClose",
"closed",
"closeButtonProps",
"children",
"className"
]);
const [closedState, setClosedState] = (0, import_react.useState)(false);
const onClose = (0, import_react.useCallback)(() => {
if (onCloseProp) {
const result = onCloseProp();
if (result === true) {
setClosedState(true);
}
} else {
setClosedState(true);
}
}, []);
const closed = closedProp != null ? closedProp : closedState;
const Component = asChild ? import_react_slot.Slot : "div";
const resolvedColor = color && color !== "" ? color : convertVariantToColor(variant);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
Component,
__spreadProps(__spreadValues({
"data-color": resolvedColor,
className: (0, import_typed_classname.clsx)(
"hds-box",
{ "hds-box--lighter": variant === "lighter" },
{ "hds-box--white": variant === "white" },
{ "hds-box--closed": closed },
className
),
ref
}, rest), {
children: [
closeable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BoxCloseButton, __spreadValues({ onClick: onClose }, closeButtonProps)) : null,
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_slot.Slottable, { children })
]
})
);
}
);
Box.displayName = "Box";
Box.CloseButton = BoxCloseButton;
// src/utils/utils.ts
var React = __toESM(require("react"));
var import_react2 = require("react");
function useMergeRefs(refs) {
return React.useMemo(() => {
if (refs.every((ref) => ref === null)) {
return null;
}
return (value) => {
refs.forEach((ref) => {
if (typeof ref === "function") {
ref(value);
} else if (ref !== null) {
ref.current = value;
}
});
};
}, refs);
}
var inertBooleanSupported = Number(import_react2.version.split(".")[0]) >= 19;
// src/modal/modal.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var ModalHeader = (0, import_react3.forwardRef)(
(_a, ref) => {
var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
const Component = asChild ? import_react_slot2.Slot : "h1";
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
Component,
__spreadValues({
className: (0, import_typed_classname2.clsx)("hds-modal__header", className),
ref
}, rest)
);
}
);
ModalHeader.displayName = "Modal.Header";
var ModalContent = (0, import_react3.forwardRef)(
(_a, ref) => {
var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
const Component = asChild ? import_react_slot2.Slot : "div";
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
Component,
__spreadValues({
className: (0, import_typed_classname2.clsx)("hds-modal__content", className),
ref
}, rest)
);
}
);
ModalContent.displayName = "Modal.Content";
var ModalFooter = (0, import_react3.forwardRef)(
(_a, ref) => {
var _b = _a, { asChild, className } = _b, rest = __objRest(_b, ["asChild", "className"]);
const Component = asChild ? import_react_slot2.Slot : "footer";
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
Component,
__spreadValues({
className: (0, import_typed_classname2.clsx)("hds-modal__footer", className),
ref
}, rest)
);
}
);
ModalFooter.displayName = "Modal.Footer";
var Modal = (0, import_react3.forwardRef)(
(_a, ref) => {
var _b = _a, { children, className, open, closeOnBackdropClick, onClick } = _b, rest = __objRest(_b, ["children", "className", "open", "closeOnBackdropClick", "onClick"]);
const modalRef = (0, import_react3.useRef)(null);
const mergedRef = useMergeRefs([modalRef, ref]);
function onCloseButtonClick() {
var _a2;
(_a2 = modalRef.current) == null ? void 0 : _a2.close();
return false;
}
useScrollLock(modalRef, "hds-modal-scroll-lock");
(0, import_react3.useEffect)(() => {
if (modalRef.current && open !== void 0) {
if (open && !modalRef.current.open) {
modalRef.current.showModal();
} else if (!open && modalRef.current.open) {
modalRef.current.close();
}
}
}, [modalRef, open]);
function onDialogClick(e) {
if (closeOnBackdropClick && e.target === modalRef.current) {
modalRef.current.close();
}
onClick == null ? void 0 : onClick(e);
}
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
Box,
{
asChild: true,
className: (0, import_typed_classname2.clsx)("hds-modal", className),
closeable: true,
onClick: onDialogClick,
onClose: onCloseButtonClick,
variant: "white",
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("dialog", __spreadProps(__spreadValues({ ref: mergedRef }, rest), { children }))
}
);
}
);
Modal.displayName = "Modal";
Modal.Header = ModalHeader;
Modal.Content = ModalContent;
Modal.Footer = ModalFooter;
function useScrollLock(modalRef, bodyClass) {
(0, import_react3.useEffect)(() => {
if (!modalRef.current) return;
if (modalRef.current.open) document.body.classList.add(bodyClass);
const observer = new MutationObserver(() => {
var _a;
if ((_a = modalRef.current) == null ? void 0 : _a.open) document.body.classList.add(bodyClass);
else document.body.classList.remove(bodyClass);
});
observer.observe(modalRef.current, {
attributes: true,
attributeFilter: ["open"]
});
return () => {
observer.disconnect();
document.body.classList.remove(bodyClass);
};
}, [bodyClass, modalRef]);
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Modal,
ModalContent,
ModalFooter,
ModalHeader
});
//# sourceMappingURL=index.js.map