@basic-ui/material 1.0.0-alpha.42 → 1.0.0-alpha.43

package/src/Snackbar/Stack.tsx

@@ -1,239 +1,239 @@
-import {
-  useMemo,
-  useLayoutEffect,
-  createContext,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
-import type { MutableRefObject, ReactElement, FC, ReactNode } from 'react';
-
-export type StackPlacement =
-  | 'top-right'
-  | 'top-center'
-  | 'top-left'
-  | 'bottom-right'
-  | 'bottom-center'
-  | 'bottom-left';
-
-// StackItemContext Component
-export interface StackItemContextProps {
-  posY: number | undefined;
-  isExiting: boolean;
-  onSetHeight(height: number): void;
-  onRemoveItem(): void;
-  placement: StackPlacement;
-}
-
-const StackItemContext = createContext<StackItemContextProps | null>(null);
-StackItemContext.displayName = 'StackItemContext';
-
-interface StackItemProps {
-  ref: MutableRefObject<HTMLElement | null>;
-  openTimeoutInMilliseconds?: number;
-  closeTimeoutInMilliseconds?: number;
-}
-
-export function useStackItem({
-  ref,
-  closeTimeoutInMilliseconds = 110,
-}: StackItemProps) {
-  const context = useContext(StackItemContext);
-  if (!context) {
-    return null;
-  }
-  const { onSetHeight, onRemoveItem, posY, placement, isExiting } = context;
-  /* eslint-disable react-hooks/rules-of-hooks */
-  const [state, setState] = useState<'entering' | 'entered' | 'exiting'>(
-    'entering'
-  );
-
-  function onClose() {
-    setState('exiting');
-  }
-
-  useLayoutEffect(() => {
-    const height = ref.current?.getBoundingClientRect().height ?? 0;
-    onSetHeight(height);
-
-    if (isExiting) {
-      onClose();
-    }
-  });
-
-  useEffect(() => {
-    if (posY !== undefined && state === 'entering') {
-      setState('entered');
-    }
-  }, [state, posY]);
-
-  useLayoutEffect(() => {
-    if (state === 'exiting') {
-      const handle = setTimeout(() => {
-        onRemoveItem();
-      }, closeTimeoutInMilliseconds);
-
-      return () => {
-        clearTimeout(handle);
-      };
-    }
-  }, [state]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  return {
-    translateY: posY,
-    state,
-    onClose,
-    placement,
-  };
-  /* eslint-enable react-hooks/rules-of-hooks */
-}
-
-function StackContent({
-  gap = 0,
-  placement,
-  maxSize,
-  onAddItemRef,
-}: {
-  gap: number;
-  placement: StackPlacement;
-  maxSize: number;
-  onAddItemRef: MutableRefObject<((element: ReactElement) => void) | null>;
-}) {
-  const id = useRef(0);
-  const items = useRef<StackItem[]>([]);
-  const [, setCounter] = useState(false);
-  function rerender() {
-    setCounter((v) => !v);
-  }
-
-  useEffect(() => {
-    onAddItemRef.current = (element: ReactElement) => {
-      const itemId = String(++id.current);
-
-      items.current.push({
-        id: itemId,
-        height: undefined,
-        element,
-        isExiting: false,
-      });
-      // Stack > maxSize? Close items
-      if (items.current.length > maxSize) {
-        for (let i = 0; i < items.current.length; i++) {
-          if (!items.current[i].isExiting) {
-            items.current[i].isExiting = true;
-            break;
-          }
-        }
-      }
-      rerender();
-    };
-    return () => {
-      onAddItemRef.current = null;
-    };
-  }, [maxSize]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  function setHeightById(id: string, height: number) {
-    const item = items.current.find(({ id: itemId }) => itemId === id);
-    if (item && item.height !== height) {
-      item.height = height;
-      rerender();
-    }
-  }
-
-  function removeItemById(id: string) {
-    const previousLength = items.current.length;
-    items.current = items.current.filter(({ id: itemId }) => itemId !== id);
-    if (items.current.length !== previousLength) {
-      rerender();
-    }
-  }
-
-  let y = 0;
-  return (
-    <div data-stack-root="">
-      {Array.from(items.current).map((item) => {
-        let posY: number | undefined = undefined;
-        const height = item.height;
-        if (height) {
-          posY = y;
-          y += height + gap;
-        }
-
-        return (
-          <StackItemContext.Provider
-            key={item.id}
-            value={{
-              isExiting: item.isExiting,
-              posY,
-              onSetHeight: (height: number) => {
-                if (height === item.height) {
-                  return;
-                }
-                setHeightById(item.id, height);
-              },
-              onRemoveItem: () => removeItemById(item.id),
-              placement,
-            }}
-          >
-            {item.element}
-          </StackItemContext.Provider>
-        );
-      })}
-    </div>
-  );
-}
-
-export interface StackContextProps {
-  addItem: (element: ReactElement) => void;
-}
-
-const StackContext = createContext<StackContextProps | null>(null);
-
-interface StackItem {
-  id: string;
-  element: ReactElement;
-  height: number | undefined;
-  isExiting: boolean;
-}
-
-export const StackProvider: FC<{
-  children?: ReactNode | ReactNode[];
-  gap?: number;
-  placement?:
-    | 'top-right'
-    | 'top-center'
-    | 'top-left'
-    | 'bottom-right'
-    | 'bottom-center'
-    | 'bottom-left';
-  maxSize?: number;
-}> = ({ children, gap = 8, placement = 'top-right', maxSize = 3 }) => {
-  const onAddItemRef = useRef<(element: ReactElement) => void>(null);
-  const value = useMemo(
-    () => ({
-      addItem: (element: ReactElement) => onAddItemRef.current?.(element),
-    }),
-    []
-  );
-
-  return (
-    <StackContext.Provider value={value}>
-      {children}
-      <StackContent
-        gap={gap}
-        placement={placement}
-        maxSize={maxSize}
-        onAddItemRef={onAddItemRef}
-      />
-    </StackContext.Provider>
-  );
-};
-
-export function useStack(): StackContextProps {
-  const ctx = useContext(StackContext);
-  if (!ctx) {
-    throw new Error('useStack must be used within a StackContext.Provider');
-  }
-  return ctx;
-}
+import {
+  useMemo,
+  useLayoutEffect,
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import type { MutableRefObject, ReactElement, FC, ReactNode } from 'react';
+
+export type StackPlacement =
+  | 'top-right'
+  | 'top-center'
+  | 'top-left'
+  | 'bottom-right'
+  | 'bottom-center'
+  | 'bottom-left';
+
+// StackItemContext Component
+export interface StackItemContextProps {
+  posY: number | undefined;
+  isExiting: boolean;
+  onSetHeight(height: number): void;
+  onRemoveItem(): void;
+  placement: StackPlacement;
+}
+
+const StackItemContext = createContext<StackItemContextProps | null>(null);
+StackItemContext.displayName = 'StackItemContext';
+
+interface StackItemProps {
+  ref: MutableRefObject<HTMLElement | null>;
+  openTimeoutInMilliseconds?: number;
+  closeTimeoutInMilliseconds?: number;
+}
+
+export function useStackItem({
+  ref,
+  closeTimeoutInMilliseconds = 110,
+}: StackItemProps) {
+  const context = useContext(StackItemContext);
+  if (!context) {
+    return null;
+  }
+  const { onSetHeight, onRemoveItem, posY, placement, isExiting } = context;
+  /* eslint-disable react-hooks/rules-of-hooks */
+  const [state, setState] = useState<'entering' | 'entered' | 'exiting'>(
+    'entering'
+  );
+
+  function onClose() {
+    setState('exiting');
+  }
+
+  useLayoutEffect(() => {
+    const height = ref.current?.getBoundingClientRect().height ?? 0;
+    onSetHeight(height);
+
+    if (isExiting) {
+      onClose();
+    }
+  });
+
+  useEffect(() => {
+    if (posY !== undefined && state === 'entering') {
+      setState('entered');
+    }
+  }, [state, posY]);
+
+  useLayoutEffect(() => {
+    if (state === 'exiting') {
+      const handle = setTimeout(() => {
+        onRemoveItem();
+      }, closeTimeoutInMilliseconds);
+
+      return () => {
+        clearTimeout(handle);
+      };
+    }
+  }, [state]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return {
+    translateY: posY,
+    state,
+    onClose,
+    placement,
+  };
+  /* eslint-enable react-hooks/rules-of-hooks */
+}
+
+function StackContent({
+  gap = 0,
+  placement,
+  maxSize,
+  onAddItemRef,
+}: {
+  gap: number;
+  placement: StackPlacement;
+  maxSize: number;
+  onAddItemRef: MutableRefObject<((element: ReactElement) => void) | null>;
+}) {
+  const id = useRef(0);
+  const items = useRef<StackItem[]>([]);
+  const [, setCounter] = useState(false);
+  function rerender() {
+    setCounter((v) => !v);
+  }
+
+  useEffect(() => {
+    onAddItemRef.current = (element: ReactElement) => {
+      const itemId = String(++id.current);
+
+      items.current.push({
+        id: itemId,
+        height: undefined,
+        element,
+        isExiting: false,
+      });
+      // Stack > maxSize? Close items
+      if (items.current.length > maxSize) {
+        for (let i = 0; i < items.current.length; i++) {
+          if (!items.current[i].isExiting) {
+            items.current[i].isExiting = true;
+            break;
+          }
+        }
+      }
+      rerender();
+    };
+    return () => {
+      onAddItemRef.current = null;
+    };
+  }, [maxSize]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  function setHeightById(id: string, height: number) {
+    const item = items.current.find(({ id: itemId }) => itemId === id);
+    if (item && item.height !== height) {
+      item.height = height;
+      rerender();
+    }
+  }
+
+  function removeItemById(id: string) {
+    const previousLength = items.current.length;
+    items.current = items.current.filter(({ id: itemId }) => itemId !== id);
+    if (items.current.length !== previousLength) {
+      rerender();
+    }
+  }
+
+  let y = 0;
+  return (
+    <div data-stack-root="">
+      {Array.from(items.current).map((item) => {
+        let posY: number | undefined = undefined;
+        const height = item.height;
+        if (height) {
+          posY = y;
+          y += height + gap;
+        }
+
+        return (
+          <StackItemContext.Provider
+            key={item.id}
+            value={{
+              isExiting: item.isExiting,
+              posY,
+              onSetHeight: (height: number) => {
+                if (height === item.height) {
+                  return;
+                }
+                setHeightById(item.id, height);
+              },
+              onRemoveItem: () => removeItemById(item.id),
+              placement,
+            }}
+          >
+            {item.element}
+          </StackItemContext.Provider>
+        );
+      })}
+    </div>
+  );
+}
+
+export interface StackContextProps {
+  addItem: (element: ReactElement) => void;
+}
+
+const StackContext = createContext<StackContextProps | null>(null);
+
+interface StackItem {
+  id: string;
+  element: ReactElement;
+  height: number | undefined;
+  isExiting: boolean;
+}
+
+export const StackProvider: FC<{
+  children?: ReactNode | ReactNode[];
+  gap?: number;
+  placement?:
+    | 'top-right'
+    | 'top-center'
+    | 'top-left'
+    | 'bottom-right'
+    | 'bottom-center'
+    | 'bottom-left';
+  maxSize?: number;
+}> = ({ children, gap = 8, placement = 'top-right', maxSize = 3 }) => {
+  const onAddItemRef = useRef<(element: ReactElement) => void>(null);
+  const value = useMemo(
+    () => ({
+      addItem: (element: ReactElement) => onAddItemRef.current?.(element),
+    }),
+    []
+  );
+
+  return (
+    <StackContext.Provider value={value}>
+      {children}
+      <StackContent
+        gap={gap}
+        placement={placement}
+        maxSize={maxSize}
+        onAddItemRef={onAddItemRef}
+      />
+    </StackContext.Provider>
+  );
+};
+
+export function useStack(): StackContextProps {
+  const ctx = useContext(StackContext);
+  if (!ctx) {
+    throw new Error('useStack must be used within a StackContext.Provider');
+  }
+  return ctx;
+}

package/src/Snackbar/index.ts

@@ -1,3 +1,3 @@
-export * from './Snackbar';
-export * from './Stack';
-export * from './useSnackbarAnimation';
+export * from './Snackbar';
+export * from './Stack';
+export * from './useSnackbarAnimation';