@vygruppen/spor-react 12.8.7 → 12.8.9

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@12.8.7 build /home/runner/work/spor/spor/packages/spor-react
+> @vygruppen/spor-react@12.8.9 build /home/runner/work/spor/spor/packages/spor-react
 > tsup
 
 CLI Building entry: src/index.tsx, src/icons/index.tsx
@@ -11,17 +11,17 @@ CLI Cleaning output folder
 ESM Build start
 CJS Build start
 DTS Build start
-CJS dist/index.cjs           313.77 KB
+CJS dist/index.cjs           314.57 KB
 CJS dist/icons/index.cjs     381.00 B
-CJS dist/index.cjs.map       627.68 KB
 CJS dist/icons/index.cjs.map 157.00 B
-CJS ⚡️ Build success in 2979ms
-ESM dist/index.mjs           292.93 KB
+CJS dist/index.cjs.map       628.88 KB
+CJS ⚡️ Build success in 2988ms
+ESM dist/index.mjs           293.69 KB
 ESM dist/icons/index.mjs     110.00 B
-ESM dist/index.mjs.map       627.68 KB
+ESM dist/index.mjs.map       628.88 KB
 ESM dist/icons/index.mjs.map 157.00 B
-ESM ⚡️ Build success in 2979ms
-DTS ⚡️ Build success in 29664ms
+ESM ⚡️ Build success in 2990ms
+DTS ⚡️ Build success in 29591ms
 DTS dist/icons/index.d.ts  44.00 B
 DTS dist/index.d.ts        156.34 KB
 DTS dist/icons/index.d.cts 44.00 B

package/.turbo/turbo-postinstall.log

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

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @vygruppen/spor-react
 
+## 12.8.9
+
+### Patch Changes
+
+- 979903e: Fix bug where specifying id on inputs gives missing label error.
+
+## 12.8.8
+
+### Patch Changes
+
+- 7f7c933: field: Render RequiredIndicator when required is true
+  heading: Fix bug where autoId was used when externalId was specified
+
 ## 12.8.7
 
 ### Patch Changes

package/dist/index.cjs

@@ -773,8 +773,15 @@ var Heading = React27.forwardRef(
       id: externalId,
       ...rest
     } = props;
-    const id = externalId ?? (autoId && typeof rest.children === "string") ? slugify(rest.children) : void 0;
-    return /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as, textStyle: variant, id, ref, ...rest });
+    const reactId = React27.useId();
+    function getId() {
+      if (externalId !== void 0)
+        return externalId;
+      if (!autoId)
+        return;
+      return typeof rest.children === "string" ? slugify(rest.children) : reactId;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as, textStyle: variant, id: getId(), ref, ...rest });
   }
 );
 function resolveTextProps({
@@ -1390,6 +1397,7 @@ var Field3 = React27__namespace.forwardRef(
       readOnly,
       required,
       direction,
+      id,
       ...rest
     } = props;
     const recipe = react.useSlotRecipe({ key: "field" });
@@ -1404,10 +1412,17 @@ var Field3 = React27__namespace.forwardRef(
           required,
           css: styles.root,
           direction,
+          id,
           children: [
-            label && !floatingLabel && /* @__PURE__ */ jsxRuntime.jsx(Label, { children: label }),
+            label && !floatingLabel && /* @__PURE__ */ jsxRuntime.jsxs(Label, { children: [
+              label,
+              /* @__PURE__ */ jsxRuntime.jsx(react.Field.RequiredIndicator, {})
+            ] }),
             children,
-            label && floatingLabel && /* @__PURE__ */ jsxRuntime.jsx(FloatingLabel, { children: label }),
+            label && floatingLabel && /* @__PURE__ */ jsxRuntime.jsxs(FloatingLabel, { children: [
+              label,
+              /* @__PURE__ */ jsxRuntime.jsx(react.Field.RequiredIndicator, {})
+            ] }),
             errorText && /* @__PURE__ */ jsxRuntime.jsx(react.Field.ErrorText, { children: errorText })
           ]
         }
@@ -1973,6 +1988,7 @@ var DatePicker = React27.forwardRef(
               errorText,
               invalid,
               helperText,
+              required: props.required,
               children: /* @__PURE__ */ jsxRuntime.jsx(react.PopoverAnchor, { children: /* @__PURE__ */ jsxRuntime.jsxs(
                 StyledField,
                 {
@@ -2096,6 +2112,7 @@ function DateRangePicker({
           errorText,
           helperText,
           invalid,
+          required: props.required,
           children: /* @__PURE__ */ jsxRuntime.jsx(react.PopoverAnchor, { children: /* @__PURE__ */ jsxRuntime.jsxs(
             StyledField,
             {
@@ -2805,6 +2822,7 @@ var Input = React27.forwardRef(
     invalid,
     helperText,
     errorText,
+    required,
     ...props
   }, ref) => {
     const recipe = react.useRecipe({ key: "input" });
@@ -2815,7 +2833,9 @@ var Input = React27.forwardRef(
       {
         invalid,
         helperText,
+        required,
         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: [
@@ -2978,6 +2998,7 @@ var NativeSelect = React27__namespace.forwardRef(function NativeSelect2(props, r
       required,
       helperText,
       errorText,
+      id: rest.id,
       floatingLabel: true,
       children: /* @__PURE__ */ jsxRuntime.jsxs(
         react.NativeSelect.Root,
@@ -3032,7 +3053,7 @@ var NumericStepper = React27__namespace.default.forwardRef((props, ref) => {
     var _a5;
     (_a5 = addButtonRef.current) == null ? void 0 : _a5.focus();
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(Field3, { css: styles.root, width: "auto", ...rest, ref, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Field3, { css: styles.root, width: "auto", ...rest, id: idProp, ref, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       VerySmallButton,
       {
@@ -3487,22 +3508,32 @@ var Select = React27__namespace.forwardRef(
     } = props;
     const recipe = react.useSlotRecipe({ key: "select" });
     const styles = recipe({ variant });
-    return /* @__PURE__ */ jsxRuntime.jsx(Field3, { errorText, invalid, helperText, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      react.Select.Root,
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Field3,
       {
-        ...rest,
-        ref,
-        positioning: { sameWidth: true, ...positioning },
-        variant,
-        css: styles.root,
-        position: "relative",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { "data-attachable": true, children: /* @__PURE__ */ jsxRuntime.jsx(SelectValueText, { withPlaceholder: label ? true : false }) }),
-          label && /* @__PURE__ */ jsxRuntime.jsx(SelectLabel, { css: styles.label, children: label }),
-          /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { css: styles.selectContent, children })
-        ]
+        errorText,
+        invalid,
+        helperText,
+        required: props.required,
+        id: rest.id,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          react.Select.Root,
+          {
+            ...rest,
+            ref,
+            positioning: { sameWidth: true, ...positioning },
+            variant,
+            css: styles.root,
+            position: "relative",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { "data-attachable": true, children: /* @__PURE__ */ jsxRuntime.jsx(SelectValueText, { withPlaceholder: label ? true : false }) }),
+              label && /* @__PURE__ */ jsxRuntime.jsx(SelectLabel, { css: styles.label, children: label }),
+              /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { css: styles.selectContent, children })
+            ]
+          }
+        )
       }
-    ) });
+    );
   }
 );
 var SelectLabel = (props) => {
@@ -3609,6 +3640,8 @@ var Switch = React27.forwardRef(
         invalid,
         errorText,
         helperText,
+        required: props.required,
+        id: rest.id,
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           react.Switch.Root,
           {
@@ -7629,6 +7662,9 @@ var fieldSlotRecipe = react.defineSlotRecipe({
       marginStart: 1,
       color: "brightRed"
     },
+    label: {
+      display: "flex"
+    },
     helperText: {
       marginTop: 2,
       color: "text.tertiary",