@seed-design/react 1.2.15 → 2.0.0

package/src/components/SideNavigation/SideNavigation.tsx

@@ -0,0 +1,342 @@
+import {
+  SideNavigation as SideNavigationPrimitive,
+  SideNavigationItemProvider as ItemProviderPrimitive,
+  useCollapsibleContext,
+  useSideNavigationContext,
+  useSideNavigationItem,
+  useSideNavigationItemContext,
+  type UseSideNavigationItemProps,
+  type SideNavigationProviderProps as SideNavigationProviderPrimitiveProps,
+} from "@seed-design/react-side-navigation";
+import {
+  sideNavigation,
+  type SideNavigationVariantProps,
+} from "@seed-design/css/recipes/side-navigation";
+import {
+  sideNavigationInset,
+  type SideNavigationInsetVariantProps,
+} from "@seed-design/css/recipes/side-navigation-inset";
+import {
+  sideNavigationMenuItem,
+  type SideNavigationMenuItemVariantProps,
+} from "@seed-design/css/recipes/side-navigation-menu-item";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { createRecipeContext } from "../../utils/createRecipeContext";
+import { InternalIcon, type InternalIconProps } from "../private/Icon";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+import { mediaQueries } from "@seed-design/css/breakpoints";
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import React from "react";
+import clsx from "clsx";
+import { dataAttr } from "@seed-design/dom-utils";
+
+const { withProvider, withContext, useClassNames } = createSlotRecipeContext(sideNavigation);
+const { ClassNamesProvider: ItemClassNamesProvider, withContext: withItemContext } =
+  createSlotRecipeContext(sideNavigationMenuItem);
+const { withContext: withInsetContext } = createRecipeContext(sideNavigationInset);
+
+const withSideNavigationStateProps = createWithStateProps([useSideNavigationContext]);
+const withItemStateProps = createWithStateProps([
+  useSideNavigationContext,
+  { useContext: useSideNavigationItemContext, strict: false },
+]);
+const withItemSlotCollapsibleStateProps = createWithStateProps([
+  useSideNavigationContext,
+  { useContext: useSideNavigationItemContext, strict: false },
+  { useContext: useCollapsibleContext, strict: false },
+]);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+function ResponsiveCollapseEffect() {
+  const { setCollapsed } = useSideNavigationContext();
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(mediaQueries.lg);
+
+    const handler = (e: MediaQueryListEvent) => {
+      setCollapsed(!e.matches);
+    };
+
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, [setCollapsed]);
+
+  return null;
+}
+
+export interface SideNavigationProviderProps extends SideNavigationProviderPrimitiveProps {}
+
+export function SideNavigationProvider(props: SideNavigationProviderProps) {
+  return (
+    <SideNavigationPrimitive.Provider {...props}>
+      <ResponsiveCollapseEffect />
+      {props.children}
+    </SideNavigationPrimitive.Provider>
+  );
+}
+
+SideNavigationProvider.displayName = "SideNavigationProvider";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SideNavigationRootProps
+  extends SideNavigationVariantProps,
+    SideNavigationPrimitive.RootProps {}
+
+export const SideNavigationRoot = withProvider<HTMLElement, SideNavigationRootProps>(
+  SideNavigationPrimitive.Root,
+  "root",
+);
+
+SideNavigationRoot.displayName = "SideNavigationRoot";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SideNavigationHeaderProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const SideNavigationHeader = withContext<HTMLDivElement, SideNavigationHeaderProps>(
+  withSideNavigationStateProps(Primitive.div),
+  "header",
+);
+
+SideNavigationHeader.displayName = "SideNavigationHeader";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SideNavigationContentProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const SideNavigationContent = React.forwardRef<HTMLDivElement, SideNavigationContentProps>(
+  ({ className, ...props }, forwardedRef) => {
+    const classNames = useClassNames();
+    const { stateProps } = useSideNavigationContext();
+    const ref = React.useRef<HTMLDivElement>(null);
+    const [scrolled, setScrolled] = React.useState(false);
+
+    React.useEffect(() => {
+      const element = ref.current;
+      if (!element) return;
+
+      const check = () => setScrolled(element.scrollTop > 0);
+      check();
+
+      element.addEventListener("scroll", check);
+
+      const observer = new ResizeObserver(check);
+      observer.observe(element);
+
+      return () => {
+        element.removeEventListener("scroll", check);
+        observer.disconnect();
+      };
+    }, []);
+
+    return (
+      <Primitive.div
+        ref={composeRefs(ref, forwardedRef)}
+        className={clsx(classNames.content, className)}
+        {...{ "data-scrolled": dataAttr(scrolled) }}
+        {...stateProps}
+        {...props}
+      />
+    );
+  },
+);
+
+SideNavigationContent.displayName = "SideNavigationContent";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SideNavigationFooterProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const SideNavigationFooter = withContext<HTMLDivElement, SideNavigationFooterProps>(
+  withSideNavigationStateProps(Primitive.div),
+  "footer",
+);
+
+SideNavigationFooter.displayName = "SideNavigationFooter";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SideNavigationGroupProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const SideNavigationGroup = withContext<HTMLDivElement, SideNavigationGroupProps>(
+  withSideNavigationStateProps(Primitive.div),
+  "group",
+);
+
+SideNavigationGroup.displayName = "SideNavigationGroup";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SideNavigationGroupLabelProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const SideNavigationGroupLabel = withContext<HTMLDivElement, SideNavigationGroupLabelProps>(
+  withSideNavigationStateProps(Primitive.div),
+  "groupLabel",
+);
+
+SideNavigationGroupLabel.displayName = "SideNavigationGroupLabel";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SideNavigationItemProps
+  extends SideNavigationMenuItemVariantProps,
+    UseSideNavigationItemProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLButtonElement> {}
+
+export const SideNavigationItem = React.forwardRef<HTMLButtonElement, SideNavigationItemProps>(
+  ({ current, disabled, className, ...props }, ref) => {
+    const [variantProps, restProps] = sideNavigationMenuItem.splitVariantProps(props);
+    const classNames = sideNavigationMenuItem(variantProps);
+
+    const { stateProps: sideNavStateProps } = useSideNavigationContext();
+    const api = useSideNavigationItem({ current, disabled });
+
+    return (
+      <ItemProviderPrimitive value={api}>
+        <ItemClassNamesProvider value={classNames}>
+          <Primitive.button
+            className={clsx(classNames.root, className)}
+            ref={ref}
+            {...restProps}
+            {...sideNavStateProps}
+            {...api.rootProps}
+          />
+        </ItemClassNamesProvider>
+      </ItemProviderPrimitive>
+    );
+  },
+);
+
+SideNavigationItem.displayName = "SideNavigationItem";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SideNavigationItemLabelProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const SideNavigationItemLabel = withItemContext<
+  HTMLSpanElement,
+  SideNavigationItemLabelProps
+>(withItemStateProps(Primitive.span), "label");
+
+SideNavigationItemLabel.displayName = "SideNavigationItemLabel";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SideNavigationItemPrefixIconProps extends InternalIconProps {}
+
+export const SideNavigationItemPrefixIcon = withItemContext<
+  SVGSVGElement,
+  SideNavigationItemPrefixIconProps
+>(withItemStateProps(InternalIcon), "prefixIcon");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SideNavigationItemSuffixIconProps extends InternalIconProps {}
+
+export const SideNavigationItemSuffixIcon = withItemContext<
+  SVGSVGElement,
+  SideNavigationItemSuffixIconProps
+>(withItemSlotCollapsibleStateProps(InternalIcon), "suffixIcon");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SideNavigationItemCollapsibleRootProps
+  extends SideNavigationMenuItemVariantProps,
+    SideNavigationPrimitive.ItemCollapsibleRootProps {}
+
+export const SideNavigationItemCollapsibleRoot = React.forwardRef<
+  HTMLDivElement,
+  SideNavigationItemCollapsibleRootProps
+>(({ children, ...props }, ref) => {
+  const [variantProps, restProps] = sideNavigationMenuItem.splitVariantProps(props);
+  const classNames = sideNavigationMenuItem(variantProps);
+
+  return (
+    <ItemClassNamesProvider value={classNames}>
+      <SideNavigationPrimitive.ItemCollapsibleRoot ref={ref} {...restProps}>
+        {children}
+      </SideNavigationPrimitive.ItemCollapsibleRoot>
+    </ItemClassNamesProvider>
+  );
+});
+
+SideNavigationItemCollapsibleRoot.displayName = "SideNavigationItemCollapsibleRoot";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SideNavigationItemCollapsibleTriggerProps
+  extends UseSideNavigationItemProps,
+    SideNavigationPrimitive.ItemCollapsibleTriggerProps {}
+
+export const SideNavigationItemCollapsibleTrigger = React.forwardRef<
+  HTMLButtonElement,
+  SideNavigationItemCollapsibleTriggerProps
+>(({ current, disabled, className, ...props }, ref) => {
+  const classNames = sideNavigationMenuItem();
+  const { stateProps: sideNavStateProps } = useSideNavigationContext();
+  const api = useSideNavigationItem({ current, disabled });
+
+  return (
+    <ItemProviderPrimitive value={api}>
+      <SideNavigationPrimitive.ItemCollapsibleTrigger
+        ref={ref}
+        className={clsx(classNames.root, className)}
+        {...sideNavStateProps}
+        {...api.stateProps}
+        {...props}
+      />
+    </ItemProviderPrimitive>
+  );
+});
+
+SideNavigationItemCollapsibleTrigger.displayName = "SideNavigationItemCollapsibleTrigger";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SideNavigationItemCollapsibleContentProps
+  extends SideNavigationPrimitive.ItemCollapsibleContentProps {}
+
+export const SideNavigationItemCollapsibleContent = withItemContext<
+  HTMLDivElement,
+  SideNavigationItemCollapsibleContentProps
+>(SideNavigationPrimitive.ItemCollapsibleContent, "panel");
+
+SideNavigationItemCollapsibleContent.displayName = "SideNavigationItemCollapsibleContent";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SideNavigationTriggerProps extends SideNavigationPrimitive.TriggerProps {}
+
+export const SideNavigationTrigger = withContext<HTMLButtonElement, SideNavigationTriggerProps>(
+  SideNavigationPrimitive.Trigger,
+  "trigger",
+);
+
+SideNavigationTrigger.displayName = "SideNavigationTrigger";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SideNavigationInsetProps
+  extends SideNavigationInsetVariantProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const SideNavigationInset = withInsetContext<HTMLDivElement, SideNavigationInsetProps>(
+  Primitive.div,
+);

package/src/components/SideNavigation/index.ts

@@ -0,0 +1,39 @@
+export {
+  SideNavigationRoot,
+  SideNavigationHeader,
+  SideNavigationContent,
+  SideNavigationFooter,
+  SideNavigationGroup,
+  SideNavigationGroupLabel,
+  SideNavigationItem,
+  SideNavigationItemLabel,
+  SideNavigationItemPrefixIcon,
+  SideNavigationItemSuffixIcon,
+  SideNavigationItemCollapsibleRoot,
+  SideNavigationItemCollapsibleTrigger,
+  SideNavigationItemCollapsibleContent,
+  SideNavigationTrigger,
+  SideNavigationInset,
+  type SideNavigationRootProps,
+  type SideNavigationHeaderProps,
+  type SideNavigationContentProps,
+  type SideNavigationFooterProps,
+  type SideNavigationGroupProps,
+  type SideNavigationGroupLabelProps,
+  type SideNavigationItemProps,
+  type SideNavigationItemLabelProps,
+  type SideNavigationItemPrefixIconProps,
+  type SideNavigationItemSuffixIconProps,
+  type SideNavigationItemCollapsibleRootProps,
+  type SideNavigationItemCollapsibleTriggerProps,
+  type SideNavigationItemCollapsibleContentProps,
+  type SideNavigationTriggerProps,
+  type SideNavigationInsetProps,
+} from "./SideNavigation";
+
+export {
+  SideNavigationProvider,
+  type SideNavigationProviderProps,
+} from "./SideNavigation";
+
+export * as SideNavigation from "./SideNavigation.namespace";

package/src/components/SidePanel/SidePanel.namespace.ts

@@ -0,0 +1,24 @@
+export {
+  SidePanelBackdrop as Backdrop,
+  SidePanelBody as Body,
+  SidePanelContent as Content,
+  SidePanelDescription as Description,
+  SidePanelFooter as Footer,
+  SidePanelHeader as Header,
+  SidePanelPositioner as Positioner,
+  SidePanelRoot as Root,
+  SidePanelTitle as Title,
+  SidePanelTrigger as Trigger,
+  SidePanelCloseButton as CloseButton,
+  type SidePanelBackdropProps as BackdropProps,
+  type SidePanelBodyProps as BodyProps,
+  type SidePanelContentProps as ContentProps,
+  type SidePanelDescriptionProps as DescriptionProps,
+  type SidePanelFooterProps as FooterProps,
+  type SidePanelHeaderProps as HeaderProps,
+  type SidePanelPositionerProps as PositionerProps,
+  type SidePanelRootProps as RootProps,
+  type SidePanelTitleProps as TitleProps,
+  type SidePanelTriggerProps as TriggerProps,
+  type SidePanelCloseButtonProps as CloseButtonProps,
+} from "./SidePanel";

package/src/components/SidePanel/SidePanel.tsx

@@ -0,0 +1,216 @@
+import { sidePanel, type SidePanelVariantProps } from "@seed-design/css/recipes/side-panel";
+import { Drawer } from "@seed-design/react-drawer";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { dataAttr } from "@seed-design/dom-utils";
+import clsx from "clsx";
+import * as React from "react";
+import { createRenderTrackingContext } from "../../utils/createRenderTrackingContext";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { useStyleProps, withStyleProps, type StyleProps } from "../../utils/styled";
+
+const { withContext, useClassNames, ClassNamesProvider } = createSlotRecipeContext(sidePanel);
+
+const closeButtonTracker = createRenderTrackingContext("SidePanelCloseButton");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SidePanelRootProps
+  extends SidePanelVariantProps,
+    Pick<
+      Drawer.RootProps,
+      | "children"
+      | "open"
+      | "defaultOpen"
+      | "onOpenChange"
+      | "modal"
+      | "dismissible"
+      | "closeOnEscape"
+      | "closeOnInteractOutside"
+      | "lazyMount"
+      | "unmountOnExit"
+      | "onAnimationEnd"
+    > {
+  /** Direction the side panel slides in from. @default "right" */
+  direction?: "left" | "right";
+}
+
+export function SidePanelRoot(props: SidePanelRootProps) {
+  const [variantProps, otherProps] = sidePanel.splitVariantProps({
+    direction: "right" as const,
+    lazyMount: true,
+    unmountOnExit: true,
+    ...props,
+  });
+  const classNames = sidePanel(variantProps);
+
+  return (
+    <ClassNamesProvider value={classNames}>
+      <closeButtonTracker.Provider>
+        <Drawer.Root {...otherProps} />
+      </closeButtonTracker.Provider>
+    </ClassNamesProvider>
+  );
+}
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SidePanelTriggerProps extends Drawer.TriggerProps {}
+
+export const SidePanelTrigger = Drawer.Trigger;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SidePanelPositionerProps extends Drawer.PositionerProps {}
+
+export const SidePanelPositioner = withContext<HTMLDivElement, SidePanelPositionerProps>(
+  Drawer.Positioner,
+  "positioner",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SidePanelBackdropProps extends Drawer.BackdropProps {}
+
+export const SidePanelBackdrop = withContext<HTMLDivElement, SidePanelBackdropProps>(
+  Drawer.Backdrop,
+  "backdrop",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SidePanelContentProps
+  extends Drawer.ContentProps,
+    Pick<StyleProps, "width" | "maxWidth"> {}
+
+export const SidePanelContent = withContext<HTMLDivElement, SidePanelContentProps>(
+  withStyleProps(Drawer.Content),
+  "content",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SidePanelHeaderProps extends Drawer.HeaderProps {}
+
+export const SidePanelHeader = React.forwardRef<HTMLDivElement, SidePanelHeaderProps>(
+  ({ className, ...props }, ref) => {
+    const classNames = useClassNames();
+    const { isRendered } = closeButtonTracker.useRenderTracking();
+
+    return (
+      <Drawer.Header
+        ref={ref}
+        data-show-close-button={dataAttr(isRendered)}
+        className={clsx(classNames.header, className)}
+        {...props}
+      />
+    );
+  },
+);
+
+SidePanelHeader.displayName = "SidePanelHeader";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SidePanelTitleProps extends Drawer.TitleProps {}
+
+export const SidePanelTitle = withContext<HTMLHeadingElement, SidePanelTitleProps>(
+  Drawer.Title,
+  "title",
+);
+
+SidePanelTitle.displayName = "SidePanelTitle";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SidePanelDescriptionProps extends Drawer.DescriptionProps {}
+
+export const SidePanelDescription = withContext<HTMLParagraphElement, SidePanelDescriptionProps>(
+  Drawer.Description,
+  "description",
+);
+
+SidePanelDescription.displayName = "SidePanelDescription";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SidePanelBodyProps
+  extends PrimitiveProps,
+    Pick<
+      StyleProps,
+      "paddingX" | "height" | "maxHeight" | "minHeight" | "justifyContent" | "alignItems"
+    >,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const SidePanelBody = React.forwardRef<HTMLDivElement, SidePanelBodyProps>(
+  (props, forwardedRef) => {
+    const classNames = useClassNames();
+    const { style, restProps } = useStyleProps(props);
+    const { className, ...otherProps } = restProps;
+
+    const ref = React.useRef<HTMLDivElement>(null);
+    const [scrolled, setScrolled] = React.useState(false);
+
+    React.useEffect(() => {
+      const element = ref.current;
+      if (!element) return;
+
+      const check = () => setScrolled(element.scrollTop > 0);
+      check();
+
+      element.addEventListener("scroll", check);
+
+      const observer = new ResizeObserver(check);
+      observer.observe(element);
+
+      return () => {
+        element.removeEventListener("scroll", check);
+        observer.disconnect();
+      };
+    }, []);
+
+    return (
+      <Primitive.div
+        ref={composeRefs(ref, forwardedRef)}
+        className={clsx(classNames.body, className)}
+        style={style}
+        {...{ "data-scrolled": dataAttr(scrolled) }}
+        {...otherProps}
+      />
+    );
+  },
+);
+
+SidePanelBody.displayName = "SidePanelBody";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SidePanelFooterProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const SidePanelFooter = withContext<HTMLDivElement, SidePanelFooterProps>(
+  Primitive.div,
+  "footer",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface SidePanelCloseButtonProps extends Drawer.CloseButtonProps {}
+
+export const SidePanelCloseButton = React.forwardRef<HTMLButtonElement, SidePanelCloseButtonProps>(
+  ({ className, ...props }, ref) => {
+    const classNames = useClassNames();
+    const { trackRef } = closeButtonTracker.useRenderTracking();
+
+    return (
+      <Drawer.CloseButton
+        ref={composeRefs(ref, trackRef)}
+        className={clsx(classNames.closeButton, className)}
+        {...props}
+      />
+    );
+  },
+);
+
+SidePanelCloseButton.displayName = "SidePanelCloseButton";

package/src/components/SidePanel/index.ts

@@ -0,0 +1,26 @@
+export {
+  SidePanelBackdrop,
+  SidePanelBody,
+  SidePanelContent,
+  SidePanelDescription,
+  SidePanelFooter,
+  SidePanelHeader,
+  SidePanelPositioner,
+  SidePanelRoot,
+  SidePanelTitle,
+  SidePanelTrigger,
+  SidePanelCloseButton,
+  type SidePanelBackdropProps,
+  type SidePanelBodyProps,
+  type SidePanelContentProps,
+  type SidePanelDescriptionProps,
+  type SidePanelFooterProps,
+  type SidePanelHeaderProps,
+  type SidePanelPositionerProps,
+  type SidePanelRootProps,
+  type SidePanelTitleProps,
+  type SidePanelTriggerProps,
+  type SidePanelCloseButtonProps,
+} from "./SidePanel";
+
+export * as SidePanel from "./SidePanel.namespace";

package/src/components/Snackbar/Snackbar.tsx

@@ -67,12 +67,10 @@ export const SnackbarPrefixIcon = withContext<HTMLDivElement, SnackbarPrefixIcon
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface SnackbarActionButtonProps
-  extends PrimitiveProps,
-    React.HTMLAttributes<HTMLButtonElement> {}
+export interface SnackbarActionButtonProps extends SnackbarPrimitive.ActionButtonProps {}
 
 export const SnackbarActionButton = withContext<HTMLButtonElement, SnackbarActionButtonProps>(
-  Primitive.button,
+  SnackbarPrimitive.ActionButton,
   "actionButton",
 );