@staffbase/design 18.5.0 → 18.6.0

package/dist/main.js

@@ -134,7 +134,6 @@ var ActionMenuContent = React.forwardRef(function ActionMenuContent(props, propR
 			modal: false,
 			initialFocus: -1,
 			children: /* @__PURE__ */ jsx("div", {
-				"data-c13y-component": "action-menu-content",
 				className: clsx$1("ds-action-menu", className),
 				ref: forkedRef,
 				style: {
@@ -169,7 +168,6 @@ var ActionMenuItem = React.forwardRef(function ActionMenuItem(props, ref) {
 	const itemRef = useMergeRefs([ref, listItemRef]);
 	return /* @__PURE__ */ jsxs("button", {
 		role: "menuitem",
-		"data-c13y-component": "action-menu-item",
 		className: clsx$1("ds-action-menu__item", `ds-action-menu__item--${variant}`, "ds-action-menu__basic-item", `ds-action-menu__basic-item--${variant}`, className),
 		...rest,
 		...context.getItemProps({
@@ -204,7 +202,6 @@ var ActionMenuLinkItem = React.forwardRef(function ActionMenuLinkItem(props, ref
 	const itemRef = useMergeRefs([ref, listItemRef]);
 	return /* @__PURE__ */ jsxs("a", {
 		role: "menuitem",
-		"data-c13y-component": "action-menu-link-item",
 		className: clsx$1("ds-action-menu__item", `ds-action-menu__item--${variant}`, "ds-action-menu__link-item", className),
 		...rest,
 		...context.getItemProps({
@@ -9084,7 +9081,6 @@ function getDividerStyles(props) {
 function Divider(props) {
 	const { dividerPosition = "horizontal", className = "", fullWidth = false, ...otherProps } = props;
 	return /* @__PURE__ */ jsx("hr", {
-		"data-c13y-component": "divider",
 		className: clsx$1("ds-divider", `ds-divider--${dividerPosition}`, className),
 		style: getDividerStyles({
 			dividerPosition,
@@ -9838,6 +9834,30 @@ var HelpButton = forwardRef(function HelpButton(props, ref) {
 });
 HelpButton.displayName = "HelpButton";
 //#endregion
+//#region src/utils/splitC13yProps.ts
+/**
+* Splits a props object into its `data-c13y-*` customizability attributes and
+* everything else.
+*
+* Portalled overlays render a positioner wrapper around the visible popup. The
+* public prop type extends the positioner's props, so a consumer-supplied
+* `data-c13y-region` / `data-c13y-purpose` / `data-c13y-id` would otherwise land
+* on the invisible positioner instead of the visible popup that carries
+* `data-c13y-component`. Use this to forward the customizability attributes onto
+* the popup while keeping positioner props (`align`, `sideOffset`, …) on the
+* positioner.
+*/
+function splitC13yProps(props) {
+	const c13y = {};
+	const rest = {};
+	for (const key of Object.keys(props)) if (key.startsWith("data-c13y-")) c13y[key] = props[key];
+	else rest[key] = props[key];
+	return {
+		c13y,
+		rest
+	};
+}
+//#endregion
 //#region src/components/menu/Menu.tsx
 var Root$6 = (props) => {
 	return /* @__PURE__ */ jsx(Menu$1.Root, {
@@ -9855,14 +9875,16 @@ var Trigger$4 = (props) => {
 };
 var Popup$3 = forwardRef((props, ref) => {
 	const { className, children, container, ...rest } = props;
+	const { c13y, rest: positionerProps } = splitC13yProps(rest);
 	return /* @__PURE__ */ jsx(Menu$1.Portal, {
 		container,
 		children: /* @__PURE__ */ jsx(Menu$1.Positioner, {
 			align: "end",
 			sideOffset: 4,
 			ref,
-			...rest,
+			...positionerProps,
 			children: /* @__PURE__ */ jsx(Menu$1.Popup, {
+				...c13y,
 				"data-c13y-component": "menu-popover",
 				className: clsx$1("ds-menu__popup", className),
 				children,
@@ -10015,21 +10037,18 @@ var ModalHeader = forwardRef(function ModalHeader(props, ref) {
 	const { title, titleAddon, showCancelButton = false, cancelButtonText, onCancel, showHeaderButton = false, headerButtonIsGhost = true, onHeaderButtonClick, headerButtonText } = props;
 	let headerButton;
 	if (showHeaderButton && onHeaderButtonClick && headerButtonText) if (headerButtonIsGhost) headerButton = /* @__PURE__ */ jsx(GhostButton, {
-		"data-c13y-purpose": "accept",
 		className: clsx$1("ds-modal__ghost-button--accept"),
 		variant: "primary",
 		onClick: () => onHeaderButtonClick(),
 		children: headerButtonText
 	});
 	else headerButton = /* @__PURE__ */ jsx(Button, {
-		"data-c13y-purpose": "accept",
 		className: clsx$1("ds-modal__button--accept"),
 		variant: "primary",
 		onClick: () => onHeaderButtonClick(),
 		children: headerButtonText
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		"data-c13y-component": "modal-header",
 		className: clsx$1("ds-modal__header"),
 		ref,
 		children: [/* @__PURE__ */ jsxs("div", {
@@ -10043,7 +10062,6 @@ var ModalHeader = forwardRef(function ModalHeader(props, ref) {
 			}), /* @__PURE__ */ jsxs("div", {
 				className: "ds-modal__header-buttons",
 				children: [!!headerButton && headerButton, showCancelButton && cancelButtonText && /* @__PURE__ */ jsx(IconGhostButton, {
-					"data-c13y-purpose": "cancel",
 					className: clsx$1("ds-modal__ghost-button--cancel"),
 					variant: "secondary",
 					style: { padding: "10px" },
@@ -10057,7 +10075,6 @@ var ModalHeader = forwardRef(function ModalHeader(props, ref) {
 			fullWidth: true
 		}), /* @__PURE__ */ jsx("div", {
 			className: "ds-modal__header-content",
-			"data-c13y-component": "modal-header-content",
 			"data-testid": "header-content-wrapper",
 			children: props.children
 		})] })]
@@ -10123,7 +10140,6 @@ function ModalContent(props) {
 		setScrollShadows(scroll, scrollContent.current);
 	}, [scroll]);
 	return /* @__PURE__ */ jsx("div", {
-		"data-c13y-component": "modal-content",
 		className: clsx$1("ds-modal__inner-content", scroll && "ds-modal__inner-content--scroll"),
 		"data-testid": "main-content-wrapper",
 		ref: scrollContent,
@@ -10134,20 +10150,17 @@ function ModalContent(props) {
 var ModalFooter = forwardRef(function ModalFooter(props, ref) {
 	const { cancelButtonText, onCancel, footerButtonText, footerButtonVariant, onFooterButtonClick, disableFooterButton } = props;
 	return footerButtonText && onFooterButtonClick ? /* @__PURE__ */ jsxs("div", {
-		"data-c13y-component": "modal-footer",
 		className: clsx$1("ds-modal__footer"),
 		"data-testid": "footer",
 		ref,
 		children: [props.children, /* @__PURE__ */ jsxs("div", {
 			className: "ds-modal__footer-buttons",
 			children: [cancelButtonText && /* @__PURE__ */ jsx(Button, {
-				"data-c13y-purpose": "cancel",
 				className: clsx$1("ds-modal__button--cancel"),
 				variant: "secondary",
 				onClick: () => onCancel(),
 				children: cancelButtonText
 			}), footerButtonText && onFooterButtonClick && /* @__PURE__ */ jsx(Button, {
-				"data-c13y-purpose": "accept",
 				className: clsx$1("ds-modal__button--accept"),
 				variant: footerButtonVariant,
 				disabled: disableFooterButton,
@@ -10234,7 +10247,6 @@ function ModalDialog(props) {
 		children: /* @__PURE__ */ jsx(FloatingFocusManager, {
 			context,
 			children: /* @__PURE__ */ jsxs("div", {
-				"data-c13y-component": "modal-dialog",
 				...getFloatingProps({
 					ref: refs.setFloating,
 					className: clsx$1("ds-modal-dialog", className)
@@ -10256,12 +10268,10 @@ function ModalDialog(props) {
 						className: "ds-modal-dialog__content",
 						children: [/* @__PURE__ */ jsx(Button, {
 							variant: confirmButtonVariant,
-							"data-c13y-purpose": "accept",
 							onClick: onConfirm,
 							children: confirmButtonText
 						}), /* @__PURE__ */ jsx(Button, {
 							variant: "secondary",
-							"data-c13y-purpose": "cancel",
 							onClick: onCancel,
 							children: cancelButtonText
 						})]
@@ -10508,6 +10518,7 @@ var Input$2 = forwardRef((props, ref) => {
 });
 var Popup$2 = forwardRef((props, ref) => {
 	const { className, children, container, ...rest } = props;
+	const { c13y, rest: positionerProps } = splitC13yProps(rest);
 	const { containerRef } = useSearchableMultiSelectContext();
 	return /* @__PURE__ */ jsx(Combobox.Portal, {
 		container,
@@ -10515,8 +10526,9 @@ var Popup$2 = forwardRef((props, ref) => {
 			ref,
 			sideOffset: 4,
 			anchor: containerRef,
-			...rest,
+			...positionerProps,
 			children: /* @__PURE__ */ jsx(Combobox.Popup, {
+				...c13y,
 				"data-c13y-component": "searchable-multi-select-popover",
 				className: clsx$1("ds-searchable-multi-select__popup", className),
 				children,
@@ -10698,13 +10710,15 @@ var Input$1 = forwardRef((props, ref) => {
 });
 var Popup$1 = forwardRef((props, ref) => {
 	const { className, children, container, ...rest } = props;
+	const { c13y, rest: positionerProps } = splitC13yProps(rest);
 	return /* @__PURE__ */ jsx(Combobox.Portal, {
 		container,
 		children: /* @__PURE__ */ jsx(Combobox.Positioner, {
 			sideOffset: 5,
 			ref,
-			...rest,
+			...positionerProps,
 			children: /* @__PURE__ */ jsx(Combobox.Popup, {
+				...c13y,
 				"data-c13y-component": "searchable-single-select-popover",
 				className: clsx$1("ds-searchable-single-select__popup", className),
 				children,
@@ -10824,13 +10838,15 @@ var Trigger$2 = forwardRef((props, ref) => {
 });
 var Popup = forwardRef((props, ref) => {
 	const { className, children, container, ...rest } = props;
+	const { c13y, rest: positionerProps } = splitC13yProps(rest);
 	return /* @__PURE__ */ jsx(Select$1.Portal, {
 		container,
 		children: /* @__PURE__ */ jsx(Select$1.Positioner, {
 			alignItemWithTrigger: false,
 			ref,
-			...rest,
+			...positionerProps,
 			children: /* @__PURE__ */ jsx(Select$1.Popup, {
+				...c13y,
 				"data-c13y-component": "select-popover",
 				className: clsx$1("ds-select__popup", className),
 				children,
@@ -10990,12 +11006,10 @@ function SingleSelect(props) {
 	const errorOrDescription = useMemo(() => {
 		if (error !== void 0 && error !== "") return /* @__PURE__ */ jsxs("div", {
 			className: "ds-single-select__error",
-			"data-c13y-component": "single-select-error",
 			children: [/* @__PURE__ */ jsx(AlertIcon_default, {}), error]
 		});
 		if (description !== void 0 && description !== "") return /* @__PURE__ */ jsx("span", {
 			className: "ds-single-select__description",
-			"data-c13y-component": "single-select-description",
 			children: description
 		});
 		return null;
@@ -11006,7 +11020,6 @@ function SingleSelect(props) {
 	const dropdownContent = useMemo(() => {
 		if (loading) return /* @__PURE__ */ jsx("div", {
 			className: "ds-single-select__loader",
-			"data-c13y-component": "single-select-loader",
 			children: /* @__PURE__ */ jsx(LoadingSpinner, {
 				size: 24,
 				"aria-label": "Loading select options..."
@@ -11014,19 +11027,15 @@ function SingleSelect(props) {
 		});
 		if (options.length === 0 && emptyResultText !== void 0 && emptyResultText !== "") return /* @__PURE__ */ jsx("span", {
 			className: "ds-single-select__no-results",
-			"data-c13y-component": "single-select-empty",
 			children: emptyResultText
 		});
 		const getLabel = (option) => /* @__PURE__ */ jsxs("span", {
 			className: "ds-single-select__option-text",
-			"data-c13y-component": "single-select-option-text",
 			children: [/* @__PURE__ */ jsx("span", {
-				"data-c13y-component": "single-select-label",
 				className: clsx$1("ds-single-select__option-label", value?.id === option.id && "ds-single-select__option-label--selected"),
 				...getItemProps({ id: `${listId}-option-${option.id}-label` }),
 				children: optionLabel(option)
 			}), typeof optionDescription === "function" && optionDescription(option) !== void 0 && /* @__PURE__ */ jsx("div", {
-				"data-c13y-component": "single-select-option-description",
 				className: clsx$1("ds-single-select__option-description", value?.id === option.id && "ds-single-select__option-description--selected"),
 				...getItemProps({ id: `${listId}-option-${option.id}-description` }),
 				"aria-hidden": true,
@@ -11034,7 +11043,6 @@ function SingleSelect(props) {
 			})]
 		});
 		return options.map((option, index) => /* @__PURE__ */ jsx("div", {
-			"data-c13y-component": "single-select-option",
 			...getItemProps({
 				onClick: () => {
 					onChange(option);
@@ -11083,7 +11091,6 @@ function SingleSelect(props) {
 			})]
 		}),
 		variantProps.searchable ? /* @__PURE__ */ jsxs("div", {
-			"data-c13y-component": "single-select",
 			className: clsx$1("ds-single-select__input-wrapper", disabled && "ds-single-select__input-wrapper--disabled", error && "ds-single-select__input-wrapper--error"),
 			ref: refs.setReference,
 			onClick: handleWrapperClick,
@@ -11120,7 +11127,6 @@ function SingleSelect(props) {
 				})
 			]
 		}) : /* @__PURE__ */ jsxs("button", {
-			"data-c13y-component": "single-select",
 			className: clsx$1("ds-single-select__trigger", error !== void 0 && error !== "" && "ds-single-select__trigger--error", disabled && "ds-single-select__trigger--disabled"),
 			...getReferenceProps({
 				disabled,
@@ -11169,7 +11175,6 @@ function SingleSelect(props) {
 			"aria-labelledby": ariaLabelledBy || labelId
 		}),
 		ref: floatingRef,
-		"data-c13y-component": "single-select-dropdown",
 		className: clsx$1("ds-single-select__dropdown"),
 		children: /* @__PURE__ */ jsx("div", { children: dropdownContent })
 	}) }) : null] });
@@ -11318,13 +11323,11 @@ function TextAreaDeprecated(props) {
 		if (handleValueChange) handleValueChange(event);
 	}, [handleValueChange]);
 	return /* @__PURE__ */ jsxs("div", {
-		"data-c13y-component": "text-area-deprecated",
 		className: clsx$1("ds-text-area__container", className),
 		children: [
 			/* @__PURE__ */ jsxs("label", {
 				className: "ds-text-area__label",
 				htmlFor: id,
-				"data-c13y-component": "text-area-deprecated-label",
 				children: [label, requiredLabel && /* @__PURE__ */ jsx("span", {
 					className: "ds-text-area__label-required",
 					"aria-hidden": true,
@@ -11333,7 +11336,6 @@ function TextAreaDeprecated(props) {
 			}),
 			/* @__PURE__ */ jsx("textarea", {
 				className: clsx$1("ds-text-area__input", resizable && "resizable", errorMessage && "ds-text-area__input--error"),
-				"data-c13y-component": "text-area-deprecated-input",
 				dir: "auto",
 				id,
 				name: inputId ?? label,
@@ -11348,24 +11350,20 @@ function TextAreaDeprecated(props) {
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "ds-text-area__footer",
-				"data-c13y-component": "text-area-deprecated-footer",
 				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
 					id: errorId,
 					"aria-live": errorAriaLive,
 					"aria-atomic": "true",
 					children: errorMessage && /* @__PURE__ */ jsxs("span", {
 						className: "ds-text-area__error",
-						"data-c13y-component": "text-area-deprecated-error",
 						children: [/* @__PURE__ */ jsx(AlertIcon_default, {}), errorMessage]
 					})
 				}), description && /* @__PURE__ */ jsx("p", {
 					className: "ds-text-area__description",
 					id: descriptionId,
-					"data-c13y-component": "text-area-deprecated-description",
 					children: description
 				})] }), limit && /* @__PURE__ */ jsxs("span", {
 					className: "ds-text-area__counter",
-					"data-c13y-component": "text-area-deprecated-counter",
 					children: [
 						count,
 						"/",
@@ -11414,13 +11412,11 @@ var TextInput = forwardRef(function TextInput(props, ref) {
 	const inputRef = useRef(null);
 	if (!ref) ref = inputRef;
 	return /* @__PURE__ */ jsxs("div", {
-		"data-c13y-component": "text-input",
 		className: clsx$1("ds-text-input__container", errorMessage ? "ds-text-input__container--error" : `ds-text-input__container--${variant}`, restProps.disabled && "ds-text-input__container--disabled", className),
 		children: [
 			/* @__PURE__ */ jsxs("label", {
 				className: "ds-text-input__label",
 				htmlFor: inputId,
-				"data-c13y-component": "text-input-label",
 				children: [label, requiredLabel && /* @__PURE__ */ jsx("span", {
 					className: "ds-text-input__label-required",
 					"aria-hidden": true,
@@ -11429,7 +11425,6 @@ var TextInput = forwardRef(function TextInput(props, ref) {
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "ds-text-input__base-wrapper",
-				"data-c13y-component": "text-input-container",
 				style: { width },
 				onClick: () => ref && "current" in ref && ref.current?.focus(),
 				role: "none",
@@ -11439,7 +11434,6 @@ var TextInput = forwardRef(function TextInput(props, ref) {
 						children: icon
 					}),
 					/* @__PURE__ */ jsx("input", {
-						"data-c13y-component": "text-input-input",
 						className: "ds-text-input__base-input",
 						"aria-invalid": !!errorMessage,
 						id: inputId,
@@ -11459,7 +11453,6 @@ var TextInput = forwardRef(function TextInput(props, ref) {
 			errorMessage && /* @__PURE__ */ jsxs("div", {
 				className: "ds-text-input__error",
 				id: inputErrorId,
-				"data-c13y-component": "text-input-error",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "ds-text-input__error-icon",
 					children: /* @__PURE__ */ jsx(AlertIcon_default, {})
@@ -11468,7 +11461,6 @@ var TextInput = forwardRef(function TextInput(props, ref) {
 			description && /* @__PURE__ */ jsx("div", {
 				className: clsx$1("ds-text-input__description"),
 				id: inputDescriptionId,
-				"data-c13y-component": "text-input-description",
 				children: description
 			})
 		]
@@ -11484,7 +11476,6 @@ function Toggle(props) {
 	const descriptionId = `toggle-${id}-descr`;
 	const inputId = `toggle-${id}-label`;
 	return /* @__PURE__ */ jsxs("div", {
-		"data-c13y-component": "toggle",
 		className: clsx$1("ds-toggle__container", disabled && "ds-toggle__container--disabled", spaceBetween ? "ds-toggle__container--full-width" : "ds-toggle__container--content-width", className),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: clsx$1("ds-toggle__wrapper"),
@@ -11493,13 +11484,11 @@ function Toggle(props) {
 					className: clsx$1("ds-toggle__label-container"),
 					children: /* @__PURE__ */ jsx("label", {
 						className: clsx$1("ds-toggle__label"),
-						"data-c13y-component": "toggle-label",
 						htmlFor: inputId,
 						children: label
 					})
 				}),
 				/* @__PURE__ */ jsx("input", {
-					"data-c13y-component": "toggle-input",
 					className: "ds-toggle",
 					name,
 					type: "checkbox",
@@ -11512,7 +11501,6 @@ function Toggle(props) {
 				}),
 				/* @__PURE__ */ jsxs("div", {
 					className: clsx$1("ds-toggle__switch-wrapper"),
-					"data-c13y-component": "toggle-switch",
 					children: [
 						/* @__PURE__ */ jsx(CheckIcon_default, {
 							"aria-hidden": "true",
@@ -11528,7 +11516,6 @@ function Toggle(props) {
 			]
 		}), description && /* @__PURE__ */ jsx("p", {
 			className: clsx$1("ds-toggle__description"),
-			"data-c13y-component": "toggle-description",
 			id: descriptionId,
 			children: description
 		})]
@@ -11567,6 +11554,7 @@ var Tooltip = {
 	Content: forwardRef((props, ref) => {
 		const context = useContext(TooltipContext);
 		const { className, children, variant = "default", is = "description", container, ...rest } = props;
+		const { c13y, rest: positionerProps } = splitC13yProps(rest);
 		useEffect(() => {
 			if (context) context.setIs(is);
 		}, [is, context]);
@@ -11574,8 +11562,9 @@ var Tooltip = {
 			container,
 			children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
 				sideOffset: 4,
-				...rest,
+				...positionerProps,
 				children: /* @__PURE__ */ jsx(Tooltip$1.Popup, {
+					...c13y,
 					"data-c13y-component": "tooltip-popover",
 					className: clsx$1(`ds-tooltip--${variant}`, "ds-tooltip", className),
 					id: context?.id,
@@ -11646,7 +11635,6 @@ function TooltipDeprecated(props) {
 				...styles
 			}
 		}),
-		"data-c13y-component": "tooltip-deprecated",
 		className: clsx("ds-tooltip-deprecated", className),
 		children: content
 	}) : null] });