@vygruppen/spor-react 11.3.9 → 12.0.0

package/src/input/CardSelect.tsx

@@ -1,189 +1,102 @@
+"use client";
 import {
-  Box,
-  BoxProps,
-  chakra,
-  Flex,
-  forwardRef,
-  ResponsiveValue,
-  useMultiStyleConfig,
+  PopoverRootProps,
+  usePopoverContext,
+  Portal,
+  Popover as ChakraPopover,
 } from "@chakra-ui/react";
 import {
   DropdownDownFill18Icon,
   DropdownDownFill24Icon,
 } from "@vygruppen/spor-icon-react";
-import React, { useEffect, useRef, useState } from "react";
-import { AriaPositionProps, useButton, useOverlayTrigger } from "react-aria";
-import { useOverlayTriggerState } from "react-stately";
-import { StaticCard } from "..";
-import { Dialog } from "./Dialog";
-import { Popover } from "./Popover";
+import React, { forwardRef, ReactNode } from "react";
+import { Button, ButtonProps, StaticCard, StaticCardProps } from "..";
 
-type CardSelectProps = BoxProps & {
+export const CardSelect = ({ size = "md", ...props }: PopoverRootProps) => {
+  return <ChakraPopover.Root size={size} {...props} />;
+};
+
+export const CardSelectContent = forwardRef<HTMLDivElement, StaticCardProps>(
+  ({ children, ...props }, ref) => {
+    return (
+      <Portal>
+        <ChakraPopover.Positioner>
+          <ChakraPopover.Content ref={ref} padding={0} bg="none">
+            <ChakraPopover.Body {...props}>
+              <StaticCard
+                p="2"
+                bg="bg"
+                border="sm"
+                borderColor="floating.outline"
+                {...props}
+              >
+                {children}
+              </StaticCard>
+            </ChakraPopover.Body>
+          </ChakraPopover.Content>
+        </ChakraPopover.Positioner>
+      </Portal>
+    );
+  },
+);
+
+export type CardSelectTriggerProps = {
   /** The design of the trigger button.
    *
    * - `ghost` is a transparent button with text
-   * - `base` is a button with a border and text
+   * - `core` is a button with a border and text
    * - `floating` is a button with a drop shadow (like a card) and text
    */
-  variant: "base" | "ghost" | "floating";
-  /** The size of the trigger button */
-  size: "sm" | "md" | "lg";
-  /** Whether the card select is open / active, if controlled */
-  isOpen?: boolean;
-  /** The default state of the card select. Defaults to false (closed) */
-  defaultOpen?: boolean;
-  /** Callback for when the card select opens or closes. */
-  onToggle?: (isOpen: boolean) => void;
+  variant?: "core" | "ghost" | "floating";
   /** An optional trigger button icon, rendered to the left of the label */
-  icon?: React.ReactNode;
-  /** The content of the card select */
-  children: React.ReactNode;
-  /** The horizontalOffset of the popover card */
-  crossOffset?: number;
-  /** The position of the popover card */
-  placement?: AriaPositionProps["placement"];
+  icon?: ReactNode;
   /** Whether or not to show the chevron. Defaults to true */
   withChevron?: boolean;
-  /** Defaults to normal */
-  fontWeight?: ResponsiveValue<"normal" | "bold">;
-} & (
-    | {
-        /** The text label of the trigger button */
-        label: string;
-      }
-    | {
-        /** Accessible label for the trigger button */
-        "aria-label": string;
-      }
-  );
+} & Omit<ButtonProps, "variant" | "rightIcon" | "leftIcon">;
 
-/**
- * A card select component.
- *
- * This component consists of a trigger button and a card select popover. The trigger button has several different variants and sizes, and can have an optional icon.
- *
- * ```tsx
- * <CardSelect label="Languages" variant="card" size="md">
- *   <LanguageSettings />
- * </CardSelect>
- * ```
- *
- * @see https://spor.vy.no/components/card-select
- *
- */
-export const CardSelect = forwardRef<CardSelectProps, "button">(
+const bgActiveStyleMap = {
+  core: "core.surface.active",
+  ghost: "ghost.surface.active",
+  floating: "floating.surface.active",
+};
+
+export const CardSelectTrigger = forwardRef<
+  HTMLButtonElement,
+  CardSelectTriggerProps
+>(
   (
-    {
-      variant,
-      size,
-      isOpen: externalIsOpen,
-      defaultOpen = false,
-      onToggle,
-      icon,
-      children,
-      width = "fit-content",
-      crossOffset = 0,
-      placement = "bottom",
-      withChevron = true,
-      fontWeight = "normal",
-      ...props
-    },
-    externalRef,
+    { icon, variant = "core", withChevron = true, size, children, ...props },
+    ref,
   ) => {
-    const label = "label" in props ? props.label : props["aria-label"];
-    const internalRef = useRef<HTMLButtonElement>(null);
-    const triggerRef = (externalRef ??
-      internalRef) as React.RefObject<HTMLButtonElement>;
-
-    const state = useOverlayTriggerState({
-      isOpen: externalIsOpen,
-      onOpenChange: onToggle,
-      defaultOpen,
-    });
-    const { triggerProps, overlayProps } = useOverlayTrigger(
-      { type: "dialog" },
-      state,
-      triggerRef,
-    );
-
-    const { buttonProps } = useButton(triggerProps, triggerRef);
-
-    const styles = useMultiStyleConfig("CardSelect", {
-      variant,
-      size,
-    });
-    useForceRerender(state.isOpen);
-
     const ChevronIcon =
       size === "sm" ? DropdownDownFill18Icon : DropdownDownFill24Icon;
 
+    const { open } = usePopoverContext();
+
     return (
-      <Box {...props}>
-        <chakra.button
-          type="button"
-          ref={triggerRef}
-          sx={styles.trigger}
-          aria-label={label}
-          {...buttonProps}
-          width={width}
-          data-attachable
-        >
-          <Flex gap={1.5} alignItems="center">
-            {icon}
-            <Box as="span" display={props["aria-label"] ? "none" : "inline"}>
-              {label}
-            </Box>
-            {withChevron ? (
+      <ChakraPopover.Trigger asChild ref={ref}>
+        <Button
+          leftIcon={icon}
+          variant={
+            variant === "core"
+              ? "tertiary"
+              : (variant as ButtonProps["variant"])
+          }
+          size={size}
+          bg={open ? bgActiveStyleMap[variant] : undefined}
+          rightIcon={
+            withChevron ? (
               <ChevronIcon
-                transform={state.isOpen ? "rotate(180deg)" : "none"}
+                transform={open ? "rotate(180deg)" : undefined}
+                transition="transform 0.3s"
               />
-            ) : null}
-          </Flex>
-        </chakra.button>
-        {state.isOpen && (
-          <Popover
-            state={state}
-            triggerRef={triggerRef}
-            offset={size === "sm" ? 6 : 12}
-            crossOffset={crossOffset}
-            placement={placement}
-            containerPadding={0}
-          >
-            <StaticCard
-              colorScheme="white"
-              size="md"
-              fontSize={"xs"}
-              border={"sm"}
-              borderColor={"silver"}
-              sx={styles.card}
-              {...overlayProps}
-              maxWidth={(triggerRef.current?.clientWidth ?? 1) * 2}
-            >
-              <Dialog aria-label={label}>{children}</Dialog>
-            </StaticCard>
-          </Popover>
-        )}
-      </Box>
+            ) : null
+          }
+          {...props}
+        >
+          {children}
+        </Button>
+      </ChakraPopover.Trigger>
     );
   },
 );
-
-/**
- * Hold my beer.
- *
- * This is a workaround for a "bug" in react-aria where the overlay doesn't
- * calculate the placement correctly for some reason.
- *
- * This is a hack, which forces React to rerender the component one extra time
- * after the state changes from closed to open.
- *
- * There is probably a better way to do this, but I could not come up with one.
- */
-function useForceRerender(shouldRerender: boolean) {
-  const [_, update] = useState(false);
-  useEffect(() => {
-    if (shouldRerender) {
-      update((x) => !x);
-    }
-  }, [shouldRerender]);
-}

package/src/input/Checkbox.tsx

@@ -1,11 +1,19 @@
+import { checkboxSlotRecipe } from "@/theme/slot-recipes/checkbox";
 import {
   Checkbox as ChakraCheckbox,
-  CheckboxProps as ChakraCheckboxProps,
-  forwardRef,
+  RecipeVariantProps,
 } from "@chakra-ui/react";
-import React from "react";
+import * as React from "react";
+import { PropsWithChildren } from "react";
+
+type CheckboxVariantProps = RecipeVariantProps<typeof checkboxSlotRecipe>;
+
+type CheckboxProps = ChakraCheckbox.RootProps &
+  PropsWithChildren<CheckboxVariantProps> & {
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    rootRef?: React.Ref<HTMLLabelElement>;
+  };
 
-export type CheckboxProps = ChakraCheckboxProps;
 /**
  * Creates a checkbox.
  *
@@ -15,8 +23,24 @@ export type CheckboxProps = ChakraCheckboxProps;
  * <Checkbox>Accept the terms</Checkbox>
  * ```
  *
- * Unlike regular inputs, it doesn't require its own `FormControl`.
+ * Unlike regular inputs, it doesn't require its own `Field`.
  *
  * You can group several of these together with a `CheckboxGroup`.
  */
-export const Checkbox = ChakraCheckbox;
+
+export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  (props, ref) => {
+    const { children, inputProps, rootRef, ...rest } = props;
+    return (
+      <ChakraCheckbox.Root ref={rootRef} {...rest}>
+        <ChakraCheckbox.HiddenInput ref={ref} {...inputProps} />
+        <ChakraCheckbox.Control>
+          <ChakraCheckbox.Indicator />
+        </ChakraCheckbox.Control>
+        {children != null && (
+          <ChakraCheckbox.Label>{children}</ChakraCheckbox.Label>
+        )}
+      </ChakraCheckbox.Root>
+    );
+  },
+);

package/src/input/CheckboxGroup.tsx

@@ -2,19 +2,25 @@ import {
   CheckboxGroup as ChakraCheckboxGroup,
   CheckboxGroupProps as ChakraCheckboxGroupProps,
   Stack,
-  StackDirection,
 } from "@chakra-ui/react";
-import React from "react";
+import React, { forwardRef } from "react";
 
 export type CheckboxGroupProps = Exclude<
   ChakraCheckboxGroupProps,
-  "colorScheme" | "size" | "variant"
-> & { direction?: StackDirection };
+  "colorPalette" | "size" | "variant"
+> & {
+  /* Defaults to row */
+  direction?: "row" | "column";
+  children: React.ReactNode;
+  /* Defaults to 1 */
+  gap?: number | string;
+  [key: string]: any;
+};
 /**
  * Used to group several checkboxes together. You can pass the default value, as well as whether or not they're all disabled
  *
  * ```tsx
- * <CheckboxGroup isDisabled defaultValue={['red', 'blue']}>
+ * <CheckboxGroup disabled defaultValue={['red', 'blue']}>
  *   <Checkbox value="red">Red</Checkbox>
  *   <Checkbox value="blue">Blue</Checkbox>
  *   <Checkbox value="green">Green</Checkbox>
@@ -30,14 +36,17 @@ export type CheckboxGroupProps = Exclude<
  *   <Checkbox>First Class</Checkbox>
  * </CheckboxGroup>
  */
-export const CheckboxGroup = ({
-  direction = "row",
-  children,
-  ...props
-}: CheckboxGroupProps) => {
-  return (
-    <ChakraCheckboxGroup {...props}>
-      <Stack direction={direction}>{children}</Stack>
-    </ChakraCheckboxGroup>
-  );
-};
+
+export const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>(
+  (props, ref) => {
+    const { direction = "row", children, gap = 1, ...rest } = props;
+
+    return (
+      <ChakraCheckboxGroup ref={ref} {...rest}>
+        <Stack direction={direction} gap={gap}>
+          {children}
+        </Stack>
+      </ChakraCheckboxGroup>
+    );
+  },
+);

package/src/input/ChoiceChip.tsx

@@ -1,17 +1,20 @@
+"use client";
+import { choiceChipRecipe } from "@/theme/recipes/choice-chip";
 import {
   chakra,
-  forwardRef,
+  RecipeVariantProps,
+  Span,
   useCheckbox,
-  useMultiStyleConfig,
 } from "@chakra-ui/react";
-import { dataAttr } from "@chakra-ui/utils";
 import { CloseOutline24Icon } from "@vygruppen/spor-icon-react";
-import React, { ChangeEvent, useId } from "react";
+import React, { ChangeEvent, PropsWithChildren, useId } from "react";
 
-export type ChoiceChipProps = {
+type ChoiceChipVariantProps = RecipeVariantProps<typeof choiceChipRecipe>;
+
+export type ChoiceChipProps = PropsWithChildren<ChoiceChipVariantProps> & {
   onChange?: (value: ChangeEvent<HTMLInputElement>) => void;
-  isChecked?: boolean;
-  isDisabled?: boolean;
+  checked?: boolean;
+  disabled?: boolean;
   defaultChecked?: boolean;
   /** The button text */
   children: React.ReactNode;
@@ -19,10 +22,10 @@ export type ChoiceChipProps = {
     default: React.ReactNode;
     checked: React.ReactNode;
   };
-  size?: "xs" | "sm" | "md" | "lg";
   chipType?: "icon" | "choice" | "filter";
-  variant?: "base" | "accent" | "floating";
+  "aria-label"?: string;
 };
+
 /**
  * Choice chips are checkboxes that look like selectable buttons.
  *
@@ -44,82 +47,60 @@ export type ChoiceChipProps = {
  *  <ChoiceChip chipType="filter" icon={<Bus24Icon />}>Bus</ChoiceChip>
  * </Stack>
  *
- * There are also three different variants - `base`, `accent` and `floating`.
+ * There are also three different variants - `core`, `accent` and `floating`.
  *
  * ```tsx
  * <Stack flexDirection="row">
- *   <ChoiceChip variant="base">Bus</ChoiceChip>
+ *   <ChoiceChip variant="core">Bus</ChoiceChip>
  *   <ChoiceChip variant="accent">Boat</ChoiceChip>
  *   <ChoiceChip variant="floating">Train</ChoiceChip>
  * </Stack>
  * ```
  */
-export const ChoiceChip = forwardRef(
-  (
-    {
-      children,
-      icon,
-      isDisabled,
-      size = "sm",
-      chipType = "choice",
-      variant = "base",
-      ...props
-    }: ChoiceChipProps,
-    ref,
-  ) => {
-    const {
-      state,
-      getInputProps,
-      getCheckboxProps,
-      getRootProps,
-      getLabelProps,
-    } = useCheckbox(props);
-    const styles = useMultiStyleConfig("ChoiceChip", {
-      size,
-      chipType,
-      variant,
-      icon,
-      hasLabel: chipType !== "icon",
-    });
 
-    const id = `choice-chip-${useId()}`;
+const ChoiceChipStyledDiv = chakra("div", choiceChipRecipe);
 
-    return (
-      <chakra.label
-        {...getRootProps()}
-        htmlFor={id}
-        aria-label={String(children)}
-      >
-        <chakra.input
-          {...getInputProps({}, ref)}
-          id={id}
-          disabled={isDisabled || state.isDisabled}
-        />
-        <chakra.div
-          {...getLabelProps()}
-          __css={styles.container}
-          data-checked={dataAttr(state.isChecked)}
-          data-hover={dataAttr(state.isHovered)}
-          data-focus={dataAttr(state.isFocused)}
-          data-active={dataAttr(state.isActive)}
-          data-disabled={dataAttr(isDisabled || state.isDisabled)}
-        >
-          {icon && (
-            <chakra.span __css={styles.icon}>
-              {state.isChecked ? icon.checked : icon.default}
-            </chakra.span>
-          )}
-          {chipType !== "icon" && (
-            <chakra.span __css={styles.label} {...getCheckboxProps()}>
-              {children}
-            </chakra.span>
-          )}
+export const ChoiceChip = ({
+  children,
+  icon,
+  size = "sm",
+  chipType = "choice",
+  variant = "core",
+  ...props
+}: ChoiceChipProps) => {
+  const {
+    getControlProps,
+    disabled,
+    getLabelProps,
+    getHiddenInputProps,
+    setChecked,
+    checked,
+  } = useCheckbox(props);
 
-          {chipType === "filter" && state.isChecked && (
-            <CloseOutline24Icon marginLeft={1.5} />
-          )}
-        </chakra.div>
-      </chakra.label>
-    );
-  },
-);
+  return (
+    <chakra.label
+      {...getLabelProps()}
+      aria-label={props["aria-label"] ?? String(children)}
+    >
+      <chakra.input
+        {...getHiddenInputProps()}
+        disabled={disabled}
+        defaultChecked={checked}
+        value={checked ? "on" : "off"}
+        type="checkbox"
+        aria-checked={checked}
+        onClick={() => {
+          setChecked(!checked);
+        }}
+      />
+      <ChoiceChipStyledDiv {...getControlProps()} size={size} variant={variant}>
+        {icon && <Span>{checked ? icon.checked : icon.default}</Span>}
+        {chipType !== "icon" && <Span>{children}</Span>}
+
+        {chipType === "filter" && checked && (
+          <CloseOutline24Icon marginLeft={1.5} />
+        )}
+      </ChoiceChipStyledDiv>
+    </chakra.label>
+  );
+};