@vygruppen/spor-react 12.13.1 → 12.13.3

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.13.1 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.13.3 build /home/runner/work/spor/spor/packages/spor-react
 > tsup
 
 CLI Building entry: src/index.tsx, src/icons/index.tsx
@@ -11,18 +11,18 @@ CLI Cleaning output folder
 ESM Build start
 CJS Build start
 DTS Build start
-CJS dist/index.cjs           315.62 KB
-CJS dist/icons/index.cjs     381.00 B
-CJS dist/index.cjs.map       630.07 KB
-CJS dist/icons/index.cjs.map 157.00 B
-CJS ⚡️ Build success in 2628ms
-ESM dist/index.mjs           294.13 KB
+ESM dist/index.mjs           296.52 KB
 ESM dist/icons/index.mjs     110.00 B
-ESM dist/index.mjs.map       630.07 KB
+ESM dist/index.mjs.map       633.98 KB
 ESM dist/icons/index.mjs.map 157.00 B
-ESM ⚡️ Build success in 2629ms
-DTS ⚡️ Build success in 18484ms
+ESM ⚡️ Build success in 2612ms
+CJS dist/index.cjs           318.00 KB
+CJS dist/icons/index.cjs     381.00 B
+CJS dist/index.cjs.map       633.98 KB
+CJS dist/icons/index.cjs.map 157.00 B
+CJS ⚡️ Build success in 2612ms
+DTS ⚡️ Build success in 18933ms
 DTS dist/icons/index.d.ts  44.00 B
-DTS dist/index.d.ts        156.05 KB
+DTS dist/index.d.ts        156.16 KB
 DTS dist/icons/index.d.cts 44.00 B
-DTS dist/index.d.cts       156.05 KB
+DTS dist/index.d.cts       156.16 KB

package/.turbo/turbo-postinstall.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.13.1 postinstall /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.13.3 postinstall /home/runner/work/spor/spor/packages/spor-react
 > chakra typegen src/theme/index.ts
 
 ┌  Chakra CLI ⚡️

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @vygruppen/spor-react
 
+## 12.13.3
+
+### Patch Changes
+
+- 1457051: Added isActive and noCalendar props for datepicker
+- a8b04df: Label: Fix bug where it was always floating in safari.
+
+## 12.13.2
+
+### Patch Changes
+
+- 0714df2: Fix min height on datepicker popover, making sure it fits content.
+- 5829615: Revert combobox fix
+- 59306ea: Fix Collapsible to allow a minor overflow for border and shadow
+
 ## 12.13.1
 
 ### Patch Changes

package/dist/index.cjs

@@ -13,7 +13,6 @@ var lu = require('react-icons/lu');
 var reactStately = require('react-stately');
 var date = require('@internationalized/date');
 var reactSwipeable = require('react-swipeable');
-var ReactDOM = require('react-dom');
 var awesomePhonenumber = require('awesome-phonenumber');
 var react$1 = require('@emotion/react');
 var tokens23 = require('@vygruppen/spor-design-tokens');
@@ -44,7 +43,6 @@ function _interopNamespace(e) {
 
 var React27__namespace = /*#__PURE__*/_interopNamespace(React27);
 var ReactLottie__default = /*#__PURE__*/_interopDefault(ReactLottie);
-var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
 var tokens23__namespace = /*#__PURE__*/_interopNamespace(tokens23);
 var tokens4__default = /*#__PURE__*/_interopDefault(tokens4);
 
@@ -1333,24 +1331,17 @@ FloatingLabel.displayName = "FloatingLabel";
 var floatingLabelStyles = react.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"
@@ -1383,6 +1374,7 @@ var Field3 = React27__namespace.forwardRef(
       required,
       direction,
       id,
+      shouldFloat,
       ...rest
     } = props;
     const recipe = react.useSlotRecipe({ key: "field" });
@@ -1404,7 +1396,7 @@ var Field3 = React27__namespace.forwardRef(
               /* @__PURE__ */ jsxRuntime.jsx(react.Field.RequiredIndicator, {})
             ] }),
             children,
-            label && floatingLabel && /* @__PURE__ */ jsxRuntime.jsxs(FloatingLabel, { children: [
+            label && floatingLabel && /* @__PURE__ */ jsxRuntime.jsxs(FloatingLabel, { "data-float": shouldFloat ? true : void 0, children: [
               label,
               /* @__PURE__ */ jsxRuntime.jsx(react.Field.RequiredIndicator, {})
             ] }),
@@ -1896,7 +1888,14 @@ var getAriaLabel = (segmentType) => {
 };
 var StyledField = React27.forwardRef(
   function StyledField2(props, ref) {
-    const { children, variant, isDisabled, ...otherProps } = props;
+    const {
+      children,
+      variant,
+      isDisabled,
+      isActive,
+      overrideBorderColor,
+      ...otherProps
+    } = props;
     const { invalid } = react.useFieldContext() ?? {
       };
     const recipe = react.useSlotRecipe({
@@ -1908,6 +1907,8 @@ var StyledField = React27.forwardRef(
       {
         ...otherProps,
         css: styles.wrapper,
+        "data-active": isActive ? "" : void 0,
+        style: overrideBorderColor ? { outlineColor: overrideBorderColor } : void 0,
         ref,
         "aria-invalid": invalid,
         "aria-disabled": isDisabled,
@@ -1950,7 +1951,10 @@ var DatePicker = React27.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__ */ jsxRuntime.jsx(react.Popover.Positioner, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Content, { css: styles.calendarPopover, children: /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Body, { minWidth: "20rem", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1982,12 +1986,14 @@ var DatePicker = React27.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__ */ jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    props.noCalendar ? /* @__PURE__ */ jsxRuntime.jsx(react.Box, { pr: 3, pl: 0.5, mr: 0.5, children: /* @__PURE__ */ jsxRuntime.jsx(sporIconReact.CalendarOutline24Icon, {}) }) : /* @__PURE__ */ jsxRuntime.jsx(react.Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
                       CalendarTriggerButton,
                       {
                         paddingLeft: 1,
@@ -2011,8 +2017,7 @@ var DatePicker = React27.forwardRef(
               ) })
             }
           ),
-          state.isOpen && !props.isDisabled && withPortal && /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { children: popoverContent }),
-          state.isOpen && !props.isDisabled && !withPortal && popoverContent
+          shouldShowCalendar && (withPortal ? /* @__PURE__ */ jsxRuntime.jsx(react.Portal, { children: popoverContent }) : popoverContent)
         ] })
       }
     ) });
@@ -2582,8 +2587,6 @@ var Popover = React27.forwardRef(
         ...popoverProps,
         ref: popoverRef,
         minWidth: ((_a5 = triggerRef.current) == null ? void 0 : _a5.clientWidth) ?? "auto",
-        position: "absolute",
-        zIndex: 1400,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(reactAria.DismissButton, { onDismiss: state.close }),
           children,
@@ -2592,9 +2595,6 @@ var Popover = React27.forwardRef(
       }
     );
     if (isNonModal) {
-      if (globalThis.window !== void 0 && typeof document !== "undefined") {
-        return ReactDOM__default.default.createPortal(popoverBox, document.body);
-      }
       return popoverBox;
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(reactAria.Overlay, { children: [
@@ -2826,6 +2826,13 @@ var Input = React27.forwardRef(
     const recipe = react.useRecipe({ key: "input" });
     const [recipeProps, restProps] = recipe.splitVariantProps(props);
     const styles = recipe(recipeProps);
+    const [focused, setFocused] = React27.useState(false);
+    const isControlled = props.value !== void 0;
+    const [uncontrolledValue, setUncontrolledValue] = React27.useState(
+      props.defaultValue ? String(props.defaultValue) : ""
+    );
+    const inputValue = isControlled ? String(props.value ?? "") : uncontrolledValue;
+    const shouldFloat = inputValue.length > 0 || focused;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       Field3,
       {
@@ -2835,14 +2842,12 @@ var Input = React27.forwardRef(
         hidden,
         errorText,
         id: props.id,
-        label: (
-          // Render startElement invisibly to align label text with input content when an icon is present
-          /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(react.Box, { visibility: "hidden", children: startElement }),
-            label
-          ] })
-        ),
+        label: /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react.Box, { visibility: "hidden", children: startElement }),
+          label
+        ] }),
         floatingLabel: true,
+        shouldFloat,
         children: [
           startElement && /* @__PURE__ */ jsxRuntime.jsx(react.InputElement, { pointerEvents: "none", paddingX: 2, children: startElement }),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -2856,6 +2861,24 @@ var Input = React27.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
             }
@@ -3020,6 +3043,7 @@ var NativeSelect = React27__namespace.forwardRef(function NativeSelect2(props, r
       errorText,
       id: rest.id,
       floatingLabel: true,
+      shouldFloat: true,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         react.NativeSelect.Root,
         {
@@ -3693,11 +3717,23 @@ var Textarea = React27.forwardRef(
       readOnly,
       helperText,
       floatingLabel,
+      value,
+      defaultValue,
+      onFocus,
+      onBlur,
+      onChange,
       ...restProps
     } = props;
     const recipe = react.useRecipe({ key: "textarea" });
     const styles = recipe({ variant });
     const { labelRef, labelHeight } = useLabelHeight(label);
+    const [focused, setFocused] = React27.useState(false);
+    const isControlled = value !== void 0;
+    const [uncontrolledValue, setUncontrolledValue] = React27.useState(
+      defaultValue ? String(defaultValue) : ""
+    );
+    const inputValue = isControlled ? String(value ?? "") : uncontrolledValue;
+    const shouldFloat = inputValue.length > 0 || focused;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       Field3,
       {
@@ -3707,6 +3743,7 @@ var Textarea = React27.forwardRef(
         required,
         readOnly,
         floatingLabel,
+        shouldFloat,
         position: "relative",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -3716,11 +3753,33 @@ var Textarea = React27.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__ */ jsxRuntime.jsx(FloatingLabel, { ref: labelRef, children: label })
+          /* @__PURE__ */ jsxRuntime.jsx(
+            FloatingLabel,
+            {
+              ref: labelRef,
+              "data-float": shouldFloat ? true : void 0,
+              children: label
+            }
+          )
         ]
       }
     );
@@ -7074,6 +7133,8 @@ var collapsibleSlotRecipe = react.defineSlotRecipe({
   className: "chakra-collapsible",
   base: {
     content: {
+      margin: -1,
+      padding: 1,
       overflow: "hidden",
       _open: {
         animationName: "expand-height, fade-in",
@@ -7111,6 +7172,10 @@ var datePickerSlotRecipe = react.defineSlotRecipe({
       _focusWithin: {
         outline: "2px solid",
         outlineColor: "outline.focus"
+      },
+      "&[data-active]": {
+        outline: "2px solid",
+        outlineColor: "outline.focus"
       }
     },
     inputLabel: {
@@ -7154,7 +7219,8 @@ var datePickerSlotRecipe = react.defineSlotRecipe({
       outline: "1px solid",
       outlineColor: "floating.outline",
       boxShadow: "md",
-      backgroundColor: "floating.surface"
+      backgroundColor: "floating.surface",
+      minHeight: "min-content"
     },
     rangeCalendarPopover: {
       width: "43rem",