@coopdigital/react 1.11.0 → 1.13.0

package/dist/components/Dialog/Dialog.js

@@ -1,109 +1,113 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import mergeRefs from 'merge-refs';
-import { createContext, useRef, useEffect, useContext } from 'react';
-import { hasUserBg } from '../../utils/index.js';
-import { CrossIcon } from '../icons/CrossIcon.js';
-
+import { hasUserBg } from "../../utils/index.js";
+import { CrossIcon } from "../icons/CrossIcon.js";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useRef } from "react";
+import mergeRefs from "merge-refs";
+//#region src/components/Dialog/Dialog.tsx
 const DialogContext = createContext({ ref: null });
 const useDialog = () => {
-    const ctx = useContext(DialogContext);
-    if (!ctx)
-        throw new Error("Dialog components must be used inside <Dialog>");
-    return ctx;
+	const ctx = useContext(DialogContext);
+	if (!ctx) throw new Error("Dialog components must be used inside <Dialog>");
+	return ctx;
 };
 const Dialog = ({ children, className, closedBy = "any", label, mode = "dialog", onClose, onOpen, onToggle, open, position, ref, role, ...props }) => {
-    const dialogRef = useRef(null);
-    useEffect(() => {
-        const dialog = dialogRef.current;
-        if (!dialog)
-            return;
-        if (open) {
-            dialog.showModal();
-        }
-        else if (!open) {
-            dialog.close();
-        }
-    }, [open]);
-    useEffect(() => {
-        const dialog = dialogRef === null || dialogRef === void 0 ? void 0 : dialogRef.current;
-        if (!dialog)
-            return;
-        /**
-         * https://bugs.webkit.org/show_bug.cgi?id=190870
-         *
-         * There is a bug in Safari that means scrollable areas are not
-         * automatically focusable. To work around this, we would need to
-         * add tabindex=0 to the dialog body container, even if there isn't
-         * enough content to scroll, which would negatively impact
-         * accessibility for other browsers. We decided the least-worst
-         * option was to have the dialog itself scrollable as this works
-         * everywhere we tested it. If Safari ever fixes the bug, we'll
-         * update the dialog to scroll the body only.
-         */
-        const setScrolledState = () => {
-            const y = dialog.scrollTop;
-            dialog.setAttribute("data-scrolled", y && y > 0 ? "true" : "false");
-        };
-        dialog.addEventListener("scroll", setScrolledState, {
-            passive: true,
-        });
-        return () => {
-            dialog.removeEventListener("scroll", setScrolledState);
-        };
-    }, [dialogRef]);
-    const handleToggle = (e) => {
-        if (e.newState === "open") {
-            onOpen === null || onOpen === void 0 ? void 0 : onOpen(e);
-        }
-    };
-    const handleBackdropClick = (event) => {
-        const dialog = dialogRef === null || dialogRef === void 0 ? void 0 : dialogRef.current;
-        if (dialog && event.target === dialog && closedBy !== "none") {
-            dialog.close();
-        }
-    };
-    const handleCancel = (event) => {
-        if (closedBy === "none") {
-            event.preventDefault();
-        }
-    };
-    const componentProps = {
-        "aria-label": label,
-        "aria-modal": true,
-        className: clsx("coop-dialog", mode === "sheet" && "coop-sheet", !hasUserBg(className) && "bg-tint-grey", className),
-        closedby: closedBy,
-        "data-mode": mode,
-        "data-open": open,
-        "data-position": position,
-        role,
-        ...props,
-    };
-    return (jsx(DialogContext.Provider, { value: { ref: dialogRef }, children: jsx("dialog", { ...componentProps, onCancel: handleCancel, onClick: handleBackdropClick, onClose: onClose, onToggle: (e) => {
-                handleToggle(e);
-                onToggle === null || onToggle === void 0 ? void 0 : onToggle(e);
-            }, ref: mergeRefs(dialogRef, ref), children: children }) }));
+	const dialogRef = useRef(null);
+	useEffect(() => {
+		const dialog = dialogRef.current;
+		if (!dialog) return;
+		if (open) dialog.showModal();
+		else if (!open) dialog.close();
+	}, [open]);
+	useEffect(() => {
+		const dialog = dialogRef?.current;
+		if (!dialog) return;
+		/**
+		* https://bugs.webkit.org/show_bug.cgi?id=190870
+		*
+		* There is a bug in Safari that means scrollable areas are not
+		* automatically focusable. To work around this, we would need to
+		* add tabindex=0 to the dialog body container, even if there isn't
+		* enough content to scroll, which would negatively impact
+		* accessibility for other browsers. We decided the least-worst
+		* option was to have the dialog itself scrollable as this works
+		* everywhere we tested it. If Safari ever fixes the bug, we'll
+		* update the dialog to scroll the body only.
+		*/
+		const setScrolledState = () => {
+			const y = dialog.scrollTop;
+			dialog.setAttribute("data-scrolled", y && y > 0 ? "true" : "false");
+		};
+		dialog.addEventListener("scroll", setScrolledState, { passive: true });
+		return () => {
+			dialog.removeEventListener("scroll", setScrolledState);
+		};
+	}, [dialogRef]);
+	const handleToggle = (e) => {
+		if (e.newState === "open") onOpen?.(e);
+	};
+	const handleBackdropClick = (event) => {
+		const dialog = dialogRef?.current;
+		if (dialog && event.target === dialog && closedBy !== "none") dialog.close();
+	};
+	const handleCancel = (event) => {
+		if (closedBy === "none") event.preventDefault();
+	};
+	const componentProps = {
+		"aria-label": label,
+		"aria-modal": true,
+		className: clsx("coop-dialog", mode === "sheet" && "coop-sheet", !hasUserBg(className) && "bg-tint-grey", className),
+		closedby: closedBy,
+		"data-mode": mode,
+		"data-open": open,
+		"data-position": position,
+		role,
+		...props
+	};
+	return /* @__PURE__ */ jsx(DialogContext.Provider, {
+		value: { ref: dialogRef },
+		children: /* @__PURE__ */ jsx("dialog", {
+			...componentProps,
+			onCancel: handleCancel,
+			onClick: handleBackdropClick,
+			onClose,
+			onToggle: (e) => {
+				handleToggle(e);
+				onToggle?.(e);
+			},
+			ref: mergeRefs(dialogRef, ref),
+			children
+		})
+	});
 };
 const DialogHeader = ({ children, className, closeButton = true, ...props }) => {
-    const componentProps = {
-        className: clsx("coop-dialog--header", !hasUserBg(className) && "bg-tint-grey", className),
-        ...props,
-    };
-    const dialog = useDialog();
-    return (jsxs("div", { ...componentProps, children: [children, closeButton && (jsxs("button", { "aria-label": "Close", className: "coop-dialog--close", onClick: () => { var _a, _b; return (_b = (_a = dialog.ref) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.close(); }, children: ["Close ", jsx(CrossIcon, { role: "presentation" })] }))] }));
+	const componentProps = {
+		className: clsx("coop-dialog--header", !hasUserBg(className) && "bg-tint-grey", className),
+		...props
+	};
+	const dialog = useDialog();
+	return /* @__PURE__ */ jsxs("div", {
+		...componentProps,
+		children: [children, closeButton && /* @__PURE__ */ jsxs("button", {
+			"aria-label": "Close",
+			className: "coop-dialog--close",
+			onClick: () => dialog.ref?.current?.close(),
+			children: ["Close ", /* @__PURE__ */ jsx(CrossIcon, { role: "presentation" })]
+		})]
+	});
 };
 const DialogBody = ({ children, className, ...props }) => {
-    const componentProps = {
-        className: clsx("coop-dialog--body", className),
-        ...props,
-    };
-    return jsx("div", { ...componentProps, children: children });
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("coop-dialog--body", className),
+		...props,
+		children
+	});
 };
 Dialog.slot = { name: "Dialog" };
 DialogHeader.slot = { name: "DialogHeader" };
 DialogBody.slot = { name: "DialogBody" };
 Dialog.Header = DialogHeader;
 Dialog.Body = DialogBody;
-
-export { Dialog, DialogBody, DialogHeader, Dialog as default };
+//#endregion
+export { Dialog, Dialog as default, DialogBody, DialogHeader };

package/dist/components/Dialog/index.d.ts

@@ -1,4 +1,2 @@
-import Dialog from "./Dialog";
-export default Dialog;
-export { Dialog };
-export * from "./Dialog";
+import { Dialog, DialogBody, DialogHeader, DialogProps } from "./Dialog.js";
+export { Dialog, Dialog as default, DialogBody, DialogHeader, DialogProps };

package/dist/components/Dialog/index.js

@@ -0,0 +1,5 @@
+import { Dialog, DialogBody, DialogHeader } from "./Dialog.js";
+//#region src/components/Dialog/index.ts
+var Dialog_default = Dialog;
+//#endregion
+export { Dialog, DialogBody, DialogHeader, Dialog_default as default };

package/dist/components/Expandable/Expandable.d.ts

@@ -1,53 +1,54 @@
-import type { DetailsHTMLAttributes, HTMLAttributes, JSX, Ref } from "react";
-export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
-    /** Main content inside the component. This should be an `Expandable.Summary` and `Expandable.Content`. */
-    children: React.ReactNode;
-    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-    className?: string;
-    /** **(Optional)** Specify a custom React ref for this component. */
-    ref?: Ref<HTMLDetailsElement>;
+import { DetailsHTMLAttributes, HTMLAttributes, JSX, Ref } from "react";
+//#region src/components/Expandable/Expandable.d.ts
+interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
+  /** Main content inside the component. This should be an `Expandable.Summary` and `Expandable.Content`. */
+  children: React.ReactNode;
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string;
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDetailsElement>;
 }
 interface ExpandableSummaryProps extends HTMLAttributes<HTMLElement> {
-    /** **(Optional)** Content inside the Summary. */
-    children?: React.ReactNode;
-    /** **(Optional)** Specify additional CSS classes to be applied to the Summary. */
-    className?: string;
+  /** **(Optional)** Content inside the Summary. */
+  children?: React.ReactNode;
+  /** **(Optional)** Specify additional CSS classes to be applied to the Summary. */
+  className?: string;
 }
 interface ExpandableContentProps extends HTMLAttributes<HTMLElement> {
-    /** **(Optional)** Content inside the Expandable. */
-    children?: React.ReactNode;
-    /** **(Optional)** Specify additional CSS classes to be applied to the content wrapper. */
-    className?: string;
+  /** **(Optional)** Content inside the Expandable. */
+  children?: React.ReactNode;
+  /** **(Optional)** Specify additional CSS classes to be applied to the content wrapper. */
+  className?: string;
 }
 declare const Expandable: {
-    ({ children, className, ref, ...props }: ExpandableProps): JSX.Element;
+  ({ children, className, ref, ...props }: ExpandableProps): JSX.Element;
+  slot: {
+    name: string;
+  };
+  Summary: {
+    ({ children, className, ...props }: ExpandableSummaryProps): JSX.Element;
     slot: {
-        name: string;
-    };
-    Summary: {
-        ({ children, className, ...props }: ExpandableSummaryProps): JSX.Element;
-        slot: {
-            name: string;
-        };
+      name: string;
     };
-    Content: {
-        ({ children, className, ...props }: ExpandableContentProps): JSX.Element;
-        slot: {
-            name: string;
-        };
+  };
+  Content: {
+    ({ children, className, ...props }: ExpandableContentProps): JSX.Element;
+    slot: {
+      name: string;
     };
+  };
 };
 declare const ExpandableSummary: {
-    ({ children, className, ...props }: ExpandableSummaryProps): JSX.Element;
-    slot: {
-        name: string;
-    };
+  ({ children, className, ...props }: ExpandableSummaryProps): JSX.Element;
+  slot: {
+    name: string;
+  };
 };
 declare const ExpandableContent: {
-    ({ children, className, ...props }: ExpandableContentProps): JSX.Element;
-    slot: {
-        name: string;
-    };
+  ({ children, className, ...props }: ExpandableContentProps): JSX.Element;
+  slot: {
+    name: string;
+  };
 };
-export default Expandable;
-export { Expandable, ExpandableContent, ExpandableSummary };
+//#endregion
+export { Expandable, Expandable as default, ExpandableContent, ExpandableProps, ExpandableSummary };

package/dist/components/Expandable/Expandable.js

@@ -1,35 +1,43 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
-import { useSlots } from '../../hooks/useSlots.js';
-import { hasUserBg } from '../../utils/index.js';
-import 'react';
-import { ChevronDownIcon } from '../icons/ChevronDownIcon.js';
-
+import { hasUserBg } from "../../utils/index.js";
+import { ChevronDownIcon } from "../icons/ChevronDownIcon.js";
+import { useSlots } from "../../hooks/useSlots.js";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Expandable/Expandable.tsx
 const componentSlots = {
-    ExpandableContent: null,
-    ExpandableSummary: null,
+	ExpandableContent: null,
+	ExpandableSummary: null
 };
 const Expandable = ({ children, className, ref, ...props }) => {
-    const slots = useSlots(componentSlots, children);
-    const componentProps = {
-        className: clsx("coop-expandable", !hasUserBg(className) && "bg-tint-grey", className),
-        ...props,
-    };
-    // componentProps.style = {
-    //   "--bg": `var(--color-${bgClassToColor(componentProps.className)})`,
-    // }
-    return (jsxs("details", { ...componentProps, ref: ref, children: [slots.ExpandableSummary, slots.ExpandableContent] }));
+	const slots = useSlots(componentSlots, children);
+	return /* @__PURE__ */ jsxs("details", {
+		className: clsx("coop-expandable", !hasUserBg(className) && "bg-tint-grey", className),
+		...props,
+		ref,
+		children: [slots.ExpandableSummary, slots.ExpandableContent]
+	});
 };
 const ExpandableSummary = ({ children, className, ...props }) => {
-    return (jsxs("summary", { ...props, className: className, children: [children, jsx(ChevronDownIcon, { className: "coop-expandable--icon", width: "20" })] }));
+	return /* @__PURE__ */ jsxs("summary", {
+		...props,
+		className,
+		children: [children, /* @__PURE__ */ jsx(ChevronDownIcon, {
+			className: "coop-expandable--icon",
+			width: "20"
+		})]
+	});
 };
 const ExpandableContent = ({ children, className, ...props }) => {
-    return (jsx("div", { className: clsx("coop-expandable--content", className), ...props, children: children }));
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("coop-expandable--content", className),
+		...props,
+		children
+	});
 };
 Expandable.slot = { name: "Expandable" };
 ExpandableSummary.slot = { name: "ExpandableSummary" };
 ExpandableContent.slot = { name: "ExpandableContent" };
 Expandable.Summary = ExpandableSummary;
 Expandable.Content = ExpandableContent;
-
-export { Expandable, ExpandableContent, ExpandableSummary, Expandable as default };
+//#endregion
+export { Expandable, Expandable as default, ExpandableContent, ExpandableSummary };

package/dist/components/Expandable/index.d.ts

@@ -1,4 +1,2 @@
-import Expandable from "./Expandable";
-export default Expandable;
-export { Expandable };
-export * from "./Expandable";
+import { Expandable, ExpandableContent, ExpandableProps, ExpandableSummary } from "./Expandable.js";
+export { Expandable, Expandable as default, ExpandableContent, ExpandableProps, ExpandableSummary };

package/dist/components/Expandable/index.js

@@ -0,0 +1,5 @@
+import { Expandable, ExpandableContent, ExpandableSummary } from "./Expandable.js";
+//#region src/components/Expandable/index.ts
+var Expandable_default = Expandable;
+//#endregion
+export { Expandable, ExpandableContent, ExpandableSummary, Expandable_default as default };

package/dist/components/Field/Field.context.js

@@ -1,13 +1,11 @@
 "use client";
-import { createContext, useContext } from 'react';
-
+import { createContext, useContext } from "react";
+//#region src/components/Field/Field.context.ts
 const FieldContext = createContext(null);
 const useField = () => {
-    const context = useContext(FieldContext);
-    if (!context) {
-        return null;
-    }
-    return context;
+	const context = useContext(FieldContext);
+	if (!context) return null;
+	return context;
 };
-
+//#endregion
 export { FieldContext, useField };

package/dist/components/Field/Field.d.ts

@@ -1,65 +1,65 @@
-import type { HTMLAttributes, JSX, Ref } from "react";
-import React from "react";
-import { type ErrorProps } from "../FieldMarkers/Error";
-import { type HintProps } from "../FieldMarkers/Hint";
-import { type LabelProps } from "../FieldMarkers/Label";
+import { ErrorProps } from "../FieldMarkers/Error.js";
+import { HintProps } from "../FieldMarkers/Hint.js";
+import { LabelProps } from "../FieldMarkers/Label.js";
+import React, { HTMLAttributes, JSX, Ref } from "react";
+//#region src/components/Field/Field.d.ts
 interface FieldProps extends HTMLAttributes<HTMLDivElement> {
-    /** **(Optional)** Specify whether the Field should render inside a box. */
-    boxed?: boolean;
-    /** Form elements inside the Field.
-     *
-     * Usually this will be a combination of `Field.Label`, `Field.Hint`, `Field.Error` and an associated control such as `TextInput` or `Checkbox`. */
-    children: React.ReactNode;
-    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
-    classname?: string;
-    /** **(Optional)** Specify the Field error state. Use this to apply visual styling to the field control. */
-    error?: boolean;
-    /** **(Optional)** Specify whether the Field should show the left-hand error bar if it is in an error state. */
-    hideErrorBar?: boolean;
-    /** **(Optional)** Specify a custom React ref for this component. */
-    ref?: Ref<HTMLDivElement>;
+  /** **(Optional)** Specify whether the Field should render inside a box. */
+  boxed?: boolean;
+  /** Form elements inside the Field.
+   *
+   * Usually this will be a combination of `Field.Label`, `Field.Hint`, `Field.Error` and an associated control such as `TextInput` or `Checkbox`. */
+  children: React.ReactNode;
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  classname?: string;
+  /** **(Optional)** Specify the Field error state. Use this to apply visual styling to the field control. */
+  error?: boolean;
+  /** **(Optional)** Specify whether the Field should show the left-hand error bar if it is in an error state. */
+  hideErrorBar?: boolean;
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>;
 }
 declare const Field: {
-    ({ boxed, children, className, error, hideErrorBar, ref, ...props }: FieldProps): JSX.Element;
+  ({ boxed, children, className, error, hideErrorBar, ref, ...props }: FieldProps): JSX.Element;
+  slot: {
+    name: string;
+  };
+  Label: {
+    (props: LabelProps): JSX.Element;
     slot: {
-        name: string;
-    };
-    Label: {
-        (props: LabelProps): JSX.Element;
-        slot: {
-            name: string;
-        };
+      name: string;
     };
-    Hint: {
-        (props: HintProps): JSX.Element;
-        slot: {
-            name: string;
-        };
+  };
+  Hint: {
+    (props: HintProps): JSX.Element;
+    slot: {
+      name: string;
     };
-    Error: {
-        (props: ErrorProps): JSX.Element;
-        slot: {
-            name: string;
-        };
+  };
+  Error: {
+    (props: ErrorProps): JSX.Element;
+    slot: {
+      name: string;
     };
+  };
 };
 declare const FieldLabel: {
-    (props: LabelProps): JSX.Element;
-    slot: {
-        name: string;
-    };
+  (props: LabelProps): JSX.Element;
+  slot: {
+    name: string;
+  };
 };
 declare const FieldHint: {
-    (props: HintProps): JSX.Element;
-    slot: {
-        name: string;
-    };
+  (props: HintProps): JSX.Element;
+  slot: {
+    name: string;
+  };
 };
 declare const FieldError: {
-    (props: ErrorProps): JSX.Element;
-    slot: {
-        name: string;
-    };
+  (props: ErrorProps): JSX.Element;
+  slot: {
+    name: string;
+  };
 };
-export default Field;
-export { Field, FieldError, FieldHint, FieldLabel };
+//#endregion
+export { Field, Field as default, FieldError, FieldHint, FieldLabel };