@iress-oss/ids-components 6.0.1 → 6.2.0

package/dist/components/Tooltip/Tooltip.js

@@ -1,59 +1,65 @@
-import { t as e } from "../../cx-CZ8IJJTy.js";
-import { t } from "../../factory-sKbby7-S.js";
+import { t as e } from "../../cx-QcEwjve6.js";
+import { t } from "../../factory-BKr3zaf6.js";
 import { GlobalCSSClass as n } from "../../enums.js";
 import { idsLogger as r } from "../../helpers/utility/idsLogger.js";
 import { propagateTestid as i } from "../../helpers/utility/propagateTestid.js";
 import { toArray as a } from "../../helpers/formatting/toArray.js";
 import { focusableElements as o } from "../../helpers/dom/focusableElements.js";
-import { C as s, S as c, d as l, g as u, h as d, m as f, u as p, w as m, x as h, y as g } from "../../floating-ui.react-COiJC198.js";
-import { tooltip as _ } from "./Tooltip.styles.js";
-import { Fragment as v, useEffect as y, useState as b } from "react";
-import { jsx as x, jsxs as S } from "react/jsx-runtime";
+import { C as s, S as c, d as l, g as u, h as d, m as f, s as p, u as m, w as h, x as g, y as _ } from "../../floating-ui.react-TDMXDOBr.js";
+import { tooltip as v } from "./Tooltip.styles.js";
+import { useTooltipContainer as y } from "./hooks/useTooltipContainer.js";
+import { Fragment as b, useEffect as x, useState as S } from "react";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
 //#region src/components/Tooltip/Tooltip.tsx
-var C = ({ children: C, className: w, align: T = "top", delay: E = 500, open: D = !1, tooltipText: O, variant: k, "data-testid": A, ...j }) => {
-	let M = _({ variant: k }), N = T === "auto", [P, F] = b(D), { refs: I, floatingStyles: L, context: R } = l({
-		placement: N ? void 0 : T,
-		open: P,
-		onOpenChange: F,
+var T = ({ children: T, className: E, align: D = "top", container: O, delay: k = 500, open: A = !1, tooltipText: j, variant: M, "data-testid": N, ...P }) => {
+	let F = v({ variant: M }), I = D === "auto", { container: L } = y(), R = O === void 0 ? L : O, [z, B] = S(A), { refs: V, floatingStyles: H, context: U } = l({
+		placement: I ? void 0 : D,
+		open: z,
+		onOpenChange: B,
 		middleware: [
 			s(5),
-			N ? h() : c(),
-			m()
+			I ? g() : c(),
+			h()
 		]
-	}), { getReferenceProps: z, getFloatingProps: B } = u([
-		d(R, {
+	}), { getReferenceProps: W, getFloatingProps: G } = u([
+		d(U, {
 			move: !1,
-			restMs: E
+			restMs: k
 		}),
-		f(R),
-		p(R),
-		g(R, { role: "tooltip" })
+		f(U),
+		m(U),
+		_(U, { role: "tooltip" })
 	]);
-	return y(() => {
-		!C || !I.reference.current || o(I.reference.current).length > 0 || r("IressTooltip: The content that activates the tooltip is not focusable,\n            which is a failure of WCAG Level AA Success Criterion 1.4.13 - Content on Hover or Focus.\n            To fix this warning, change the activator to either IressButton, IressMenuItem or another focusable component.", "warn");
-	}, [C, I.reference]), /* @__PURE__ */ S(t.div, {
-		className: e(M.root, w, n.Tooltip),
-		...j,
-		"data-testid": A,
-		children: [/* @__PURE__ */ x("div", {
-			className: M.activator,
-			"data-testid": i(A, "activator"),
-			ref: I.setReference,
-			...z(),
-			children: C
-		}), P && /* @__PURE__ */ x("div", {
-			className: M.content,
-			style: L,
-			"data-testid": i(A, "tooltip-text"),
-			ref: I.setFloating,
-			...B(),
-			children: k === "rich" ? a(O).map((e, t) => /* @__PURE__ */ x("span", {
-				className: t === 0 ? M.richName : M.richMeta,
-				children: e
-			}, t)) : a(O).map((e, t, n) => /* @__PURE__ */ S(v, { children: [e, t < n.length - 1 && /* @__PURE__ */ x("br", {})] }, t))
-		})]
+	x(() => {
+		!T || !V.reference.current || o(V.reference.current).length > 0 || r("IressTooltip: The content that activates the tooltip is not focusable,\n            which is a failure of WCAG Level AA Success Criterion 1.4.13 - Content on Hover or Focus.\n            To fix this warning, change the activator to either IressButton, IressMenuItem or another focusable component.", "warn");
+	}, [T, V.reference]);
+	let K = z && /* @__PURE__ */ C("div", {
+		className: F.content,
+		style: H,
+		"data-testid": i(N, "tooltip-text"),
+		ref: V.setFloating,
+		...G(),
+		children: M === "rich" ? a(j).map((e, t) => /* @__PURE__ */ C("span", {
+			className: t === 0 ? F.richName : F.richMeta,
+			children: e
+		}, t)) : a(j).map((e, t, n) => /* @__PURE__ */ w(b, { children: [e, t < n.length - 1 && /* @__PURE__ */ C("br", {})] }, t))
+	});
+	return /* @__PURE__ */ w(t.div, {
+		className: e(F.root, E, n.Tooltip),
+		...P,
+		"data-testid": N,
+		children: [/* @__PURE__ */ C("div", {
+			className: F.activator,
+			"data-testid": i(N, "activator"),
+			ref: V.setReference,
+			...W(),
+			children: T
+		}), R ? /* @__PURE__ */ C(p, {
+			root: R,
+			children: K
+		}) : K]
 	});
 };
-C.displayName = "IressTooltip";
+T.displayName = "IressTooltip";
 //#endregion
-export { C as IressTooltip };
+export { T as IressTooltip };

package/dist/components/Tooltip/Tooltip.styles.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../sva-DOLIp5Dd.js";
+import { t as e } from "../../sva-DGhdmNso.js";
 //#region src/components/Tooltip/Tooltip.styles.ts
 var t = e({
 	slots: [

package/dist/components/Tooltip/TooltipProvider.d.ts

@@ -0,0 +1,27 @@
+import { PropsWithChildren } from 'react';
+import { FloatingUIContainer } from '../../types';
+export interface IressTooltipProviderProps extends PropsWithChildren {
+    /**
+     * The container element to render nested tooltips into.
+     * By default, tooltips render where their parent is rendered.
+     *
+     * Individual tooltips can override this by setting their own `container` prop.
+     */
+    container?: FloatingUIContainer;
+}
+/**
+ * Provides a shared container context for nested tooltips to render into.
+ *
+ * @example
+ * ```tsx
+ * import { IressTooltipProvider } from '@iress-oss/ids-components';
+ *
+ * <IressTooltipProvider container={document.getElementById('tooltip-root')}>
+ *   {children}
+ * </IressTooltipProvider>
+ * ```
+ */
+export declare const IressTooltipProvider: {
+    ({ children, container, }: IressTooltipProviderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/Tooltip/TooltipProvider.js

@@ -0,0 +1,14 @@
+import { TooltipContainerContext as e } from "./hooks/useTooltipContainer.js";
+import { useMemo as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/Tooltip/TooltipProvider.tsx
+var r = ({ children: r, container: i }) => {
+	let a = t(() => ({ container: i }), [i]);
+	return /* @__PURE__ */ n(e.Provider, {
+		value: a,
+		children: r
+	});
+};
+r.displayName = "IressTooltipProvider";
+//#endregion
+export { r as IressTooltipProvider };

package/dist/components/Tooltip/hooks/useTooltipContainer.d.ts

@@ -0,0 +1,17 @@
+import { FloatingUIContainer } from '../../../types';
+export interface TooltipContainerContextValue {
+    /**
+     * The container element to render tooltips into.
+     * By default, tooltips render where their parent is rendered.
+     */
+    container?: FloatingUIContainer;
+}
+/**
+ * Context used by `IressTooltipProvider` to supply a shared container
+ * to all nested `IressTooltip` components.
+ */
+export declare const TooltipContainerContext: import('react').Context<TooltipContainerContextValue | undefined>;
+/**
+ * Returns the container supplied by the nearest `IressTooltipProvider`, if any.
+ */
+export declare const useTooltipContainer: () => TooltipContainerContextValue;

package/dist/components/Tooltip/hooks/useTooltipContainer.js

@@ -0,0 +1,5 @@
+import { createContext as e, useContext as t } from "react";
+//#region src/components/Tooltip/hooks/useTooltipContainer.ts
+var n = e(void 0), r = () => t(n) ?? {};
+//#endregion
+export { n as TooltipContainerContext, r as useTooltipContainer };

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

@@ -1,2 +1,6 @@
 export * from './Tooltip';
 export * from './Tooltip.styles';
+export { IressTooltipProvider } from './TooltipProvider';
+export type { IressTooltipProviderProps } from './TooltipProvider';
+export { TooltipContainerContext, useTooltipContainer, } from './hooks/useTooltipContainer';
+export type { TooltipContainerContextValue } from './hooks/useTooltipContainer';

package/dist/components/Tooltip/index.js

@@ -1,3 +1,5 @@
 import { tooltip as e } from "./Tooltip.styles.js";
-import { IressTooltip as t } from "./Tooltip.js";
-export { t as IressTooltip, e as tooltip };
+import { TooltipContainerContext as t, useTooltipContainer as n } from "./hooks/useTooltipContainer.js";
+import { IressTooltip as r } from "./Tooltip.js";
+import { IressTooltipProvider as i } from "./TooltipProvider.js";
+export { r as IressTooltip, i as IressTooltipProvider, t as TooltipContainerContext, e as tooltip, n as useTooltipContainer };

package/dist/components/ValidationMessage/ValidationLink/ValidationLink.js

@@ -1,4 +1,4 @@
-import { t as e } from "../../../cx-CZ8IJJTy.js";
+import { t as e } from "../../../cx-QcEwjve6.js";
 import { GlobalCSSClass as t } from "../../../enums.js";
 import { IressValidationMessage as n } from "../ValidationMessage.js";
 import { jsx as r } from "react/jsx-runtime";

package/dist/components/ValidationMessage/ValidationMessage.js

@@ -1,5 +1,5 @@
-import { t as e } from "../../cx-CZ8IJJTy.js";
-import { t } from "../../factory-sKbby7-S.js";
+import { t as e } from "../../cx-QcEwjve6.js";
+import { t } from "../../factory-BKr3zaf6.js";
 import { GlobalCSSClass as n } from "../../enums.js";
 import { IressText as r } from "../Text/Text.js";
 import { capitalizeFirstLetter as i } from "../../helpers/formatting/capitalizeFirstLetter.js";
@@ -7,7 +7,7 @@ import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/ValidationMessage/ValidationMessage.tsx
 var s = ({ prefix: e, status: t = "danger" }) => e || `${t === "danger" ? "Error" : i(t)}: `, c = (e) => e.tagName === "SELECT" && !e.disabled || !!e.name && !e.disabled && e.type !== "file" && e.type !== "reset" && e.type !== "submit" && e.type !== "button", l = ({ children: i, className: l, linkToTarget: u, prefix: d, status: f = "danger", visiblePrefix: p = !1, ...m }) => /* @__PURE__ */ o(r, {
 	color: `colour.system.${f}.text`,
-	display: "block",
+	display: "flex",
 	...m,
 	element: u ? "a" : "div",
 	href: u ? `#${u}` : void 0,
@@ -18,8 +18,8 @@ var s = ({ prefix: e, status: t = "danger" }) => e || `${t === "danger" ? "Error
 	},
 	className: e(l, n.ValidationMessage),
 	children: [/* @__PURE__ */ a(t.div, {
-		srOnly: p ? void 0 : !0,
-		display: "inline",
+		srOnly: !p || void 0,
+		display: "inline-flex",
 		pe: "spacing.1",
 		children: /* @__PURE__ */ a(s, {
 			prefix: d,

package/dist/components/ValidationMessage/ValidationSummary/ValidationSummary.js

@@ -1,5 +1,5 @@
-import { t as e } from "../../../cx-CZ8IJJTy.js";
-import { t } from "../../../factory-sKbby7-S.js";
+import { t as e } from "../../../cx-QcEwjve6.js";
+import { t } from "../../../factory-BKr3zaf6.js";
 import { GlobalCSSClass as n } from "../../../enums.js";
 import { propagateTestid as r } from "../../../helpers/utility/propagateTestid.js";
 import { useIdIfNeeded as i } from "../../../hooks/useIdIfNeeded.js";