@drivenets/design-system 0.19.0 → 0.20.0

package/src/components/ds-toggle-filter-data/ds-toggle-filter-data.types.ts

@@ -0,0 +1,43 @@
+import type { CSSProperties, MouseEvent, ReactNode, Ref } from 'react';
+
+export interface DsToggleFilterDataProps {
+	/**
+	 * Ref to the pill element
+	 */
+	ref?: Ref<HTMLButtonElement>;
+	/**
+	 * Emphasized leading segment naming the data the pill filters on
+	 */
+	label: ReactNode;
+	/**
+	 * Secondary-colored trailing segment, typically the count the `label` refers to
+	 */
+	value: ReactNode;
+	/**
+	 * Whether the pill is toggled on. Controlled — pair it with `onActiveChange` and re-render with
+	 * the next value. Surfaced as `aria-pressed`, which stays exposed while `disabled`.
+	 */
+	active: boolean;
+	/**
+	 * Whether the pill is disabled. Neither callback fires while set.
+	 * @default false
+	 */
+	disabled?: boolean;
+	/**
+	 * Additional CSS class names
+	 */
+	className?: string;
+	/**
+	 * Additional styles to apply
+	 */
+	style?: CSSProperties;
+	/**
+	 * Called on click and on keyboard activation with the next `active` value
+	 */
+	onActiveChange?: (active: boolean) => void;
+	/**
+	 * Called with the raw click event, before `onActiveChange`. Observational only — it cannot veto
+	 * the toggle.
+	 */
+	onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+}

package/src/components/ds-toggle-filter-data/index.ts

@@ -0,0 +1 @@
+export { default as DsToggleFilterData } from './ds-toggle-filter-data';

package/src/components/ds-tooltip/ds-tooltip.module.scss

@@ -1,5 +1,13 @@
 @use '../../styles/typography';
 
+.positioner {
+	// Zag marks the *content* pointer-transparent when the tooltip is not
+	// interactive, but leaves this wrapper clickable — so an open tooltip swallows
+	// clicks meant for whatever it overlaps. Interactive content re-enables itself
+	// with `pointer-events: auto`, which still applies under a `none` parent.
+	pointer-events: none;
+}
+
 .tooltip {
 	--arrow-size: 7px;
 	color: var(--font-on-action);

package/src/components/ds-tooltip/ds-tooltip.tsx

@@ -36,7 +36,7 @@ const DsTooltip: FC<DsTooltipProps> = ({
 		>
 			<Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
 			<Portal>
-				<Tooltip.Positioner>
+				<Tooltip.Positioner className={styles.positioner}>
 					<Tooltip.Content
 						className={classNames(styles.tooltip, slotProps?.content?.className)}
 						style={slotProps?.content?.style}

package/src/components/ds-tree/ds-tree.tsx

@@ -79,14 +79,14 @@ const DsTreeTree = ({ className, style, children }: DsTreeTreeProps) => (
 	</TreeView.Tree>
 );
 
-const DsTreeBranch = ({ className, style, children }: DsTreeBranchProps) => (
-	<TreeView.Branch className={classNames(styles.branch, className)} style={style}>
+const DsTreeBranch = ({ className, style, children, ...rest }: DsTreeBranchProps) => (
+	<TreeView.Branch {...rest} className={classNames(styles.branch, className)} style={style}>
 		{children}
 	</TreeView.Branch>
 );
 
-const DsTreeBranchControl = ({ className, style, children }: DsTreeBranchControlProps) => (
-	<TreeView.BranchControl className={classNames(styles.branchControl, className)} style={style}>
+const DsTreeBranchControl = ({ className, style, children, ...rest }: DsTreeBranchControlProps) => (
+	<TreeView.BranchControl {...rest} className={classNames(styles.branchControl, className)} style={style}>
 		{children}
 	</TreeView.BranchControl>
 );
@@ -97,8 +97,8 @@ const DsTreeBranchIndicator = ({ className, style, children }: DsTreeBranchIndic
 	</TreeView.BranchIndicator>
 );
 
-const DsTreeBranchText = ({ className, style, children }: DsTreeBranchTextProps) => (
-	<TreeView.BranchText className={classNames(styles.branchText, className)} style={style}>
+const DsTreeBranchText = ({ className, style, children, ...rest }: DsTreeBranchTextProps) => (
+	<TreeView.BranchText {...rest} className={classNames(styles.branchText, className)} style={style}>
 		{children}
 	</TreeView.BranchText>
 );
@@ -113,14 +113,14 @@ const DsTreeBranchIndentGuide = ({ className, style }: DsTreeBranchIndentGuidePr
 	<TreeView.BranchIndentGuide className={classNames(styles.branchIndentGuide, className)} style={style} />
 );
 
-const DsTreeItem = ({ className, style, children, onClick }: DsTreeItemProps) => (
-	<TreeView.Item className={classNames(styles.item, className)} style={style} onClick={onClick}>
+const DsTreeItem = ({ className, style, children, onClick, ...rest }: DsTreeItemProps) => (
+	<TreeView.Item {...rest} className={classNames(styles.item, className)} style={style} onClick={onClick}>
 		{children}
 	</TreeView.Item>
 );
 
-const DsTreeItemText = ({ className, style, children }: DsTreeItemTextProps) => (
-	<TreeView.ItemText className={classNames(styles.itemText, className)} style={style}>
+const DsTreeItemText = ({ className, style, children, ...rest }: DsTreeItemTextProps) => (
+	<TreeView.ItemText {...rest} className={classNames(styles.itemText, className)} style={style}>
 		{children}
 	</TreeView.ItemText>
 );

package/src/components/ds-tree/ds-tree.types.ts

@@ -1,4 +1,14 @@
-import type { CSSProperties, MouseEvent, ReactNode, Ref } from 'react';
+import type {
+	AriaAttributes,
+	CSSProperties,
+	FocusEventHandler,
+	KeyboardEventHandler,
+	MouseEvent,
+	MouseEventHandler,
+	PointerEventHandler,
+	ReactNode,
+	Ref,
+} from 'react';
 import type { TreeView as ArkTreeView } from '@ark-ui/react/tree-view';
 import type { IconType } from '../ds-icon';
 import type { FilterStatus } from '../ds-filter-status-icon';
@@ -96,7 +106,7 @@ export interface DsTreeRootProps<T extends DsTreeNode = DsTreeNode> extends DsTr
 	/**
 	 * Whether clicking anywhere on a branch row toggles its expansion in addition
 	 * to clicking the branch indicator.
-	 * @default false
+	 * @default true
 	 */
 	expandOnClick?: boolean;
 
@@ -148,26 +158,49 @@ export interface DsTreeRootProps<T extends DsTreeNode = DsTreeNode> extends DsTr
 
 export type DsTreeTreeProps = DsTreeBasePropsWithChildren;
 
-export type DsTreeBranchProps = DsTreeBasePropsWithChildren;
+/**
+ * Props a wrapping `asChild` trigger (`DsPopover.Trigger`, `DsTooltip`) injects onto
+ * the element it wraps. Row parts forward these so wrapping a row actually wires up
+ * instead of silently doing nothing.
+ */
+export interface DsTreeRowTriggerProps<T extends HTMLElement = HTMLElement> {
+	id?: string;
+	ref?: Ref<T>;
+	tabIndex?: number;
+	'aria-haspopup'?: AriaAttributes['aria-haspopup'];
+	'aria-expanded'?: AriaAttributes['aria-expanded'];
+	'aria-controls'?: string;
+	'data-state'?: string;
+	onClick?: MouseEventHandler<T>;
+	onPointerDown?: PointerEventHandler<T>;
+	onPointerEnter?: PointerEventHandler<T>;
+	onPointerLeave?: PointerEventHandler<T>;
+	onFocus?: FocusEventHandler<T>;
+	onBlur?: FocusEventHandler<T>;
+	onKeyDown?: KeyboardEventHandler<T>;
+}
+
+export type DsTreeBranchProps = DsTreeBasePropsWithChildren & DsTreeRowTriggerProps<HTMLDivElement>;
 
-export type DsTreeBranchControlProps = DsTreeBasePropsWithChildren;
+export type DsTreeBranchControlProps = DsTreeBasePropsWithChildren & DsTreeRowTriggerProps<HTMLDivElement>;
 
 export type DsTreeBranchIndicatorProps = DsTreeBasePropsWithChildren;
 
-export type DsTreeBranchTextProps = DsTreeBasePropsWithChildren;
+export type DsTreeBranchTextProps = DsTreeBasePropsWithChildren & DsTreeRowTriggerProps<HTMLSpanElement>;
 
 export type DsTreeBranchContentProps = DsTreeBasePropsWithChildren;
 
 export type DsTreeBranchIndentGuideProps = DsTreeBaseProps;
 
-export interface DsTreeItemProps extends DsTreeBasePropsWithChildren {
+export interface DsTreeItemProps
+	extends DsTreeBasePropsWithChildren, Omit<DsTreeRowTriggerProps<HTMLDivElement>, 'onClick'> {
 	/**
 	 * Called when the leaf item is clicked. Receives the native mouse event.
 	 */
 	onClick?: (event: MouseEvent<HTMLDivElement>) => void;
 }
 
-export type DsTreeItemTextProps = DsTreeBasePropsWithChildren;
+export type DsTreeItemTextProps = DsTreeBasePropsWithChildren & DsTreeRowTriggerProps<HTMLSpanElement>;
 
 export type DsTreeItemIndicatorProps = DsTreeBaseProps;
 

package/src/index.ts

@@ -13,6 +13,7 @@ export * from './components/ds-checkbox';
 export * from './components/ds-checkbox-group';
 export * from './components/ds-chip';
 export * from './components/ds-chip-group';
+export * from './components/ds-code-input';
 export * from './components/ds-comment-bubble';
 export * from './components/ds-comment-card';
 export * from './components/ds-comment-indicator';
@@ -40,6 +41,7 @@ export * from './components/ds-modal';
 export * from './components/ds-number-input';
 export * from './components/ds-panel';
 export * from './components/ds-password-input';
+export * from './components/ds-pin-toggle';
 export * from './components/ds-popover';
 export * from './components/ds-progress-arc';
 export * from './components/ds-progress-donut';