@midas-ds/components 11.2.0 → 12.1.0

package/CheckboxGroup-CjcDYBRk.js

@@ -0,0 +1,157 @@
+import { jsx as s, jsxs as g } from "react/jsx-runtime";
+import { a as P, L as V } from "./Label-BG7G0iyG.js";
+import { T as C } from "./Text-CmlsaWMA.js";
+import * as m from "react";
+import { useState as S, useRef as y } from "react";
+import { $ as p, C as v, s as D, a as I } from "./Checkbox-BtM2rFh9.js";
+import { $ as R, F as k } from "./FieldError-DdvFyIf4.js";
+import { $ as F, c as A } from "./useFormValidation-L0UHvOsP.js";
+import { $ as E } from "./useControlledState-u436Wbp1.js";
+import { a as M } from "./mergeProps-BSsN7Bgk.js";
+import { $ as O } from "./filterDOMProps-wsa9OcNI.js";
+import { $ as W } from "./useField-BMegM8fA.js";
+import { $ as B } from "./useFocusWithin-ClMkhYcq.js";
+import { u as L } from "./useLocalizedStringFormatter-N0AyjzbM.js";
+function G(e, a) {
+  let { isDisabled: t, name: c, form: f, validationBehavior: n = "aria" } = e, { isInvalid: r, validationErrors: d, validationDetails: l } = a.displayValidation, { labelProps: u, fieldProps: $, descriptionProps: i, errorMessageProps: o } = W({
+    ...e,
+    // Checkbox group is not an HTML input element so it
+    // shouldn't be labeled by a <label> element.
+    labelElementType: "span",
+    isInvalid: r,
+    errorMessage: e.errorMessage || d
+  });
+  p.set(a, {
+    name: c,
+    form: f,
+    descriptionId: i.id,
+    errorMessageId: o.id,
+    validationBehavior: n
+  });
+  let b = O(e, {
+    labelable: !0
+  }), { focusWithinProps: x } = B({
+    onBlurWithin: e.onBlur,
+    onFocusWithin: e.onFocus,
+    onFocusWithinChange: e.onFocusChange
+  });
+  return {
+    groupProps: M(b, {
+      role: "group",
+      "aria-disabled": t || void 0,
+      ...$,
+      ...x
+    }),
+    labelProps: u,
+    descriptionProps: i,
+    errorMessageProps: o,
+    isInvalid: r,
+    validationErrors: d,
+    validationDetails: l
+  };
+}
+function _(e = {}) {
+  let [a, t] = E(e.value, e.defaultValue || [], e.onChange), [c] = S(a), f = !!e.isRequired && a.length === 0, n = y(/* @__PURE__ */ new Map()), r = F({
+    ...e,
+    value: a
+  }), d = r.displayValidation.isInvalid;
+  var l, u;
+  return {
+    ...r,
+    value: a,
+    defaultValue: (l = e.defaultValue) !== null && l !== void 0 ? l : c,
+    setValue(i) {
+      e.isReadOnly || e.isDisabled || t(i);
+    },
+    isDisabled: e.isDisabled || !1,
+    isReadOnly: e.isReadOnly || !1,
+    isSelected(i) {
+      return a.includes(i);
+    },
+    addValue(i) {
+      e.isReadOnly || e.isDisabled || a.includes(i) || (a = a.concat(i), t(a));
+    },
+    removeValue(i) {
+      e.isReadOnly || e.isDisabled || a.includes(i) && t(a.filter((o) => o !== i));
+    },
+    toggleValue(i) {
+      e.isReadOnly || e.isDisabled || (a.includes(i) ? t(a.filter((o) => o !== i)) : t(a.concat(i)));
+    },
+    setInvalid(i, o) {
+      let b = new Map(n.current);
+      o.isInvalid ? b.set(i, o) : b.delete(i), n.current = b, r.updateValidation(A(...b.values()));
+    },
+    validationState: (u = e.validationState) !== null && u !== void 0 ? u : d ? "invalid" : null,
+    isInvalid: d,
+    isRequired: f
+  };
+}
+const j = (e, { value: a }) => {
+  const t = m.Children.toArray(e).filter(
+    (l) => m.isValidElement(l) && l.type === v
+  ), c = m.Children.count(t), f = m.Children.toArray(e).filter((l) => m.isValidElement(l)).filter((l) => !!l && l.type === v).map((l) => l.props.value), n = a.length === 0, r = a.length === c;
+  return {
+    allSelected: r,
+    someSelected: !n && !r,
+    checkboxValues: f
+  };
+}, h = ({ state: e, errorMessage: a }) => /* @__PURE__ */ s(R.Provider, { value: e.displayValidation, children: /* @__PURE__ */ s(k, { children: a }) }), q = { selectAll: "Select all" }, w = { selectAll: "Välj alla" }, T = {
+  en: q,
+  sv: w
+};
+function le(e) {
+  const a = _(e), t = L(T), { groupProps: c, labelProps: f, descriptionProps: n } = G(
+    e,
+    a
+  ), { allSelected: r, someSelected: d, checkboxValues: l } = j(
+    e.children,
+    a
+  ), u = ($) => {
+    a.setValue($ ? l : []);
+  };
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      ...c,
+      className: D.checkboxGroup,
+      children: [
+        /* @__PURE__ */ s(P, { popover: e.popover, children: e.label && /* @__PURE__ */ s(V, { ...f, children: e.label }) }),
+        e.description && /* @__PURE__ */ s(
+          C,
+          {
+            slot: "description",
+            ...n,
+            children: e.description
+          }
+        ),
+        e.errorPosition === "top" && /* @__PURE__ */ s(
+          h,
+          {
+            ...e,
+            state: a
+          }
+        ),
+        e.showSelectAll && /* @__PURE__ */ s(
+          v,
+          {
+            isSelected: r,
+            isIndeterminate: d,
+            onChange: u,
+            children: e.selectAllLabel || t.format("selectAll")
+          }
+        ),
+        /* @__PURE__ */ s(I.Provider, { value: a, children: e.children }),
+        e.errorPosition === "bottom" && /* @__PURE__ */ s(
+          h,
+          {
+            ...e,
+            state: a
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  le as C
+};