@iress-oss/ids-components 6.0.0-alpha.3 → 6.0.0-alpha.30

package/dist/components/RichSelect/SelectTags/SelectTags.js

@@ -1,163 +0,0 @@
-import { jsxs as N, jsx as o } from "react/jsx-runtime";
-import { propagateTestid as b } from "../../../helpers/utility/propagateTestid.js";
-import { toArray as k } from "../../../helpers/formatting/toArray.js";
-import { composeLabelValueDescriptor as w } from "../../../helpers/label-value/composeLabelValueDescriptor.js";
-import { getFormControlValueAsStringIfDefined as E } from "../../../helpers/form/getFormControlValueAsStringIfDefined.js";
-import { useMemo as M, useState as j, useContext as A, useCallback as I } from "react";
-import { focusableElements as B } from "../../../helpers/dom/focusableElements.js";
-import { PopoverContext as O } from "../../Popover/hooks/usePopover.js";
-import { IressText as v } from "../../Text/Text.js";
-import { c as L } from "../../../cx-DN21T1EH.js";
-import { selectTags as F } from "./SelectTags.styles.js";
-import { IressTag as T } from "../../Tag/Tag.js";
-import "../../Tag/Tag.styles.js";
-import "../../Tag/TagInput/TagInput.js";
-import { IressMenu as V } from "../../Menu/Menu.js";
-import "../../Menu/Menu.styles.js";
-import "../../Divider/Divider.styles.js";
-import { GlobalCSSClass as C } from "../../../enums.js";
-import { IressMenuItem as D } from "../../Menu/MenuItem/MenuItem.js";
-import { IressPopover as G } from "../../Popover/Popover.js";
-import "../../Popover/Popover.styles.js";
-import "../../Popover/InputPopover/InputPopover.js";
-import { I as R } from "../../../Button-mmhMLwp9.js";
-import "../../Button/CloseButton/CloseButton.js";
-import { IressIcon as W } from "../../Icon/Icon.js";
-import "../../Icon/Icon.styles.js";
-import "../../Inline/Inline.styles.js";
-import { IressInline as $ } from "../../Inline/Inline.js";
-const S = (r, s) => {
-  if (!r?.api.elements.reference || !s)
-    return;
-  const a = r.getFocusableActivator(), n = B(
-    r.api.elements.reference
-  ).filter((l) => l !== a);
-  if (n.length < 1)
-    a?.focus();
-  else {
-    const l = n.indexOf(s.currentTarget), t = n.filter(
-      (m) => m !== s.currentTarget
-    ), i = Math.max(l - 1, 0);
-    !t[i] && t[0] ? t[0].focus() : t[0] ? t[i].focus() : a?.focus();
-  }
-}, q = ({
-  "data-testid": r,
-  limit: s = 5,
-  onDelete: a,
-  onDeleteAll: n,
-  onToggleActions: l,
-  selectedArray: t,
-  selectedOptionsText: i
-}) => {
-  const [m, u] = j(!1), c = A(O), p = F(), h = I(
-    (e, f) => {
-      a?.(
-        t.find((x) => x.label === e),
-        f
-      ), f.stopPropagation(), S(c, f);
-    },
-    [a, c, t]
-  ), g = I(
-    (e) => {
-      n?.(e), c?.getFocusableActivator()?.focus();
-    },
-    [n, c]
-  );
-  return m || !s || t.length <= s ? t.map((e) => /* @__PURE__ */ o(
-    T,
-    {
-      className: p.tag,
-      "data-testid": b(r, "tag"),
-      deleteButtonText: `Delete ${e.label}`,
-      onDelete: h,
-      children: e.label
-    },
-    E(e.value) ?? e.label
-  )) : /* @__PURE__ */ o(
-    T,
-    {
-      className: p.tag,
-      "data-testid": b(r, "tag"),
-      deleteButton: /* @__PURE__ */ o(
-        G,
-        {
-          activator: /* @__PURE__ */ o(R, { mode: "tertiary", children: /* @__PURE__ */ o(
-            W,
-            {
-              name: "chevron-circle-down",
-              screenreaderText: "Actions"
-            }
-          ) }),
-          onActivated: () => l?.(!0),
-          onClick: (e) => {
-            e.stopPropagation(), S(c, e);
-          },
-          onDeactivated: () => l?.(!1),
-          children: /* @__PURE__ */ N(V, { children: [
-            /* @__PURE__ */ o(D, { onClick: () => u(!0), children: "Expand all" }),
-            /* @__PURE__ */ o(D, { onClick: g, children: "Delete all" })
-          ] })
-        }
-      ),
-      children: w(t, i)
-    }
-  );
-}, xe = ({
-  append: r = "",
-  className: s,
-  "data-testid": a,
-  id: n,
-  limit: l = 5,
-  onDelete: t,
-  onDeleteAll: i,
-  onToggleActions: m,
-  placeholder: u,
-  prepend: c,
-  selected: p,
-  selectedOptionsText: h = "{{numOptions}} selected",
-  ...g
-}) => {
-  const e = M(() => k(p), [p]), f = !e.length && u, x = !!e.length, P = r == null || r === "" || !r, d = F({ showDefaultChevron: P });
-  return /* @__PURE__ */ N(
-    v,
-    {
-      ...g,
-      id: n,
-      tabIndex: 0,
-      className: L(
-        s,
-        d.root,
-        C.FormElementInner,
-        C.RichSelectTags
-      ),
-      children: [
-        c && /* @__PURE__ */ o("span", { className: d.prepend, children: c }),
-        f && /* @__PURE__ */ o(v, { className: d.placeholder, children: u }),
-        x && /* @__PURE__ */ o($, { gap: "sm", className: d.tagsList, children: /* @__PURE__ */ o(
-          q,
-          {
-            "data-testid": a,
-            limit: l,
-            onDelete: t,
-            onDeleteAll: i,
-            onToggleActions: m,
-            selectedArray: e,
-            selectedOptionsText: h
-          }
-        ) }),
-        /* @__PURE__ */ o(
-          "button",
-          {
-            className: d.append,
-            role: "combobox",
-            "aria-label": "Select options",
-            children: r
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  xe as IressSelectTags
-};

package/dist/components/RichSelect/SelectTags/SelectTags.styles.js

@@ -1,86 +0,0 @@
-import { s as o } from "../../../sva-OmxClA9g.js";
-const r = o({
-  slots: ["root", "placeholder", "prepend", "append", "tag", "tagsList"],
-  base: {
-    root: {
-      display: "flex",
-      alignItems: "center",
-      width: "[100%]",
-      paddingBlock: "spacing.1",
-      paddingInline: "spacing.2",
-      minHeight: "input.height",
-      alignSelf: "auto",
-      backgroundColor: "colour.neutral.10",
-      border: "input",
-      borderRadius: "radius.system.form",
-      color: "colour.neutral.80",
-      textAlign: "left",
-      fontWeight: "normal",
-      cursor: "pointer",
-      transition: "[all 0.3s ease]",
-      "&:hover": {
-        backgroundColor: "colour.neutral.10",
-        color: "colour.neutral.80"
-      },
-      "&:focus": {
-        backgroundColor: "colour.neutral.10",
-        borderColor: "colour.primary.fill",
-        layerStyle: "elevation.focus",
-        outline: "[none]"
-      },
-      "&:focus-within": {
-        backgroundColor: "colour.neutral.10",
-        borderColor: "colour.primary.fill",
-        layerStyle: "elevation.focus",
-        outline: "[none]"
-      },
-      "&:has(.tag)": {
-        cursor: "inherit",
-        "& .append": {
-          cursor: "pointer"
-        }
-      }
-    },
-    placeholder: {
-      color: "colour.neutral.60",
-      textAlign: "left",
-      flex: "1",
-      display: "flex",
-      alignItems: "center",
-      textStyle: "typography.body.md"
-    },
-    prepend: {
-      display: "inline-flex",
-      alignItems: "center",
-      gap: "spacing.0",
-      color: "colour.neutral.70"
-    },
-    append: {},
-    tag: {
-      display: "inline-flex"
-    },
-    tagsList: {
-      overflow: "hidden",
-      height: "[100%]"
-    }
-  },
-  variants: {
-    showDefaultChevron: {
-      true: {
-        root: {
-          alignSelf: "center",
-          position: "relative"
-        },
-        append: {
-          selectChevron: !0
-        }
-      },
-      false: {
-        append: {}
-      }
-    }
-  }
-});
-export {
-  r as selectTags
-};

package/dist/components/RichSelect/components/SelectActivator.js

@@ -1,65 +0,0 @@
-import { jsx as b } from "react/jsx-runtime";
-import { toArray as j } from "../../../helpers/formatting/toArray.js";
-import { IressSelectLabel as w } from "../SelectLabel/SelectLabel.js";
-import { IressSelectTags as y } from "../SelectTags/SelectTags.js";
-import { getValueAsEvent as g } from "../../../helpers/form/getValueAsEvent.js";
-const q = ({
-  append: l,
-  async: a,
-  id: f,
-  error: u,
-  loading: x,
-  multiSelect: D,
-  onChange: s,
-  placeholder: c,
-  prepend: m,
-  renderLabel: i,
-  selectedOptionsText: n,
-  setShow: A,
-  setValue: t,
-  show: I,
-  value: r
-}) => i ? i({
-  close: () => A(!1),
-  error: u,
-  loading: x,
-  setValue: t,
-  show: I,
-  value: r
-}) : D ? /* @__PURE__ */ b(
-  y,
-  {
-    append: l,
-    id: f,
-    onDelete: (o) => {
-      if (!o) return;
-      const e = j(r).filter(
-        (S) => S.label !== o.label
-      );
-      t(e), s?.(g(e), e);
-    },
-    onDeleteAll: () => {
-      const o = [];
-      t(o), s?.(g([]), o);
-    },
-    onToggleActions: () => A(!1),
-    placeholder: c,
-    prepend: m,
-    selected: r,
-    selectedOptionsText: n
-  }
-) : /* @__PURE__ */ b(
-  w,
-  {
-    append: l,
-    id: f,
-    placeholder: c,
-    prepend: m,
-    role: a ? void 0 : "combobox",
-    selected: r,
-    selectedOptionsText: n
-  }
-);
-export {
-  q as SelectActivator
-};

package/dist/components/RichSelect/components/SelectHiddenInput.js

@@ -1,29 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import { propagateTestid as a } from "../../../helpers/utility/propagateTestid.js";
-import { forwardRef as m } from "react";
-const f = ({
-  "data-testid": d,
-  getValuesString: t,
-  name: e,
-  renderHiddenInput: o,
-  required: p,
-  value: n
-}, i) => o ? o({
-  getValuesString: t,
-  value: n,
-  ref: i,
-  required: p
-}) : /* @__PURE__ */ r(
-  "input",
-  {
-    "data-testid": a(d, "hidden-input"),
-    name: e,
-    type: "hidden",
-    value: t(),
-    ref: i,
-    required: p
-  }
-), h = m(f);
-export {
-  h as SelectHiddenInput
-};

package/dist/components/RichSelect/components/SelectOptions.js

@@ -1,208 +0,0 @@
-import { jsx as s, jsxs as F, Fragment as W } from "react/jsx-runtime";
-import { getValueAsEvent as E } from "../../../helpers/form/getValueAsEvent.js";
-import { useCallback as O, useRef as j, useId as k, useEffect as P } from "react";
-import { IressSelectSearch as $ } from "../SelectSearch/SelectSearch.js";
-import { toArray as D } from "../../../helpers/formatting/toArray.js";
-import { IressSelectMenu as y } from "../SelectMenu/SelectMenu.js";
-import { IressAlert as T } from "../../Alert/Alert.js";
-import "../../Alert/Alert.styles.js";
-import { IressSelectSearchInput as z } from "../SelectSearchInput/SelectSearchInput.js";
-import { IressSelectHeading as B } from "../SelectHeading/SelectHeading.js";
-import "../../Menu/Menu.js";
-import "../../Menu/Menu.styles.js";
-import { IressMenuDivider as G } from "../../Menu/MenuDivider/MenuDivider.js";
-import "../../Menu/MenuItem/MenuItem.js";
-import "../../Popover/hooks/usePopover.js";
-const H = ({
-  minSearchLength: e,
-  multiSelect: n,
-  onChange: a,
-  query: I,
-  results: o,
-  shouldShowInstructions: d,
-  shouldShowNoResults: c,
-  value: t
-}) => /* @__PURE__ */ s(
-  y,
-  {
-    heading: n ? "Search results" : void 0,
-    items: o,
-    multiSelect: n,
-    noResults: (() => {
-      if (I) {
-        if (d)
-          return `Type at least ${e} character${e === 1 ? "" : "s"} to search`;
-        if (c)
-          return "No results found";
-      }
-    })(),
-    onChange: a,
-    selected: t,
-    hideSelectedItems: n
-  }
-), J = ({ error: e }) => e ? /* @__PURE__ */ s(T, { className: "iress-m--sm", status: "danger", children: typeof e == "string" ? e : /* @__PURE__ */ F(W, { children: [
-  "An unknown error occurred.",
-  /* @__PURE__ */ s("br", {}),
-  " Please contact support if the error persists."
-] }) }) : null, K = ({
-  autoHighlight: e,
-  error: n,
-  loading: a,
-  minSearchLength: I,
-  multiSelect: o,
-  onChange: d,
-  onClear: c,
-  query: t,
-  results: f,
-  setQuery: p,
-  show: A,
-  value: i,
-  shouldShowInstructions: R,
-  shouldShowNoResults: S
-}) => {
-  const r = D(i).map(
-    (l) => {
-      const { formattedLabel: g, ...b } = l;
-      return b;
-    }
-  ), u = !n && (!!f?.length || t && !a), m = !!r.length && o, N = u && m, h = j(null), x = k();
-  P(() => {
-    A || p?.("");
-  }, [A, p]);
-  const v = m ? r.length + 1 : 0;
-  return /* @__PURE__ */ F(
-    $,
-    {
-      activator: /* @__PURE__ */ s(
-        z,
-        {
-          "aria-label": "Search",
-          loading: a,
-          onChange: (l) => p?.(l.target.value),
-          ref: h,
-          placeholder: "Search and select",
-          value: t
-        }
-      ),
-      autoHighlight: e,
-      focusStartIndex: e ? t && u ? v : m ? 1 : 0 : void 0,
-      children: [
-        m && /* @__PURE__ */ s(
-          y,
-          {
-            "aria-labelledby": x,
-            heading: /* @__PURE__ */ s(
-              B,
-              {
-                clearAll: !0,
-                onClearAll: (l) => {
-                  c?.(l), h.current?.focus();
-                },
-                children: /* @__PURE__ */ F("h2", { id: x, children: [
-                  "Selected (",
-                  r.length,
-                  ")"
-                ] })
-              }
-            ),
-            items: r,
-            multiSelect: o,
-            onChange: d,
-            selected: i
-          }
-        ),
-        N && /* @__PURE__ */ s(G, {}),
-        u && /* @__PURE__ */ s(
-          H,
-          {
-            minSearchLength: I,
-            multiSelect: o,
-            onChange: d,
-            query: t,
-            results: f,
-            value: i,
-            shouldShowInstructions: R,
-            shouldShowNoResults: S
-          }
-        ),
-        /* @__PURE__ */ s(J, { error: n })
-      ]
-    }
-  );
-}, oe = ({
-  autoHighlight: e,
-  debouncedQuery: n,
-  error: a,
-  initialOptions: I,
-  loading: o,
-  minSearchLength: d,
-  multiSelect: c,
-  onChange: t,
-  options: f,
-  query: p,
-  renderOptions: A,
-  results: i,
-  setQuery: R,
-  setShow: S,
-  setValue: r,
-  show: u,
-  shouldShowInstructions: m,
-  shouldShowNoResults: N,
-  value: h
-}) => {
-  const x = typeof f == "function", v = I ?? (x ? [] : f), M = i.length ? i : v, C = O(
-    (g) => {
-      r(g), t?.(E(g), g), c || S(!1);
-    },
-    [S, r, t, c]
-  ), l = O(
-    (g) => {
-      g.stopPropagation();
-      const b = [];
-      r(b), t?.(E([]), b);
-    },
-    [r, t]
-  );
-  return A ? A({
-    close: () => S(!1),
-    debouncedQuery: n,
-    error: a,
-    loading: o,
-    query: p,
-    results: M,
-    setValue: r,
-    setQuery: R,
-    show: u,
-    value: h
-  }) : x ? /* @__PURE__ */ s(
-    K,
-    {
-      autoHighlight: e,
-      error: a,
-      loading: o,
-      minSearchLength: d,
-      multiSelect: c,
-      onChange: C,
-      onClear: l,
-      query: p,
-      results: i,
-      setQuery: R,
-      show: u,
-      value: h,
-      shouldShowInstructions: m,
-      shouldShowNoResults: N
-    }
-  ) : /* @__PURE__ */ s(
-    y,
-    {
-      items: M,
-      multiSelect: c,
-      onChange: C,
-      selected: h,
-      selectedFirst: !0
-    }
-  );
-};
-export {
-  oe as SelectOptions
-};

package/dist/components/RichSelect/hooks/useRichSelectState.js

@@ -1,18 +0,0 @@
-import { toArray as a } from "../../../helpers/formatting/toArray.js";
-import { useControlledState as o } from "../../../hooks/useControlledState.js";
-import { getFormControlValueAsString as u } from "../../../helpers/form/getFormControlValueAsString.js";
-const i = (r) => {
-  const t = o(r);
-  return {
-    ...t,
-    getLabelsArray: () => a(t.value).map((e) => e.label),
-    getLabelsString: (e = ",") => a(t.value).map((l) => l.label).join(e),
-    getValuesArray: () => a(t.value).map(
-      (e) => u(e.value)
-    ),
-    getValuesString: () => a(t.value).map((e) => e.value).join(",")
-  };
-};
-export {
-  i as useRichSelectState
-};

package/dist/components/RichSelect/index.js

@@ -1,22 +0,0 @@
-import { useRichSelectState as t } from "./hooks/useRichSelectState.js";
-import { I as s } from "../../Autocomplete-C5ubHBTi.js";
-import { IressSelectBody as S } from "./SelectBody/SelectBody.js";
-import { IressSelectCreate as p } from "./SelectCreate/SelectCreate.js";
-import { IressSelectHeading as f } from "./SelectHeading/SelectHeading.js";
-import { IressSelectLabel as x } from "./SelectLabel/SelectLabel.js";
-import { IressSelectMenu as h } from "./SelectMenu/SelectMenu.js";
-import { IressSelectSearch as n } from "./SelectSearch/SelectSearch.js";
-import { IressSelectSearchInput as d } from "./SelectSearchInput/SelectSearchInput.js";
-import { IressSelectTags as R } from "./SelectTags/SelectTags.js";
-export {
-  s as IressRichSelect,
-  S as IressSelectBody,
-  p as IressSelectCreate,
-  f as IressSelectHeading,
-  x as IressSelectLabel,
-  h as IressSelectMenu,
-  n as IressSelectSearch,
-  d as IressSelectSearchInput,
-  R as IressSelectTags,
-  t as useRichSelectState
-};

package/dist/components/Select/SelectOption/SelectOption.js

@@ -1,10 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import { s as e } from "../../../factory-oPXoMw9H.js";
-import { getFormControlValueAsString as s } from "../../../helpers/form/getFormControlValueAsString.js";
-const l = ({
-  value: o,
-  ...t
-}) => /* @__PURE__ */ r(e.option, { ...t, value: s(o) });
-export {
-  l as IressSelectOption
-};

package/dist/components/Select/components/SelectControl.js

@@ -1,41 +0,0 @@
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import { forwardRef as S } from "react";
-import { GlobalCSSClass as t } from "../../../enums.js";
-import { getFormControlValueAsStringIfDefined as m } from "../../../helpers/form/getFormControlValueAsStringIfDefined.js";
-import { select as n } from "../Select.styles.js";
-import { c as x } from "../../../css-fGu_jDvv.js";
-import { c as l } from "../../../cx-DN21T1EH.js";
-import "../../Input/Input.js";
-import { input as v } from "../../Input/Input.styles.js";
-const w = ({
-  children: s,
-  className: a,
-  defaultValue: c,
-  placeholder: o,
-  value: i,
-  width: r,
-  ...f
-}, p) => {
-  const u = n({ width: r }), C = n.raw({ width: r });
-  return /* @__PURE__ */ e("div", { className: l(u.control, t.FormElementInner), children: /* @__PURE__ */ d(
-    "select",
-    {
-      ...f,
-      className: l(
-        x(C.element, v.raw().formControl),
-        a,
-        t.FormElementInner
-      ),
-      defaultValue: m(c),
-      ref: p,
-      value: m(i),
-      children: [
-        o && /* @__PURE__ */ e("option", { value: "", children: o }),
-        s
-      ]
-    }
-  ) });
-}, h = S(w);
-export {
-  h as SelectControl
-};

package/dist/components/Select/components/SelectReadonly.js

@@ -1,39 +0,0 @@
-import { jsx as f } from "react/jsx-runtime";
-import { forwardRef as l, useMemo as c } from "react";
-import { propagateTestid as u } from "../../../helpers/utility/propagateTestid.js";
-import { mapNodesToSelectOptions as R } from "../helpers/nodesToSelectOptions.js";
-import { IressReadonly as S } from "../../Readonly/Readonly.js";
-import "../../Readonly/Readonly.styles.js";
-const b = ({
-  children: t,
-  className: e,
-  "data-testid": r,
-  name: m,
-  required: p,
-  width: s,
-  value: o,
-  ...i
-}, n) => {
-  const a = c(() => String(
-    R(t).find(
-      (d) => d.value === o
-    )?.label ?? ""
-  ), [t, o]);
-  return /* @__PURE__ */ f(
-    S,
-    {
-      ...i,
-      className: e,
-      "data-testid": u(r, "pseudo"),
-      name: m,
-      ref: n,
-      required: p,
-      width: s,
-      value: o,
-      children: a
-    }
-  );
-}, C = l(b);
-export {
-  C as SelectReadonly
-};