@drivenets/design-system 0.18.1 → 0.20.0

package/src/components/ds-bulk-actions/ds-bulk-actions.module.scss

@@ -0,0 +1,199 @@
+$count-size: 60px;
+$action-item-min-width: 64px;
+$action-label-max-width: 84px;
+$divider-height: 40px;
+$bar-gap: 3px;
+$bar-radius: 8px;
+$bar-shadow: 0 3.5px 14px 0 var(--shadow-moderate);
+
+.bulkActionsContainer {
+	position: relative;
+	width: fit-content;
+	background-color: var(--color-dap-gray-050);
+	border-radius: $bar-radius;
+	box-shadow: $bar-shadow;
+}
+
+.floating {
+	position: absolute;
+	bottom: var(--md);
+	left: 50%;
+	transform: translateX(-50%);
+	z-index: 1;
+	animation-duration: 0.3s;
+	animation-timing-function: ease-out;
+	animation-fill-mode: forwards;
+
+	&.entering {
+		animation-name: slideUpFadeIn;
+	}
+
+	&.exiting {
+		animation-name: slideDownFadeOut;
+	}
+}
+
+.selectedCountContainer {
+	display: flex;
+	flex-shrink: 0;
+	align-items: center;
+	justify-content: center;
+	width: $count-size;
+	height: $count-size;
+	padding: var(--3xs);
+	background-color: var(--color-dap-blue-600);
+	border-radius: $bar-radius 0 0 $bar-radius;
+}
+
+.selectedCountBadge {
+	margin: 0;
+	color: var(--color-dap-gray-050);
+	text-align: center;
+}
+
+.bulkActionsInfo {
+	flex-shrink: 0;
+	margin: 0;
+	padding: 0 var(--xs);
+	color: var(--color-dap-gray-600);
+	text-wrap: nowrap;
+}
+
+.bulkActionsActions {
+	min-width: 0;
+}
+
+.measurementContainer {
+	pointer-events: none;
+	position: absolute;
+	display: flex;
+	align-items: center;
+	height: 0;
+	overflow: hidden;
+	visibility: hidden;
+
+	> * {
+		flex-shrink: 0;
+	}
+
+	* {
+		visibility: hidden;
+	}
+}
+
+.menuTriggerAnchor {
+	display: inline-flex;
+}
+
+.actionItem {
+	display: flex;
+	flex-shrink: 0;
+	align-items: center;
+	gap: var(--3xs);
+	min-width: $action-item-min-width;
+	padding-right: var(--3xs);
+
+	&[data-item-width='fit-content'],
+	&[data-item-width='custom'] {
+		min-width: 0;
+	}
+
+	&::before {
+		content: '';
+		flex-shrink: 0;
+		width: 1px;
+		height: $divider-height;
+		background-color: var(--color-dap-gray-400);
+	}
+}
+
+.actionButton {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: var(--4xs);
+	min-width: $action-item-min-width;
+	max-width: $action-label-max-width;
+	padding: var(--3xs) var(--4xs);
+	border: none;
+	border-radius: var(--3xs);
+	background-color: var(--background);
+	color: var(--font-action-secondary);
+	cursor: pointer;
+	transition:
+		background-color 0.2s,
+		color 0.2s;
+
+	&[data-item-width='fit-content'] {
+		min-width: 0;
+		max-width: none;
+		width: fit-content;
+	}
+
+	&[data-item-width='custom'] {
+		min-width: 0;
+		max-width: none;
+		width: var(--ds-bulk-actions-item-width);
+	}
+
+	&:hover:not(:disabled) {
+		background-color: var(--background-action-tertiary-hover);
+		color: var(--brand-600);
+	}
+
+	&:active:not(:disabled) {
+		background-color: var(--background-action-secondary-hover);
+		color: var(--font-action-secondary);
+	}
+
+	&:disabled {
+		background-color: transparent;
+		color: var(--font-disabled);
+		cursor: not-allowed;
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus-visible {
+		outline: 2px solid var(--brand-600);
+		outline-offset: -2px;
+	}
+}
+
+.actionLabel {
+	min-width: 0;
+	max-width: 100%;
+	overflow: hidden;
+	text-align: center;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.dismissButton {
+	flex-shrink: 0;
+}
+
+@keyframes slideUpFadeIn {
+	0% {
+		opacity: 0;
+		transform: translate(-50%, 100%);
+	}
+	100% {
+		opacity: 1;
+		transform: translate(-50%, 0);
+	}
+}
+
+@keyframes slideDownFadeOut {
+	0% {
+		opacity: 1;
+		transform: translate(-50%, 0);
+	}
+	100% {
+		opacity: 0;
+		transform: translate(-50%, 100%);
+	}
+}

package/src/components/ds-bulk-actions/ds-bulk-actions.tsx

@@ -0,0 +1,220 @@
+import { createContext, useContext, useEffect, useRef, useState } from 'react';
+import classnames from 'classnames';
+import styles from './ds-bulk-actions.module.scss';
+import type {
+	BulkActionsMenuPlacement,
+	DsBulkActionsItemProps,
+	DsBulkActionsProps,
+} from './ds-bulk-actions.types';
+import {
+	getBulkActionItems,
+	isMenuItemProps,
+	itemToOverflowEntry,
+	resolveItemWidth,
+} from './ds-bulk-actions.utils';
+import { ActionButton } from './components/action-button';
+import { MenuEntries, TooltipMenuTrigger } from './components/menu-entries';
+import { OverflowMeasure, OverflowMore } from './components/overflow';
+import { useBulkActionsOverflow } from './hooks/use-bulk-actions-overflow';
+import { DsButtonV3 } from '../ds-button-v3';
+import { DsDropdownMenu } from '../ds-dropdown-menu';
+import { DsStack } from '../ds-stack';
+import { DsTooltip } from '../ds-tooltip';
+import { DsTypography } from '../ds-typography';
+import { mergeRefs } from '../../utils/merge-refs';
+
+const EXIT_ANIMATION_MS = 300;
+
+interface BulkActionsContextValue {
+	menuPlacement: BulkActionsMenuPlacement;
+}
+
+const BulkActionsContext = createContext<BulkActionsContextValue>({ menuPlacement: 'bottom' });
+
+const Item = (props: DsBulkActionsItemProps) => {
+	const { className, style, ref, width, icon, label, disabled } = props;
+	const { menuPlacement } = useContext(BulkActionsContext);
+	const { mode, buttonStyle } = resolveItemWidth(width);
+
+	return (
+		<div ref={ref} className={classnames(styles.actionItem, className)} style={style} data-item-width={mode}>
+			{isMenuItemProps(props) ? (
+				<DsDropdownMenu.Root positioning={{ placement: menuPlacement }}>
+					<TooltipMenuTrigger
+						icon={icon}
+						label={label}
+						disabled={disabled}
+						itemWidth={mode}
+						buttonStyle={buttonStyle}
+					/>
+					<DsDropdownMenu.Content>
+						<MenuEntries entries={props.menu} />
+					</DsDropdownMenu.Content>
+				</DsDropdownMenu.Root>
+			) : (
+				<DsTooltip content={label}>
+					<ActionButton
+						icon={icon}
+						label={label}
+						onClick={props.onClick}
+						disabled={disabled}
+						itemWidth={mode}
+						style={buttonStyle}
+					/>
+				</DsTooltip>
+			)}
+		</div>
+	);
+};
+
+/**
+ * Floating or static toolbar for bulk operations on a selection.
+ **/
+const DsBulkActions = ({
+	selectedCount,
+	children,
+	onClearSelection,
+	placement = 'static',
+	menuPlacement: menuPlacementProp,
+	locale,
+	className,
+	style,
+	ref,
+}: DsBulkActionsProps) => {
+	const [isRendered, setIsRendered] = useState(false);
+	const [animationClass, setAnimationClass] = useState('');
+	const isFloating = placement === 'floating';
+	const menuPlacement = menuPlacementProp ?? (isFloating ? 'top' : 'bottom');
+
+	const itemsSelectedLabel = locale?.itemsSelectedLabel ?? 'Items selected';
+	const clearSelectionLabel = locale?.clearSelectionLabel ?? 'Clear selection';
+	const moreActionsLabel = locale?.moreActionsLabel ?? 'More';
+
+	const containerRef = useRef<HTMLDivElement>(null);
+	const stackRef = useRef<HTMLDivElement>(null);
+	const badgeRef = useRef<HTMLDivElement>(null);
+	const dismissRef = useRef<HTMLButtonElement>(null);
+	const measureRef = useRef<HTMLDivElement>(null);
+	const items = getBulkActionItems(children);
+
+	const { visibleCount, showMore, summaryLabelHidden } = useBulkActionsOverflow({
+		active: isRendered,
+		itemCount: items.length,
+		style,
+		containerRef,
+		stackRef,
+		badgeRef,
+		dismissRef,
+		measureRef,
+	});
+
+	useEffect(() => {
+		if (selectedCount > 0) {
+			if (!isRendered) {
+				setIsRendered(true);
+				setAnimationClass(isFloating ? styles.entering : '');
+			}
+
+			return;
+		}
+
+		if (isRendered) {
+			if (isFloating) {
+				setAnimationClass(styles.exiting);
+				const timer = setTimeout(() => {
+					setIsRendered(false);
+					setAnimationClass('');
+				}, EXIT_ANIMATION_MS);
+				return () => clearTimeout(timer);
+			}
+
+			setIsRendered(false);
+			setAnimationClass('');
+		}
+	}, [selectedCount, isRendered, isFloating]);
+
+	if (!isRendered) {
+		return null;
+	}
+
+	const clampedVisibleCount = Math.min(visibleCount, items.length);
+	const visibleItems = items.slice(0, clampedVisibleCount);
+	const overflowEntries = items
+		.slice(clampedVisibleCount)
+		.map((item, index) => itemToOverflowEntry(item.props, index));
+
+	return (
+		<BulkActionsContext.Provider value={{ menuPlacement }}>
+			<div
+				ref={mergeRefs(ref, containerRef)}
+				role="toolbar"
+				aria-label={itemsSelectedLabel}
+				className={classnames(
+					styles.bulkActionsContainer,
+					isFloating && styles.floating,
+					isFloating && animationClass,
+					className,
+				)}
+				style={style}
+			>
+				<DsStack ref={stackRef} direction="row" alignItems="center" gap="var(--3xs)">
+					<div ref={badgeRef} className={styles.selectedCountContainer} aria-live="polite" aria-atomic="true">
+						<DsTypography variant="heading1" className={styles.selectedCountBadge}>
+							{selectedCount}
+						</DsTypography>
+					</div>
+
+					{summaryLabelHidden ? null : (
+						<DsTypography variant="body-md-semi-bold" className={styles.bulkActionsInfo}>
+							{itemsSelectedLabel}
+						</DsTypography>
+					)}
+
+					<DsStack
+						direction="row"
+						alignItems="center"
+						justifyContent="flex-end"
+						flex="1 1 auto"
+						flexWrap="nowrap"
+						className={styles.bulkActionsActions}
+					>
+						{visibleItems}
+						{showMore && overflowEntries.length > 0 ? (
+							<OverflowMore
+								label={moreActionsLabel}
+								menuPlacement={menuPlacement}
+								entries={overflowEntries}
+							/>
+						) : null}
+					</DsStack>
+
+					<DsButtonV3
+						ref={dismissRef}
+						variant="tertiary"
+						size="medium"
+						icon="close"
+						aria-label={clearSelectionLabel}
+						className={styles.dismissButton}
+						onClick={onClearSelection}
+					/>
+				</DsStack>
+
+				{items.length > 0 ? (
+					<OverflowMeasure
+						items={items}
+						moreActionsLabel={moreActionsLabel}
+						itemsSelectedLabel={itemsSelectedLabel}
+						measureRef={measureRef}
+					/>
+				) : null}
+			</div>
+		</BulkActionsContext.Provider>
+	);
+};
+
+DsBulkActions.displayName = 'DsBulkActions';
+Item.displayName = 'DsBulkActions.Item';
+
+DsBulkActions.Item = Item;
+
+export default DsBulkActions;

package/src/components/ds-bulk-actions/ds-bulk-actions.types.ts

@@ -0,0 +1,170 @@
+import type { CSSProperties, ReactNode, Ref } from 'react';
+import type { IconType } from '../ds-icon';
+
+export const bulkActionsPlacements = ['static', 'floating'] as const;
+export type BulkActionsPlacement = (typeof bulkActionsPlacements)[number];
+
+export const bulkActionsMenuPlacements = ['top', 'bottom'] as const;
+export type BulkActionsMenuPlacement = (typeof bulkActionsMenuPlacements)[number];
+
+export const bulkActionsMenuItemVariants = ['default', 'error'] as const;
+export type BulkActionsMenuItemVariant = (typeof bulkActionsMenuItemVariants)[number];
+
+export const bulkActionsItemWidthModes = ['fixed', 'fit-content'] as const;
+export type BulkActionsItemWidthMode = (typeof bulkActionsItemWidthModes)[number];
+
+/**
+ * `'fixed'` keeps the 64–84px column. `'fit-content'` hugs the label. A number is an exact pixel width and truncates.
+ */
+export type DsBulkActionsItemWidth = BulkActionsItemWidthMode | number;
+
+export interface DsBulkActionsLocale {
+	/**
+	 * Label shown next to the selection count
+	 * @default 'Items selected'
+	 */
+	itemsSelectedLabel?: string;
+
+	/**
+	 * Accessible name for the dismiss control
+	 * @default 'Clear selection'
+	 */
+	clearSelectionLabel?: string;
+
+	/**
+	 * Label for the overflow trigger that holds collapsed actions
+	 * @default 'More'
+	 */
+	moreActionsLabel?: string;
+}
+
+interface DsBulkActionsMenuEntryBase {
+	value: string;
+	label: string;
+	icon?: IconType;
+	disabled?: boolean;
+	/**
+	 * @default 'default'
+	 */
+	variant?: BulkActionsMenuItemVariant;
+}
+
+type DsBulkActionsMenuLeafEntry = DsBulkActionsMenuEntryBase & {
+	onSelect?: () => void;
+	menu?: never;
+};
+
+type DsBulkActionsMenuBranchEntry = DsBulkActionsMenuEntryBase & {
+	/**
+	 * Nested submenu entries. Mutually exclusive with `onSelect`.
+	 */
+	menu: DsBulkActionsMenuEntry[];
+	onSelect?: never;
+};
+
+export type DsBulkActionsMenuEntry = DsBulkActionsMenuLeafEntry | DsBulkActionsMenuBranchEntry;
+
+interface DsBulkActionsItemSharedProps {
+	/**
+	 * Action column width.
+	 * @default 'fixed'
+	 */
+	width?: DsBulkActionsItemWidth;
+
+	/**
+	 * Whether the action is non-interactive
+	 * @default false
+	 */
+	disabled?: boolean;
+
+	className?: string;
+	style?: CSSProperties;
+	ref?: Ref<HTMLDivElement>;
+	children?: never;
+}
+
+type DsBulkActionsItemClickProps = DsBulkActionsItemSharedProps & {
+	/**
+	 * Icon displayed above the action label
+	 */
+	icon: IconType;
+
+	/**
+	 * Action label under the icon. Truncates when `width` is `'fixed'` or a pixel length; full text in tooltip.
+	 */
+	label: string;
+
+	/**
+	 * Called when the action is activated. Mutually exclusive with `menu`.
+	 */
+	onClick: () => void;
+
+	menu?: never;
+};
+
+type DsBulkActionsItemMenuProps = DsBulkActionsItemSharedProps & {
+	/**
+	 * Icon displayed above the action label
+	 */
+	icon: IconType;
+
+	/**
+	 * Action label under the icon. Truncates when `width` is `'fixed'` or a pixel length; full text in tooltip.
+	 */
+	label: string;
+
+	/**
+	 * Declarative menu shown from this action. Mutually exclusive with `onClick`.
+	 */
+	menu: DsBulkActionsMenuEntry[];
+
+	onClick?: never;
+};
+
+/**
+ * Slot in the bulk-actions toolbar. `onClick` and `menu` are mutually exclusive.
+ */
+export type DsBulkActionsItemProps = DsBulkActionsItemClickProps | DsBulkActionsItemMenuProps;
+
+export interface DsBulkActionsProps {
+	/**
+	 * Number of selected items. The bar mounts at 1+ and unmounts when cleared to 0.
+	 */
+	selectedCount: number;
+
+	/**
+	 * Action slots rendered between the selection summary and the dismiss control
+	 */
+	children?: ReactNode;
+
+	/**
+	 * Called when the dismiss control is activated; should clear the selection
+	 */
+	onClearSelection: () => void;
+
+	/**
+	 * Placement of the toolbar. `floating` anchors to the bottom center of a positioned
+	 * ancestor; `static` leaves placement to the consumer via `className` / `style`.
+	 *
+	 * Action overflow ("More") only activates when the toolbar width is bounded via
+	 * `style.width`, `style.maxWidth`, or a CSS `max-width`; a bare `width` set through
+	 * `className` is not detected (the default `fit-content` width is indistinguishable).
+	 * @default 'static'
+	 */
+	placement?: BulkActionsPlacement;
+
+	/**
+	 * Flyout direction for `menu` items and the overflow More menu.
+	 * @default 'top' when `placement="floating"`, otherwise `'bottom'`
+	 */
+	menuPlacement?: BulkActionsMenuPlacement;
+
+	/**
+	 * Localized strings for user-facing copy
+	 */
+	locale?: DsBulkActionsLocale;
+
+	className?: string;
+	style?: CSSProperties;
+	ref?: Ref<HTMLDivElement>;
+}