@vygruppen/spor-react 11.3.9 → 12.0.0

package/src/input/Input.tsx

@@ -1,23 +1,29 @@
+"use client";
+
+import { inputRecipe } from "@/theme/recipes/input";
 import {
-  Input as ChakraInput,
+  chakra,
   InputProps as ChakraInputProps,
-  FormLabel,
-  InputGroup,
-  InputLeftElement,
-  InputRightElement,
-  forwardRef,
-  useFormControlContext,
+  useRecipe,
+  type RecipeVariantProps,
+  Input as ChakraInput,
 } from "@chakra-ui/react";
-import React, { useId } from "react";
+import React, { forwardRef, PropsWithChildren } from "react";
+import { Field, FieldProps } from "./Field";
+import { InputGroup } from "./InputGroup";
 
-export type InputProps = Omit<ChakraInputProps, "size"> & {
-  /** The input's label */
-  label: string;
-  /** Icon that shows up to the left */
-  leftIcon?: React.ReactNode;
-  /** Icon that shows up to the right */
-  rightIcon?: React.ReactNode;
-};
+export type InputProps = Exclude<
+  ChakraInputProps,
+  "size" | "label" | "colorPalette"
+> &
+  FieldProps & {
+    /** The input's label */
+    label: string;
+    /** Element that shows up to the left */
+    startElement?: React.ReactNode;
+    /** Element that shows up to the right */
+    endElement?: React.ReactNode;
+  };
 /**
  * Inputs let you enter text or other data.
  *
@@ -30,71 +36,60 @@ export type InputProps = Omit<ChakraInputProps, "size"> & {
  * You can also add icons to the left and right of the input. Please use the 24 px icons for this.
  *
  * ```tsx
- * <Input label="E-mail" leftIcon={<EmailOutline24Icon />} />
+ * <Input label="E-mail" startElement={<EmailOutline24Icon />} />
  * ```
  *
- * Input has two variants base, and floating.
+ * Input has two variants core, and floating.
  *
  * ```tsx
- * <Input label="E-mail" leftIcon={<EmailOutline24Icon />} variant="floating" />
+ * <Input label="E-mail" startElement={<EmailOutline24Icon />} variant="floating" />
  * ```
+ *
+ * Field is added to Input, so you can add helperText, errorText, and optionalText.
+ *
+ * ```tsx
+ * <Input label="E-mail" startElement={<EmailOutline24Icon />} helperText="We will never share your email." />
+ * ```
+ *
+ * @see https://spor.vy.no/components/input
  */
-export const Input = forwardRef<InputProps, "input">(
-  ({ label, leftIcon, rightIcon, id, size, ...props }, ref) => {
-    const formControlProps = useFormControlContext();
-    const fallbackId = `input-${useId()}`;
-    const inputId = id ?? formControlProps?.id ?? fallbackId;
-    const labelId = `${useId()}-label`;
-    return (
-      <InputGroup position="relative">
-        {leftIcon && (
-          <InputLeftElement pointerEvents="none">{leftIcon}</InputLeftElement>
-        )}
-        <ChakraInput
-          data-attachable
-          paddingLeft={leftIcon ? 7 : undefined}
-          paddingRight={rightIcon ? 7 : undefined}
-          {...props}
-          id={inputId}
-          aria-labelledby={labelId}
-          ref={ref}
-          overflow="hidden"
-          placeholder=" " // This is needed to make the label work as expected
-          css={{
-            "&::-webkit-search-cancel-button": {
-              WebkitAppearance: "none",
-            },
-          }}
-        />
 
-        <FormLabel
-          htmlFor={inputId}
-          id={labelId}
-          pointerEvents="none"
-          sx={{
-            position: "absolute",
-            left: "2.6rem",
-            top: "26.9%",
-            fontSize: "1.13rem",
-            pointerEvents: "none",
-            margin: 0,
-            zIndex: 2,
-            "input:focus + &, input[data-has-value] + &": {
-              color: "var(--chakra-colors-gray-600)",
-            },
-            "input[data-has-value] + &": {
-              transform: "translateY(-40%) scale(0.9)",
-            },
-          }}
+const StyledInput = chakra(ChakraInput, inputRecipe);
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      startElement,
+      endElement,
+      label,
+      invalid,
+      helperText,
+      errorText,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <Field invalid={invalid} helperText={helperText} errorText={errorText}>
+        <InputGroup
+          endElement={endElement && endElement}
+          startElement={startElement && startElement}
+          width="100%"
+          position="relative"
+          label={label}
         >
-          {label}
-        </FormLabel>
-        {rightIcon && (
-          <InputRightElement pointerEvents="none">
-            {rightIcon}
-          </InputRightElement>
-        )}
-      </InputGroup>
+          <StyledInput
+            data-attachable
+            ref={ref}
+            className="peer"
+            overflow="hidden"
+            paddingLeft={startElement ? "2.6rem" : undefined}
+            paddingRight={endElement ? "2.6rem" : undefined}
+            placeholder=""
+            {...props}
+          />
+        </InputGroup>
+      </Field>
     );
   },
 );

package/src/input/InputGroup.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import type { InputElementProps, GroupProps } from "@chakra-ui/react";
+import { Group, InputElement } from "@chakra-ui/react";
+import * as React from "react";
+import { FieldLabel } from "./Field";
+
+export type InputGroupProps = GroupProps & {
+  startElementProps?: InputElementProps;
+  endElementProps?: InputElementProps;
+  startElement?: React.ReactNode;
+  endElement?: React.ReactNode;
+  children: React.ReactElement;
+  label?: string;
+};
+
+/**
+ *
+ * InputGroup is a wrapper for inputs that have a startElement and/or endElement.
+ *
+ * It is not exported to users, but used internally in the Input component.
+ *
+ */
+
+export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
+  (props, ref) => {
+    const {
+      startElement,
+      startElementProps,
+      endElement,
+      endElementProps,
+      label,
+      children,
+      attached,
+      ...rest
+    } = props;
+
+    return (
+      <Group ref={ref} {...rest}>
+        {startElement && (
+          <InputElement
+            pointerEvents="none"
+            paddingX={2}
+            {...startElementProps}
+          >
+            {startElement}
+          </InputElement>
+        )}
+        {React.cloneElement(children, {
+          ...children.props,
+        })}
+        {label && (
+          <FieldLabel left={startElement ? 4 : "0"} right={endElement ? 4 : 0}>
+            {label}
+          </FieldLabel>
+        )}
+
+        {endElement && (
+          <InputElement placement="end" paddingX={2} {...endElementProps}>
+            {endElement}
+          </InputElement>
+        )}
+      </Group>
+    );
+  },
+);

package/src/input/ListBox.tsx

@@ -1,13 +1,20 @@
+"use client";
 import {
   Box,
-  List,
   ListItem,
-  useColorModeValue,
-  useMultiStyleConfig,
+  ListRootProps,
+  RecipeVariantProps,
+  useSlotRecipe,
   type BoxProps,
 } from "@chakra-ui/react";
 import type { Node } from "@react-types/shared";
-import React, { useContext, useEffect, useRef } from "react";
+import React, {
+  forwardRef,
+  PropsWithChildren,
+  useContext,
+  useEffect,
+  useRef,
+} from "react";
 import {
   AriaListBoxProps,
   useListBox,
@@ -15,21 +22,30 @@ import {
   useOption,
 } from "react-aria";
 import { type ListState, type SelectState } from "react-stately";
+import { List } from "..";
+import { useColorModeValue } from "../color-mode";
+import { listBoxSlotRecipe } from "../theme/slot-recipes/listbox";
 
 export { Item, Section } from "react-stately";
 
+type ListBoxVariantProps = RecipeVariantProps<typeof listBoxSlotRecipe>;
+
 type ListBoxProps<T> = AriaListBoxProps<T> &
-  Omit<BoxProps, "filter" | "autoFocus" | "children"> & {
+  Omit<BoxProps, "filter" | "autoFocus" | "children"> &
+  PropsWithChildren<ListBoxVariantProps> &
+  Exclude<ListRootProps, "variant"> & {
     /** External reference to the ListBox itself */
     listBoxRef: React.RefObject<HTMLUListElement>;
     /** Whether or not the listbox is waiting on new data, i.e. through a autosuggest search */
-    isLoading?: boolean;
+    loading?: boolean;
     /** The state of the listbox, provided externally somehow. */
     state: ListState<T> | SelectState<T>;
     /** UI to render if the collection is empty */
     emptyContent?: React.ReactNode;
     maxWidth?: BoxProps["maxWidth"];
-    variant?: "base" | "floating";
+    variant?: "core" | "floating";
+    children: React.ReactNode;
+    autoFocus?: boolean;
   };
 
 /**
@@ -66,37 +82,34 @@ type ListBoxProps<T> = AriaListBoxProps<T> &
  * );
  * ```
  */
-export function ListBox<T extends object>({
-  isLoading,
-  listBoxRef,
-  state,
-  maxWidth,
-  variant,
-  ...props
-}: ListBoxProps<T>) {
-  const { listBoxProps } = useListBox(props, state, listBoxRef);
-  const styles = useMultiStyleConfig("ListBox", { variant });
 
-  return (
-    <List
-      {...listBoxProps}
-      ref={listBoxRef}
-      sx={styles.container}
-      aria-busy={isLoading}
-      maxWidth={maxWidth}
-      variant={variant}
-    >
-      {state.collection.size === 0 && props.emptyContent}
-      {Array.from(state.collection).map((item) =>
-        item.type === "section" ? (
-          <ListBoxSection key={item.key} section={item} state={state} />
-        ) : (
-          <Option key={item.key} item={item} state={state} />
-        ),
-      )}
-    </List>
-  );
-}
+export const ListBox = forwardRef<HTMLDivElement, ListBoxProps<object>>(
+  (props) => {
+    const { loading, listBoxRef, state, maxWidth, variant, children } = props;
+    const { listBoxProps } = useListBox(props, state, listBoxRef);
+    const recipe = useSlotRecipe({ key: "listBox" });
+    const styles = recipe({ variant });
+    return (
+      <List
+        {...listBoxProps}
+        ref={listBoxRef}
+        css={styles.root}
+        aria-busy={loading}
+        maxWidth={maxWidth}
+      >
+        {state.collection.size === 0 && props.emptyContent}
+        {Array.from(state.collection).map((item) =>
+          item.type === "section" ? (
+            <ListBoxSection key={item.key} section={item} state={state} />
+          ) : (
+            <Option key={item.key} item={item} state={state} />
+          ),
+        )}
+        {children}
+      </List>
+    );
+  },
+);
 
 /**
  * Renders a label for a listbox item.
@@ -105,12 +118,7 @@ export function ListBox<T extends object>({
  */
 export function ItemLabel({ children }: { children: React.ReactNode }) {
   let { labelProps } = useOptionContext();
-  const styles = useMultiStyleConfig("ListBox", {});
-  return (
-    <Box {...labelProps} sx={styles.label}>
-      {children}
-    </Box>
-  );
+  return <Box {...labelProps}>{children}</Box>;
 }
 
 /**
@@ -120,9 +128,10 @@ export function ItemLabel({ children }: { children: React.ReactNode }) {
  */
 export function ItemDescription({ children }: { children: React.ReactNode }) {
   let { descriptionProps } = useOptionContext();
-  const styles = useMultiStyleConfig("ListBox", {});
+  const recipe = useSlotRecipe({ key: "listbox" });
+  const styles = recipe({});
   return (
-    <Box {...descriptionProps} sx={styles.description}>
+    <Box {...descriptionProps} css={styles} fontSize={"xs"}>
       {children}
     </Box>
   );
@@ -144,7 +153,9 @@ function Option({ item, state }: OptionProps) {
     descriptionProps,
   } = useOption({ key: item.key }, state, ref);
 
-  const styles = useMultiStyleConfig("ListBox", {});
+  const recipe = useSlotRecipe({ key: "listBox" });
+  const styles = recipe({});
+
   let dataFields: Record<string, boolean> = {};
   if (isSelected) {
     dataFields["data-selected"] = true;
@@ -173,10 +184,9 @@ function Option({ item, state }: OptionProps) {
       { passive: false, once: true },
     );
   }, []);
-
   return (
     <OptionContext.Provider value={{ labelProps, descriptionProps }}>
-      <ListItem {...optionProps} {...dataFields} ref={ref} sx={styles.item}>
+      <ListItem {...optionProps} {...dataFields} ref={ref} css={styles.item}>
         {item.rendered}
       </ListItem>
     </OptionContext.Provider>
@@ -209,29 +219,32 @@ function ListBoxSection({ section, state }: ListBoxSectionProps) {
 
   const isFirstSection = section.key === state.collection.getFirstKey();
   const titleColor = useColorModeValue("darkGrey", "white");
+
   return (
-    <ListItem {...itemProps}>
-      {section.rendered && (
-        <Box
-          fontSize="mobile.xs"
-          color={titleColor}
-          paddingX={3}
-          paddingY={1}
-          marginTop={isFirstSection ? 0 : 3}
-          textTransform="uppercase"
-          fontWeight="bold"
-          {...headingProps}
-        >
-          {section.rendered}
-        </Box>
-      )}
-      <List {...groupProps} padding={0} listStyleType="none">
-        {Array.from(state.collection.getChildren(section.key)).map(
-          (item: any) => (
-            <Option key={item.key} item={item} state={state} />
-          ),
+    <List>
+      <ListItem {...itemProps} listStyleType={"none"}>
+        {section.rendered && (
+          <Box
+            fontSize="mobile.xs"
+            color={titleColor}
+            paddingX={3}
+            paddingTop={1}
+            marginTop={isFirstSection ? 0 : 2}
+            textTransform="uppercase"
+            fontWeight="bold"
+            {...headingProps}
+          >
+            {section.rendered}
+          </Box>
         )}
-      </List>
-    </ListItem>
+        <List {...groupProps} padding={0} listStyleType="none">
+          {Array.from(state.collection.getChildren(section.key)).map(
+            (item: any) => (
+              <Option key={item.key} item={item} state={state} />
+            ),
+          )}
+        </List>
+      </ListItem>
+    </List>
   );
 }

package/src/input/NativeSelect.tsx

@@ -1,43 +1,78 @@
+"use client";
 import {
-  Select as ChakraSelect,
-  SelectProps as ChakraSelectProps,
-  forwardRef,
-  useMultiStyleConfig,
+  RecipeVariantProps,
+  NativeSelect as ChakraNativeSelect,
+  useSlotRecipe,
 } from "@chakra-ui/react";
-import React from "react";
-import { FormControl, FormLabel } from ".";
+import { DropdownDownFill18Icon } from "@vygruppen/spor-icon-react";
+import * as React from "react";
+import { nativeSelectSlotRecipe } from "../theme/slot-recipes/native-select";
+import { Field } from "./Field";
+
+type NativeSelectVariantProps = RecipeVariantProps<
+  typeof nativeSelectSlotRecipe
+>;
+
+type NativeSelectRootProps =
+  React.PropsWithChildren<NativeSelectVariantProps> & {
+    icon?: React.ReactNode;
+    label: string;
+    invalid?: boolean;
+    disabled?: boolean;
+  };
 
-export type NativeSelectProps = Exclude<
-  ChakraSelectProps,
-  "colorScheme" | "variant" | "size"
-> & { label?: string };
 /**
  * Selects let you choose between several options
  *
  * You should consider only using the Select component when you have more than  4 options. Otherwise, you should use the `<Radio>` component.
  *
- * ```tsx
- * <NativeSelect label="Select level of luxury">
- *  <option>No luxury</option>
- *  <option>Some luxury</option>
- *  <option>Lots of luxury</option>
- *  <option>I'm rich</option>
+ * <NativeSelect label="Choose language">
+ *  <option>Norwegian (Bokmål)</option>
+ *  <option>Norwegian (Nynorsk)</option>
+ *  <option>Sami</option>
+ *  <option>Swedish</option>
+ *  <option>Danish</option>
+ *  <option>Finnish</option>
+ *  <option>English</option>
  * </NativeSelect>
- * ```
+ *
  */
-export const NativeSelect = forwardRef<NativeSelectProps, "select">(
-  ({ label, ...props }, ref) => {
-    const styles = useMultiStyleConfig("Select", props);
-    return (
-      <FormControl>
-        <ChakraSelect
-          data-attachable
-          {...props}
-          rootProps={{ __css: styles.root }}
-          ref={ref}
-        />
-        {label && <FormLabel>{label}</FormLabel>}
-      </FormControl>
-    );
-  },
-);
+
+export const NativeSelect = React.forwardRef<
+  HTMLDivElement,
+  NativeSelectRootProps
+>(function NativeSelect(props, ref) {
+  const {
+    icon,
+    children,
+    variant = "core",
+    label,
+    invalid,
+    disabled,
+    ...rest
+  } = props;
+
+  const recipe = useSlotRecipe({ recipe: nativeSelectSlotRecipe });
+  const styles = recipe({ variant });
+
+  return (
+    <Field label={label} invalid={invalid} disabled={disabled}>
+      <ChakraNativeSelect.Root
+        ref={ref}
+        css={styles.root}
+        aria-disabled={disabled}
+      >
+        <ChakraNativeSelect.Field
+          css={styles.field}
+          aria-invalid={invalid}
+          {...rest}
+        >
+          {children}
+        </ChakraNativeSelect.Field>
+        <ChakraNativeSelect.Indicator css={styles.icon}>
+          <DropdownDownFill18Icon />
+        </ChakraNativeSelect.Indicator>
+      </ChakraNativeSelect.Root>
+    </Field>
+  );
+});