@blockle/blocks 0.19.1 → 0.20.0-alpha1.0

package/dist/hooks/useClickOutside/useClickOutside.cjs

@@ -0,0 +1,24 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
+  react.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const listener = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        onClickOutside();
+      }
+    };
+    const rafId = requestAnimationFrame(() => {
+      document.addEventListener("click", listener);
+    });
+    return () => {
+      cancelAnimationFrame(rafId);
+      document.removeEventListener("click", listener);
+    };
+  }, [ref, onClickOutside, enabled]);
+};
+exports.useClickOutside = useClickOutside;

package/dist/hooks/useClickOutside/useClickOutside.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+type UseClickOutsideOptions = {
+    enabled?: boolean;
+};
+export declare const useClickOutside: (ref: React.RefObject<HTMLElement | null>, onClickOutside: () => void, { enabled }?: UseClickOutsideOptions) => void;
+export {};

package/dist/hooks/useClickOutside/useClickOutside.js

@@ -0,0 +1,24 @@
+"use client";
+import { useEffect } from "react";
+const useClickOutside = (ref, onClickOutside, { enabled = true } = {}) => {
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const listener = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        onClickOutside();
+      }
+    };
+    const rafId = requestAnimationFrame(() => {
+      document.addEventListener("click", listener);
+    });
+    return () => {
+      cancelAnimationFrame(rafId);
+      document.removeEventListener("click", listener);
+    };
+  }, [ref, onClickOutside, enabled]);
+};
+export {
+  useClickOutside
+};

package/dist/hooks/useControlledValue/useControlledValue.cjs

@@ -0,0 +1,33 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+function useControlledValue({
+  defaultValue,
+  value,
+  onChange,
+  transformValue
+}) {
+  const [internValue, setInternValue] = react.useState(defaultValue);
+  const currentValue = (onChange ? value : internValue) ?? defaultValue;
+  const setValue = react.useCallback(
+    function setValue2(value2) {
+      const nextValue = transformValue ? transformValue(value2) : value2;
+      if (onChange) {
+        onChange(nextValue);
+      } else {
+        setInternValue(nextValue);
+      }
+    },
+    [onChange, transformValue]
+  );
+  if (process.env.NODE_ENV !== "production") {
+    react.useEffect(() => {
+      if (onChange && value === void 0) {
+        console.error("Slider is in controlled mode but no value is provided");
+      }
+    }, []);
+  }
+  return [currentValue, setValue];
+}
+exports.useControlledValue = useControlledValue;

package/dist/hooks/useControlledValue/useControlledValue.d.ts

@@ -0,0 +1,8 @@
+type ControlledValue<T> = {
+    value?: T;
+    defaultValue: T;
+    onChange?: (value: T) => void;
+    transformValue?: (value: T) => T;
+};
+export declare function useControlledValue<T>({ defaultValue, value, onChange, transformValue, }: ControlledValue<T>): [T, (value: T) => void];
+export {};

package/dist/hooks/useControlledValue/useControlledValue.js

@@ -0,0 +1,33 @@
+"use client";
+import { useState, useCallback, useEffect } from "react";
+function useControlledValue({
+  defaultValue,
+  value,
+  onChange,
+  transformValue
+}) {
+  const [internValue, setInternValue] = useState(defaultValue);
+  const currentValue = (onChange ? value : internValue) ?? defaultValue;
+  const setValue = useCallback(
+    function setValue2(value2) {
+      const nextValue = transformValue ? transformValue(value2) : value2;
+      if (onChange) {
+        onChange(nextValue);
+      } else {
+        setInternValue(nextValue);
+      }
+    },
+    [onChange, transformValue]
+  );
+  if (process.env.NODE_ENV !== "production") {
+    useEffect(() => {
+      if (onChange && value === void 0) {
+        console.error("Slider is in controlled mode but no value is provided");
+      }
+    }, []);
+  }
+  return [currentValue, setValue];
+}
+export {
+  useControlledValue
+};

package/dist/hooks/useFocusLock/index.d.ts

@@ -0,0 +1 @@
+export { useFocusLock } from './useFocusLock';

package/dist/hooks/useFocusLock/useFocusLock.d.ts

@@ -0,0 +1,6 @@
+type UseFocusLock = {
+    ref: React.RefObject<HTMLElement>;
+    active: boolean;
+};
+export declare const useFocusLock: ({ ref, active }: UseFocusLock) => void;
+export {};

package/dist/hooks/useIsomorphicLayoutEffect/index.d.ts

@@ -0,0 +1 @@
+export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';

package/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs

@@ -0,0 +1,6 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? react.useEffect : react.useLayoutEffect;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;

package/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,5 @@
+import { useEffect } from 'react';
+/**
+ * useLayoutEffect is not avaible on server side use useEffect instead.
+ */
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js

@@ -0,0 +1,6 @@
+"use client";
+import { useEffect, useLayoutEffect } from "react";
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+export {
+  useIsomorphicLayoutEffect
+};

package/dist/hooks/useKeyboard/index.d.ts

@@ -0,0 +1 @@
+export { useKeyboard } from './useKeyboard';

package/dist/hooks/useKeyboard/useKeyboard.cjs

@@ -0,0 +1,21 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const useKeyboard = (key, callback, { enabled = true, type = "keydown" } = {}) => {
+  react.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    function handleKeyDown(event) {
+      if (event.key === key) {
+        callback(event);
+      }
+    }
+    document.addEventListener(type, handleKeyDown);
+    return () => {
+      document.removeEventListener(type, handleKeyDown);
+    };
+  }, [callback, enabled, key, type]);
+};
+exports.useKeyboard = useKeyboard;

package/dist/hooks/useKeyboard/useKeyboard.d.ts

@@ -0,0 +1,6 @@
+type UseKeyboardOptions = {
+    enabled?: boolean;
+    type?: 'keydown' | 'keyup';
+};
+export declare const useKeyboard: (key: KeyboardEvent["key"], callback: (event: KeyboardEvent) => void, { enabled, type }?: UseKeyboardOptions) => void;
+export {};

package/dist/hooks/useKeyboard/useKeyboard.js

@@ -0,0 +1,21 @@
+"use client";
+import { useEffect } from "react";
+const useKeyboard = (key, callback, { enabled = true, type = "keydown" } = {}) => {
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    function handleKeyDown(event) {
+      if (event.key === key) {
+        callback(event);
+      }
+    }
+    document.addEventListener(type, handleKeyDown);
+    return () => {
+      document.removeEventListener(type, handleKeyDown);
+    };
+  }, [callback, enabled, key, type]);
+};
+export {
+  useKeyboard
+};

package/dist/hooks/useLayer/index.d.ts

@@ -0,0 +1 @@
+export { useLayer } from './useLayer';

package/dist/hooks/useLayer/useLayer.cjs

@@ -0,0 +1,27 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const useLayer = () => {
+  const layerRef = react.useRef(null);
+  react.useEffect(
+    () => () => {
+      if (layerRef.current) {
+        layerRef.current.remove();
+        layerRef.current = null;
+      }
+    },
+    []
+  );
+  function getLayer() {
+    if (!layerRef.current) {
+      const div = document.createElement("div");
+      div.dataset.layer = "blocks";
+      layerRef.current = div;
+      document.body.append(layerRef.current);
+    }
+    return layerRef.current;
+  }
+  return getLayer;
+};
+exports.useLayer = useLayer;

package/dist/hooks/useLayer/useLayer.d.ts

@@ -0,0 +1 @@
+export declare const useLayer: () => (() => HTMLDivElement);

package/dist/hooks/useLayer/useLayer.js

@@ -0,0 +1,27 @@
+"use client";
+import { useRef, useEffect } from "react";
+const useLayer = () => {
+  const layerRef = useRef(null);
+  useEffect(
+    () => () => {
+      if (layerRef.current) {
+        layerRef.current.remove();
+        layerRef.current = null;
+      }
+    },
+    []
+  );
+  function getLayer() {
+    if (!layerRef.current) {
+      const div = document.createElement("div");
+      div.dataset.layer = "blocks";
+      layerRef.current = div;
+      document.body.append(layerRef.current);
+    }
+    return layerRef.current;
+  }
+  return getLayer;
+};
+export {
+  useLayer
+};

package/dist/hooks/usePreventBodyScroll/index.d.ts

@@ -0,0 +1 @@
+export { usePreventBodyScroll } from './usePreventBodyScroll';

package/dist/hooks/usePreventBodyScroll/usePreventBodyScroll.cjs

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const useIsomorphicLayoutEffect = require("../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.cjs");
+const usePreventBodyScroll = (enabled = true) => {
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const prevOverflow = document.body.style.getPropertyValue("overflow");
+    const prevScrollTop = document.documentElement.scrollTop;
+    if (document.body.scrollHeight > window.innerHeight) {
+      document.body.style.position = "fixed";
+      document.body.style.overflow = "hidden";
+      document.body.style.overflowY = "scroll";
+      document.body.style.width = "100%";
+      document.body.style.top = `-${prevScrollTop}px`;
+    } else {
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.body.style.position = "";
+      document.body.style.overflow = prevOverflow;
+      document.body.style.overflowY = "";
+      document.body.style.width = "";
+      document.body.style.top = "";
+      document.documentElement.scrollTop = prevScrollTop;
+    };
+  }, [enabled]);
+};
+exports.usePreventBodyScroll = usePreventBodyScroll;

package/dist/hooks/usePreventBodyScroll/usePreventBodyScroll.d.ts

@@ -0,0 +1 @@
+export declare const usePreventBodyScroll: (enabled?: boolean) => void;

package/dist/hooks/usePreventBodyScroll/usePreventBodyScroll.js

@@ -0,0 +1,30 @@
+import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
+const usePreventBodyScroll = (enabled = true) => {
+  useIsomorphicLayoutEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const prevOverflow = document.body.style.getPropertyValue("overflow");
+    const prevScrollTop = document.documentElement.scrollTop;
+    if (document.body.scrollHeight > window.innerHeight) {
+      document.body.style.position = "fixed";
+      document.body.style.overflow = "hidden";
+      document.body.style.overflowY = "scroll";
+      document.body.style.width = "100%";
+      document.body.style.top = `-${prevScrollTop}px`;
+    } else {
+      document.body.style.overflow = "hidden";
+    }
+    return () => {
+      document.body.style.position = "";
+      document.body.style.overflow = prevOverflow;
+      document.body.style.overflowY = "";
+      document.body.style.width = "";
+      document.body.style.top = "";
+      document.documentElement.scrollTop = prevScrollTop;
+    };
+  }, [enabled]);
+};
+export {
+  usePreventBodyScroll
+};

package/dist/hooks/useRestoreFocus/index.d.ts

@@ -0,0 +1 @@
+export { useRestoreFocus } from './useRestoreFocus';

package/dist/hooks/useRestoreFocus/useRestoreFocus.cjs

@@ -0,0 +1,19 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const isBrowser = typeof window !== "undefined";
+const useRestoreFocus = (active) => {
+  const target = react.useRef(null);
+  if (isBrowser && active && !target.current) {
+    target.current = document.activeElement;
+  }
+  react.useEffect(() => {
+    var _a;
+    if (target.current && !active && target.current instanceof HTMLElement) {
+      (_a = target.current) == null ? void 0 : _a.focus();
+      target.current = null;
+    }
+  }, [active]);
+};
+exports.useRestoreFocus = useRestoreFocus;

package/dist/hooks/useRestoreFocus/useRestoreFocus.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Restores focus to the previously focused element
+ */
+export declare const useRestoreFocus: (active: boolean) => void;

package/dist/hooks/useRestoreFocus/useRestoreFocus.js

@@ -0,0 +1,19 @@
+"use client";
+import { useRef, useEffect } from "react";
+const isBrowser = typeof window !== "undefined";
+const useRestoreFocus = (active) => {
+  const target = useRef(null);
+  if (isBrowser && active && !target.current) {
+    target.current = document.activeElement;
+  }
+  useEffect(() => {
+    var _a;
+    if (target.current && !active && target.current instanceof HTMLElement) {
+      (_a = target.current) == null ? void 0 : _a.focus();
+      target.current = null;
+    }
+  }, [active]);
+};
+export {
+  useRestoreFocus
+};

package/dist/hooks/useRootAriaHidden/index.d.ts

@@ -0,0 +1 @@
+export { useRootAriaHidden } from './useRootAriaHidden';

package/dist/hooks/useRootAriaHidden/useRootAriaHidden.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const context = require("../../components/other/BlocksProvider/context.cjs");
+const useRootAriaHidden = (hidden) => {
+  const context$1 = react.useContext(context.BlocksProviderContext);
+  if (!context$1) {
+    throw new Error("useRootAriaHidden must be used within a BlocksProvider");
+  }
+  context$1.setAriaHidden(hidden);
+};
+exports.useRootAriaHidden = useRootAriaHidden;

package/dist/hooks/useRootAriaHidden/useRootAriaHidden.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Sets the `aria-hidden` attribute on this provider's root element.
+ *
+ * Usefull for modals and other overlays that should hide the rest of the page from screen readers
+ * and are rendered inside their own `BlocksProvider`.
+ */
+export declare const useRootAriaHidden: (hidden: boolean) => void;

package/dist/hooks/useRootAriaHidden/useRootAriaHidden.js

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { BlocksProviderContext } from "../../components/other/BlocksProvider/context.js";
+const useRootAriaHidden = (hidden) => {
+  const context = useContext(BlocksProviderContext);
+  if (!context) {
+    throw new Error("useRootAriaHidden must be used within a BlocksProvider");
+  }
+  context.setAriaHidden(hidden);
+};
+export {
+  useRootAriaHidden
+};

package/dist/hooks/useVisibilityState/index.d.ts

@@ -0,0 +1 @@
+export { useVisibilityState } from './useVisibilityState';

package/dist/hooks/useVisibilityState/useVisibilityState.cjs

@@ -0,0 +1,17 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const useVisibilityState = (open) => {
+  const [visible, setVisible] = react.useState(open);
+  const hide = react.useCallback(() => {
+    setVisible(false);
+  }, []);
+  react.useEffect(() => {
+    if (open) {
+      setVisible(true);
+    }
+  }, [open]);
+  return [visible, hide];
+};
+exports.useVisibilityState = useVisibilityState;

package/dist/hooks/useVisibilityState/useVisibilityState.d.ts

@@ -0,0 +1,3 @@
+type UseVisibilityState = [visible: boolean, hide: () => void];
+export declare const useVisibilityState: (open: boolean) => UseVisibilityState;
+export {};

package/dist/hooks/useVisibilityState/useVisibilityState.js

@@ -0,0 +1,17 @@
+"use client";
+import { useState, useCallback, useEffect } from "react";
+const useVisibilityState = (open) => {
+  const [visible, setVisible] = useState(open);
+  const hide = useCallback(() => {
+    setVisible(false);
+  }, []);
+  useEffect(() => {
+    if (open) {
+      setVisible(true);
+    }
+  }, [open]);
+  return [visible, hide];
+};
+export {
+  useVisibilityState
+};