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

package/dist/components/Icon/hooks/useDynamicFontSubsetting.d.ts

@@ -0,0 +1,45 @@
+export interface UseDynamicFontSubsettingOptions {
+    /**
+     * Set of icon names to load
+     */
+    icons: Set<string>;
+    /**
+     * Function to build the font URL from an array of icon names
+     */
+    buildUrl: (icons: string[]) => string;
+    /**
+     * Data attribute to identify the link element in the DOM. Must be kebab-case.
+     */
+    dataAttribute: string;
+    /**
+     * Font family name for the Font Loading API
+     */
+    fontFamily: string;
+    /**
+     * Whether the hook is disabled (loads nothing if true)
+     */
+    disabled?: boolean;
+    /**
+     * Whether font subsetting is disabled (full font loaded at once)
+     * When true, all icons are considered loaded after first font load
+     */
+    noSubsetting?: boolean;
+}
+/**
+ * Hook to dynamically load fonts with text subsetting from a CDN.
+ * Only loads the specific glyphs that are actually used, dramatically reducing payload size.
+ *
+ * @example Material Symbols: 1407KB → 15-20KB (98.5% reduction)
+ */
+export declare const useDynamicFontSubsetting: ({ icons, buildUrl, dataAttribute, fontFamily, disabled, noSubsetting, }: UseDynamicFontSubsettingOptions) => {
+    /**
+     * Set of icons that have been loaded and are ready to use
+     */
+    loadedIcons: Set<string>;
+    /**
+     * Check if a specific icon has been loaded
+     * In noSubsetting mode, returns true if fullyLoaded
+     * In subsetting mode, only returns true for individually loaded icons
+     */
+    isIconLoaded: (name: string) => boolean;
+};

package/dist/components/Icon/hooks/useDynamicFontSubsetting.js

@@ -0,0 +1,78 @@
+import { useState as w, useRef as N, useCallback as s, useEffect as F } from "react";
+const P = ({
+  icons: f,
+  buildUrl: m,
+  dataAttribute: l,
+  fontFamily: u,
+  disabled: i = !1,
+  noSubsetting: c = !1
+}) => {
+  const [h, $] = w(/* @__PURE__ */ new Set()), [E, y] = w(!1), a = N(null), o = s((e) => {
+    $((t) => {
+      const n = new Set(t);
+      return e.forEach((L) => n.add(L)), n;
+    });
+  }, []), p = s((e) => {
+    e?.parentNode && e.parentNode.removeChild(e);
+  }, []), C = s(
+    (e, t) => {
+      o(t), p(e), c && y(!0);
+    },
+    [o, p, c]
+  ), d = s(
+    (e) => {
+      setTimeout(() => {
+        o(e);
+      }, 3e3);
+    },
+    [o]
+  ), S = s(
+    (e, t) => {
+      "fonts" in document ? (document.fonts.check(`24px "${u}"`) ? Promise.resolve() : document.fonts.load(`24px "${u}"`).catch(() => {
+      })).then(() => C(e, t)).catch(() => d(t)) : setTimeout(() => o(t), 1e3);
+    },
+    [u, C, d, o]
+  );
+  return F(() => () => {
+    a.current?.parentNode && a.current.parentNode.removeChild(a.current);
+  }, []), F(() => {
+    if (i)
+      return;
+    const e = Array.from(f);
+    e.sort((x, v) => x.localeCompare(v));
+    const t = m(e), n = document.querySelector(`style[data-${l}]`);
+    if (n?.getAttribute("data-url") === t) {
+      c && y(!0);
+      return;
+    }
+    (async () => {
+      try {
+        const I = `@layer reset { ${await (await fetch(t)).text()} }`, r = document.createElement("style");
+        r.textContent = I, r.setAttribute(`data-${l}`, "true"), r.setAttribute("data-url", t), document.head.appendChild(r), a.current = r, S(n, e);
+      } catch {
+        d(e);
+      }
+    })();
+  }, [
+    f,
+    m,
+    l,
+    i,
+    S,
+    d
+  ]), {
+    /**
+     * Set of icons that have been loaded and are ready to use
+     */
+    loadedIcons: h,
+    /**
+     * Check if a specific icon has been loaded
+     * In noSubsetting mode, returns true if fullyLoaded
+     * In subsetting mode, only returns true for individually loaded icons
+     */
+    isIconLoaded: (e) => c ? E : h.has(e)
+  };
+};
+export {
+  P as useDynamicFontSubsetting
+};

package/dist/components/Icon/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Icon';
+export * from './Icon.constants';
+export * from './Icon.styles';
+export { IressIconProvider, type IressIconProviderProps } from './IconProvider';

package/dist/components/Icon/index.js

@@ -1,6 +1,10 @@
 import { IressIcon as e } from "./Icon.js";
-import { icon as f } from "./Icon.styles.js";
+import { MATERIAL_SYMBOLS as f } from "./Icon.constants.js";
+import { icon as p } from "./Icon.styles.js";
+import { IressIconProvider as t } from "./IconProvider.js";
 export {
   e as IressIcon,
-  f as icon
+  t as IressIconProvider,
+  f as MATERIAL_SYMBOLS,
+  p as icon
 };

package/dist/components/Image/Image.d.ts

@@ -0,0 +1,19 @@
+import { IressStyledProps } from '../../types';
+export interface IressImageProps extends Omit<IressStyledProps<'img'>, 'maxWidth' | 'alt' | 'src'> {
+    /**
+     * The alternative text representation of the image. It is used by screen readers to describe the image. If the image is intended for decoration purposes only, make it an empty string.
+     */
+    alt: string;
+    /**
+     * Override the maximum width of the image
+     */
+    maxWidth?: string | number;
+    /**
+     * The address of the image
+     */
+    src: string;
+}
+export declare const IressImage: {
+    ({ className, maxWidth, style, ...restProps }: IressImageProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Image/Image.js

@@ -1,27 +1,28 @@
-import { jsx as e } from "react/jsx-runtime";
-import { GlobalCSSClass as a } from "../../enums.js";
+import { jsx as a } from "react/jsx-runtime";
+import { GlobalCSSClass as t } from "../../enums.js";
 import { image as i } from "./Image.styles.js";
 import { c as l } from "../../cx-DN21T1EH.js";
-import { s as c } from "../../factory-oPXoMw9H.js";
-const n = c("img", i), y = ({
-  className: m,
-  maxWidth: s = "100%",
-  style: o,
-  ...r
+import { s as p } from "../../factory-CcYfm2kB.js";
+const c = p("img", i), g = ({
+  className: s,
+  maxWidth: m = "100%",
+  style: e,
+  ...o
 }) => {
-  const t = {
-    ...o,
-    maxWidth: s
+  const r = {
+    ...e,
+    maxWidth: m
   };
-  return /* @__PURE__ */ e(
-    n,
+  return /* @__PURE__ */ a(
+    c,
     {
-      className: l(m, a.Image),
-      style: t,
-      ...r
+      className: l(s, t.Image),
+      style: r,
+      ...o
     }
   );
 };
+g.displayName = "IressImage";
 export {
-  y as IressImage
+  g as IressImage
 };

package/dist/components/Image/Image.styles.js

@@ -1,4 +1,4 @@
-import { c as a } from "../../cva-JiDXAa83.js";
+import { c as a } from "../../cva-3iuaj0TL.js";
 const i = a({
   base: {
     display: "block",

package/dist/components/Inline/Inline.d.ts

@@ -0,0 +1,34 @@
+import { HorizontalAligns, VerticalAligns, IressStyledProps, ResponsiveProp, PositiveSpacingToken } from '../../types';
+import { ReactNode } from 'react';
+export interface IressInlineProps extends IressStyledProps {
+    /**
+     * Content to be displayed inline.
+     */
+    children?: ReactNode;
+    /**
+     * Sets the gap between direct children.
+     * @see https://developer.mozilla.org/docs/Web/CSS/gap
+     */
+    gap?: ResponsiveProp<PositiveSpacingToken>;
+    /**
+     * Sets the horizontal alignment of the inline content.
+     */
+    horizontalAlign?: HorizontalAligns;
+    /**
+     * Wraps content when stretches beyond container.
+     */
+    noWrap?: boolean;
+    /**
+     * Sets the size of the top and bottom gap between direct children when they begin to wrap.
+     * @see https://developer.mozilla.org/docs/Web/CSS/row-gap
+     */
+    rowGap?: ResponsiveProp<PositiveSpacingToken>;
+    /**
+     * Sets the vertical alignment of the inline content.
+     */
+    verticalAlign?: VerticalAligns;
+}
+export declare const IressInline: {
+    ({ className, ...restProps }: IressInlineProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Inline/Inline.js

@@ -1,9 +1,10 @@
 import { jsx as m } from "react/jsx-runtime";
 import { inline as r } from "./Inline.styles.js";
-import { s as i } from "../../factory-oPXoMw9H.js";
+import { s as i } from "../../factory-CcYfm2kB.js";
 import { GlobalCSSClass as n } from "../../enums.js";
-import { c as t } from "../../cx-DN21T1EH.js";
-const e = i("div", r), x = ({ className: o, ...s }) => /* @__PURE__ */ m(e, { ...s, className: t(o, n.Inline) });
+import { c as e } from "../../cx-DN21T1EH.js";
+const l = i("div", r), t = ({ className: o, ...s }) => /* @__PURE__ */ m(l, { ...s, className: e(o, n.Inline) });
+t.displayName = "IressInline";
 export {
-  x as IressInline
+  t as IressInline
 };

package/dist/components/Inline/Inline.styles.js

@@ -1,4 +1,4 @@
-import { c as e } from "../../cva-JiDXAa83.js";
+import { c as e } from "../../cva-3iuaj0TL.js";
 const n = e({
   base: {
     display: "flex",

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,78 @@
+import { ChangeEvent, RefAttributes, ReactElement, ReactNode } from 'react';
+import { InputRef, InputBaseProps, InputBaseElement } from './InputBase/InputBase';
+import { FormControlValue, FormElementWidths } from '../../types';
+import { IressButtonProps } from '../Button';
+export type IressInputProps<T extends FormControlValue = string | number, TRows extends number | undefined = undefined> = Omit<InputBaseProps<TRows>, 'defaultValue' | 'onChange' | 'value'> & {
+    /**
+     * Actions to display in the input field, rendered inside the input on the right. These will be rendered with opinionated styling.
+     * If you want to use custom buttons or controls, use the `append` prop instead.
+     */
+    actions?: Omit<IressButtonProps, 'mode' | 'status'>[];
+    /**
+     * Set input content align to right, useful for numeric inputs.
+     * @default false
+     */
+    alignRight?: boolean;
+    /**
+     * Content to append to the input field, usually a button or icon.
+     **/
+    append?: ReactNode;
+    /**
+     * The value of the input. Can be a string or a number. Use for uncontrolled inputs.
+     */
+    defaultValue?: T;
+    /**
+     * Bring your own formatter that will be used to format the value when the input is not focused, allowing you to display the value in a different format.
+     * e.g. User type in value="dsf 987kkk123" => result after formatter: $987,123 (string)
+     */
+    formatter?: (value?: T) => string | number;
+    /**
+     * Make prepend/append element closer to the input content.
+     */
+    inline?: boolean;
+    /**
+     * The loading states of the input field. If provided a string, will use that text as the loading message.
+     */
+    loading?: boolean | string;
+    /**
+     * Emitted when the input value changes with the new changed value.
+     */
+    onChange?: (e: ChangeEvent<InputBaseElement<TRows>>, value?: T) => void;
+    /**
+     * Emitted when the input is manually cleared.
+     */
+    onClear?: (e: ChangeEvent<InputBaseElement<TRows>>) => void;
+    /**
+     * Content to prepended to the input field, usually an icon.
+     */
+    prepend?: ReactNode;
+    /**
+     * The value of the input. Can be a string or a number. Use for controlled inputs.
+     */
+    value?: T;
+    /**
+     * The width of the input.
+     */
+    width?: FormElementWidths;
+} & (TRows extends number ? {
+    /**
+     * Controls the auto-grow behaviour of the textarea when `rows` is set.
+     * - Set to a number (e.g. `autoGrow={10}`) to define the maximum number of visible rows before the textarea starts scrolling.
+     * - Set to `true` to enable auto-grow with a default maximum of 5 visible rows.
+     * @default false (no auto-grow) or 5 rows when `autoGrow` is `true`
+     */
+    autoGrow?: number | boolean;
+} : {
+    /**
+     * If `true`, then user can clear the value of the input.
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * The variant of the input, which will apply different styles to the input. The `search` variant is designed for search inputs and will have a different style for the clear button and loading spinner.
+     */
+    variant?: 'search';
+});
+export declare const IressInput: (<T extends FormControlValue = string | number, TRows extends number | undefined = undefined>(props: IressInputProps<T, TRows> & RefAttributes<InputRef<TRows> | null>) => ReactElement) & {
+    displayName: "IressInput";
+};

package/dist/components/Input/Input.js

@@ -1,144 +1,174 @@
-import { jsx as r, jsxs as F } from "react/jsx-runtime";
-import { forwardRef as A, useRef as N, useState as G, useImperativeHandle as H } from "react";
-import { GlobalCSSClass as d } from "../../enums.js";
-import { getFormControlValueAsString as U } from "../../helpers/form/getFormControlValueAsString.js";
-import { InputBase as z } from "./InputBase/InputBase.js";
-import { IressSpinner as J } from "../Spinner/Spinner.js";
+import { jsx as s, jsxs as g } from "react/jsx-runtime";
+import { forwardRef as $, useRef as M, useState as z, useImperativeHandle as J, useEffect as K, createElement as L } from "react";
+import { GlobalCSSClass as u } from "../../enums.js";
+import { getFormControlValueAsString as Q } from "../../helpers/form/getFormControlValueAsString.js";
+import { InputBase as W } from "./InputBase/InputBase.js";
+import { IressSpinner as X } from "../Spinner/Spinner.js";
 import "../Spinner/Spinner.styles.js";
-import { useControlledState as K } from "../../hooks/useControlledState.js";
-import { IressReadonly as L } from "../Readonly/Readonly.js";
+import { useControlledState as Z } from "../../hooks/useControlledState.js";
+import { IressReadonly as _ } from "../Readonly/Readonly.js";
 import "../Readonly/Readonly.styles.js";
-import { c as s } from "../../cx-DN21T1EH.js";
-import { input as Q } from "./Input.styles.js";
-import { s as W } from "../../factory-oPXoMw9H.js";
-import { s as X } from "../../is-valid-prop-Ce0wiweq.js";
-import { useNoDefaultValueInForms as Y } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
-import "../../Button-mmhMLwp9.js";
-import { IressCloseButton as Z } from "../Button/CloseButton/CloseButton.js";
-const _ = ({ rows: a, ...f }, S) => {
+import { c as l } from "../../cx-DN21T1EH.js";
+import { input as ee } from "./Input.styles.js";
+import { s as te } from "../../factory-CcYfm2kB.js";
+import { s as re } from "../../is-valid-prop-C5D641yn.js";
+import { useNoDefaultValueInForms as ne } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
+import { I as oe } from "../../Button-C0p8bEXn.js";
+import { IressCloseButton as ae } from "../Button/CloseButton/CloseButton.js";
+const se = ({ rows: n, ...d }, P) => {
   const {
-    loading: l = !1,
-    clearable: P = !1,
+    loading: m = !1,
+    clearable: T = !1,
     defaultValue: v,
-    onClear: D,
-    width: M,
-    prepend: g,
-    append: u,
-    onChange: R,
+    onClear: B,
+    width: D,
+    prepend: I,
+    append: p,
+    onChange: y,
     className: C,
-    readOnly: B,
-    formatter: i,
-    type: E,
-    inline: T,
-    alignRight: I,
-    ...t
-  } = f;
-  Y({
+    readOnly: R,
+    formatter: f,
+    type: j,
+    inline: G,
+    alignRight: x,
+    actions: k,
+    variant: A,
+    ...o
+  } = d;
+  let a = n !== void 0 ? d.autoGrow : void 0;
+  a === !0 && (a = 5), ne({
     component: "IressInput",
     defaultValue: v
   });
-  const c = N(null), p = N(null), { value: m, setValue: h } = K({
+  const i = M(null), h = M(null), { value: c, setValue: N } = Z({
     component: "IressInput",
     defaultValue: v,
-    value: f.value
-  }), y = U(m), [x, V] = G(!1), [j, O] = X(t), b = i && !x ? i(m) : y;
-  let w = i && !x ? { type: "text" } : { type: E };
-  if (a !== void 0 && (w = void 0), H(
-    S,
+    value: d.value
+  }), w = Q(c), [b, F] = z(!1), [H, O] = re(o), S = f && !b ? f(c) : w;
+  let V = f && !b ? { type: "text" } : { type: j };
+  if (n !== void 0 && (V = void 0), J(
+    P,
     () => ({
-      ...c.current,
-      extras: {
-        additionalOnChangeProps: ["onClear"]
-      }
+      ...i.current
     })
-  ), B)
-    return /* @__PURE__ */ r(
-      L,
+  ), K(() => {
+    if (n && a && i.current) {
+      const e = i.current.input;
+      if (!e) return;
+      e.style.height = "auto";
+      const E = parseFloat(getComputedStyle(e).lineHeight) * 1.075 * a, Y = Math.min(e.scrollHeight, E);
+      e.style.height = `${Y}px`, e.style.overflowY = e.scrollHeight > E ? "auto" : "hidden";
+    }
+  }, [c, n, a]), R)
+    return /* @__PURE__ */ s(
+      _,
       {
-        ...t,
+        ...o,
         defaultValue: void 0,
-        value: m,
-        alignRight: I,
-        append: u,
+        value: c,
+        alignRight: x,
+        append: p,
         className: C,
-        children: b
+        children: S
       }
     );
-  const k = (e) => {
-    h(""), c.current?.focus();
-    const o = new Event("change", {
+  const q = (e) => {
+    N(""), i.current?.focus();
+    const t = new Event("change", {
       bubbles: !0
     });
-    Object.defineProperty(o, "target", {
+    Object.defineProperty(t, "target", {
       writable: !1,
       value: { value: "", ...e.target }
-    }), D?.(o);
-  }, q = (e) => {
-    const o = e.target.value;
-    h(o), R?.(e, o);
-  }, n = Q({
-    alignRight: I,
-    inline: T,
-    isTextarea: a !== void 0,
-    width: M
+    }), Object.defineProperty(t, "currentTarget", {
+      writable: !1,
+      value: { ...e.currentTarget, value: "" }
+    }), y?.(t, ""), B?.(t);
+  }, U = (e) => {
+    const t = e.target.value;
+    N(t), y?.(e, t);
+  }, r = ee({
+    alignRight: x,
+    autoGrow: !!a,
+    inline: G,
+    isTextarea: n !== void 0,
+    stretched: !!H.stretch,
+    variant: A,
+    width: D
   });
-  return /* @__PURE__ */ F(
-    W.div,
+  return /* @__PURE__ */ g(
+    "div",
     {
-      className: s(
-        // classes.root,
-        d.FormElement,
-        d.Input,
+      className: l(
+        u.FormElement,
+        u.Input,
         C,
-        n.wrapper,
-        d.FormElementInner
+        r.root
       ),
-      "data-testid": t["data-testid"],
-      ...j,
+      "data-testid": o["data-testid"],
       children: [
-        g && /* @__PURE__ */ r("div", { className: s(n.addon), children: g }),
-        /* @__PURE__ */ r(
-          z,
+        /* @__PURE__ */ g(
+          te.div,
           {
-            ...O,
-            ...w,
-            className: n.formControl,
-            value: b,
-            onChange: q,
-            onFocus: (e) => {
-              V(!0), t?.onFocus?.(e), p.current ? p.current = null : queueMicrotask(() => e.target.select());
-            },
-            onMouseDown: (e) => {
-              t?.onMouseDown?.(e), p.current = !0;
-            },
-            onBlur: (e) => {
-              V(!1), t?.onBlur?.(e);
-            },
-            rows: a,
-            ref: c
+            className: l(r.wrapper, u.FormElementInner),
+            ...H,
+            children: [
+              I && /* @__PURE__ */ s("div", { className: l(r.addon, u.InputAddon), children: I }),
+              /* @__PURE__ */ s(
+                W,
+                {
+                  ...O,
+                  ...V,
+                  className: r.formControl,
+                  value: S,
+                  onChange: U,
+                  onFocus: (e) => {
+                    F(!0), o?.onFocus?.(e), h.current ? h.current = null : queueMicrotask(() => e.target.select());
+                  },
+                  onMouseDown: (e) => {
+                    o?.onMouseDown?.(e), h.current = !0;
+                  },
+                  onBlur: (e) => {
+                    F(!1), o?.onBlur?.(e);
+                  },
+                  rows: n,
+                  ref: i
+                }
+              ),
+              /* @__PURE__ */ g("div", { className: l(r.internal), children: [
+                m && /* @__PURE__ */ s(
+                  X,
+                  {
+                    screenreaderText: m === !0 ? "loading" : m
+                  }
+                ),
+                w && T && /* @__PURE__ */ s(
+                  ae,
+                  {
+                    onClick: q,
+                    onMouseDown: (e) => e.preventDefault(),
+                    screenreaderText: "Clear",
+                    compact: !0
+                  }
+                )
+              ] }),
+              p && /* @__PURE__ */ s("div", { className: l(r.addon, u.InputAddon), children: p })
+            ]
           }
         ),
-        /* @__PURE__ */ F("div", { className: s(n.internal), children: [
-          l && /* @__PURE__ */ r(
-            J,
-            {
-              screenreaderText: l === !0 ? "loading" : l
-            }
-          ),
-          y && P && /* @__PURE__ */ r(
-            Z,
-            {
-              onClick: k,
-              onMouseDown: (e) => e.preventDefault(),
-              screenreaderText: "Clear"
-            }
-          )
-        ] }),
-        u && /* @__PURE__ */ r("div", { className: s(n.addon), children: u })
+        k?.map((e, t) => /* @__PURE__ */ L(
+          oe,
+          {
+            ...e,
+            className: l(e.className, r.action),
+            key: t
+          }
+        ))
       ]
     }
   );
-}, ge = A(_);
+}, le = $(se);
+le.displayName = "IressInput";
 export {
-  ge as IressInput
+  le as IressInput
 };