@dnanpm/ui-components 0.7.0 → 0.8.0

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,101 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { Close } from "@dnanpm/icons";
+import elevationStyles from "../../styles/utils/elevation.module.css.js";
+import focusStyles from "../../styles/utils/focus.module.css.js";
+import { useDialogDismissal } from "../Modal/useDialogDismissal.js";
+import { useNativeDialog } from "../Modal/useNativeDialog.js";
+import styles from "./Drawer.module.css.js";
+import { cn } from "../../utils/cn/cn.js";
+const Drawer = ({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  size = "small",
+  headerStyle = "light",
+  side = "right",
+  fixedTitle = false,
+  disableCloseOptions = false,
+  closeLabel = "Sulje dialogi",
+  keepMounted = false,
+  className,
+  ref,
+  onKeyDown,
+  onClick,
+  onPointerDown,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}) => {
+  const titleId = useId();
+  const descriptionId = useId();
+  const { dialogRef, close, phase, isPresent } = useNativeDialog({
+    open: open ?? false,
+    keepMounted,
+    onOpenChange
+  });
+  const describedBy = [description ? descriptionId : void 0, ariaDescribedBy].filter(Boolean).join(" ") || void 0;
+  const dialogDismissalProps = useDialogDismissal({
+    close,
+    disableCloseOptions,
+    onClick,
+    onKeyDown,
+    onPointerDown
+  });
+  if (!isPresent) return null;
+  return /* @__PURE__ */ jsxs(
+    "dialog",
+    {
+      ...props,
+      ref: (node) => {
+        dialogRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      className: cn(
+        styles.drawer,
+        elevationStyles.elevationHigh,
+        styles[`drawer--${size}`],
+        styles[`drawer--${headerStyle}`],
+        styles[`drawer--${side}`],
+        { [styles["drawer--fixed-title"]]: fixedTitle },
+        { [styles["drawer--opening"]]: phase !== "closing" },
+        { [styles["drawer--closing"]]: phase === "closing" },
+        className
+      ),
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy ?? (!ariaLabel && title ? titleId : void 0),
+      "aria-describedby": describedBy,
+      ...dialogDismissalProps,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.drawer__container, children: [
+          !disableCloseOptions && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: cn(styles.drawer__close, focusStyles.focusable),
+              "aria-label": closeLabel,
+              "data-dialog-autofocus": "true",
+              onClick: close,
+              children: /* @__PURE__ */ jsx(Close, { "aria-hidden": "true" })
+            }
+          ),
+          (title || description) && /* @__PURE__ */ jsxs("div", { className: styles.drawer__title, children: [
+            title && /* @__PURE__ */ jsx("h2", { id: titleId, className: styles.drawer__heading, children: title }),
+            description && /* @__PURE__ */ jsx("div", { id: descriptionId, className: styles.drawer__description, children: description })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: styles.drawer__content, children })
+        ] }),
+        footer && /* @__PURE__ */ jsx("div", { className: cn(styles["drawer__bottom-bar"], elevationStyles.elevationMedium), children: footer })
+      ]
+    }
+  );
+};
+export {
+  Drawer
+};
+//# sourceMappingURL=Drawer.js.map

package/dist/components/Drawer/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { useId } from 'react';\nimport { Close } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport elevationStyles from '../../styles/utils/elevation.module.css';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport { useDialogDismissal } from '../Modal/useDialogDismissal';\nimport { useNativeDialog } from '../Modal/useNativeDialog';\nimport styles from './Drawer.module.css';\nimport type { DrawerProps } from './Drawer.types';\n\nexport const Drawer = ({\n    open,\n    onOpenChange,\n    title,\n    description,\n    children,\n    footer,\n    size = 'small',\n    headerStyle = 'light',\n    side = 'right',\n    fixedTitle = false,\n    disableCloseOptions = false,\n    closeLabel = 'Sulje dialogi',\n    keepMounted = false,\n    className,\n    ref,\n    onKeyDown,\n    onClick,\n    onPointerDown,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    ...props\n}: DrawerProps) => {\n    const titleId = useId();\n    const descriptionId = useId();\n    const { dialogRef, close, phase, isPresent } = useNativeDialog({\n        open: open ?? false,\n        keepMounted,\n        onOpenChange,\n    });\n    const describedBy =\n        [description ? descriptionId : undefined, ariaDescribedBy].filter(Boolean).join(' ') ||\n        undefined;\n    const dialogDismissalProps = useDialogDismissal({\n        close,\n        disableCloseOptions,\n        onClick,\n        onKeyDown,\n        onPointerDown,\n    });\n\n    if (!isPresent) return null;\n\n    return (\n        <dialog\n            {...props}\n            ref={(node) => {\n                dialogRef.current = node;\n                if (typeof ref === 'function') ref(node);\n                else if (ref) ref.current = node;\n            }}\n            className={cn(\n                styles.drawer,\n                elevationStyles.elevationHigh,\n                styles[`drawer--${size}`],\n                styles[`drawer--${headerStyle}`],\n                styles[`drawer--${side}`],\n                { [styles['drawer--fixed-title']]: fixedTitle },\n                { [styles['drawer--opening']]: phase !== 'closing' },\n                { [styles['drawer--closing']]: phase === 'closing' },\n                className,\n            )}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy ?? (!ariaLabel && title ? titleId : undefined)}\n            aria-describedby={describedBy}\n            {...dialogDismissalProps}\n        >\n            <div className={styles.drawer__container}>\n                {!disableCloseOptions && (\n                    <button\n                        type=\"button\"\n                        className={cn(styles.drawer__close, focusStyles.focusable)}\n                        aria-label={closeLabel}\n                        data-dialog-autofocus=\"true\"\n                        onClick={close}\n                    >\n                        <Close aria-hidden=\"true\" />\n                    </button>\n                )}\n                {(title || description) && (\n                    <div className={styles.drawer__title}>\n                        {title && (\n                            <h2 id={titleId} className={styles.drawer__heading}>\n                                {title}\n                            </h2>\n                        )}\n                        {description && (\n                            <div id={descriptionId} className={styles.drawer__description}>\n                                {description}\n                            </div>\n                        )}\n                    </div>\n                )}\n                <div className={styles.drawer__content}>{children}</div>\n            </div>\n            {footer && (\n                <div className={cn(styles['drawer__bottom-bar'], elevationStyles.elevationMedium)}>\n                    {footer}\n                </div>\n            )}\n        </dialog>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;AAUO,MAAM,SAAS,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,cAAc;AAAA,EACd,OAAO;AAAA,EACP,aAAa;AAAA,EACb,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,GAAG;AACP,MAAmB;AACf,QAAM,UAAU,MAAA;AAChB,QAAM,gBAAgB,MAAA;AACtB,QAAM,EAAE,WAAW,OAAO,OAAO,UAAA,IAAc,gBAAgB;AAAA,IAC3D,MAAM,QAAQ;AAAA,IACd;AAAA,IACA;AAAA,EAAA,CACH;AACD,QAAM,cACF,CAAC,cAAc,gBAAgB,QAAW,eAAe,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KACnF;AACJ,QAAM,uBAAuB,mBAAmB;AAAA,IAC5C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACH;AAED,MAAI,CAAC,UAAW,QAAO;AAEvB,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,KAAK,CAAC,SAAS;AACX,kBAAU,UAAU;AACpB,YAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,iBAC9B,SAAS,UAAU;AAAA,MAChC;AAAA,MACA,WAAW;AAAA,QACP,OAAO;AAAA,QACP,gBAAgB;AAAA,QAChB,OAAO,WAAW,IAAI,EAAE;AAAA,QACxB,OAAO,WAAW,WAAW,EAAE;AAAA,QAC/B,OAAO,WAAW,IAAI,EAAE;AAAA,QACxB,EAAE,CAAC,OAAO,qBAAqB,CAAC,GAAG,WAAA;AAAA,QACnC,EAAE,CAAC,OAAO,iBAAiB,CAAC,GAAG,UAAU,UAAA;AAAA,QACzC,EAAE,CAAC,OAAO,iBAAiB,CAAC,GAAG,UAAU,UAAA;AAAA,QACzC;AAAA,MAAA;AAAA,MAEJ,cAAY;AAAA,MACZ,mBAAiB,mBAAmB,CAAC,aAAa,QAAQ,UAAU;AAAA,MACpE,oBAAkB;AAAA,MACjB,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,mBAClB,UAAA;AAAA,UAAA,CAAC,uBACE;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,MAAK;AAAA,cACL,WAAW,GAAG,OAAO,eAAe,YAAY,SAAS;AAAA,cACzD,cAAY;AAAA,cACZ,yBAAsB;AAAA,cACtB,SAAS;AAAA,cAET,UAAA,oBAAC,OAAA,EAAM,eAAY,OAAA,CAAO;AAAA,YAAA;AAAA,UAAA;AAAA,WAGhC,SAAS,gBACP,qBAAC,OAAA,EAAI,WAAW,OAAO,eAClB,UAAA;AAAA,YAAA,6BACI,MAAA,EAAG,IAAI,SAAS,WAAW,OAAO,iBAC9B,UAAA,MAAA,CACL;AAAA,YAEH,mCACI,OAAA,EAAI,IAAI,eAAe,WAAW,OAAO,qBACrC,UAAA,YAAA,CACL;AAAA,UAAA,GAER;AAAA,UAEJ,oBAAC,OAAA,EAAI,WAAW,OAAO,iBAAkB,SAAA,CAAS;AAAA,QAAA,GACtD;AAAA,QACC,UACG,oBAAC,OAAA,EAAI,WAAW,GAAG,OAAO,oBAAoB,GAAG,gBAAgB,eAAe,GAC3E,UAAA,OAAA,CACL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIhB;"}

package/dist/components/Drawer/Drawer.module.css.cjs

@@ -0,0 +1,37 @@
+require('./Drawer.css');
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const drawer = "_drawer_zzxde_1";
+const drawer__container = "_drawer__container_zzxde_78";
+const drawer__title = "_drawer__title_zzxde_88";
+const drawer__heading = "_drawer__heading_zzxde_98";
+const drawer__description = "_drawer__description_zzxde_102";
+const drawer__content = "_drawer__content_zzxde_105";
+const drawer__close = "_drawer__close_zzxde_113";
+const styles = {
+  drawer,
+  "drawer--small": "_drawer--small_zzxde_29",
+  "drawer--medium": "_drawer--medium_zzxde_32",
+  "drawer--large": "_drawer--large_zzxde_35",
+  "drawer--opening": "_drawer--opening_zzxde_38",
+  "drawer--closing": "_drawer--closing_zzxde_39",
+  "drawer--left": "_drawer--left_zzxde_50",
+  drawer__container,
+  "drawer--fixed-title": "_drawer--fixed-title_zzxde_85",
+  drawer__title,
+  drawer__heading,
+  drawer__description,
+  drawer__content,
+  drawer__close,
+  "drawer__bottom-bar": "_drawer__bottom-bar_zzxde_133",
+  "drawer--dark": "_drawer--dark_zzxde_140"
+};
+exports.default = styles;
+exports.drawer = drawer;
+exports.drawer__close = drawer__close;
+exports.drawer__container = drawer__container;
+exports.drawer__content = drawer__content;
+exports.drawer__description = drawer__description;
+exports.drawer__heading = drawer__heading;
+exports.drawer__title = drawer__title;
+//# sourceMappingURL=Drawer.module.css.cjs.map

package/dist/components/Drawer/Drawer.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Drawer/Drawer.module.css.js

@@ -0,0 +1,37 @@
+import './Drawer.css';
+const drawer = "_drawer_zzxde_1";
+const drawer__container = "_drawer__container_zzxde_78";
+const drawer__title = "_drawer__title_zzxde_88";
+const drawer__heading = "_drawer__heading_zzxde_98";
+const drawer__description = "_drawer__description_zzxde_102";
+const drawer__content = "_drawer__content_zzxde_105";
+const drawer__close = "_drawer__close_zzxde_113";
+const styles = {
+  drawer,
+  "drawer--small": "_drawer--small_zzxde_29",
+  "drawer--medium": "_drawer--medium_zzxde_32",
+  "drawer--large": "_drawer--large_zzxde_35",
+  "drawer--opening": "_drawer--opening_zzxde_38",
+  "drawer--closing": "_drawer--closing_zzxde_39",
+  "drawer--left": "_drawer--left_zzxde_50",
+  drawer__container,
+  "drawer--fixed-title": "_drawer--fixed-title_zzxde_85",
+  drawer__title,
+  drawer__heading,
+  drawer__description,
+  drawer__content,
+  drawer__close,
+  "drawer__bottom-bar": "_drawer__bottom-bar_zzxde_133",
+  "drawer--dark": "_drawer--dark_zzxde_140"
+};
+export {
+  styles as default,
+  drawer,
+  drawer__close,
+  drawer__container,
+  drawer__content,
+  drawer__description,
+  drawer__heading,
+  drawer__title
+};
+//# sourceMappingURL=Drawer.module.css.js.map

package/dist/components/Drawer/Drawer.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Drawer/Drawer.types.d.ts

@@ -0,0 +1,63 @@
+import { ComponentPropsWithRef, ReactNode } from 'react';
+export type DrawerSize = 'small' | 'medium' | 'large';
+export type DrawerHeaderStyle = 'light' | 'dark';
+export type DrawerSide = 'left' | 'right';
+type DrawerAccessibleName = {
+    readonly title: ReactNode;
+    readonly 'aria-label'?: string;
+    readonly 'aria-labelledby'?: never;
+} | {
+    readonly title: ReactNode;
+    readonly 'aria-label'?: never;
+    readonly 'aria-labelledby': string;
+} | {
+    readonly title: ReactNode;
+    readonly 'aria-label'?: never;
+    readonly 'aria-labelledby'?: never;
+} | {
+    readonly title?: never;
+    readonly 'aria-label': string;
+    readonly 'aria-labelledby'?: never;
+} | {
+    readonly title?: never;
+    readonly 'aria-label'?: never;
+    readonly 'aria-labelledby': string;
+};
+export type DrawerProps = Omit<ComponentPropsWithRef<'dialog'>, 'children' | 'open' | 'onClose' | 'onCancel' | 'aria-label' | 'aria-labelledby' | 'title'> & DrawerAccessibleName & {
+    /**
+     * Controls whether the drawer is open. The drawer unmounts after its close animation unless
+     * `keepMounted` is true.
+     * `undefined` is treated as closed. @default false
+     */
+    readonly open?: boolean;
+    /**
+     * Keeps the closed drawer and its descendants mounted, preserving their React state and effects.
+     * @default false
+     */
+    readonly keepMounted?: boolean;
+    /** Called with false when the user requests closing. Opening and closing are controlled by `open`. */
+    readonly onOpenChange?: (open: boolean) => void;
+    /** Supporting text displayed below the heading. */
+    readonly description?: ReactNode;
+    /** Content displayed in the drawer body. */
+    readonly children: ReactNode;
+    /** Optional content displayed in the bottom action bar. */
+    readonly footer?: ReactNode;
+    /** Drawer width. */
+    readonly size?: DrawerSize;
+    /** Visual style of the header and close button. */
+    readonly headerStyle?: DrawerHeaderStyle;
+    /** Side from which the drawer enters. @default 'right' */
+    readonly side?: DrawerSide;
+    /** Keeps the header fixed while the body scrolls. @default false */
+    readonly fixedTitle?: boolean;
+    /**
+     * Disables the close button, backdrop click, and Escape key. Provide an action that sets
+     * `open` to false when this is enabled. @default false
+     */
+    readonly disableCloseOptions?: boolean;
+    /** Accessible label for the close button. @default 'Sulje dialogi' */
+    readonly closeLabel?: string;
+};
+export {};
+//# sourceMappingURL=Drawer.types.d.ts.map

package/dist/components/Drawer/Drawer.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.types.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,CAAC;AACjD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;AAE1C,KAAK,oBAAoB,GACnB;IACI,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IAC/B,QAAQ,CAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC;CACtC,GACD;IACI,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC;IAC9B,QAAQ,CAAC,iBAAiB,EAAE,MAAM,CAAC;CACtC,GACD;IACI,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC;IAC9B,QAAQ,CAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC;CACtC,GACD;IACI,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,iBAAiB,CAAC,EAAE,KAAK,CAAC;CACtC,GACD;IACI,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC;IACvB,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC;IAC9B,QAAQ,CAAC,iBAAiB,EAAE,MAAM,CAAC;CACtC,CAAC;AAER,MAAM,MAAM,WAAW,GAAG,IAAI,CAC1B,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY,GAAG,iBAAiB,GAAG,OAAO,CAC5F,GACG,oBAAoB,GAAG;IACnB;;;;OAIG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,sGAAsG;IACtG,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,mDAAmD;IACnD,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,4CAA4C;IAC5C,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B,2DAA2D;IAC3D,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAC5B,oBAAoB;IACpB,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAC3B,mDAAmD;IACnD,QAAQ,CAAC,WAAW,CAAC,EAAE,iBAAiB,CAAC;IACzC,0DAA0D;IAC1D,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAC3B,oEAAoE;IACpE,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IACvC,sEAAsE;IACtE,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;CAChC,CAAC"}

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

@@ -0,0 +1,3 @@
+export { Drawer } from './Drawer';
+export type { DrawerHeaderStyle, DrawerProps, DrawerSide, DrawerSize } from './Drawer.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Drawer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC"}