@iress-oss/ids-components 6.0.0-beta.4 → 6.0.0-beta.5

package/.ai/components/popover.md

@@ -173,6 +173,29 @@ This will be the case when you are rendering into its parent container, which is
 
 [View "ParentContainer" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-popover--parent-container)
 
+### Using the `IressPopoverProvider`
+
+You can use the `IressPopoverProvider` to set a shared container for
+all nested popovers. This is useful when you want all popovers in a
+section of your application to render into the same DOM node, similar
+to how `IressModalProvider` and `IressSlideoutProvider` work.
+
+Individual popovers can still override the provider's container by
+setting their own `container` prop.
+
+> **Note:** If you are already using `IressProvider` or `IressShadow`,
+> you do not need to add `IressPopoverProvider` separately — it is
+> already included. To set a shared container for popovers through
+> `IressProvider`, use the `popoverContainer` prop. You can also set
+> `popoverContainer="container"` to reuse the same container that
+> modals, slideouts and toasts render into.
+
+```tsx
+<AppWithPopoverProvider />
+```
+
+[View "Provider" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-provider--provider)
+
 ## `IressInputPopover`
 
 If you need a popover that is triggered by input changes, you can use the `IressInputPopover` component. This component has an additional `minLength` prop that allows you to specify the minimum number of characters required before the popover is shown.

package/.ai/components/provider.md

@@ -19,10 +19,11 @@ The design system provider automates some set-up tasks for you, including:
 
 - Adding the icon fonts and CSS variables to the document head
 - Consistent container handling for providers, if you need the modals, slideouts and toasts rendered in a specific area (common with micro frontends)
+- Optional separate container for popovers via the `popoverContainer` prop
 
 In most cases, you should wrap the entire application with the `IressProvider` component. This will ensure that the design system is set up correctly and consistently across the application.
 
-> **Note:** `IressProvider` already includes `IressModalProvider`, `IressSlideoutProvider`, `IressToasterProvider`, and `IressIconProvider`. You do not need to add these providers separately when using `IressProvider`. Similarly, `IressShadow` includes `IressProvider` internally, so you do not need any additional providers when using `IressShadow`.
+> **Note:** `IressProvider` already includes `IressModalProvider`, `IressSlideoutProvider`, `IressToasterProvider`, `IressPopoverProvider`, and `IressIconProvider`. You do not need to add these providers separately when using `IressProvider`. Similarly, `IressShadow` includes `IressProvider` internally, so you do not need any additional providers when using `IressShadow`.
 
 ```tsx
 import { IressProvider } from '@iress-oss/ids-components';

package/.ai/skills/ui-doctor.md

@@ -1812,7 +1812,7 @@ Not every raw HTML element is a violation. The following are **acceptable except
 
 #### a. Provider & CSS Setup
 
-- **IressProvider must wrap the application root** — Required for fonts, CSS variables, and theming. `IressProvider` already includes `IressModalProvider`, `IressSlideoutProvider`, `IressToasterProvider`, and `IressIconProvider` — these should not be added separately. Similarly, `IressShadow` includes `IressProvider` internally, so no additional providers are needed when using `IressShadow`.
+- **IressProvider must wrap the application root** — Required for fonts, CSS variables, and theming. `IressProvider` already includes `IressModalProvider`, `IressSlideoutProvider`, `IressToasterProvider`, `IressPopoverProvider`, and `IressIconProvider` — these should not be added separately. Similarly, `IressShadow` includes `IressProvider` internally, so no additional providers are needed when using `IressShadow`.
 - **The IDS component CSS must be imported** — `@iress-oss/ids-components/dist/style.css` contains all component styles
 - Users only need to install `@iress-oss/ids-components@beta` — the tokens are bundled within the component library and do not need to be installed separately. **IDS v6 is currently in beta**, so the `@beta` tag is required (e.g. `npm install @iress-oss/ids-components@beta`)
 - **CSP must allowlist IDS external origins** — If the app enforces a Content Security Policy, `fonts.googleapis.com` and `fonts.gstatic.com` must be in `style-src`/`font-src`. Add `cdn.iress.com` if using legacy Font Awesome icons or `IressTheme`. If using `IressShadow` and inline styles are blocked, add `<meta name="csp-nonce" content="...">` in `<head>`. See the CSP Guide at `node_modules/@iress-oss/ids-components/.ai/guides/get-started-content-security-policy.md` for details (requires `@iress-oss/ids-components` to be installed).

package/.ai/skills/ui-translation.md

@@ -494,7 +494,7 @@ function Dashboard() {
 ## Best Practices
 
 1. **Minimise component nesting** — Use the fewest components possible to achieve the layout. Every wrapper component should earn its place. Before adding `IressInline` or `IressStack`, check whether the parent component already handles the layout (e.g. `IressCard` has `heading` and `footer` props; `IressModal` has `actions`; `IressButtonGroup` handles horizontal button layout). See the "Unnecessary layout wrappers" section in Common Mistakes below.
-2. **Always wrap in IressProvider** — Required at the root of your app for fonts and CSS variables. `IressProvider` already includes `IressModalProvider`, `IressSlideoutProvider`, `IressToasterProvider`, and `IressIconProvider` — do not add these separately. If using `IressShadow`, no additional providers are needed as it includes `IressProvider` internally.
+2. **Always wrap in IressProvider** — Required at the root of your app for fonts and CSS variables. `IressProvider` already includes `IressModalProvider`, `IressSlideoutProvider`, `IressToasterProvider`, `IressPopoverProvider`, and `IressIconProvider` — do not add these separately. If using `IressShadow`, no additional providers are needed as it includes `IressProvider` internally.
 3. **Use IressField for all form inputs** — Provides consistent labels, hints, and validation display
 4. **Use IressStack/IressInline only when needed** — Prefer these over custom CSS flex/grid, but don't add them when the parent already provides spacing or layout
 5. **Use correct spacing token format** — Always prefix with the token category: `gap="spacing.4"`, `p="spacing.6"`. Alias tokens (`"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`) are also valid. Never use bare numbers like `gap="4"`.

package/dist/Provider-DvnuqPfQ.js

@@ -0,0 +1,58 @@
+import { p as e, u as t } from "./constants-D0UW4Ewm.js";
+import { IressIconProvider as n } from "./components/Icon/IconProvider.js";
+import { IressPopoverProvider as r } from "./components/Popover/PopoverProvider.js";
+import { IressModalProvider as i } from "./components/Modal/ModalProvider.js";
+import { IressToasterProvider as a } from "./components/Toaster/ToasterProvider.js";
+import { IressSlideoutProvider as o } from "./components/Slideout/SlideoutProvider.js";
+import { useEffect as s } from "react";
+import { createPortal as c } from "react-dom";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region ../tokens/dist/enums.js
+var d = /* @__PURE__ */ function(e) {
+	return e.Color = "color", e.Dimension = "dimension", e.FontFamily = "fontFamily", e.FontSize = "fontSize", e.Background = "background", e.Border = "border", e.Radius = "radius", e.Shadow = "shadow", e.Typography = "typography", e;
+}({}), f = ".875rem", p = "Ubuntu, Helvetica, sans-serif", m = "Inter, Helvetica, sans-serif", h = ["https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"];
+d.FontSize, d.FontFamily, d.FontFamily, d.Typography, `${p}`, `${f}`, d.Typography, `${p}`, `${f}`, d.Typography, `${p}`, `${f}`, d.Typography, `${p}`, `${f}`, d.Typography, `${p}`, `${f}`, d.Typography, `${m}`, `${f}`, d.Typography, `${m}`, `${f}`, d.Typography, `${m}`, `${f}`, d.Typography, `${m}`, `${f}`, d.Typography, `${m}`, `${f}`, d.Typography, `${m}`, `${f}`, d.Typography, `${m}`, `${f}`, d.Typography, `${m}`, `${f}`, d.Typography, `${f}`;
+//#endregion
+//#region src/components/Provider/Provider.tsx
+var g = ({ children: d, container: f, noDefaultFont: p, noIconProvider: m, noSubsetting: g, popoverContainer: _, position: v, zIndexOffset: y, toasterOffset: b, ...x }) => {
+	s(() => {
+		if (y === void 0) return;
+		let t = document.documentElement, n = t.style.getPropertyValue(e), r = String(y);
+		return t.style.setProperty(e, r), () => {
+			t.style.getPropertyValue(e) === r && (n ? t.style.setProperty(e, n) : t.style.removeProperty(e));
+		};
+	}, [y]), s(() => {
+		if (b === void 0) return;
+		let e = document.documentElement, n = e.style.getPropertyValue(t);
+		return e.style.setProperty(t, b), () => {
+			e.style.getPropertyValue("--iress-toaster-offset") === b && (n ? e.style.setProperty(t, n) : e.style.removeProperty(t));
+		};
+	}, [b]);
+	let S = /* @__PURE__ */ l(r, {
+		container: _ === "container" ? f : _,
+		children: /* @__PURE__ */ u(i, {
+			container: f,
+			children: [/* @__PURE__ */ l(a, {
+				container: f,
+				position: v,
+				children: /* @__PURE__ */ l(o, {
+					container: f,
+					...x,
+					children: d
+				})
+			}), !p && c(h.map((e) => /* @__PURE__ */ l("link", {
+				rel: "stylesheet",
+				href: e,
+				"data-iress-design-system-font": !0
+			}, e)), document.head, "design-system-font")]
+		})
+	});
+	return m ? S : /* @__PURE__ */ l(n, {
+		container: f,
+		noSubsetting: g,
+		children: S
+	});
+};
+g.displayName = "IressProvider";
+//#endregion
+export { h as n, g as t };