@persona/design-system 0.1.5-pre.4

package/dist/ListBox-AyjzT6ra.d.mts

@@ -0,0 +1,138 @@
+import { r as ButtonProps } from "./Button-DqDLGURJ.mjs";
+import { l as MenuItemProps } from "./Menu-DIFkRQ6x.mjs";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentPropsWithoutRef, PropsWithChildren, ReactNode } from "react";
+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-AyjzT6ra.d.mts.map

package/dist/ListBox-CE3mfDSB.cjs

@@ -0,0 +1,383 @@
+const require_chunk = require("./chunk-CoPdw6nB.cjs");
+const require_lib_pseudoClass = require("./lib/pseudoClass.cjs");
+const require_mixins_text = require("./mixins/text.cjs");
+const require_Stack = require("./Stack-BHb3ZB2A.cjs");
+require("./components/Stack/index.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_IconButton = require("./IconButton-B1ZL8BqW.cjs");
+require("./components/Button/index.cjs");
+const require_useFormGroup = require("./useFormGroup-B_mFNoN9.cjs");
+const require_Menu = require("./Menu-BpkjNO81.cjs");
+const require_DropdownMenu = require("./DropdownMenu-D2fzpkX2.cjs");
+require("./components/DropdownMenu/index.cjs");
+require("./components/Menu/index.cjs");
+const require_Popover = require("./Popover-C2dBSwiU.cjs");
+const require_FormControl = require("./FormControl-DiR2e7Od.cjs");
+let _persona_design_tokens = require("@persona/design-tokens");
+let styled_components = require("styled-components");
+styled_components = require_chunk.__toESM(styled_components);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let react_aria_components = require("react-aria-components");
+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_Menu.MenuItem, {
+						...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-CE3mfDSB.cjs.map

package/dist/ListBox-CE3mfDSB.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBox-CE3mfDSB.cjs","names":["GridList","paragraphMixins","Color","BorderRadius","Spacing","DropIndicator","findIndexByKey","moveItemByIndex","Stack","Button","ListItem","isNotDisabled","isHovered","isFocused","HeadlessAriaButton","Typography","FormControlContainer","GridListItem","DragIcon","DropdownMenu","IconButton","MoreIcon","MenuItem","XIcon","Popover","Z_INDICES","FormGroupContext","MenuHeading","Header","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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"}