@persona/design-system 0.1.7 → 0.1.9

package/dist/ListBox-BCscLcYL.cjs

@@ -1,379 +0,0 @@
-const require_chunk = require("./chunk-CKQMccvm.cjs");
-const require_lib_pseudoClass = require("./lib/pseudoClass.cjs");
-const require_mixins_text = require("./mixins/text.cjs");
-const require_lib_HeadlessAriaButton = require("./lib/HeadlessAriaButton.cjs");
-const require_lib_reorderItems = require("./lib/reorderItems.cjs");
-const require_lib_zindex = require("./lib/zindex.cjs");
-const require_Stack = require("./Stack-BF-9YjA1.cjs");
-const require_IconButton = require("./IconButton-DNy7g5zh.cjs");
-const require_useFormGroup = require("./useFormGroup-BE7v9eAj.cjs");
-const require_Menu = require("./Menu-BXic-30n.cjs");
-const require_DropdownMenu = require("./DropdownMenu-CfJxgWN5.cjs");
-const require_Popover = require("./Popover-BAv7BujW.cjs");
-const require_FormControl = require("./FormControl-Czt95h2L.cjs");
-let _persona_design_tokens = require("@persona/design-tokens");
-let styled_components = require("styled-components");
-styled_components = require_chunk.__toESM(styled_components);
-let react = require("react");
-let react_aria_components = require("react-aria-components");
-let react_jsx_runtime = require("react/jsx-runtime");
-let _persona_icons = require("@persona/icons");
-let _persona_icons_12px = require("@persona/icons/12px");
-let lodash_fp_uniqueId_js = require("lodash/fp/uniqueId.js");
-lodash_fp_uniqueId_js = require_chunk.__toESM(lodash_fp_uniqueId_js);
-//#region components/ListBox/ListBox.tsx
-const ListBoxContext = (0, react.createContext)(null);
-/**
-* Hook to access ListBox context values (like size) from child components
-*/
-const useListBoxContext = () => {
-	return (0, react.useContext)(ListBoxContext);
-};
-const StyledListBox = (0, styled_components.default)(react_aria_components.GridList)`
-  ${({ $size }) => $size === "sm" ? require_mixins_text.paragraphMixins.sm : require_mixins_text.paragraphMixins.md};
-
-  box-sizing: border-box;
-  background: ${_persona_design_tokens.Color.BackgroundPrimary};
-  border-radius: ${_persona_design_tokens.BorderRadius.Md};
-  border: 1px solid ${_persona_design_tokens.Color.BorderDivider};
-  padding: ${_persona_design_tokens.Spacing[1]};
-
-  ${({ fullWidth }) => !fullWidth && styled_components.css`
-      width: 204px;
-    `}
-`;
-const StyledDropIndicator = (0, styled_components.default)(react_aria_components.DropIndicator)`
-  height: 2px;
-  background: ${({ theme }) => theme.color.text.brand};
-`;
-const ListBoxEmptyState = styled_components.default.button`
-  ${({ $size }) => $size === "sm" ? require_mixins_text.paragraphMixins.sm : require_mixins_text.paragraphMixins.md};
-
-  background-color: transparent;
-  outline: none;
-  border: none;
-  padding: ${_persona_design_tokens.Spacing[1]};
-  color: ${_persona_design_tokens.Color.TextSecondary};
-`;
-const ListBoxEmptyStateButton = (0, styled_components.default)(ListBoxEmptyState)`
-  &:hover {
-    cursor: pointer;
-  }
-`;
-const ListBox = ({ children, onAdd, onDelete, emptyText, deleteDisabled, selectedKeys, onSelectionChange, editable = true, size = "md", reorderConfig, items, ...props }) => {
-	const listBoxRef = (0, react.useRef)(null);
-	const listBoxId = (0, react.useMemo)(() => (0, lodash_fp_uniqueId_js.default)("listbox-"), []);
-	const rowDropdownId = `${listBoxId}-row-dropdown`;
-	const [itemHasActionsOrDelete, setItemHasActionsOrDelete] = (0, react.useState)(false);
-	const { dragAndDropHooks } = (0, react_aria_components.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 = require_lib_reorderItems.findIndexByKey(itemsArr, itemKeyPath, String(draggedKey));
-			const targetIndex = require_lib_reorderItems.findIndexByKey(itemsArr, itemKeyPath, String(e.target.key));
-			if (fromIndex === -1 || targetIndex === -1) return;
-			const targetIndexAfterRemoval = fromIndex < targetIndex ? targetIndex - 1 : targetIndex;
-			onReorder(require_lib_reorderItems.moveItemByIndex(itemsArr, fromIndex, e.target.dropPosition === "before" ? targetIndexAfterRemoval : targetIndexAfterRemoval + 1));
-		},
-		renderDropIndicator: (target) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledDropIndicator, { target })
-	});
-	const handleOutsideClick = (0, react.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
-	]);
-	(0, react.useEffect)(() => {
-		document.addEventListener("mousedown", handleOutsideClick);
-		return () => {
-			document.removeEventListener("mousedown", handleOutsideClick);
-		};
-	}, [handleOutsideClick]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListBoxContext.Provider, {
-		value: {
-			size,
-			listBoxId,
-			setItemHasActionsOrDelete
-		},
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
-			spacing: _persona_design_tokens.Spacing[1],
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledListBox, {
-				ref: listBoxRef,
-				onSelectionChange,
-				renderEmptyState: () => onAdd ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListBoxEmptyStateButton, {
-					as: "button",
-					onClick: onAdd,
-					$size: size,
-					children: emptyText || "Click to add an option"
-				}) : /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
-				direction: "horizontal",
-				spacing: _persona_design_tokens.Spacing[1],
-				children: [onAdd && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.Button, {
-					size: "sm",
-					variant: "basic",
-					width: "auto",
-					onClick: onAdd,
-					children: "Add"
-				}), onDelete && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.Button, {
-					size: "sm",
-					variant: "basic",
-					width: "auto",
-					onClick: () => onDelete?.(selectedKeys),
-					disabled: deleteDisabled || selectedKeys == null,
-					children: "Delete"
-				})]
-			})]
-		})
-	});
-};
-const IconButtonWidth = 16;
-const BackgroundFadeWidth = parseInt(_persona_design_tokens.Spacing[3]);
-const RowActionsContainer = (0, styled_components.default)("div")`
-  width: ${BackgroundFadeWidth + parseInt(_persona_design_tokens.Spacing[1]) + IconButtonWidth + parseInt(_persona_design_tokens.Spacing[2])}px;
-  position: absolute;
-  right: 0;
-  top: 0;
-  height: 100%;
-  padding-right: ${_persona_design_tokens.Spacing[2]};
-  display: flex;
-  align-items: center;
-  justify-content: end;
-`;
-const StyledItem = (0, styled_components.default)(require_Menu.ListItem)`
-  position: relative;
-  padding: ${_persona_design_tokens.Spacing[1]} ${_persona_design_tokens.Spacing[2]};
-  overflow: hidden;
-  white-space: nowrap;
-
-  ${RowActionsContainer} {
-    background: linear-gradient(
-      to right,
-      transparent,
-      ${_persona_design_tokens.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) && styled_components.css`
-      ${RowActionsContainer} {
-        opacity: 0;
-      }
-    `}
-
-  // increase the width of the row actions container when both actions and delete are present
-  ${({ $hasActions, $hasDelete }) => $hasActions && $hasDelete && styled_components.css`
-      ${RowActionsContainer} {
-        width: ${BackgroundFadeWidth + parseInt(_persona_design_tokens.Spacing[1]) + IconButtonWidth * 2 + parseInt(_persona_design_tokens.Spacing[2])}px;
-      }
-    `}
-
-  &${require_lib_pseudoClass.isNotDisabled}${require_lib_pseudoClass.isHovered}:not([data-selected], [data-dragging]),
-  &${require_lib_pseudoClass.isNotDisabled}${require_lib_pseudoClass.isFocused}:not([data-selected], [data-dragging]),
-  &[data-hovered]:not([data-selected], [data-dragging]) {
-    cursor: pointer;
-    color: ${({ theme }) => theme.color.text.primary};
-    background-color: ${_persona_design_tokens.Color.BackgroundSecondary};
-
-    ${RowActionsContainer} {
-      opacity: 1;
-      background: linear-gradient(
-        to right,
-        transparent,
-        ${_persona_design_tokens.Color.BackgroundSecondary} ${BackgroundFadeWidth}px
-      );
-    }
-  }
-
-  &[data-selected],
-  &[data-selected]${require_lib_pseudoClass.isFocused}, &[data-selected]:focus,
-  &${require_lib_pseudoClass.isNotDisabled}${require_lib_pseudoClass.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: ${_persona_design_tokens.Color.BackgroundPrimary};
-  }
-
-  .react-aria-Section:not(:first-child) {
-    margin-top: ${_persona_design_tokens.Spacing[1]};
-  }
-`;
-const ContentContainer = styled_components.default.div`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: ${_persona_design_tokens.Spacing[2]};
-`;
-const DragHandle = (0, styled_components.default)(require_lib_HeadlessAriaButton.HeadlessAriaButton)`
-  display: flex;
-  align-items: center;
-`;
-const TextContent = styled_components.default.span`
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
-const DropdownPopoverHeading = styled_components.default.div`
-  ${({ $size }) => $size === "md" ? _persona_design_tokens.Typography.TextMediumBold : _persona_design_tokens.Typography.TextSmallBold};
-  border-bottom: 1px solid ${_persona_design_tokens.Color.BorderHairline};
-  padding: ${_persona_design_tokens.Spacing[2]} ${_persona_design_tokens.Spacing[3]} ${_persona_design_tokens.Spacing[1]};
-`;
-const DropdownPopoverContent = (0, styled_components.default)(require_Stack.Stack)`
-  min-width: var(--radix-popover-trigger-width);
-  padding: ${_persona_design_tokens.Spacing[3]};
-
-  ${require_FormControl.Container} {
-    min-width: 0;
-  }
-`;
-const DropdownPopoverFooter = styled_components.default.div`
-  border-top: 1px solid ${_persona_design_tokens.Color.BorderHairline};
-  padding: ${_persona_design_tokens.Spacing[1]};
-`;
-const ListBoxItem = ({ children, actions, onDelete, size, dropdownHeadingText, dropdownFormFields, dropdownContent, dropdownFooter, ...props }) => {
-	const context = useListBoxContext();
-	const effectiveSize = size ?? context?.size ?? "md";
-	(0, react.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__ */ (0, react_jsx_runtime.jsx)(StyledItem, {
-		as: react_aria_components.GridListItem,
-		$hasActions: actions && actions.length > 0,
-		$hasDelete: !!onDelete,
-		textValue: typeof children === "string" ? children : void 0,
-		size: effectiveSize,
-		...props,
-		children: ({ isSelected, allowsDragging }) => {
-			const contentWithDragHandle = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ContentContainer, { children: [
-				allowsDragging && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DragHandle, {
-					slot: "drag",
-					"aria-label": "Drag to reorder",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.DragIcon, {})
-				}),
-				typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextContent, { children }) : children,
-				(onDelete || actions) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(RowActionsContainer, { children: [actions && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default, {
-					trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
-						"aria-label": "Actions",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_12px.MoreIcon, {})
-					}),
-					align: "start",
-					portal: true,
-					children: actions.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DropdownMenu.DropdownMenu_default.Item, {
-						...action,
-						onClick: action.onClick,
-						size: effectiveSize,
-						children: action.label
-					}, action.label))
-				}), onDelete && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
-					"aria-label": "Delete",
-					onClick: handleDelete,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons_12px.XIcon, {})
-				})] })
-			] });
-			return shouldRenderDropdown ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.Popover_default, {
-				trigger: contentWithDragHandle,
-				open: isSelected,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Popover.Popover_default.Card, {
-					id: `${context?.listBoxId}-row-dropdown`,
-					noPadding: true,
-					style: { zIndex: require_lib_zindex.Z_INDICES.modalDropdown },
-					children: [
-						dropdownHeadingText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownPopoverHeading, {
-							$size: effectiveSize,
-							children: dropdownHeadingText
-						}),
-						dropdownFormFields && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownPopoverContent, {
-							spacing: _persona_design_tokens.Spacing[2],
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useFormGroup.FormGroupContext.Provider, {
-								value: {
-									configField: true,
-									labelTooltipZIndex: require_lib_zindex.Z_INDICES.modalDropdownTooltip
-								},
-								children: dropdownFormFields
-							})
-						}),
-						dropdownContent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownPopoverContent, {
-							spacing: _persona_design_tokens.Spacing[3],
-							children: dropdownContent
-						}),
-						dropdownFooter && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownPopoverFooter, { children: dropdownFooter })
-					]
-				})
-			}) : contentWithDragHandle;
-		}
-	});
-};
-const StyledMenuHeading = (0, styled_components.default)(require_Menu.MenuHeading)`
-  padding: ${_persona_design_tokens.Spacing[1]} ${_persona_design_tokens.Spacing[2]};
-`;
-const ListBoxHeader = (props) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledMenuHeading, {
-		as: react_aria_components.Header,
-		...props
-	});
-};
-ListBox.Item = ListBoxItem;
-ListBox.Section = react_aria_components.ListBoxSection;
-ListBox.Header = ListBoxHeader;
-//#endregion
-Object.defineProperty(exports, "ListBox", {
-	enumerable: true,
-	get: function() {
-		return ListBox;
-	}
-});
-Object.defineProperty(exports, "useListBoxContext", {
-	enumerable: true,
-	get: function() {
-		return useListBoxContext;
-	}
-});
-
-//# sourceMappingURL=ListBox-BCscLcYL.cjs.map

package/dist/ListBox-BCscLcYL.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListBox-BCscLcYL.cjs","names":["GridList","paragraphMixins","Color","BorderRadius","Spacing","DropIndicator","findIndexByKey","moveItemByIndex","Stack","Button","ListItem","isNotDisabled","isHovered","isFocused","HeadlessAriaButton","Typography","FormControlContainer","GridListItem","DragIcon","DropdownMenu","IconButton","MoreIcon","XIcon","Popover","Z_INDICES","FormGroupContext","MenuHeading","Header","Section"],"sources":["../components/ListBox/ListBox.tsx"],"sourcesContent":["import 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 { BorderRadius, Color, Spacing, Typography } from '@persona/design-tokens';\nimport { DragIcon } from '@persona/icons';\nimport { MoreIcon, XIcon } from '@persona/icons/12px';\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, 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                      <DropdownMenu.Item\n                        key={action.label}\n                        {...action}\n                        onClick={action.onClick}\n                        size={effectiveSize}\n                      >\n                        {action.label}\n                      </DropdownMenu.Item>\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":";;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAM,kBAAA,GAAA,MAAA,eAA2D,KAAK;;;;AAKtE,MAAa,0BAA0B;AACrC,SAAA,GAAA,MAAA,YAAkB,eAAe;;AA6DnC,MAAM,gBAAgB,CAAA,GAAA,kBAAA,SAAOA,sBAAAA,SAAS;KACjC,EAAE,YAAa,UAAU,OAAOC,oBAAAA,gBAAgB,KAAKA,oBAAAA,gBAAgB,GAAI;;;gBAG9DC,uBAAAA,MAAM,kBAAkB;mBACrBC,uBAAAA,aAAa,GAAG;sBACbD,uBAAAA,MAAM,cAAc;aAC7BE,uBAAAA,QAAQ,GAAG;;KAEnB,EAAE,gBACH,CAAC,aACD,kBAAA,GAAG;;MAED;;AAGN,MAAM,sBAAsB,CAAA,GAAA,kBAAA,SAAOC,sBAAAA,cAAc;;iBAEhC,EAAE,YAAY,MAAM,MAAM,KAAK,MAAM;;AAGtD,MAAM,oBAAoB,kBAAA,QAAO,MAA+B;KAC3D,EAAE,YAAa,UAAU,OAAOJ,oBAAAA,gBAAgB,KAAKA,oBAAAA,gBAAgB,GAAI;;;;;aAKjEG,uBAAAA,QAAQ,GAAG;WACbF,uBAAAA,MAAM,cAAc;;AAG/B,MAAM,0BAA0B,CAAA,GAAA,kBAAA,SAAO,kBAAkB;;;;;AAMzD,MAAa,WAA6B,EACxC,UACA,OACA,UACA,WACA,gBACA,cACA,mBACA,WAAW,MACX,OAAO,MACP,eACA,OACA,GAAG,YACqC;CACxC,MAAM,cAAA,GAAA,MAAA,QAAoC,KAAK;CAC/C,MAAM,aAAA,GAAA,MAAA,gBAAA,GAAA,sBAAA,SAAmC,WAAW,EAAE,EAAE,CAAC;CACzD,MAAM,gBAAgB,GAAG,UAAU;CACnC,MAAM,CAAC,wBAAwB,8BAAA,GAAA,MAAA,UAAsC,MAAM;CAE3E,MAAM,EAAE,sBAAA,GAAA,sBAAA,gBAAoC;EAC1C,WAAW,SACT,MAAM,KAAK,KAAK,CAAC,KAAK,SAAS,EAC7B,cAAc,OAAO,IAAI,EAC1B,EAAE;EACL,gCAAgC,CAAC,OAAO;EACxC,YAAY,MAAuC;AACjD,OAAI,CAAC,iBAAiB,CAAC,MACrB;GAEF,MAAM,EAAE,WAAW,gBAAgB;AACnC,OAAI,CAAC,aAAa,CAAC,YACjB;GAGF,MAAM,aAAa,MAAM,KAAK,EAAE,KAAK,CAAC;AACtC,OAAI,cAAc,KAChB;GAGF,MAAM,WAAW,MAAM,KAAK,MAAM;GAClC,MAAM,YAAYI,yBAAAA,eAAe,UAAU,aAAa,OAAO,WAAW,CAAC;GAC3E,MAAM,cAAcA,yBAAAA,eAAe,UAAU,aAAa,OAAO,EAAE,OAAO,IAAI,CAAC;AAC/E,OAAI,cAAc,MAAM,gBAAgB,GACtC;GAIF,MAAM,0BAA0B,YAAY,cAAc,cAAc,IAAI;AAI5E,aAAUC,yBAAAA,gBAAgB,UAAU,WAFlC,EAAE,OAAO,iBAAiB,WAAW,0BAA0B,0BAA0B,EAEpC,CAAC;;EAE1D,sBAAsB,WAAW,iBAAA,GAAA,kBAAA,KAAC,qBAAD,EAA6B,QAAU,CAAA;EACzE,CAAC;CAGF,MAAM,sBAAA,GAAA,MAAA,cACH,UAAsB;AAIrB,MAAI,CAHsB,SAAS,cACjC,QAAQ,cAAc,uBAEF,CACpB;EAGF,MAAM,SAAS,MAAM;EACrB,MAAM,mBAAmB,WAAW,WAAW,CAAC,WAAW,QAAQ,SAAS,OAAO;EACnF,MAAM,yBAAyB,OAAO,QAAQ,QAAQ,cAAc,IAAI;AAOxE,MACE,oBACA,CAAC,0BACD,gBAAgB,QAChB,iBAAiB,SACjB,MAAM,KAAK,aAAa,CAAC,SAAS,KAClC,kBAGA,mCAAkB,IAAI,KAAK,CAAC;IAGhC;EAAC;EAAc;EAAmB;EAAc,CACjD;AAGD,EAAA,GAAA,MAAA,iBAAgB;AACd,WAAS,iBAAiB,aAAa,mBAAmB;AAC1D,eAAa;AACX,YAAS,oBAAoB,aAAa,mBAAmB;;IAE9D,CAAC,mBAAmB,CAAC;AAExB,QACE,iBAAA,GAAA,kBAAA,KAAC,eAAe,UAAhB;EAAyB,OAAO;GAAE;GAAM;GAAW;GAA2B;YAC5E,iBAAA,GAAA,kBAAA,MAACC,cAAAA,OAAD;GAAO,SAASJ,uBAAAA,QAAQ;aAAxB,CACE,iBAAA,GAAA,kBAAA,KAAC,eAAD;IACE,KAAK;IACc;IACnB,wBACE,QACE,iBAAA,GAAA,kBAAA,KAAC,yBAAD;KAAyB,IAAG;KAAS,SAAS;KAAO,OAAO;eACzD,aAAa;KACU,CAAA,GAE1B,iBAAA,GAAA,kBAAA,KAAC,mBAAD;KAAmB,MAAK;KAAS,OAAO;eACrC,aAAa;KACI,CAAA;IAGV;IACd,OAAO;IACA;IAGP,GAAK,0BAA0B,EAAE,uBAAuB,MAAM;IAC9D,GAAK,iBAAiB,EAAE,kBAAkB;IAC1C,GAAI;IAEH;IACa,CAAA,EACf,aAAa,SAAS,aACrB,iBAAA,GAAA,kBAAA,MAACI,cAAAA,OAAD;IAAO,WAAU;IAAa,SAASJ,uBAAAA,QAAQ;cAA/C,CACG,SACC,iBAAA,GAAA,kBAAA,KAACK,mBAAAA,QAAD;KAAQ,MAAK;KAAK,SAAQ;KAAQ,OAAM;KAAO,SAAS;eAAO;KAEtD,CAAA,EAEV,YACC,iBAAA,GAAA,kBAAA,KAACA,mBAAAA,QAAD;KACE,MAAK;KACL,SAAQ;KACR,OAAM;KACN,eAAe,WAAW,aAAa;KACvC,UAAU,kBAAkB,gBAAgB;eAC7C;KAEQ,CAAA,CAEL;MAEJ;;EACgB,CAAA;;AAI9B,MAAM,kBAAkB;AACxB,MAAM,sBAAsB,SAASL,uBAAAA,QAAQ,GAAG;AAEhD,MAAM,sBAAsB,CAAA,GAAA,kBAAA,SAAO,MAAM;WAC9B,sBAAsB,SAASA,uBAAAA,QAAQ,GAAG,GAAG,kBAAkB,SAASA,uBAAAA,QAAQ,GAAG,CAAC;;;;;mBAK5EA,uBAAAA,QAAQ,GAAG;;;;;AAM9B,MAAM,aAAa,CAAA,GAAA,kBAAA,SAAOM,aAAAA,SAAS;;aAKtBN,uBAAAA,QAAQ,GAAG,GAAGA,uBAAAA,QAAQ,GAAG;;;;IAIlC,oBAAoB;;;;QAIhBF,uBAAAA,MAAM,kBAAkB,GAAG,oBAAoB;;;;;KAKlD,EAAE,aAAa,kBACd,eAAe,cAAgB,CAAC,eAAe,eACjD,kBAAA,GAAG;QACC,oBAAoB;;;MAGtB;;;KAGD,EAAE,aAAa,iBAChB,eACA,cACA,kBAAA,GAAG;QACC,oBAAoB;iBAElB,sBAAsB,SAASE,uBAAAA,QAAQ,GAAG,GAAG,kBAAkB,IAAI,SAASA,uBAAAA,QAAQ,GAAG,CACxF;;MAEH;;KAEDO,wBAAAA,gBAAgBC,wBAAAA,UAAU;KAC1BD,wBAAAA,gBAAgBE,wBAAAA,UAAU;;;cAGjB,EAAE,YAAY,MAAM,MAAM,KAAK,QAAQ;wBAC7BX,uBAAAA,MAAM,oBAAoB;;MAE5C,oBAAoB;;;;;UAKhBA,uBAAAA,MAAM,oBAAoB,GAAG,oBAAoB;;;;;;oBAMvCW,wBAAAA,UAAU;KACzBF,wBAAAA,gBAAgBC,wBAAAA,UAAU;;cAEjB,EAAE,YAAY,MAAM,MAAM,KAAK,MAAM;yBAC1B,EAAE,YAAY,MAAM,MAAM,WAAW,UAAU;;MAElE,oBAAoB;;;;;WAKf,EAAE,YAAY,MAAM,MAAM,WAAW,UAAU,GAAG,oBAAoB;;;;;;;wBAOzDV,uBAAAA,MAAM,kBAAkB;;;;kBAI9BE,uBAAAA,QAAQ,GAAG;;;AAI7B,MAAM,mBAAmB,kBAAA,QAAO,GAAG;;;;SAI1BA,uBAAAA,QAAQ,GAAG;;AAQpB,MAAM,aAAa,CAAA,GAAA,kBAAA,SAAOU,+BAAAA,mBAAmB;;;;AAK7C,MAAM,cAAc,kBAAA,QAAO,IAAI;;;;;;;AAQ/B,MAAM,yBAAyB,kBAAA,QAAO,GAA2B;KAC5D,EAAE,YAAa,UAAU,OAAOC,uBAAAA,WAAW,iBAAiBA,uBAAAA,WAAW,cAAe;6BAC9Db,uBAAAA,MAAM,eAAe;aACrCE,uBAAAA,QAAQ,GAAG,GAAGA,uBAAAA,QAAQ,GAAG,GAAGA,uBAAAA,QAAQ,GAAG;;AAGpD,MAAM,yBAAyB,CAAA,GAAA,kBAAA,SAAOI,cAAAA,MAAM;;aAE/BJ,uBAAAA,QAAQ,GAAG;;IAEpBY,oBAAAA,UAAqB;;;;AAKzB,MAAM,wBAAwB,kBAAA,QAAO,GAAG;0BACdd,uBAAAA,MAAM,eAAe;aAClCE,uBAAAA,QAAQ,GAAG;;AAsDxB,MAAM,eAAe,EACnB,UACA,SACA,UACA,MACA,qBACA,oBACA,iBACA,gBACA,GAAG,YACmB;CACtB,MAAM,UAAU,mBAAmB;CAEnC,MAAM,gBAAgB,QAAQ,SAAS,QAAQ;AAG/C,EAAA,GAAA,MAAA,iBAAgB;AACd,MAAI,YAAY,WAAW,UACzB,SAAQ,0BAA0B,KAAK;IAExC;EAAC;EAAS;EAAS;EAAS,CAAC;CAGhC,MAAM,uBAAuB,sBAAsB;CAEnD,MAAM,gBAAgB,MAA2C;AAE/D,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AAEnB,MAAI,YAAY,MAAM,MAAM,KAC1B,UAAS,MAAM,IAAI,EAAE;;AAIzB,QACE,iBAAA,GAAA,kBAAA,KAAC,YAAD;EACE,IAAIa,sBAAAA;EACJ,aAAa,WAAW,QAAQ,SAAS;EACzC,YAAY,CAAC,CAAC;EACd,WAAW,OAAO,aAAa,WAAW,WAAW,KAAA;EACrD,MAAM;EACN,GAAI;aAEF,EAAE,YAAY,qBAAqB;GACnC,MAAM,wBACJ,iBAAA,GAAA,kBAAA,MAAC,kBAAD,EAAA,UAAA;IACG,kBACC,iBAAA,GAAA,kBAAA,KAAC,YAAD;KAAY,MAAK;KAAO,cAAW;eACjC,iBAAA,GAAA,kBAAA,KAACC,eAAAA,UAAD,EAAY,CAAA;KACD,CAAA;IAEd,OAAO,aAAa,YAAY,OAAO,aAAa,WACnD,iBAAA,GAAA,kBAAA,KAAC,aAAD,EAAc,UAAuB,CAAA,GAErC;KAEA,YAAY,YACZ,iBAAA,GAAA,kBAAA,MAAC,qBAAD,EAAA,UAAA,CACG,WACC,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,sBAAD;KACE,SACE,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;MAAY,cAAW;gBACrB,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,UAAD,EAAY,CAAA;MACD,CAAA;KAEf,OAAM;KACN,QAAA;eAEC,QAAQ,KAAK,WACZ,iBAAA,GAAA,kBAAA,KAACF,qBAAAA,qBAAa,MAAd;MAEE,GAAI;MACJ,SAAS,OAAO;MAChB,MAAM;gBAEL,OAAO;MACU,EANb,OAAO,MAMM,CACpB;KACW,CAAA,EAEhB,YACC,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;KAAY,cAAW;KAAS,SAAS;eACvC,iBAAA,GAAA,kBAAA,KAACE,oBAAAA,OAAD,EAAS,CAAA;KACE,CAAA,CAEK,EAAA,CAAA;IAEP,EAAA,CAAA;AAGrB,UAAO,uBACL,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,iBAAD;IAAS,SAAS;IAAuB,MAAM;cAC7C,iBAAA,GAAA,kBAAA,MAACA,gBAAAA,gBAAQ,MAAT;KACE,IAAI,GAAG,SAAS,UAAU;KAC1B,WAAA;KACA,OAAO,EAAE,QAAQC,mBAAAA,UAAU,eAAe;eAH5C;MAKG,uBACC,iBAAA,GAAA,kBAAA,KAAC,wBAAD;OAAwB,OAAO;iBAC5B;OACsB,CAAA;MAE1B,sBACC,iBAAA,GAAA,kBAAA,KAAC,wBAAD;OAAwB,SAASpB,uBAAAA,QAAQ;iBACvC,iBAAA,GAAA,kBAAA,KAACqB,qBAAAA,iBAAiB,UAAlB;QACE,OAAO;SACL,aAAa;SACb,oBAAoBD,mBAAAA,UAAU;SAC/B;kBAEA;QACyB,CAAA;OACL,CAAA;MAE1B,mBACC,iBAAA,GAAA,kBAAA,KAAC,wBAAD;OAAwB,SAASpB,uBAAAA,QAAQ;iBACtC;OACsB,CAAA;MAE1B,kBAAkB,iBAAA,GAAA,kBAAA,KAAC,uBAAD,EAAA,UAAwB,gBAAuC,CAAA;MACrE;;IACP,CAAA,GAEV;;EAGO,CAAA;;AAIjB,MAAM,oBAAoB,CAAA,GAAA,kBAAA,SAAOsB,aAAAA,YAAY;aAChCtB,uBAAAA,QAAQ,GAAG,GAAGA,uBAAAA,QAAQ,GAAG;;AAGtC,MAAM,iBAAiB,UAAmD;AACxE,QAAO,iBAAA,GAAA,kBAAA,KAAC,mBAAD;EAAmB,IAAIuB,sBAAAA;EAAQ,GAAI;EAAS,CAAA;;AAGrD,QAAQ,OAAO;AAEf,QAAQ,UAAUC,sBAAAA;AAElB,QAAQ,SAAS"}

package/dist/ListBox-CDNOJmvz.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"ListBox-CDNOJmvz.mjs","names":["Button","FormControlContainer","DropdownMenu","MoreIcon","XIcon","Popover","Section"],"sources":["../components/ListBox/ListBox.tsx"],"sourcesContent":["import 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 { BorderRadius, Color, Spacing, Typography } from '@persona/design-tokens';\nimport { DragIcon } from '@persona/icons';\nimport { MoreIcon, XIcon } from '@persona/icons/12px';\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, 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                      <DropdownMenu.Item\n                        key={action.label}\n                        {...action}\n                        onClick={action.onClick}\n                        size={effectiveSize}\n                      >\n                        {action.label}\n                      </DropdownMenu.Item>\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-WyZvseo5.d.cts

@@ -1,138 +0,0 @@
-import { r as ButtonProps } from "./Button-C_3p5Xfi.cjs";
-import { l as MenuItemProps } from "./Menu-BKMxOXkj.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-WyZvseo5.d.cts.map

package/dist/ListBox.d.cts

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