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

package/dist/components/Select/SelectMenu/SelectMenu.js

@@ -0,0 +1,195 @@
+import { jsxs as I, jsx as v } from "react/jsx-runtime";
+import { useMemo as L, useCallback as T, createElement as $ } from "react";
+import { IressMenu as O } from "../../Menu/Menu.js";
+import "../../Menu/Menu.styles.js";
+import "../../Menu/MenuItem/MenuItem.styles.js";
+import "../../Menu/MenuGroup/MenuGroup.styles.js";
+import "../../Menu/MenuDivider/MenuDivider.js";
+import { IressMenuGroup as R } from "../../Menu/MenuGroup/MenuGroup.js";
+import "../../Menu/MenuItem/MenuItem.js";
+import { IressMenuText as j } from "../../Menu/MenuText/MenuText.js";
+import { propagateTestid as C } from "../../../helpers/utility/propagateTestid.js";
+import { toArray as b } from "../../../helpers/formatting/toArray.js";
+import { getFormControlValueAsStringIfDefined as N } from "../../../helpers/form/getFormControlValueAsStringIfDefined.js";
+import { getFormControlValueAsString as g } from "../../../helpers/form/getFormControlValueAsString.js";
+import { getValueFromLabelValues as V } from "../../../helpers/label-value/getValueFromLabelValues.js";
+import { IressSelectMenuItem as x } from "./SelectMenuItem.js";
+import { useIdIfNeeded as D } from "../../../hooks/useIdIfNeeded.js";
+import { selectMenu as E } from "./SelectMenu.styles.js";
+import { GlobalCSSClass as H } from "../../../enums.js";
+import { c as q } from "../../../cx-DN21T1EH.js";
+import { IressSelectHeading as z } from "../SelectHeading/SelectHeading.js";
+const B = ({
+  heading: s,
+  hideSelectedItems: t,
+  items: o = [],
+  limitDesktop: l,
+  limitMobile: e,
+  multiSelect: r,
+  noResults: c,
+  onChange: u,
+  role: f = "listbox",
+  selected: h,
+  selectedFirst: S,
+  ...i
+}) => {
+  const k = `${D({ id: i.id })}--label`, p = L(
+    () => V(h, r),
+    [r, h]
+  ), y = L(() => {
+    let n = S ? J(o, p) : o;
+    if (t) {
+      const d = b(p);
+      n = n.map((a) => {
+        if (a.children && a.children.length > 0) {
+          const m = a.children.filter(
+            (M) => !d.includes(
+              N(M.value) ?? M.label
+            )
+          );
+          return m.length > 0 ? { ...a, children: m } : null;
+        }
+        return d.includes(
+          N(a.value) ?? a.label
+        ) ? null : a;
+      }).filter((a) => a !== null);
+    }
+    return K(n, l, e);
+  }, [
+    t,
+    o,
+    l,
+    e,
+    p,
+    S
+  ]), A = y.length === 0, G = T(
+    (n) => {
+      const d = U(
+        o,
+        h,
+        n ?? void 0
+      );
+      u?.(
+        r ? d : d[0]
+      );
+    },
+    [o, r, u, h]
+  ), F = E();
+  return /* @__PURE__ */ I(
+    O,
+    {
+      ...i,
+      "aria-labelledby": typeof s == "string" ? k : i["aria-labelledby"],
+      multiSelect: r,
+      onChange: G,
+      role: f,
+      selected: p,
+      className: q(
+        F.root,
+        H.SelectMenu,
+        i.className
+      ),
+      children: [
+        typeof s == "string" ? /* @__PURE__ */ v(z, { id: k, children: s }) : s,
+        y.map((n, d) => n.children && n.children.length > 0 ? /* @__PURE__ */ v(
+          R,
+          {
+            label: n.label,
+            "data-testid": C(
+              i?.["data-testid"],
+              "menu-group"
+            ),
+            divider: n.divider,
+            children: n.children.map((a, m) => /* @__PURE__ */ $(
+              x,
+              {
+                ...a,
+                "data-testid": C(
+                  i?.["data-testid"],
+                  "menu-item"
+                ),
+                key: `${g(
+                  a.value ?? a.label
+                )}-${m}`
+              }
+            ))
+          },
+          `group-${g(
+            n.value ?? n.label
+          )}-${d}`
+        ) : /* @__PURE__ */ $(
+          x,
+          {
+            ...n,
+            "data-testid": C(
+              i?.["data-testid"],
+              "menu-item"
+            ),
+            key: `${g(
+              n.value ?? n.label
+            )}-${d}`
+          }
+        )),
+        A && (typeof c == "string" ? /* @__PURE__ */ v(j, { children: c }) : c)
+      ]
+    }
+  );
+};
+B.displayName = "IressSelectMenu";
+const J = (s, t) => {
+  const o = b(t), l = [], e = [];
+  for (const r of s)
+    r.children && r.children.length > 0 ? r.children.some(
+      (u) => o.includes(u.value ?? u.label)
+    ) ? l.push(r) : e.push(r) : o.includes(r.value ?? r.label) ? l.push(r) : e.push(r);
+  return l.length && e.length ? l.concat([{ label: "", value: "", divider: !0 }]).concat(e) : l.concat(e);
+}, K = (s, t, o) => {
+  const l = { mobileCount: 0, desktopCount: 0 }, e = [];
+  for (const r of s) {
+    if (t && l.desktopCount >= t) break;
+    if (r.children && r.children.length > 0) {
+      const f = Q(
+        r.children,
+        l,
+        t,
+        o
+      );
+      f.length > 0 && e.push({ ...r, children: f });
+    } else
+      e.push({
+        ...r,
+        hiddenOnMobile: o ? l.mobileCount >= o : !1
+      }), l.mobileCount++, l.desktopCount++;
+  }
+  return e;
+}, Q = (s, t, o, l) => {
+  const e = [];
+  for (const r of s) {
+    if (o && t.desktopCount >= o) break;
+    e.push({
+      ...r,
+      hiddenOnMobile: l ? t.mobileCount >= l : !1
+    }), t.mobileCount++, t.desktopCount++;
+  }
+  return e;
+}, U = (s, t, o) => {
+  const l = b(t);
+  return b(o).map((e) => W(s, l, e)).filter((e) => e !== void 0);
+}, W = (s, t, o) => {
+  let l = s?.find(
+    (e) => e.value === o || e.value === void 0 && e.label === o
+  );
+  if (!l) {
+    for (const e of s)
+      if (e.children && e.children.length > 0 && (l = e.children.find(
+        (r) => r.value === o || r.value === void 0 && r.label === o
+      ), l))
+        break;
+  }
+  return l ?? t.find(
+    (e) => e.value === o || e.value === void 0 && e.label === o
+  );
+};
+export {
+  B as IressSelectMenu
+};

package/dist/components/Select/SelectMenu/SelectMenu.styles.js

@@ -0,0 +1,16 @@
+import { s as t } from "../../../sva-CsHRIRDW.js";
+const o = t({
+  slots: ["root"],
+  base: {
+    root: {
+      // Performance: CSS containment limits style recalculation scope
+      contain: "layout style paint",
+      width: "[100%]"
+    }
+  },
+  variants: {},
+  defaultVariants: {}
+});
+export {
+  o as selectMenu
+};

package/dist/components/Select/SelectMenu/SelectMenuItem.d.ts

@@ -0,0 +1,5 @@
+import { IressSelectMenuItemProps } from './SelectMenu';
+export declare const IressSelectMenuItem: {
+    ({ className, divider, formattedLabel, formattedMeta, hiddenOnMobile, label, meta, value, append, canToggle, onClick, onKeyDown, prepend, role, selected, "data-testid": dataTestId, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, id, }: IressSelectMenuItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Select/SelectMenu/SelectMenuItem.js

@@ -0,0 +1,67 @@
+import { jsx as t, jsxs as v } from "react/jsx-runtime";
+import { GlobalCSSClass as j } from "../../../enums.js";
+import "../../Menu/Menu.js";
+import "../../Menu/Menu.styles.js";
+import "../../Menu/MenuItem/MenuItem.styles.js";
+import "../../Menu/MenuGroup/MenuGroup.styles.js";
+import { IressMenuDivider as C } from "../../Menu/MenuDivider/MenuDivider.js";
+import "../../Menu/MenuGroup/MenuGroup.js";
+import { IressMenuItem as N } from "../../Menu/MenuItem/MenuItem.js";
+import "../../Menu/MenuText/MenuText.js";
+import { c as g } from "../../../cx-DN21T1EH.js";
+import { IressText as w } from "../../Text/Text.js";
+const B = ({
+  className: a,
+  divider: i,
+  formattedLabel: o,
+  formattedMeta: s,
+  hiddenOnMobile: m,
+  label: e,
+  meta: l,
+  value: d,
+  append: p,
+  canToggle: c,
+  onClick: n,
+  onKeyDown: b,
+  prepend: u,
+  role: y,
+  selected: I,
+  "data-testid": f,
+  "aria-describedby": x,
+  "aria-label": M,
+  "aria-labelledby": S,
+  id: h
+  // Only the explicitly listed properties are passed through; any extended LabelValueMeta properties are excluded by explicit filtering
+}) => {
+  if (i)
+    return /* @__PURE__ */ t(C, {});
+  const r = s ?? l;
+  return /* @__PURE__ */ v(
+    N,
+    {
+      append: p,
+      canToggle: c,
+      className: g(a, j.SelectMenuItem),
+      hideBelow: m ? "md" : void 0,
+      onClick: n,
+      onKeyDown: b,
+      prepend: u,
+      role: y,
+      selected: I,
+      value: d ?? e,
+      "data-testid": f,
+      "aria-describedby": x,
+      "aria-label": M,
+      "aria-labelledby": S,
+      id: h,
+      children: [
+        o ?? e,
+        r && /* @__PURE__ */ t(w, { textStyle: "typography.body.sm", color: "colour.neutral.70", children: r })
+      ]
+    }
+  );
+};
+B.displayName = "IressSelectMenuItem";
+export {
+  B as IressSelectMenuItem
+};

package/dist/components/Select/SelectSearch/SelectSearch.d.ts

@@ -0,0 +1,6 @@
+import { IressInputPopoverProps } from '../../Popover';
+export type IressSelectSearchProps = Omit<IressInputPopoverProps, 'displayMode' | 'show' | 'width'>;
+export declare const IressSelectSearch: {
+    ({ className, contentClassName, contentStyle, onKeyDown, ...restProps }: IressSelectSearchProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Select/SelectSearch/SelectSearch.js

@@ -0,0 +1,45 @@
+import { jsx as l } from "react/jsx-runtime";
+import { c as s } from "../../../cx-DN21T1EH.js";
+import { selectSearch as n } from "./SelectSearch.styles.js";
+import { handlePopoverTabKey as S } from "../../Popover/helpers/handlePopoverTabKey.js";
+import { GlobalCSSClass as a } from "../../../enums.js";
+import "../../Popover/Popover.js";
+import "../../Popover/Popover.styles.js";
+import { IressInputPopover as f } from "../../Popover/InputPopover/InputPopover.js";
+import { usePopover as h } from "../../Popover/hooks/usePopover.js";
+import "react";
+import "../../Popover/hooks/useFloatingPopover.js";
+const d = ({
+  className: m,
+  contentClassName: c,
+  contentStyle: o,
+  onKeyDown: p,
+  ...i
+}) => {
+  const e = h(), r = n();
+  return /* @__PURE__ */ l(
+    f,
+    {
+      ...i,
+      className: s(r.root, m, a.SelectSearch),
+      contentStyle: {
+        ...o,
+        className: s(
+          r.content,
+          c,
+          a.SelectSearchContent,
+          o?.className
+        )
+      },
+      displayMode: "inline",
+      onKeyDown: (t) => {
+        p?.(t), e && S(e, t);
+      },
+      show: !0
+    }
+  );
+};
+d.displayName = "IressSelectSearch";
+export {
+  d as IressSelectSearch
+};

package/dist/components/Select/SelectSearch/SelectSearch.styles.js

@@ -0,0 +1,28 @@
+import { s as e } from "../../../sva-CsHRIRDW.js";
+const t = e({
+  slots: ["root", "content"],
+  base: {
+    root: {
+      borderWidth: "0",
+      "&&": {
+        display: "flex",
+        flexDirection: "column"
+      }
+    },
+    content: {
+      overflow: "hidden",
+      display: "flex",
+      flexDirection: "column",
+      border: "[none]",
+      "&:has(.ids-select-body)": {
+        overflow: "hidden",
+        "& .ids-select-body": {
+          maxHeight: "[none]"
+        }
+      }
+    }
+  }
+});
+export {
+  t as selectSearch
+};

package/dist/components/Select/SelectSearchInput/SelectSearchInput.js

@@ -0,0 +1,47 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as u, useRef as I, useImperativeHandle as S } from "react";
+import { c as h } from "../../../cx-DN21T1EH.js";
+import { selectSearchInput as v } from "./SelectSearchInput.styles.js";
+import { IressIcon as b } from "../../Icon/Icon.js";
+import "../../Icon/Icon.styles.js";
+import "../../Icon/IconProvider.js";
+import { IressInput as d } from "../../Input/Input.js";
+import "../../Input/Input.styles.js";
+import { usePopoverItem as x } from "../../Popover/hooks/usePopoverItem.js";
+import { GlobalCSSClass as P } from "../../../enums.js";
+const R = u(
+  ({
+    "aria-label": s,
+    autoComplete: m = "off",
+    className: a,
+    placeholder: e = "Search",
+    prepend: p = /* @__PURE__ */ t(b, { name: "search" }),
+    ...c
+  }, n) => {
+    const r = I(null), { isActiveInPopover: i, ...o } = x(), l = v({ isActiveInPopover: i });
+    return S(n, () => r.current), /* @__PURE__ */ t(
+      d,
+      {
+        ...c,
+        ...o,
+        tabIndex: void 0,
+        "aria-label": s ?? e ?? "Search",
+        autoComplete: m,
+        className: h(
+          l.root,
+          a,
+          P.SelectSearchInput
+        ),
+        placeholder: e,
+        prepend: p,
+        ref: (f) => {
+          r.current = f, o?.ref?.(r.current?.input ?? null);
+        }
+      }
+    );
+  }
+);
+R.displayName = "IressSelectSearchInput";
+export {
+  R as IressSelectSearchInput
+};

package/dist/components/Select/SelectSearchInput/SelectSearchInput.styles.js

@@ -0,0 +1,26 @@
+import { s as o } from "../../../sva-CsHRIRDW.js";
+const r = o({
+  slots: ["root"],
+  base: {
+    root: {
+      // Performance: CSS containment limits style recalculation scope
+      contain: "layout style paint",
+      zIndex: "[100]",
+      overflow: "hidden",
+      "& > div:first-child": {
+        borderRadius: "radius.0",
+        borderWidth: "0px",
+        borderBottomWidth: "1px",
+        borderBottomStyle: "solid",
+        "--iress-shadow-focus": "inset 0 -1px 0 0 {colors.colour.neutral.90}"
+      },
+      "&:has(input:focus, textarea:focus) > *": {
+        backgroundColor: "transparent"
+      }
+    }
+  },
+  variants: {}
+});
+export {
+  r as selectSearchInput
+};

package/dist/components/Select/SelectTags/SelectTags.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import { IressTextProps } from '../../Text';
+import { IressSelectActivatorProps } from '../components/SelectActivator';
+import { LabelValueMeta } from '../../../interfaces';
+export interface IressSelectTagsProps extends Omit<IressSelectActivatorProps, 'width'>, Omit<IressTextProps, 'element' | 'width'> {
+    /**
+     * Append content.
+     */
+    append?: ReactNode;
+    /**
+     * The id of the select element.
+     */
+    id?: string;
+    /**
+     * Emitted when a tag is deleted.
+     */
+    onDelete?: (item?: LabelValueMeta, e?: React.SyntheticEvent<HTMLButtonElement>) => void;
+    /**
+     * Emitted when the combined tag delete button is clicked.
+     */
+    onDeleteAll?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
+    /**
+     * Emitted when actions are toggled.
+     */
+    onToggleActions?: (open?: boolean) => void;
+    /**
+     * Limit of tags to display before shortening to `selectedOptionsText`
+     * @default 5
+     */
+    limit?: number;
+}
+export declare const IressSelectTags: {
+    ({ append, className, "data-testid": dataTestId, id, limit, onDelete, onDeleteAll, onToggleActions, placeholder, prepend, selected, selectedOptionsText, ...restProps }: IressSelectTagsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Select/SelectTags/SelectTags.js

@@ -0,0 +1,174 @@
+import { jsxs as N, jsx as o } from "react/jsx-runtime";
+import { propagateTestid as I } 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, useCallback as x } from "react";
+import { focusableElements as B } from "../../../helpers/dom/focusableElements.js";
+import { IressText as v } from "../../Text/Text.js";
+import { c as O } 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 A } from "../../Menu/Menu.js";
+import "../../Menu/Menu.styles.js";
+import "../../Menu/MenuItem/MenuItem.styles.js";
+import "../../Menu/MenuGroup/MenuGroup.styles.js";
+import "../../Menu/MenuDivider/MenuDivider.js";
+import "../../Menu/MenuGroup/MenuGroup.js";
+import { IressMenuItem as D } from "../../Menu/MenuItem/MenuItem.js";
+import "../../Menu/MenuText/MenuText.js";
+import { IressPopover as L } from "../../Popover/Popover.js";
+import "../../Popover/Popover.styles.js";
+import "../../Popover/InputPopover/InputPopover.js";
+import { usePopover as V } from "../../Popover/hooks/usePopover.js";
+import "../../Popover/hooks/useFloatingPopover.js";
+import { I as G } from "../../../Button-C0p8bEXn.js";
+import "../../Button/CloseButton/CloseButton.js";
+import { IressIcon as W } from "../../Icon/Icon.js";
+import "../../Icon/Icon.styles.js";
+import "../../Icon/IconProvider.js";
+import { GlobalCSSClass as S } from "../../../enums.js";
+import "../../Inline/Inline.styles.js";
+import { IressInline as $ } from "../../Inline/Inline.js";
+const C = (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 = V(), p = F(), g = x(
+    (e, f) => {
+      a?.(
+        t.find((b) => b.label === e),
+        f
+      ), f.stopPropagation(), C(c, f);
+    },
+    [a, c, t]
+  ), h = x(
+    (e) => {
+      n?.(e), c?.getFocusableActivator()?.focus();
+    },
+    [n, c]
+  );
+  return m && t.length || !s || t.length <= s ? t.map((e) => /* @__PURE__ */ o(
+    T,
+    {
+      className: p.tag,
+      "data-testid": I(r, "tag"),
+      deleteButtonText: `Delete ${e.label}`,
+      onDelete: g,
+      compact: !0,
+      children: e.label
+    },
+    E(e.value) ?? e.label
+  )) : /* @__PURE__ */ o(
+    T,
+    {
+      className: p.tag,
+      "data-testid": I(r, "tag"),
+      deleteButton: /* @__PURE__ */ o(
+        L,
+        {
+          activator: /* @__PURE__ */ o(G, { mode: "muted", children: /* @__PURE__ */ o(
+            W,
+            {
+              name: "chevron-circle-down",
+              screenreaderText: "Actions"
+            }
+          ) }),
+          onActivated: () => l?.(!0),
+          onClick: (e) => {
+            e.stopPropagation(), C(c, e);
+          },
+          onDeactivated: () => l?.(!1),
+          container: document.body,
+          align: "bottom-end",
+          children: /* @__PURE__ */ N(A, { children: [
+            /* @__PURE__ */ o(D, { onClick: () => u(!0), children: "Expand all" }),
+            /* @__PURE__ */ o(D, { onClick: h, children: "Delete all" })
+          ] })
+        }
+      ),
+      compact: !0,
+      children: w(t, i)
+    }
+  );
+}, z = ({
+  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: g = "{{numOptions}} selected",
+  ...h
+}) => {
+  const e = M(() => k(p), [p]), f = !e.length && u, b = !!e.length, P = r == null || r === "" || !r, d = F({ showDefaultChevron: P });
+  return /* @__PURE__ */ N(
+    v,
+    {
+      ...h,
+      id: n,
+      tabIndex: 0,
+      className: O(
+        s,
+        d.root,
+        S.FormElementInner,
+        S.SelectTags
+      ),
+      children: [
+        c && /* @__PURE__ */ o("span", { className: d.prepend, children: c }),
+        f && /* @__PURE__ */ o(v, { className: d.placeholder, children: u }),
+        b && /* @__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: g
+          }
+        ) }),
+        /* @__PURE__ */ o(
+          "button",
+          {
+            className: d.append,
+            role: "combobox",
+            "aria-label": "Select options",
+            children: r
+          }
+        )
+      ]
+    }
+  );
+};
+z.displayName = "IressSelectTags";
+export {
+  z as IressSelectTags
+};

package/dist/components/Select/SelectTags/SelectTags.styles.d.ts

@@ -0,0 +1,16 @@
+export declare const selectTags: import('../../../styled-system/types').SlotRecipeRuntimeFn<"append" | "prepend" | "tag" | "root" | "placeholder" | "tagsList", {
+    showDefaultChevron: {
+        true: {
+            root: {
+                alignSelf: "center";
+                position: "relative";
+            };
+            append: {
+                selectChevron: true;
+            };
+        };
+        false: {
+            append: {};
+        };
+    };
+}>;