@entur/form 9.0.1 → 9.1.0

package/dist/form.esm.js

@@ -84,13 +84,11 @@ const InputGroupContext = React.createContext({
 });
 const InputGroupContextProvider = ({ children }) => {
   const [filled, setFilled] = React.useState(false);
-  return /* @__PURE__ */ jsx(
-    InputGroupContext.Provider,
-    {
-      value: { isFilled: filled, setFilled },
-      children
-    }
+  const value = React.useMemo(
+    () => ({ isFilled: filled, setFilled }),
+    [filled, setFilled]
   );
+  return /* @__PURE__ */ jsx(InputGroupContext.Provider, { value, children });
 };
 const useInputGroupContext = () => React.useContext(InputGroupContext);
 const InputGroupLabel = ({
@@ -251,7 +249,7 @@ const BaseFormControl = React__default.forwardRef(
             FeedbackText,
             {
               variant: currentVariant,
-              role: ariaAlertOnFeedback ? "alert" : void 0,
+              role: ariaAlertOnFeedback === true || ariaAlertOnFeedback === "alert" ? "alert" : ariaAlertOnFeedback === "status" ? "status" : void 0,
               children: feedback
             }
           ),
@@ -284,7 +282,7 @@ const Checkbox = React__default.forwardRef(
     return /* @__PURE__ */ 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
@@ -426,13 +424,18 @@ const InputPanelBase = React__default.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}`
@@ -442,10 +445,28 @@ const InputPanelBase = React__default.forwardRef(
     const inputPanelId = id || defaultId;
     const forceUpdate = useForceUpdate();
     const handleOnChange = (e) => {
-      if (onChange === void 0) forceUpdate();
+      if (readOnly) {
+        e.preventDefault();
+        return;
+      }
+      if (onChange === void 0) {
+        forceUpdate();
+      }
       onChange?.(e);
     };
-    return /* @__PURE__ */ 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__ */ jsxs("label", { className: classList, htmlFor: inputPanelId, children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -455,17 +476,20 @@ const InputPanelBase = React__default.forwardRef(
           value,
           checked,
           onChange: handleOnChange,
+          onClick: handleOnClick,
+          onKeyDown: handleOnKeyDown,
           id: inputPanelId,
           disabled,
+          readOnly,
           ...rest
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: classList, style, children: [
+      /* @__PURE__ */ jsxs("div", { className: panelClassList, style, children: [
         /* @__PURE__ */ jsxs("div", { className: "eds-input-panel__title-wrapper", children: [
           /* @__PURE__ */ jsx("div", { className: "eds-input-panel__title", children: title }),
           /* @__PURE__ */ jsxs("div", { className: "eds-input-panel__secondary-label-and-icon-wrapper", children: [
             secondaryLabel !== void 0 && /* @__PURE__ */ jsx(Fragment, { children: secondaryLabel }),
-            /* @__PURE__ */ jsx("span", { style: { pointerEvents: "none" }, children: !(disabled || hideSelectionIndicator) && (type === "radio" ? /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("span", { style: { pointerEvents: "none" }, children: !hideSelectionIndicator && (type === "radio" ? /* @__PURE__ */ jsx(
               Radio,
               {
                 name: "",
@@ -474,6 +498,8 @@ const InputPanelBase = React__default.forwardRef(
                 onChange: () => {
                   return;
                 },
+                disabled,
+                readOnly,
                 "aria-hidden": "true",
                 tabIndex: -1
               }
@@ -482,6 +508,8 @@ const InputPanelBase = React__default.forwardRef(
               {
                 checked: checked ?? inputRef.current?.checked ?? false,
                 onChange: () => null,
+                disabled,
+                readOnly,
                 "aria-hidden": "true",
                 tabIndex: -1
               }
@@ -504,10 +532,17 @@ const RadioPanel = React__default.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__ */ jsx(
       InputPanelBase,
       {
@@ -523,7 +558,8 @@ const RadioPanel = React__default.forwardRef(
         hideSelectionIndicator: hideRadioButton,
         style,
         id,
-        disabled,
+        disabled: disabled ?? groupDisabled,
+        readOnly: readOnly ?? groupReadOnly,
         ...rest,
         ref,
         children
@@ -546,6 +582,7 @@ const CheckboxPanel = React__default.forwardRef(
     style,
     id,
     disabled = false,
+    readOnly = false,
     ...rest
   }, ref) => {
     return /* @__PURE__ */ jsx(
@@ -564,6 +601,7 @@ const CheckboxPanel = React__default.forwardRef(
         style,
         id,
         disabled,
+        readOnly,
         ...rest,
         ref,
         children
@@ -578,11 +616,12 @@ const RadioGroup = ({
   onChange,
   label,
   readOnly = false,
+  disabled = false,
   ...rest
 }) => {
   const contextValue = React__default.useMemo(
-    () => ({ name, value, onChange, readOnly }),
-    [name, value, onChange, readOnly]
+    () => ({ name, value, onChange, readOnly, disabled }),
+    [name, value, onChange, readOnly, disabled]
   );
   return /* @__PURE__ */ jsx(RadioGroupContextProvider, { value: contextValue, children: label ? /* @__PURE__ */ jsx(Fieldset, { label, ...rest, children }) : children });
 };
@@ -650,7 +689,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__default.forwardRef(
   ({
@@ -766,6 +819,7 @@ const TextField = React__default.forwardRef(
     labelProps,
     clearable = false,
     onClear,
+    clearButtonAriaLabel = "Tøm felt",
     value,
     ariaAlertOnFeedback = false,
     ...rest
@@ -773,6 +827,29 @@ const TextField = React__default.forwardRef(
     const randomId = useRandomId("eds-textfield");
     const textFieldId = labelProps && labelProps.id ? labelProps.id : randomId;
     const textFieldRef = React__default.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__default.useMemo(() => {
+      if (!clearable) return append ?? null;
+      return /* @__PURE__ */ jsxs("div", { className: "eds-textfield__append", children: [
+        append,
+        /* @__PURE__ */ jsx(ClearButton, { onClear: handleClear, ariaLabel: clearButtonAriaLabel })
+      ] });
+    }, [append, clearable]);
     return /* @__PURE__ */ jsx(
       BaseFormControl,
       {
@@ -780,7 +857,7 @@ const TextField = React__default.forwardRef(
         readOnly,
         variant,
         prepend,
-        append: clearable && onClear ? /* @__PURE__ */ jsx(ClearButton, { onClear }) : append,
+        append: _append,
         className: classNames(className, "eds-textfield__wrapper"),
         style,
         size,
@@ -819,21 +896,21 @@ const TextFieldBase = React__default.forwardRef(
     const contextVariant = useVariant();
     const currentVariant = variant || contextVariant;
     const { isFilled: isInputFilled, setFilled: setFiller } = useInputGroupContext();
-    useOnMount(() => {
-      if (value?.toString() || rest.defaultValue) {
-        setFiller && !isInputFilled && setFiller(true);
-      }
-    });
+    const inputRef = React__default.useRef(null);
     React__default.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);
@@ -846,7 +923,7 @@ const TextFieldBase = React__default.forwardRef(
         className: "eds-form-control",
         disabled,
         readOnly,
-        ref: forwardRef,
+        ref: mergeRefs(forwardRef, inputRef),
         placeholder,
         onChange: handleChange,
         value,
@@ -855,25 +932,24 @@ const TextFieldBase = React__default.forwardRef(
     );
   }
 );
-const ClearButton = ({ onClear, ...props }) => {
-  const { isFilled: hasValue2, setFilled } = useInputGroupContext();
-  return /* @__PURE__ */ jsxs("div", { className: "eds-textfield__clear-button-wrapper", children: [
-    hasValue2 && /* @__PURE__ */ jsx("div", { className: "eds-textfield__divider" }),
-    hasValue2 && /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: "eds-textfield__clear-button",
-        type: "button",
-        tabIndex: -1,
-        onClick: () => {
-          setFilled(false);
-          onClear();
-        },
-        ...props,
-        children: /* @__PURE__ */ jsx(CloseSmallIcon, {})
-      }
-    )
-  ] });
+const ClearButton = ({ onClear, ariaLabel }) => {
+  const { isFilled: isFilled2 } = useInputGroupContext();
+  if (isFilled2) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "eds-textfield__divider" }),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          className: "eds-textfield__clear-button",
+          type: "button",
+          "aria-label": ariaLabel,
+          onClick: onClear,
+          children: /* @__PURE__ */ jsx(CloseSmallIcon, { "aria-hidden": true })
+        }
+      )
+    ] });
+  }
+  return null;
 };
 const SegmentedContext = React__default.createContext(
   null