@entur/form 9.0.1 → 9.1.0

package/dist/BaseFormControl.d.ts

@@ -47,9 +47,13 @@ export type BaseFormControlProps = React.HTMLAttributes<HTMLDivElement> & {
     style?: React.CSSProperties;
     /** Plasserer labelen statisk på toppen av inputfeltet */
     disableLabelAnimation?: boolean;
-    /** Setter feedbackText sin rolle til "alert" */
+    /** Setter feedback-tekstens rolle for skjermlesere.
+     * 'alert' = aria-live="assertive" (avbryter umiddelbart)
+     * 'status' = aria-live="polite" (venter til bruker er ferdig)
+     * undefined/false = ingen automatisk annonsering
+     */
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    ariaAlertOnFeedback?: boolean;
+    ariaAlertOnFeedback?: boolean | 'alert' | 'status';
     /** Legg til et element etter feltet */
     after?: React.ReactNode;
     /** Legg til et element før feltet */
@@ -99,9 +103,13 @@ export declare const BaseFormControl: React.ForwardRefExoticComponent<React.HTML
     style?: React.CSSProperties;
     /** Plasserer labelen statisk på toppen av inputfeltet */
     disableLabelAnimation?: boolean;
-    /** Setter feedbackText sin rolle til "alert" */
+    /** Setter feedback-tekstens rolle for skjermlesere.
+     * 'alert' = aria-live="assertive" (avbryter umiddelbart)
+     * 'status' = aria-live="polite" (venter til bruker er ferdig)
+     * undefined/false = ingen automatisk annonsering
+     */
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    ariaAlertOnFeedback?: boolean;
+    ariaAlertOnFeedback?: boolean | "alert" | "status";
     /** Legg til et element etter feltet */
     after?: React.ReactNode;
     /** Legg til et element før feltet */

package/dist/RadioGroup.d.ts

@@ -13,5 +13,7 @@ export type RadioGroupProps = {
     [key: string]: any;
     /** Sett radiogruppen i readonly-modus */
     readOnly?: boolean;
+    /** Sett radiogruppen i disabled-modus */
+    disabled?: boolean;
 };
 export declare const RadioGroup: React.FC<RadioGroupProps>;

package/dist/RadioGroupContext.d.ts

@@ -4,6 +4,7 @@ type RadioGroupContextProps = {
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     value: string | null;
     readOnly?: boolean;
+    disabled?: boolean;
 };
 export declare const RadioGroupContextProvider: React.Provider<RadioGroupContextProps | null>;
 export declare const useRadioGroupContext: () => RadioGroupContextProps;

package/dist/TextField.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
-import { VariantType } from '../../utils';
 import { Placement } from '../../tooltip';
+import { VariantType } from '../../utils';
 /** @deprecated use variant="information" instead */
 declare const info = "info";
 /** @deprecated use variant="negative" instead */
@@ -44,7 +44,16 @@ export type TextFieldProps = {
     clearable?: boolean;
     /** Callback for clearable */
     onClear?: () => void;
-    ariaAlertOnFeedback?: boolean;
+    /** Aria-label for clear button
+     * @default "Tøm felt"
+     */
+    clearButtonAriaLabel?: string;
+    /** Setter feedback-tekstens rolle for skjermlesere.
+     * 'alert' = aria-live="assertive" (avbryter umiddelbart)
+     * 'status' = aria-live="polite" (venter til bruker er ferdig)
+     * undefined/false = ingen automatisk annonsering
+     */
+    ariaAlertOnFeedback?: boolean | 'alert' | 'status';
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'label'>;
 export declare const TextField: React.ForwardRefExoticComponent<{
     /** Tekst eller ikon som kommer før inputfeltet */
@@ -85,6 +94,15 @@ export declare const TextField: React.ForwardRefExoticComponent<{
     clearable?: boolean;
     /** Callback for clearable */
     onClear?: () => void;
-    ariaAlertOnFeedback?: boolean;
+    /** Aria-label for clear button
+     * @default "Tøm felt"
+     */
+    clearButtonAriaLabel?: string;
+    /** Setter feedback-tekstens rolle for skjermlesere.
+     * 'alert' = aria-live="assertive" (avbryter umiddelbart)
+     * 'status' = aria-live="polite" (venter til bruker er ferdig)
+     * undefined/false = ingen automatisk annonsering
+     */
+    ariaAlertOnFeedback?: boolean | "alert" | "status";
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "label" | "size"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/form.cjs.js

@@ -102,13 +102,11 @@ const InputGroupContext = React__namespace.createContext({
 });
 const InputGroupContextProvider = ({ children }) => {
   const [filled, setFilled] = React__namespace.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    InputGroupContext.Provider,
-    {
-      value: { isFilled: filled, setFilled },
-      children
-    }
+  const value = React__namespace.useMemo(
+    () => ({ isFilled: filled, setFilled }),
+    [filled, setFilled]
   );
+  return /* @__PURE__ */ jsxRuntime.jsx(InputGroupContext.Provider, { value, children });
 };
 const useInputGroupContext = () => React__namespace.useContext(InputGroupContext);
 const InputGroupLabel = ({
@@ -269,7 +267,7 @@ const BaseFormControl = React.forwardRef(
             FeedbackText,
             {
               variant: currentVariant,
-              role: ariaAlertOnFeedback ? "alert" : void 0,
+              role: ariaAlertOnFeedback === true || ariaAlertOnFeedback === "alert" ? "alert" : ariaAlertOnFeedback === "status" ? "status" : void 0,
               children: feedback
             }
           ),
@@ -302,7 +300,7 @@ const Checkbox = React.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "label",
       {
-        className: classNames("eds-checkbox__container", className, {
+        className: classNames("eds-checkbox", "eds-checkbox__container", className, {
           "eds-checkbox--disabled": disabled,
           "eds-checkbox--readonly": readOnly,
           "eds-checkbox__container--reduced-click-area": reduceClickArea
@@ -444,13 +442,18 @@ const InputPanelBase = React.forwardRef(
     style,
     id,
     disabled = false,
+    readOnly = false,
     type = "radio",
     onChange,
     checked,
     name,
     ...rest
   }, ref) => {
-    const classList = classNames(
+    const classList = classNames("eds-input-panel", {
+      "eds-input-panel--readonly": readOnly,
+      "eds-input-panel--disabled": disabled
+    });
+    const panelClassList = classNames(
       className,
       "eds-input-panel__container",
       `eds-input-panel--${size}`
@@ -460,10 +463,28 @@ const InputPanelBase = React.forwardRef(
     const inputPanelId = id || defaultId;
     const forceUpdate = utils.useForceUpdate();
     const handleOnChange = (e) => {
-      if (onChange === void 0) forceUpdate();
+      if (readOnly) {
+        e.preventDefault();
+        return;
+      }
+      if (onChange === void 0) {
+        forceUpdate();
+      }
       onChange?.(e);
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "eds-input-panel", htmlFor: inputPanelId, children: [
+    const handleOnClick = (e) => {
+      if (readOnly) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+    const handleOnKeyDown = (e) => {
+      if (readOnly && (e.key === " " || e.key === "Enter")) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: classList, htmlFor: inputPanelId, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -473,17 +494,20 @@ const InputPanelBase = React.forwardRef(
           value,
           checked,
           onChange: handleOnChange,
+          onClick: handleOnClick,
+          onKeyDown: handleOnKeyDown,
           id: inputPanelId,
           disabled,
+          readOnly,
           ...rest
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classList, style, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: panelClassList, style, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "eds-input-panel__title-wrapper", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "eds-input-panel__title", children: title }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "eds-input-panel__secondary-label-and-icon-wrapper", children: [
             secondaryLabel !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: secondaryLabel }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { pointerEvents: "none" }, children: !(disabled || hideSelectionIndicator) && (type === "radio" ? /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { pointerEvents: "none" }, children: !hideSelectionIndicator && (type === "radio" ? /* @__PURE__ */ jsxRuntime.jsx(
               Radio,
               {
                 name: "",
@@ -492,6 +516,8 @@ const InputPanelBase = React.forwardRef(
                 onChange: () => {
                   return;
                 },
+                disabled,
+                readOnly,
                 "aria-hidden": "true",
                 tabIndex: -1
               }
@@ -500,6 +526,8 @@ const InputPanelBase = React.forwardRef(
               {
                 checked: checked ?? inputRef.current?.checked ?? false,
                 onChange: () => null,
+                disabled,
+                readOnly,
                 "aria-hidden": "true",
                 tabIndex: -1
               }
@@ -522,10 +550,17 @@ const RadioPanel = React.forwardRef(
     hideRadioButton = false,
     style,
     id,
-    disabled = false,
+    disabled,
+    readOnly,
     ...rest
   }, ref) => {
-    const { name, value: selected, onChange } = useRadioGroupContext();
+    const {
+      name,
+      value: selected,
+      onChange,
+      readOnly: groupReadOnly,
+      disabled: groupDisabled
+    } = useRadioGroupContext();
     return /* @__PURE__ */ jsxRuntime.jsx(
       InputPanelBase,
       {
@@ -541,7 +576,8 @@ const RadioPanel = React.forwardRef(
         hideSelectionIndicator: hideRadioButton,
         style,
         id,
-        disabled,
+        disabled: disabled ?? groupDisabled,
+        readOnly: readOnly ?? groupReadOnly,
         ...rest,
         ref,
         children
@@ -564,6 +600,7 @@ const CheckboxPanel = React.forwardRef(
     style,
     id,
     disabled = false,
+    readOnly = false,
     ...rest
   }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -582,6 +619,7 @@ const CheckboxPanel = React.forwardRef(
         style,
         id,
         disabled,
+        readOnly,
         ...rest,
         ref,
         children
@@ -596,11 +634,12 @@ const RadioGroup = ({
   onChange,
   label,
   readOnly = false,
+  disabled = false,
   ...rest
 }) => {
   const contextValue = React.useMemo(
-    () => ({ name, value, onChange, readOnly }),
-    [name, value, onChange, readOnly]
+    () => ({ name, value, onChange, readOnly, disabled }),
+    [name, value, onChange, readOnly, disabled]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupContextProvider, { value: contextValue, children: label ? /* @__PURE__ */ jsxRuntime.jsx(Fieldset, { label, ...rest, children }) : children });
 };
@@ -668,7 +707,21 @@ function hasValue(value) {
   return value != null && !(Array.isArray(value) && value.length === 0);
 }
 function isFilled(obj, SSR = false) {
-  return obj && (hasValue(obj.value) && obj.value !== "" || SSR && hasValue(obj.defaultValue) && obj.defaultValue !== "");
+  if (obj == null) {
+    return false;
+  }
+  if (typeof obj === "string") {
+    return obj !== "";
+  }
+  if (obj && typeof obj === "object") {
+    if (hasValue(obj.value) && obj.value !== "") {
+      return true;
+    }
+    if (SSR && hasValue(obj.defaultValue) && obj.defaultValue !== "") {
+      return true;
+    }
+  }
+  return false;
 }
 const TextArea = React.forwardRef(
   ({
@@ -784,6 +837,7 @@ const TextField = React.forwardRef(
     labelProps,
     clearable = false,
     onClear,
+    clearButtonAriaLabel = "Tøm felt",
     value,
     ariaAlertOnFeedback = false,
     ...rest
@@ -791,6 +845,29 @@ const TextField = React.forwardRef(
     const randomId = utils.useRandomId("eds-textfield");
     const textFieldId = labelProps && labelProps.id ? labelProps.id : randomId;
     const textFieldRef = React.useRef(null);
+    const { setFilled } = useInputGroupContext();
+    const handleClear = () => {
+      const inputElement = textFieldRef.current;
+      if (inputElement) {
+        const setNativeInputValue = Object.getOwnPropertyDescriptor(
+          window.HTMLInputElement.prototype,
+          "value"
+        )?.set;
+        setNativeInputValue?.call(inputElement, "");
+        const inputEvent = new Event("input", { bubbles: true });
+        inputElement.dispatchEvent(inputEvent);
+        inputElement.focus();
+        setFilled(false);
+      }
+      onClear?.();
+    };
+    const _append = React.useMemo(() => {
+      if (!clearable) return append ?? null;
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "eds-textfield__append", children: [
+        append,
+        /* @__PURE__ */ jsxRuntime.jsx(ClearButton, { onClear: handleClear, ariaLabel: clearButtonAriaLabel })
+      ] });
+    }, [append, clearable]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       BaseFormControl,
       {
@@ -798,7 +875,7 @@ const TextField = React.forwardRef(
         readOnly,
         variant,
         prepend,
-        append: clearable && onClear ? /* @__PURE__ */ jsxRuntime.jsx(ClearButton, { onClear }) : append,
+        append: _append,
         className: classNames(className, "eds-textfield__wrapper"),
         style,
         size,
@@ -837,21 +914,21 @@ const TextFieldBase = React.forwardRef(
     const contextVariant = useVariant();
     const currentVariant = variant || contextVariant;
     const { isFilled: isInputFilled, setFilled: setFiller } = useInputGroupContext();
-    utils.useOnMount(() => {
-      if (value?.toString() || rest.defaultValue) {
-        setFiller && !isInputFilled && setFiller(true);
-      }
-    });
+    const inputRef = React.useRef(null);
     React.useEffect(() => {
-      if (value?.toString() && setFiller && !isInputFilled) {
-        setFiller(true);
+      if (setFiller) {
+        const filled = isFilled({ value }) || isFilled(inputRef.current, true);
+        if (filled !== isInputFilled) {
+          setFiller(filled);
+        }
       }
     }, [value, setFiller, isInputFilled]);
     const handleChange = (event) => {
-      if (isFilled(event.target)) {
-        setFiller && !isInputFilled && setFiller(true);
-      } else {
-        setFiller && isInputFilled && setFiller(false);
+      if (setFiller && value === void 0) {
+        const filled = isFilled(event.target);
+        if (filled !== isInputFilled) {
+          setFiller(filled);
+        }
       }
       if (onChange) {
         onChange(event);
@@ -864,7 +941,7 @@ const TextFieldBase = React.forwardRef(
         className: "eds-form-control",
         disabled,
         readOnly,
-        ref: forwardRef,
+        ref: utils.mergeRefs(forwardRef, inputRef),
         placeholder,
         onChange: handleChange,
         value,
@@ -873,25 +950,24 @@ const TextFieldBase = React.forwardRef(
     );
   }
 );
-const ClearButton = ({ onClear, ...props }) => {
-  const { isFilled: hasValue2, setFilled } = useInputGroupContext();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "eds-textfield__clear-button-wrapper", children: [
-    hasValue2 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "eds-textfield__divider" }),
-    hasValue2 && /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        className: "eds-textfield__clear-button",
-        type: "button",
-        tabIndex: -1,
-        onClick: () => {
-          setFilled(false);
-          onClear();
-        },
-        ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseSmallIcon, {})
-      }
-    )
-  ] });
+const ClearButton = ({ onClear, ariaLabel }) => {
+  const { isFilled: isFilled2 } = useInputGroupContext();
+  if (isFilled2) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "eds-textfield__divider" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        button.IconButton,
+        {
+          className: "eds-textfield__clear-button",
+          type: "button",
+          "aria-label": ariaLabel,
+          onClick: onClear,
+          children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseSmallIcon, { "aria-hidden": true })
+        }
+      )
+    ] });
+  }
+  return null;
 };
 const SegmentedContext = React.createContext(
   null