@vygruppen/spor-react 12.13.1 → 12.13.3

package/dist/index.d.cts

@@ -543,6 +543,7 @@ type FieldBaseProps = {
     helperText?: React$1.ReactNode;
     errorText?: React$1.ReactNode;
     floatingLabel?: boolean;
+    shouldFloat?: boolean;
 };
 type FieldProps = Omit<Field$1.RootProps, "label" | "onChange" | "onBlur"> & React$1.PropsWithChildren<FieldVariantProps> & FieldBaseProps;
 /**
@@ -656,6 +657,9 @@ declare const DatePicker: React__default.ForwardRefExoticComponent<Omit<AriaDate
     withPortal?: boolean;
     onChange?: (value: DateValue | null) => void;
     positioning?: PopoverRootProps["positioning"];
+    noCalendar?: boolean;
+    overrideBorderColor?: string;
+    isActive?: boolean;
 } & FieldBaseProps & React__default.RefAttributes<HTMLDivElement>>;
 
 type DateRangePickerProps = Omit<AriaDateRangePickerProps<DateValue>, "onChange" | "errorMessage" | "isInvalid" | "isRequired"> & Pick<BoxProps, "minHeight"> & PropsWithChildren<DatePickerVariantProps> & CalendarVariants & {

package/dist/index.d.ts

@@ -543,6 +543,7 @@ type FieldBaseProps = {
     helperText?: React$1.ReactNode;
     errorText?: React$1.ReactNode;
     floatingLabel?: boolean;
+    shouldFloat?: boolean;
 };
 type FieldProps = Omit<Field$1.RootProps, "label" | "onChange" | "onBlur"> & React$1.PropsWithChildren<FieldVariantProps> & FieldBaseProps;
 /**
@@ -656,6 +657,9 @@ declare const DatePicker: React__default.ForwardRefExoticComponent<Omit<AriaDate
     withPortal?: boolean;
     onChange?: (value: DateValue | null) => void;
     positioning?: PopoverRootProps["positioning"];
+    noCalendar?: boolean;
+    overrideBorderColor?: string;
+    isActive?: boolean;
 } & FieldBaseProps & React__default.RefAttributes<HTMLDivElement>>;
 
 type DateRangePickerProps = Omit<AriaDateRangePickerProps<DateValue>, "onChange" | "errorMessage" | "isInvalid" | "isRequired"> & Pick<BoxProps, "minHeight"> & PropsWithChildren<DatePickerVariantProps> & CalendarVariants & {

package/dist/index.mjs

@@ -2,7 +2,7 @@ import { useSlotRecipe, Accordion as Accordion$1, Stack, Box, HStack, Progress,
 export { AspectRatio, Box, BreadcrumbCurrentLink, BreadcrumbEllipsis, BreadcrumbLink, Center, ClientOnly, Collapsible, Container, Em, Flex, For, FormatByte, FormatNumber, Grid, GridItem, HStack, Icon, Image, Kbd, LocaleProvider, Portal, Show, SimpleGrid, Spacer, Span, Stack, TableBody, TableCaption, TableCell, TableColumn, TableColumnGroup, TableColumnHeader, TableFooter, TableHeader, TableRoot, TableRow, VStack, VisuallyHidden, createIcon, createListCollection, createSystem, defineConfig, defineRecipe, defineStyle, chakra as spor, useBreakpointValue, useCheckbox, useClipboard, useControllableProp, useDisclosure, useMediaQuery, useRecipe, useSlotRecipe, useToken } from '@chakra-ui/react';
 import { DropdownDownFill24Icon, CopyOutline18Icon, CheckmarkFill18Icon, CloseFill18Icon, CloseFill30Icon, CloseFill24Icon, ServiceFill24Icon, QuestionFill24Icon, ErrorOutline24Icon, ErrorFill24Icon, AltTransportFill24Icon, WarningFill24Icon, SuccessFill24Icon, InformationFill24Icon, DropdownDownFill18Icon, DropdownRightFill18Icon, CalendarOutline24Icon, ArrowLeftFill24Icon, CloseOutline24Icon, SearchOutline24Icon, InformationFill18Icon, WarningFill18Icon, ErrorFill18Icon, Forward15MediaControllerFill30Icon, Backward15MediaControllerFill30Icon, PauseMediaControllerFill24Icon, PlayMediaControllerFill24Icon, NextMediaControllerFill30Icon, PreviousMediaControllerFill30Icon, ArrowRightFill18Icon, DropdownLeftOutline18Icon, DropdownRightOutline18Icon, WalkFill30Icon, WalkFill24Icon, WalkFill18Icon, AltTransportFill30Icon, AltTransportFill18Icon, TramFill30Icon, TramFill24Icon, TramFill18Icon, SubwayFill30Icon, SubwayFill24Icon, SubwayFill18Icon, FerryFill30Icon, FerryFill24Icon, FerryFill18Icon, BusFill30Icon, BusFill24Icon, BusFill18Icon, ExpressBusFill30Icon, ExpressBusFill24Icon, ExpressBusFill18Icon, TrainFill30Icon, TrainFill24Icon, TrainFill18Icon, LinkOutOutline24Icon, LinkOutOutline18Icon, ArrowLeftOutline24Icon, ArrowRightOutline24Icon, DropdownLeftFill18Icon, SuccessFill18Icon } from '@vygruppen/spor-icon-react';
 import * as React27 from 'react';
-import React27__default, { forwardRef, createContext, useId, cloneElement, useEffect, useRef, isValidElement, useState, useMemo, useLayoutEffect, useContext } from 'react';
+import React27__default, { forwardRef, createContext, useId, cloneElement, useEffect, useRef, useState, isValidElement, useMemo, useLayoutEffect, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { spinnerColorData, inlineLoaderColorData, contentLoaderData, fullScreenLoaderWhiteData, inlineLoaderDarkData, spinnerLightData, spinnerDarkData, fullScreenLoaderBlackData, inlineLoaderLightData } from '@vygruppen/spor-loader';
 import ReactLottie from 'lottie-react';
@@ -16,7 +16,6 @@ export { Item, Section } from 'react-stately';
 import { GregorianCalendar, createCalendar, getLocalTimeZone, endOfMonth, getWeeksInMonth, isSameMonth, isToday, parseTime } from '@internationalized/date';
 export { Time } from '@internationalized/date';
 import { useSwipeable } from 'react-swipeable';
-import ReactDOM from 'react-dom';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
 import { Global } from '@emotion/react';
 import tokens23__default from '@vygruppen/spor-design-tokens';
@@ -1312,24 +1311,17 @@ FloatingLabel.displayName = "FloatingLabel";
 var 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 */
+  top: "0.9rem",
+  color: "text",
+  fontSize: ["mobile.sm", "desktop.sm"],
+  "&[data-float]": {
     fontSize: ["mobile.xs", "desktop.xs"],
     color: "text",
     top: "0.3rem"
@@ -1362,6 +1354,7 @@ var Field3 = React27.forwardRef(
       required,
       direction,
       id,
+      shouldFloat,
       ...rest
     } = props;
     const recipe = useSlotRecipe({ key: "field" });
@@ -1383,7 +1376,7 @@ var Field3 = React27.forwardRef(
               /* @__PURE__ */ jsx(Field.RequiredIndicator, {})
             ] }),
             children,
-            label && floatingLabel && /* @__PURE__ */ jsxs(FloatingLabel, { children: [
+            label && floatingLabel && /* @__PURE__ */ jsxs(FloatingLabel, { "data-float": shouldFloat ? true : void 0, children: [
               label,
               /* @__PURE__ */ jsx(Field.RequiredIndicator, {})
             ] }),
@@ -1875,7 +1868,14 @@ var getAriaLabel = (segmentType) => {
 };
 var StyledField = forwardRef(
   function StyledField2(props, ref) {
-    const { children, variant, isDisabled, ...otherProps } = props;
+    const {
+      children,
+      variant,
+      isDisabled,
+      isActive,
+      overrideBorderColor,
+      ...otherProps
+    } = props;
     const { invalid } = useFieldContext() ?? {
       };
     const recipe = useSlotRecipe({
@@ -1887,6 +1887,8 @@ var StyledField = forwardRef(
       {
         ...otherProps,
         css: styles.wrapper,
+        "data-active": isActive ? "" : void 0,
+        style: overrideBorderColor ? { outlineColor: overrideBorderColor } : void 0,
         ref,
         "aria-invalid": invalid,
         "aria-disabled": isDisabled,
@@ -1929,7 +1931,10 @@ var DatePicker = forwardRef(
     });
     const styles = recipe({ variant });
     const locale = useCurrentLocale();
+    const shouldShowCalendar = state.isOpen && !props.isDisabled && !props.noCalendar;
     const onFieldClick = () => {
+      if (props.noCalendar)
+        return;
       state.setOpen(true);
     };
     const popoverContent = /* @__PURE__ */ jsx(Popover$1.Positioner, { children: /* @__PURE__ */ jsx(Popover$1.Content, { css: styles.calendarPopover, children: /* @__PURE__ */ jsx(Popover$1.Body, { minWidth: "20rem", children: /* @__PURE__ */ jsx(
@@ -1961,12 +1966,14 @@ var DatePicker = forwardRef(
                 StyledField,
                 {
                   variant,
-                  onClick: onFieldClick,
+                  onClick: props.noCalendar ? void 0 : onFieldClick,
                   paddingX: 3,
                   minHeight,
                   isDisabled: props.isDisabled,
+                  isActive: props.isActive,
+                  overrideBorderColor: props.overrideBorderColor,
                   children: [
-                    /* @__PURE__ */ jsx(Popover$1.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                    props.noCalendar ? /* @__PURE__ */ jsx(Box, { pr: 3, pl: 0.5, mr: 0.5, children: /* @__PURE__ */ jsx(CalendarOutline24Icon, {}) }) : /* @__PURE__ */ jsx(Popover$1.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
                       CalendarTriggerButton,
                       {
                         paddingLeft: 1,
@@ -1990,8 +1997,7 @@ var DatePicker = forwardRef(
               ) })
             }
           ),
-          state.isOpen && !props.isDisabled && withPortal && /* @__PURE__ */ jsx(Portal, { children: popoverContent }),
-          state.isOpen && !props.isDisabled && !withPortal && popoverContent
+          shouldShowCalendar && (withPortal ? /* @__PURE__ */ jsx(Portal, { children: popoverContent }) : popoverContent)
         ] })
       }
     ) });
@@ -2561,8 +2567,6 @@ var Popover = forwardRef(
         ...popoverProps,
         ref: popoverRef,
         minWidth: ((_a5 = triggerRef.current) == null ? void 0 : _a5.clientWidth) ?? "auto",
-        position: "absolute",
-        zIndex: 1400,
         children: [
           /* @__PURE__ */ jsx(DismissButton, { onDismiss: state.close }),
           children,
@@ -2571,9 +2575,6 @@ var Popover = forwardRef(
       }
     );
     if (isNonModal) {
-      if (globalThis.window !== void 0 && typeof document !== "undefined") {
-        return ReactDOM.createPortal(popoverBox, document.body);
-      }
       return popoverBox;
     }
     return /* @__PURE__ */ jsxs(Overlay, { children: [
@@ -2805,6 +2806,13 @@ var Input = forwardRef(
     const recipe = useRecipe({ key: "input" });
     const [recipeProps, restProps] = recipe.splitVariantProps(props);
     const styles = recipe(recipeProps);
+    const [focused, setFocused] = useState(false);
+    const isControlled = props.value !== void 0;
+    const [uncontrolledValue, setUncontrolledValue] = useState(
+      props.defaultValue ? String(props.defaultValue) : ""
+    );
+    const inputValue = isControlled ? String(props.value ?? "") : uncontrolledValue;
+    const shouldFloat = inputValue.length > 0 || focused;
     return /* @__PURE__ */ jsxs(
       Field3,
       {
@@ -2814,14 +2822,12 @@ var Input = forwardRef(
         hidden,
         errorText,
         id: props.id,
-        label: (
-          // Render startElement invisibly to align label text with input content when an icon is present
-          /* @__PURE__ */ jsxs(Flex, { children: [
-            /* @__PURE__ */ jsx(Box, { visibility: "hidden", children: startElement }),
-            label
-          ] })
-        ),
+        label: /* @__PURE__ */ jsxs(Flex, { children: [
+          /* @__PURE__ */ jsx(Box, { visibility: "hidden", children: startElement }),
+          label
+        ] }),
         floatingLabel: true,
+        shouldFloat,
         children: [
           startElement && /* @__PURE__ */ jsx(InputElement, { pointerEvents: "none", paddingX: 2, children: startElement }),
           /* @__PURE__ */ jsx(
@@ -2835,6 +2841,24 @@ var Input = forwardRef(
               paddingRight: endElement ? "2.6rem" : void 0,
               ...restProps,
               className: `peer ${props.className}`,
+              value: isControlled ? props.value : void 0,
+              onFocus: (e) => {
+                var _a5;
+                (_a5 = props.onFocus) == null ? void 0 : _a5.call(props, e);
+                setFocused(true);
+              },
+              onBlur: (e) => {
+                var _a5;
+                (_a5 = props.onBlur) == null ? void 0 : _a5.call(props, e);
+                setFocused(false);
+              },
+              onChange: (e) => {
+                var _a5;
+                (_a5 = props.onChange) == null ? void 0 : _a5.call(props, e);
+                if (!isControlled) {
+                  setUncontrolledValue(e.target.value);
+                }
+              },
               placeholder: "",
               css: styles
             }
@@ -2999,6 +3023,7 @@ var NativeSelect = React27.forwardRef(function NativeSelect2(props, ref) {
       errorText,
       id: rest.id,
       floatingLabel: true,
+      shouldFloat: true,
       children: /* @__PURE__ */ jsxs(
         NativeSelect$1.Root,
         {
@@ -3672,11 +3697,23 @@ var Textarea = forwardRef(
       readOnly,
       helperText,
       floatingLabel,
+      value,
+      defaultValue,
+      onFocus,
+      onBlur,
+      onChange,
       ...restProps
     } = props;
     const recipe = useRecipe({ key: "textarea" });
     const styles = recipe({ variant });
     const { labelRef, labelHeight } = useLabelHeight(label);
+    const [focused, setFocused] = useState(false);
+    const isControlled = value !== void 0;
+    const [uncontrolledValue, setUncontrolledValue] = useState(
+      defaultValue ? String(defaultValue) : ""
+    );
+    const inputValue = isControlled ? String(value ?? "") : uncontrolledValue;
+    const shouldFloat = inputValue.length > 0 || focused;
     return /* @__PURE__ */ jsxs(
       Field3,
       {
@@ -3686,6 +3723,7 @@ var Textarea = forwardRef(
         required,
         readOnly,
         floatingLabel,
+        shouldFloat,
         position: "relative",
         children: [
           /* @__PURE__ */ jsx(
@@ -3695,11 +3733,33 @@ var Textarea = forwardRef(
               css: styles,
               className: "peer",
               ref,
+              value: isControlled ? value : void 0,
+              defaultValue,
+              onFocus: (e) => {
+                onFocus == null ? void 0 : onFocus(e);
+                setFocused(true);
+              },
+              onBlur: (e) => {
+                onBlur == null ? void 0 : onBlur(e);
+                setFocused(false);
+              },
+              onChange: (e) => {
+                onChange == null ? void 0 : onChange(e);
+                if (!isControlled)
+                  setUncontrolledValue(e.target.value);
+              },
               style: { "--label-height": `${labelHeight}px` },
               placeholder: " "
             }
           ),
-          /* @__PURE__ */ jsx(FloatingLabel, { ref: labelRef, children: label })
+          /* @__PURE__ */ jsx(
+            FloatingLabel,
+            {
+              ref: labelRef,
+              "data-float": shouldFloat ? true : void 0,
+              children: label
+            }
+          )
         ]
       }
     );
@@ -7053,6 +7113,8 @@ var collapsibleSlotRecipe = defineSlotRecipe({
   className: "chakra-collapsible",
   base: {
     content: {
+      margin: -1,
+      padding: 1,
       overflow: "hidden",
       _open: {
         animationName: "expand-height, fade-in",
@@ -7090,6 +7152,10 @@ var datePickerSlotRecipe = defineSlotRecipe({
       _focusWithin: {
         outline: "2px solid",
         outlineColor: "outline.focus"
+      },
+      "&[data-active]": {
+        outline: "2px solid",
+        outlineColor: "outline.focus"
       }
     },
     inputLabel: {
@@ -7133,7 +7199,8 @@ var datePickerSlotRecipe = defineSlotRecipe({
       outline: "1px solid",
       outlineColor: "floating.outline",
       boxShadow: "md",
-      backgroundColor: "floating.surface"
+      backgroundColor: "floating.surface",
+      minHeight: "min-content"
     },
     rangeCalendarPopover: {
       width: "43rem",