@vygruppen/spor-react 11.3.10 → 12.0.1

package/src/input/Combobox.tsx

@@ -1,45 +1,37 @@
-import React, { useEffect, useId, useRef, useState } from "react";
+"use client";
+import React, {
+  forwardRef,
+  ReactNode,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from "react";
 import { AriaComboBoxProps, useComboBox, useFilter } from "react-aria";
 import { useComboBoxState } from "react-stately";
 import { ColorSpinner, Input, InputProps, ListBox } from "..";
 import { Popover } from "./Popover";
 
-type OverridableInputProps = Pick<
+export type ComboboxProps<T> = Exclude<
   InputProps,
-  | "marginTop"
-  | "marginBottom"
-  | "marginRight"
-  | "marginLeft"
-  | "marginY"
-  | "marginX"
-  | "paddingTop"
-  | "paddingBottom"
-  | "paddingLeft"
-  | "paddingRight"
-  | "paddingY"
-  | "paddingX"
-  | "leftIcon"
-  | "rightIcon"
-  | "borderTopRightRadius"
-  | "borderTopLeftRadius"
-  | "borderBottomRightRadius"
-  | "borderBottomLeftRadius"
-  | "onFocus"
->;
-
-export type ComboboxProps<T> = AriaComboBoxProps<T> & {
-  /** The label of the combobox */
-  label: string;
-  /** Whether or not the combobox is waiting for new suggestions */
-  isLoading?: boolean;
-  /** Optional UI to show when there are no matching items */
-  emptyContent?: React.ReactNode;
-  /** A ref to the input field */
-  inputRef?: React.RefObject<HTMLInputElement>;
-  /** If you want to allow an empty collection */
-  allowsEmptyCollection?: boolean;
-  variant?: "base" | "floating";
-} & OverridableInputProps;
+  "variant" | "colorPalette" | "size"
+> &
+  AriaComboBoxProps<T> & {
+    /** The label of the combobox */
+    label: string;
+    /** Whether or not the combobox is waiting for new suggestions */
+    loading?: boolean;
+    /** Optional UI to show when there are no matching items */
+    emptyContent?: React.ReactNode;
+    /** A ref to the input field */
+    inputRef?: React.RefObject<HTMLInputElement>;
+    /** If you want to allow an empty collection */
+    allowsEmptyCollection?: boolean;
+    lefticon?: ReactNode;
+    righticon?: ReactNode;
+    variant?: "core" | "floating";
+    children?: React.ReactNode;
+  };
 /**
  * A combobox is a combination of an input and a list of suggestions.
  *
@@ -64,150 +56,158 @@ export type ComboboxProps<T> = AriaComboBoxProps<T> & {
  * ```
  */
 
-export function Combobox<T extends object>({
-  label,
-  isLoading,
-  leftIcon,
-  rightIcon,
-  borderBottomLeftRadius = "sm",
-  borderBottomRightRadius = "sm",
-  borderTopLeftRadius = "sm",
-  borderTopRightRadius = "sm",
-  marginBottom,
-  marginTop,
-  marginX,
-  marginY,
-  marginRight,
-  marginLeft,
-  paddingBottom,
-  paddingRight,
-  paddingTop,
-  paddingLeft,
-  paddingX,
-  paddingY,
-  emptyContent,
-  inputRef: externalInputRef,
-  allowsEmptyCollection,
-  variant,
-  ...rest
-}: ComboboxProps<T>) {
-  const { contains } = useFilter({ sensitivity: "base" });
+export const Combobox = forwardRef<HTMLDivElement, ComboboxProps<object>>(
+  (props) => {
+    const {
+      label,
+      loading,
+      lefticon,
+      righticon,
+      borderBottomLeftRadius = "sm",
+      borderBottomRightRadius = "sm",
+      borderTopLeftRadius = "sm",
+      borderTopRightRadius = "sm",
+      marginBottom,
+      marginTop,
+      marginX,
+      marginY,
+      marginRight,
+      marginLeft,
+      paddingBottom,
+      paddingRight,
+      paddingTop,
+      paddingLeft,
+      paddingX,
+      paddingY,
+      emptyContent,
+      inputRef: externalInputRef,
+      allowsEmptyCollection /* Is this being used? */,
+      children,
+      variant,
+    } = props;
+    const { contains } = useFilter({ sensitivity: "base" });
 
-  const fallbackInputRef = useRef<HTMLInputElement>(null);
-  const inputRef = externalInputRef ?? fallbackInputRef;
-  const listBoxRef = useRef<HTMLUListElement>(null);
-  const popoverRef = useRef(null);
+    const fallbackInputRef = useRef<HTMLInputElement>(null);
+    const inputRef = externalInputRef ?? fallbackInputRef;
+    const listBoxRef = useRef<HTMLUListElement>(null);
+    const popoverRef = useRef(null);
 
-  const listboxId = `${useId()}-listbox`;
+    const listboxId = `${useId()}-listbox`;
 
-  const inputWidth = useInputWidth(inputRef);
+    const inputWidth = useInputWidth(inputRef);
 
-  const state = useComboBoxState({
-    allowsEmptyCollection: Boolean(emptyContent),
-    defaultFilter: contains,
-    shouldCloseOnBlur: true,
-    ...rest,
-  });
+    const state = useComboBoxState({
+      defaultFilter: contains,
+      shouldCloseOnBlur: true,
+      ...props,
+    });
 
-  const comboBoxProps: OverridableInputProps = {
-    borderTopLeftRadius,
-    borderTopRightRadius,
-    marginBottom,
-    marginTop,
-    marginRight,
-    marginLeft,
-    marginX,
-    marginY,
-    paddingBottom,
-    paddingRight,
-    paddingTop,
-    paddingLeft,
-    paddingX,
-    paddingY,
-    leftIcon,
-  };
+    const comboBoxProps = {
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      marginBottom,
+      marginTop,
+      marginRight,
+      marginLeft,
+      marginX,
+      marginY,
+      paddingBottom,
+      paddingRight,
+      paddingTop,
+      paddingLeft,
+      paddingX,
+      paddingY,
+      lefticon,
+    };
 
-  const {
-    inputProps: { size, ...inputProps },
-    listBoxProps,
-  } = useComboBox(
-    {
-      ...rest,
-      inputRef,
-      listBoxRef,
-      popoverRef,
-      label,
-    },
-    state,
-  );
-
-  return (
-    <>
-      <Input
-        {...styleProps(comboBoxProps)}
-        aria-haspopup="listbox"
-        ref={inputRef}
-        role="combobox"
-        label={label}
-        variant={variant}
-        aria-expanded={state.isOpen}
-        aria-autocomplete="list"
-        aria-controls={listboxId}
-        borderBottomLeftRadius={
-          state.isOpen && !isLoading ? 0 : borderBottomLeftRadius
-        }
-        borderBottomRightRadius={
-          state.isOpen && !isLoading ? 0 : borderBottomRightRadius
-        }
-        {...inputProps}
-        rightIcon={
-          isLoading ? (
-            <ColorSpinner
-              width="1.5rem"
-              alignSelf="center"
-              paddingRight={paddingRight}
-              css={{
-                div: {
-                  display: "flex",
-                  alignItems: "center",
-                },
-              }}
-            />
-          ) : (
-            rightIcon
-          )
-        }
-      />
-      <span aria-hidden="true" data-trigger="multiselect"></span>
-      {state.isOpen && !isLoading && (
-        <Popover
-          state={state}
-          triggerRef={inputRef as any}
-          ref={popoverRef}
-          isNonModal
-          placement="bottom start"
-          shouldFlip={false}
-          hasBackdrop={false}
-          // The minimum padding should be 0, because the popover always should be
-          // aligned with the input field regardless of the left padding in the container.
-          containerPadding={0}
-        >
-          <ListBox
-            {...listBoxProps}
+    const {
+      inputProps: { size, ...inputProps },
+      listBoxProps,
+    } = useComboBox(
+      {
+        ...props,
+        inputRef,
+        listBoxRef,
+        popoverRef,
+        label,
+      },
+      state,
+    );
+    return (
+      <>
+        <Input
+          {...styleProps(comboBoxProps)}
+          aria-haspopup="listbox"
+          ref={inputRef}
+          role="combobox"
+          label={label}
+          variant={variant}
+          aria-expanded={state.isOpen}
+          aria-autocomplete="list"
+          aria-controls={listboxId}
+          borderBottomLeftRadius={
+            state.isOpen && !loading ? 0 : borderBottomLeftRadius
+          }
+          borderBottomRightRadius={
+            state.isOpen && !loading ? 0 : borderBottomRightRadius
+          }
+          _active={{ backgroundColor: "core.surface.active" }}
+          {...inputProps}
+          endElement={
+            loading ? (
+              <ColorSpinner
+                width="1.5rem"
+                alignSelf="center"
+                paddingRight={paddingRight}
+                css={{
+                  div: {
+                    display: "flex",
+                    alignItems: "center",
+                  },
+                }}
+              />
+            ) : (
+              righticon
+            )
+          }
+          placeholder=""
+        />
+        <span aria-hidden="true" data-trigger="multiselect"></span>
+        {state.isOpen && !loading && (
+          <Popover
             state={state}
-            id={listboxId}
-            listBoxRef={listBoxRef}
-            emptyContent={emptyContent}
-            maxWidth={inputWidth}
-            variant={variant}
+            triggerRef={inputRef as any}
+            ref={popoverRef}
+            isNonModal
+            placement="bottom start"
+            shouldFlip={false}
+            hasBackdrop={false}
+            // The minimum padding should be 0, because the popover always should be
+            // aligned with the input field regardless of the left padding in the container.
+            containerPadding={0}
           >
-            {rest.children}
-          </ListBox>
-        </Popover>
-      )}
-    </>
-  );
-}
+            <ListBox
+              {...{
+                autoFocus:
+                  typeof listBoxProps.autoFocus === "boolean"
+                    ? listBoxProps.autoFocus
+                    : undefined,
+              }}
+              state={state}
+              id={listboxId}
+              listBoxRef={listBoxRef}
+              emptyContent={emptyContent}
+              maxWidth={inputWidth}
+              variant={variant}
+            >
+              {children}
+            </ListBox>
+          </Popover>
+        )}
+      </>
+    );
+  },
+);
 
 const useInputWidth = (inputRef: React.RefObject<HTMLInputElement>) => {
   const [inputWidth, setInputWidth] = useState("auto");

package/src/input/CountryCodeSelect.tsx

@@ -1,50 +1,64 @@
-import React from "react";
-import { BoxProps, InfoSelect, Item, createTexts, useTranslation } from "..";
+"use client";
 
+import { createListCollection } from "@chakra-ui/react";
 import { getSupportedCallingCodes } from "awesome-phonenumber";
+import React, { forwardRef } from "react";
+import {
+  Select,
+  SelectItem,
+  SelectProps,
+  createTexts,
+  useTranslation,
+} from "..";
 
 const prioritizedCountryCodes = [
-  { key: "+47", value: "+47" },
-  { key: "+46", value: "+46" },
-  { key: "+45", value: "+45" },
+  { label: "+47", value: "+47" },
+  { label: "+46", value: "+46" },
+  { label: "+45", value: "+45" },
 ];
 
 const sortedCallingCodes = getSupportedCallingCodes()
   .sort((a, b) => Number(a) - Number(b))
   .map((code) => ({
-    key: `+${code}`,
+    label: `+${code}`,
     value: `+${code}`,
   }))
   .filter(
-    (code) => !prioritizedCountryCodes.some((pCode) => pCode.key === code.key),
+    (code) =>
+      !prioritizedCountryCodes.some((pCode) => pCode.label === code.label),
   );
-const callingCodes = [...prioritizedCountryCodes, ...sortedCallingCodes];
-
-type CountryCodeSelectProps = {
-  value: string;
-  onChange: (value: string | number) => void;
-  name: string;
-  width?: BoxProps["width"];
-  height?: BoxProps["height"];
-  variant?: "base" | "floating";
-};
-export const CountryCodeSelect = (props: CountryCodeSelectProps) => {
+
+export const callingCodes = createListCollection({
+  items: [...prioritizedCountryCodes, ...sortedCallingCodes],
+});
+
+type CountryCodeSelectProps = Omit<SelectProps, "label" | "collection">;
+
+export const CountryCodeSelect = forwardRef<
+  HTMLDivElement,
+  CountryCodeSelectProps
+>((props, ref) => {
   const { t } = useTranslation();
+  const invalid = props.invalid;
 
   return (
-    <InfoSelect
-      label={t(texts.countryCode)}
-      isLabelSrOnly={true}
-      items={callingCodes}
-      variant={props.variant}
+    <Select
       {...props}
+      ref={ref}
+      positioning={{ placement: "bottom", flip: false }}
+      collection={callingCodes}
+      lazyMount
+      aria-label={t(texts.countryCode)}
+      variant={"rightSideSquare"}
     >
-      {(item) => <Item key={item.key}>{item.key}</Item>}
-    </InfoSelect>
+      {callingCodes.items.map((code) => (
+        <SelectItem key={code.label} item={code}>
+          {code.label}
+        </SelectItem>
+      ))}
+    </Select>
   );
-};
-
-export default CountryCodeSelect;
+});
 
 const texts = createTexts({
   countryCode: {

package/src/input/Dialog.tsx

@@ -1,3 +1,4 @@
+"use client";
 import { Box, Heading } from "@chakra-ui/react";
 import React, { useRef } from "react";
 import { AriaDialogProps, useDialog } from "react-aria";

package/src/input/Field.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import {
+  Field as ChakraField,
+  RecipeVariantProps,
+  useSlotRecipe,
+} from "@chakra-ui/react";
+import * as React from "react";
+import { fieldSlotRecipe } from "../theme/slot-recipes/field";
+
+type FieldVariantProps = RecipeVariantProps<typeof fieldSlotRecipe>;
+
+export type FieldProps = Omit<ChakraField.RootProps, "label"> &
+  React.PropsWithChildren<FieldVariantProps> & {
+    /** Label for the component */
+    label?: React.ReactNode;
+    /** Add helpertext underneath the input */
+    helperText?: React.ReactNode;
+    /** Add error text underneath the input */
+    errorText?: React.ReactNode;
+  };
+
+/**
+ *
+ * Field is a component that wraps around other input components, like `Input` and `Select`.
+ *
+ * It can have a label, helper text, and error text.
+ *
+ * ```tsx
+ *
+ * <Field label="E-mail">
+ *  <Input />
+ * </Field>
+ *
+ * ```
+ *
+ * This component is not exported and should be used as a wrapper for other input components.
+ */
+
+export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
+  (props, ref) => {
+    const { label, children, helperText, errorText, ...rest } = props;
+    const recipe = useSlotRecipe({ key: "field" });
+    const styles = recipe({ label, helperText, errorText });
+    return (
+      <ChakraField.Root ref={ref} {...rest} css={styles.root}>
+        {children}
+        {helperText && (
+          <ChakraField.HelperText>{helperText}</ChakraField.HelperText>
+        )}
+        {label && (
+          <ChakraField.Label css={styles.label}>{label}</ChakraField.Label>
+        )}
+        {errorText && (
+          <ChakraField.ErrorText>{errorText}</ChakraField.ErrorText>
+        )}
+      </ChakraField.Root>
+    );
+  },
+);
+
+export const FieldErrorText = React.forwardRef<
+  HTMLDivElement,
+  ChakraField.ErrorTextProps
+>((props, ref) => {
+  return (
+    <ChakraField.ErrorText ref={ref}>{props.children}</ChakraField.ErrorText>
+  );
+});
+
+export const FieldLabel = ChakraField.Label;

package/src/input/Fieldset.tsx

@@ -0,0 +1,7 @@
+import { Fieldset as ChakraFieldset } from "@chakra-ui/react";
+
+export const Fieldset = ChakraFieldset.Root;
+export const FieldsetLegend = ChakraFieldset.Legend;
+export const FieldsetContent = ChakraFieldset.Content;
+export const FieldsetHelperText = ChakraFieldset.HelperText;
+export const FieldsetErrorText = ChakraFieldset.ErrorText;