@iress-oss/ids-components 6.0.0-alpha.19 → 6.0.0-alpha.20

package/dist/components/Input/Input.js

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

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

@@ -129,4 +129,11 @@ export declare const input: import('../../styled-system/types').SlotRecipeRuntim
             };
         };
     };
+    stretched: {
+        true: {
+            formControl: {
+                height: "[100%]";
+            };
+        };
+    };
 }>;

package/dist/components/Input/Input.styles.js

@@ -4,7 +4,7 @@ const o = r({
   base: {
     wrapper: {
       // Performance: CSS containment limits style recalculation scope
-      contain: "layout style paint",
+      contain: "style paint",
       display: "flex",
       alignItems: "stretch",
       borderRadius: "radius.system.form",
@@ -212,6 +212,13 @@ const o = r({
           width: "[100%]"
         }
       }
+    },
+    stretched: {
+      true: {
+        formControl: {
+          height: "[100%]"
+        }
+      }
     }
   },
   defaultVariants: {}

package/dist/components/Popover/Popover.styles.js

@@ -10,7 +10,7 @@ const a = t({
     },
     content: {
       // Performance: CSS containment (no paint due to floating nature)
-      contain: "layout style",
+      contain: "style",
       bg: "colour.neutral.10",
       border: "divider",
       borderRadius: "radius.system.form",

package/dist/components/Slideout/Slideout.styles.js

@@ -4,7 +4,7 @@ const i = t({
   base: {
     root: {
       // Performance: CSS containment (no paint due to fixed positioning)
-      contain: "layout style",
+      contain: "style",
       textStyle: "typography.body.md",
       position: "fixed",
       insetBlockStart: "spacing.0",

package/dist/patterns/Shadow/Shadow.js

@@ -4304,6 +4304,10 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     align-items: stretch;
 }
 
+  .contain_style_paint {
+    contain: style paint;
+}
+
   .bg-c_colour\\.neutral\\.10 {
     background-color: var(--colors-colour\\.neutral\\.10);
 }
@@ -4451,6 +4455,10 @@ const z = `@layer reset, base, tokens, recipes, utilities;
     stroke-opacity: 0.5;
 }
 
+  .contain_style {
+    contain: style;
+}
+
   .ap_none {
     appearance: none;
     -webkit-appearance: none;