@iress-oss/ids-components 6.0.0 → 6.1.0

package/dist/components/Select/components/SelectOptions.js

@@ -1,149 +1,162 @@
-import { toArray as e } from "../../../helpers/formatting/toArray.js";
-import { IressAlert as t } from "../../Alert/Alert.js";
-import { getValueAsEvent as n } from "../../../helpers/form/getValueAsEvent.js";
-import { IressMenuDivider as r } from "../../Menu/MenuDivider/MenuDivider.js";
-import { toPrimitiveValue as i } from "../helpers/toPrimitiveValue.js";
-import { IressSelectSearch as a } from "../SelectSearch/SelectSearch.js";
-import { IressSelectHeading as o } from "../SelectHeading/SelectHeading.js";
-import { IressSelectMenu as s } from "../SelectMenu/SelectMenu.js";
-import { IressSelectSearchInput as c } from "../SelectSearchInput/SelectSearchInput.js";
-import { useCallback as l, useEffect as u, useId as d, useRef as f } from "react";
-import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { IressText as e } from "../../Text/Text.js";
+import { IressSpinner as t } from "../../Spinner/Spinner.js";
+import { toArray as n } from "../../../helpers/formatting/toArray.js";
+import { IressAlert as r } from "../../Alert/Alert.js";
+import { getValueAsEvent as i } from "../../../helpers/form/getValueAsEvent.js";
+import { IressMenuDivider as a } from "../../Menu/MenuDivider/MenuDivider.js";
+import { IressInline as o } from "../../Inline/Inline.js";
+import { toPrimitiveValue as s } from "../helpers/toPrimitiveValue.js";
+import { IressSelectSearch as c } from "../SelectSearch/SelectSearch.js";
+import { IressSelectHeading as l } from "../SelectHeading/SelectHeading.js";
+import { IressSelectMenu as u } from "../SelectMenu/SelectMenu.js";
+import { IressSelectSearchInput as d } from "../SelectSearchInput/SelectSearchInput.js";
+import { useCallback as f, useEffect as p, useId as m, useRef as h } from "react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
 //#region src/components/Select/components/SelectOptions.tsx
-var g = ({ minSearchLength: e, multiSelect: t, onChange: n, query: r, results: i, shouldShowInstructions: a, shouldShowNoResults: o, value: c }) => /* @__PURE__ */ m(s, {
-	heading: t ? "Search results" : void 0,
-	items: i,
-	multiSelect: t,
+var y = ({ debouncedQuery: e, minSearchLength: t, multiSelect: n, onChange: r, query: i, results: a, shouldShowInstructions: o, shouldShowNoResults: s, value: c }) => /* @__PURE__ */ _(u, {
+	heading: n && a.length && e ? `Search results (${a.length})` : void 0,
+	items: a,
+	multiSelect: n,
 	noResults: (() => {
-		if (r) {
-			if (a) return `Type at least ${e} character${e === 1 ? "" : "s"} to search`;
-			if (o) return "No results found";
+		if (i) {
+			if (o) return `Type at least ${t} character${t === 1 ? "" : "s"} to search`;
+			if (s) return "No results found";
 		}
 	})(),
-	onChange: n,
+	onChange: r,
 	selected: c,
-	hideSelectedItems: t
+	hideSelectedItems: n
 });
-g.displayName = "SelectAsyncResults";
-var _ = ({ error: e }) => e ? /* @__PURE__ */ m(t, {
+y.displayName = "SelectAsyncResults";
+var b = ({ error: e }) => e ? /* @__PURE__ */ _(r, {
 	status: "danger",
-	children: typeof e == "string" ? e : /* @__PURE__ */ h(p, { children: [
+	children: typeof e == "string" ? e : /* @__PURE__ */ v(g, { children: [
 		"An unknown error occurred.",
-		/* @__PURE__ */ m("br", {}),
+		/* @__PURE__ */ _("br", {}),
 		" Please contact support if the error persists."
 	] })
 }) : null;
-_.displayName = "SelectAsyncError";
-var v = ({ autoHighlight: t, error: n, loading: i, minSearchLength: l, multiSelect: p, onChange: v, onClear: y, query: b, results: x, setQuery: S, show: C, value: w, shouldShowInstructions: T, shouldShowNoResults: E }) => {
-	let D = e(w).map((e) => {
+b.displayName = "SelectAsyncError";
+var x = ({ autoHighlight: r, debouncedQuery: i, error: s, loading: f, minSearchLength: g, multiSelect: x, onChange: S, onClear: C, query: w, results: T, setQuery: E, show: D, value: O, shouldShowInstructions: k, shouldShowNoResults: A }) => {
+	let j = n(O).map((e) => {
 		let { formattedLabel: t, ...n } = e;
 		return n;
-	}), O = !n && (!!x?.length || b && !i), k = !!D.length && p, A = O && k, j = f(null), M = d();
-	u(() => {
-		C || S?.("");
-	}, [C, S]);
-	let N = k ? D.length + 1 : 0;
-	return /* @__PURE__ */ h(a, {
-		activator: /* @__PURE__ */ m(c, {
+	}), M = !s && (!!T?.length || w && !f), N = !!j.length && x, P = M && N, F = h(null), I = m();
+	p(() => {
+		D || E?.("");
+	}, [D, E]);
+	let L = N ? j.length + 1 : 0;
+	return /* @__PURE__ */ v(c, {
+		activator: /* @__PURE__ */ _(d, {
 			"aria-label": "Search",
-			loading: i,
-			onChange: (e) => S?.(e.target.value),
-			ref: j,
+			onChange: (e) => E?.(e.target.value),
+			ref: F,
 			placeholder: "Search and select",
-			value: b
+			value: w
 		}),
-		autoHighlight: t,
-		focusStartIndex: t ? b && O ? N : +!!k : void 0,
+		autoHighlight: r,
+		focusStartIndex: r ? w && M ? L : +!!N : void 0,
 		children: [
-			k && /* @__PURE__ */ m(s, {
-				"aria-labelledby": M,
-				heading: /* @__PURE__ */ m(o, {
+			N && /* @__PURE__ */ _(u, {
+				"aria-labelledby": I,
+				heading: /* @__PURE__ */ _(l, {
 					clearAll: !0,
 					onClearAll: (e) => {
-						y?.(e), j.current?.focus();
+						C?.(e), F.current?.focus();
 					},
-					children: /* @__PURE__ */ h("h2", {
-						id: M,
+					children: /* @__PURE__ */ v("span", {
+						id: I,
 						children: [
 							"Selected (",
-							D.length,
+							j.length,
 							")"
 						]
 					})
 				}),
-				items: D,
-				multiSelect: p,
-				onChange: v,
-				selected: w
+				items: j,
+				multiSelect: x,
+				onChange: S,
+				selected: O
 			}),
-			A && /* @__PURE__ */ m(r, {}),
-			O && /* @__PURE__ */ m(g, {
-				minSearchLength: l,
-				multiSelect: p,
-				onChange: v,
-				query: b,
-				results: x,
-				value: w,
-				shouldShowInstructions: T,
-				shouldShowNoResults: E
+			P && /* @__PURE__ */ _(a, {}),
+			f && !T.length && /* @__PURE__ */ v(o, {
+				gap: "sm",
+				verticalAlign: "middle",
+				p: "spacing.3",
+				children: [/* @__PURE__ */ _(t, { color: "colour.neutral.70" }), /* @__PURE__ */ _(e, {
+					color: "colour.neutral.70",
+					children: "Loading results..."
+				})]
 			}),
-			/* @__PURE__ */ m(_, { error: n })
+			M && /* @__PURE__ */ _(y, {
+				debouncedQuery: i,
+				minSearchLength: g,
+				multiSelect: x,
+				onChange: S,
+				query: w,
+				results: T,
+				value: O,
+				shouldShowInstructions: k,
+				shouldShowNoResults: A
+			}),
+			/* @__PURE__ */ _(b, { error: s })
 		]
 	});
 };
-v.displayName = "SelectAsyncOptions";
-var y = ({ autoHighlight: e, debouncedQuery: t, error: r, initialOptions: a, loading: o, minSearchLength: c, multiSelect: u, onChange: d, options: f, query: p, renderOptions: h, results: g, setQuery: _, setShow: y, setValue: b, show: x, shouldShowInstructions: S, shouldShowNoResults: C, value: w }) => {
-	let T = typeof f == "function", E = a ?? (T ? [] : f), D = g.length ? g : E, O = l((e) => {
-		b(e);
-		let t = i(e);
-		d?.(n(t), t, e), u || y(!1);
+x.displayName = "SelectAsyncOptions";
+var S = ({ autoHighlight: e, debouncedQuery: t, error: n, initialOptions: r, loading: a, minSearchLength: o, multiSelect: c, onChange: l, options: d, query: p, renderOptions: m, results: h, setQuery: g, setShow: v, setValue: y, show: b, shouldShowInstructions: S, shouldShowNoResults: C, value: w }) => {
+	let T = typeof d == "function", E = r ?? (T ? [] : d), D = h.length ? h : E, O = f((e) => {
+		y(e);
+		let t = s(e);
+		l?.(i(t), t, e), c || v(!1);
 	}, [
+		v,
 		y,
-		b,
-		d,
-		u
-	]), k = l((e) => {
+		l,
+		c
+	]), k = f((e) => {
 		e.stopPropagation();
 		let t = [];
-		b(t);
-		let r = i(t);
-		d?.(n(r), r, t);
-	}, [b, d]);
-	return h ? h({
-		close: () => y(!1),
+		y(t);
+		let n = s(t);
+		l?.(i(n), n, t);
+	}, [y, l]);
+	return m ? m({
+		close: () => v(!1),
 		debouncedQuery: t,
-		error: r,
+		error: n,
 		handleClear: k,
 		handleMenuChange: O,
-		loading: o,
+		loading: a,
 		query: p,
 		results: D,
-		setValue: b,
-		setQuery: _,
-		show: x,
+		setValue: y,
+		setQuery: g,
+		show: b,
 		value: w
-	}) : T ? /* @__PURE__ */ m(v, {
+	}) : T ? /* @__PURE__ */ _(x, {
 		autoHighlight: e,
-		error: r,
-		loading: o,
-		minSearchLength: c,
-		multiSelect: u,
+		debouncedQuery: t,
+		error: n,
+		loading: a,
+		minSearchLength: o,
+		multiSelect: c,
 		onChange: O,
 		onClear: k,
 		query: p,
-		results: g,
-		setQuery: _,
-		show: x,
+		results: h,
+		setQuery: g,
+		show: b,
 		value: w,
 		shouldShowInstructions: S,
 		shouldShowNoResults: C
-	}) : /* @__PURE__ */ m(s, {
+	}) : /* @__PURE__ */ _(u, {
 		items: D,
-		multiSelect: u,
+		multiSelect: c,
 		onChange: O,
 		selected: w
 	});
 };
-y.displayName = "SelectOptions";
+S.displayName = "SelectOptions";
 //#endregion
-export { y as SelectOptions };
+export { S as SelectOptions };

package/dist/components/Select/index.js

@@ -6,7 +6,7 @@ import { IressSelectHeading as i } from "./SelectHeading/SelectHeading.js";
 import { IressSelectMenu as a } from "./SelectMenu/SelectMenu.js";
 import { IressSelectSearchInput as o } from "./SelectSearchInput/SelectSearchInput.js";
 import { nativeSelect as s } from "./components/NativeSelect.styles.js";
-import { n as c } from "../../Autocomplete-CuUjmIAw.js";
+import { n as c } from "../../Autocomplete-BRGD9dSh.js";
 import { IressSelectBody as l } from "./SelectBody/SelectBody.js";
 import { IressSelectCreate as u } from "./SelectCreate/SelectCreate.js";
 export { c as IressSelect, l as IressSelectBody, u as IressSelectCreate, i as IressSelectHeading, t as IressSelectLabel, a as IressSelectMenu, r as IressSelectSearch, o as IressSelectSearchInput, n as IressSelectTags, s as nativeSelect, e as select };

package/dist/components/Slideout/Slideout.styles.js

@@ -33,6 +33,7 @@ var t = e({
 		footer: { borderBlockStart: "divider" },
 		closeButton: {
 			position: "absolute",
+			zIndex: "[1]",
 			insetInlineEnd: "spacing.1",
 			insetBlockStart: "spacing.1"
 		}

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

@@ -3,6 +3,11 @@ import { ReactNode } from 'react';
 import { FormControlValue, IressStyledProps } from '../../types';
 import { IressCustomiseSlot } from '../../interfaces';
 export interface IressTabSetProps extends Omit<IressStyledProps, 'onChange'> {
+    /**
+     * Content rendered alongside the tablist in the tab bar row, but outside the tablist itself.
+     * Useful for placing action buttons (e.g. "Add tab") at the end of the tab bar.
+     */
+    append?: ReactNode;
     /**
      * Content to be displayed inside the IressTabs, usually multiple `IressTab`.
      */
@@ -43,6 +48,6 @@ export interface IressTabSetProps extends Omit<IressStyledProps, 'onChange'> {
     type?: 'primary' | 'secondary';
 }
 export declare const IressTabSet: {
-    ({ children, className, defaultSelected, layout, onChange, panelStyle, selected, tabHolderStyle, type, ...restProps }: IressTabSetProps): import("react/jsx-runtime").JSX.Element;
+    ({ append, children, className, defaultSelected, layout, onChange, panelStyle, selected, tabHolderStyle, type, ...restProps }: IressTabSetProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/TabSet/TabSet.js

@@ -62,18 +62,18 @@ var g = (e) => {
 		ref: i,
 		style: t
 	});
-}, v = ({ children: a, className: c, defaultSelected: u, layout: v = "top-left", onChange: y, panelStyle: b, selected: x, tabHolderStyle: S, type: C, ...w }) => {
-	let [T, E] = f(null), [D, O] = f(!1), [k, A] = f(!1), j = d(null), M = s({
-		layout: v,
-		overflowStart: D,
-		overflowEnd: k,
-		type: C
+}, v = ({ append: a, children: c, className: u, defaultSelected: v, layout: y = "top-left", onChange: b, panelStyle: x, selected: S, tabHolderStyle: C, type: w, ...T }) => {
+	let [E, D] = f(null), [O, k] = f(!1), [A, j] = f(!1), M = d(null), N = s({
+		layout: y,
+		overflowStart: O,
+		overflowEnd: A,
+		type: w
 	});
 	return l(() => {
-		let e = j.current?.querySelector("[role=\"tablist\"]"), t = () => {
+		let e = M.current?.querySelector("[role=\"tablist\"]"), t = () => {
 			if (e) {
 				let { scrollWidth: t, clientWidth: n, scrollLeft: r } = e;
-				t > n ? (O(r > 1), A(r < t - n - 1)) : (O(!1), A(!1));
+				t > n ? (k(r > 1), j(r < t - n - 1)) : (k(!1), j(!1));
 			}
 		};
 		t(), e?.addEventListener("scroll", t);
@@ -81,40 +81,44 @@ var g = (e) => {
 		return e && typeof ResizeObserver < "u" && (n = new ResizeObserver(t), n.observe(e)), () => {
 			e?.removeEventListener("scroll", t), n?.disconnect();
 		};
-	}, [a]), /* @__PURE__ */ m(o, {
-		defaultSelected: u,
-		onChange: y,
-		panel: T,
-		selected: x,
-		type: C,
+	}, [c]), /* @__PURE__ */ m(o, {
+		defaultSelected: v,
+		onChange: b,
+		panel: E,
+		selected: S,
+		type: w,
 		children: /* @__PURE__ */ m(t.div, {
-			className: e(c, M.root, n.TabSet),
-			...w,
-			children: a && /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ h(t.div, {
-				...S,
-				ref: j,
-				className: e(M.listHolder, S?.className),
+			className: e(u, N.root, n.TabSet),
+			...T,
+			children: c && /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ h(t.div, {
+				...C,
+				ref: M,
+				className: e(N.listHolder, C?.className),
 				children: [
-					D && /* @__PURE__ */ m("div", { className: M.overflowStartIndicator }),
-					k && /* @__PURE__ */ m("div", { className: M.overflowEndIndicator }),
+					O && /* @__PURE__ */ m("div", { className: N.overflowStartIndicator }),
+					A && /* @__PURE__ */ m("div", { className: N.overflowEndIndicator }),
 					/* @__PURE__ */ h(i, {
 						render: /* @__PURE__ */ m("div", {
-							className: M.list,
+							className: N.list,
 							role: "tablist"
 						}),
 						loop: !1,
 						children: [
-							/* @__PURE__ */ m(_, { className: M.activeIndicator }),
-							/* @__PURE__ */ m(g, { className: M.hoverIndicator }),
-							a
+							/* @__PURE__ */ m(_, { className: N.activeIndicator }),
+							/* @__PURE__ */ m(g, { className: N.hoverIndicator }),
+							c
 						]
+					}),
+					a && /* @__PURE__ */ m("div", {
+						className: N.append,
+						children: a
 					})
 				]
 			}), /* @__PURE__ */ m(t.div, {
-				...b,
-				className: e(M.panel, b?.className),
-				"data-testid": b?.["data-testid"] ?? r(w["data-testid"], "panel"),
-				ref: E
+				...x,
+				className: e(N.panel, x?.className),
+				"data-testid": x?.["data-testid"] ?? r(T["data-testid"], "panel"),
+				ref: D
 			})] })
 		})
 	});

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

@@ -1,4 +1,4 @@
-export declare const tabSet: import('../../styled-system/types').SlotRecipeRuntimeFn<"list" | "root" | "hoverIndicator" | "panel" | "listHolder" | "activeIndicator" | "overflowEndIndicator" | "overflowStartIndicator", {
+export declare const tabSet: import('../../styled-system/types').SlotRecipeRuntimeFn<"append" | "list" | "root" | "hoverIndicator" | "panel" | "listHolder" | "activeIndicator" | "overflowEndIndicator" | "overflowStartIndicator", {
     layout: {
         'top-left': {
             list: {

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

@@ -6,6 +6,7 @@ var t = e({
 		"list",
 		"listHolder",
 		"panel",
+		"append",
 		"activeIndicator",
 		"hoverIndicator",
 		"overflowEndIndicator",
@@ -22,6 +23,8 @@ var t = e({
 			overflowX: "clip",
 			overflowY: "visible",
 			pt: "spacing.2",
+			display: "flex",
+			alignItems: "stretch",
 			_after: {
 				content: "\"\"",
 				position: "absolute",
@@ -32,13 +35,22 @@ var t = e({
 				pointerEvents: "none"
 			}
 		},
+		append: {
+			display: "flex",
+			alignItems: "center",
+			marginLeft: "auto",
+			flexShrink: "[0]",
+			pb: "spacing.1"
+		},
 		list: {
 			display: "flex",
 			flexWrap: "nowrap",
 			scrollable: "x",
 			overflowY: "visible",
 			scrollSnapType: "[x proximity]",
-			position: "relative"
+			position: "relative",
+			flex: "[1 1 auto]",
+			minWidth: "[0]"
 		},
 		panel: {
 			textStyle: "typography.body.md",

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

@@ -48,91 +48,91 @@ export declare const tag: import('../../styled-system/types').SlotRecipeRuntimeF
         '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}";
             };
         };
@@ -140,7 +140,7 @@ export declare const tag: import('../../styled-system/types').SlotRecipeRuntimeF
     bordered: {
         true: {
             root: {
-                borderColor: "[currentColor]";
+                borderColor: "[var(--tag-border, {colors.colour.neutral.70})]";
             };
         };
     };