@midas-ds/components 16.8.6 → 17.0.0

package/chunks/Select-BYz3DdXs.js

@@ -1,576 +0,0 @@
-import { jsx as n, jsxs as h } from "react/jsx-runtime";
-import * as w from "react";
-import { useMemo as z, useState as V, useCallback as I, useEffect as M, useRef as D } from "react";
-import { c as B } from "./clsx-AexbMWKp.js";
-import { filterDOMProps as L, mergeProps as x, useId as O, chain as q, useFormReset as N, useObjectRef as R } from "@react-aria/utils";
-import { Section as E, Item as C } from "@react-stately/collections";
-import { Collection as j, FieldErrorContext as G, TextField as H, TagList as $ } from "react-aria-components";
-import { L as W } from "./ListBox-D5BBeZWL.js";
-import { c as U, a as X, b as J } from "./ListBoxSection-C4y3K7T5.js";
-import { useCollator as Q, useField as Y, useButton as Z } from "react-aria";
-import { setInteractionModality as ee } from "@react-aria/interactions";
-import { useMenuTrigger as te } from "@react-aria/menu";
-import { ListKeyboardDelegate as le, useTypeSelect as oe } from "@react-aria/selection";
-import { useMenuTriggerState as ne } from "@react-stately/menu";
-import { useFormValidationState as ie } from "@react-stately/form";
-import { useListState as re } from "@react-stately/list";
-import { a as se, T as ae } from "./Tag-C7VZ0T0o.js";
-import { useFormValidation as ce } from "@react-aria/form";
-import { useVisuallyHidden as de } from "@react-aria/visually-hidden";
-import { a as ue, L as ge } from "./Label-6GZmmff9.js";
-import { T as me } from "./Text-Bxww8mmL.js";
-import { C as fe } from "./Checkbox-CRLj7_Ox.js";
-import { X as pe } from "./x-B9bYxG31.js";
-import { u as T } from "./useLocalizedStringFormatter-BHvsRxDk.js";
-import { C as ye } from "./chevron-down-BBFYYzZq.js";
-import { F as he } from "./FieldError-C_3uLAGY.js";
-import '../assets/Select2.css';const A = ({ item: e }) => /* @__PURE__ */ n(
-  X,
-  {
-    ...e.value,
-    textValue: e.textValue,
-    "aria-label": e.textValue,
-    children: e.rendered
-  }
-), be = ({ section: e, state: t }) => /* @__PURE__ */ n(U, { ...e.value, children: t.collection.getChildren ? /* @__PURE__ */ n(j, { items: t.collection.getChildren(e.key), children: (s) => /* @__PURE__ */ n(A, { item: s }) }) : null }), Se = ({
-  state: e,
-  ...t
-}) => /* @__PURE__ */ n(
-  W,
-  {
-    ...t,
-    ...e,
-    escapeKeyBehavior: "none",
-    onSelectionChange: e.setSelectedKeys,
-    items: e.collection,
-    children: (s) => s.type === "section" ? /* @__PURE__ */ n(
-      be,
-      {
-        state: e,
-        section: s
-      }
-    ) : /* @__PURE__ */ n(A, { item: s })
-  }
-);
-function ve(e, t, s) {
-  const { disallowEmptySelection: r, isDisabled: l } = e, i = Q({ usage: "search", sensitivity: "base" }), o = z(
-    () => new le(
-      t.collection,
-      t.disabledKeys,
-      null,
-      i
-    ),
-    [t.collection, t.disabledKeys, i]
-  ), { menuTriggerProps: a, menuProps: d } = te(
-    {
-      isDisabled: l,
-      type: "listbox"
-    },
-    t,
-    s
-  ), u = (m) => {
-    const { selectedKeys: v, selectionMode: k } = t, P = v.values().next().value;
-    if (k === "single")
-      switch (m.key) {
-        case "ArrowLeft": {
-          m.preventDefault();
-          const S = v.size > 0 ? o.getKeyAbove(P) : o.getFirstKey();
-          S && t.setSelectedKeys([S]);
-          break;
-        }
-        case "ArrowRight": {
-          m.preventDefault();
-          const S = v.size > 0 ? o.getKeyBelow(P) : o.getFirstKey();
-          S && t.setSelectedKeys([S]);
-          break;
-        }
-      }
-  }, { typeSelectProps: c } = oe({
-    keyboardDelegate: o,
-    selectionManager: t.selectionManager,
-    onTypeSelect(m) {
-      t.setSelectedKeys([m]);
-    }
-  }), { labelProps: b, fieldProps: p } = Y({
-    ...e,
-    labelElementType: "span"
-  });
-  c.onKeyDown = c.onKeyDownCapture, delete c.onKeyDownCapture;
-  const g = L(e, { labelable: !0 }), y = x(c, a, p), K = O();
-  return {
-    labelProps: {
-      ...b,
-      onClick: () => {
-        e.isDisabled || (s.current?.focus(), ee("keyboard"));
-      }
-    },
-    triggerProps: x(g, {
-      ...y,
-      onKeyDown: q(
-        y.onKeyDown,
-        u,
-        e.onKeyDown
-      ),
-      onKeyUp: e.onKeyUp,
-      "aria-labelledby": [
-        y["aria-labelledby"],
-        y["aria-label"] && !y["aria-labelledby"] ? y.id : null,
-        K
-      ].filter(Boolean).join(" "),
-      onFocus(m) {
-        t.isFocused || (e.onFocus && e.onFocus(m), t.setFocused(!0));
-      },
-      onBlur(m) {
-        t.isOpen || (e.onBlur && e.onBlur(m), t.setFocused(!1));
-      }
-    }),
-    valueProps: {
-      id: K
-    },
-    menuProps: {
-      ...d,
-      disallowEmptySelection: r,
-      autoFocus: t.focusStrategy || !0,
-      shouldSelectOnPressUp: !0,
-      shouldFocusOnHover: !0,
-      onBlur: (m) => {
-        m.currentTarget.contains(m.relatedTarget) || (e.onBlur && e.onBlur(m), t.setFocused(!1));
-      },
-      "aria-labelledby": [
-        p["aria-labelledby"],
-        y["aria-label"] && !p["aria-labelledby"] ? y.id : null
-      ].filter(Boolean).join(" ")
-    }
-  };
-}
-function Ke(e) {
-  const {
-    collection: t,
-    disabledKeys: s,
-    selectionManager: r,
-    selectionManager: { setSelectedKeys: l, selectedKeys: i, selectionMode: o }
-  } = re(e), a = [], d = i.size !== 0 ? Array.from(i).map((u) => {
-    const c = t.getItem(u);
-    return c || a.push(u), c;
-  }).filter(Boolean) : null;
-  return a.length && console.warn(
-    `Select: Keys "${a.join(
-      ", "
-    )}" passed to "selectedKeys" are not present in the collection.`
-  ), {
-    collection: t,
-    disabledKeys: s,
-    selectionManager: r,
-    selectionMode: o,
-    selectedKeys: i,
-    setSelectedKeys: l.bind(r),
-    selectedItems: d
-  };
-}
-function Pe(e) {
-  const [t, s] = V(!1), r = ne(e), l = e.selectionMode === "single", i = Ke({
-    ...e,
-    onSelectionChange: (c) => {
-      e.onSelectionChange && e.onSelectionChange(c), l && r.close();
-    }
-  }), o = ie({
-    ...e,
-    validationBehavior: "native",
-    value: i.selectedKeys
-  }), a = i.collection.size === 0, d = !!i.selectedKeys.size, u = I(() => {
-    o.resetValidation(), o.commitValidation();
-  }, [o]);
-  return M(() => {
-    l && d && u();
-  }, [d, l, u]), {
-    ...i,
-    ...r,
-    close() {
-      r.close(), d && u();
-    },
-    open() {
-      a || r.open();
-    },
-    toggle(c) {
-      a || r.toggle(c);
-    },
-    isFocused: t,
-    setFocused: s,
-    ...o
-  };
-}
-function xe(e, t = {}) {
-  const [s, r] = V({ width: 0, height: 0 }), l = t.delay === void 0 ? 500 : t.delay, i = !!t.includePadding;
-  return M(() => {
-    if (!e) return;
-    const o = new ResizeObserver(
-      Ce(([a]) => {
-        const { inlineSize: d, blockSize: u } = i ? a.borderBoxSize[0] : a.contentBoxSize[0];
-        r({ width: d, height: u });
-      }, l)
-    );
-    return o.observe(e), () => {
-      o.disconnect();
-    };
-  }, [l, e, i]), s;
-}
-function Ce(e, t) {
-  let s;
-  return (r, l) => {
-    clearTimeout(s), s = setTimeout(() => {
-      e(r, l);
-    }, t);
-  };
-}
-function _e({
-  autoComplete: e,
-  name: t,
-  isDisabled: s,
-  isRequired: r,
-  selectRef: l
-}, i, o) {
-  const { visuallyHiddenProps: a } = de();
-  return N(l, i.selectedKeys, i.setSelectedKeys), ce(
-    {
-      validationBehavior: "native",
-      focus: () => o.current?.focus()
-    },
-    i,
-    l
-  ), {
-    containerProps: {
-      ...a,
-      "aria-hidden": !0,
-      // @ts-expect-error - data-a11y-ignore is not a standard attribute
-      "data-react-aria-prevent-focus": !0,
-      "data-a11y-ignore": "aria-hidden-focus"
-    },
-    inputProps: {
-      style: { display: "none" }
-    },
-    selectProps: {
-      tabIndex: -1,
-      autoComplete: e,
-      disabled: s,
-      required: r,
-      name: t,
-      value: Array.from(i.selectedKeys).map((d) => d.toString()),
-      onChange: (d) => i.setSelectedKeys(d.target.value),
-      multiple: !0
-    }
-  };
-}
-function we(e) {
-  const { state: t, triggerRef: s, name: r, isDisabled: l } = e, i = `${e.label}-hidden`, o = D(null), { containerProps: a, selectProps: d } = _e(
-    { ...e, selectRef: o },
-    t,
-    s
-  );
-  return t.collection.size <= 300 ? /* @__PURE__ */ n(
-    "div",
-    {
-      ...a,
-      "data-testid": "hidden-select-container",
-      children: /* @__PURE__ */ h("label", { children: [
-        i,
-        /* @__PURE__ */ h(
-          "select",
-          {
-            ...d,
-            ref: o,
-            children: [
-              /* @__PURE__ */ n("option", {}),
-              [...t.collection.getKeys()].map((u) => {
-                const c = t.collection.getItem(u);
-                return c && c.type === "item" ? /* @__PURE__ */ n(
-                  "option",
-                  {
-                    value: c.key,
-                    children: c.textValue
-                  },
-                  c.key
-                ) : null;
-              })
-            ]
-          }
-        )
-      ] })
-    }
-  ) : r ? /* @__PURE__ */ n(
-    "input",
-    {
-      type: "hidden",
-      autoComplete: d.autoComplete,
-      name: r,
-      disabled: l,
-      value: Array.from(t.selectedKeys).map((u) => u.toString()) ?? [""]
-    }
-  ) : null;
-}
-const Ve = "_wrapper_odqg7_1", Me = "_trigger_odqg7_12", Be = "_medium_odqg7_26", Te = "_icon_odqg7_62", Ae = "_tagGroup_odqg7_68", Fe = "_triggerContainer_odqg7_89", ke = "_selectValueTag_odqg7_95", ze = "_clearButton_odqg7_111", Ie = "_truncate_odqg7_123", De = "_selectAll_odqg7_166", f = {
-  wrapper: Ve,
-  trigger: Me,
-  medium: Be,
-  icon: Te,
-  tagGroup: Ae,
-  triggerContainer: Fe,
-  selectValueTag: ke,
-  clearButton: ze,
-  truncate: Ie,
-  selectAll: De
-}, Le = { clearAll: "Clear all", selectAll: "Select all", selectedItems: "Selected items", chosen: "chosen" }, Oe = { clearAll: "Rensa alla", selectAll: "Välj alla", selectedItems: "Valda objekt", chosen: "valda" }, F = {
-  en: Le,
-  sv: Oe
-}, qe = ({
-  state: { selectedItems: e },
-  isDisabled: t,
-  parentWidth: s,
-  onClear: r,
-  triggerRef: l,
-  isClearable: i
-}) => {
-  const o = T(F);
-  return /* @__PURE__ */ h(
-    "div",
-    {
-      className: f.selectValueTag,
-      "data-disabled": t || void 0,
-      children: [
-        /* @__PURE__ */ n(
-          "span",
-          {
-            className: f.truncate,
-            style: { maxWidth: s - 92 },
-            children: e?.length && e.length > 1 ? `${e.length} ${o.format("chosen")}` : e?.[0].textValue
-          }
-        ),
-        i && /* @__PURE__ */ n(
-          "button",
-          {
-            disabled: t,
-            "aria-label": o.format("clearAll"),
-            className: f.clearButton,
-            onClick: () => {
-              r(), l?.current?.focus();
-            },
-            children: /* @__PURE__ */ n(
-              pe,
-              {
-                width: 20,
-                height: 20
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}, Ne = ({
-  autoFocus: e,
-  excludeFromTabOrder: t,
-  isDisabled: s,
-  size: r = "large",
-  isOpen: l,
-  isInvalid: i,
-  selectionMode: o,
-  state: { selectedItems: a },
-  placeholder: d,
-  children: u,
-  triggerRef: c,
-  ...b
-}) => {
-  const { buttonProps: p } = Z(
-    { autoFocus: e, excludeFromTabOrder: t, isDisabled: s, ...b },
-    c
-  ), g = o === "multiple";
-  return /* @__PURE__ */ h(
-    "div",
-    {
-      className: f.triggerContainer,
-      "data-disabled": s || void 0,
-      children: [
-        /* @__PURE__ */ h(
-          "button",
-          {
-            ...p,
-            autoFocus: e,
-            className: B(f.trigger, {
-              [f.medium]: r === "medium"
-            }),
-            "data-disabled": s || void 0,
-            "data-invalid": i || void 0,
-            "data-open": l || void 0,
-            ref: c,
-            type: "button",
-            children: [
-              g && !a ? /* @__PURE__ */ n("span", { children: d }) : null,
-              g ? null : /* @__PURE__ */ n("span", { children: a ? a[0].textValue : d }),
-              /* @__PURE__ */ n(
-                "div",
-                {
-                  className: f.icon,
-                  "aria-hidden": "true",
-                  children: /* @__PURE__ */ n(ye, { size: 20 })
-                }
-              )
-            ]
-          }
-        ),
-        u
-      ]
-    }
-  );
-}, _ = ({
-  state: e,
-  errorMessage: t
-}) => /* @__PURE__ */ n(G.Provider, { value: { ...e.displayValidation }, children: /* @__PURE__ */ n(he, { children: t }) }), Re = w.forwardRef(
-  ({ isClearable: e = !0, popover: t, ...s }, r) => {
-    const l = {
-      selectionMode: "single",
-      errorPosition: "top",
-      disallowEmptySelection: !e,
-      isClearable: e,
-      size: "large",
-      popover: t,
-      ...s
-    }, i = R(r), o = Pe(l), a = T(F), { labelProps: d, triggerProps: u, valueProps: c, menuProps: b } = ve(
-      l,
-      o,
-      i
-    ), { width: p } = xe(i.current, {
-      includePadding: !0
-    });
-    return /* @__PURE__ */ h(
-      H,
-      {
-        ...l,
-        className: B(f.wrapper, l.className),
-        children: [
-          /* @__PURE__ */ n(
-            we,
-            {
-              ...l,
-              state: o,
-              triggerRef: i
-            }
-          ),
-          /* @__PURE__ */ n(ue, { popover: t, children: l.label && /* @__PURE__ */ n(
-            ge,
-            {
-              ...d,
-              "data-disabled": l.isDisabled || void 0,
-              children: l.label
-            }
-          ) }),
-          l.description && /* @__PURE__ */ n(me, { slot: "description", children: l.description }),
-          l.errorPosition === "top" && /* @__PURE__ */ n(
-            _,
-            {
-              ...l,
-              state: o
-            }
-          ),
-          /* @__PURE__ */ n(
-            Ne,
-            {
-              ...l,
-              ...u,
-              isInvalid: o.displayValidation.isInvalid,
-              triggerRef: i,
-              state: o,
-              children: l.selectionMode === "multiple" && o.selectedItems ? /* @__PURE__ */ n("span", { ...c, children: /* @__PURE__ */ n(
-                qe,
-                {
-                  ...l,
-                  state: o,
-                  parentWidth: p,
-                  onClear: () => o.selectionManager.clearSelection(),
-                  triggerRef: i
-                }
-              ) }) : null
-            }
-          ),
-          l.errorPosition === "bottom" && /* @__PURE__ */ n(
-            _,
-            {
-              ...l,
-              state: o
-            }
-          ),
-          /* @__PURE__ */ h(
-            J,
-            {
-              isOpen: o.isOpen,
-              onOpenChange: (g) => {
-                g || o.close();
-              },
-              triggerRef: i,
-              style: { width: p },
-              children: [
-                l.isSelectableAll && /* @__PURE__ */ n(
-                  fe,
-                  {
-                    isSelected: o.selectionManager.isSelectAll,
-                    isIndeterminate: !o.selectionManager.isSelectAll && !o.selectionManager.isEmpty,
-                    className: f.selectAll,
-                    onChange: () => o.selectionManager.toggleSelectAll(),
-                    children: a.format("selectAll")
-                  }
-                ),
-                /* @__PURE__ */ n(
-                  Se,
-                  {
-                    ...b,
-                    state: o
-                  }
-                )
-              ]
-            }
-          ),
-          l.showTags && !!o.selectedItems && /* @__PURE__ */ n(
-            se,
-            {
-              "aria-label": a.format("selectedItems"),
-              selectionBehavior: "toggle",
-              onRemove: (g) => o.selectionManager.toggleSelection(Array.from(g)[0]),
-              className: f.tagGroup,
-              children: /* @__PURE__ */ n($, { items: o.selectedItems, children: (g) => /* @__PURE__ */ n(
-                ae,
-                {
-                  textValue: g.textValue,
-                  id: g.key,
-                  dismissable: !0,
-                  isDisabled: l.isDisabled,
-                  children: g.textValue
-                },
-                g.key
-              ) })
-            }
-          )
-        ]
-      }
-    );
-  }
-), Ee = w.forwardRef(
-  ({ options: e, ...t }, s) => /* @__PURE__ */ n(
-    Re,
-    {
-      ...t,
-      items: e,
-      ref: s,
-      children: (r) => r.children ? /* @__PURE__ */ n(
-        E,
-        {
-          items: r.children,
-          title: r.name,
-          children: (l) => /* @__PURE__ */ n(C, { textValue: l.textValue, children: l.name })
-        },
-        String(r.name)
-      ) : /* @__PURE__ */ n(C, { textValue: r.textValue, children: r.name })
-    }
-  )
-);
-Ee.displayName = "Select";
-export {
-  Ee as S
-};

package/chunks/Text-Bxww8mmL.js

@@ -1,39 +0,0 @@
-import { jsx as n } from "react/jsx-runtime";
-import { c as _ } from "./clsx-AexbMWKp.js";
-import { Text as b } from "react-aria-components";
-import '../assets/Text.css';const m = "_body_fvsa7_1", p = "_description_fvsa7_5", f = "_bold_fvsa7_42", y = "_italic_fvsa7_46", s = {
-  body: m,
-  "body-01": "_body-01_fvsa7_2",
-  "body-02": "_body-02_fvsa7_3",
-  "body-small": "_body-small_fvsa7_4",
-  description: p,
-  "description-small": "_description-small_fvsa7_6",
-  bold: f,
-  italic: y
-}, a = "span", N = ({
-  children: d,
-  className: c,
-  size: t,
-  variant: i,
-  isExpressive: r = !1,
-  elementType: o = a,
-  ...l
-}) => {
-  const e = {
-    className: _(
-      i === "body-01" ? s["body-01"] : i === "body-02" ? s["body-02"] : l.slot === "description" ? t === "small" ? s["description-small"] : s.description : t === "small" ? s["body-small"] : s.body,
-      {
-        [s.bold]: ["b", "strong"].includes(o),
-        [s.italic]: ["i", "em"].includes(o)
-      },
-      c
-    ),
-    elementType: o || a,
-    ...r && { "data-expressive": !0 },
-    ...l
-  };
-  return /* @__PURE__ */ n(b, { ...e, children: d });
-};
-export {
-  N as T
-};

package/legacy-select/HiddenMultiSelect.d.ts

@@ -1,48 +0,0 @@
-import { FocusableElement } from '@react-types/shared';
-import { default as React, ReactNode, RefObject } from 'react';
-import { MultiSelectState } from './types';
-import { ListBoxOption } from '../list-box';
-export interface AriaHiddenMultiSelectProps {
-    /**
-     * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
-     */
-    autoComplete?: string;
-    /** The text label for the select. */
-    label?: ReactNode;
-    /** HTML form input name. */
-    name?: string;
-    /** Sets the disabled state of the select and input. */
-    isDisabled?: boolean;
-    /** Sets the required state of the select and input. */
-    isRequired?: boolean;
-}
-export interface HiddenMultiSelectProps<T extends ListBoxOption> extends AriaHiddenMultiSelectProps {
-    /** State for the select. */
-    state: MultiSelectState<T>;
-    /** A ref to the trigger element. */
-    triggerRef: RefObject<FocusableElement | null>;
-}
-interface AriaHiddenMultiSelectOptions extends AriaHiddenMultiSelectProps {
-    /** A ref to the hidden `<select>` element. */
-    selectRef?: RefObject<HTMLSelectElement | null>;
-}
-interface HiddenMultiSelectAria {
-    /** Props for the container element. */
-    containerProps: React.HTMLAttributes<FocusableElement>;
-    /** Props for the hidden input element. */
-    inputProps: React.InputHTMLAttributes<HTMLInputElement>;
-    /** Props for the hidden select element. */
-    selectProps: React.SelectHTMLAttributes<HTMLSelectElement>;
-}
-/**
- * Provides the behavior and accessibility implementation for a hidden `<select>` element, which
- * can be used in combination with `useSelect` to support browser form autofill, mobile form
- * navigation, and native HTML form submission.
- */
-export declare function useHiddenMultiSelect<T extends ListBoxOption>({ autoComplete, name, isDisabled, isRequired, selectRef, }: AriaHiddenMultiSelectOptions, state: MultiSelectState<T>, triggerRef: RefObject<FocusableElement | null>): HiddenMultiSelectAria;
-/**
- * Renders a hidden native `<select>` element, which can be used to support browser
- * form autofill, mobile form navigation, and native form submission.
- */
-export declare function HiddenMultiSelect<T extends ListBoxOption>(props: HiddenMultiSelectProps<T>): import("react/jsx-runtime").JSX.Element | null;
-export {};

package/legacy-select/LegacySelect.stories.d.ts

@@ -1,27 +0,0 @@
-import { StoryObj } from '@storybook/react-vite';
-import { LegacySelect } from '.';
-type Story = StoryObj<typeof LegacySelect>;
-declare const _default: {
-    component: import('react').ForwardRefExoticComponent<Omit<import('./types').SelectProps, "children" | "items"> & {
-        options: import('..').ListBoxOption[];
-    } & import('react').RefAttributes<HTMLButtonElement>>;
-    title: string;
-    tags: string[];
-    args: {
-        description: string;
-        isDisabled: false;
-        isSelectableAll: false;
-        label: string;
-        options: {
-            id: import('react-aria').Key;
-            name: string;
-        }[];
-        placeholder: string;
-        selectionMode: "single";
-        showTags: false;
-        errorPosition: "top";
-        size: "large";
-    };
-};
-export default _default;
-export declare const Primary: Story;

package/legacy-select/MultiSelectValueTag.d.ts

@@ -1,11 +0,0 @@
-import { RefObject } from 'react';
-import { MultiSelectState, SelectProps } from './types';
-import { ListBoxOption } from '../list-box';
-interface MultiSelectValueTagProps extends SelectProps {
-    state: MultiSelectState<ListBoxOption>;
-    parentWidth: number;
-    onClear: () => void;
-    triggerRef: RefObject<HTMLButtonElement | null>;
-}
-export declare const MultiSelectValueTag: ({ state: { selectedItems: items }, isDisabled, parentWidth, onClear, triggerRef, isClearable, }: MultiSelectValueTagProps) => import("react/jsx-runtime").JSX.Element;
-export {};