@vygruppen/spor-react 12.13.2 → 12.13.4

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.13.2 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.13.4 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.38 KB
-CJS dist/icons/index.cjs     381.00 B
-CJS dist/index.cjs.map       629.75 KB
-CJS dist/icons/index.cjs.map 157.00 B
-CJS ⚡️ Build success in 2684ms
-ESM dist/index.mjs           293.97 KB
+ESM dist/index.mjs           297.26 KB
 ESM dist/icons/index.mjs     110.00 B
 ESM dist/icons/index.mjs.map 157.00 B
-ESM dist/index.mjs.map       629.75 KB
-ESM ⚡️ Build success in 2686ms
-DTS ⚡️ Build success in 19002ms
+ESM dist/index.mjs.map       635.10 KB
+ESM ⚡️ Build success in 2617ms
+CJS dist/index.cjs           318.74 KB
+CJS dist/icons/index.cjs     381.00 B
+CJS dist/index.cjs.map       635.10 KB
+CJS dist/icons/index.cjs.map 157.00 B
+CJS ⚡️ Build success in 2618ms
+DTS ⚡️ Build success in 18619ms
 DTS dist/icons/index.d.ts  44.00 B
-DTS dist/index.d.ts        156.05 KB
+DTS dist/index.d.ts        157.02 KB
 DTS dist/icons/index.d.cts 44.00 B
-DTS dist/index.d.cts       156.05 KB
+DTS dist/index.d.cts       157.02 KB

package/.turbo/turbo-postinstall.log

@@ -1,7 +1,8 @@
 
-> @vygruppen/spor-react@12.13.2 postinstall /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.13.4 postinstall /home/runner/work/spor/spor/packages/spor-react
 > chakra typegen src/theme/index.ts
 
+[dotenv@17.2.2] injecting env (0) from .env -- tip: ⚙️  enable debug logging with { debug: true }
 ┌  Chakra CLI ⚡️
 [?25l│
 ◒  Generating conditions types...

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @vygruppen/spor-react
 
+## 12.13.4
+
+### Patch Changes
+
+- 3200ed0: datepicker - exposed onClick & changed hover style to be focus color when isActive=true
+
+## 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

package/dist/index.cjs

@@ -1331,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"
@@ -1381,6 +1374,7 @@ var Field3 = React27__namespace.forwardRef(
       required,
       direction,
       id,
+      shouldFloat,
       ...rest
     } = props;
     const recipe = react.useSlotRecipe({ key: "field" });
@@ -1402,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, {})
             ] }),
@@ -1894,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({
@@ -1905,7 +1906,11 @@ var StyledField = React27.forwardRef(
       react.Box,
       {
         ...otherProps,
-        css: styles.wrapper,
+        css: {
+          ...styles.wrapper,
+          outlineColor: overrideBorderColor || void 0
+        },
+        "data-active": isActive ? "" : void 0,
         ref,
         "aria-invalid": invalid,
         "aria-disabled": isDisabled,
@@ -1948,8 +1953,13 @@ var DatePicker = React27.forwardRef(
     });
     const styles = recipe({ variant });
     const locale = useCurrentLocale();
+    const shouldShowCalendar = state.isOpen && !props.isDisabled && !props.noCalendar;
     const onFieldClick = () => {
-      state.setOpen(true);
+      var _a5;
+      if (!props.noCalendar) {
+        state.setOpen(true);
+      }
+      (_a5 = props.onClick) == null ? void 0 : _a5.call(props);
     };
     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(
       Calendar,
@@ -1984,8 +1994,10 @@ var DatePicker = React27.forwardRef(
                   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,
@@ -2009,8 +2021,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)
         ] })
       }
     ) });
@@ -2819,6 +2830,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,
       {
@@ -2828,14 +2846,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(
@@ -2849,6 +2865,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
             }
@@ -3013,6 +3047,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,
         {
@@ -3686,11 +3721,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,
       {
@@ -3700,6 +3747,7 @@ var Textarea = React27.forwardRef(
         required,
         readOnly,
         floatingLabel,
+        shouldFloat,
         position: "relative",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -3709,11 +3757,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
+            }
+          )
         ]
       }
     );
@@ -7106,6 +7176,13 @@ var datePickerSlotRecipe = react.defineSlotRecipe({
       _focusWithin: {
         outline: "2px solid",
         outlineColor: "outline.focus"
+      },
+      "&[data-active]": {
+        outline: "2px solid",
+        outlineColor: "outline.focus",
+        "&:hover": {
+          outlineColor: "outline.focus"
+        }
       }
     },
     inputLabel: {
@@ -7232,6 +7309,13 @@ var datePickerSlotRecipe = react.defineSlotRecipe({
               backgroundColor: "ghost.surface.active",
               outline: "1px solid",
               outlineColor: "core.outline"
+            },
+            "&[data-active]": {
+              outline: "2px solid",
+              outlineColor: "outline.focus",
+              _hover: {
+                outlineColor: "outline.focus"
+              }
             }
           },
           _invalid: {
@@ -7256,6 +7340,13 @@ var datePickerSlotRecipe = react.defineSlotRecipe({
               backgroundColor: "ghost.surface.active",
               outline: "1px solid",
               outlineColor: "core.outline"
+            },
+            "&[data-active]": {
+              outline: "2px solid",
+              outlineColor: "outline.focus",
+              _hover: {
+                outlineColor: "outline.focus"
+              }
             }
           },
           _invalid: {
@@ -7273,6 +7364,13 @@ var datePickerSlotRecipe = react.defineSlotRecipe({
               backgroundColor: "ghost.surface.active",
               outline: "1px solid",
               outlineColor: "core.outline"
+            },
+            "&[data-active]": {
+              outline: "2px solid",
+              outlineColor: "outline.focus",
+              _hover: {
+                outlineColor: "outline.focus"
+              }
             }
           },
           _invalid: {