@iress-oss/ids-components 6.0.0 → 6.1.0

package/dist/components/Tag/Tag.styles.js

@@ -10,10 +10,10 @@ var t = e({
 		root: {
 			contain: "layout style",
 			alignItems: "center",
-			bg: "[var(--tag-bg, {colors.colour.neutral.20})]",
+			bg: "[var(--tag-bg, {colors.colour.neutral.30})]",
 			borderRadius: "radius.system.tag",
 			border: "divider",
-			borderColor: "[var(--tag-border, transparent)]",
+			borderColor: "[var(--tag-bg, {colors.colour.neutral.30})]",
 			color: "[var(--tag-color, {colors.colour.neutral.80})]",
 			display: "inline-flex",
 			gap: "spacing.1",
@@ -68,71 +68,71 @@ var t = e({
 		mode: {
 			10: { root: {
 				"--tag-bg": "{colors.colour.data.subtle.10}",
-				"--tag-border": "{colors.colour.data.subtle.10}",
+				"--tag-border": "{colors.colour.data.bold.10}",
 				"--tag-color": "{colors.colour.data.bold.10}"
 			} },
 			20: { root: {
 				"--tag-bg": "{colors.colour.data.subtle.20}",
-				"--tag-border": "{colors.colour.data.subtle.20}",
+				"--tag-border": "{colors.colour.data.bold.20}",
 				"--tag-color": "{colors.colour.data.bold.20}"
 			} },
 			30: { root: {
 				"--tag-bg": "{colors.colour.data.subtle.30}",
-				"--tag-border": "{colors.colour.data.subtle.30}",
+				"--tag-border": "{colors.colour.data.bold.30}",
 				"--tag-color": "{colors.colour.data.bold.30}"
 			} },
 			40: { root: {
 				"--tag-bg": "{colors.colour.data.subtle.40}",
-				"--tag-border": "{colors.colour.data.subtle.40}",
+				"--tag-border": "{colors.colour.data.bold.40}",
 				"--tag-color": "{colors.colour.data.bold.40}"
 			} },
 			50: { root: {
 				"--tag-bg": "{colors.colour.data.subtle.50}",
-				"--tag-border": "{colors.colour.data.subtle.50}",
+				"--tag-border": "{colors.colour.data.bold.50}",
 				"--tag-color": "{colors.colour.data.bold.50}"
 			} },
 			60: { root: {
 				"--tag-bg": "{colors.colour.data.subtle.60}",
-				"--tag-border": "{colors.colour.data.subtle.60}",
+				"--tag-border": "{colors.colour.data.bold.60}",
 				"--tag-color": "{colors.colour.data.bold.60}"
 			} },
 			70: { root: {
 				"--tag-bg": "{colors.colour.data.subtle.70}",
-				"--tag-border": "{colors.colour.data.subtle.70}",
+				"--tag-border": "{colors.colour.data.bold.70}",
 				"--tag-color": "{colors.colour.data.bold.70}"
 			} },
 			80: { root: {
 				"--tag-bg": "{colors.colour.data.subtle.80}",
-				"--tag-border": "{colors.colour.data.subtle.80}",
+				"--tag-border": "{colors.colour.data.bold.80}",
 				"--tag-color": "{colors.colour.data.bold.80}"
 			} },
 			90: { root: {
 				"--tag-bg": "{colors.colour.data.subtle.90}",
-				"--tag-border": "{colors.colour.data.subtle.90}",
+				"--tag-border": "{colors.colour.data.bold.90}",
 				"--tag-color": "{colors.colour.data.bold.90}"
 			} },
 			danger: { root: {
 				"--tag-bg": "{colors.colour.system.danger.surface}",
-				"--tag-border": "{colors.colour.system.danger.surface}",
+				"--tag-border": "{colors.colour.system.danger.text}",
 				"--tag-color": "{colors.colour.system.danger.text}"
 			} },
 			info: { root: {
 				"--tag-bg": "{colors.colour.system.info.surface}",
-				"--tag-border": "{colors.colour.system.info.surface}",
+				"--tag-border": "{colors.colour.system.info.text}",
 				"--tag-color": "{colors.colour.system.info.text}"
 			} },
 			success: { root: {
 				"--tag-bg": "{colors.colour.system.success.surface}",
-				"--tag-border": "{colors.colour.system.success.surface}",
+				"--tag-border": "{colors.colour.system.success.text}",
 				"--tag-color": "{colors.colour.system.success.text}"
 			} },
 			warning: { root: {
 				"--tag-bg": "{colors.colour.system.warning.surface}",
-				"--tag-border": "{colors.colour.system.warning.surface}",
+				"--tag-border": "{colors.colour.system.warning.text}",
 				"--tag-color": "{colors.colour.system.warning.text}"
 			} }
 		},
-		bordered: { true: { root: { borderColor: "[currentColor]" } } }
+		bordered: { true: { root: { borderColor: "[var(--tag-border, {colors.colour.neutral.70})]" } } }
 	},
 	compoundVariants: [{
 		bordered: !0,

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

@@ -1,3 +1,2 @@
 export * from './Tag';
 export * from './Tag.styles';
-export * from './TagInput/TagInput';

package/dist/components/Tag/index.js

@@ -1,4 +1,3 @@
 import { tag as e } from "./Tag.styles.js";
 import { IressTag as t } from "./Tag.js";
-import { IressTagInput as n } from "./TagInput/TagInput.js";
-export { t as IressTag, n as IressTagInput, e as tag };
+export { t as IressTag, e as tag };

package/dist/components/{Tag/TagInput → TagInput}/TagInput.d.ts

@@ -1,5 +1,5 @@
 import { SyntheticEvent } from 'react';
-import { InputBaseElement, InputRef, IressInputProps } from '../../Input';
+import { InputBaseElement, InputRef, IressInputProps } from '../Input';
 import { IressTagProps } from '../Tag';
 export interface IressTagInputProps extends Omit<IressInputProps<string>, 'defaultValue' | 'onChange' | 'prepend' | 'value' | 'rows'> {
     /**

package/dist/components/{Tag/TagInput → TagInput}/TagInput.js

@@ -1,13 +1,13 @@
-import { propagateTestid as e } from "../../../helpers/utility/propagateTestid.js";
-import { useControlledState as t } from "../../../hooks/useControlledState.js";
-import { IressInput as n } from "../../Input/Input.js";
-import { getValueAsEvent as r } from "../../../helpers/form/getValueAsEvent.js";
-import { IressTag as i } from "../Tag.js";
-import { IressInline as a } from "../../Inline/Inline.js";
+import { propagateTestid as e } from "../../helpers/utility/propagateTestid.js";
+import { useControlledState as t } from "../../hooks/useControlledState.js";
+import { IressInput as n } from "../Input/Input.js";
+import { getValueAsEvent as r } from "../../helpers/form/getValueAsEvent.js";
+import { IressTag as i } from "../Tag/Tag.js";
+import { IressInline as a } from "../Inline/Inline.js";
 import { tagInput as o } from "./TagInput.styles.js";
 import { forwardRef as s, useCallback as c, useState as l } from "react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
-//#region src/components/Tag/TagInput/TagInput.tsx
+//#region src/components/TagInput/TagInput.tsx
 var f = ({ "data-testid": t, onTagDelete: n, onTagDeleteAll: r, onTagDeleteButtonBlur: a, selectedOptionsTagText: o, tags: s = [], tagLimit: c = 5 }) => s.length ? s.length <= c ? s.map((r) => /* @__PURE__ */ u(i, {
 	deleteButtonText: `Delete ${r}`,
 	onDelete: n,

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

@@ -0,0 +1 @@
+export declare const tagInput: import('../../styled-system/types').SlotRecipeRuntimeFn<"input" | "tag", import('../../styled-system/types').SlotRecipeVariantRecord<"input" | "tag">>;

package/dist/components/{Tag/TagInput → TagInput}/TagInput.styles.js

@@ -1,5 +1,5 @@
-import { t as e } from "../../../sva-DOLIp5Dd.js";
-//#region src/components/Tag/TagInput/TagInput.styles.ts
+import { t as e } from "../../sva-DOLIp5Dd.js";
+//#region src/components/TagInput/TagInput.styles.ts
 var t = e({
 	slots: ["input", "tag"],
 	base: { input: {

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

@@ -0,0 +1,2 @@
+export * from './TagInput';
+export * from './TagInput.styles';

package/dist/components/TagInput/index.js

@@ -0,0 +1,3 @@
+import { tagInput as e } from "./TagInput.styles.js";
+import { IressTagInput as t } from "./TagInput.js";
+export { t as IressTagInput, e as tagInput };

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { FloatingUIAligns, IressStyledProps } from '../../types';
+import { FloatingUIAligns, FloatingUIContainer, IressStyledProps } from '../../types';
 export interface IressTooltipProps extends IressStyledProps {
     /**
      * Sets the alignment of the popover relative to the activator element.
@@ -10,6 +10,11 @@ export interface IressTooltipProps extends IressStyledProps {
      * The element to add a tooltip to.
      */
     children: ReactNode;
+    /**
+     * The container element to render the tooltip into.
+     * Overrides the container set by `IressTooltipProvider`.
+     */
+    container?: FloatingUIContainer;
     /**
      * Sets the tooltip display delay in milliseconds.
      * @default 500
@@ -32,6 +37,6 @@ export interface IressTooltipProps extends IressStyledProps {
     variant?: 'rich';
 }
 export declare const IressTooltip: {
-    ({ children, className, align, delay, open, tooltipText, variant, "data-testid": testid, ...restProps }: IressTooltipProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, className, align, container, delay, open, tooltipText, variant, "data-testid": testid, ...restProps }: IressTooltipProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/Tooltip/Tooltip.js

@@ -5,55 +5,61 @@ 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-COiJC198.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/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/ValidationMessage.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,
@@ -19,7 +19,7 @@ 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",
+		display: "inline-flex",
 		pe: "spacing.1",
 		children: /* @__PURE__ */ a(s, {
 			prefix: d,

package/dist/main.d.ts

@@ -11,6 +11,7 @@ export * from './components/Container';
 export * from './components/Divider';
 export * from './components/Expander';
 export * from './components/Field';
+export * from './components/FieldGroup';
 export * from './components/Hide';
 export * from './components/Icon';
 export * from './components/Image';
@@ -44,6 +45,7 @@ export * from './components/Styled';
 export * from './components/Table';
 export * from './components/TabSet';
 export * from './components/Tag';
+export * from './components/TagInput';
 export * from './components/Text';
 export * from './components/Toaster';
 export * from './components/Toggle';