@vygruppen/spor-react 12.24.16 → 13.0.0

package/src/input/Select.tsx

@@ -57,51 +57,54 @@ export type SelectProps = ChakraSelectRootProps &
  *
  */
 
-export const Select = React.forwardRef<HTMLDivElement, SelectProps>(
-  (props, ref) => {
-    const {
-      variant = "core",
-      children,
-      positioning,
-      label,
-      errorText,
-      invalid,
-      helperText,
-      css,
-      ...rest
-    } = props;
-    const recipe = useSlotRecipe({ key: "select" });
-    const styles = recipe({ variant });
+export const Select = ({
+  ref,
+  ...props
+}: SelectProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
+  const {
+    variant = "core",
+    children,
+    positioning,
+    label,
+    errorText,
+    invalid,
+    helperText,
+    css,
+    ...rest
+  } = props;
+  const recipe = useSlotRecipe({ key: "select" });
+  const styles = recipe({ variant });
 
-    return (
-      <Field
-        errorText={errorText}
-        invalid={invalid}
-        helperText={helperText}
-        required={props.required}
-        id={rest.id}
-        css={css}
+  return (
+    <Field
+      errorText={errorText}
+      invalid={invalid}
+      helperText={helperText}
+      required={props.required}
+      id={rest.id}
+      css={css}
+    >
+      <ChakraSelect.Root
+        {...rest}
+        ref={ref}
+        positioning={{ sameWidth: true, ...positioning }}
+        variant={variant}
+        css={styles.root}
+        position="relative"
       >
-        <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} baseStyle={css}>
-            {children}
-          </SelectContent>
-        </ChakraSelect.Root>
-      </Field>
-    );
-  },
-);
+        <SelectTrigger data-attachable>
+          <SelectValueText withPlaceholder={label ? true : false} />
+        </SelectTrigger>
+        {label && <SelectLabel css={styles.label}>{label}</SelectLabel>}
+        <SelectContent css={styles.selectContent} baseStyle={css}>
+          {children}
+        </SelectContent>
+      </ChakraSelect.Root>
+    </Field>
+  );
+};
 
 export const SelectLabel = (props: SelectLabelProps) => {
   const { value } = useSelectContext();
@@ -114,49 +117,49 @@ export const SelectLabel = (props: SelectLabelProps) => {
   );
 };
 
-Select.displayName = "Select";
-
 type SelectItemProps = ChakraSelect.ItemProps & {
   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 width="100%">
-          <ChakraSelect.ItemText display="flex">
-            {children}
-          </ChakraSelect.ItemText>
-          {description && (
-            <Box data-part="item-description" css={styles.itemDescription}>
-              {description}
-            </Box>
-          )}
-        </Box>
+export const SelectItem = ({
+  ref,
+  ...props
+}: SelectItemProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) => {
+  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 width="100%">
+        <ChakraSelect.ItemText display="flex">{children}</ChakraSelect.ItemText>
+        {description && (
+          <Box data-part="item-description" css={styles.itemDescription}>
+            {description}
+          </Box>
+        )}
+      </Box>
 
-        <ChakraSelect.ItemIndicator>
-          <CheckmarkFill18Icon />
-        </ChakraSelect.ItemIndicator>
-      </ChakraSelect.Item>
-    );
-  },
-);
-SelectItem.displayName = "SelectItem";
+      <ChakraSelect.ItemIndicator>
+        <CheckmarkFill18Icon />
+      </ChakraSelect.ItemIndicator>
+    </ChakraSelect.Item>
+  );
+};
 
 type SelectItemGroupProps = ChakraSelect.ItemGroupProps & {
   label: React.ReactNode;
   children: React.ReactNode;
 };
 
-export const SelectItemGroup = React.forwardRef<
-  HTMLDivElement,
-  SelectItemGroupProps
->(function SelectItemGroup(props, ref) {
+export const SelectItemGroup = function SelectItemGroup({
+  ref,
+  ...props
+}: SelectItemGroupProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) {
   const { children, label, ...rest } = props;
   return (
     <ChakraSelect.ItemGroup {...rest} ref={ref}>
@@ -164,17 +167,19 @@ export const SelectItemGroup = React.forwardRef<
       {children}
     </ChakraSelect.ItemGroup>
   );
-});
+};
 
 type SelectTriggerProps = ChakraSelect.ControlProps & {
   clearable?: boolean;
   children?: React.ReactNode;
 };
 
-export const SelectTrigger = React.forwardRef<
-  HTMLButtonElement,
-  SelectTriggerProps
->(function SelectTrigger(props, ref) {
+export const SelectTrigger = function SelectTrigger({
+  ref,
+  ...props
+}: SelectTriggerProps & {
+  ref?: React.RefObject<HTMLButtonElement>;
+}) {
   const { children, clearable, ...rest } = props;
   const recipe = useSlotRecipe({ key: "select" });
   const styles = recipe();
@@ -194,16 +199,18 @@ export const SelectTrigger = React.forwardRef<
       </ChakraSelect.IndicatorGroup>
     </ChakraSelect.Control>
   );
-});
+};
 
 type SelectClearTriggerProps = ChakraSelect.ClearTriggerProps & {
   children?: React.ReactNode;
 };
 
-const SelectClearTrigger = React.forwardRef<
-  HTMLButtonElement,
-  SelectClearTriggerProps
->(function SelectClearTrigger(props, ref) {
+const SelectClearTrigger = function SelectClearTrigger({
+  ref,
+  ...props
+}: SelectClearTriggerProps & {
+  ref?: React.RefObject<HTMLButtonElement>;
+}) {
   return (
     <ChakraSelect.ClearTrigger asChild {...props} ref={ref}>
       <CloseButton
@@ -214,7 +221,7 @@ const SelectClearTrigger = React.forwardRef<
       />
     </ChakraSelect.ClearTrigger>
   );
-});
+};
 
 type SelectContentProps = ChakraSelect.ContentProps & {
   portalled?: boolean;
@@ -222,12 +229,13 @@ type SelectContentProps = ChakraSelect.ContentProps & {
   baseStyle?: SystemStyleObject;
 };
 
-export const SelectContent = React.forwardRef<
-  HTMLDivElement,
-  SelectContentProps
->(function SelectContent(props, ref) {
+export const SelectContent = function SelectContent({
+  ref,
+  ...props
+}: SelectContentProps & {
+  ref?: React.RefObject<HTMLDivElement>;
+}) {
   const { portalled = true, portalRef, baseStyle, ...rest } = props;
-
   return (
     <Portal disabled={!portalled} container={portalRef}>
       <ChakraSelect.Positioner css={baseStyle}>
@@ -235,7 +243,7 @@ export const SelectContent = React.forwardRef<
       </ChakraSelect.Positioner>
     </Portal>
   );
-});
+};
 
 type SelectValueTextProps = Omit<ChakraSelect.ValueTextProps, "children"> & {
   children?(items: CollectionItem[]): React.ReactNode;
@@ -243,10 +251,12 @@ type SelectValueTextProps = Omit<ChakraSelect.ValueTextProps, "children"> & {
   withPlaceholder?: boolean;
 };
 
-export const SelectValueText = React.forwardRef<
-  HTMLSpanElement,
-  SelectValueTextProps
->(function SelectValueText(props, ref) {
+export const SelectValueText = function SelectValueText({
+  ref,
+  ...props
+}: SelectValueTextProps & {
+  ref?: React.RefObject<HTMLSpanElement>;
+}) {
   const { children, withPlaceholder, placeholder, ...rest } = props;
   return (
     <ChakraSelect.ValueText
@@ -274,7 +284,7 @@ export const SelectValueText = React.forwardRef<
       </ChakraSelect.Context>
     </ChakraSelect.ValueText>
   );
-});
+};
 
 export const SelectItemText = ChakraSelect.ItemText;
 export const SelectRoot = ChakraSelect.Root;

package/src/input/Switch.tsx

@@ -5,7 +5,7 @@ import {
   Switch as ChakraSwitch,
   useSlotRecipe,
 } from "@chakra-ui/react";
-import React, { forwardRef, PropsWithChildren } from "react";
+import React, { PropsWithChildren } from "react";
 
 import { switchSlotRecipe } from "../theme/slot-recipes/switch";
 import { Field, FieldBaseProps } from "./Field";
@@ -45,45 +45,47 @@ export type SwitchProps = Exclude<
  * ```
  */
 
-export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
-  (props, ref) => {
-    const {
-      rootRef,
-      size = "md",
-      label,
-      invalid,
-      errorText,
-      helperText,
-      css,
-      ...rest
-    } = props;
-    const recipe = useSlotRecipe({ key: "switch" });
-    const styles = recipe({ size });
+export const Switch = ({
+  ref,
+  ...props
+}: SwitchProps & {
+  ref?: React.RefObject<HTMLInputElement>;
+}) => {
+  const {
+    rootRef,
+    size = "md",
+    label,
+    invalid,
+    errorText,
+    helperText,
+    css,
+    ...rest
+  } = props;
+  const recipe = useSlotRecipe({ key: "switch" });
+  const styles = recipe({ size });
 
-    return (
-      <Field
-        style={{ width: "auto" }}
-        invalid={invalid}
-        errorText={errorText}
-        helperText={helperText}
-        required={props.required}
-        id={rest.id}
-        css={css}
+  return (
+    <Field
+      style={{ width: "auto" }}
+      invalid={invalid}
+      errorText={errorText}
+      helperText={helperText}
+      required={props.required}
+      id={rest.id}
+      css={css}
+    >
+      <ChakraSwitch.Root
+        ref={rootRef}
+        {...rest}
+        checked={props.checked}
+        css={styles.root}
       >
-        <ChakraSwitch.Root
-          ref={rootRef}
-          {...rest}
-          checked={props.checked}
-          css={styles.root}
-        >
-          <ChakraSwitch.HiddenInput ref={ref} />
-          <ChakraSwitch.Control css={styles.control}>
-            <ChakraSwitch.Thumb />
-          </ChakraSwitch.Control>
-          {label && <ChakraSwitch.Label>{label}</ChakraSwitch.Label>}
-        </ChakraSwitch.Root>
-      </Field>
-    );
-  },
-);
-Switch.displayName = "Switch";
+        <ChakraSwitch.HiddenInput ref={ref} />
+        <ChakraSwitch.Control css={styles.control}>
+          <ChakraSwitch.Thumb />
+        </ChakraSwitch.Control>
+        {label && <ChakraSwitch.Label>{label}</ChakraSwitch.Label>}
+      </ChakraSwitch.Root>
+    </Field>
+  );
+};

package/src/input/Textarea.tsx

@@ -7,7 +7,6 @@ import {
   useRecipe,
 } from "@chakra-ui/react";
 import React, {
-  forwardRef,
   PropsWithChildren,
   ReactNode,
   useId,
@@ -56,71 +55,74 @@ const useLabelHeight = (label: ReactNode | undefined) => {
   }, [label]);
   return { labelRef, labelHeight };
 };
-export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
-  (props, ref) => {
-    const {
-      label,
-      variant = "core",
-      invalid,
-      required,
-      errorText,
-      readOnly,
-      helperText,
-      floatingLabel = true,
-      ...restProps
-    } = props;
-    const recipe = useRecipe({ key: "textarea" });
-    const styles = recipe({ variant });
-    const { labelRef, labelHeight } = useLabelHeight(label);
 
-    const inputRef = useRef<HTMLTextAreaElement>(null);
-    useImperativeHandle(ref, () => inputRef.current as HTMLTextAreaElement, []);
-    const { shouldFloat, handleFocus, handleBlur, handleChange, isControlled } =
-      useFloatingInputState<HTMLTextAreaElement>({
-        value: props.value,
-        defaultValue: props.defaultValue,
-        onFocus: props.onFocus,
-        onBlur: props.onBlur,
-        onChange: props.onChange,
-        inputRef,
-      });
+export const Textarea = ({
+  ref,
+  ...props
+}: TextareaProps & {
+  ref?: React.RefObject<HTMLTextAreaElement>;
+}) => {
+  const {
+    label,
+    variant = "core",
+    invalid,
+    required,
+    errorText,
+    readOnly,
+    helperText,
+    floatingLabel = true,
+    ...restProps
+  } = props;
+  const recipe = useRecipe({ key: "textarea" });
+  const styles = recipe({ variant });
 
-    const labelId = useId();
+  const { labelRef, labelHeight } = useLabelHeight(label);
 
-    return (
-      <Field
-        errorText={errorText}
-        helperText={helperText}
-        invalid={invalid}
-        required={required}
-        readOnly={readOnly}
-        floatingLabel={floatingLabel}
-        shouldFloat={shouldFloat}
-        position="relative"
-        label={
-          <Box id={labelId}>
-            <label ref={labelRef}>{label}</label>
-          </Box>
-        }
-        id={restProps.id}
-      >
-        <ChakraTextarea
-          {...restProps}
-          css={styles}
-          className="peer"
-          ref={inputRef}
-          value={isControlled ? props.value : undefined}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          onChange={handleChange}
-          style={
-            { "--label-height": `${labelHeight}px` } as React.CSSProperties
-          }
-          placeholder=" "
-          aria-labelledby={labelId}
-        />
-      </Field>
-    );
-  },
-);
-Textarea.displayName = "Textarea";
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  useImperativeHandle(ref, () => inputRef.current!, []);
+
+  const { shouldFloat, handleFocus, handleBlur, handleChange, isControlled } =
+    useFloatingInputState<HTMLTextAreaElement>({
+      value: props.value,
+      defaultValue: props.defaultValue,
+      onFocus: props.onFocus,
+      onBlur: props.onBlur,
+      onChange: props.onChange,
+      inputRef: inputRef as React.RefObject<HTMLTextAreaElement>,
+    });
+
+  const labelId = useId();
+
+  return (
+    <Field
+      errorText={errorText}
+      helperText={helperText}
+      invalid={invalid}
+      required={required}
+      readOnly={readOnly}
+      floatingLabel={floatingLabel}
+      shouldFloat={shouldFloat}
+      position="relative"
+      label={
+        <Box id={labelId}>
+          <label ref={labelRef}>{label}</label>
+        </Box>
+      }
+      id={restProps.id}
+    >
+      <ChakraTextarea
+        {...restProps}
+        css={styles}
+        className="peer"
+        ref={inputRef}
+        value={isControlled ? props.value : undefined}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onChange={handleChange}
+        style={{ "--label-height": `${labelHeight}px` } as React.CSSProperties}
+        placeholder=" "
+        aria-labelledby={labelId}
+      />
+    </Field>
+  );
+};

package/src/layout/PressableCard.tsx

@@ -5,7 +5,6 @@ import {
   RecipeVariantProps,
   useRecipe,
 } from "@chakra-ui/react";
-import { forwardRef } from "react";
 
 import { pressableCardRecipe } from "../theme/recipes/pressable-card";
 
@@ -42,13 +41,15 @@ import { pressableCardRecipe } from "../theme/recipes/pressable-card";
 type PressableCardProps = RecipeVariantProps<typeof pressableCardRecipe> &
   ButtonProps;
 
-export const PressableCard = forwardRef<HTMLButtonElement, PressableCardProps>(
-  (props, ref) => {
-    const recipe = useRecipe({ key: "pressableCard" });
-    const [recipeProps, restProps] = recipe.splitVariantProps(props);
-    const styles = recipe(recipeProps);
+export const PressableCard = ({
+  ref,
+  ...props
+}: PressableCardProps & {
+  ref?: React.RefObject<HTMLButtonElement>;
+}) => {
+  const recipe = useRecipe({ key: "pressableCard" });
+  const [recipeProps, restProps] = recipe.splitVariantProps(props);
+  const styles = recipe(recipeProps);
 
-    return <chakra.button {...restProps} css={styles} ref={ref} />;
-  },
-);
-PressableCard.displayName = "PressableCard";
+  return <chakra.button {...restProps} css={styles} ref={ref} />;
+};