@blockle/blocks-react 2.4.2 → 2.4.4

package/README.md

@@ -1,25 +1 @@
-# @blockle/blocks-hooks
-
-A collection of React hooks.
-
-## Installation
-
-```bash
-npm install @blockle/hooks
-```
-
-## Usage
-
-### useIsomorphicLayoutEffect
-
-```tsx
-import { useIsomorphicLayoutEffect } from '@blockle/hooks';
-
-export const Component = () => {
-  useIsomorphicLayoutEffect(() => {
-    // Your effect
-  }, []);
-  
-  return <div>Component</div>;
-};
-```
+# @blockle/blocks-react

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

@@ -0,0 +1,10 @@
+import { HTMLElementProps } from '@blockle/blocks-core';
+import * as styles from './drawer.css.js';
+export type DrawerProps = {
+    open: boolean;
+    onRequestClose: () => void;
+    placement?: keyof typeof styles.placement;
+    children?: React.ReactNode;
+} & HTMLElementProps<HTMLDialogElement>;
+export declare const Drawer: React.FC<DrawerProps>;
+//# sourceMappingURL=Drawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,gBAAgB,EAEtB,MAAM,sBAAsB,CAAC;AAQ9B,OAAO,KAAK,MAAM,MAAM,iBAAiB,CAAC;AAE1C,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,SAAS,CAAC;IAC1C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,GAAG,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;AAExC,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAuFxC,CAAC"}

package/dist/components/overlay/Drawer/Drawer.js

@@ -0,0 +1,78 @@
+import { jsx } from "react/jsx-runtime";
+import { hasAnimationDuration, classnames } from "@blockle/blocks-core";
+import { useRef, useState, useCallback } from "react";
+import { useClickOutside } from "../../../hooks/useClickOutside/useClickOutside.js";
+import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
+import { useIsomorphicLayoutEffect } from "../../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
+import { useKeyboard } from "../../../hooks/useKeyboard/useKeyboard.js";
+import { usePreventBodyScroll } from "../../../hooks/usePreventBodyScroll/usePreventBodyScroll.js";
+import { drawer, placement } from "./drawer.css.js";
+const Drawer = ({
+  open,
+  onRequestClose,
+  placement: placement$1 = "left",
+  children,
+  ...restProps
+}) => {
+  const dialogRef = useRef(null);
+  const [visible, setVisible] = useState(open);
+  const rootClassName = useComponentStyles("drawer", {
+    root: true,
+    variants: { placement: placement$1 }
+  });
+  const dataOpen = typeof window === "undefined" && open ? true : void 0;
+  usePreventBodyScroll(open);
+  useClickOutside(dialogRef, onRequestClose, { enabled: open });
+  const onEscape = useCallback(
+    (event) => {
+      event.preventDefault();
+      onRequestClose();
+    },
+    [onRequestClose]
+  );
+  useKeyboard("Escape", onEscape, { enabled: open });
+  useIsomorphicLayoutEffect(() => {
+    if (open && visible) {
+      if (!dialogRef.current || !dialogRef.current.showModal) {
+        return;
+      }
+      dialogRef.current.showModal();
+    } else if (open) {
+      setVisible(true);
+    } else {
+      if (!hasAnimationDuration(dialogRef.current)) {
+        setVisible(false);
+      }
+      if (dialogRef.current?.close) {
+        dialogRef.current.close();
+      }
+    }
+  }, [open, visible]);
+  const onAnimationEnd = useCallback(() => {
+    if (!open) {
+      setVisible(false);
+    }
+  }, [open]);
+  if (!visible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "dialog",
+    {
+      ref: dialogRef,
+      open: dataOpen,
+      className: classnames(
+        drawer,
+        placement[placement$1],
+        rootClassName
+      ),
+      onAnimationEnd,
+      onTransitionEnd: onAnimationEnd,
+      ...restProps,
+      children
+    }
+  );
+};
+export {
+  Drawer
+};

package/dist/components/overlay/Drawer/drawer.css.d.ts

@@ -0,0 +1,8 @@
+export declare const drawer: string;
+export declare const placement: {
+    left: string;
+    right: string;
+    top: string;
+    bottom: string;
+};
+//# sourceMappingURL=drawer.css.d.ts.map

package/dist/components/overlay/Drawer/drawer.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.css.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Drawer/drawer.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,QAmBjB,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;CA2CrB,CAAC"}

package/dist/components/overlay/Drawer/drawer.css.js

@@ -0,0 +1,73 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { layers } from "@blockle/blocks-core";
+import { style } from "@vanilla-extract/css";
+setFileScope("src/components/overlay/Drawer/drawer.css.ts", "@blockle/blocks-react");
+const drawer = style({
+  "@layer": {
+    [layers.molecule]: {
+      position: "fixed",
+      border: "none",
+      margin: 0,
+      // unset default dialog styles
+      maxHeight: "100%",
+      maxWidth: "100%",
+      left: "unset",
+      top: "unset",
+      overflow: "auto",
+      "::backdrop": {
+        // Remove pointer event to prevent clicks on the backdrop
+        // and make it easier to check if the click was outside the dialog
+        pointerEvents: "none"
+      }
+    }
+  }
+});
+const placement = {
+  left: style({
+    "@layer": {
+      [layers.molecule]: {
+        top: 0,
+        bottom: 0,
+        left: 0,
+        height: "100%",
+        width: "300px"
+      }
+    }
+  }),
+  right: style({
+    "@layer": {
+      [layers.molecule]: {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        height: "100%",
+        width: "300px"
+      }
+    }
+  }),
+  top: style({
+    "@layer": {
+      [layers.molecule]: {
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "300px"
+      }
+    }
+  }),
+  bottom: style({
+    "@layer": {
+      [layers.molecule]: {
+        bottom: 0,
+        left: 0,
+        width: "100%",
+        height: "300px"
+      }
+    }
+  })
+};
+endFileScope();
+export {
+  drawer,
+  placement
+};

package/dist/index.d.ts

@@ -23,6 +23,7 @@ export { Inline, type InlineProps } from './components/layout/Inline/Inline.js';
 export { Stack, type StackProps } from './components/layout/Stack/Stack.js';
 export { Link, type LinkProps } from './components/navigation/Link/Link.js';
 export { Dialog, type DialogProps, } from './components/overlay/Dialog/Dialog.js';
+export { Drawer, type DrawerProps, } from './components/overlay/Drawer/Drawer.js';
 export { Popover, type PopoverProps, } from './components/overlay/Popover/Popover.js';
 export { Portal, type PortalProps, } from './components/overlay/Portal/Portal.js';
 export { Tooltip, type TooltipProps, } from './components/overlay/Tooltip/Tooltip.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -23,6 +23,7 @@ import { Inline } from "./components/layout/Inline/Inline.js";
 import { Stack } from "./components/layout/Stack/Stack.js";
 import { Link } from "./components/navigation/Link/Link.js";
 import { Dialog } from "./components/overlay/Dialog/Dialog.js";
+import { Drawer } from "./components/overlay/Drawer/Drawer.js";
 import { Popover } from "./components/overlay/Popover/Popover.js";
 import { Portal } from "./components/overlay/Portal/Portal.js";
 import { Tooltip } from "./components/overlay/Tooltip/Tooltip.js";
@@ -43,6 +44,7 @@ export {
   Checkbox,
   Dialog,
   Divider,
+  Drawer,
   Heading,
   IconMask,
   Inline,

package/dist/testUtils/testTheme.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testTheme.css.d.ts","sourceRoot":"","sources":["../../src/testUtils/testTheme.css.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,YAAY,KA8FvB,CAAC"}
+{"version":3,"file":"testTheme.css.d.ts","sourceRoot":"","sources":["../../src/testUtils/testTheme.css.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,YAAY,KA+FvB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blockle/blocks-react",
-  "version": "2.4.2",
+  "version": "2.4.4",
   "description": "React hooks and components for Blockle",
   "type": "module",
   "exports": {
@@ -22,7 +22,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+ssh://git@github.com/Blockle/blocks.git"
+    "url": "git+https://github.com/Blockle/blocks.git"
   },
   "author": "Niek Saarberg <n.saarberg@gmail.com>",
   "license": "MIT",
@@ -31,13 +31,17 @@
   },
   "homepage": "https://github.com/Blockle/blocks#readme",
   "dependencies": {
-    "@vanilla-extract/css": "^1.17.5"
+    "@vanilla-extract/css": "^1.18.0"
   },
   "peerDependencies": {
     "@blockle/blocks-core": ">=1.2.x",
     "@blockle/blocks-react-slot": ">=1.1.x",
-    "@vanilla-extract/css": "^1.17.5",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "@vanilla-extract/css": "^1.18.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
   }
 }