@entur/form 8.4.2 → 9.0.0

package/dist/form.esm.js

@@ -875,142 +875,217 @@ const ClearButton = ({ onClear, ...props }) => {
 const SegmentedContext = React__default.createContext(
   null
 );
-const SegmentedProvider = ({
-  name,
-  onChange = () => void 0,
-  selectedValue,
-  multiple,
-  size,
-  ...rest
-}) => {
-  const generatedName = useRandomId("eds-segmented-control");
-  const contextValue = React__default.useMemo(
-    () => ({
-      name: name || generatedName,
-      onChange,
-      multiple,
-      selectedValue,
-      size
-    }),
-    [generatedName, multiple, name, onChange, selectedValue, size]
-  );
-  return /* @__PURE__ */ jsx(SegmentedContext.Provider, { value: contextValue, ...rest });
-};
 const useSegmentedContext = () => {
   const context = React__default.useContext(SegmentedContext);
   if (!context) {
     throw new Error(
-      "You need to wrap your SegmentedChoice in either SegmentedControl or MultipleSegmentedControl"
+      "You need to wrap your SegmentedChoice in SegmentedControl"
     );
   }
   return context;
 };
-const SegmentedChoice = React__default.forwardRef(
+const SegmentedControl = React__default.forwardRef(
   ({
     children,
-    className,
-    style,
-    value,
+    label,
     name,
-    onChange = () => void 0,
+    onChange,
+    value,
+    defaultValue,
+    size = "medium",
+    className,
+    selectedValue: deprecatedValue,
     ...rest
   }, ref) => {
-    const {
-      name: commonName,
-      selectedValue,
-      onChange: commonOnChange,
-      multiple,
-      size
-    } = useSegmentedContext();
-    const isChecked = multiple ? selectedValue[value] : selectedValue === value;
-    const handleChange = (e) => {
-      onChange(e);
-      if (multiple) {
-        commonOnChange({
-          ...selectedValue,
-          [value]: e.target.checked
-        });
-      } else if (e.target.checked) {
-        commonOnChange(value);
-      }
-    };
-    return /* @__PURE__ */ jsxs(
-      "label",
+    const [internalValue, setInternalValue] = React__default.useState(
+      defaultValue ?? null
+    );
+    const [focusedValue, setFocusedValue] = React__default.useState(null);
+    const id = useRandomId("eds-segmented-control");
+    const isControlled = deprecatedValue !== void 0 || value !== void 0;
+    const currentValue = deprecatedValue !== void 0 ? deprecatedValue : value !== void 0 ? value : internalValue;
+    const handleChange = React__default.useCallback(
+      (newValue) => {
+        if (!isControlled) {
+          setInternalValue(newValue);
+        }
+        onChange?.(newValue);
+      },
+      [isControlled, onChange]
+    );
+    const contextValue = React__default.useMemo(
+      () => ({
+        name: name ?? label ?? id,
+        onChange: handleChange,
+        value: currentValue,
+        size,
+        focusedValue,
+        setFocusedValue
+      }),
+      [id, name, handleChange, currentValue, size, focusedValue, label]
+    );
+    const labelId = `${id}-label`;
+    return /* @__PURE__ */ jsx(SegmentedContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+      "div",
       {
-        className: classNames("eds-segmented-choice", className),
-        style,
+        className: classNames("eds-segmented-control", className),
+        role: "radiogroup",
+        "aria-labelledby": label ? labelId : void 0,
+        ref,
+        ...rest,
         children: [
+          label !== void 0 && /* @__PURE__ */ jsx(Label, { htmlFor: id, id: labelId, children: label }),
           /* @__PURE__ */ jsx(
             "input",
             {
-              type: multiple ? "checkbox" : "radio",
-              name: name || commonName,
-              checked: isChecked,
-              value,
-              onChange: handleChange,
-              ref,
-              ...rest
+              name: name ?? label ?? id,
+              value: currentValue ?? void 0,
+              type: "hidden",
+              id
             }
           ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: classNames("eds-base-segmented", {
-                "eds-base-segmented--large": size === "large"
-              }),
-              children
-            }
-          )
+          /* @__PURE__ */ jsx("div", { className: "eds-segmented-control__choices", children: React__default.Children.map(children, (child, index) => {
+            if (index === 0 && React__default.isValidElement(child))
+              return React__default.cloneElement(child, {
+                "data-first-child": true
+              });
+            return child;
+          }) })
         ]
       }
-    );
+    ) });
   }
 );
-const SegmentedControl = ({
+const defaultElement = "button";
+const SegmentedChoice = React__default.forwardRef(function SegmentedChoice2({
   children,
-  label,
-  name,
-  onChange,
-  selectedValue,
-  size = "medium",
   className,
+  style,
+  value,
+  as,
+  onChange,
+  "data-first-child": isFirstChild,
   ...rest
-}) => {
-  return /* @__PURE__ */ jsx(
-    SegmentedProvider,
-    {
-      name,
-      selectedValue,
-      onChange,
-      multiple: false,
-      size,
-      children: /* @__PURE__ */ jsx(Fieldset, { label, children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: classNames("eds-segmented-control", className),
-          ...rest,
-          children
+}, ref) {
+  const Element = as || defaultElement;
+  const {
+    value: selectedValue,
+    onChange: contextOnChange,
+    size,
+    focusedValue,
+    setFocusedValue
+  } = useSegmentedContext();
+  const isChecked = selectedValue === value;
+  const tabIndex = React__default.useMemo(() => {
+    if (selectedValue !== null) return isChecked ? 0 : -1;
+    return isFirstChild ? 0 : -1;
+  }, [isChecked, selectedValue, isFirstChild]);
+  const handleSelection = () => {
+    contextOnChange(value);
+    onChange?.(value);
+  };
+  const handleKeyDown = (e) => {
+    switch (e.key) {
+      case "ArrowLeft":
+      case "ArrowUp": {
+        e.preventDefault();
+        const prevSibling = e.currentTarget.previousElementSibling;
+        if (prevSibling && prevSibling instanceof HTMLElement) {
+          prevSibling.focus();
+          setFocusedValue(prevSibling.getAttribute("data-value") || null);
+        }
+        break;
+      }
+      case "ArrowRight":
+      case "ArrowDown": {
+        e.preventDefault();
+        const nextSibling = e.currentTarget.nextElementSibling;
+        if (nextSibling && nextSibling instanceof HTMLElement) {
+          nextSibling.focus();
+          setFocusedValue(nextSibling.getAttribute("data-value") || null);
+        }
+        break;
+      }
+      case "Home": {
+        e.preventDefault();
+        const firstSibling = e.currentTarget.parentElement?.firstElementChild;
+        if (firstSibling && firstSibling instanceof HTMLElement) {
+          firstSibling.focus();
+          setFocusedValue(firstSibling.getAttribute("data-value") || null);
+        }
+        break;
+      }
+      case "End": {
+        e.preventDefault();
+        const lastSibling = e.currentTarget.parentElement?.lastElementChild;
+        if (lastSibling && lastSibling instanceof HTMLElement) {
+          lastSibling.focus();
+          setFocusedValue(lastSibling.getAttribute("data-value") || null);
+        }
+        break;
+      }
+      case " ":
+        e.preventDefault();
+        if (as === "a") {
+          handleSelection();
+          const linkElement = e.currentTarget;
+          if (linkElement.href) {
+            queueMicrotask(() => {
+              linkElement.click();
+            });
+          }
+        } else {
+          handleSelection();
         }
-      ) })
+        break;
+      case "Enter":
+        handleSelection();
+        break;
+      case "Escape":
+        e.preventDefault();
+        setFocusedValue(null);
+        break;
     }
-  );
-};
-const MultipleSegmentedControl = ({ children, label, name, onChange, selectedValue, ...rest }) => {
-  return /* @__PURE__ */ jsxs(
-    SegmentedProvider,
-    {
-      name,
-      selectedValue,
-      onChange,
-      multiple: true,
-      size: "medium",
-      children: [
-        /* @__PURE__ */ jsx(Label, { as: "div", children: label }),
-        /* @__PURE__ */ jsx("div", { className: "eds-segmented-control", ...rest, children })
-      ]
+  };
+  const onFocus = React__default.useCallback(() => {
+    setFocusedValue(value);
+  }, [setFocusedValue, value]);
+  const onBlur = React__default.useCallback(() => {
+    if (focusedValue === value) {
+      setFocusedValue(null);
     }
-  );
-};
+  }, [focusedValue, value, setFocusedValue]);
+  const elementProps = {
+    className: classNames(
+      "eds-segmented-choice",
+      {
+        "eds-segmented-choice--large": size === "large"
+      },
+      className
+    ),
+    style,
+    "aria-checked": isChecked,
+    "data-value": value,
+    ref,
+    tabIndex,
+    onClick: handleSelection,
+    onKeyDown: handleKeyDown,
+    onFocus,
+    onBlur,
+    role: "radio",
+    // For defaultElement button we override type submit
+    ...as === void 0 && { type: "button" },
+    ...rest
+  };
+  return /* @__PURE__ */ jsx(Element, { ...elementProps, children });
+});
+const SegmentedControlComponent = Object.assign(
+  SegmentedControl,
+  {
+    Item: SegmentedChoice
+  }
+);
+SegmentedControlComponent.Item.displayName = "SegmentedControl.Item";
 warnAboutMissingStyles("form", "icons", "typography");
 export {
   BaseFormControl,
@@ -1020,12 +1095,12 @@ export {
   Fieldset,
   InputGroupContextProvider,
   InputGroupLabel,
-  MultipleSegmentedControl,
   Radio,
   RadioGroup,
   RadioPanel,
   SegmentedChoice,
-  SegmentedControl,
+  SegmentedControlComponent as SegmentedControl,
+  SegmentedControlComponent,
   Switch,
   TextArea,
   TextField,