@vygruppen/spor-react 12.2.0 → 12.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "12.2.0",
+  "version": "12.3.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -35,8 +35,8 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
-    "@vygruppen/spor-design-tokens": "4.0.5",
-    "@vygruppen/spor-icon-react": "4.0.3",
+    "@vygruppen/spor-design-tokens": "4.0.6",
+    "@vygruppen/spor-icon-react": "4.0.4",
     "@vygruppen/spor-loader": "0.6.0"
   },
   "devDependencies": {
@@ -56,8 +56,8 @@
     "vitest": "^0.26.3",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.2.2",
-    "@vygruppen/tsconfig": "0.1.0",
-    "@vygruppen/eslint-config": "1.0.1"
+    "@vygruppen/eslint-config": "1.0.1",
+    "@vygruppen/tsconfig": "0.1.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",

package/src/datepicker/DatePicker.tsx

@@ -9,13 +9,7 @@ import {
   useFieldContext,
   useSlotRecipe,
 } from "@chakra-ui/react";
-import React, {
-  forwardRef,
-  PropsWithChildren,
-  ReactNode,
-  useId,
-  useRef,
-} from "react";
+import React, { forwardRef, PropsWithChildren, useId, useRef } from "react";
 import {
   AriaDatePickerProps,
   DateValue,
@@ -24,7 +18,7 @@ import {
 } from "react-aria";
 import { useDatePickerState } from "react-stately";
 
-import { Field } from "@/input/Field";
+import { Field, FieldBaseProps } from "@/input/Field";
 
 import { datePickerSlotRecipe } from "../theme/slot-recipes/datepicker";
 import { Calendar } from "./Calendar";
@@ -46,8 +40,7 @@ type DatePickerProps = Omit<AriaDatePickerProps<DateValue>, "onChange"> &
     showYearNavigation?: boolean;
     withPortal?: boolean;
     onChange?: (value: DateValue | null) => void;
-    errorMessage?: ReactNode;
-  };
+  } & FieldBaseProps;
 
 /**
  * A date picker component.
@@ -63,11 +56,13 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
   (
     {
       variant,
-      errorMessage,
+      errorText,
       minHeight,
       showYearNavigation,
       withPortal = true,
       width = "auto",
+      invalid = false,
+      helperText,
       ...props
     },
     externalRef,
@@ -76,7 +71,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     const state = useDatePickerState({
       ...props,
       shouldCloseOnSelect: true,
-      errorMessage,
+      errorMessage: errorText,
       isRequired: props.isRequired ?? chakraFieldProps?.required,
       validationState: chakraFieldProps?.invalid ? "invalid" : "valid",
     });
@@ -130,7 +125,9 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
               display="inline-flex"
               id={inputGroupId}
               aria-labelledby={labelId}
-              errorText={errorMessage}
+              errorText={errorText}
+              invalid={invalid}
+              helperText={helperText}
             >
               <PopoverAnchor>
                 <StyledField

package/src/datepicker/DateRangePicker.tsx

@@ -18,7 +18,7 @@ import {
 } from "react-aria";
 import { useDateRangePickerState } from "react-stately";
 
-import { Field } from "../input/Field";
+import { Field, FieldBaseProps } from "../input/Field";
 import { datePickerSlotRecipe } from "../theme/slot-recipes/datepicker";
 import { CalendarTriggerButton } from "./CalendarTriggerButton";
 import { DateField } from "./DateField";
@@ -30,7 +30,7 @@ import { useCurrentLocale } from "./utils";
 
 type DateRangePickerProps = Omit<
   AriaDateRangePickerProps<DateValue>,
-  "onChange"
+  "onChange" | "errorMessage" | "isInvalid" | "isRequired"
 > &
   Pick<BoxProps, "minHeight"> &
   PropsWithChildren<DatePickerVariantProps> &
@@ -46,7 +46,7 @@ type DateRangePickerProps = Omit<
         end: DateValue | null;
       } | null,
     ) => void;
-  };
+  } & FieldBaseProps;
 /**
  * A date range picker component.
  *
@@ -61,13 +61,19 @@ type DateRangePickerProps = Omit<
   startName,
   endName,
   withPortal = true,
+  errorText,
+  helperText,
+  invalid,
   ...props
 }: DateRangePickerProps) {
   const fieldContextPRops = useFieldContext();
   const state = useDateRangePickerState({
     ...props,
     shouldCloseOnSelect: true,
-    isRequired: props.isRequired ?? fieldContextPRops?.required,
+    isInvalid: invalid,
+    errorMessage: errorText,
+
+    isRequired: props.required ?? fieldContextPRops?.required,
     validationState: fieldContextPRops?.invalid ? "invalid" : "valid",
   });
   const ref = useRef(null);
@@ -113,7 +119,14 @@ type DateRangePickerProps = Omit<
           </label>
         )}
         <ChakraPopover.Root {...dialogProps}>
-          <Field width="auto" display="inline-flex" id={datePickerId}>
+          <Field
+            width="auto"
+            display="inline-flex"
+            id={datePickerId}
+            errorText={errorText}
+            helperText={helperText}
+            invalid={invalid}
+          >
             <PopoverAnchor>
               <StyledField
                 alignItems="center"

package/src/datepicker/TimePicker.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { BoxProps } from "@chakra-ui/react";
+import { BoxProps, useFieldContext } from "@chakra-ui/react";
 import { CalendarDateTime } from "@internationalized/date";
 import { TimeValue } from "@react-types/datepicker";
 import {
@@ -8,43 +8,44 @@ import {
 } from "@vygruppen/spor-icon-react";
 import { useTimeFieldState } from "react-stately";
 
-import { Field } from "@/input/Field";
+import { Field, FieldBaseProps } from "@/input/Field";
 
 import { createTexts, IconButton, useTranslation } from "..";
 import { StyledField } from "./StyledField";
 import { TimeField } from "./TimeField";
 import { getCurrentTime, useCurrentLocale } from "./utils";
 
-type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & {
-  /** The label. Defaults to a localized version of "Time" */
-  label?: string;
-  /** The name of the form field, if used in a regular form */
-  name?: string;
-  /** The controlled value, if any.
-   *
-   * A `new Time(hours, minutes)` should be passed.
-   * Or `null` if the time should be unset.
-   **/
-  value?: TimeValue | null;
-  /** A default value, if any.
-   *
-   * A `new Time(hours, minutes)` should be passed.
-   * Defaults to the current time if not provided.
-   * Can be set to null if you don't want a time to be selected by default.
-   **/
-  defaultValue?: TimeValue | null;
-  /** Callback for when the time changes */
-  onChange?: (value: TimeValue | null) => void;
-  /** The maxiumum number of minutes to move when the step buttons are used.
-   *
-   * Defaults to 30 minutes.
-   *
-   * An example: If the time is at 13:37 and the minuteInterval is 15, clicking the step forwards button will move the time to 13:45. Next click will move it to 14:00.
-   */
-  minuteInterval?: number;
-  /** Whether or not the field is disabled */
-  disabled?: boolean;
-};
+type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> &
+  FieldBaseProps & {
+    /** The label. Defaults to a localized version of "Time" */
+    label?: string;
+    /** The name of the form field, if used in a regular form */
+    name?: string;
+    /** The controlled value, if any.
+     *
+     * A `new Time(hours, minutes)` should be passed.
+     * Or `null` if the time should be unset.
+     **/
+    value?: TimeValue | null;
+    /** A default value, if any.
+     *
+     * A `new Time(hours, minutes)` should be passed.
+     * Defaults to the current time if not provided.
+     * Can be set to null if you don't want a time to be selected by default.
+     **/
+    defaultValue?: TimeValue | null;
+    /** Callback for when the time changes */
+    onChange?: (value: TimeValue | null) => void;
+    /** The maxiumum number of minutes to move when the step buttons are used.
+     *
+     * Defaults to 30 minutes.
+     *
+     * An example: If the time is at 13:37 and the minuteInterval is 15, clicking the step forwards button will move the time to 13:45. Next click will move it to 14:00.
+     */
+    minuteInterval?: number;
+    /** Whether or not the field is disabled */
+    disabled?: boolean;
+  };
 /** A time picker component.
  *
  * This lets the user select a time of day, either through typing it in, using the up and down arrows to select the hour and minute, or by clicking the step buttons to move the time forwards or backwards in pre-defined increments.
@@ -126,6 +127,7 @@ export const TimePicker = ({
   const ariaLabel = `${inputLabel} – ${t(
     texts.selectedTimeIs(`${dateTime?.hour ?? 0} ${dateTime?.minute ?? 0}`),
   )}`;
+
   return (
     <Field as="time" {...boxProps}>
       <StyledField
@@ -201,6 +203,3 @@ const texts = createTexts({
     sv: "minuter",
   },
 });
-function useFieldContext(): { disabled: unknown; invalid: unknown } {
-  throw new Error("Function not implemented.");
-}

package/src/input/AttachedInputs.tsx

@@ -1,12 +1,15 @@
 "use client";
 
-import { chakra, Group, RecipeVariantProps } from "@chakra-ui/react";
+import {
+  chakra,
+  Group,
+  GroupProps,
+  RecipeVariantProps,
+} from "@chakra-ui/react";
 import { forwardRef } from "react";
 
 import { attachedInputsRecipe } from "@/theme/recipes/attached-inputs";
 
-import { InputGroupProps } from "./InputGroup";
-
 /**
  * Attaches several inputs together, so that they look like one input.
  *
@@ -23,7 +26,7 @@ import { InputGroupProps } from "./InputGroup";
 export type AttachedInputsProps = RecipeVariantProps<
   typeof attachedInputsRecipe
 > &
-  InputGroupProps;
+  GroupProps;
 
 const StyledGroup = chakra(Group, attachedInputsRecipe);
 

package/src/input/ChoiceChip.tsx

@@ -1,30 +1,20 @@
 "use client";
-import {
-  chakra,
-  RecipeVariantProps,
-  Span,
-  useCheckbox,
-} from "@chakra-ui/react";
+import { CheckboxCard, CheckboxCardRootProps, Span } from "@chakra-ui/react";
 import { CloseOutline24Icon } from "@vygruppen/spor-icon-react";
-import React, { ChangeEvent, PropsWithChildren } from "react";
+import React, { forwardRef } from "react";
 
-import { choiceChipRecipe } from "@/theme/recipes/choice-chip";
-
-type ChoiceChipVariantProps = RecipeVariantProps<typeof choiceChipRecipe>;
+type CheckBoxIcon = {
+  default: React.ReactNode;
+  checked: React.ReactNode;
+};
 
-export type ChoiceChipProps = PropsWithChildren<ChoiceChipVariantProps> & {
-  onChange?: (value: ChangeEvent<HTMLInputElement>) => void;
-  checked?: boolean;
-  disabled?: boolean;
-  defaultChecked?: boolean;
-  /** The button text */
-  children: React.ReactNode;
-  icon?: {
-    default: React.ReactNode;
-    checked: React.ReactNode;
-  };
-  chipType?: "icon" | "choice" | "filter";
-  "aria-label"?: string;
+export type ChoiceChipProps = Omit<
+  CheckboxCardRootProps,
+  "onCheckedChange" | "checked"
+> & {
+  icon?: CheckBoxIcon;
+  onCheckedChange?: (checked: boolean) => void;
+  checked: boolean;
 };
 
 /**
@@ -59,49 +49,42 @@ export type ChoiceChipProps = PropsWithChildren<ChoiceChipVariantProps> & {
  * ```
  */
 
-const ChoiceChipStyledDiv = chakra("div", choiceChipRecipe);
+export const ChoiceChip = forwardRef<HTMLInputElement, ChoiceChipProps>(
+  ({ children, icon, onCheckedChange, ...rootProps }, ref) => {
+    return (
+      <CheckboxCard.Root
+        {...rootProps}
+        {...(onCheckedChange && {
+          onCheckedChange: (details) => onCheckedChange(!!details.checked),
+        })}
+      >
+        <CheckboxCard.Context>
+          {({ checked }) => (
+            <>
+              <CheckboxCard.HiddenInput ref={ref} />
+              <CheckboxCard.Control>
+                <CheckboxCard.Content>
+                  <CheckboxCard.Label>
+                    {icon && (
+                      <Span width="24px">
+                        {checked ? icon.checked : icon.default}
+                      </Span>
+                    )}
 
-export const ChoiceChip = ({
-  children,
-  icon,
-  size = "sm",
-  chipType = "choice",
-  variant = "core",
-  ...props
-}: ChoiceChipProps) => {
-  const {
-    getControlProps,
-    disabled,
-    getLabelProps,
-    getHiddenInputProps,
-    setChecked,
-    checked,
-  } = useCheckbox(props);
+                    {rootProps.chipType !== "icon" && children}
 
-  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>}
+                    {rootProps.chipType === "filter" && checked && (
+                      <CloseOutline24Icon />
+                    )}
+                  </CheckboxCard.Label>
+                </CheckboxCard.Content>
+              </CheckboxCard.Control>
+            </>
+          )}
+        </CheckboxCard.Context>
+      </CheckboxCard.Root>
+    );
+  },
+);
 
-        {chipType === "filter" && checked && (
-          <CloseOutline24Icon marginLeft={1.5} />
-        )}
-      </ChoiceChipStyledDiv>
-    </chakra.label>
-  );
-};
+ChoiceChip.displayName = "ChoiceChip";

package/src/input/Combobox.tsx

@@ -140,6 +140,11 @@ export const Combobox = forwardRef<HTMLDivElement, ComboboxProps<object>>(
           aria-haspopup="listbox"
           ref={inputRef}
           role="combobox"
+          errorText={props.errorText}
+          helperText={props.helperText}
+          required={props.required}
+          disabled={props.disabled}
+          invalid={props.invalid}
           label={label}
           variant={variant}
           aria-expanded={state.isOpen}

package/src/input/Field.tsx

@@ -3,23 +3,34 @@
 import {
   Field as ChakraField,
   RecipeVariantProps,
+  Stack,
   useSlotRecipe,
 } from "@chakra-ui/react";
 import * as React from "react";
 
+import { Text } from "@/typography";
+
 import { fieldSlotRecipe } from "../theme/slot-recipes/field";
+import { FloatingLabel } from "./FloatingLabel";
+import { Label } from "./Label";
 
 type FieldVariantProps = RecipeVariantProps<typeof fieldSlotRecipe>;
 
+export type FieldBaseProps = {
+  direction?: "row" | "column";
+  disabled?: boolean;
+  invalid?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  label?: React.ReactNode;
+  helperText?: React.ReactNode;
+  errorText?: React.ReactNode;
+  floatingLabel?: boolean;
+};
+
 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;
-  };
+  React.PropsWithChildren<FieldVariantProps> &
+  FieldBaseProps;
 
 /**
  *
@@ -40,22 +51,47 @@ export type FieldProps = Omit<ChakraField.RootProps, "label"> &
 
 export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
   (props, ref) => {
-    const { label, children, helperText, errorText, ...rest } = props;
+    const {
+      label,
+      children,
+      helperText,
+      errorText,
+      floatingLabel = false,
+      disabled,
+      invalid,
+      readOnly,
+      required,
+      direction,
+      ...rest
+    } = props;
     const recipe = useSlotRecipe({ key: "field" });
-    const styles = recipe({ label, helperText, errorText });
+    const styles = recipe();
+
     return (
-      <ChakraField.Root ref={ref} {...rest} css={styles.root}>
-        {children}
+      <Stack gap="2" ref={ref} {...rest} width="100%">
+        <ChakraField.Root
+          disabled={disabled}
+          invalid={invalid}
+          readOnly={readOnly}
+          required={required}
+          css={styles.root}
+          direction={direction}
+        >
+          {label && !floatingLabel && <Label>{label}</Label>}
+
+          {children}
+
+          {label && floatingLabel && <FloatingLabel>{label}</FloatingLabel>}
+          {errorText && (
+            <ChakraField.ErrorText>{errorText}</ChakraField.ErrorText>
+          )}
+        </ChakraField.Root>
         {helperText && (
-          <ChakraField.HelperText>{helperText}</ChakraField.HelperText>
-        )}
-        {label && (
-          <ChakraField.Label css={styles.label}>{label}</ChakraField.Label>
-        )}
-        {errorText && (
-          <ChakraField.ErrorText>{errorText}</ChakraField.ErrorText>
+          <Text fontSize="sm" color="text.tertiary">
+            {helperText}
+          </Text>
         )}
-      </ChakraField.Root>
+      </Stack>
     );
   },
 );

package/src/input/FloatingLabel.tsx

@@ -0,0 +1,38 @@
+import { defineStyle, Field, FieldLabelProps } from "@chakra-ui/react";
+import { forwardRef } from "react";
+
+export const FloatingLabel = forwardRef<HTMLLabelElement, FieldLabelProps>(
+  (props, ref) => (
+    <Field.Label ref={ref} {...props} css={floatingLabelStyles} />
+  ),
+);
+
+FloatingLabel.displayName = "FloatingLabel";
+
+const floatingLabelStyles = defineStyle({
+  paddingX: 3,
+  fontWeight: "normal",
+  fontSize: ["mobile.xs", "desktop.xs"],
+  color: "text",
+  pointerEvents: "none",
+  zIndex: "docked",
+  _disabled: {
+    opacity: 0.4,
+  },
+
+  pos: "absolute",
+  top: "0.3rem",
+  transition: "position",
+  _peerPlaceholderShown: {
+    /* For when input is not in focus */
+    top: "0.9rem",
+    color: "text",
+    fontSize: ["mobile.sm", "desktop.sm"],
+  },
+  _peerFocusVisible: {
+    /* For when input is in focus */
+    fontSize: ["mobile.xs", "desktop.xs"],
+    color: "text",
+    top: "0.3rem",
+  },
+});

package/src/input/Input.tsx

@@ -1,24 +1,26 @@
 "use client";
 
 import {
+  Box,
   chakra,
+  Flex,
   Input as ChakraInput,
+  InputElement,
   InputProps as ChakraInputProps,
 } from "@chakra-ui/react";
-import React, { forwardRef } from "react";
+import React, { forwardRef, ReactNode } from "react";
 
 import { inputRecipe } from "@/theme/recipes/input";
 
 import { Field, FieldProps } from "./Field";
-import { InputGroup } from "./InputGroup";
 
 export type InputProps = Exclude<
   ChakraInputProps,
-  "size" | "label" | "colorPalette"
+  "size" | "label" | "colorPalette" | "placeholder"
 > &
   FieldProps & {
     /** The input's label */
-    label: string;
+    label: ReactNode;
     /** Element that shows up to the left */
     startElement?: React.ReactNode;
     /** Element that shows up to the right */
@@ -70,25 +72,40 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     ref,
   ) => {
     return (
-      <Field invalid={invalid} helperText={helperText} errorText={errorText}>
-        <InputGroup
-          endElement={endElement && endElement}
-          startElement={startElement && startElement}
-          width="100%"
-          position="relative"
-          label={label}
-        >
-          <StyledInput
-            data-attachable
-            ref={ref}
-            className="peer"
-            overflow="hidden"
-            paddingLeft={startElement ? "2.6rem" : undefined}
-            paddingRight={endElement ? "2.6rem" : undefined}
-            placeholder=""
-            {...props}
-          />
-        </InputGroup>
+      <Field
+        invalid={invalid}
+        helperText={helperText}
+        errorText={errorText}
+        label={
+          // Render startElement invisibly to align label text with input content when an icon is present
+          <Flex>
+            <Box visibility="hidden">{startElement}</Box>
+            {label}
+          </Flex>
+        }
+        floatingLabel={true}
+      >
+        {startElement && (
+          <InputElement pointerEvents="none" paddingX={2}>
+            {startElement}
+          </InputElement>
+        )}
+        <StyledInput
+          data-attachable
+          ref={ref}
+          focusVisibleRing="outside"
+          overflow="hidden"
+          paddingLeft={startElement ? "2.6rem" : undefined}
+          paddingRight={endElement ? "2.6rem" : undefined}
+          {...props}
+          className={`peer ${props.className}`}
+          placeholder=""
+        />
+        {endElement && (
+          <InputElement placement="end" paddingX={2}>
+            {endElement}
+          </InputElement>
+        )}
       </Field>
     );
   },