@iress-oss/ids-components 6.0.0-alpha.49 → 6.0.0-alpha.50

package/dist/components/Select/components/SelectOptions.js

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

package/dist/components/Select/helpers/toPrimitiveValue.d.ts

@@ -0,0 +1,4 @@
+import { ControlledValue } from '../../../hooks';
+import { LabelValueMeta } from '../../../interfaces';
+import { FormControlValue } from '../../../types';
+export declare const toPrimitiveValue: <TMultiple extends boolean = false>(value: ControlledValue<LabelValueMeta, TMultiple> | undefined) => ControlledValue<FormControlValue, TMultiple> | undefined;

package/dist/components/Select/helpers/toPrimitiveValue.js

@@ -0,0 +1,7 @@
+const t = (r) => {
+  if (r !== void 0)
+    return Array.isArray(r) ? r.map((i) => i.value ?? null) : r.value ?? null;
+};
+export {
+  t as toPrimitiveValue
+};

package/dist/components/Select/index.js

@@ -1,4 +1,4 @@
-import { a as t } from "../../Autocomplete-C1SPFcaX.js";
+import { a as t } from "../../Autocomplete-B8Ac_bPk.js";
 import { IressSelectBody as s } from "./SelectBody/SelectBody.js";
 import { IressSelectCreate as l } from "./SelectCreate/SelectCreate.js";
 import { IressSelectHeading as S } from "./SelectHeading/SelectHeading.js";

package/dist/components/Table/Table.js

@@ -3,7 +3,7 @@ import "react";
 import "../../hooks/useIdIfNeeded.js";
 import "./components/TableEmpty.js";
 import "../../helpers/utility/propagateTestid.js";
-import { I as x } from "../../TableBody-DnTSsbYF.js";
+import { I as x } from "../../TableBody-r9poBt3c.js";
 import "../../TableProvider-D84YrYSp.js";
 import "./components/TableRows.js";
 import "./Table.styles.js";

package/dist/components/Table/TableBody/TableBody.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "../../../helpers/utility/propagateTestid.js";
 import "../components/TableEmpty.js";
-import { a as x } from "../../../TableBody-DnTSsbYF.js";
+import { a as x } from "../../../TableBody-r9poBt3c.js";
 import "react";
 import "../../../hooks/useIdIfNeeded.js";
 import "../components/TableRows.js";

package/dist/components/Table/components/TableFilterButton.js

@@ -19,10 +19,10 @@ import "../Table.styles.js";
 import "../../Icon/Icon.js";
 import "../../Icon/Icon.styles.js";
 import "../../Icon/IconProvider.js";
-import { T as Io } from "../../../TableBody-DnTSsbYF.js";
+import { T as Io } from "../../../TableBody-r9poBt3c.js";
 import "../../Alert/Alert.js";
 import "../../Alert/Alert.styles.js";
-import "../../../Autocomplete-C1SPFcaX.js";
+import "../../../Autocomplete-B8Ac_bPk.js";
 import "../../Autocomplete/Autocomplete.styles.js";
 import "../../../highlightQueryInLabel-Cx7nIoII.js";
 import "../../ButtonGroup/ButtonGroup.js";

package/dist/components/Table/components/TableHeader.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "../../../helpers/utility/propagateTestid.js";
 import "../../../TableProvider-D84YrYSp.js";
-import { c as i } from "../../../TableBody-DnTSsbYF.js";
+import { c as i } from "../../../TableBody-r9poBt3c.js";
 import "react";
 export {
   i as TableHeader

package/dist/components/Table/components/TableHeaderCell.js

@@ -3,7 +3,7 @@ import "../hooks/useTableColumnStyles.js";
 import "../hooks/useTableColumnSort.js";
 import "../hooks/useTableColumnFilter.js";
 import "./TableSortButton.js";
-import { b as d } from "../../../TableBody-DnTSsbYF.js";
+import { b as d } from "../../../TableBody-r9poBt3c.js";
 import "../Table.styles.js";
 import "react";
 import "../../../TableProvider-D84YrYSp.js";

package/dist/components/Table/index.js

@@ -1,4 +1,4 @@
-import { I as a, a as o } from "../../TableBody-DnTSsbYF.js";
+import { I as a, a as o } from "../../TableBody-r9poBt3c.js";
 import { table as s, tableCell as t } from "./Table.styles.js";
 import { IressTableFormattedValue as m } from "./TableFormattedValue/TableFormattedValue.js";
 import { useTable as p } from "./hooks/useTable.js";

package/dist/constants.d.ts

@@ -1,5 +1,96 @@
-export { BREAKPOINT_DETAILS, BREAKPOINTS, FORM_ELEMENT_WIDTHS, GRID_SIZE, HORIZONTAL_ALIGNS, MATERIAL_SYMBOLS, TEXT_ALIGNS, VERTICAL_ALIGNS, Z_INDEX, } from '../../theme-preset/src/constants';
-export type { BreakpointDetail } from '../../theme-preset/src/constants';
+/** Details about a specific breakpoint in the design system. */
+export interface BreakpointDetail {
+    containerMaxWidth: string;
+    margin?: string;
+    maxColumns?: number;
+    maxScreenWidth?: string;
+    mediaQuery: string;
+    minScreenWidth: string;
+    screenWidthRange: string;
+    viewportWidth: number;
+}
+export declare const BREAKPOINT_DETAILS: {
+    readonly xs: {
+        readonly mediaQuery: "(min-width: 0) and (max-width: 575px)";
+        readonly screenWidthRange: "0 - 575px";
+        readonly margin: "spacing.4";
+        readonly maxColumns: 4;
+        readonly minScreenWidth: "0px";
+        readonly maxScreenWidth: "575px";
+        readonly containerMaxWidth: "100%";
+        readonly viewportWidth: 360;
+    };
+    readonly sm: {
+        readonly mediaQuery: "(min-width: 576px) and (max-width: 767px)";
+        readonly screenWidthRange: "576px - 767px";
+        readonly margin: "spacing.4";
+        readonly minScreenWidth: "576px";
+        readonly maxScreenWidth: "767px";
+        readonly containerMaxWidth: "100%";
+        readonly viewportWidth: 767;
+    };
+    readonly md: {
+        readonly mediaQuery: "(min-width: 768px) and (max-width: 1023px)";
+        readonly screenWidthRange: "768px - 1023px";
+        readonly margin: "spacing.6";
+        readonly maxColumns: 4;
+        readonly minScreenWidth: "768px";
+        readonly maxScreenWidth: "1023px";
+        readonly containerMaxWidth: "100%";
+        readonly viewportWidth: 1022;
+    };
+    readonly lg: {
+        readonly mediaQuery: "(min-width: 1024px) and (max-width: 1279px)";
+        readonly screenWidthRange: "1024px - 1279px";
+        readonly margin: "spacing.6";
+        readonly maxColumns: 6;
+        readonly minScreenWidth: "1024px";
+        readonly maxScreenWidth: "1279px";
+        readonly containerMaxWidth: "100%";
+        readonly viewportWidth: 1278;
+    };
+    readonly xl: {
+        readonly mediaQuery: "(min-width: 1280px) and (max-width: 1599px)";
+        readonly screenWidthRange: "1280px - 1599px";
+        readonly margin: "spacing.8";
+        readonly minScreenWidth: "1280px";
+        readonly maxScreenWidth: "1599px";
+        readonly containerMaxWidth: "1440px";
+        readonly viewportWidth: number;
+    };
+    readonly xxl: {
+        readonly mediaQuery: "(min-width: 1600px)";
+        readonly margin: "spacing.8";
+        readonly screenWidthRange: "1600px and above";
+        readonly minScreenWidth: "1600px";
+        readonly containerMaxWidth: "1690px";
+        readonly viewportWidth: number;
+    };
+};
+export declare const BREAKPOINTS: ("xs" | "sm" | "md" | "lg" | "xl" | "xxl")[];
+export declare const FORM_ELEMENT_WIDTHS: readonly ["2", "4", "6", "8", "10", "12", "16", "25%", "50%", "75%", "100%"];
+export declare const GRID_SIZE = 12;
+export declare const HORIZONTAL_ALIGNS: readonly ["around", "between", "center", "evenly", "left", "right", "stretch"];
+export declare const MATERIAL_SYMBOLS: {
+    readonly family: "Material Symbols Rounded";
+    readonly className: "material-symbols-rounded";
+    readonly figmaGrade: "Emphasis";
+    readonly figmaOpticalSize: "24dp";
+    readonly grade: 0;
+    readonly opticalSize: 36;
+    readonly weight: 300;
+};
+export declare const TEXT_ALIGNS: readonly ["inherit", "left", "center", "right", "justify"];
+export declare const VERTICAL_ALIGNS: readonly ["top", "middle", "bottom", "between", "around", "evenly", "stretch"];
+export declare const Z_INDEX: {
+    DEFAULT: number;
+    NAVBAR: number;
+    POPOVER: number;
+    SLIDEOUT: number;
+    MODAL: number;
+    TOAST: number;
+    TOOLTIP: number;
+};
 /**
  * A CSS selector string that matches all focusable elements.
  */