@persona/design-system 0.1.5-pre.4

package/dist/ListBox-DbyZFy2W.d.cts

@@ -0,0 +1,138 @@
+import { r as ButtonProps } from "./Button-C_3p5Xfi.cjs";
+import { l as MenuItemProps } from "./Menu-DPrNMatb.cjs";
+import { ComponentPropsWithoutRef, PropsWithChildren, ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+import * as _$react_aria_components0 from "react-aria-components";
+import { GridList, GridListItem, Header } from "react-aria-components";
+
+//#region components/ListBox/ListBox.d.ts
+interface ListBoxContextValue {
+  size: 'sm' | 'md';
+  listBoxId: string;
+  setItemHasActionsOrDelete: (value: boolean) => void;
+}
+/**
+ * Hook to access ListBox context values (like size) from child components
+ */
+declare const useListBoxContext: () => ListBoxContextValue | null;
+interface ListBoxProps<T extends object> extends Omit<ComponentPropsWithoutRef<typeof GridList<T>>, 'slot' | 'autoFocus' | 'orientation' | 'shouldFocusWrap' | 'dragAndDropHooks' | 'layout'> {
+  /**
+   * Called when "Add" button is clicked. Only renders "Add" button if this prop is present.
+   */
+  onAdd?: ButtonProps['onClick'];
+  /**
+   * Called when "Delete" button is clicked. Only renders "Delete" button if this prop is present.
+   */
+  onDelete?: (selectedKeys: ListBoxProps<T>['selectedKeys']) => void;
+  /**
+   * Whether or not delete button should be disabled.
+   */
+  deleteDisabled?: boolean;
+  /**
+   * Whether or not the Add/Delete buttons should be shown.
+   */
+  editable?: boolean;
+  /**
+   * Text to display if no options are available.
+   */
+  emptyText?: string;
+  /**
+   * Whether or not to expand the box to the full width of the container.
+   */
+  fullWidth?: boolean;
+  /**
+   * When provided, enables drag and drop functionality.
+   */
+  reorderConfig?: {
+    /**
+     * Called when items are reordered via drag and drop. Receives the reordered
+     * array of items when an item is dropped.
+     */
+    onReorder: (reorderedItems: T[]) => void;
+    /**
+     * The name of the property on the item that was passed as the key to
+     * `ListBox.Item`. For exanple, if the item is`{ id: '1', name: 'First Item' }`,
+     * and you passed ListBox.Item `key={item.id}`, then the `itemKeyPath`
+     * should be `'id'`.
+     */
+    itemKeyPath: string;
+  };
+  /**
+   * Size of the list box.
+   */
+  size?: 'sm' | 'md';
+}
+declare const ListBox: {
+  <T extends object>({
+    children,
+    onAdd,
+    onDelete,
+    emptyText,
+    deleteDisabled,
+    selectedKeys,
+    onSelectionChange,
+    editable,
+    size,
+    reorderConfig,
+    items,
+    ...props
+  }: PropsWithChildren<ListBoxProps<T>>): _$react_jsx_runtime0.JSX.Element;
+  Item: ({
+    children,
+    actions,
+    onDelete,
+    size,
+    dropdownHeadingText,
+    dropdownFormFields,
+    dropdownContent,
+    dropdownFooter,
+    ...props
+  }: ListBoxItemProps) => _$react_jsx_runtime0.JSX.Element;
+  Section: <T extends object>(props: _$react_aria_components0.ListBoxSectionProps<T> & React.RefAttributes<HTMLElement>) => React.ReactElement | null;
+  Header: (props: ComponentPropsWithoutRef<typeof Header>) => _$react_jsx_runtime0.JSX.Element;
+};
+interface ListBoxItemProps extends ComponentPropsWithoutRef<typeof GridListItem> {
+  /**
+   * Actions to display in a dropdown menu.
+   * Supports all props from `MenuItem`.
+   */
+  actions?: Array<{
+    label: string;
+    onClick: () => void;
+  } & Omit<MenuItemProps, 'children'>>;
+  /**
+   * Called when the delete (X) icon is clicked. Only renders item-level delete icon if this prop is present.
+   * Receives the item's id and the click event as parameters.
+   */
+  onDelete?: (id: string | number, e: React.MouseEvent<HTMLButtonElement>) => void;
+  /**
+   * Size of the list box item.
+   */
+  size?: 'sm' | 'md';
+  /**
+   * Form fields to be rendered inside a row dropdown popover.
+   * The configField prop will be set to true for all fields via FormGroupContext.
+   * Dropdown will be opened when the item is selected.
+   */
+  dropdownFormFields?: ReactNode;
+  /**
+   * Content to be rendered inside the row dropdown popover.
+   * Dropdown will be opened when the item is selected.
+   */
+  dropdownContent?: ReactNode;
+  /**
+   * Optional heading text to display in the row dropdown popover.
+   * Either dropdownFormFields or dropdownContent must also be provided,
+   * otherwise the dropdown will not be rendered.
+   */
+  dropdownHeadingText?: string;
+  /**
+   * Footer to be rendered inside the row dropdown popover.
+   * Either dropdownFormFields or dropdownContent must also be provided,
+   * otherwise the dropdown will not be rendered.
+   */
+  dropdownFooter?: ReactNode;
+}
+//#endregion
+export { useListBoxContext as i, ListBoxItemProps as n, ListBoxProps as r, ListBox as t };
+//# sourceMappingURL=ListBox-DbyZFy2W.d.cts.map

package/dist/ListBox-Z1y0LG1H.mjs

@@ -0,0 +1,369 @@
+import { isFocused, isHovered, isNotDisabled } from "./lib/pseudoClass.mjs";
+import { paragraphMixins } from "./mixins/text.mjs";
+import { n as Stack } from "./Stack-hwgS2FU1.mjs";
+import "./components/Stack/index.mjs";
+import { HeadlessAriaButton } from "./lib/HeadlessAriaButton.mjs";
+import { findIndexByKey, moveItemByIndex } from "./lib/reorderItems.mjs";
+import { Z_INDICES } from "./lib/zindex.mjs";
+import { n as Button$1, t as IconButton } from "./IconButton-C28qxOdi.mjs";
+import "./components/Button/index.mjs";
+import { t as FormGroupContext } from "./useFormGroup-BMukAMAd.mjs";
+import { o as MenuHeading, r as ListItem, s as MenuItem } from "./Menu-DNRHo2i_.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-BTk--LWo.mjs";
+import "./components/DropdownMenu/index.mjs";
+import "./components/Menu/index.mjs";
+import { s as Popover_default } from "./Popover-BSdyxuja.mjs";
+import { t as Container } from "./FormControl-BXHqI_2D.mjs";
+import { BorderRadius, Color, Spacing, Typography } from "@persona/design-tokens";
+import styled, { css } from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { DropIndicator, GridList, GridListItem, Header, ListBoxSection, useDragAndDrop } from "react-aria-components";
+import { DragIcon } from "@persona/icons";
+import { MoreIcon as MoreIcon$1, XIcon as XIcon$1 } from "@persona/icons/12px";
+import uniqueId from "lodash/fp/uniqueId.js";
+//#region components/ListBox/ListBox.tsx
+const ListBoxContext = createContext(null);
+/**
+* Hook to access ListBox context values (like size) from child components
+*/
+const useListBoxContext = () => {
+	return useContext(ListBoxContext);
+};
+const StyledListBox = styled(GridList)`
+  ${({ $size }) => $size === "sm" ? paragraphMixins.sm : paragraphMixins.md};
+
+  box-sizing: border-box;
+  background: ${Color.BackgroundPrimary};
+  border-radius: ${BorderRadius.Md};
+  border: 1px solid ${Color.BorderDivider};
+  padding: ${Spacing[1]};
+
+  ${({ fullWidth }) => !fullWidth && css`
+      width: 204px;
+    `}
+`;
+const StyledDropIndicator = styled(DropIndicator)`
+  height: 2px;
+  background: ${({ theme }) => theme.color.text.brand};
+`;
+const ListBoxEmptyState = styled.button`
+  ${({ $size }) => $size === "sm" ? paragraphMixins.sm : paragraphMixins.md};
+
+  background-color: transparent;
+  outline: none;
+  border: none;
+  padding: ${Spacing[1]};
+  color: ${Color.TextSecondary};
+`;
+const ListBoxEmptyStateButton = styled(ListBoxEmptyState)`
+  &:hover {
+    cursor: pointer;
+  }
+`;
+const ListBox = ({ children, onAdd, onDelete, emptyText, deleteDisabled, selectedKeys, onSelectionChange, editable = true, size = "md", reorderConfig, items, ...props }) => {
+	const listBoxRef = useRef(null);
+	const listBoxId = useMemo(() => uniqueId("listbox-"), []);
+	const rowDropdownId = `${listBoxId}-row-dropdown`;
+	const [itemHasActionsOrDelete, setItemHasActionsOrDelete] = useState(false);
+	const { dragAndDropHooks } = useDragAndDrop({
+		getItems: (keys) => Array.from(keys).map((key) => ({ "text/plain": String(key) })),
+		getAllowedDropOperations: () => ["move"],
+		onReorder: (e) => {
+			if (!reorderConfig || !items) return;
+			const { onReorder, itemKeyPath } = reorderConfig;
+			if (!onReorder || !itemKeyPath) return;
+			const draggedKey = Array.from(e.keys)[0];
+			if (draggedKey == null) return;
+			const itemsArr = Array.from(items);
+			const fromIndex = findIndexByKey(itemsArr, itemKeyPath, String(draggedKey));
+			const targetIndex = findIndexByKey(itemsArr, itemKeyPath, String(e.target.key));
+			if (fromIndex === -1 || targetIndex === -1) return;
+			const targetIndexAfterRemoval = fromIndex < targetIndex ? targetIndex - 1 : targetIndex;
+			onReorder(moveItemByIndex(itemsArr, fromIndex, e.target.dropPosition === "before" ? targetIndexAfterRemoval : targetIndexAfterRemoval + 1));
+		},
+		renderDropIndicator: (target) => /* @__PURE__ */ jsx(StyledDropIndicator, { target })
+	});
+	const handleOutsideClick = useCallback((event) => {
+		if (!document.querySelector(`[id="${rowDropdownId}"][data-state="open"]`)) return;
+		const target = event.target;
+		const isOutsideListBox = listBoxRef.current && !listBoxRef.current.contains(target);
+		const isOnRowDropdownContent = target.closest(`[id="${rowDropdownId}"]`);
+		if (isOutsideListBox && !isOnRowDropdownContent && selectedKeys != null && selectedKeys !== "all" && Array.from(selectedKeys).length > 0 && onSelectionChange) onSelectionChange(/* @__PURE__ */ new Set());
+	}, [
+		selectedKeys,
+		onSelectionChange,
+		rowDropdownId
+	]);
+	useEffect(() => {
+		document.addEventListener("mousedown", handleOutsideClick);
+		return () => {
+			document.removeEventListener("mousedown", handleOutsideClick);
+		};
+	}, [handleOutsideClick]);
+	return /* @__PURE__ */ jsx(ListBoxContext.Provider, {
+		value: {
+			size,
+			listBoxId,
+			setItemHasActionsOrDelete
+		},
+		children: /* @__PURE__ */ jsxs(Stack, {
+			spacing: Spacing[1],
+			children: [/* @__PURE__ */ jsx(StyledListBox, {
+				ref: listBoxRef,
+				onSelectionChange,
+				renderEmptyState: () => onAdd ? /* @__PURE__ */ jsx(ListBoxEmptyStateButton, {
+					as: "button",
+					onClick: onAdd,
+					$size: size,
+					children: emptyText || "Click to add an option"
+				}) : /* @__PURE__ */ jsx(ListBoxEmptyState, {
+					type: "button",
+					$size: size,
+					children: emptyText || "No options."
+				}),
+				selectedKeys,
+				$size: size,
+				items,
+				...itemHasActionsOrDelete && { shouldSelectOnPressUp: true },
+				...reorderConfig && { dragAndDropHooks },
+				...props,
+				children
+			}), editable && (onAdd || onDelete) && /* @__PURE__ */ jsxs(Stack, {
+				direction: "horizontal",
+				spacing: Spacing[1],
+				children: [onAdd && /* @__PURE__ */ jsx(Button$1, {
+					size: "sm",
+					variant: "basic",
+					width: "auto",
+					onClick: onAdd,
+					children: "Add"
+				}), onDelete && /* @__PURE__ */ jsx(Button$1, {
+					size: "sm",
+					variant: "basic",
+					width: "auto",
+					onClick: () => onDelete?.(selectedKeys),
+					disabled: deleteDisabled || selectedKeys == null,
+					children: "Delete"
+				})]
+			})]
+		})
+	});
+};
+const IconButtonWidth = 16;
+const BackgroundFadeWidth = parseInt(Spacing[3]);
+const RowActionsContainer = styled("div")`
+  width: ${BackgroundFadeWidth + parseInt(Spacing[1]) + IconButtonWidth + parseInt(Spacing[2])}px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  padding-right: ${Spacing[2]};
+  display: flex;
+  align-items: center;
+  justify-content: end;
+`;
+const StyledItem = styled(ListItem)`
+  position: relative;
+  padding: ${Spacing[1]} ${Spacing[2]};
+  overflow: hidden;
+  white-space: nowrap;
+
+  ${RowActionsContainer} {
+    background: linear-gradient(
+      to right,
+      transparent,
+      ${Color.BackgroundPrimary} ${BackgroundFadeWidth}px
+    );
+  }
+
+  // If both actions and delete are present or only delete is present, hide actions by default, show on hover
+  ${({ $hasActions, $hasDelete }) => ($hasActions && $hasDelete || !$hasActions && $hasDelete) && css`
+      ${RowActionsContainer} {
+        opacity: 0;
+      }
+    `}
+
+  // increase the width of the row actions container when both actions and delete are present
+  ${({ $hasActions, $hasDelete }) => $hasActions && $hasDelete && css`
+      ${RowActionsContainer} {
+        width: ${BackgroundFadeWidth + parseInt(Spacing[1]) + IconButtonWidth * 2 + parseInt(Spacing[2])}px;
+      }
+    `}
+
+  &${isNotDisabled}${isHovered}:not([data-selected], [data-dragging]),
+  &${isNotDisabled}${isFocused}:not([data-selected], [data-dragging]),
+  &[data-hovered]:not([data-selected], [data-dragging]) {
+    cursor: pointer;
+    color: ${({ theme }) => theme.color.text.primary};
+    background-color: ${Color.BackgroundSecondary};
+
+    ${RowActionsContainer} {
+      opacity: 1;
+      background: linear-gradient(
+        to right,
+        transparent,
+        ${Color.BackgroundSecondary} ${BackgroundFadeWidth}px
+      );
+    }
+  }
+
+  &[data-selected],
+  &[data-selected]${isFocused}, &[data-selected]:focus,
+  &${isNotDisabled}${isHovered}[data-selected] {
+    outline: none;
+    color: ${({ theme }) => theme.color.text.brand};
+    background-color: ${({ theme }) => theme.color.background.highlight};
+
+    ${RowActionsContainer} {
+      opacity: 1;
+      background: linear-gradient(
+        to right,
+        transparent,
+        ${({ theme }) => theme.color.background.highlight} ${BackgroundFadeWidth}px
+      );
+    }
+  }
+
+  &[data-dragging] {
+    opacity: 0.5;
+    background-color: ${Color.BackgroundPrimary};
+  }
+
+  .react-aria-Section:not(:first-child) {
+    margin-top: ${Spacing[1]};
+  }
+`;
+const ContentContainer = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: ${Spacing[2]};
+`;
+const DragHandle = styled(HeadlessAriaButton)`
+  display: flex;
+  align-items: center;
+`;
+const TextContent = styled.span`
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+const DropdownPopoverHeading = styled.div`
+  ${({ $size }) => $size === "md" ? Typography.TextMediumBold : Typography.TextSmallBold};
+  border-bottom: 1px solid ${Color.BorderHairline};
+  padding: ${Spacing[2]} ${Spacing[3]} ${Spacing[1]};
+`;
+const DropdownPopoverContent = styled(Stack)`
+  min-width: var(--radix-popover-trigger-width);
+  padding: ${Spacing[3]};
+
+  ${Container} {
+    min-width: 0;
+  }
+`;
+const DropdownPopoverFooter = styled.div`
+  border-top: 1px solid ${Color.BorderHairline};
+  padding: ${Spacing[1]};
+`;
+const ListBoxItem = ({ children, actions, onDelete, size, dropdownHeadingText, dropdownFormFields, dropdownContent, dropdownFooter, ...props }) => {
+	const context = useListBoxContext();
+	const effectiveSize = size ?? context?.size ?? "md";
+	useEffect(() => {
+		if (context && (actions || onDelete)) context.setItemHasActionsOrDelete(true);
+	}, [
+		context,
+		actions,
+		onDelete
+	]);
+	const shouldRenderDropdown = dropdownFormFields || dropdownContent;
+	const handleDelete = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if (onDelete && props.id != null) onDelete(props.id, e);
+	};
+	return /* @__PURE__ */ jsx(StyledItem, {
+		as: GridListItem,
+		$hasActions: actions && actions.length > 0,
+		$hasDelete: !!onDelete,
+		textValue: typeof children === "string" ? children : void 0,
+		size: effectiveSize,
+		...props,
+		children: ({ isSelected, allowsDragging }) => {
+			const contentWithDragHandle = /* @__PURE__ */ jsxs(ContentContainer, { children: [
+				allowsDragging && /* @__PURE__ */ jsx(DragHandle, {
+					slot: "drag",
+					"aria-label": "Drag to reorder",
+					children: /* @__PURE__ */ jsx(DragIcon, {})
+				}),
+				typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx(TextContent, { children }) : children,
+				(onDelete || actions) && /* @__PURE__ */ jsxs(RowActionsContainer, { children: [actions && /* @__PURE__ */ jsx(DropdownMenu_default, {
+					trigger: /* @__PURE__ */ jsx(IconButton, {
+						"aria-label": "Actions",
+						children: /* @__PURE__ */ jsx(MoreIcon$1, {})
+					}),
+					align: "start",
+					portal: true,
+					children: actions.map((action) => /* @__PURE__ */ jsx(MenuItem, {
+						...action,
+						onClick: action.onClick,
+						size: effectiveSize,
+						children: action.label
+					}, action.label))
+				}), onDelete && /* @__PURE__ */ jsx(IconButton, {
+					"aria-label": "Delete",
+					onClick: handleDelete,
+					children: /* @__PURE__ */ jsx(XIcon$1, {})
+				})] })
+			] });
+			return shouldRenderDropdown ? /* @__PURE__ */ jsx(Popover_default, {
+				trigger: contentWithDragHandle,
+				open: isSelected,
+				children: /* @__PURE__ */ jsxs(Popover_default.Card, {
+					id: `${context?.listBoxId}-row-dropdown`,
+					noPadding: true,
+					style: { zIndex: Z_INDICES.modalDropdown },
+					children: [
+						dropdownHeadingText && /* @__PURE__ */ jsx(DropdownPopoverHeading, {
+							$size: effectiveSize,
+							children: dropdownHeadingText
+						}),
+						dropdownFormFields && /* @__PURE__ */ jsx(DropdownPopoverContent, {
+							spacing: Spacing[2],
+							children: /* @__PURE__ */ jsx(FormGroupContext.Provider, {
+								value: {
+									configField: true,
+									labelTooltipZIndex: Z_INDICES.modalDropdownTooltip
+								},
+								children: dropdownFormFields
+							})
+						}),
+						dropdownContent && /* @__PURE__ */ jsx(DropdownPopoverContent, {
+							spacing: Spacing[3],
+							children: dropdownContent
+						}),
+						dropdownFooter && /* @__PURE__ */ jsx(DropdownPopoverFooter, { children: dropdownFooter })
+					]
+				})
+			}) : contentWithDragHandle;
+		}
+	});
+};
+const StyledMenuHeading = styled(MenuHeading)`
+  padding: ${Spacing[1]} ${Spacing[2]};
+`;
+const ListBoxHeader = (props) => {
+	return /* @__PURE__ */ jsx(StyledMenuHeading, {
+		as: Header,
+		...props
+	});
+};
+ListBox.Item = ListBoxItem;
+ListBox.Section = ListBoxSection;
+ListBox.Header = ListBoxHeader;
+//#endregion
+export { useListBoxContext as n, ListBox as t };
+
+//# sourceMappingURL=ListBox-Z1y0LG1H.mjs.map

package/dist/ListBox-Z1y0LG1H.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBox-Z1y0LG1H.mjs","names":["Button","FormControlContainer","DropdownMenu","MoreIcon","XIcon","Popover","Section"],"sources":["../components/ListBox/ListBox.tsx"],"sourcesContent":["import { BorderRadius, Color, Spacing, Typography } from '@persona/design-tokens';\nimport { DragIcon } from '@persona/icons';\nimport { MoreIcon, XIcon } from '@persona/icons/12px';\nimport uniqueId from 'lodash/fp/uniqueId';\nimport {\n  type ComponentPropsWithoutRef,\n  createContext,\n  type PropsWithChildren,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  DropIndicator,\n  type DroppableCollectionReorderEvent,\n  GridList,\n  GridListItem,\n  Header,\n  ListBoxSection as Section,\n  useDragAndDrop,\n} from 'react-aria-components';\nimport styled, { css } from 'styled-components';\n\nimport Button, { type ButtonProps, IconButton } from 'design-system/components/Button';\nimport { FormGroupContext } from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport DropdownMenu from 'design-system/components/DropdownMenu';\nimport { Container as FormControlContainer } from 'design-system/components/FormControl';\nimport { ListItem, MenuHeading, MenuItem, type MenuItemProps } from 'design-system/components/Menu';\nimport Popover from 'design-system/components/Popover/Popover';\nimport Stack from 'design-system/components/Stack';\nimport { HeadlessAriaButton } from 'design-system/lib/HeadlessAriaButton';\nimport { isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { findIndexByKey, moveItemByIndex } from 'design-system/lib/reorderItems';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport { paragraphMixins } from 'design-system/mixins/text';\n\n// Context for sharing ListBox configuration with child items\ninterface ListBoxContextValue {\n  size: 'sm' | 'md';\n  listBoxId: string;\n  setItemHasActionsOrDelete: (value: boolean) => void;\n}\n\nconst ListBoxContext = createContext<ListBoxContextValue | null>(null);\n\n/**\n * Hook to access ListBox context values (like size) from child components\n */\nexport const useListBoxContext = () => {\n  return useContext(ListBoxContext);\n};\n\nexport interface ListBoxProps<T extends object> extends Omit<\n  ComponentPropsWithoutRef<typeof GridList<T>>,\n  'slot' | 'autoFocus' | 'orientation' | 'shouldFocusWrap' | 'dragAndDropHooks' | 'layout'\n> {\n  /**\n   * Called when \"Add\" button is clicked. Only renders \"Add\" button if this prop is present.\n   */\n  onAdd?: ButtonProps['onClick'];\n\n  /**\n   * Called when \"Delete\" button is clicked. Only renders \"Delete\" button if this prop is present.\n   */\n  onDelete?: (selectedKeys: ListBoxProps<T>['selectedKeys']) => void;\n\n  /**\n   * Whether or not delete button should be disabled.\n   */\n  deleteDisabled?: boolean;\n\n  /**\n   * Whether or not the Add/Delete buttons should be shown.\n   */\n  editable?: boolean;\n\n  /**\n   * Text to display if no options are available.\n   */\n  emptyText?: string;\n\n  /**\n   * Whether or not to expand the box to the full width of the container.\n   */\n  fullWidth?: boolean;\n\n  /**\n   * When provided, enables drag and drop functionality.\n   */\n  reorderConfig?: {\n    /**\n     * Called when items are reordered via drag and drop. Receives the reordered\n     * array of items when an item is dropped.\n     */\n    onReorder: (reorderedItems: T[]) => void;\n    /**\n     * The name of the property on the item that was passed as the key to\n     * `ListBox.Item`. For exanple, if the item is`{ id: '1', name: 'First Item' }`,\n     * and you passed ListBox.Item `key={item.id}`, then the `itemKeyPath`\n     * should be `'id'`.\n     */\n    itemKeyPath: string;\n  };\n\n  /**\n   * Size of the list box.\n   */\n  size?: 'sm' | 'md';\n}\n\nconst StyledListBox = styled(GridList)<{ fullWidth?: boolean; $size?: 'sm' | 'md' }>`\n  ${({ $size }) => ($size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n\n  box-sizing: border-box;\n  background: ${Color.BackgroundPrimary};\n  border-radius: ${BorderRadius.Md};\n  border: 1px solid ${Color.BorderDivider};\n  padding: ${Spacing[1]};\n\n  ${({ fullWidth }) =>\n    !fullWidth &&\n    css`\n      width: 204px;\n    `}\n`;\n\nconst StyledDropIndicator = styled(DropIndicator)`\n  height: 2px;\n  background: ${({ theme }) => theme.color.text.brand};\n`;\n\nconst ListBoxEmptyState = styled.button<{ $size?: 'sm' | 'md' }>`\n  ${({ $size }) => ($size === 'sm' ? paragraphMixins.sm : paragraphMixins.md)};\n\n  background-color: transparent;\n  outline: none;\n  border: none;\n  padding: ${Spacing[1]};\n  color: ${Color.TextSecondary};\n`;\n\nconst ListBoxEmptyStateButton = styled(ListBoxEmptyState)`\n  &:hover {\n    cursor: pointer;\n  }\n`;\n\nexport const ListBox = <T extends object>({\n  children,\n  onAdd,\n  onDelete,\n  emptyText,\n  deleteDisabled,\n  selectedKeys,\n  onSelectionChange,\n  editable = true,\n  size = 'md',\n  reorderConfig,\n  items,\n  ...props\n}: PropsWithChildren<ListBoxProps<T>>) => {\n  const listBoxRef = useRef<HTMLDivElement>(null);\n  const listBoxId = useMemo(() => uniqueId('listbox-'), []);\n  const rowDropdownId = `${listBoxId}-row-dropdown`;\n  const [itemHasActionsOrDelete, setItemHasActionsOrDelete] = useState(false);\n\n  const { dragAndDropHooks } = useDragAndDrop({\n    getItems: (keys) =>\n      Array.from(keys).map((key) => ({\n        'text/plain': String(key),\n      })),\n    getAllowedDropOperations: () => ['move'],\n    onReorder: (e: DroppableCollectionReorderEvent) => {\n      if (!reorderConfig || !items) {\n        return;\n      }\n      const { onReorder, itemKeyPath } = reorderConfig;\n      if (!onReorder || !itemKeyPath) {\n        return;\n      }\n\n      const draggedKey = Array.from(e.keys)[0];\n      if (draggedKey == null) {\n        return;\n      }\n\n      const itemsArr = Array.from(items);\n      const fromIndex = findIndexByKey(itemsArr, itemKeyPath, String(draggedKey));\n      const targetIndex = findIndexByKey(itemsArr, itemKeyPath, String(e.target.key));\n      if (fromIndex === -1 || targetIndex === -1) {\n        return;\n      }\n\n      // After removing the dragged item, a target that sat after it shifts down by one.\n      const targetIndexAfterRemoval = fromIndex < targetIndex ? targetIndex - 1 : targetIndex;\n      const toIndex =\n        e.target.dropPosition === 'before' ? targetIndexAfterRemoval : targetIndexAfterRemoval + 1;\n\n      onReorder(moveItemByIndex(itemsArr, fromIndex, toIndex));\n    },\n    renderDropIndicator: (target) => <StyledDropIndicator target={target} />,\n  });\n\n  // If row dropdowns are open, deselect items (which also closes the dropdown) when clicking outside the ListBox\n  const handleOutsideClick = useCallback(\n    (event: MouseEvent) => {\n      const rowDropdownIsOpen = document.querySelector(\n        `[id=\"${rowDropdownId}\"][data-state=\"open\"]`,\n      );\n      if (!rowDropdownIsOpen) {\n        return;\n      }\n\n      const target = event.target as HTMLElement;\n      const isOutsideListBox = listBoxRef.current && !listBoxRef.current.contains(target);\n      const isOnRowDropdownContent = target.closest(`[id=\"${rowDropdownId}\"]`);\n\n      // Only deselect if:\n      // 1. Click is outside the ListBox\n      // 2. Click is not on popover content\n      // 3. There are selected items\n      // 4. onSelectionChange is available (to allow deselection)\n      if (\n        isOutsideListBox &&\n        !isOnRowDropdownContent &&\n        selectedKeys != null &&\n        selectedKeys !== 'all' &&\n        Array.from(selectedKeys).length > 0 &&\n        onSelectionChange\n      ) {\n        // Deselect all items when clicking outside (but not on popover content)\n        onSelectionChange(new Set());\n      }\n    },\n    [selectedKeys, onSelectionChange, rowDropdownId],\n  );\n\n  // Set up outside click listener\n  useEffect(() => {\n    document.addEventListener('mousedown', handleOutsideClick);\n    return () => {\n      document.removeEventListener('mousedown', handleOutsideClick);\n    };\n  }, [handleOutsideClick]);\n\n  return (\n    <ListBoxContext.Provider value={{ size, listBoxId, setItemHasActionsOrDelete }}>\n      <Stack spacing={Spacing[1]}>\n        <StyledListBox\n          ref={listBoxRef}\n          onSelectionChange={onSelectionChange}\n          renderEmptyState={() =>\n            onAdd ? (\n              <ListBoxEmptyStateButton as='button' onClick={onAdd} $size={size}>\n                {emptyText || 'Click to add an option'}\n              </ListBoxEmptyStateButton>\n            ) : (\n              <ListBoxEmptyState type='button' $size={size}>\n                {emptyText || 'No options.'}\n              </ListBoxEmptyState>\n            )\n          }\n          selectedKeys={selectedKeys}\n          $size={size}\n          items={items}\n          // Without this, clicking delete triggers item selection (on press down)\n          // before the delete/action callback fires (on click/press up)\n          {...(itemHasActionsOrDelete && { shouldSelectOnPressUp: true })}\n          {...(reorderConfig && { dragAndDropHooks })}\n          {...props}\n        >\n          {children}\n        </StyledListBox>\n        {editable && (onAdd || onDelete) && (\n          <Stack direction='horizontal' spacing={Spacing[1]}>\n            {onAdd && (\n              <Button size='sm' variant='basic' width='auto' onClick={onAdd}>\n                Add\n              </Button>\n            )}\n            {onDelete && (\n              <Button\n                size='sm'\n                variant='basic'\n                width='auto'\n                onClick={() => onDelete?.(selectedKeys)}\n                disabled={deleteDisabled || selectedKeys == null}\n              >\n                Delete\n              </Button>\n            )}\n          </Stack>\n        )}\n      </Stack>\n    </ListBoxContext.Provider>\n  );\n};\n\nconst IconButtonWidth = 16;\nconst BackgroundFadeWidth = parseInt(Spacing[3]);\n\nconst RowActionsContainer = styled('div')`\n  width: ${BackgroundFadeWidth + parseInt(Spacing[1]) + IconButtonWidth + parseInt(Spacing[2])}px;\n  position: absolute;\n  right: 0;\n  top: 0;\n  height: 100%;\n  padding-right: ${Spacing[2]};\n  display: flex;\n  align-items: center;\n  justify-content: end;\n`;\n\nconst StyledItem = styled(ListItem)<{\n  $hasActions?: boolean;\n  $hasDelete?: boolean;\n}>`\n  position: relative;\n  padding: ${Spacing[1]} ${Spacing[2]};\n  overflow: hidden;\n  white-space: nowrap;\n\n  ${RowActionsContainer} {\n    background: linear-gradient(\n      to right,\n      transparent,\n      ${Color.BackgroundPrimary} ${BackgroundFadeWidth}px\n    );\n  }\n\n  // If both actions and delete are present or only delete is present, hide actions by default, show on hover\n  ${({ $hasActions, $hasDelete }) =>\n    (($hasActions && $hasDelete) || (!$hasActions && $hasDelete)) &&\n    css`\n      ${RowActionsContainer} {\n        opacity: 0;\n      }\n    `}\n\n  // increase the width of the row actions container when both actions and delete are present\n  ${({ $hasActions, $hasDelete }) =>\n    $hasActions &&\n    $hasDelete &&\n    css`\n      ${RowActionsContainer} {\n        width: ${\n          BackgroundFadeWidth + parseInt(Spacing[1]) + IconButtonWidth * 2 + parseInt(Spacing[2])\n        }px;\n      }\n    `}\n\n  &${isNotDisabled}${isHovered}:not([data-selected], [data-dragging]),\n  &${isNotDisabled}${isFocused}:not([data-selected], [data-dragging]),\n  &[data-hovered]:not([data-selected], [data-dragging]) {\n    cursor: pointer;\n    color: ${({ theme }) => theme.color.text.primary};\n    background-color: ${Color.BackgroundSecondary};\n\n    ${RowActionsContainer} {\n      opacity: 1;\n      background: linear-gradient(\n        to right,\n        transparent,\n        ${Color.BackgroundSecondary} ${BackgroundFadeWidth}px\n      );\n    }\n  }\n\n  &[data-selected],\n  &[data-selected]${isFocused}, &[data-selected]:focus,\n  &${isNotDisabled}${isHovered}[data-selected] {\n    outline: none;\n    color: ${({ theme }) => theme.color.text.brand};\n    background-color: ${({ theme }) => theme.color.background.highlight};\n\n    ${RowActionsContainer} {\n      opacity: 1;\n      background: linear-gradient(\n        to right,\n        transparent,\n        ${({ theme }) => theme.color.background.highlight} ${BackgroundFadeWidth}px\n      );\n    }\n  }\n\n  &[data-dragging] {\n    opacity: 0.5;\n    background-color: ${Color.BackgroundPrimary};\n  }\n\n  .react-aria-Section:not(:first-child) {\n    margin-top: ${Spacing[1]};\n  }\n`;\n\nconst ContentContainer = styled.div`\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: ${Spacing[2]};\n`;\n\n// The drag handle wraps a 16x16 icon in an HTML <button>. Without this, the\n// button inherits the row's line-height and the icon aligns to the text\n// baseline, leaving a descender gap below it — so the icon visually sits\n// above the row's center. Making the button itself a flex container forces\n// the icon to be centered within the button's box.\nconst DragHandle = styled(HeadlessAriaButton)`\n  display: flex;\n  align-items: center;\n`;\n\nconst TextContent = styled.span`\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n`;\n\nconst DropdownPopoverHeading = styled.div<{ $size: 'sm' | 'md' }>`\n  ${({ $size }) => ($size === 'md' ? Typography.TextMediumBold : Typography.TextSmallBold)};\n  border-bottom: 1px solid ${Color.BorderHairline};\n  padding: ${Spacing[2]} ${Spacing[3]} ${Spacing[1]};\n`;\n\nconst DropdownPopoverContent = styled(Stack)`\n  min-width: var(--radix-popover-trigger-width);\n  padding: ${Spacing[3]};\n\n  ${FormControlContainer} {\n    min-width: 0;\n  }\n`;\n\nconst DropdownPopoverFooter = styled.div`\n  border-top: 1px solid ${Color.BorderHairline};\n  padding: ${Spacing[1]};\n`;\n\nexport interface ListBoxItemProps extends ComponentPropsWithoutRef<typeof GridListItem> {\n  /**\n   * Actions to display in a dropdown menu.\n   * Supports all props from `MenuItem`.\n   */\n  actions?: Array<\n    {\n      label: string;\n      onClick: () => void;\n    } & Omit<MenuItemProps, 'children'>\n  >;\n\n  /**\n   * Called when the delete (X) icon is clicked. Only renders item-level delete icon if this prop is present.\n   * Receives the item's id and the click event as parameters.\n   */\n  onDelete?: (id: string | number, e: React.MouseEvent<HTMLButtonElement>) => void;\n\n  /**\n   * Size of the list box item.\n   */\n  size?: 'sm' | 'md';\n\n  /**\n   * Form fields to be rendered inside a row dropdown popover.\n   * The configField prop will be set to true for all fields via FormGroupContext.\n   * Dropdown will be opened when the item is selected.\n   */\n  dropdownFormFields?: ReactNode;\n\n  /**\n   * Content to be rendered inside the row dropdown popover.\n   * Dropdown will be opened when the item is selected.\n   */\n  dropdownContent?: ReactNode;\n\n  /**\n   * Optional heading text to display in the row dropdown popover.\n   * Either dropdownFormFields or dropdownContent must also be provided,\n   * otherwise the dropdown will not be rendered.\n   */\n  dropdownHeadingText?: string;\n\n  /**\n   * Footer to be rendered inside the row dropdown popover.\n   * Either dropdownFormFields or dropdownContent must also be provided,\n   * otherwise the dropdown will not be rendered.\n   */\n  dropdownFooter?: ReactNode;\n}\n\nconst ListBoxItem = ({\n  children,\n  actions,\n  onDelete,\n  size,\n  dropdownHeadingText,\n  dropdownFormFields,\n  dropdownContent,\n  dropdownFooter,\n  ...props\n}: ListBoxItemProps) => {\n  const context = useListBoxContext();\n  // Use explicit prop if provided, otherwise fall back to context value, then default to 'md'\n  const effectiveSize = size ?? context?.size ?? 'md';\n\n  // Update context if this item has actions or onDelete\n  useEffect(() => {\n    if (context && (actions || onDelete)) {\n      context.setItemHasActionsOrDelete(true);\n    }\n  }, [context, actions, onDelete]);\n\n  // Only render dropdown if there are form fields or content provided, not if there's just a header or footer.\n  const shouldRenderDropdown = dropdownFormFields || dropdownContent;\n\n  const handleDelete = (e: React.MouseEvent<HTMLButtonElement>) => {\n    // avoid triggering row selection\n    e.preventDefault();\n    e.stopPropagation();\n\n    if (onDelete && props.id != null) {\n      onDelete(props.id, e);\n    }\n  };\n\n  return (\n    <StyledItem\n      as={GridListItem}\n      $hasActions={actions && actions.length > 0}\n      $hasDelete={!!onDelete}\n      textValue={typeof children === 'string' ? children : undefined}\n      size={effectiveSize}\n      {...props}\n    >\n      {({ isSelected, allowsDragging }) => {\n        const contentWithDragHandle = (\n          <ContentContainer>\n            {allowsDragging && (\n              <DragHandle slot='drag' aria-label='Drag to reorder'>\n                <DragIcon />\n              </DragHandle>\n            )}\n            {typeof children === 'string' || typeof children === 'number' ? (\n              <TextContent>{children}</TextContent>\n            ) : (\n              children\n            )}\n            {(onDelete || actions) && (\n              <RowActionsContainer>\n                {actions && (\n                  <DropdownMenu\n                    trigger={\n                      <IconButton aria-label='Actions'>\n                        <MoreIcon />\n                      </IconButton>\n                    }\n                    align='start'\n                    portal\n                  >\n                    {actions.map((action) => (\n                      <MenuItem\n                        key={action.label}\n                        {...action}\n                        onClick={action.onClick}\n                        size={effectiveSize}\n                      >\n                        {action.label}\n                      </MenuItem>\n                    ))}\n                  </DropdownMenu>\n                )}\n                {onDelete && (\n                  <IconButton aria-label='Delete' onClick={handleDelete}>\n                    <XIcon />\n                  </IconButton>\n                )}\n              </RowActionsContainer>\n            )}\n          </ContentContainer>\n        );\n\n        return shouldRenderDropdown ? (\n          <Popover trigger={contentWithDragHandle} open={isSelected}>\n            <Popover.Card\n              id={`${context?.listBoxId}-row-dropdown`}\n              noPadding\n              style={{ zIndex: Z_INDICES.modalDropdown }}\n            >\n              {dropdownHeadingText && (\n                <DropdownPopoverHeading $size={effectiveSize}>\n                  {dropdownHeadingText}\n                </DropdownPopoverHeading>\n              )}\n              {dropdownFormFields && (\n                <DropdownPopoverContent spacing={Spacing[2]}>\n                  <FormGroupContext.Provider\n                    value={{\n                      configField: true,\n                      labelTooltipZIndex: Z_INDICES.modalDropdownTooltip,\n                    }}\n                  >\n                    {dropdownFormFields}\n                  </FormGroupContext.Provider>\n                </DropdownPopoverContent>\n              )}\n              {dropdownContent && (\n                <DropdownPopoverContent spacing={Spacing[3]}>\n                  {dropdownContent}\n                </DropdownPopoverContent>\n              )}\n              {dropdownFooter && <DropdownPopoverFooter>{dropdownFooter}</DropdownPopoverFooter>}\n            </Popover.Card>\n          </Popover>\n        ) : (\n          contentWithDragHandle\n        );\n      }}\n    </StyledItem>\n  );\n};\n\nconst StyledMenuHeading = styled(MenuHeading)`\n  padding: ${Spacing[1]} ${Spacing[2]};\n`;\n\nconst ListBoxHeader = (props: ComponentPropsWithoutRef<typeof Header>) => {\n  return <StyledMenuHeading as={Header} {...props} />;\n};\n\nListBox.Item = ListBoxItem;\n\nListBox.Section = Section;\n\nListBox.Header = ListBoxHeader;\n\nexport default ListBox;\n"],"mappings":"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"}

package/dist/ListBox.d.cts

@@ -0,0 +1,2 @@
+import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps, t as ListBox } from "./ListBox-DbyZFy2W.cjs";
+export { ListBox, ListBox as default, ListBoxItemProps, ListBoxProps, useListBoxContext };

package/dist/ListBox.d.mts

@@ -0,0 +1,2 @@
+import { i as useListBoxContext, n as ListBoxItemProps, r as ListBoxProps, t as ListBox } from "./ListBox-AyjzT6ra.mjs";
+export { ListBox, ListBox as default, ListBoxItemProps, ListBoxProps, useListBoxContext };

package/dist/ListBoxField.d.cts

@@ -0,0 +1,46 @@
+import { l as MenuItemProps } from "./Menu-DPrNMatb.cjs";
+import { ImplementsFormField } from "./inputFields.cjs";
+import { r as ListBoxProps } from "./ListBox-DbyZFy2W.cjs";
+import { ReactNode } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
+
+//#region components/FormField/ListBoxField.d.ts
+interface ListBoxFieldAction extends Omit<MenuItemProps, 'children'> {
+  label: string;
+  onClick: (selectedKeys: ListBoxProps<any>['selectedKeys']) => void;
+}
+interface AddDropdownConfig {
+  options: ({
+    label: ReactNode;
+    value: string;
+  } & Omit<MenuItemProps, 'children'>)[];
+  onSelection: (value: string) => void;
+}
+interface ListBoxFieldProps<T extends object> extends ImplementsFormField, ListBoxProps<T> {
+  actions?: ListBoxFieldAction[];
+  addDropdownConfig?: AddDropdownConfig;
+}
+declare const ListBoxField: <T extends object>({
+  label,
+  helperText,
+  errorText,
+  warningText,
+  labelProps,
+  helperProps,
+  errorProps,
+  warningProps,
+  inputId,
+  onAdd,
+  onDelete,
+  deleteDisabled,
+  configField: configFieldProp,
+  size,
+  actions,
+  addDropdownConfig,
+  selectedKeys: selectedKeysProp,
+  onSelectionChange,
+  defaultSelectedKeys,
+  ...props
+}: ListBoxFieldProps<T>) => _$react_jsx_runtime0.JSX.Element;
+export = ListBoxField;
+//# sourceMappingURL=ListBoxField.d.cts.map

package/dist/ListBoxField.d.mts

@@ -0,0 +1,47 @@
+import { l as MenuItemProps } from "./Menu-DIFkRQ6x.mjs";
+import { ImplementsFormField } from "./inputFields.mjs";
+import { r as ListBoxProps } from "./ListBox-AyjzT6ra.mjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ReactNode } from "react";
+
+//#region components/FormField/ListBoxField.d.ts
+interface ListBoxFieldAction extends Omit<MenuItemProps, 'children'> {
+  label: string;
+  onClick: (selectedKeys: ListBoxProps<any>['selectedKeys']) => void;
+}
+interface AddDropdownConfig {
+  options: ({
+    label: ReactNode;
+    value: string;
+  } & Omit<MenuItemProps, 'children'>)[];
+  onSelection: (value: string) => void;
+}
+interface ListBoxFieldProps<T extends object> extends ImplementsFormField, ListBoxProps<T> {
+  actions?: ListBoxFieldAction[];
+  addDropdownConfig?: AddDropdownConfig;
+}
+declare const ListBoxField: <T extends object>({
+  label,
+  helperText,
+  errorText,
+  warningText,
+  labelProps,
+  helperProps,
+  errorProps,
+  warningProps,
+  inputId,
+  onAdd,
+  onDelete,
+  deleteDisabled,
+  configField: configFieldProp,
+  size,
+  actions,
+  addDropdownConfig,
+  selectedKeys: selectedKeysProp,
+  onSelectionChange,
+  defaultSelectedKeys,
+  ...props
+}: ListBoxFieldProps<T>) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ListBoxField as default };
+//# sourceMappingURL=ListBoxField.d.mts.map