@ansible/ansible-ui-framework 2.4.619 → 2.4.621

package/framework/components/Scrollable.d.ts

@@ -1,8 +1,7 @@
-import { CSSProperties, ReactNode } from 'react';
+import { ReactNode } from 'react';
+import './Scrollable.css';
 export declare function Scrollable(props: {
     children?: ReactNode;
     borderTop?: boolean;
     borderBottom?: boolean;
-    className?: string;
-    style?: CSSProperties;
 }): import("react/jsx-runtime").JSX.Element;

package/index.js

@@ -12599,75 +12599,22 @@ function Eg(e) {
   return Oe(() => i(), [t, i]), Wl(t, () => i()), /* @__PURE__ */ v.jsx(NL, { ref: t, className: e.className, style: { height: e.height }, children: /* @__PURE__ */ v.jsx(FL, { children: e.children(n) }) });
 }
 function Ga(e) {
-  const t = it(null), [n, r] = pe(0), [i, a] = pe(0), o = me(() => {
-    if (t.current) {
-      r(Math.min(1, t.current.scrollTop / 8));
-      const f = t.current.scrollHeight - t.current.scrollTop - t.current.clientHeight - 1;
-      a(Math.max(0, Math.min(1, f / 8)));
-    }
+  const t = it(null), [n, r] = pe(!1), [i, a] = pe(!1), o = me(() => {
+    if (!t.current)
+      return;
+    r(t.current.scrollTop > 0);
+    const c = t.current.scrollHeight - t.current.scrollTop - t.current.clientHeight - 1;
+    a(c > 0.1);
   }, []);
-  Oe(() => o(), [o, e.children]), Wl(t, () => {
-    o();
-  });
-  const l = 0.2 * n, s = 0.2 * i, c = e.borderTop ? "thin solid var(--pf-v5-global--BorderColor--100)" : "", u = e.borderBottom ? "thin solid var(--pf-v5-global--BorderColor--100)" : "";
-  return /* @__PURE__ */ v.jsxs(
-    "div",
-    {
-      className: e.className,
-      style: {
-        ...e.style,
-        display: "flex",
-        flexDirection: "column",
-        flexGrow: 1,
-        overflowY: "hidden",
-        position: "relative"
-      },
-      children: [
-        /* @__PURE__ */ v.jsx(
-          "div",
-          {
-            ref: t,
-            style: {
-              display: "flex",
-              flexDirection: "column",
-              flexGrow: 1,
-              overflowY: "auto",
-              borderTop: c,
-              borderBottom: u
-            },
-            onScroll: o,
-            children: e.children
-          }
-        ),
-        /* istanbul ignore next */
-        l > 0 && /* @__PURE__ */ v.jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              top: 0,
-              height: "10px",
-              width: "100%",
-              background: `linear-gradient(rgba(0,0,0,${l}), rgba(0,0,0,0))`
-            }
-          }
-        ),
-        /* istanbul ignore next */
-        s > 0 && /* @__PURE__ */ v.jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              bottom: 0,
-              height: "10px",
-              width: "100%",
-              background: `linear-gradient(rgba(0,0,0,0), rgba(0,0,0,${s}))`
-            }
-          }
-        )
-      ]
-    }
-  );
+  Oe(() => o(), [o, e.children]), Wl(t, () => o());
+  const l = ["scrollable-inner"];
+  e.borderTop && l.push("border-top"), e.borderBottom && l.push("border-bottom");
+  const s = l.join(" ");
+  return /* @__PURE__ */ v.jsxs("div", { className: "scrollable-outer", children: [
+    /* @__PURE__ */ v.jsx("div", { className: s, ref: t, onScroll: o, children: e.children }),
+    n && /* @__PURE__ */ v.jsx("div", { className: "scrollable-shadow-top" }),
+    i && /* @__PURE__ */ v.jsx("div", { className: "scrollable-shadow-bottom" })
+  ] });
 }
 const sA = pi({ columns: 1 }), l5 = 1662 / 24;
 function eEe(e) {
@@ -45630,7 +45577,7 @@ function eAe(e) {
             children: d
           }
         ) }),
-        e.footer ? e.footer : /* @__PURE__ */ v.jsx(Xn, { variant: "light", isFilled: !1, children: /* @__PURE__ */ v.jsxs(QTe, { children: [
+        e.footer ? e.footer : /* @__PURE__ */ v.jsx(Xn, { variant: "light", isFilled: !1, className: "bg-lighten border-top", children: /* @__PURE__ */ v.jsxs(QTe, { children: [
           /* @__PURE__ */ v.jsx(S$, { children: e.submitText }),
           e.additionalActionText ? /* @__PURE__ */ v.jsx(Re, { "aria-label": e.additionalActionText, type: "submit", variant: "secondary", children: e.additionalActionText }) : null,
           e.onCancel && /* @__PURE__ */ v.jsx(ZTe, { onCancel: e.onCancel, children: e.cancelText ?? c.cancelText })