@vygruppen/spor-react 10.1.0 → 10.3.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@10.1.0 build
+> @vygruppen/spor-react@10.3.0 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -9,12 +9,12 @@
 CJS Build start
 ESM Build start
 DTS Build start
-CJS dist/index.js 527.11 KB
-CJS ⚡️ Build success in 2350ms
 ESM dist/index.mjs                      2.15 KB
-ESM dist/CountryCodeSelect-FKWNR6SG.mjs 1.19 KB
-ESM dist/chunk-MLRF67YM.mjs             415.50 KB
-ESM ⚡️ Build success in 2352ms
-DTS ⚡️ Build success in 16537ms
-DTS dist/index.d.ts  326.27 KB
-DTS dist/index.d.mts 326.27 KB
+ESM dist/CountryCodeSelect-KCPHU7A7.mjs 1.19 KB
+ESM dist/chunk-5HRYDWQ5.mjs             417.51 KB
+ESM ⚡️ Build success in 2131ms
+CJS dist/index.js 529.34 KB
+CJS ⚡️ Build success in 2132ms
+DTS ⚡️ Build success in 15282ms
+DTS dist/index.d.ts  315.84 KB
+DTS dist/index.d.mts 315.84 KB

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @vygruppen/spor-react
 
+## 10.3.0
+
+### Minor Changes
+
+- d3cd54d: Added input field ariaLabelContext to NummericStepper to improve functionality with screen readers.
+
+## 10.2.0
+
+### Minor Changes
+
+- 0a56c3b: Added variant floating to input component.
+
+### Patch Changes
+
+- da227b9: Modal: Add h1 tag to title
+
 ## 10.1.0
 
 ### Minor Changes

package/dist/{CountryCodeSelect-FKWNR6SG.mjs → CountryCodeSelect-KCPHU7A7.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-MLRF67YM.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-5HRYDWQ5.mjs';
 import React from 'react';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
 

package/dist/{chunk-MLRF67YM.mjs → chunk-5HRYDWQ5.mjs}

@@ -1508,8 +1508,10 @@ function NumericStepper({
   withInput = true,
   stepSize = 1,
   showZero = false,
+  ariaLabelContext = { singular: "", plural: "" },
   ...boxProps
 }) {
+  const addButtonRef = useRef(null);
   const { t: t2 } = useTranslation();
   const styles3 = useMultiStyleConfig("NumericStepper", {});
   const [value, onChange] = useControllableState({
@@ -1519,12 +1521,26 @@ function NumericStepper({
   });
   const formControlProps = useFormControl({ id: idProp, isDisabled });
   const clampedStepSize = Math.max(Math.min(stepSize, 10), 1);
+  const focusOnAddButton = () => {
+    var _a6;
+    (_a6 = addButtonRef.current) == null ? void 0 : _a6.focus();
+  };
   return /* @__PURE__ */ React84__default.createElement(Flex, { __css: styles3.container, ...boxProps }, /* @__PURE__ */ React84__default.createElement(
     VerySmallButton,
     {
       icon: /* @__PURE__ */ React84__default.createElement(SubtractIcon, { stepLabel: clampedStepSize }),
-      "aria-label": t2(texts2.decrementButtonAriaLabel(clampedStepSize)),
-      onClick: () => onChange(Math.max(value - clampedStepSize, minValue)),
+      "aria-label": t2(
+        texts2.decrementButtonAriaLabel(
+          clampedStepSize,
+          stepSize == 1 ? ariaLabelContext.singular : ariaLabelContext.plural
+        )
+      ),
+      onClick: () => {
+        onChange(Math.max(value - clampedStepSize, minValue));
+        if (Math.max(value - clampedStepSize, minValue) <= minValue) {
+          focusOnAddButton();
+        }
+      },
       visibility: value <= minValue ? "hidden" : "visible",
       isDisabled: formControlProps.disabled,
       id: value <= minValue ? void 0 : formControlProps.id
@@ -1543,13 +1559,16 @@ function NumericStepper({
       width: `${Math.max(value.toString().length + 1, 3)}ch`,
       visibility: !showZero && value === 0 ? "hidden" : "visible",
       "aria-live": "assertive",
-      "aria-label": value.toString(),
+      "aria-label": ariaLabelContext.plural !== "" ? t2(texts2.currentNumberAriaLabel(ariaLabelContext.plural)) : "",
       onChange: (e) => {
         const numericInput = Number(e.target.value);
         if (Number.isNaN(numericInput)) {
           return;
         }
         onChange(Math.max(Math.min(numericInput, maxValue), minValue));
+        if (!showZero && Math.max(Math.min(numericInput, maxValue), minValue) === 0) {
+          focusOnAddButton();
+        }
       }
     }
   ) : /* @__PURE__ */ React84__default.createElement(
@@ -1557,14 +1576,21 @@ function NumericStepper({
     {
       sx: styles3.text,
       visibility: !showZero && value === 0 ? "hidden" : "visible",
-      "aria-label": value.toString()
+      "aria-live": "assertive",
+      "aria-label": ariaLabelContext.plural !== "" ? t2(texts2.currentNumberAriaLabel(ariaLabelContext.plural)) : ""
     },
     value
   ), /* @__PURE__ */ React84__default.createElement(
     VerySmallButton,
     {
+      ref: addButtonRef,
       icon: /* @__PURE__ */ React84__default.createElement(AddIcon, { stepLabel: clampedStepSize }),
-      "aria-label": t2(texts2.incrementButtonAriaLabel(clampedStepSize)),
+      "aria-label": t2(
+        texts2.incrementButtonAriaLabel(
+          clampedStepSize,
+          stepSize == 1 ? ariaLabelContext.singular : ariaLabelContext.plural
+        )
+      ),
       onClick: () => onChange(Math.min(value + clampedStepSize, maxValue)),
       visibility: value >= maxValue ? "hidden" : "visible",
       isDisabled: formControlProps.disabled,
@@ -1572,10 +1598,19 @@ function NumericStepper({
     }
   ));
 }
-var VerySmallButton = (props) => {
+var VerySmallButton = React84__default.forwardRef((props, ref) => {
   const styles3 = useMultiStyleConfig("NumericStepper", {});
-  return /* @__PURE__ */ React84__default.createElement(IconButton, { variant: "primary", size: "xs", sx: styles3.button, ...props });
-};
+  return /* @__PURE__ */ React84__default.createElement(
+    IconButton,
+    {
+      variant: "primary",
+      size: "xs",
+      sx: styles3.button,
+      ref,
+      ...props
+    }
+  );
+});
 var SubtractIcon = ({ stepLabel, ...props }) => /* @__PURE__ */ React84__default.createElement(React84__default.Fragment, null, /* @__PURE__ */ React84__default.createElement(
   Box,
   {
@@ -1632,20 +1667,28 @@ var AddIcon = ({ stepLabel, ...props }) => /* @__PURE__ */ React84__default.crea
   )
 ), stepLabel > 1 && /* @__PURE__ */ React84__default.createElement(chakra.span, { paddingRight: "1" }, stepLabel.toString()));
 var texts2 = createTexts({
-  decrementButtonAriaLabel(stepSize) {
+  currentNumberAriaLabel(ariaContext) {
     return {
-      nb: `Trekk fra ${stepSize}`,
-      en: `Subtract ${stepSize}`,
-      nn: `Trekk fr\xE5 ${stepSize}`,
-      sv: `Subtrahera ${stepSize}`
+      nb: `Valgt antall ${ariaContext}`,
+      en: `Chosen number of ${ariaContext}`,
+      nn: `Valgt antall ${ariaContext}`,
+      sv: `Valgt antall ${ariaContext}`
     };
   },
-  incrementButtonAriaLabel(stepSize) {
+  decrementButtonAriaLabel(stepSize, ariaContext) {
     return {
-      nb: `Legg til ${stepSize}`,
-      en: `Add ${stepSize}`,
-      nn: `Legg til ${stepSize}`,
-      sv: `L\xE4gg till ${stepSize}`
+      nb: `Trekk fra ${stepSize} ${ariaContext}`,
+      en: `Subtract ${stepSize} ${ariaContext}`,
+      nn: `Trekk fr\xE5 ${stepSize} ${ariaContext}`,
+      sv: `Subtrahera ${stepSize} ${ariaContext}`
+    };
+  },
+  incrementButtonAriaLabel(stepSize, ariaContext) {
+    return {
+      nb: `Legg til ${stepSize} ${ariaContext}`,
+      en: `Add ${stepSize} ${ariaContext}`,
+      nn: `Legg til ${stepSize} ${ariaContext}`,
+      sv: `L\xE4gg till ${stepSize} ${ariaContext}`
     };
   }
 });
@@ -1779,7 +1822,7 @@ var texts4 = createTexts({
     sv: "Landskod"
   }
 });
-var LazyCountryCodeSelect = React84__default.lazy(() => import('./CountryCodeSelect-FKWNR6SG.mjs'));
+var LazyCountryCodeSelect = React84__default.lazy(() => import('./CountryCodeSelect-KCPHU7A7.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React84__default.createElement(Radio$1, { ...props, ref });
 });
@@ -4358,7 +4401,7 @@ var ModalHeader = forwardRef(
       fontSize: size2 === "lg" ? ["mobile.lg", "desktop.lg"] : ["mobile.md", "desktop.md"],
       textAlign: size2 === "lg" ? "center" : "left"
     };
-    return /* @__PURE__ */ React84__default.createElement(ModalHeader$1, { ...props, ref, ...styles3 });
+    return /* @__PURE__ */ React84__default.createElement(ModalHeader$1, { as: "h1", ...props, ref, ...styles3 });
   }
 );
 
@@ -12443,8 +12486,6 @@ var config21 = helpers14.defineMultiStyleConfig({
       paddingX: 3,
       height: 8,
       fontSize: "mobile.md",
-      ...baseBackground("default", props),
-      ...baseBorder("default", props),
       _hover: {
         ...baseBorder("hover", props)
       },
@@ -12493,7 +12534,37 @@ var config21 = helpers14.defineMultiStyleConfig({
         ...baseText("disabled", props)
       }
     }
-  })
+  }),
+  variants: {
+    base: (props) => ({
+      field: {
+        ...baseBackground("default", props),
+        ...baseBorder("default", props)
+      }
+    }),
+    floating: (props) => ({
+      field: {
+        boxShadow: "sm",
+        ...floatingBackground("default", props),
+        ...floatingBorder("default", props),
+        _hover: {
+          ...floatingBorder("hover", props),
+          ...floatingBackground("hover", props)
+        },
+        _active: {
+          ...floatingBorder("active", props),
+          ...floatingBackground("active", props)
+        },
+        _selected: {
+          ...floatingBorder("selected", props),
+          ...floatingBackground("selected", props)
+        }
+      }
+    })
+  },
+  defaultProps: {
+    variant: "base"
+  }
 });
 var input_default = config21;
 var parts10 = anatomy$1("line-tag").parts("iconContainer", "icon");