@vygruppen/spor-react 10.2.0 → 10.4.0

package/src/input/Combobox.tsx

@@ -38,6 +38,7 @@ export type ComboboxProps<T> = AriaComboBoxProps<T> & {
   inputRef?: React.RefObject<HTMLInputElement>;
   /** If you want to allow an empty collection */
   allowsEmptyCollection?: boolean;
+  variant?: "base" | "floating";
 } & OverridableInputProps;
 /**
  * A combobox is a combination of an input and a list of suggestions.
@@ -87,6 +88,7 @@ export function Combobox<T extends object>({
   emptyContent,
   inputRef: externalInputRef,
   allowsEmptyCollection,
+  variant,
   ...rest
 }: ComboboxProps<T>) {
   const { contains } = useFilter({ sensitivity: "base" });
@@ -147,6 +149,7 @@ export function Combobox<T extends object>({
         ref={inputRef}
         role="combobox"
         label={label}
+        variant={variant}
         aria-expanded={state.isOpen}
         aria-autocomplete="list"
         aria-controls={listboxId}
@@ -196,6 +199,7 @@ export function Combobox<T extends object>({
             listBoxRef={listBoxRef}
             emptyContent={emptyContent}
             maxWidth={inputWidth}
+            variant={variant}
           >
             {rest.children}
           </ListBox>

package/src/input/CountryCodeSelect.tsx

@@ -26,6 +26,7 @@ type CountryCodeSelectProps = {
   name: string;
   width?: BoxProps["width"];
   height?: BoxProps["height"];
+  variant?: "base" | "floating";
 };
 export const CountryCodeSelect = (props: CountryCodeSelectProps) => {
   const { t } = useTranslation();
@@ -35,6 +36,7 @@ export const CountryCodeSelect = (props: CountryCodeSelectProps) => {
       label={t(texts.countryCode)}
       isLabelSrOnly={true}
       items={callingCodes as any}
+      variant={props.variant}
       {...props}
     >
       {(item) => <Item key={item.key}>{item.key}</Item>}

package/src/input/InfoSelect.tsx

@@ -178,18 +178,19 @@ export function InfoSelect<T extends object>({
 
   const stateStyle = "completed";
 
+  const hasChosenValue = state.selectedItem !== null;
+
   const styles = useMultiStyleConfig("InfoSelect", {
     isOpen: state.isOpen,
     isLabelSrOnly,
     variant,
     stateStyle,
+    hasChosenValue,
   });
   const { buttonProps } = useButton(triggerProps, triggerRef);
   const { t } = useTranslation();
   const formControl = useFormControlProps(props);
 
-  const hasChosenValue = state.selectedItem !== null;
-
   return (
     <Box sx={styles.container}>
       <HiddenSelect
@@ -226,7 +227,7 @@ export function InfoSelect<T extends object>({
             {...valueProps}
             h={isLabelSrOnly ? "" : !hasChosenValue ? "0px" : "18px"}
             hidden={!hasChosenValue}
-            transform={isLabelSrOnly ? "" : "scale(1) translateY(-10px)"}
+            transform={isLabelSrOnly ? "" : "scale(1) translateY(-12px)"}
             transitionProperty={"var(--spor-transition-property-common)"}
             transitionDuration={"var(--spor-transition-duration-normal)"}
           >
@@ -253,6 +254,7 @@ export function InfoSelect<T extends object>({
             state={state}
             listBoxRef={listboxRef}
             borderBottomRadius="sm"
+            variant={variant}
           >
             {props.children}
           </ListBox>

package/src/input/ListBox.tsx

@@ -29,6 +29,7 @@ type ListBoxProps<T> = AriaListBoxProps<T> &
     /** UI to render if the collection is empty */
     emptyContent?: React.ReactNode;
     maxWidth?: BoxProps["maxWidth"];
+    variant?: "base" | "floating";
   };
 
 /**
@@ -70,10 +71,11 @@ export function ListBox<T extends object>({
   listBoxRef,
   state,
   maxWidth,
+  variant,
   ...props
 }: ListBoxProps<T>) {
   const { listBoxProps } = useListBox(props, state, listBoxRef);
-  const styles = useMultiStyleConfig("ListBox", {});
+  const styles = useMultiStyleConfig("ListBox", { variant });
 
   return (
     <List
@@ -82,6 +84,7 @@ export function ListBox<T extends object>({
       sx={styles.container}
       aria-busy={isLoading}
       maxWidth={maxWidth}
+      variant={variant}
     >
       {state.collection.size === 0 && props.emptyContent}
       {Array.from(state.collection).map((item) =>

package/src/input/NumericStepper.tsx

@@ -4,7 +4,7 @@ import {
   useFormControl,
   useMultiStyleConfig,
 } from "@chakra-ui/react";
-import React from "react";
+import React, { useRef } from "react";
 import {
   Box,
   BoxProps,
@@ -35,6 +35,8 @@ type NumericStepperProps = {
   stepSize?: number;
   /** Whether to show the number input when value is zero  */
   showZero?: boolean;
+  /** Name added to the aria-label of subtract and add buttons. */
+  ariaLabelContext?: { singular: string; plural: string };
 } & Omit<BoxProps, "onChange">;
 /** A simple stepper component for integer values
  *
@@ -72,8 +74,10 @@ export function NumericStepper({
   withInput = true,
   stepSize = 1,
   showZero = false,
+  ariaLabelContext = { singular: "", plural: "" },
   ...boxProps
 }: NumericStepperProps) {
+  const addButtonRef = useRef<HTMLButtonElement>(null);
   const { t } = useTranslation();
   const styles = useMultiStyleConfig("NumericStepper", {});
   const [value, onChange] = useControllableState<number>({
@@ -84,12 +88,26 @@ export function NumericStepper({
   const formControlProps = useFormControl({ id: idProp, isDisabled });
   const clampedStepSize = Math.max(Math.min(stepSize, 10), 1);
 
+  const focusOnAddButton = () => {
+    addButtonRef.current?.focus();
+  };
+
   return (
     <Flex __css={styles.container} {...boxProps}>
       <VerySmallButton
         icon={<SubtractIcon stepLabel={clampedStepSize} />}
-        aria-label={t(texts.decrementButtonAriaLabel(clampedStepSize))}
-        onClick={() => onChange(Math.max(value - clampedStepSize, minValue))}
+        aria-label={t(
+          texts.decrementButtonAriaLabel(
+            clampedStepSize,
+            stepSize == 1 ? ariaLabelContext.singular : ariaLabelContext.plural,
+          ),
+        )}
+        onClick={() => {
+          onChange(Math.max(value - clampedStepSize, minValue));
+          if (Math.max(value - clampedStepSize, minValue) <= minValue) {
+            focusOnAddButton();
+          }
+        }}
         visibility={value <= minValue ? "hidden" : "visible"}
         isDisabled={formControlProps.disabled}
         id={value <= minValue ? undefined : formControlProps.id}
@@ -107,27 +125,48 @@ export function NumericStepper({
           width={`${Math.max(value.toString().length + 1, 3)}ch`}
           visibility={!showZero && value === 0 ? "hidden" : "visible"}
           aria-live="assertive"
-          aria-label={value.toString()}
+          aria-label={
+            ariaLabelContext.plural !== ""
+              ? t(texts.currentNumberAriaLabel(ariaLabelContext.plural))
+              : ""
+          }
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
             const numericInput = Number(e.target.value);
             if (Number.isNaN(numericInput)) {
               return;
             }
             onChange(Math.max(Math.min(numericInput, maxValue), minValue));
+            if (
+              !showZero &&
+              Math.max(Math.min(numericInput, maxValue), minValue) === 0
+            ) {
+              focusOnAddButton();
+            }
           }}
         />
       ) : (
         <chakra.text
           sx={styles.text}
           visibility={!showZero && value === 0 ? "hidden" : "visible"}
-          aria-label={value.toString()}
+          aria-live="assertive"
+          aria-label={
+            ariaLabelContext.plural !== ""
+              ? t(texts.currentNumberAriaLabel(ariaLabelContext.plural))
+              : ""
+          }
         >
           {value}
         </chakra.text>
       )}
       <VerySmallButton
+        ref={addButtonRef}
         icon={<AddIcon stepLabel={clampedStepSize} />}
-        aria-label={t(texts.incrementButtonAriaLabel(clampedStepSize))}
+        aria-label={t(
+          texts.incrementButtonAriaLabel(
+            clampedStepSize,
+            stepSize == 1 ? ariaLabelContext.singular : ariaLabelContext.plural,
+          ),
+        )}
         onClick={() => onChange(Math.min(value + clampedStepSize, maxValue))}
         visibility={value >= maxValue ? "hidden" : "visible"}
         isDisabled={formControlProps.disabled}
@@ -152,12 +191,18 @@ type VerySmallButtonProps = {
   id?: string;
 };
 /** Internal override for extra small icon buttons */
-const VerySmallButton = (props: VerySmallButtonProps) => {
+const VerySmallButton = React.forwardRef((props: VerySmallButtonProps, ref) => {
   const styles = useMultiStyleConfig("NumericStepper", {});
   return (
-    <IconButton variant="primary" size="xs" sx={styles.button} {...props} />
+    <IconButton
+      variant="primary"
+      size="xs"
+      sx={styles.button}
+      ref={ref}
+      {...props}
+    />
   );
-};
+});
 
 type IconPropTypes = BoxProps & { stepLabel: number };
 
@@ -221,20 +266,28 @@ const AddIcon = ({ stepLabel, ...props }: IconPropTypes) => (
 );
 
 const texts = createTexts({
-  decrementButtonAriaLabel(stepSize) {
+  currentNumberAriaLabel(ariaContext) {
+    return {
+      nb: `Valgt antall ${ariaContext}`,
+      en: `Chosen number of ${ariaContext}`,
+      nn: `Valgt antall ${ariaContext}`,
+      sv: `Valgt antall ${ariaContext}`,
+    };
+  },
+  decrementButtonAriaLabel(stepSize, ariaContext) {
     return {
-      nb: `Trekk fra ${stepSize}`,
-      en: `Subtract ${stepSize}`,
-      nn: `Trekk frå ${stepSize}`,
-      sv: `Subtrahera ${stepSize}`,
+      nb: `Trekk fra ${stepSize} ${ariaContext}`,
+      en: `Subtract ${stepSize} ${ariaContext}`,
+      nn: `Trekk frå ${stepSize} ${ariaContext}`,
+      sv: `Subtrahera ${stepSize} ${ariaContext}`,
     };
   },
-  incrementButtonAriaLabel(stepSize) {
+  incrementButtonAriaLabel(stepSize, ariaContext) {
     return {
-      nb: `Legg til ${stepSize}`,
-      en: `Add ${stepSize}`,
-      nn: `Legg til ${stepSize}`,
-      sv: `Lägg till ${stepSize}`,
+      nb: `Legg til ${stepSize} ${ariaContext}`,
+      en: `Add ${stepSize} ${ariaContext}`,
+      nn: `Legg til ${stepSize} ${ariaContext}`,
+      sv: `Lägg till ${stepSize} ${ariaContext}`,
     };
   },
 });

package/src/input/PhoneNumberInput.tsx

@@ -24,6 +24,7 @@ type PhoneNumberInputProps = Omit<BoxProps, "onChange"> & {
   onChange?: (change: CountryCodeAndPhoneNumber) => void;
   /** The optional value of the country code and phone number */
   value?: CountryCodeAndPhoneNumber;
+  variant?: "base" | "floating";
 };
 /**
  * A component for entering phone numbers.
@@ -49,6 +50,7 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
       name,
       value: externalValue,
       onChange: externalOnChange,
+      variant,
       ...boxProps
     },
     ref,
@@ -73,6 +75,7 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
               width="6.25rem"
               height="100%"
               value="+47"
+              variant={variant}
             >
               <Item key="+47">+47</Item>
             </InfoSelect>
@@ -89,6 +92,7 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
             name={name ? `${name}-country-code` : "country-code"}
             height="100%"
             width="6.25rem"
+            variant={variant}
           />
         </Suspense>
         <Input
@@ -107,6 +111,7 @@ export const PhoneNumberInput = forwardRef<PhoneNumberInputProps, As>(
           }}
           position="relative"
           left="1px" // Makes the borders overlap
+          variant={variant}
         />
       </AttachedInputs>
     );

package/src/input/Switch.tsx

@@ -1,4 +1,5 @@
 import {
+  As,
   Switch as ChakraSwitch,
   SwitchProps as ChakraSwitchProps,
   forwardRef,
@@ -7,6 +8,7 @@ import React from "react";
 
 export type SwitchProps = Omit<ChakraSwitchProps, "colorScheme" | "variant"> & {
   size?: "sm" | "md" | "lg";
+  as?: As;
 };
 
 /**
@@ -31,7 +33,7 @@ export type SwitchProps = Omit<ChakraSwitchProps, "colorScheme" | "variant"> & {
  * ```
  */
 export const Switch = forwardRef<SwitchProps, "input">(
-  ({ size = "md", ...props }: SwitchProps, ref) => {
-    return <ChakraSwitch size={size} {...props} ref={ref} />;
+  ({ size = "md", as = "div", ...props }: SwitchProps, ref) => {
+    return <ChakraSwitch as={as} size={size} {...props} ref={ref} />;
   },
 );

package/src/input/Textarea.tsx

@@ -1,5 +1,4 @@
 import {
-  Box,
   FormLabel,
   forwardRef,
   Textarea as ChakraTextarea,
@@ -9,7 +8,7 @@ import {
 } from "@chakra-ui/react";
 import React, { useId } from "react";
 
-export type TextareaProps = Exclude<ChakraTextareaProps, "variant" | "size"> & {
+export type TextareaProps = Exclude<ChakraTextareaProps, "size"> & {
   label?: string;
 };
 /**

package/src/theme/components/card-select.ts

@@ -4,7 +4,7 @@ import { mode } from "@chakra-ui/theme-tools";
 import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
 import { floatingBackground, floatingBorder } from "../utils/floating-utils";
 import { focusVisibleStyles } from "../utils/focus-utils";
-import { ghostBackground } from "../utils/ghost-utils";
+import { ghostBackground, ghostText } from "../utils/ghost-utils";
 
 const parts = anatomy("card-select").parts("trigger", "card");
 

package/src/theme/components/info-select.ts

@@ -20,6 +20,7 @@ const config = helpers.defineMultiStyleConfig({
     label: {
       position: "relative",
       fontSize: ["mobile.xs", "desktop.sm"],
+      marginTop: props.hasChosenValue ? 2 : 0,
       ...(props.isLabelSrOnly ? srOnly : {}),
     },
     innerButton: {

package/src/theme/components/input.ts

@@ -1,101 +1,22 @@
 import { inputAnatomy as parts } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { baseBackground, baseBorder, baseText } from "../utils/base-utils";
-import { focusVisibleStyles } from "../utils/focus-utils";
-import { surface } from "../utils/surface-utils";
-import { floatingBackground, floatingBorder } from "../utils/floating-utils";
+import { inputBaseStyle, inputVariant } from "../utils/input-utils";
 
 const helpers = createMultiStyleConfigHelpers(parts.keys);
 
 const config = helpers.defineMultiStyleConfig({
   baseStyle: (props) => ({
-    field: {
-      appearance: "none",
-      width: "100%",
-      outline: "none",
-      border: 0,
-      borderRadius: "sm",
-      transitionProperty: "common",
-      transitionDuration: "fast",
-      position: "relative",
-      paddingX: 3,
-      height: 8,
-      fontSize: "mobile.md",
-      _hover: {
-        ...baseBorder("hover", props),
-      },
-      _active: {
-        ...baseBackground("active", props),
-        ...baseBorder("default", props),
-      },
-      _focusVisible: {
-        ...focusVisibleStyles(props)._focusVisible,
-        outlineOffset: 0,
-      },
-
-      _disabled: {
-        ...surface("disabled", props),
-        ...baseBorder("disabled", props),
-        pointerEvents: "none",
-      },
-      _invalid: {
-        ...baseBorder("invalid", props),
-        _hover: {
-          ...baseBorder("hover", props),
-        },
-      },
-      " + label": {
-        fontSize: ["mobile.sm", "desktop.sm"],
-        top: "2px",
-        left: props.paddingLeft || props.pl || 3,
-        zIndex: 2,
-        position: "absolute",
-        marginY: 2,
-        transition: ".1s ease-out",
-        transformOrigin: "top left",
-        cursor: "text",
-      },
-      "&:not(:placeholder-shown)": {
-        paddingTop: "1rem",
-        "& + label": {
-          transform: "scale(0.825) translateY(-10px)",
-        },
-      },
-    },
-    element: {
-      height: "100%",
-    },
-    group: {
-      ":has(:disabled)": {
-        ...baseText("disabled", props),
-      },
-    },
+    ...inputBaseStyle(props),
   }),
   variants: {
     base: (props) => ({
       field: {
-        ...baseBackground("default", props),
-        ...baseBorder("default", props),
+        ...inputVariant("base", props),
       },
     }),
     floating: (props) => ({
       field: {
-        boxShadow: "sm",
-        ...floatingBackground("default", props),
-        ...floatingBorder("default", props),
-
-        _hover: {
-          ...floatingBorder("hover", props),
-          ...floatingBackground("hover", props),
-        },
-        _active: {
-          ...floatingBorder("active", props),
-          ...floatingBackground("active", props),
-        },
-        _selected: {
-          ...floatingBorder("selected", props),
-          ...floatingBackground("selected", props),
-        },
+        ...inputVariant("floating", props),
       },
     }),
   },

package/src/theme/components/listbox.ts

@@ -1,10 +1,10 @@
 import { anatomy } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-import { mode } from "@chakra-ui/theme-tools";
 import { baseBorder } from "../utils/base-utils";
 import { ghostBackground, ghostText } from "../utils/ghost-utils";
 import { surface } from "../utils/surface-utils";
 import { outlineBorder } from "../utils/outline-utils";
+import { floatingBorder } from "../utils/floating-utils";
 
 const parts = anatomy("ListBox").parts(
   "container",
@@ -25,7 +25,6 @@ const config = helpers.defineMultiStyleConfig({
       width: "100%",
       listStyle: "none",
       borderBottomRadius: "sm",
-      ...baseBorder("default", props),
     },
     item: {
       paddingX: 2,
@@ -58,6 +57,21 @@ const config = helpers.defineMultiStyleConfig({
       },
     },
   }),
+  variants: {
+    base: (props) => ({
+      container: {
+        ...baseBorder("default", props),
+      },
+    }),
+    floating: (props) => ({
+      container: {
+        ...floatingBorder("default", props),
+      },
+    }),
+  },
+  defaultProps: {
+    variant: "base",
+  },
 });
 
 export default config;

package/src/theme/components/select.ts

@@ -2,6 +2,7 @@ import { selectAnatomy } from "@chakra-ui/anatomy";
 import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
 import { baseText } from "../utils/base-utils";
 import { default as Input } from "./input";
+import { inputBaseStyle, inputVariant } from "../utils/input-utils";
 
 const parts = selectAnatomy.extend("root");
 
@@ -15,7 +16,7 @@ const config = helpers.defineMultiStyleConfig({
       position: "relative",
       "& + label": {
         fontSize: ["mobile.sm", "desktop.sm"],
-        top: "2px",
+        top: "0.2rem",
         left: 3,
         zIndex: 2,
         position: "absolute",
@@ -28,10 +29,9 @@ const config = helpers.defineMultiStyleConfig({
       },
     },
     field: {
-      ...Input.baseStyle!(props).field,
+      ...inputBaseStyle(props).field,
       appearance: "none",
       paddingTop: "1rem",
-      "option, optgroup": {},
     },
     icon: {
       width: 5,
@@ -46,6 +46,21 @@ const config = helpers.defineMultiStyleConfig({
       },
     },
   }),
+  variants: {
+    base: (props) => ({
+      field: {
+        ...inputVariant("base", props),
+      },
+    }),
+    floating: (props) => ({
+      field: {
+        ...inputVariant("floating", props),
+      },
+    }),
+  },
+  defaultProps: {
+    variant: "base",
+  },
 });
 
 export default config;

package/src/theme/components/textarea.ts

@@ -1,9 +1,9 @@
 import { defineStyleConfig } from "@chakra-ui/react";
-import Input from "./input";
+import { inputBaseStyle, inputVariant } from "../utils/input-utils";
 
 const config = defineStyleConfig({
   baseStyle: (props) => ({
-    ...Input.baseStyle!(props).field,
+    ...inputBaseStyle(props).field,
     minHeight: "5rem",
     verticalAlign: "top",
     appearance: "none",
@@ -17,6 +17,17 @@ const config = defineStyleConfig({
       },
     },
   }),
+  variants: {
+    base: (props) => ({
+      ...inputVariant("base", props),
+    }),
+    floating: (props) => ({
+      ...inputVariant("floating", props),
+    }),
+  },
+  defaultProps: {
+    variant: "base",
+  },
 });
 
 export default config;

package/src/theme/utils/focus-utils.ts

@@ -1,6 +1,6 @@
-import { mode } from "@chakra-ui/theme-tools";
+import { mode, StyleFunctionProps } from "@chakra-ui/theme-tools";
 
-export const focusVisibleStyles = (props: any) => ({
+export const focusVisibleStyles = (props: StyleFunctionProps) => ({
   _focusVisible: {
     outlineWidth: "2px",
     outlineColor: mode("outline.focus.light", "outline.focus.dark")(props),