@persona/design-system 0.1.5-pre.4

package/dist/lib/TruncatedTextWithTooltip.cjs

@@ -0,0 +1,34 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+require("../chunk-CoPdw6nB.cjs");
+const require_lib_useIsOverflow = require("./useIsOverflow.cjs");
+const require_lib_TruncatedText = require("./TruncatedText.cjs");
+const require_Tooltip = require("../Tooltip-0i_15ysU.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+//#region lib/TruncatedTextWithTooltip.tsx
+/**
+* Truncates the text if it is too long to fit in the container and shows a tooltip if the text
+* is truncated.
+*/
+const TruncatedTextWithTooltip = ({ children, tooltipProps = {}, ...props }) => {
+	const ref = (0, react.useRef)(null);
+	const { isOverflowWidth } = require_lib_useIsOverflow.useIsOverflow(ref);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
+		trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_lib_TruncatedText.OverflowEllipsisSpan, {
+			ref,
+			...props,
+			children
+		}),
+		disabled: !isOverflowWidth,
+		...tooltipProps,
+		children
+	});
+};
+//#endregion
+exports.TruncatedTextWithTooltip = TruncatedTextWithTooltip;
+exports.default = TruncatedTextWithTooltip;
+
+//# sourceMappingURL=TruncatedTextWithTooltip.cjs.map

package/dist/lib/TruncatedTextWithTooltip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TruncatedTextWithTooltip.cjs","names":["useIsOverflow","Tooltip","OverflowEllipsisSpan"],"sources":["../../lib/TruncatedTextWithTooltip.tsx"],"sourcesContent":["import { type ComponentProps, type ComponentPropsWithoutRef, type FC, useRef } from 'react';\n\nimport Tooltip from 'design-system/components/Tooltip';\nimport { OverflowEllipsisSpan } from 'design-system/lib/TruncatedText';\nimport { useIsOverflow } from 'design-system/lib/useIsOverflow';\n\ninterface TruncatedTextWithTooltipProps extends ComponentPropsWithoutRef<'span'> {\n  tooltipProps?: Pick<ComponentProps<typeof Tooltip>, 'side' | 'zIndex' | 'maxWidth'>;\n}\n\n/**\n * Truncates the text if it is too long to fit in the container and shows a tooltip if the text\n * is truncated.\n */\nexport const TruncatedTextWithTooltip: FC<TruncatedTextWithTooltipProps> = ({\n  children,\n  tooltipProps = {},\n  ...props\n}) => {\n  const ref = useRef<HTMLSpanElement>(null);\n  const { isOverflowWidth } = useIsOverflow(ref);\n\n  return (\n    <Tooltip\n      trigger={\n        <OverflowEllipsisSpan ref={ref} {...props}>\n          {children}\n        </OverflowEllipsisSpan>\n      }\n      disabled={!isOverflowWidth}\n      {...tooltipProps}\n    >\n      {children}\n    </Tooltip>\n  );\n};\n\nexport default TruncatedTextWithTooltip;\n"],"mappings":";;;;;;;;;;;;;;;AAcA,MAAa,4BAA+D,EAC1E,UACA,eAAe,EAAE,EACjB,GAAG,YACC;CACJ,MAAM,OAAA,GAAA,MAAA,QAA8B,KAAK;CACzC,MAAM,EAAE,oBAAoBA,0BAAAA,cAAc,IAAI;AAE9C,QACE,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,SAAD;EACE,SACE,iBAAA,GAAA,kBAAA,KAACC,0BAAAA,sBAAD;GAA2B;GAAK,GAAI;GACjC;GACoB,CAAA;EAEzB,UAAU,CAAC;EACX,GAAI;EAEH;EACO,CAAA"}

package/dist/lib/TruncatedTextWithTooltip.d.cts

@@ -0,0 +1,15 @@
+import { n as Tooltip } from "../Tooltip-CE1oH6Iz.cjs";
+import { ComponentProps, ComponentPropsWithoutRef, FC } from "react";
+
+//#region lib/TruncatedTextWithTooltip.d.ts
+interface TruncatedTextWithTooltipProps extends ComponentPropsWithoutRef<'span'> {
+  tooltipProps?: Pick<ComponentProps<typeof Tooltip>, 'side' | 'zIndex' | 'maxWidth'>;
+}
+/**
+ * Truncates the text if it is too long to fit in the container and shows a tooltip if the text
+ * is truncated.
+ */
+declare const TruncatedTextWithTooltip: FC<TruncatedTextWithTooltipProps>;
+//#endregion
+export { TruncatedTextWithTooltip, TruncatedTextWithTooltip as default };
+//# sourceMappingURL=TruncatedTextWithTooltip.d.cts.map

package/dist/lib/TruncatedTextWithTooltip.d.mts

@@ -0,0 +1,15 @@
+import { n as Tooltip } from "../Tooltip-C0PS5InA.mjs";
+import { ComponentProps, ComponentPropsWithoutRef, FC } from "react";
+
+//#region lib/TruncatedTextWithTooltip.d.ts
+interface TruncatedTextWithTooltipProps extends ComponentPropsWithoutRef<'span'> {
+  tooltipProps?: Pick<ComponentProps<typeof Tooltip>, 'side' | 'zIndex' | 'maxWidth'>;
+}
+/**
+ * Truncates the text if it is too long to fit in the container and shows a tooltip if the text
+ * is truncated.
+ */
+declare const TruncatedTextWithTooltip: FC<TruncatedTextWithTooltipProps>;
+//#endregion
+export { TruncatedTextWithTooltip, TruncatedTextWithTooltip as default };
+//# sourceMappingURL=TruncatedTextWithTooltip.d.mts.map

package/dist/lib/TruncatedTextWithTooltip.mjs

@@ -0,0 +1,28 @@
+import { useIsOverflow } from "./useIsOverflow.mjs";
+import { OverflowEllipsisSpan } from "./TruncatedText.mjs";
+import { a as Tooltip } from "../Tooltip-T7RQpy_a.mjs";
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+//#region lib/TruncatedTextWithTooltip.tsx
+/**
+* Truncates the text if it is too long to fit in the container and shows a tooltip if the text
+* is truncated.
+*/
+const TruncatedTextWithTooltip = ({ children, tooltipProps = {}, ...props }) => {
+	const ref = useRef(null);
+	const { isOverflowWidth } = useIsOverflow(ref);
+	return /* @__PURE__ */ jsx(Tooltip, {
+		trigger: /* @__PURE__ */ jsx(OverflowEllipsisSpan, {
+			ref,
+			...props,
+			children
+		}),
+		disabled: !isOverflowWidth,
+		...tooltipProps,
+		children
+	});
+};
+//#endregion
+export { TruncatedTextWithTooltip, TruncatedTextWithTooltip as default };
+
+//# sourceMappingURL=TruncatedTextWithTooltip.mjs.map

package/dist/lib/TruncatedTextWithTooltip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TruncatedTextWithTooltip.mjs","names":[],"sources":["../../lib/TruncatedTextWithTooltip.tsx"],"sourcesContent":["import { type ComponentProps, type ComponentPropsWithoutRef, type FC, useRef } from 'react';\n\nimport Tooltip from 'design-system/components/Tooltip';\nimport { OverflowEllipsisSpan } from 'design-system/lib/TruncatedText';\nimport { useIsOverflow } from 'design-system/lib/useIsOverflow';\n\ninterface TruncatedTextWithTooltipProps extends ComponentPropsWithoutRef<'span'> {\n  tooltipProps?: Pick<ComponentProps<typeof Tooltip>, 'side' | 'zIndex' | 'maxWidth'>;\n}\n\n/**\n * Truncates the text if it is too long to fit in the container and shows a tooltip if the text\n * is truncated.\n */\nexport const TruncatedTextWithTooltip: FC<TruncatedTextWithTooltipProps> = ({\n  children,\n  tooltipProps = {},\n  ...props\n}) => {\n  const ref = useRef<HTMLSpanElement>(null);\n  const { isOverflowWidth } = useIsOverflow(ref);\n\n  return (\n    <Tooltip\n      trigger={\n        <OverflowEllipsisSpan ref={ref} {...props}>\n          {children}\n        </OverflowEllipsisSpan>\n      }\n      disabled={!isOverflowWidth}\n      {...tooltipProps}\n    >\n      {children}\n    </Tooltip>\n  );\n};\n\nexport default TruncatedTextWithTooltip;\n"],"mappings":";;;;;;;;;;AAcA,MAAa,4BAA+D,EAC1E,UACA,eAAe,EAAE,EACjB,GAAG,YACC;CACJ,MAAM,MAAM,OAAwB,KAAK;CACzC,MAAM,EAAE,oBAAoB,cAAc,IAAI;AAE9C,QACE,oBAAC,SAAD;EACE,SACE,oBAAC,sBAAD;GAA2B;GAAK,GAAI;GACjC;GACoB,CAAA;EAEzB,UAAU,CAAC;EACX,GAAI;EAEH;EACO,CAAA"}

package/dist/lib/comboboxHelper.cjs

@@ -0,0 +1,46 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../chunk-CoPdw6nB.cjs");
+const require_react_esm = require("../react.esm-C-es35jP.cjs");
+//#region lib/comboboxHelper.ts
+/**
+* Test helpers for the design system Combobox component (multi-select).
+*
+* Similar to reactSelectHelper.ts but adapted for the Combobox DOM
+* which uses standard ARIA roles (role="combobox", role="option")
+* and renders options via downshift.
+*/
+/**
+* Open a Combobox dropdown by clicking on the combobox element.
+*/
+const openComboboxOptions = (comboboxInput) => {
+	require_react_esm.fireEvent.click(comboboxInput);
+};
+/**
+* Get all option labels for a multi-select Combobox.
+* Opens the dropdown and returns the label text of each option.
+*/
+const allComboboxOptionLabels = async (comboboxInput) => {
+	openComboboxOptions(comboboxInput);
+	return (await require_react_esm.screen.findAllByRole("option")).map((opt) => {
+		const labelId = opt.getAttribute("aria-labelledby");
+		if (labelId) {
+			const labelEl = document.getElementById(labelId);
+			if (labelEl?.textContent) return labelEl.textContent.trim();
+		}
+		return (opt.textContent || "").trim();
+	});
+};
+/**
+* Select an option in a multi-select Combobox by its label text.
+*/
+const selectComboboxOption = async (comboboxInput, labelText) => {
+	openComboboxOptions(comboboxInput);
+	const option = await require_react_esm.screen.findByRole("option", { name: new RegExp(labelText) });
+	require_react_esm.fireEvent.click(option);
+};
+//#endregion
+exports.allComboboxOptionLabels = allComboboxOptionLabels;
+exports.openComboboxOptions = openComboboxOptions;
+exports.selectComboboxOption = selectComboboxOption;
+
+//# sourceMappingURL=comboboxHelper.cjs.map

package/dist/lib/comboboxHelper.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"comboboxHelper.cjs","names":["screen"],"sources":["../../lib/comboboxHelper.ts"],"sourcesContent":["import { fireEvent, screen } from '@testing-library/react';\n\n/**\n * Test helpers for the design system Combobox component (multi-select).\n *\n * Similar to reactSelectHelper.ts but adapted for the Combobox DOM\n * which uses standard ARIA roles (role=\"combobox\", role=\"option\")\n * and renders options via downshift.\n */\n\n/**\n * Open a Combobox dropdown by clicking on the combobox element.\n */\nexport const openComboboxOptions = (comboboxInput: HTMLElement) => {\n  fireEvent.click(comboboxInput);\n};\n\n/**\n * Get all option labels for a multi-select Combobox.\n * Opens the dropdown and returns the label text of each option.\n */\nexport const allComboboxOptionLabels = async (comboboxInput: HTMLElement): Promise<string[]> => {\n  openComboboxOptions(comboboxInput);\n  const options = await screen.findAllByRole('option');\n  return options.map((opt) => {\n    // Multi-select options use aria-labelledby pointing to the checkbox label\n    const labelId = opt.getAttribute('aria-labelledby');\n    if (labelId) {\n      const labelEl = document.getElementById(labelId);\n      if (labelEl?.textContent) {\n        return labelEl.textContent.trim();\n      }\n    }\n    return (opt.textContent || '').trim();\n  });\n};\n\n/**\n * Select an option in a multi-select Combobox by its label text.\n */\nexport const selectComboboxOption = async (\n  comboboxInput: HTMLElement,\n  labelText: string,\n): Promise<void> => {\n  openComboboxOptions(comboboxInput);\n  const option = await screen.findByRole('option', {\n    name: new RegExp(labelText),\n  });\n  fireEvent.click(option);\n};\n"],"mappings":";;;;;;;;;;;;;;AAaA,MAAa,uBAAuB,kBAA+B;AACjE,mBAAA,UAAU,MAAM,cAAc;;;;;;AAOhC,MAAa,0BAA0B,OAAO,kBAAkD;AAC9F,qBAAoB,cAAc;AAElC,SAAO,MADeA,kBAAAA,OAAO,cAAc,SAAS,EACrC,KAAK,QAAQ;EAE1B,MAAM,UAAU,IAAI,aAAa,kBAAkB;AACnD,MAAI,SAAS;GACX,MAAM,UAAU,SAAS,eAAe,QAAQ;AAChD,OAAI,SAAS,YACX,QAAO,QAAQ,YAAY,MAAM;;AAGrC,UAAQ,IAAI,eAAe,IAAI,MAAM;GACrC;;;;;AAMJ,MAAa,uBAAuB,OAClC,eACA,cACkB;AAClB,qBAAoB,cAAc;CAClC,MAAM,SAAS,MAAMA,kBAAAA,OAAO,WAAW,UAAU,EAC/C,MAAM,IAAI,OAAO,UAAU,EAC5B,CAAC;AACF,mBAAA,UAAU,MAAM,OAAO"}

package/dist/lib/comboboxHelper.d.cts

@@ -0,0 +1,24 @@
+//#region lib/comboboxHelper.d.ts
+/**
+ * Test helpers for the design system Combobox component (multi-select).
+ *
+ * Similar to reactSelectHelper.ts but adapted for the Combobox DOM
+ * which uses standard ARIA roles (role="combobox", role="option")
+ * and renders options via downshift.
+ */
+/**
+ * Open a Combobox dropdown by clicking on the combobox element.
+ */
+declare const openComboboxOptions: (comboboxInput: HTMLElement) => void;
+/**
+ * Get all option labels for a multi-select Combobox.
+ * Opens the dropdown and returns the label text of each option.
+ */
+declare const allComboboxOptionLabels: (comboboxInput: HTMLElement) => Promise<string[]>;
+/**
+ * Select an option in a multi-select Combobox by its label text.
+ */
+declare const selectComboboxOption: (comboboxInput: HTMLElement, labelText: string) => Promise<void>;
+//#endregion
+export { allComboboxOptionLabels, openComboboxOptions, selectComboboxOption };
+//# sourceMappingURL=comboboxHelper.d.cts.map

package/dist/lib/comboboxHelper.d.mts

@@ -0,0 +1,24 @@
+//#region lib/comboboxHelper.d.ts
+/**
+ * Test helpers for the design system Combobox component (multi-select).
+ *
+ * Similar to reactSelectHelper.ts but adapted for the Combobox DOM
+ * which uses standard ARIA roles (role="combobox", role="option")
+ * and renders options via downshift.
+ */
+/**
+ * Open a Combobox dropdown by clicking on the combobox element.
+ */
+declare const openComboboxOptions: (comboboxInput: HTMLElement) => void;
+/**
+ * Get all option labels for a multi-select Combobox.
+ * Opens the dropdown and returns the label text of each option.
+ */
+declare const allComboboxOptionLabels: (comboboxInput: HTMLElement) => Promise<string[]>;
+/**
+ * Select an option in a multi-select Combobox by its label text.
+ */
+declare const selectComboboxOption: (comboboxInput: HTMLElement, labelText: string) => Promise<void>;
+//#endregion
+export { allComboboxOptionLabels, openComboboxOptions, selectComboboxOption };
+//# sourceMappingURL=comboboxHelper.d.mts.map

package/dist/lib/comboboxHelper.mjs

@@ -0,0 +1,42 @@
+import { a as screen, n as fireEvent } from "../react.esm-Dv1lMDRs.mjs";
+//#region lib/comboboxHelper.ts
+/**
+* Test helpers for the design system Combobox component (multi-select).
+*
+* Similar to reactSelectHelper.ts but adapted for the Combobox DOM
+* which uses standard ARIA roles (role="combobox", role="option")
+* and renders options via downshift.
+*/
+/**
+* Open a Combobox dropdown by clicking on the combobox element.
+*/
+const openComboboxOptions = (comboboxInput) => {
+	fireEvent.click(comboboxInput);
+};
+/**
+* Get all option labels for a multi-select Combobox.
+* Opens the dropdown and returns the label text of each option.
+*/
+const allComboboxOptionLabels = async (comboboxInput) => {
+	openComboboxOptions(comboboxInput);
+	return (await screen.findAllByRole("option")).map((opt) => {
+		const labelId = opt.getAttribute("aria-labelledby");
+		if (labelId) {
+			const labelEl = document.getElementById(labelId);
+			if (labelEl?.textContent) return labelEl.textContent.trim();
+		}
+		return (opt.textContent || "").trim();
+	});
+};
+/**
+* Select an option in a multi-select Combobox by its label text.
+*/
+const selectComboboxOption = async (comboboxInput, labelText) => {
+	openComboboxOptions(comboboxInput);
+	const option = await screen.findByRole("option", { name: new RegExp(labelText) });
+	fireEvent.click(option);
+};
+//#endregion
+export { allComboboxOptionLabels, openComboboxOptions, selectComboboxOption };
+
+//# sourceMappingURL=comboboxHelper.mjs.map

package/dist/lib/comboboxHelper.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"comboboxHelper.mjs","names":[],"sources":["../../lib/comboboxHelper.ts"],"sourcesContent":["import { fireEvent, screen } from '@testing-library/react';\n\n/**\n * Test helpers for the design system Combobox component (multi-select).\n *\n * Similar to reactSelectHelper.ts but adapted for the Combobox DOM\n * which uses standard ARIA roles (role=\"combobox\", role=\"option\")\n * and renders options via downshift.\n */\n\n/**\n * Open a Combobox dropdown by clicking on the combobox element.\n */\nexport const openComboboxOptions = (comboboxInput: HTMLElement) => {\n  fireEvent.click(comboboxInput);\n};\n\n/**\n * Get all option labels for a multi-select Combobox.\n * Opens the dropdown and returns the label text of each option.\n */\nexport const allComboboxOptionLabels = async (comboboxInput: HTMLElement): Promise<string[]> => {\n  openComboboxOptions(comboboxInput);\n  const options = await screen.findAllByRole('option');\n  return options.map((opt) => {\n    // Multi-select options use aria-labelledby pointing to the checkbox label\n    const labelId = opt.getAttribute('aria-labelledby');\n    if (labelId) {\n      const labelEl = document.getElementById(labelId);\n      if (labelEl?.textContent) {\n        return labelEl.textContent.trim();\n      }\n    }\n    return (opt.textContent || '').trim();\n  });\n};\n\n/**\n * Select an option in a multi-select Combobox by its label text.\n */\nexport const selectComboboxOption = async (\n  comboboxInput: HTMLElement,\n  labelText: string,\n): Promise<void> => {\n  openComboboxOptions(comboboxInput);\n  const option = await screen.findByRole('option', {\n    name: new RegExp(labelText),\n  });\n  fireEvent.click(option);\n};\n"],"mappings":";;;;;;;;;;;;AAaA,MAAa,uBAAuB,kBAA+B;AACjE,WAAU,MAAM,cAAc;;;;;;AAOhC,MAAa,0BAA0B,OAAO,kBAAkD;AAC9F,qBAAoB,cAAc;AAElC,SAAO,MADe,OAAO,cAAc,SAAS,EACrC,KAAK,QAAQ;EAE1B,MAAM,UAAU,IAAI,aAAa,kBAAkB;AACnD,MAAI,SAAS;GACX,MAAM,UAAU,SAAS,eAAe,QAAQ;AAChD,OAAI,SAAS,YACX,QAAO,QAAQ,YAAY,MAAM;;AAGrC,UAAQ,IAAI,eAAe,IAAI,MAAM;GACrC;;;;;AAMJ,MAAa,uBAAuB,OAClC,eACA,cACkB;AAClB,qBAAoB,cAAc;CAClC,MAAM,SAAS,MAAM,OAAO,WAAW,UAAU,EAC/C,MAAM,IAAI,OAAO,UAAU,EAC5B,CAAC;AACF,WAAU,MAAM,OAAO"}