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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basic-ui/material",
-  "version": "1.0.0-alpha.43",
+  "version": "1.0.0-alpha.44",
   "description": "Accessible React Components used as building blocks for UI patterns",
   "author": "Lucas Terra <lucasterra7@gmail.com>",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "test:watch": "yarn test --watch"
   },
   "dependencies": {
-    "@basic-ui/core": "^0.0.51",
+    "@basic-ui/core": "^0.0.52",
     "@basic-ui/dynamic-theme": "^0.0.11",
     "@styled-system/should-forward-prop": "5.1.5",
     "@types/styled-system": "^5.1.10",
@@ -62,5 +62,5 @@
     "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0",
     "tailwindcss": "^3.0.0"
   },
-  "gitHead": "3fed4eb9238027ed52b7ac89538023810aac260d"
+  "gitHead": "fc731d3f336d3dce8bcf3b6589d724883bc66c7a"
 }

package/src/Snackbar/Snackbar.tsx

@@ -1,82 +1,82 @@
-import { assignMultipleRefs } from '@basic-ui/core';
-import { rem } from 'polished';
-import type { ReactElement } from 'react';
-import { cloneElement, forwardRef, useRef } from 'react';
-import {
-  DARK_SCHEME_CLASS,
-  LIGHT_SCHEME_CLASS,
-  useColorScheme,
-} from '@basic-ui/dynamic-theme';
-
-import { Box } from '../Box';
-import type { PaperProps } from '../Paper';
-import { Paper } from '../Paper';
-import { Text } from '../Text';
-import { useSnackbarAnimation } from './useSnackbarAnimation';
-
-export interface SnackbarProps extends PaperProps {
-  action?: ReactElement;
-  timeout?: number;
-  dismissible?: boolean;
-}
-
-export const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
-  function Snackbar(props, forwardedRef) {
-    const { colorScheme } = useColorScheme();
-    const ref = useRef<HTMLDivElement | null>(null);
-    const {
-      __css,
-      action,
-      children,
-      style: styleProp,
-      timeout = 5000,
-      dismissible,
-      ...otherProps
-    } = props;
-
-    const { onClose, placementStyle, style } = useSnackbarAnimation(
-      ref,
-      timeout
-    );
-
-    return (
-      <Paper
-        elevation={4}
-        darkThemeBackgroundOverlay={4}
-        className={
-          colorScheme === 'light' ? DARK_SCHEME_CLASS : LIGHT_SCHEME_CLASS
-        }
-        ref={assignMultipleRefs(forwardedRef, ref)}
-        __css={{
-          boxShadow: 4,
-          py: rem(6),
-          pl: 3,
-          pr: 3,
-          display: 'inline-flex',
-          minWidth: `min(100%, ${rem(344)})`,
-          maxWidth: ['100%', 'unset'],
-          borderRadius: 'extra-small',
-          color: 'on.surface',
-          flexDirection: 'row',
-          willChange: 'transform,opacity',
-          ...placementStyle,
-          ...__css,
-        }}
-        style={{
-          ...style,
-          ...styleProp,
-        }}
-        {...otherProps}
-      >
-        <Text variant="body-medium" as="span" py={2}>
-          {children}
-        </Text>
-        {action && (
-          <Box as="span" pl={2} mr={-2} ml="auto" minWidth="auto">
-            {dismissible ? cloneElement(action, { onClick: onClose }) : action}
-          </Box>
-        )}
-      </Paper>
-    );
-  }
-);
+import { assignMultipleRefs } from '@basic-ui/core';
+import { rem } from 'polished';
+import type { ReactElement } from 'react';
+import { cloneElement, forwardRef, useRef } from 'react';
+import {
+  DARK_SCHEME_CLASS,
+  LIGHT_SCHEME_CLASS,
+  useColorScheme,
+} from '@basic-ui/dynamic-theme';
+
+import { Box } from '../Box';
+import type { PaperProps } from '../Paper';
+import { Paper } from '../Paper';
+import { Text } from '../Text';
+import { useSnackbarAnimation } from './useSnackbarAnimation';
+
+export interface SnackbarProps extends PaperProps {
+  action?: ReactElement;
+  timeout?: number;
+  dismissible?: boolean;
+}
+
+export const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
+  function Snackbar(props, forwardedRef) {
+    const { colorScheme } = useColorScheme();
+    const ref = useRef<HTMLDivElement | null>(null);
+    const {
+      __css,
+      action,
+      children,
+      style: styleProp,
+      timeout = 5000,
+      dismissible,
+      ...otherProps
+    } = props;
+
+    const { onClose, placementStyle, style } = useSnackbarAnimation(
+      ref,
+      timeout
+    );
+
+    return (
+      <Paper
+        elevation={4}
+        darkThemeBackgroundOverlay={4}
+        className={
+          colorScheme === 'light' ? DARK_SCHEME_CLASS : LIGHT_SCHEME_CLASS
+        }
+        ref={assignMultipleRefs(forwardedRef, ref)}
+        __css={{
+          boxShadow: 4,
+          py: rem(6),
+          pl: 3,
+          pr: 3,
+          display: 'inline-flex',
+          minWidth: `min(100%, ${rem(344)})`,
+          maxWidth: ['100%', 'unset'],
+          borderRadius: 'extra-small',
+          color: 'on.surface',
+          flexDirection: 'row',
+          willChange: 'transform,opacity',
+          ...placementStyle,
+          ...__css,
+        }}
+        style={{
+          ...style,
+          ...styleProp,
+        }}
+        {...otherProps}
+      >
+        <Text variant="body-medium" as="span" py={2}>
+          {children}
+        </Text>
+        {action && (
+          <Box as="span" pl={2} mr={-2} ml="auto" minWidth="auto">
+            {dismissible ? cloneElement(action, { onClick: onClose }) : action}
+          </Box>
+        )}
+      </Paper>
+    );
+  }
+);

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';