@midas-ds/components 1.0.2

package/index80.js

@@ -0,0 +1,724 @@
+import { jsx as y, jsxs as C } from "react/jsx-runtime";
+import { a as de, $ as ne } from "./Button-CCevm2s3.js";
+import { i as X, b as se, c as Y, d as N, e as Z, n as ee, x as z, A as L, a as ce } from "./useFocusRing-D97-G3fT.js";
+import { d as fe, a as ue } from "./Dialog-CLTyYwkS.js";
+import { d as pe } from "./Form-DXLoQL91.js";
+import { $ as be } from "./RSPContexts-EOiWkKOf.js";
+import { $ as me, a as V, b as $e, c as ge, d as ve } from "./Collection-B3xUVWPF.js";
+import { $ as M, a as ye, b as xe, c as De } from "./DragAndDrop-OTN7La7U.js";
+import { $ as _ } from "./ListBox-D21tdwTs.js";
+import { $ as he } from "./Text-DGLaY3HR.js";
+import * as H from "react";
+import c, { useState as Se, useMemo as te, forwardRef as re, useContext as E, useRef as P, useEffect as F, createContext as Pe } from "react";
+import { $ as we, b as ke, c as Ie, a as Ee, T as Ke } from "./Tag-CEd6WWSc.js";
+import { $ as Te } from "./useGridSelectionCheckbox-i1rsjlC-.js";
+import { a as He } from "./FocusScope-BR0SJ-cZ.js";
+import { $ as G } from "./VisuallyHidden-B_XzVvlX.js";
+import { $ as Ae } from "./useListState-DSOTbsL3.js";
+import { $ as Be, a as J } from "./ListKeyboardDelegate-DxMjfMsI.js";
+import { $ as Re } from "./context-ScOIq_Gu.js";
+import { I as Ce } from "./TextField-C_hq9WeT.js";
+import { C as Me } from "./Checkbox-CllWDBxF.js";
+import { C as Le } from "./chevron-down-Cd1bkzXT.js";
+import './MultiSelect.css';function Ve(l, i) {
+  let { key: d } = l;
+  const { checkboxProps: e } = Te(l, i);
+  return {
+    checkboxProps: {
+      ...e,
+      "aria-labelledby": `${e.id} ${we(i, d)}`
+    }
+  };
+}
+function _e(l) {
+  let { initialItems: i = [], initialSelectedKeys: d, getKey: e = (f) => {
+    var n;
+    return (n = f.id) !== null && n !== void 0 ? n : f.key;
+  }, filter: o, initialFilterText: t = "" } = l, [r, a] = Se({
+    items: i,
+    selectedKeys: d === "all" ? "all" : new Set(d || []),
+    filterText: t
+  }), s = te(() => o ? r.items.filter((f) => o(f, r.filterText)) : r.items, [
+    r.items,
+    r.filterText,
+    o
+  ]);
+  return {
+    ...r,
+    items: s,
+    ...Fe({
+      getKey: e
+    }, a),
+    getItem(f) {
+      return r.items.find((n) => e(n) === f);
+    }
+  };
+}
+function Fe(l, i) {
+  let { cursor: d, getKey: e } = l;
+  return {
+    setSelectedKeys(o) {
+      i((t) => ({
+        ...t,
+        selectedKeys: o
+      }));
+    },
+    setFilterText(o) {
+      i((t) => ({
+        ...t,
+        filterText: o
+      }));
+    },
+    insert(o, ...t) {
+      i((r) => A(r, o, ...t));
+    },
+    insertBefore(o, ...t) {
+      i((r) => {
+        let a = r.items.findIndex((s) => (e == null ? void 0 : e(s)) === o);
+        if (a === -1)
+          if (r.items.length === 0) a = 0;
+          else return r;
+        return A(r, a, ...t);
+      });
+    },
+    insertAfter(o, ...t) {
+      i((r) => {
+        let a = r.items.findIndex((s) => (e == null ? void 0 : e(s)) === o);
+        if (a === -1)
+          if (r.items.length === 0) a = 0;
+          else return r;
+        return A(r, a + 1, ...t);
+      });
+    },
+    prepend(...o) {
+      i((t) => A(t, 0, ...o));
+    },
+    append(...o) {
+      i((t) => A(t, t.items.length, ...o));
+    },
+    remove(...o) {
+      i((t) => {
+        let r = new Set(o), a = t.items.filter((f) => !r.has(e(f))), s = "all";
+        if (t.selectedKeys !== "all") {
+          s = new Set(t.selectedKeys);
+          for (let f of o) s.delete(f);
+        }
+        return d == null && a.length === 0 && (s = /* @__PURE__ */ new Set()), {
+          ...t,
+          items: a,
+          selectedKeys: s
+        };
+      });
+    },
+    removeSelectedItems() {
+      i((o) => {
+        if (o.selectedKeys === "all") return {
+          ...o,
+          items: [],
+          selectedKeys: /* @__PURE__ */ new Set()
+        };
+        let t = o.selectedKeys, r = o.items.filter((a) => !t.has(e(a)));
+        return {
+          ...o,
+          items: r,
+          selectedKeys: /* @__PURE__ */ new Set()
+        };
+      });
+    },
+    move(o, t) {
+      i((r) => {
+        let a = r.items.findIndex((n) => e(n) === o);
+        if (a === -1) return r;
+        let s = r.items.slice(), [f] = s.splice(a, 1);
+        return s.splice(t, 0, f), {
+          ...r,
+          items: s
+        };
+      });
+    },
+    moveBefore(o, t) {
+      i((r) => {
+        let a = r.items.findIndex((n) => e(n) === o);
+        if (a === -1) return r;
+        let f = (Array.isArray(t) ? t : [
+          ...t
+        ]).map((n) => r.items.findIndex((m) => e(m) === n)).sort((n, m) => n - m);
+        return Q(r, f, a);
+      });
+    },
+    moveAfter(o, t) {
+      i((r) => {
+        let a = r.items.findIndex((n) => e(n) === o);
+        if (a === -1) return r;
+        let f = (Array.isArray(t) ? t : [
+          ...t
+        ]).map((n) => r.items.findIndex((m) => e(m) === n)).sort((n, m) => n - m);
+        return Q(r, f, a + 1);
+      });
+    },
+    update(o, t) {
+      i((r) => {
+        let a = r.items.findIndex((s) => e(s) === o);
+        return a === -1 ? r : {
+          ...r,
+          items: [
+            ...r.items.slice(0, a),
+            t,
+            ...r.items.slice(a + 1)
+          ]
+        };
+      });
+    }
+  };
+}
+function A(l, i, ...d) {
+  return {
+    ...l,
+    items: [
+      ...l.items.slice(0, i),
+      ...d,
+      ...l.items.slice(i)
+    ]
+  };
+}
+function Q(l, i, d) {
+  d -= i.filter((t) => t < d).length;
+  let e = i.map((t) => ({
+    from: t,
+    to: d++
+  }));
+  for (let t = 0; t < e.length; t++) {
+    let r = e[t].from;
+    for (let a = t; a < e.length; a++)
+      e[a].from > r && e[a].from--;
+  }
+  for (let t = 0; t < e.length; t++) {
+    let r = e[t];
+    for (let a = e.length - 1; a > t; a--) {
+      let s = e[a];
+      s.from < r.to ? r.to++ : s.from++;
+    }
+  }
+  let o = l.items.slice();
+  for (let t of e) {
+    let [r] = o.splice(t.from, 1);
+    o.splice(t.to, 0, r);
+  }
+  return {
+    ...l,
+    items: o
+  };
+}
+const Ne = /* @__PURE__ */ Pe(null);
+function ze(l, i) {
+  return [l, i] = ce(l, i, Ne), /* @__PURE__ */ c.createElement(ge, {
+    content: /* @__PURE__ */ c.createElement(ve, l)
+  }, (d) => /* @__PURE__ */ c.createElement(Ge, {
+    props: l,
+    collection: d,
+    gridListRef: i
+  }));
+}
+function Ge({ props: l, collection: i, gridListRef: d }) {
+  let { dragAndDropHooks: e, keyboardNavigationBehavior: o = "arrow", layout: t = "stack" } = l, { CollectionRoot: r, isVirtualized: a, layoutDelegate: s, dropTargetDelegate: f } = E(V), n = Ae({
+    ...l,
+    collection: i,
+    children: void 0,
+    layoutDelegate: s
+  }), m = Be({
+    usage: "search",
+    sensitivity: "base"
+  }), { disabledBehavior: b, disabledKeys: g } = n.selectionManager, { direction: u } = Re(), p = te(() => new J({
+    collection: i,
+    collator: m,
+    ref: d,
+    disabledKeys: g,
+    disabledBehavior: b,
+    layoutDelegate: s,
+    layout: t,
+    direction: u
+  }), [
+    i,
+    d,
+    t,
+    g,
+    b,
+    s,
+    m,
+    u
+  ]), { gridProps: R } = Ie({
+    ...l,
+    keyboardDelegate: p,
+    // Only tab navigation is supported in grid layout.
+    keyboardNavigationBehavior: t === "grid" ? "tab" : o,
+    isVirtualized: a
+  }, n, d), D = n.selectionManager, w = !!(e != null && e.useDraggableCollectionState), h = !!(e != null && e.useDroppableCollectionState), v = P(w), $ = P(h);
+  F(() => {
+    v.current !== w && console.warn("Drag hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior."), $.current !== h && console.warn("Drop hooks were provided during one render, but not another. This should be avoided as it may produce unexpected behavior.");
+  }, [
+    w,
+    h
+  ]);
+  let k, x, S, I = !1, K = null, W = P(null);
+  if (w && e) {
+    k = e.useDraggableCollectionState({
+      collection: i,
+      selectionManager: D,
+      preview: e.renderDragPreview ? W : void 0
+    }), e.useDraggableCollection({}, k, d);
+    let T = e.DragPreview;
+    K = e.renderDragPreview ? /* @__PURE__ */ c.createElement(T, {
+      ref: W
+    }, e.renderDragPreview) : null;
+  }
+  if (h && e) {
+    x = e.useDroppableCollectionState({
+      collection: i,
+      selectionManager: D
+    });
+    let T = new J({
+      collection: i,
+      disabledKeys: D.disabledKeys,
+      disabledBehavior: D.disabledBehavior,
+      ref: d
+    }), le = e.dropTargetDelegate || f || new e.ListDropTargetDelegate(i, d, {
+      layout: t,
+      direction: u
+    });
+    S = e.useDroppableCollection({
+      keyboardDelegate: T,
+      dropTargetDelegate: le
+    }, x, d), I = x.isDropTarget({
+      type: "root"
+    });
+  }
+  let { focusProps: oe, isFocused: j, isFocusVisible: O } = Y(), U = {
+    isDropTarget: I,
+    isEmpty: n.collection.size === 0,
+    isFocused: j,
+    isFocusVisible: O,
+    layout: t,
+    state: n
+  }, ae = N({
+    className: l.className,
+    style: l.style,
+    defaultClassName: "react-aria-GridList",
+    values: U
+  }), q = null, ie = null;
+  if (n.collection.size === 0 && l.renderEmptyState) {
+    let T = l.renderEmptyState(U);
+    q = /* @__PURE__ */ c.createElement("div", {
+      role: "row",
+      style: {
+        display: "contents"
+      }
+    }, /* @__PURE__ */ c.createElement("div", {
+      role: "gridcell",
+      style: {
+        display: "contents"
+      }
+    }, T));
+  }
+  return /* @__PURE__ */ c.createElement(He, null, /* @__PURE__ */ c.createElement("div", {
+    ...ee(l),
+    ...ae,
+    ...Z(R, oe, S == null ? void 0 : S.collectionProps, ie),
+    ref: d,
+    slot: l.slot || void 0,
+    onScroll: l.onScroll,
+    "data-drop-target": I || void 0,
+    "data-empty": n.collection.size === 0 || void 0,
+    "data-focused": j || void 0,
+    "data-focus-visible": O || void 0,
+    "data-layout": t
+  }, /* @__PURE__ */ c.createElement(z, {
+    values: [
+      [
+        _,
+        n
+      ],
+      [
+        M,
+        {
+          dragAndDropHooks: e,
+          dragState: k,
+          dropState: x
+        }
+      ],
+      [
+        ye,
+        {
+          render: Oe
+        }
+      ]
+    ]
+  }, h && /* @__PURE__ */ c.createElement(Je, null), /* @__PURE__ */ c.createElement(r, {
+    collection: i,
+    scrollRef: d,
+    persistedKeys: xe(D, e, x),
+    renderDropIndicator: De(e, x)
+  })), q, K));
+}
+const We = /* @__PURE__ */ re(ze), je = /* @__PURE__ */ me("item", function(i, d, e) {
+  let o = E(_), { dragAndDropHooks: t, dragState: r, dropState: a } = E(M), s = X(d), { isVirtualized: f } = E(V), { rowProps: n, gridCellProps: m, descriptionProps: b, ...g } = ke({
+    node: e,
+    shouldSelectOnPressUp: !!r,
+    isVirtualized: f
+  }, o, s), { hoverProps: u, isHovered: p } = se({
+    isDisabled: !g.allowsSelection && !g.hasAction,
+    onHoverStart: e.props.onHoverStart,
+    onHoverChange: e.props.onHoverChange,
+    onHoverEnd: e.props.onHoverEnd
+  }), { isFocusVisible: R, focusProps: D } = Y(), { checkboxProps: w } = Ve({
+    key: e.key
+  }, o), h = o.selectionManager.disabledBehavior === "all" && g.isDisabled ? {
+    isDisabled: !0
+  } : {}, v = null;
+  r && t && (v = t.useDraggableItem({
+    key: e.key,
+    hasDragButton: !0
+  }, r));
+  let $ = null, k = P(null), { visuallyHiddenProps: x } = G();
+  a && t && ($ = t.useDropIndicator({
+    target: {
+      type: "item",
+      key: e.key,
+      dropPosition: "on"
+    }
+  }, a, k));
+  let S = r && r.isDragging(e.key), I = N({
+    ...i,
+    id: void 0,
+    children: e.rendered,
+    defaultClassName: "react-aria-GridListItem",
+    values: {
+      ...g,
+      isHovered: p,
+      isFocusVisible: R,
+      selectionMode: o.selectionManager.selectionMode,
+      selectionBehavior: o.selectionManager.selectionBehavior,
+      allowsDragging: !!r,
+      isDragging: S,
+      isDropTarget: $ == null ? void 0 : $.isDropTarget
+    }
+  }), K = P(null);
+  return F(() => {
+    r && !K.current && console.warn('Draggable items in a GridList must contain a <Button slot="drag"> element so that keyboard and screen reader users can drag them.');
+  }, []), F(() => {
+    e.textValue || console.warn("A `textValue` prop is required for <GridListItem> elements with non-plain text children in order to support accessibility features such as type to select.");
+  }, [
+    e.textValue
+  ]), /* @__PURE__ */ c.createElement(c.Fragment, null, $ && !$.isHidden && /* @__PURE__ */ c.createElement("div", {
+    role: "row",
+    style: {
+      position: "absolute"
+    }
+  }, /* @__PURE__ */ c.createElement("div", {
+    role: "gridcell"
+  }, /* @__PURE__ */ c.createElement("div", {
+    role: "button",
+    ...x,
+    ...$ == null ? void 0 : $.dropIndicatorProps,
+    ref: k
+  }))), /* @__PURE__ */ c.createElement("div", {
+    ...Z(ee(i), n, D, u, v == null ? void 0 : v.dragProps),
+    ...I,
+    ref: s,
+    "data-selected": g.isSelected || void 0,
+    "data-disabled": g.isDisabled || void 0,
+    "data-hovered": p || void 0,
+    "data-focused": g.isFocused || void 0,
+    "data-focus-visible": R || void 0,
+    "data-pressed": g.isPressed || void 0,
+    "data-allows-dragging": !!r || void 0,
+    "data-dragging": S || void 0,
+    "data-drop-target": ($ == null ? void 0 : $.isDropTarget) || void 0,
+    "data-selection-mode": o.selectionManager.selectionMode === "none" ? void 0 : o.selectionManager.selectionMode
+  }, /* @__PURE__ */ c.createElement("div", {
+    ...m,
+    style: {
+      display: "contents"
+    }
+  }, /* @__PURE__ */ c.createElement(z, {
+    values: [
+      [
+        be,
+        {
+          slots: {
+            [L]: {},
+            selection: w
+          }
+        }
+      ],
+      [
+        de,
+        {
+          slots: {
+            [L]: h,
+            drag: {
+              ...v == null ? void 0 : v.dragButtonProps,
+              ref: K,
+              style: {
+                pointerEvents: "none"
+              }
+            }
+          }
+        }
+      ],
+      [
+        he,
+        {
+          slots: {
+            [L]: {},
+            description: b
+          }
+        }
+      ],
+      [
+        V,
+        $e
+      ],
+      [
+        _,
+        null
+      ]
+    ]
+  }, I.children))));
+});
+function Oe(l, i) {
+  i = X(i);
+  let { dragAndDropHooks: d, dropState: e } = E(M), o = P(null), { dropIndicatorProps: t, isHidden: r, isDropTarget: a } = d.useDropIndicator(l, e, o);
+  return r ? null : /* @__PURE__ */ c.createElement(qe, {
+    ...l,
+    dropIndicatorProps: t,
+    isDropTarget: a,
+    buttonRef: o,
+    ref: i
+  });
+}
+function Ue(l, i) {
+  let { dropIndicatorProps: d, isDropTarget: e, buttonRef: o, ...t } = l, { visuallyHiddenProps: r } = G(), a = N({
+    ...t,
+    defaultClassName: "react-aria-DropIndicator",
+    values: {
+      isDropTarget: e
+    }
+  });
+  return /* @__PURE__ */ c.createElement("div", {
+    ...a,
+    role: "row",
+    ref: i,
+    "data-drop-target": e || void 0
+  }, /* @__PURE__ */ c.createElement("div", {
+    role: "gridcell"
+  }, /* @__PURE__ */ c.createElement("div", {
+    ...r,
+    role: "button",
+    ...d,
+    ref: o
+  }), a.children));
+}
+const qe = /* @__PURE__ */ re(Ue);
+function Je() {
+  let { dragAndDropHooks: l, dropState: i } = E(M), d = P(null), { dropIndicatorProps: e } = l.useDropIndicator({
+    target: {
+      type: "root"
+    }
+  }, i, d), o = i.isDropTarget({
+    type: "root"
+  }), { visuallyHiddenProps: t } = G();
+  return !o && e["aria-hidden"] ? null : /* @__PURE__ */ c.createElement("div", {
+    role: "row",
+    "aria-hidden": e["aria-hidden"],
+    style: {
+      position: "absolute"
+    }
+  }, /* @__PURE__ */ c.createElement("div", {
+    role: "gridcell"
+  }, /* @__PURE__ */ c.createElement("div", {
+    role: "button",
+    ...t,
+    ...e,
+    ref: d
+  })));
+}
+const Qe = '"../theme/tokens.css"', Xe = '"Inter", sans-serif', Ye = "#000000", Ze = "#b31b1b", et = "(max-width: 767px)", tt = "#bfbfbf", rt = "#e6e6e6", ot = "#f2f2f2", at = "_button_1eb3v_4", it = "_icon_1eb3v_19", lt = "_multiSelect_1eb3v_44", dt = "_popover_1eb3v_60", nt = "_listBoxItem_1eb3v_73", B = {
+  tokens: Qe,
+  display: Xe,
+  black: Ye,
+  signalRed130: Ze,
+  smBreakpoint: et,
+  gray50: tt,
+  gray20: rt,
+  backgroundSecondary: ot,
+  button: at,
+  icon: it,
+  multiSelect: lt,
+  popover: dt,
+  listBoxItem: nt
+}, Tt = ({
+  label: l,
+  description: i,
+  items: d,
+  onSelectionChange: e,
+  selectedKeys: o,
+  defaultSelectedKeys: t,
+  isDisabled: r,
+  isInvalid: a,
+  errorMessage: s
+}) => {
+  const f = H.useRef(null), [n, m] = H.useState(
+    void 0
+  ), b = _e({
+    initialItems: d,
+    initialSelectedKeys: t
+  });
+  H.useEffect(() => {
+    const u = () => {
+      f.current && m(f.current.offsetWidth - 2);
+    };
+    return u(), window.addEventListener("resize", u), () => {
+      window.removeEventListener("resize", u);
+    };
+  }, []), H.useEffect(() => {
+    e && e(new Set(b.selectedKeys));
+  }, [b.selectedKeys, e]), H.useEffect(() => {
+    o && b.setSelectedKeys(new Set(o));
+  }, [o]);
+  const g = b.selectedKeys === "all" ? new Set(
+    b.items.map((u) => u.id)
+  ) : b.selectedKeys;
+  return /* @__PURE__ */ y(
+    "div",
+    {
+      className: B.multiSelect,
+      "data-disabled": r,
+      "data-invalid": a,
+      children: /* @__PURE__ */ C(
+        z,
+        {
+          values: [
+            [
+              // we should maybe add more here
+              // [LabelContext, {...labelProps, ref: labelRef}],
+              // [InputContext, {...inputProps, ref: inputOrTextAreaRef}],
+              // [TextAreaContext, {...inputProps, ref: inputOrTextAreaRef}],
+              // [TextContext, {
+              //   slots: {
+              //     description: descriptionProps,
+              //     errorMessage: errorMessageProps
+              //   }
+              // }],
+              pe,
+              {
+                isInvalid: a || !1,
+                validationErrors: [],
+                validationDetails: {
+                  customError: a || !1,
+                  badInput: !1,
+                  patternMismatch: !1,
+                  rangeOverflow: !1,
+                  rangeUnderflow: !1,
+                  stepMismatch: !1,
+                  tooLong: !1,
+                  tooShort: !1,
+                  typeMismatch: !1,
+                  valid: !1,
+                  valueMissing: !1
+                }
+              }
+            ]
+          ],
+          children: [
+            /* @__PURE__ */ y(
+              Ce,
+              {
+                label: l,
+                description: i,
+                errorMessage: s,
+                children: /* @__PURE__ */ C(fe, { children: [
+                  /* @__PURE__ */ C(
+                    ne,
+                    {
+                      className: B.button,
+                      ref: f,
+                      isDisabled: r,
+                      children: [
+                        "Välj",
+                        /* @__PURE__ */ y(
+                          "div",
+                          {
+                            className: B.icon,
+                            "aria-hidden": "true",
+                            children: /* @__PURE__ */ y(Le, { size: 20 })
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ y(
+                    ue,
+                    {
+                      className: B.popover,
+                      style: { width: n },
+                      offset: 0,
+                      UNSTABLE_portalContainer: f.current || void 0,
+                      children: /* @__PURE__ */ y(
+                        We,
+                        {
+                          "aria-label": l,
+                          selectionMode: "multiple",
+                          selectedKeys: b.selectedKeys,
+                          onSelectionChange: b.setSelectedKeys,
+                          children: b.items.map((u) => /* @__PURE__ */ C(
+                            je,
+                            {
+                              id: u.id,
+                              textValue: u.name,
+                              className: B.listBoxItem,
+                              children: [
+                                /* @__PURE__ */ y(Me, { slot: "selection" }),
+                                u.name
+                              ]
+                            },
+                            u.id
+                          ))
+                        }
+                      )
+                    }
+                  )
+                ] })
+              }
+            ),
+            /* @__PURE__ */ y(
+              Ee,
+              {
+                "aria-label": "Valda",
+                onRemove: (u) => {
+                  b.setSelectedKeys(new Set(Array.from(b.selectedKeys).filter((p) => !u.has(p))));
+                },
+                children: Array.from(g).map((u) => {
+                  const p = b.getItem(u);
+                  return /* @__PURE__ */ y(
+                    Ke,
+                    {
+                      id: p == null ? void 0 : p.id,
+                      textValue: p == null ? void 0 : p.name,
+                      isDisabled: r,
+                      dismissable: !0,
+                      children: p == null ? void 0 : p.name
+                    },
+                    p == null ? void 0 : p.id
+                  );
+                })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  Tt as MultiSelect
+};