@vygruppen/spor-react 12.13.2 → 12.13.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.13.2",
+  "version": "12.13.4",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -46,8 +46,8 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
-    "@vygruppen/spor-icon-react": "4.2.1",
     "@vygruppen/spor-design-tokens": "4.1.0",
+    "@vygruppen/spor-icon-react": "4.2.1",
     "@vygruppen/spor-loader": "0.7.0"
   },
   "devDependencies": {

package/src/datepicker/DatePicker.tsx

@@ -10,6 +10,7 @@ import {
   useFieldContext,
   useSlotRecipe,
 } from "@chakra-ui/react";
+import { CalendarOutline24Icon } from "@vygruppen/spor-icon-react";
 import React, { forwardRef, PropsWithChildren, useId, useRef } from "react";
 import {
   AriaDatePickerProps,
@@ -42,6 +43,10 @@ type DatePickerProps = Omit<AriaDatePickerProps<DateValue>, "onChange"> &
     withPortal?: boolean;
     onChange?: (value: DateValue | null) => void;
     positioning?: PopoverRootProps["positioning"];
+    noCalendar?: boolean;
+    overrideBorderColor?: string;
+    isActive?: boolean;
+    onClick?: () => void;
   } & FieldBaseProps;
 
 /**
@@ -97,8 +102,14 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
     const styles = recipe({ variant });
     const locale = useCurrentLocale();
 
+    const shouldShowCalendar =
+      state.isOpen && !props.isDisabled && !props.noCalendar;
+
     const onFieldClick = () => {
-      state.setOpen(true);
+      if (!props.noCalendar) {
+        state.setOpen(true);
+      }
+      props.onClick?.();
     };
 
     const popoverContent = (
@@ -139,16 +150,25 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
                   paddingX={3}
                   minHeight={minHeight}
                   isDisabled={props.isDisabled}
+                  isActive={props.isActive}
+                  overrideBorderColor={props.overrideBorderColor}
                 >
-                  <ChakraPopover.Trigger asChild>
-                    <CalendarTriggerButton
-                      paddingLeft={1}
-                      paddingRight={1}
-                      variant={variant}
-                      ref={ref}
-                      {...buttonProps}
-                    />
-                  </ChakraPopover.Trigger>
+                  {props.noCalendar ? (
+                    <Box pr={3} pl={0.5} mr={0.5}>
+                      <CalendarOutline24Icon />
+                    </Box>
+                  ) : (
+                    <ChakraPopover.Trigger asChild>
+                      <CalendarTriggerButton
+                        paddingLeft={1}
+                        paddingRight={1}
+                        variant={variant}
+                        ref={ref}
+                        {...buttonProps}
+                      />
+                    </ChakraPopover.Trigger>
+                  )}
+
                   <DateField
                     label={props.label}
                     labelProps={labelProps}
@@ -159,10 +179,8 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
               </PopoverAnchor>
             </Field>
 
-            {state.isOpen && !props.isDisabled && withPortal && (
-              <Portal>{popoverContent}</Portal>
-            )}
-            {state.isOpen && !props.isDisabled && !withPortal && popoverContent}
+            {shouldShowCalendar &&
+              (withPortal ? <Portal>{popoverContent}</Portal> : popoverContent)}
           </ChakraPopover.Root>
         </Box>
       </I18nProvider>

package/src/datepicker/StyledField.tsx

@@ -14,10 +14,19 @@ type StyledFieldProps = BoxProps &
   PropsWithChildren<DatePickerVariantProps> &
   CalendarVariants & {
     isDisabled?: boolean;
+    isActive?: boolean;
+    overrideBorderColor?: string;
   };
 export const StyledField = forwardRef<HTMLDivElement, StyledFieldProps>(
   function StyledField(props, ref) {
-    const { children, variant, isDisabled, ...otherProps } = props;
+    const {
+      children,
+      variant,
+      isDisabled,
+      isActive,
+      overrideBorderColor,
+      ...otherProps
+    } = props;
     const { invalid } = useFieldContext() ?? {
       isInvalid: false,
     };
@@ -30,7 +39,11 @@ export const StyledField = forwardRef<HTMLDivElement, StyledFieldProps>(
     return (
       <Box
         {...otherProps}
-        css={styles.wrapper}
+        css={{
+          ...styles.wrapper,
+          outlineColor: overrideBorderColor || undefined,
+        }}
+        data-active={isActive ? "" : undefined}
         ref={ref}
         aria-invalid={invalid}
         aria-disabled={isDisabled}

package/src/input/Field.tsx

@@ -26,6 +26,7 @@ export type FieldBaseProps = {
   helperText?: React.ReactNode;
   errorText?: React.ReactNode;
   floatingLabel?: boolean;
+  shouldFloat?: boolean;
 };
 
 export type FieldProps = Omit<
@@ -66,6 +67,7 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
       required,
       direction,
       id,
+      shouldFloat,
       ...rest
     } = props;
     const recipe = useSlotRecipe({ key: "field" });
@@ -92,7 +94,7 @@ export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
           {children}
 
           {label && floatingLabel && (
-            <FloatingLabel>
+            <FloatingLabel data-float={shouldFloat ? true : undefined}>
               {label}
               <ChakraField.RequiredIndicator />
             </FloatingLabel>

package/src/input/FloatingLabel.tsx

@@ -12,8 +12,6 @@ FloatingLabel.displayName = "FloatingLabel";
 const floatingLabelStyles = defineStyle({
   paddingX: 3,
   fontWeight: "normal",
-  fontSize: ["mobile.xs", "desktop.xs"],
-  color: "text",
   pointerEvents: "none",
   zIndex: "docked",
   _disabled: {
@@ -21,16 +19,13 @@ const floatingLabelStyles = defineStyle({
   },
 
   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 */
+
+  top: "0.9rem",
+  color: "text",
+  fontSize: ["mobile.sm", "desktop.sm"],
+
+  "&[data-float]": {
     fontSize: ["mobile.xs", "desktop.xs"],
     color: "text",
     top: "0.3rem",

package/src/input/Input.tsx

@@ -7,7 +7,7 @@ import {
   InputElement,
   useRecipe,
 } from "@chakra-ui/react";
-import React, { ComponentProps, forwardRef, ReactNode } from "react";
+import React, { ComponentProps, forwardRef, ReactNode, useState } from "react";
 
 type ChakraInputProps = ComponentProps<typeof ChakraInput>;
 
@@ -74,6 +74,20 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     const [recipeProps, restProps] = recipe.splitVariantProps(props);
     const styles = recipe(recipeProps);
 
+    const [focused, setFocused] = useState(false);
+
+    const isControlled = props.value !== undefined;
+
+    const [uncontrolledValue, setUncontrolledValue] = useState(
+      props.defaultValue ? String(props.defaultValue) : "",
+    );
+
+    const inputValue = isControlled
+      ? String(props.value ?? "")
+      : uncontrolledValue;
+
+    const shouldFloat = inputValue.length > 0 || focused;
+
     return (
       <Field
         invalid={invalid}
@@ -83,13 +97,13 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
         errorText={errorText}
         id={props.id}
         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}
+        shouldFloat={shouldFloat}
       >
         {startElement && (
           <InputElement pointerEvents="none" paddingX={2}>
@@ -105,9 +119,25 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           paddingRight={endElement ? "2.6rem" : undefined}
           {...restProps}
           className={`peer ${props.className}`}
+          value={isControlled ? props.value : undefined}
+          onFocus={(e) => {
+            props.onFocus?.(e);
+            setFocused(true);
+          }}
+          onBlur={(e) => {
+            props.onBlur?.(e);
+            setFocused(false);
+          }}
+          onChange={(e) => {
+            props.onChange?.(e);
+            if (!isControlled) {
+              setUncontrolledValue(e.target.value);
+            }
+          }}
           placeholder=""
           css={styles}
         />
+
         {endElement && (
           <InputElement placement="end" paddingX={2}>
             {endElement}
@@ -117,4 +147,5 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     );
   },
 );
+
 Input.displayName = "Input";

package/src/input/NativeSelect.tsx

@@ -68,6 +68,7 @@ export const NativeSelect = React.forwardRef<
       errorText={errorText}
       id={rest.id}
       floatingLabel={true}
+      shouldFloat={true}
     >
       <ChakraNativeSelect.Root
         ref={ref}

package/src/input/Textarea.tsx

@@ -85,6 +85,11 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
       readOnly,
       helperText,
       floatingLabel,
+      value,
+      defaultValue,
+      onFocus,
+      onBlur,
+      onChange,
       ...restProps
     } = props;
     const recipe = useRecipe({ key: "textarea" });
@@ -92,6 +97,14 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
 
     const { labelRef, labelHeight } = useLabelHeight(label);
 
+    const [focused, setFocused] = useState(false);
+    const isControlled = value !== undefined;
+    const [uncontrolledValue, setUncontrolledValue] = useState(
+      defaultValue ? String(defaultValue) : "",
+    );
+    const inputValue = isControlled ? String(value ?? "") : uncontrolledValue;
+    const shouldFloat = inputValue.length > 0 || focused;
+
     return (
       <Field
         errorText={errorText}
@@ -100,6 +113,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
         required={required}
         readOnly={readOnly}
         floatingLabel={floatingLabel}
+        shouldFloat={shouldFloat}
         position="relative"
       >
         <ChakraTextarea
@@ -107,14 +121,34 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           css={styles}
           className="peer"
           ref={ref}
+          value={isControlled ? value : undefined}
+          defaultValue={defaultValue}
+          onFocus={(e) => {
+            onFocus?.(e);
+            setFocused(true);
+          }}
+          onBlur={(e) => {
+            onBlur?.(e);
+            setFocused(false);
+          }}
+          onChange={(e) => {
+            onChange?.(e);
+            if (!isControlled) setUncontrolledValue(e.target.value);
+          }}
           style={
             { "--label-height": `${labelHeight}px` } as React.CSSProperties
           }
           placeholder=" "
         />
-        <FloatingLabel ref={labelRef}>{label}</FloatingLabel>
+        <FloatingLabel
+          ref={labelRef}
+          data-float={shouldFloat ? true : undefined}
+        >
+          {label}
+        </FloatingLabel>
       </Field>
     );
   },
 );
+
 Textarea.displayName = "Textarea";

package/src/theme/slot-recipes/datepicker.ts

@@ -28,6 +28,13 @@ export const datePickerSlotRecipe = defineSlotRecipe({
         outline: "2px solid",
         outlineColor: "outline.focus",
       },
+      "&[data-active]": {
+        outline: "2px solid",
+        outlineColor: "outline.focus",
+        "&:hover": {
+          outlineColor: "outline.focus",
+        },
+      },
     },
     inputLabel: {
       fontSize: "mobile.xs",
@@ -158,6 +165,14 @@ export const datePickerSlotRecipe = defineSlotRecipe({
               outline: "1px solid",
               outlineColor: "core.outline",
             },
+
+            "&[data-active]": {
+              outline: "2px solid",
+              outlineColor: "outline.focus",
+              _hover: {
+                outlineColor: "outline.focus",
+              },
+            },
           },
           _invalid: {
             outline: "2px solid",
@@ -183,6 +198,14 @@ export const datePickerSlotRecipe = defineSlotRecipe({
               outline: "1px solid",
               outlineColor: "core.outline",
             },
+
+            "&[data-active]": {
+              outline: "2px solid",
+              outlineColor: "outline.focus",
+              _hover: {
+                outlineColor: "outline.focus",
+              },
+            },
           },
           _invalid: {
             outline: "2px solid",
@@ -200,6 +223,14 @@ export const datePickerSlotRecipe = defineSlotRecipe({
               outline: "1px solid",
               outlineColor: "core.outline",
             },
+
+            "&[data-active]": {
+              outline: "2px solid",
+              outlineColor: "outline.focus",
+              _hover: {
+                outlineColor: "outline.focus",
+              },
+            },
           },
           _invalid: {
             outline: "2px solid",