@seed-design/react 1.1.17 → 1.2.0

package/src/components/SelectBox/RadioSelectBox.tsx

@@ -1,29 +1,153 @@
-import { selectBox } from "@seed-design/css/recipes/select-box";
-import { selectBoxGroup } from "@seed-design/css/recipes/select-box-group";
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { selectBox, type SelectBoxVariantProps } from "@seed-design/css/recipes/select-box";
+import {
+  selectBoxGroup,
+  type SelectBoxGroupVariantProps,
+} from "@seed-design/css/recipes/select-box-group";
+import {
+  Collapsible,
+  CollapsibleProvider,
+  useCollapsible,
+  useCollapsibleContext,
+} from "@seed-design/react-collapsible";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import {
   RadioGroup as RadioGroupPrimitive,
   useRadioGroupItemContext,
 } from "@seed-design/react-radio-group";
-import { createRecipeContext } from "../../utils/createRecipeContext";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useState,
+  type PropsWithChildren,
+} from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
+import clsx from "clsx";
+
+const { PropsProvider, ClassNamesProvider, withContext, useProps, useClassNames } =
+  createSlotRecipeContext(selectBox);
 
-const { withContext: withGroupContext } = createRecipeContext(selectBoxGroup);
-const { withContext, withProvider } = createSlotRecipeContext(selectBox);
 const withStateProps = createWithStateProps([useRadioGroupItemContext]);
 
-export interface RadioSelectBoxRootProps extends RadioGroupPrimitive.RootProps {}
+const FooterContext = createContext<{
+  isFooterRendered: boolean;
+  footerRef: (node: HTMLDivElement | null) => void;
+  footerVisibility: Exclude<NonNullable<RadioSelectBoxItemProps["footerVisibility"]>, "always">;
+} | null>(null);
+
+export interface RadioSelectBoxGroupProps
+  extends SelectBoxGroupVariantProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Number of columns in the grid layout. When bigger than 1, child `RadioSelectBoxItem` will have a default layout of "vertical".
+   * @default 1
+   */
+  columns?: number;
+}
 
-export const RadioSelectBoxRoot = withGroupContext<HTMLDivElement, RadioSelectBoxRootProps>(
-  RadioGroupPrimitive.Root,
+export const RadioSelectBoxGroup = forwardRef<HTMLDivElement, RadioSelectBoxGroupProps>(
+  ({ columns = 1, className, style, ...props }, ref) => {
+    const [variantProps, otherProps] = selectBoxGroup.splitVariantProps(props);
+    const recipeClassName = selectBoxGroup(variantProps);
+    const layout = columns === 1 ? "horizontal" : "vertical";
+
+    return (
+      <PropsProvider value={{ layout }}>
+        <Primitive.div
+          ref={ref}
+          data-columns={columns}
+          className={clsx(recipeClassName, className)}
+          style={
+            {
+              ...style,
+              "--seed-select-box-group--columns": columns,
+            } as React.CSSProperties
+          }
+          {...otherProps}
+        />
+      </PropsProvider>
+    );
+  },
 );
 
-export interface RadioSelectBoxItemProps extends RadioGroupPrimitive.ItemProps {}
+function FooterVisibilityProvider({
+  children,
+  footerVisibility,
+}: PropsWithChildren<{
+  footerVisibility: Exclude<NonNullable<RadioSelectBoxItemProps["footerVisibility"]>, "always">;
+}>) {
+  const { checked } = useRadioGroupItemContext();
+
+  const collapsible = useCollapsible({
+    open: {
+      "when-selected": checked,
+      "when-not-selected": !checked,
+    }[footerVisibility],
+  });
+
+  const [isFooterRendered, setIsFooterRendered] = useState(false);
+  const footerRef = useCallback((node: HTMLDivElement | null) => {
+    setIsFooterRendered(!!node);
+  }, []);
+
+  return (
+    <CollapsibleProvider value={collapsible}>
+      <FooterContext.Provider value={{ isFooterRendered, footerRef, footerVisibility }}>
+        {children}
+      </FooterContext.Provider>
+    </CollapsibleProvider>
+  );
+}
+
+export interface RadioSelectBoxItemProps
+  extends SelectBoxVariantProps,
+    RadioGroupPrimitive.ItemProps {
+  /**
+   * Controls when the footer is visible.
+   * @default "when-selected"
+   */
+  footerVisibility?: "when-selected" | "when-not-selected" | "always";
+}
 
-export const RadioSelectBoxItem = withProvider<HTMLLabelElement, RadioSelectBoxItemProps>(
-  RadioGroupPrimitive.Item,
-  "root",
+export const RadioSelectBoxItem = forwardRef<HTMLLabelElement, RadioSelectBoxItemProps>(
+  ({ footerVisibility = "when-selected", className, children, ...props }, ref) => {
+    const [variantProps, otherProps] = selectBox.splitVariantProps(props);
+    const classNames = selectBox({
+      ...useProps(),
+      ...variantProps,
+    });
+
+    return (
+      <ClassNamesProvider value={classNames}>
+        <RadioGroupPrimitive.Item
+          ref={ref}
+          className={clsx(classNames.root, className)}
+          {...otherProps}
+        >
+          {footerVisibility === "always" ? (
+            children
+          ) : (
+            <FooterVisibilityProvider footerVisibility={footerVisibility}>
+              {children}
+            </FooterVisibilityProvider>
+          )}
+        </RadioGroupPrimitive.Item>
+      </ClassNamesProvider>
+    );
+  },
+);
+
+export interface RadioSelectBoxTriggerProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const RadioSelectBoxTrigger = withContext<HTMLDivElement, RadioSelectBoxTriggerProps>(
+  withStateProps(Primitive.div),
+  "trigger",
 );
 
 export interface RadioSelectBoxContentProps
@@ -35,20 +159,90 @@ export const RadioSelectBoxContent = withContext<HTMLDivElement, RadioSelectBoxC
   "content",
 );
 
+export interface RadioSelectBoxBodyProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const RadioSelectBoxBody = withContext<HTMLDivElement, RadioSelectBoxBodyProps>(
+  withStateProps(Primitive.div),
+  "body",
+);
+
 export interface RadioSelectBoxLabelProps
   extends PrimitiveProps,
-    React.HTMLAttributes<HTMLSpanElement> {}
+    React.HTMLAttributes<HTMLDivElement> {}
 
-export const RadioSelectBoxLabel = withContext<HTMLSpanElement, RadioSelectBoxLabelProps>(
+export const RadioSelectBoxLabel = withContext<HTMLDivElement, RadioSelectBoxLabelProps>(
   withStateProps(Primitive.div),
   "label",
 );
 
 export interface RadioSelectBoxDescriptionProps
   extends PrimitiveProps,
-    React.HTMLAttributes<HTMLSpanElement> {}
+    React.HTMLAttributes<HTMLDivElement> {}
 
 export const RadioSelectBoxDescription = withContext<
-  HTMLSpanElement,
+  HTMLDivElement,
   RadioSelectBoxDescriptionProps
 >(withStateProps(Primitive.div), "description");
+
+export interface RadioSelectBoxHiddenInputProps extends RadioGroupPrimitive.ItemHiddenInputProps {}
+
+export const RadioSelectBoxHiddenInput = forwardRef<
+  HTMLInputElement,
+  RadioSelectBoxHiddenInputProps
+>((props, ref) => {
+  // when footerVisibility !== "when-selected", this context is automatically unavailable since it's not wrapped in CollapsibleProvider
+
+  // NOTE: aria-expanded on role="radio" is not officially supported. See: https://github.com/w3c/aria/issues/1404
+  // but it helps some screen readers to announce the expanded/collapsed state of the footer.
+  // gov.uk applies aria-expanded on the radio input as well. See: https://design-system.service.gov.uk/components/radios/#conditionally-revealing-a-related-question
+  const collapsibleContext = useCollapsibleContext({ strict: false });
+  const footerContext = useContext(FooterContext);
+
+  const triggerAriaProps = footerContext?.isFooterRendered
+    ? collapsibleContext?.triggerAriaProps
+    : undefined;
+
+  return <RadioGroupPrimitive.ItemHiddenInput ref={ref} {...triggerAriaProps} {...props} />;
+});
+RadioSelectBoxHiddenInput.displayName = "RadioSelectBoxHiddenInput";
+
+export interface RadioSelectBoxFooterProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const RadioSelectBoxFooter = forwardRef<HTMLDivElement, RadioSelectBoxFooterProps>(
+  ({ className, children, ...props }, ref) => {
+    const classNames = useClassNames();
+    const { stateProps } = useRadioGroupItemContext();
+    const collapsibleContext = useCollapsibleContext({ strict: false });
+    const footerContext = useContext(FooterContext);
+    const composedRef = composeRefs(ref, footerContext?.footerRef ?? null);
+
+    if (collapsibleContext) {
+      return (
+        <Collapsible.Content
+          ref={composedRef}
+          className={clsx(classNames.footer, className)}
+          {...stateProps}
+          {...props}
+        >
+          {children}
+        </Collapsible.Content>
+      );
+    }
+
+    return (
+      <Primitive.div
+        ref={composedRef}
+        className={clsx(classNames.footer, className)}
+        {...stateProps}
+        {...props}
+      >
+        {children}
+      </Primitive.div>
+    );
+  },
+);
+RadioSelectBoxFooter.displayName = "RadioSelectBoxFooter";

package/src/components/SelectBox/index.ts

@@ -1,27 +1,47 @@
 export {
+  CheckSelectBoxBody,
+  CheckSelectBoxCheckmarkControl,
+  CheckSelectBoxCheckmarkIcon,
   CheckSelectBoxContent,
   CheckSelectBoxDescription,
+  CheckSelectBoxFooter,
   CheckSelectBoxGroup,
+  CheckSelectBoxHiddenInput,
   CheckSelectBoxLabel,
   CheckSelectBoxRoot,
+  CheckSelectBoxTrigger,
+  type CheckSelectBoxBodyProps,
+  type CheckSelectBoxCheckmarkControlProps,
+  type CheckSelectBoxCheckmarkIconProps,
   type CheckSelectBoxContentProps,
   type CheckSelectBoxDescriptionProps,
+  type CheckSelectBoxFooterProps,
   type CheckSelectBoxGroupProps,
+  type CheckSelectBoxHiddenInputProps,
   type CheckSelectBoxLabelProps,
   type CheckSelectBoxRootProps,
+  type CheckSelectBoxTriggerProps,
 } from "./CheckSelectBox";
 
 export {
+  RadioSelectBoxBody,
   RadioSelectBoxContent,
   RadioSelectBoxDescription,
+  RadioSelectBoxFooter,
+  RadioSelectBoxGroup,
+  RadioSelectBoxHiddenInput,
   RadioSelectBoxItem,
   RadioSelectBoxLabel,
-  RadioSelectBoxRoot,
+  RadioSelectBoxTrigger,
+  type RadioSelectBoxBodyProps,
   type RadioSelectBoxContentProps,
   type RadioSelectBoxDescriptionProps,
+  type RadioSelectBoxFooterProps,
+  type RadioSelectBoxGroupProps,
+  type RadioSelectBoxHiddenInputProps,
   type RadioSelectBoxItemProps,
   type RadioSelectBoxLabelProps,
-  type RadioSelectBoxRootProps,
+  type RadioSelectBoxTriggerProps,
 } from "./RadioSelectBox";
 
 export * as CheckSelectBox from "./CheckSelectBox.namespace";

package/src/components/Switch/Switch.tsx

@@ -1,6 +1,6 @@
 import { Switch as SwitchPrimitive, useSwitchContext } from "@seed-design/react-switch";
 import { switchStyle, type SwitchVariantProps } from "@seed-design/css/recipes/switch";
-import { switchMark, type SwitchMarkVariantProps } from "@seed-design/css/recipes/switch-mark";
+import { switchmark, type SwitchmarkVariantProps } from "@seed-design/css/recipes/switchmark";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { createWithStateProps } from "../../utils/createWithStateProps";
@@ -13,7 +13,7 @@ const {
   withContext: withControlContext,
   PropsProvider: ControlPropsProvider,
   withProvider: withControlProvider,
-} = createSlotRecipeContext(switchMark);
+} = createSlotRecipeContext(switchmark);
 const withStateProps = createWithStateProps([useSwitchContext]);
 
 ////////////////////////////////////////////////////////////////////////////////////
@@ -25,7 +25,7 @@ type SwitchVariantDeprecatedSizeProps = "small" | "medium";
 
 export interface SwitchRootProps
   extends Omit<SwitchVariantProps, "size">,
-    Omit<SwitchMarkVariantProps, "size">,
+    Omit<SwitchmarkVariantProps, "size">,
     SwitchPrimitive.RootProps {
   size?: SwitchVariantProps["size"] | SwitchVariantDeprecatedSizeProps;
 }
@@ -41,20 +41,20 @@ export const SwitchRoot = React.forwardRef<HTMLLabelElement, SwitchRootProps>(
       );
     }
 
-    const [{ switch: switchVariantProps, switchMark: switchMarkVariantProps }, otherProps] =
+    const [{ switch: switchVariantProps, switchmark: switchmarkVariantProps }, otherProps] =
       splitMultipleVariantsProps(
         {
           ...props,
           // TODO: replace this mapping completely
           size: props.size === "small" ? "16" : props.size === "medium" ? "32" : props.size,
         },
-        { switchMark, switch: switchStyle },
+        { switchmark, switch: switchStyle },
       );
 
     const classNames = switchStyle(switchVariantProps);
 
     return (
-      <ControlPropsProvider value={switchMarkVariantProps}>
+      <ControlPropsProvider value={switchmarkVariantProps}>
         <ClassNamesProvider value={classNames}>
           <SwitchPrimitive.Root
             ref={ref}
@@ -70,7 +70,7 @@ SwitchRoot.displayName = "SwitchRoot";
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface SwitchControlProps extends SwitchMarkVariantProps, SwitchPrimitive.ControlProps {}
+export interface SwitchControlProps extends SwitchmarkVariantProps, SwitchPrimitive.ControlProps {}
 
 export const SwitchControl = withControlProvider<HTMLDivElement, SwitchControlProps>(
   SwitchPrimitive.Control,

package/src/components/TagGroup/TagGroup.namespace.ts

@@ -1,6 +1,8 @@
 export {
   TagGroupRoot as Root,
   TagGroupItem as Item,
+  TagGroupItemLabel as ItemLabel,
   type TagGroupRootProps as RootProps,
   type TagGroupItemProps as ItemProps,
+  type TagGroupItemLabelProps as ItemLabelProps,
 } from "./TagGroup";

package/src/components/TagGroup/TagGroup.tsx

@@ -4,13 +4,14 @@ import {
   tagGroupItem,
   type TagGroupItemVariantProps,
 } from "@seed-design/css/recipes/tag-group-item";
-import { createRecipeContext } from "../../utils/createRecipeContext";
 import { forwardRef, Children, Fragment } from "react";
 import clsx from "clsx";
 import { splitMultipleVariantsProps } from "../../utils/splitMultipleVariantsProps";
-import { mergeProps } from "@seed-design/dom-utils";
+import { useStyleProps, type StyleProps } from "../../utils/styled";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 
-const { PropsProvider, useProps } = createRecipeContext(tagGroupItem);
+const { PropsProvider, useProps, withContext, ClassNamesProvider } =
+  createSlotRecipeContext(tagGroupItem);
 
 export interface TagGroupRootProps
   extends TagGroupVariantProps,
@@ -50,14 +51,37 @@ export const TagGroupRoot = forwardRef<HTMLSpanElement, TagGroupRootProps>(
 
 export interface TagGroupItemProps
   extends TagGroupItemVariantProps,
+    Pick<StyleProps, "flexShrink">,
     PrimitiveProps,
     React.HTMLAttributes<HTMLSpanElement> {}
 
-export const TagGroupItem = forwardRef<HTMLSpanElement, TagGroupItemProps>((props, ref) => {
-  const parentVariantProps = useProps();
+export const TagGroupItem = forwardRef<HTMLSpanElement, TagGroupItemProps>(
+  ({ className, ...props }, ref) => {
+    const parentVariantProps = useProps();
 
-  const [variantProps, { className, ...otherProps }] = tagGroupItem.splitVariantProps(props);
-  const recipeClassName = tagGroupItem(mergeProps(parentVariantProps, variantProps));
+    const [variantProps, otherProps] = tagGroupItem.splitVariantProps(props);
+    const classNames = tagGroupItem({ ...parentVariantProps, ...variantProps });
 
-  return <Primitive.span ref={ref} className={clsx(recipeClassName, className)} {...otherProps} />;
-});
+    const { style, restProps } = useStyleProps(otherProps);
+
+    return (
+      <ClassNamesProvider value={classNames}>
+        <Primitive.span
+          ref={ref}
+          style={style}
+          className={clsx(classNames.root, className)}
+          {...restProps}
+        />
+      </ClassNamesProvider>
+    );
+  },
+);
+
+export interface TagGroupItemLabelProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const TagGroupItemLabel = withContext<HTMLSpanElement, TagGroupItemLabelProps>(
+  Primitive.span,
+  "label",
+);

package/src/components/TagGroup/index.ts

@@ -1,8 +1,10 @@
 export {
   TagGroupRoot,
   TagGroupItem,
+  TagGroupItemLabel,
   type TagGroupRootProps,
   type TagGroupItemProps,
+  type TagGroupItemLabelProps,
 } from "./TagGroup";
 
 export * as TagGroup from "./TagGroup.namespace";

package/src/components/index.ts

@@ -2,6 +2,7 @@ export * from "./ActionButton";
 export * from "./ActionChip";
 export * from "./ActionSheet";
 export * from "./Article";
+export * from "./AspectRatio";
 export * from "./Avatar";
 export * from "./Badge";
 export * from "./BottomSheet";
@@ -23,12 +24,16 @@ export * from "./ExtendedFab";
 export * from "./Fab";
 export * from "./Field";
 export * from "./FieldButton";
+export * from "./Fieldset";
 export * from "./Flex";
 export * from "./Float";
 export * from "./FloatingActionButton";
+export * from "./Grid";
+export * from "./GridItem";
 export * from "./HelpBubble";
 export * from "./Icon";
 export * from "./IdentityPlaceholder";
+export * from "./ImageFrame";
 export * from "./Inline";
 export * from "./InlineBanner";
 export * from "./LinkContent";
@@ -43,6 +48,7 @@ export * from "./Portal";
 export * from "./ProgressCircle";
 export * from "./PullToRefresh";
 export * from "./RadioGroup";
+export * from "./RadioGroupField";
 export * from "./ReactionButton";
 export * from "./ResponsivePair";
 export * from "./ScrollFog";

package/src/utils/styled.tsx

@@ -471,6 +471,11 @@ export interface StyleProps {
     | "spaceBetween" // @deprecated Use `space-between` instead.
     | "spaceAround"; // @deprecated Use `space-around` instead.
 
+  /**
+   * In flexbox layout, this property is ignored.
+   */
+  justifySelf?: "center" | "start" | "end" | "stretch";
+
   alignItems?:
     | "flex-start"
     | "flex-end"
@@ -497,6 +502,13 @@ export interface StyleProps {
 
   gap?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
 
+  // Grid Item
+  // NOTE: gridArea는 지원하지 않습니다.
+  // grid-area가 grid-column/row의 shorthand이므로 CSS 변수로 동시에 바인딩하면 충돌합니다.
+  gridColumn?: string;
+
+  gridRow?: string;
+
   // NOTE: Not sure how to treat transform/translate right now, mark as unstable until we have a better solution.
   unstable_transform?: string;
 
@@ -577,10 +589,13 @@ export function useStyleProps<T extends UseStyleProps>(
     flexDirection,
     flexWrap,
     justifyContent,
+    justifySelf,
     alignItems,
     alignContent,
     alignSelf,
     gap,
+    gridColumn,
+    gridRow,
     unstable_transform,
     _active,
     style,
@@ -644,9 +659,12 @@ export function useStyleProps<T extends UseStyleProps>(
       "--seed-box-flex-direction": handleFlexDirection(flexDirection),
       "--seed-box-flex-wrap": flexWrap === true ? "wrap" : flexWrap,
       "--seed-box-justify-content": handleJustifyContent(justifyContent),
+      "--seed-box-justify-self": justifySelf,
       "--seed-box-align-items": handleAlignItems(alignItems),
       "--seed-box-align-content": handleAlignItems(alignContent),
       "--seed-box-align-self": handleAlignItems(alignSelf),
+      "--seed-box-grid-column": gridColumn,
+      "--seed-box-grid-row": gridRow,
       "--seed-box-unstable-transform": unstable_transform,
 
       // Active