@staffbase/design 20.1.0 → 20.1.2

package/dist/main.d.ts

@@ -14,7 +14,6 @@ import { ChangeEvent } from 'react';
 import { ClassAttributes } from 'react';
 import { Combobox } from '@base-ui/react/combobox';
 import { ComboboxChipProps } from '@base-ui/react';
-import { ComboboxItemIndicatorProps } from '@base-ui/react';
 import { ComboboxItemProps } from '@base-ui/react';
 import { ComponentProps } from 'react';
 import { ComponentPropsWithoutRef } from 'react';
@@ -872,12 +871,14 @@ export declare const GroupConversationIcon: default_2.NamedExoticComponent<defau
 
 export declare const GroupConversationLeaveIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
+/** @deprecated Not an accessible UI pattern — no replacement */
 export declare function Growl(props: GrowlProps): ReactElement;
 
 export declare namespace Growl {
     var displayName: string;
 }
 
+/** @deprecated Not an accessible UI pattern — no replacement */
 export declare function GrowlContainer(props: {
     children?: ReactNode;
 }): JSX.Element;
@@ -909,6 +910,7 @@ export declare const HeartAltIcon: default_2.NamedExoticComponent<default_2.SVGA
 
 export declare const HeartIcon: default_2.NamedExoticComponent<default_2.SVGAttributes<SVGSVGElement> & default_2.RefAttributes<SVGSVGElement>>;
 
+/** @deprecated Not an accessible UI pattern — no replacement */
 export declare const HelpButton: ForwardRefExoticComponent<HelpButtonProps & RefAttributes<HTMLButtonElement>>;
 
 export declare interface HelpButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -1545,6 +1547,7 @@ declare interface PillProps extends ComponentProps<'div'> {
     children: ReactNode;
 }
 
+/** @deprecated Not an accessible UI pattern — no replacement */
 export declare const PlainGrowl: ForwardRefExoticComponent<Omit< ClassAttributes<HTMLDivElement> & HTMLAttributes<HTMLDivElement> & {
     variant?: GrowlVariant;
 }, "ref"> & RefAttributes<HTMLDivElement>>;
@@ -1780,7 +1783,6 @@ export declare const SearchableSingleSelect: {
     GroupLabel: ForwardRefExoticComponent<Omit< AutocompleteGroupLabelProps, "ref"> & RefAttributes<HTMLDivElement>>;
     Popup: ForwardRefExoticComponent<Omit<PopupProps_6, "ref"> & RefAttributes<HTMLDivElement>>;
     Item: ForwardRefExoticComponent<Omit< ComboboxItemProps, "ref"> & RefAttributes<HTMLDivElement>>;
-    ItemIndicator: ForwardRefExoticComponent<Omit< ComboboxItemIndicatorProps, "ref"> & RefAttributes<HTMLSpanElement>>;
     Separator: ForwardRefExoticComponent<Omit< SeparatorProps, "ref"> & RefAttributes<HTMLDivElement>>;
     Input: ForwardRefExoticComponent<Omit<InputProps, "ref"> & RefAttributes<HTMLInputElement>>;
     Empty: ForwardRefExoticComponent<Omit< AutocompleteEmptyProps, "ref"> & RefAttributes<HTMLDivElement>>;

package/dist/main.js

@@ -315,7 +315,7 @@ var Popup$6 = forwardRef((props, ref) => {
 	return /* @__PURE__ */ jsxs(AlertDialog$1.Portal, {
 		container,
 		children: [/* @__PURE__ */ jsx(AlertDialog$1.Backdrop, { className: "ds-alert-dialog__backdrop" }), /* @__PURE__ */ jsx(AlertDialog$1.Popup, {
-			"data-c13y-component": "alert-dialog-popover",
+			"data-c13y-component": "alert-dialog-popup",
 			className: clsx$1("ds-alert-dialog__popup", className),
 			...rest,
 			ref,
@@ -8916,7 +8916,6 @@ var Root$9 = forwardRef((props, ref) => {
 			children: ICONS[variant]
 		}), /* @__PURE__ */ jsx("div", {
 			className: "ds-banner__content",
-			"data-c13y-component": "banner-content",
 			children
 		})]
 	});
@@ -8981,7 +8980,7 @@ var Popup$5 = forwardRef((props, ref) => {
 		children: [/* @__PURE__ */ jsx(Drawer.Backdrop, { className: "ds-bottom-sheet__backdrop" }), /* @__PURE__ */ jsx(Drawer.Viewport, {
 			className: "ds-bottom-sheet__viewport",
 			children: /* @__PURE__ */ jsxs(Drawer.Popup, {
-				"data-c13y-component": "bottom-sheet-popover",
+				"data-c13y-component": "bottom-sheet-popup",
 				className: clsx$1("ds-bottom-sheet__popup", className),
 				...rest,
 				ref,
@@ -9039,7 +9038,6 @@ var BottomSheet = {
 var ButtonDeprecated = forwardRef(function Button(props, ref) {
 	const { children, className = "", variant = "primary", icon = null, disabled, iconPosition = "leading", ...rest } = props;
 	return /* @__PURE__ */ jsxs("button", {
-		"data-c13y-component": "button",
 		className: `ds-button-deprecated ds-button-deprecated--${variant} ${className}`,
 		disabled,
 		...rest,
@@ -9058,7 +9056,6 @@ var ButtonDeprecated = forwardRef(function Button(props, ref) {
 var IconButton = forwardRef(function IconButton(props, ref) {
 	const { icon, className = "", variant = "primary", ...rest } = props;
 	return /* @__PURE__ */ jsx("button", {
-		"data-c13y-component": "button",
 		className: clsx$1("ds-button-deprecated", "ds-icon-button", `ds-button-deprecated--${variant}`, `${className}`),
 		...rest,
 		ref,
@@ -9233,7 +9230,7 @@ var Popup$4 = forwardRef((props, ref) => {
 	return /* @__PURE__ */ jsxs(Dialog$1.Portal, {
 		container,
 		children: [/* @__PURE__ */ jsx(Dialog$1.Backdrop, { className: "ds-dialog__backdrop" }), /* @__PURE__ */ jsx(Dialog$1.Popup, {
-			"data-c13y-component": "dialog-popover",
+			"data-c13y-component": "dialog-popup",
 			className: clsx$1("ds-dialog__popup", className),
 			...rest,
 			ref,
@@ -9889,7 +9886,7 @@ var FilterContentWrapper = forwardRef(function PopoverContent(props, propRef) {
 		modal: false,
 		children: /* @__PURE__ */ jsx("div", {
 			ref,
-			"data-c13y-component": "filter-popover",
+			"data-c13y-component": "filter-popup",
 			style: {
 				...floatingContext.floatingStyles,
 				width: "max-content",
@@ -10011,7 +10008,6 @@ Filter.displayName = "Filter";
 var GhostButton = forwardRef(function GhostButton(props, ref) {
 	const { children, className = "", variant = "primary", icon = null, disabled, iconPosition = "leading", ...rest } = props;
 	return /* @__PURE__ */ jsxs("button", {
-		"data-c13y-component": "ghost-button",
 		className: `ds-ghost-button ds-ghost-button--${variant} ${className}`,
 		disabled,
 		...rest,
@@ -10030,7 +10026,6 @@ var GhostButton = forwardRef(function GhostButton(props, ref) {
 var IconGhostButton = forwardRef(function IconGhostButton(props, ref) {
 	const { icon, className = "", variant = "primary", ...rest } = props;
 	return /* @__PURE__ */ jsx("button", {
-		"data-c13y-component": "ghost-button",
 		className: clsx$1("ds-ghost-button", "ds-ghost-icon-button", `ds-ghost-button--${variant}`, `${className}`),
 		...rest,
 		ref,
@@ -10041,20 +10036,20 @@ GhostButton.displayName = "GhostButton";
 IconGhostButton.displayName = "IconGhostButton";
 //#endregion
 //#region src/components/growl/Growl.tsx
+/** @deprecated Not an accessible UI pattern — no replacement */
 var PlainGrowl = forwardRef(function PlainGrowl(props, ref) {
 	const { variant = "success", className = "", ...rest } = props;
 	return /* @__PURE__ */ jsx("div", {
 		...rest,
-		"data-c13y-component": "plain-growl",
 		className: clsx(`ds-growl ds-growl--${variant}`, className),
 		role: "alert",
 		ref
 	});
 });
+/** @deprecated Not an accessible UI pattern — no replacement */
 function Growl(props) {
 	const { children, variant = "success", className = "" } = props;
 	return /* @__PURE__ */ jsx(m.div, {
-		"data-c13y-component": "growl",
 		className: clsx(`ds-growl ds-growl--${variant}`, className),
 		initial: {
 			opacity: 0,
@@ -10076,6 +10071,7 @@ function Growl(props) {
 		children
 	});
 }
+/** @deprecated Not an accessible UI pattern — no replacement */
 function GrowlContainer(props) {
 	return /* @__PURE__ */ jsx(LazyMotion, {
 		features: domAnimation,
@@ -10087,10 +10083,10 @@ Growl.displayName = "Growl";
 GrowlContainer.displayName = "GrowlContainer";
 //#endregion
 //#region src/components/helpButton/HelpButton.tsx
+/** @deprecated Not an accessible UI pattern — no replacement */
 var HelpButton = forwardRef(function HelpButton(props, ref) {
 	const { className = "", title, ...rest } = props;
 	return /* @__PURE__ */ jsx("button", {
-		"data-c13y-component": "help-button",
 		className: clsx$1("ds-help-button", className),
 		"aria-label": title,
 		ref,
@@ -10102,14 +10098,14 @@ HelpButton.displayName = "HelpButton";
 //#endregion
 //#region src/utils/splitC13yProps.ts
 /**
-* Splits a props object into its `data-c13y-*` customizability attributes and
+* Splits a props object into its `data-c13y-*` customisability 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
+* `data-c13y-component`. Use this to forward the customisability attributes onto
 * the popup while keeping positioner props (`align`, `sideOffset`, …) on the
 * positioner.
 */
@@ -10151,7 +10147,7 @@ var Popup$3 = forwardRef((props, ref) => {
 			...positionerProps,
 			children: /* @__PURE__ */ jsx(Menu$1.Popup, {
 				...c13y,
-				"data-c13y-component": "menu-popover",
+				"data-c13y-component": "menu-popup",
 				className: clsx$1("ds-menu__popup", className),
 				children,
 				ref
@@ -10795,7 +10791,7 @@ var Popup$2 = forwardRef((props, ref) => {
 			...positionerProps,
 			children: /* @__PURE__ */ jsx(Combobox.Popup, {
 				...c13y,
-				"data-c13y-component": "searchable-multi-select-popover",
+				"data-c13y-component": "searchable-multi-select-popup",
 				className: clsx$1("ds-searchable-multi-select__popup", className),
 				children,
 				ref
@@ -10985,7 +10981,7 @@ var Popup$1 = forwardRef((props, ref) => {
 			...positionerProps,
 			children: /* @__PURE__ */ jsx(Combobox.Popup, {
 				...c13y,
-				"data-c13y-component": "searchable-single-select-popover",
+				"data-c13y-component": "searchable-single-select-popup",
 				className: clsx$1("ds-searchable-single-select__popup", className),
 				children,
 				ref
@@ -11011,17 +11007,6 @@ var Separator$2 = forwardRef((props, ref) => {
 		...rest
 	});
 });
-var ItemIndicator$1 = forwardRef((props, ref) => {
-	const { className, ...rest } = props;
-	return /* @__PURE__ */ jsx(Combobox.ItemIndicator, {
-		"data-c13y-component": "searchable-single-select-item-indicator",
-		keepMounted: true,
-		className: "ds-searchable-single-select__item-indicator-wrapper",
-		ref,
-		...rest,
-		children: /* @__PURE__ */ jsx("div", { className: clsx$1("ds-searchable-single-select__item-indicator", className) })
-	});
-});
 var GroupLabel$1 = forwardRef((props, ref) => {
 	const { className, ...rest } = props;
 	return /* @__PURE__ */ jsx(Combobox.GroupLabel, {
@@ -11049,7 +11034,6 @@ var SearchableSingleSelect = {
 	GroupLabel: GroupLabel$1,
 	Popup: Popup$1,
 	Item: Item$2,
-	ItemIndicator: ItemIndicator$1,
 	Separator: Separator$2,
 	Input: Input$1,
 	Empty: Empty$1
@@ -11113,7 +11097,7 @@ var Popup = forwardRef((props, ref) => {
 			...positionerProps,
 			children: /* @__PURE__ */ jsx(Select$1.Popup, {
 				...c13y,
-				"data-c13y-component": "select-popover",
+				"data-c13y-component": "select-popup",
 				className: clsx$1("ds-select__popup", className),
 				children,
 				ref
@@ -11655,7 +11639,6 @@ var TextField = forwardRef((props, ref) => {
 			}),
 			/* @__PURE__ */ jsx(Input, {
 				className: clsx$1("ds-text-field__input", { "ds-text-field__input--has-leading-icon": leadingIcon }, { "ds-text-field__input--has-trailing-icon": trailingIcon }, className),
-				"data-c13y-component": "text-field-input",
 				ref,
 				...rest
 			}),
@@ -11831,7 +11814,7 @@ var Tooltip = {
 				...positionerProps,
 				children: /* @__PURE__ */ jsx(Tooltip$1.Popup, {
 					...c13y,
-					"data-c13y-component": "tooltip-popover",
+					"data-c13y-component": "tooltip",
 					className: clsx$1(`ds-tooltip--${variant}`, "ds-tooltip", className),
 					id: context?.id,
 					children,