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

package/dist/components/Badge/Badge.d.ts

@@ -1,14 +1,10 @@
-import { ReactElement, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { IressStyledProps, Statuses } from '../../types';
 export interface IressBadgeProps extends IressStyledProps<'span'> {
     /**
      * Content of the badge.
      */
     children?: ReactNode;
-    /**
-     * Element to attach the badge to.
-     */
-    host?: ReactElement;
     /**
      * Style of the badge.
      */
@@ -19,6 +15,6 @@ export interface IressBadgeProps extends IressStyledProps<'span'> {
     pill?: boolean;
 }
 export declare const IressBadge: {
-    ({ children, mode, pill, className, host, ...restProps }: IressBadgeProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, mode, pill, className, ...restProps }: IressBadgeProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/Badge/Badge.js

@@ -1,48 +1,35 @@
-import { jsx as c, jsxs as n } from "react/jsx-runtime";
-import { propagateTestid as f } from "../../helpers/utility/propagateTestid.js";
-import { c as r } from "../../css-DNdLYQld.js";
-import { c as g } from "../../cx-DN21T1EH.js";
-import { badge as b } from "./Badge.styles.js";
-import { s as x } from "../../factory-CsinCTPr.js";
-import { s as y } from "../../is-valid-prop-DweT-eOL.js";
-import { GlobalCSSClass as B } from "../../enums.js";
-const C = ({
-  children: e,
-  mode: m = "neutral",
-  pill: p,
-  className: d,
-  host: s,
-  ...a
+import { jsx as l } from "react/jsx-runtime";
+import { c } from "../../css-DNdLYQld.js";
+import { c as i } from "../../cx-DN21T1EH.js";
+import { badge as n } from "./Badge.styles.js";
+import { s as d } from "../../factory-CsinCTPr.js";
+import { s as f } from "../../is-valid-prop-DweT-eOL.js";
+import { GlobalCSSClass as g } from "../../enums.js";
+const y = ({
+  children: o,
+  mode: r = "neutral",
+  pill: a,
+  className: t,
+  ...e
 }) => {
-  const o = b.raw({
-    mode: m,
-    pill: p,
-    host: !!s
-  }), [i, l] = y(a), t = /* @__PURE__ */ c(
-    x.span,
+  const s = n.raw({
+    mode: r,
+    pill: a
+  }), [m, p] = f(e);
+  return /* @__PURE__ */ l(
+    d.span,
     {
-      ...l,
-      className: g(
-        r(o.root, o.badge, i),
-        d,
-        B.Badge
+      ...p,
+      className: i(
+        c(s.root, s.badge, m),
+        t,
+        g.Badge
       ),
-      children: e
+      children: o
     }
   );
-  return s ? /* @__PURE__ */ n(
-    "div",
-    {
-      className: r(o.host),
-      "data-testid": f(a["data-testid"], "host"),
-      children: [
-        s,
-        t
-      ]
-    }
-  ) : t;
 };
-C.displayName = "IressBadge";
+y.displayName = "IressBadge";
 export {
-  C as IressBadge
+  y as IressBadge
 };

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

@@ -1,20 +1,4 @@
-export declare const badge: import('../../styled-system/types').SlotRecipeRuntimeFn<"badge" | "root" | "host", {
-    host: {
-        true: {
-            badge: {
-                position: "absolute";
-                insetBlockStart: "spacing.0";
-                insetInlineEnd: "spacing.0";
-                zIndex: "100";
-                transformOrigin: "100% 0";
-                borderRadius: "radius.100";
-                transform: {
-                    base: "translate(50%, -50%)";
-                    _rtl: "translate(-50%, -50%)";
-                };
-            };
-        };
-    };
+export declare const badge: import('../../styled-system/types').SlotRecipeRuntimeFn<"badge" | "root", {
     pill: {
         true: {
             badge: {

package/dist/components/Badge/Badge.styles.js

@@ -1,6 +1,6 @@
 import { s as o } from "../../sva-B7kca5XO.js";
 const r = o({
-  slots: ["root", "badge", "host"],
+  slots: ["root", "badge"],
   base: {
     root: {
       // Performance: CSS containment limits style recalculation scope
@@ -14,7 +14,7 @@ const r = o({
       whiteSpace: "nowrap",
       textDecoration: "none",
       minHeight: "[1.35em]",
-      minWidth: "[1.35em]"
+      minWidth: "[1.5em]"
     },
     badge: {
       alignItems: "center",
@@ -26,29 +26,9 @@ const r = o({
         lineHeight: 1,
         display: "inline-block"
       }
-    },
-    host: {
-      position: "relative",
-      height: "auto"
     }
   },
   variants: {
-    host: {
-      true: {
-        badge: {
-          position: "absolute",
-          insetBlockStart: "spacing.0",
-          insetInlineEnd: "spacing.0",
-          zIndex: "100",
-          transformOrigin: "100% 0",
-          borderRadius: "radius.100",
-          transform: {
-            base: "translate(50%, -50%)",
-            _rtl: "translate(-50%, -50%)"
-          }
-        }
-      }
-    },
     pill: {
       true: {
         badge: {
@@ -151,8 +131,7 @@ const r = o({
   },
   defaultVariants: {
     mode: "neutral",
-    pill: !1,
-    host: !1
+    pill: !1
   }
 });
 export {

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

@@ -22,6 +22,9 @@ export declare const input: import('../../styled-system/types').SlotRecipeRuntim
     };
     isTextarea: {
         true: {
+            wrapper: {
+                alignItems: "end";
+            };
             formControl: {
                 lineHeight: number;
                 height: "auto";

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

@@ -106,6 +106,9 @@ const o = r({
     },
     isTextarea: {
       true: {
+        wrapper: {
+          alignItems: "end"
+        },
         formControl: {
           lineHeight: 1.5,
           height: "auto",

package/dist/components/Progress/Progress.js

@@ -6,7 +6,7 @@ import { progress as b } from "./Progress.styles.js";
 import { s as p } from "../../factory-CsinCTPr.js";
 import { s as x } from "../../is-valid-prop-DweT-eOL.js";
 import { GlobalCSSClass as C } from "../../enums.js";
-import { t as N } from "../../index-Bm5rQqn5.js";
+import { t as N } from "../../index-0AvnPY9d.js";
 const h = ({
   backgroundImage: e,
   borderRadius: t,

package/dist/components/Slideout/hooks/usePushElement.js

@@ -1,6 +1,6 @@
 import { useRef as m, useEffect as y } from "react";
 import { GlobalCSSClass as e } from "../../../enums.js";
-import { t as p } from "../../../index-Bm5rQqn5.js";
+import { t as p } from "../../../index-0AvnPY9d.js";
 import { useBreakpoint as S } from "../../../hooks/useBreakpoint.js";
 function h({
   element: r,

package/dist/components/TabSet/Tab/Tab.js

@@ -1,42 +1,42 @@
-import { jsxs as E, Fragment as M, jsx as u } from "react/jsx-runtime";
-import { forwardRef as L, useRef as N, useContext as D, useImperativeHandle as R, useLayoutEffect as $, useCallback as S, useMemo as j } from "react";
-import { idsLogger as F } from "../../../helpers/utility/idsLogger.js";
-import { useIdIfNeeded as H } from "../../../hooks/useIdIfNeeded.js";
-import { createPortal as K } from "react-dom";
-import { s as q } from "../../../factory-CsinCTPr.js";
-import { tab as G } from "./Tab.styles.js";
-import { c as U } from "../../../cx-DN21T1EH.js";
-import { a as W } from "../../../floating-ui.react-BlU6Nz_4.js";
-import { focusableElements as Y } from "../../../helpers/dom/focusableElements.js";
-import { GlobalCSSClass as z } from "../../../enums.js";
-import { TabSetContext as B } from "../TabSetProvider.js";
-const J = (a, e, s, i) => {
-  const t = a.querySelector("[id]"), r = t?.getAttribute("id");
-  t?.removeAttribute("id"), a.removeAttribute("tabindex"), a.removeAttribute("data-active"), a.removeAttribute("aria-selected"), s.ref?.(e), e.tabIndex = i ? 0 : -1, i ? e.setAttribute("data-active", "") : e.removeAttribute("data-active"), r && e.setAttribute("id", r), e.setAttribute("aria-selected", String(i));
-}, h = ({
-  activate: a,
+import { jsxs as L, Fragment as N, jsx as u } from "react/jsx-runtime";
+import { forwardRef as D, useRef as S, useContext as R, useImperativeHandle as $, useLayoutEffect as j, useEffect as F, useCallback as C, useMemo as H } from "react";
+import { idsLogger as K } from "../../../helpers/utility/idsLogger.js";
+import { useIdIfNeeded as q } from "../../../hooks/useIdIfNeeded.js";
+import { createPortal as G } from "react-dom";
+import { s as U } from "../../../factory-CsinCTPr.js";
+import { tab as V } from "./Tab.styles.js";
+import { c as W } from "../../../cx-DN21T1EH.js";
+import { a as Y } from "../../../floating-ui.react-BlU6Nz_4.js";
+import { focusableElements as z } from "../../../helpers/dom/focusableElements.js";
+import { GlobalCSSClass as B } from "../../../enums.js";
+import { TabSetContext as J } from "../TabSetProvider.js";
+const O = (n, e, c, a) => {
+  const t = n.querySelector("[id]"), r = t?.getAttribute("id");
+  t?.removeAttribute("id"), n.removeAttribute("tabindex"), n.removeAttribute("data-active"), n.removeAttribute("aria-selected"), c.ref?.(e), e.tabIndex = a ? 0 : -1, a ? e.setAttribute("data-active", "") : e.removeAttribute("data-active"), r && e.setAttribute("id", r), e.setAttribute("aria-selected", String(a));
+}, k = ({
+  activate: n,
   children: e,
-  selected: s,
-  ...i
+  selected: c,
+  ...a
 }) => /* @__PURE__ */ u(
-  W,
+  Y,
   {
     render: (t) => /* @__PURE__ */ u(
       "div",
       {
-        ...i,
+        ...a,
         ...t,
-        "aria-selected": s,
-        onClick: () => a(),
-        onKeyDown: (r) => ["Space", "Enter"].includes(r.key) && a(),
+        "aria-selected": c,
+        onClick: () => n(),
+        onKeyDown: (r) => ["Space", "Enter"].includes(r.key) && n(),
         ref: (r) => {
           if (!r) return;
-          const m = Y(r)[0];
-          m && J(
+          const l = z(r)[0];
+          l && O(
             r,
-            m,
+            l,
             t,
-            s
+            c
           );
         },
         children: e
@@ -44,105 +44,119 @@ const J = (a, e, s, i) => {
     )
   }
 );
-h.displayName = "TabInsideTabSet";
-const O = ({
-  active: a,
+k.displayName = "TabInsideTabSet";
+const P = ({
+  active: n,
   children: e,
-  className: s,
-  "data-testid": i,
+  className: c,
+  "data-testid": a,
   href: t,
   label: r,
-  type: m = "button",
+  type: l = "button",
   value: v,
-  ...b
-}, C) => {
-  const d = H({ id: b.id }), c = N(null), n = D(B), { register: A, unregister: g, setHover: p } = n ?? {}, { onMouseEnter: y, onMouseLeave: T } = b;
-  R(C, () => c.current), $(() => {
-    const o = c.current;
-    if (o)
-      return A?.(o, v), () => g?.(o);
+  ...f
+}, x) => {
+  const d = q({ id: f.id }), s = S(null), o = R(J), { register: A, unregister: g, setHover: p } = o ?? {}, { onMouseEnter: w, onMouseLeave: y } = f, I = S(!0);
+  $(x, () => s.current), j(() => {
+    const i = s.current;
+    if (i)
+      return A?.(i, v), () => g?.(i);
   }, [A, g, v]);
-  const f = n ? n.isActive(c.current) : a, w = U(
-    s,
-    G({ active: f, insideTabSet: !!n }),
-    z.Tab
-  ), x = S(
-    (o) => {
-      y?.(o), p?.(o.currentTarget);
+  const m = o ? o.isActive(s.current) : n;
+  F(() => {
+    if (m && s.current && o) {
+      if (I.current) {
+        I.current = !1;
+        return;
+      }
+      s.current.scrollIntoView?.({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center"
+      });
+    }
+  }, [m, o]);
+  const T = W(
+    c,
+    V({ active: m, insideTabSet: !!o }),
+    B.Tab
+  ), E = C(
+    (i) => {
+      w?.(i), p?.(i.currentTarget);
     },
-    [y, p]
-  ), k = S(
-    (o) => {
-      T?.(o), p?.();
+    [w, p]
+  ), M = C(
+    (i) => {
+      y?.(i), p?.();
     },
-    [T, p]
-  ), I = j(
-    () => q(t ? "a" : "button"),
+    [y, p]
+  ), h = H(
+    () => U(t ? "a" : "button"),
     [t]
   );
-  if (e && t && F(
+  if (e && t && K(
     "IressTab: You should not use `children` with `href` prop, as the `children` will be seen before the page navigates."
-  ), n) {
-    const o = e && f;
-    return /* @__PURE__ */ E(M, { children: [
+  ), o) {
+    const i = e && m;
+    return /* @__PURE__ */ L(N, { children: [
       /* @__PURE__ */ u(
-        h,
+        k,
         {
-          activate: () => n.activate(c.current),
-          selected: f,
+          activate: () => o.activate(s.current),
+          selected: m,
           children: /* @__PURE__ */ u(
-            I,
+            h,
             {
-              className: w,
+              className: T,
               "aria-controls": e ? `${d}--panel` : void 0,
               role: "tab",
-              "data-testid": i,
-              ...b,
+              "data-testid": a,
+              ...f,
               href: t,
               id: d,
-              onMouseEnter: x,
-              onMouseLeave: k,
-              ref: c,
-              type: m,
+              onMouseEnter: E,
+              onMouseLeave: M,
+              ref: s,
+              type: l,
               children: r
             }
           )
         }
       ),
-      n.panel && K(
+      o.panel && G(
         /* @__PURE__ */ u(
           "div",
           {
             "aria-labelledby": d,
             id: `${d}--panel`,
             role: "tabpanel",
-            onKeyDown: (l) => {
-              (l.key === "ArrowLeft" || l.key === "ArrowRight" || l.key === "ArrowUp" || l.key === "ArrowDown") && l.stopPropagation();
+            onKeyDown: (b) => {
+              (b.key === "ArrowLeft" || b.key === "ArrowRight" || b.key === "ArrowUp" || b.key === "ArrowDown") && b.stopPropagation();
             },
-            hidden: !o,
+            hidden: !i,
             children: e
           }
         ),
-        n.panel,
+        o.panel,
         `${d}--panel`
       )
     ] });
   }
   return /* @__PURE__ */ u(
-    I,
+    h,
     {
-      className: w,
-      "data-testid": i,
-      ...b,
+      className: T,
+      "data-testid": a,
+      ...f,
       href: t,
       id: d,
-      ref: c,
-      type: m,
+      ref: s,
+      type: l,
       children: r
     }
   );
-}, P = L(O);
-P.displayName = "IressTab";
+}, Q = D(P);
+Q.displayName = "IressTab";
 export {
-  P as IressTab
+  Q as IressTab
 };

package/dist/components/TabSet/Tab/Tab.styles.d.ts

@@ -12,6 +12,9 @@ export declare const tab: import('../../../styled-system/types').RecipeRuntimeFn
             _hover: {
                 bg: "[none]";
             };
+            _focusVisible: {
+                layerStyle: "elevation.focusCompact";
+            };
         };
     };
 }>;

package/dist/components/TabSet/Tab/Tab.styles.js

@@ -1,5 +1,5 @@
 import { c as t } from "../../../cva-DtPMccE9.js";
-const e = t({
+const o = t({
   base: {
     alignItems: "center",
     borderBottom: "[2px solid transparent]",
@@ -39,11 +39,14 @@ const e = t({
         borderBottomWidth: "0px",
         _hover: {
           bg: "[none]"
+        },
+        _focusVisible: {
+          layerStyle: "elevation.focusCompact"
         }
       }
     }
   }
 });
 export {
-  e as tab
+  o as tab
 };