@vygruppen/spor-react 11.3.9 → 12.0.0

package/src/input/PhoneNumberInput.tsx

@@ -1,33 +1,26 @@
-import { BoxProps, forwardRef, useControllableState } from "@chakra-ui/react";
-import React from "react";
-import { Input, createTexts, useTranslation } from "..";
+"use client";
+import { useControllableState } from "@chakra-ui/react";
+import React, { forwardRef } from "react";
+import { Input, InputProps, createTexts, useTranslation } from "..";
 import { AttachedInputs } from "./AttachedInputs";
 import { CountryCodeSelect } from "./CountryCodeSelect";
-import { As } from "@chakra-ui/system";
 
 export type CountryCodeAndPhoneNumber = {
   countryCode: string;
   nationalNumber: string;
 };
-export type PhoneNumberInputProps = Omit<BoxProps, "onChange"> & {
+
+type PhoneNumberInputProps = InputProps & {
   /** The label. Defaults to a localized version of "Phone number" */
   label?: string;
-  /** The root name.
-   *
-   * Please note that when specifying the name, the rendered names will be `${name}-country-code` and `${name}-phone-number` unless a name is provided for both countryCode and nationalNumber.
-   */
-  name?:
-    | string
-    | {
-        countryCode: string;
-        nationalNumber: string;
-      };
   /** Callback for when the country code or phone number changes */
-  onChange?: (change: CountryCodeAndPhoneNumber) => void;
+  onValueChange?: (change: CountryCodeAndPhoneNumber) => void;
   /** The optional value of the country code and phone number */
   value?: CountryCodeAndPhoneNumber;
-  variant?: "base" | "floating";
-  isOptional?: boolean;
+  /** Returns an extra optional text when true */
+  optional?: boolean;
+  invalid?: boolean;
+  errorText?: string;
 };
 /**
  * A component for entering phone numbers.
@@ -46,80 +39,84 @@ export type PhoneNumberInputProps = Omit<BoxProps, "onChange"> & {
  * />
  * ```
  */
-export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
-  (
-    {
-      label: externalLabel,
-      name,
-      value: externalValue,
-      onChange: externalOnChange,
-      variant,
-      isOptional,
-      ...boxProps
+
+export const PhoneNumberInput = forwardRef<
+  HTMLInputElement,
+  PhoneNumberInputProps
+>((props, ref) => {
+  const {
+    label: externalLabel,
+    value: externalValue,
+    onValueChange: externalOnChange,
+    variant,
+    optional,
+    invalid,
+    errorText,
+  } = props;
+
+  const { t } = useTranslation();
+  const label =
+    externalLabel ??
+    (optional ? t(texts.phoneNumberOptional) : t(texts.phoneNumber));
+
+  const [value, onChange] = useControllableState({
+    value: externalValue,
+    onChange: externalOnChange,
+    defaultValue: {
+      countryCode: "+47",
+      nationalNumber: "",
     },
-    ref,
-  ) => {
-    const { t } = useTranslation();
-    const label =
-      externalLabel ??
-      (isOptional ? t(texts.phoneNumberOptional) : t(texts.phoneNumber));
-    const [value, onChange] = useControllableState({
-      value: externalValue,
-      onChange: externalOnChange,
-      defaultValue: {
-        countryCode: "+47",
-        nationalNumber: "",
-      },
+  });
+
+  const handleCountryCodeChange = (details: { value: string[] }) => {
+    const countryCode = details.value[0];
+    onChange({
+      countryCode: countryCode,
+      nationalNumber: value.nationalNumber,
     });
-    return (
-      <AttachedInputs {...boxProps}>
+  };
+
+  return (
+    <AttachedInputs
+      border={invalid ? "1px solid" : "none"}
+      borderColor={invalid ? "outline.error" : "none"}
+      outline={invalid ? "1px solid" : "none"}
+      outlineColor={invalid ? "outline.error" : "none"}
+      borderRadius={invalid ? "sm" : "none"}
+    >
+      <>
         <CountryCodeSelect
-          value={value.countryCode}
-          onChange={(countryCode) =>
-            onChange({
-              countryCode: countryCode as string,
-              nationalNumber: value.nationalNumber,
-            })
-          }
-          name={
-            name
-              ? typeof name !== "string" && name.countryCode
-                ? name.countryCode
-                : `${name}-country-code`
-              : "country-code"
-          }
+          value={[value.countryCode]}
+          onValueChange={handleCountryCodeChange}
           height="100%"
           width="6.25rem"
           variant={variant}
+          data-state="on"
         />
         <Input
           ref={ref}
           type="tel"
-          label={label}
           value={value.nationalNumber}
-          name={
-            name
-              ? typeof name !== "string" && name.nationalNumber
-                ? name.nationalNumber
-                : `${name}-phone-number`
-              : "phone-number"
-          }
+          invalid={invalid}
+          errorText={errorText}
           onChange={(e) => {
+            const target = e.target as HTMLInputElement;
             // Removes everything but numbers, spaces and dashes
-            const strippedValue = e.target.value.replace(/[^\d\s-]/g, "");
+            const strippedValue = target.value.replace(/[^\d\s-]/g, "");
             onChange({
               countryCode: value.countryCode,
               nationalNumber: strippedValue,
             });
           }}
-          position="relative"
-          left="1px" // Makes the borders overlap
           variant={variant}
+          data-state="on"
+          {...props}
+          label={label}
         />
-      </AttachedInputs>
-    );
-  },
-);
+      </>
+    </AttachedInputs>
+  );
+});
 
 const texts = createTexts({
   phoneNumber: {

package/src/input/Popover.tsx

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

package/src/input/Radio.tsx

@@ -1,25 +1,23 @@
-import {
-  Radio as ChakraRadio,
-  RadioProps as ChakraRadioProps,
-  forwardRef,
-} from "@chakra-ui/react";
-import React from "react";
+"use client";
+import React, { forwardRef, PropsWithChildren } from "react";
+import { RecipeVariantProps } from "@chakra-ui/react";
+import { radioGroupSlotRecipe } from "../theme/slot-recipes/radio";
+import { RadioGroup as ChakraRadioGroup } from "@chakra-ui/react";
 
-export type RadioProps = Exclude<
-  ChakraRadioProps,
-  "colorScheme" | "size" | "variant"
->;
+type RadioVariants = RecipeVariantProps<typeof radioGroupSlotRecipe>;
+
+export type RadioProps = PropsWithChildren<RadioVariants> &
+  ChakraRadioGroup.ItemProps & {
+    rootRef?: React.Ref<HTMLDivElement>;
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+  };
 
 /**
  * The humble radio button.
  *
  * Specify the label as `children` and the value as `value`.
  *
- * ```tsx
- * <Radio value="#f00">Red</Radio>
- * ```
- *
- * You typically want to place Radio components in a group with several other Radio components. You can do that with the `RadioGroup` component.
+ * Place the Radio components in a group with several other Radio components. You can do that with the `RadioGroup` component.
  *
  * ```tsx
  * <RadioGroup name="ticket">
@@ -28,6 +26,28 @@ export type RadioProps = Exclude<
  *   <Radio value="first-class">First Class</Radio>
  * </RadioGroup>
  */
-export const Radio = forwardRef<RadioProps, "input">((props, ref) => {
-  return <ChakraRadio {...props} ref={ref} />;
+
+export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
+  const { children, inputProps, rootRef, ...rest } = props;
+
+  return (
+    <ChakraRadioGroup.Item ref={rootRef} {...rest}>
+      <ChakraRadioGroup.ItemHiddenInput ref={ref} {...inputProps} />
+      <ChakraRadioGroup.ItemIndicator />
+      {children && (
+        <ChakraRadioGroup.ItemText>{children}</ChakraRadioGroup.ItemText>
+      )}
+    </ChakraRadioGroup.Item>
+  );
 });
+
+type RadioGroupProps = Omit<
+  ChakraRadioGroup.RootProps,
+  "colorPalette" | "variant" | "size"
+> & {};
+
+export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
+  (props, ref) => {
+    return <ChakraRadioGroup.Root ref={ref} {...props} aria-labelledby="" />;
+  },
+);

package/src/input/SearchInput.tsx

@@ -1,116 +1,54 @@
-import {
-  Input as ChakraInput,
-  InputProps as ChakraInputProps,
-  IconButton,
-  LayoutProps,
-  forwardRef,
-  useFormControlContext,
-} from "@chakra-ui/react";
+"use client";
+
 import {
   CloseOutline24Icon,
   SearchOutline24Icon,
 } from "@vygruppen/spor-icon-react";
-import React, { useId } from "react";
-import { FormLabel, InputGroup, InputLeftElement, InputRightElement } from ".";
-import { createTexts, useTranslation } from "..";
+import React, { forwardRef } from "react";
+import { createTexts, Input, InputProps, useTranslation } from "..";
+import { IconButton } from "../button/IconButton";
 
-export type SearchInputProps = Exclude<
-  ChakraInputProps,
-  "variant" | "size" | "leftIcon" | "rightIcon"
-> & {
-  /** Optional label. Defaults to the localized version of "search" */
-  label?: string | React.ReactNode;
+export type SearchInputProps = InputProps & {
   /** Callback for when the clear button is clicked */
   onReset?: () => void;
 };
+
 /** Simple search input component.
  *
  * Includes a search icon, a localized label and a reset button.
  */
-export const SearchInput = forwardRef<SearchInputProps, "input">(
-  ({ label, onReset, ...props }, ref) => {
-    const { t } = useTranslation();
-    const showClearButton = onReset && Boolean(props.value);
-    const formControlProps = useFormControlContext();
-    const autoGeneratedId = useId();
-    const inputId = props.id ?? formControlProps?.id ?? autoGeneratedId;
 
-    const { outerProps, innerProps } = getOuterProps(props);
+export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
+  (props, ref) => {
+    const { t } = useTranslation();
+    const { variant = "core", onReset, label, value } = props;
+    const clearButton = onReset && value;
 
     return (
-      <InputGroup position="relative" {...outerProps}>
-        <InputLeftElement pointerEvents="none">
-          <SearchOutline24Icon />
-        </InputLeftElement>
-        <ChakraInput
-          paddingLeft={7}
-          paddingRight={7}
-          {...innerProps}
-          id={inputId}
-          type="search"
-          placeholder=" "
-          css={{
-            "&::-webkit-search-cancel-button": {
-              WebkitAppearance: "none",
-            },
-          }}
-          ref={ref}
-          data-attachable
-        />
-        <FormLabel
-          htmlFor={inputId}
-          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)",
-            },
-          }}
-        >
-          {label ?? t(texts.label)}
-        </FormLabel>
-        {showClearButton && (
-          <InputRightElement width="fit-content">
+      <Input
+        ref={ref}
+        type="search"
+        variant={variant}
+        {...props}
+        startElement={<SearchOutline24Icon />}
+        endElement={
+          clearButton && (
             <IconButton
               variant="ghost"
               type="button"
               size="sm"
-              marginRight={1}
               aria-label={t(texts.reset)}
               icon={<CloseOutline24Icon />}
               onClick={onReset}
             />
-          </InputRightElement>
-        )}
-      </InputGroup>
+          )
+        }
+        label={(label as string) ?? t(texts.label)}
+      />
     );
   },
 );
 
-const getOuterProps = (props: Record<string, any>) => {
-  const layoutKeys = new Set(["w, width, maxW, minW, maxWidth, minWidth"]); // add more keys here if neccessary
-  const outerProps: LayoutProps = {};
-  const innerProps: Record<string, any> = {};
-
-  for (const key in props) {
-    if (layoutKeys.has(key)) {
-      (outerProps as any)[key] = props[key];
-    } else {
-      (innerProps as any)[key] = props[key];
-    }
-  }
-
-  return { outerProps, innerProps };
-};
-
 const texts = createTexts({
   label: {
     nb: "Søk",

package/src/input/Select.tsx

@@ -0,0 +1,237 @@
+"use client";
+
+import { CloseButton } from "@/button";
+import { selectSlotRecipe } from "@/theme/slot-recipes/select";
+import type {
+  SelectRootProps as ChakraSelectRootProps,
+  CollectionItem,
+  RecipeVariantProps,
+} from "@chakra-ui/react";
+import {
+  Box,
+  Select as ChakraSelect,
+  Portal,
+  useSlotRecipe,
+} from "@chakra-ui/react";
+import {
+  CheckmarkFill18Icon,
+  DropdownDownFill24Icon,
+} from "@vygruppen/spor-icon-react";
+import * as React from "react";
+import { PropsWithChildren } from "react";
+
+type SelectVariantProps = RecipeVariantProps<typeof selectSlotRecipe>;
+
+export type SelectProps = ChakraSelectRootProps &
+  PropsWithChildren<SelectVariantProps> & {
+    label?: string;
+  };
+
+/**
+ * A Select component.
+ *
+ * This component is useful to choose an item from a dropdown list of items. The list has four different variants, core, floating, rightSideSquare, leftSideSquare.
+ * The last two variants are useful in attachecdInput for example in the PhoneNumberInput and CountryCodeSelect components.
+ *
+ * @example
+ * ```tsx
+ * <Select label="Choose transportation" >
+       <SelectItem item={{
+            label: "Train",
+            value: "train",
+          }}>
+         item label
+       </SelectItem>
+       <SelectItem item={{
+            label: "Bus",
+            value: "Bus",
+          }}>
+         item label
+       </SelectItem>
+    </Select>
+ * ```
+ *
+ * @see https://spor.vy.no/components/select
+ *
+ */
+
+export const Select = React.forwardRef<HTMLDivElement, SelectProps>(
+  (props, ref) => {
+    const { variant = "core", children, positioning, label, ...rest } = props;
+    const recipe = useSlotRecipe({ key: "select" });
+    const styles = recipe({ variant });
+
+    return (
+      <ChakraSelect.Root
+        {...rest}
+        ref={ref}
+        positioning={{ sameWidth: true, ...positioning }}
+        variant={variant}
+        css={styles.root}
+        position={"relative"}
+      >
+        <SelectTrigger data-attachable>
+          <SelectValueText withPlaceholder={label ? true : false} />
+        </SelectTrigger>
+        {label && <SelectLabel css={styles.label}>{label}</SelectLabel>}
+        <SelectContent css={styles.selectContent}>{children}</SelectContent>
+      </ChakraSelect.Root>
+    );
+  },
+);
+
+type SelectItemProps = ChakraSelect.ItemProps &
+  React.PropsWithChildren<SelectVariantProps> & {
+    children: React.ReactNode;
+    description?: React.ReactNode;
+  };
+
+export const SelectItem = React.forwardRef<HTMLDivElement, SelectItemProps>(
+  (props, ref) => {
+    const { item, children, description, ...rest } = props;
+    const recipe = useSlotRecipe({ key: "select" });
+    const styles = recipe();
+    return (
+      <ChakraSelect.Item item={item} {...rest} ref={ref} css={styles.item}>
+        <Box>
+          <ChakraSelect.ItemText display="flex">
+            {children}
+          </ChakraSelect.ItemText>
+          {description && <Box css={styles.itemDescription}>{description}</Box>}
+        </Box>
+
+        <ChakraSelect.ItemIndicator>
+          <CheckmarkFill18Icon />
+        </ChakraSelect.ItemIndicator>
+      </ChakraSelect.Item>
+    );
+  },
+);
+
+type SelectItemGroupProps = ChakraSelect.ItemGroupProps &
+  React.PropsWithChildren<SelectVariantProps> & {
+    label: React.ReactNode;
+    children: React.ReactNode;
+  };
+
+export const SelectItemGroup = React.forwardRef<
+  HTMLDivElement,
+  SelectItemGroupProps
+>(function SelectItemGroup(props, ref) {
+  const { children, label, ...rest } = props;
+  return (
+    <ChakraSelect.ItemGroup {...rest} ref={ref}>
+      <ChakraSelect.ItemGroupLabel>{label}</ChakraSelect.ItemGroupLabel>
+      {children}
+    </ChakraSelect.ItemGroup>
+  );
+});
+
+type SelectTriggerProps = ChakraSelect.ControlProps &
+  React.PropsWithChildren<SelectVariantProps> & {
+    clearable?: boolean;
+    children?: React.ReactNode;
+  };
+
+export const SelectTrigger = React.forwardRef<
+  HTMLButtonElement,
+  SelectTriggerProps
+>(function SelectTrigger(props, ref) {
+  const { children, clearable, ...rest } = props;
+  const recipe = useSlotRecipe({ key: "select" });
+  const styles = recipe();
+  return (
+    <ChakraSelect.Control {...rest} css={styles.control}>
+      <ChakraSelect.Trigger ref={ref} css={styles.trigger}>
+        {children}
+      </ChakraSelect.Trigger>
+      <ChakraSelect.IndicatorGroup css={styles.indicatorGroup}>
+        {clearable && <SelectClearTrigger />}
+        <Box css={styles.indicator}>
+          <DropdownDownFill24Icon />
+        </Box>
+      </ChakraSelect.IndicatorGroup>
+    </ChakraSelect.Control>
+  );
+});
+
+type SelectClearTriggerProps = ChakraSelect.ClearTriggerProps &
+  React.PropsWithChildren<SelectVariantProps> & {
+    children?: React.ReactNode;
+  };
+
+const SelectClearTrigger = React.forwardRef<
+  HTMLButtonElement,
+  SelectClearTriggerProps
+>(function SelectClearTrigger(props, ref) {
+  return (
+    <ChakraSelect.ClearTrigger asChild {...props} ref={ref}>
+      <CloseButton
+        size="xs"
+        focusVisibleRing="inside"
+        focusRingWidth="2px"
+        pointerEvents="auto"
+      />
+    </ChakraSelect.ClearTrigger>
+  );
+});
+
+type SelectContentProps = ChakraSelect.ContentProps &
+  React.PropsWithChildren<SelectVariantProps> & {
+    portalled?: boolean;
+    portalRef?: React.RefObject<HTMLElement>;
+  };
+
+export const SelectContent = React.forwardRef<
+  HTMLDivElement,
+  SelectContentProps
+>(function SelectContent(props, ref) {
+  const { portalled = true, portalRef, ...rest } = props;
+  return (
+    <Portal disabled={!portalled} container={portalRef}>
+      <ChakraSelect.Positioner>
+        <ChakraSelect.Content {...rest} ref={ref} />
+      </ChakraSelect.Positioner>
+    </Portal>
+  );
+});
+
+type SelectValueTextProps = Omit<ChakraSelect.ValueTextProps, "children"> &
+  React.PropsWithChildren<SelectVariantProps> & {
+    children?(items: CollectionItem[]): React.ReactNode;
+    placeholder?: string;
+    withPlaceholder?: boolean;
+  };
+
+export const SelectValueText = React.forwardRef<
+  HTMLSpanElement,
+  SelectValueTextProps
+>(function SelectValueText(props, ref) {
+  const { children, withPlaceholder, placeholder, ...rest } = props;
+  return (
+    <ChakraSelect.ValueText
+      {...rest}
+      ref={ref}
+      placeholder={placeholder}
+      paddingTop={withPlaceholder ? "4" : "0"}
+    >
+      <ChakraSelect.Context>
+        {(select: {
+          selectedItems: any;
+          collection: { stringifyItem: (arg0: any) => any };
+        }) => {
+          const items = select.selectedItems;
+          if (items.length === 0) return placeholder;
+          if (children) return children(items);
+          if (items.length === 1)
+            return select.collection.stringifyItem(items[0]);
+          return `${items.length} selected`;
+        }}
+      </ChakraSelect.Context>
+    </ChakraSelect.ValueText>
+  );
+});
+
+export const SelectLabel = ChakraSelect.Label;
+export const SelectItemText = ChakraSelect.ItemText;
+export const SelectRoot = ChakraSelect.Root;