@persona/design-system 0.1.5-pre.4 → 0.1.7

package/dist/DataTable.d.mts

@@ -0,0 +1,372 @@
+import { t as AttributeColumn } from "./types-B34lbI2k.mjs";
+import { n as TableControlsProps, t as TableControls } from "./TableControls-BZyiqk9V.mjs";
+import { t as Pagination } from "./Pagination-QWNK_hH7.mjs";
+import { BulkAction, DataTableColumnFormat, DataTableColumns, RowAction, SortProps } from "./components/DataTable/types.mjs";
+import { RenderFormatFn } from "./useTableColumns.mjs";
+import * as _$styled_components0 from "styled-components";
+import { ComponentProps } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+import { ColumnFiltersState, RowData } from "@tanstack/react-table";
+
+//#region components/DataTable/DataTable.d.ts
+declare module '@tanstack/react-table' {
+  interface ColumnMeta<TData extends RowData, TValue> {
+    align?: 'left' | 'right';
+    minWidth?: number;
+    width?: number;
+    headerTooltip?: React.ReactNode;
+  }
+}
+declare const DataTableControls: _$styled_components0.StyledComponent<({
+  filterPanel,
+  searchProps,
+  defaultShowFilters,
+  showFilters: controlledShowFilters,
+  setShowFilters: controlledSetShowFilters,
+  className,
+  tableActions,
+  propertiesButton,
+  isLoading,
+  showViews,
+  canEditViews,
+  onSelectView,
+  views,
+  currentView,
+  onAddView,
+  onViewNameChange,
+  onDuplicateView,
+  onDeleteView,
+  onSaveView,
+  isViewDirty,
+  selectedRows,
+  bulkActions,
+  onClearSelection,
+  title,
+  presetViews,
+  compact,
+  columnConfigurationProps,
+  showFiltersAlways,
+  onError,
+  "data-tour-target": dataTourTarget
+}: TableControlsProps) => _$react_jsx_runtime0.JSX.Element, any, {}, never>;
+declare const DataTableContainer: _$styled_components0.StyledComponent<"div", any, {
+  $stickyHeader: boolean;
+}, never>;
+declare const FloatingActionBarContainer: _$styled_components0.StyledComponent<"div", any, {}, never>;
+type ClientPaginationProps = {
+  clientPagination: true;
+  pageSize?: number;
+  pageSizeOptions?: number[];
+};
+interface DataTableProps<TData extends RowData> {
+  /**
+   * Data to render.
+   * If a row has a _details property that is a function, it will be called
+   * with the row data as props.
+   * If a row has a _details property that is a React node, it will be rendered as is.
+   */
+  data: TData[];
+  /**
+   * Columns to display in the table. May be a string or column config object.
+   *
+   * Strings get converted from camelCase to Start Case.
+   */
+  columns: DataTableColumns<TData>;
+  /**
+   * Component to render details for expandable rows.
+   * Useful if we want to render the same details component for every row.
+   * Receives rowData as props.
+   */
+  detailComponent?: React.ComponentType<{
+    rowData: TData;
+  }>;
+  /**
+   * When `'always'`, the leading expand column is shown even if no rows are expandable
+   * (e.g. every cell shows a non-interactive chevron). When `'auto'`, the column is omitted
+   * unless at least one row can expand. Rows that cannot expand still show a muted chevron
+   * whenever this column is visible.
+   */
+  expandColumnVisibility?: 'auto' | 'always';
+  /**
+   * Whether to display table controls such as search, filters, views, and selection
+   */
+  showControls?: boolean;
+  /**
+   * Props to pass to the TableControls component
+   */
+  controls?: ComponentProps<typeof TableControls>;
+  /**
+   * Custom text to display when the table is empty. Will default to "No results found"
+   */
+  emptyState?: {
+    title?: string;
+    description?: string;
+  };
+  /**
+   * Whether to display pagination controls. If true, will use client-side pagination. If an object,
+   * can be either advanced configuration of cleitn paginaton or server-side pagination state..
+   */
+  pagination?: boolean | ClientPaginationProps | ComponentProps<typeof Pagination>;
+  /**
+   * Whether to display sort controls. If true, will use client-side sorting. If an object, will use server-side sorting.
+   */
+  sort?: boolean | SortProps;
+  /**
+   * Whether to display the column properties button and popover. Allows control of column visiblity and ordering.
+   */
+  showColumnProperties?: boolean;
+  /**
+   * Whether to enable sorting removal. If true, will allow sorting to be removed by clicking the sort control.
+   */
+  enableSortingRemoval?: boolean;
+  /**
+   * Set to true to sort descending first, which is the case for most of our tables.
+   */
+  sortDescFirst?: boolean;
+  /**
+   * Called when column visibility or ordering is updated. Useful for saving column properties.
+   */
+  onUpdateColumnProperties?: (newConfiguration: AttributeColumn[]) => void;
+  /**
+   * Whether the table is loading data
+   */
+  isLoading?: boolean;
+  /**
+   * Whether to enable row selection
+   */
+  enableRowSelection?: boolean;
+  /**
+   * Whether to enable automatic sub row selection when a parent row is selected
+   */
+  enableSubRowSelection?: boolean;
+  /**
+   * Define the row id for the given row. Used by row selection and bulk actions.
+   */
+  getRowId?: (row: TData) => string;
+  /**
+   * Define the aria label for the given row.
+   */
+  getRowLabel?: (row: TData) => string;
+  /**
+   * Determine if a row can be selected. Used to disable row selection for specific rows.
+   */
+  getRowSelectable?: (row: TData) => boolean;
+  /**
+   * Makes the row a link if provided. Get link for the given row.
+   */
+  getLinkToRow?: (row: TData) => string;
+  /**
+   * If set, each row will be a link to the given prefix + the row's `id` value.
+   * `getLinkToRow` will override this.
+   */
+  rowLinkPrefix?: string;
+  /**
+   * Component to use for row links. Defaults to react-router-dom Link.
+   * Pass a custom component (e.g. Next.js Link) to use a different router.
+   * The component receives a `to` prop with the destination path.
+   */
+  rowLinkComponent?: React.ElementType;
+  /**
+   * Whether to show the compact variant of the table.
+   * Compact tables do not support views.
+   */
+  compact?: boolean;
+  /**
+   * Disables the row hover highlight. Use for read-only, non-interactive tables where the
+   * hover background would misleadingly imply rows are selectable or clickable.
+   */
+  disableRowHover?: boolean;
+  /**
+   * Title to display in the table.
+   */
+  title?: string;
+  /**
+   * Whether to make the table header sticky when scrolling vertically.
+   * When enabled, the controls and table header will remain visible at the top of the viewport while scrolling through table data.
+   * Note that the sticky header styling assumes this component is contained within a parent with `display: flex` and `flex-direction: column`.
+   */
+  stickyHeader?: boolean;
+  /**
+   * Enable client-side search functionality.
+   * Pass an object to configure the search input.
+   */
+  clientSearch?: boolean | {
+    placeholder?: string;
+    initialValue?: string;
+  };
+  /**
+   * Controlled search term for client-side search.
+   * When provided, the search input becomes controlled.
+   * Use with onSearchTermChange to manage search state externally.
+   */
+  searchTerm?: string;
+  /**
+   * Called when the search term changes (for controlled search).
+   * Only used when searchTerm prop is provided.
+   */
+  onSearchTermChange?: (searchTerm: string) => void;
+  /**
+   * Whether to use manual filtering. If true, will not use the global filter function 'includesString'.
+   */
+  manualFiltering?: boolean;
+  /**
+   * Controlled expanded row IDs.
+   * When provided, row expansion becomes controlled.
+   * Use with onExpandedRowsChange to manage expansion state externally.
+   */
+  expandedRowIds?: Set<string>;
+  /**
+   * Called when expanded rows change (for controlled expansion).
+   * Only used when expandedRowIds prop is provided.
+   */
+  onExpandedRowsChange?: (expandedRowIds: Set<string>) => void;
+  /**
+   * Enable client-side filtering functionality.
+   * Users must explicitly define filter types for columns in TableControls.
+   */
+  clientFiltering?: boolean;
+  /**
+   * @internal Not part of the public API surface.
+   * Used exclusively by the DashboardDataTable wrapper to share TanStack column-filter
+   * state with the dashboard's generateClientFilters adapter.
+   * Pass only via the wrapper's any-cast spread — do not use directly.
+   */
+  columnFilters?: ColumnFiltersState;
+  /**
+   * When true, the empty-state message will read "No results found. Try changing your filters."
+   * even when the DataTable's own filter state is empty.
+   * Use this when the host manages active server-side filters outside the DataTable
+   * (e.g. via an injected filterPanel) so the conditional empty state still reflects those filters.
+   */
+  hasExternalActiveFilters?: boolean;
+  /**
+   * Called when the column-level filter state changes.
+   * Use this to drive an injected filter-panel UI from outside the DataTable,
+   * e.g. to feed `generateClientFilters` with the current TanStack filter state.
+   */
+  onColumnFiltersChange?: (filters: ColumnFiltersState) => void;
+  /**
+   * Host-provided cell format renderer.
+   * The PDS built-in handles string, number, date, datetime, url, sticker, image, id, and pii.
+   * Pass a custom renderer to handle additional application-specific formats (e.g. tags, files,
+   * status indicators) or to override PDS defaults.
+   */
+  renderFormat?: RenderFormatFn<TData, DataTableColumnFormat<TData>>;
+  /**
+   * Actions to display in each table row.
+   * Can be a static array (same actions for all rows) or a function that
+   * receives the row data and returns actions specific to that row.
+   */
+  rowActions?: RowAction[] | ((row: TData) => RowAction[]);
+  /**
+   * Bulk actions to display when there are selected rows.
+   * For standard variant, actions will be shown in the table controls.
+   * For compact variant, actions will be shown in a floating action bar.
+   * If bulkActions are provided in `controls.bulkActions`, they will override the bulkActions prop.
+   */
+  bulkActions?: BulkAction[];
+  /**
+   * Function that returns available bulk actions based on selected rows.
+   * This allows dynamic bulk actions that change based on the selection.
+   * Takes precedence over static bulkActions prop.
+   */
+  getAvailableBulkActions?: (selectedRows: TData[]) => BulkAction[];
+  /**
+   * Callback fired when the set of selected rows changes.
+   * Receives the currently selected row data objects.
+   */
+  onRowSelectionChange?: (selectedRows: TData[]) => void;
+  /**
+   * If present, will display a thin row between rows as UI affordance to add a new row.
+   * The row will be added after the row identified by the provided rowId, and the addAsChild flag will
+   * indicate if the added row will be a sibling or a child of the referenced row
+   * Adding said row will be handled by this `onAddRow` callback.
+   */
+  onAddRow?: (rowId: string, addAsChild: boolean) => void;
+  /**
+   * Called to determine if a row can be added after the provided row.
+   * If not provided, assume true.
+   * If this resolves to false, we will hide the inserter row.
+   */
+  canAddAfterRow?: (row: TData, addAsChild: boolean) => boolean;
+  /**
+   * Called when a row is clicked. If provided, rows will have cursor pointer
+   * and clicking a row will call this function with the row id.
+   * When omitted, rows that can expand (via `_details` or `detailComponent`) toggle expand/collapse on row click.
+   */
+  onRowClick?: (rowId: string) => void;
+  /**
+   * The active row id. If provided, the row will be in an active state.
+   */
+  activeRowId?: string;
+  /**
+   * Called with the ordered ids of the rows currently displayed, reflecting
+   * client-side search, filtering, and sorting. Lets a parent step through the
+   * on-screen order (e.g. prev/next navigation in a detail panel).
+   */
+  onDisplayedRowIdsChange?: (rowIds: string[]) => void;
+  /**
+   * Custom left offset in pixels to add to all pinned columns.
+   * Useful when the table is nested inside containers that need additional spacing.
+   */
+  pinnedColumnLeftOffset?: number;
+  /**
+   * Custom content to render inside the floating action bar, between the
+   * selection count and the action buttons. Only rendered when the floating
+   * action bar is visible (compact mode with selected rows).
+   */
+  floatingBarContent?: React.ReactNode;
+}
+declare const DataTable: <TData extends RowData>({
+  data,
+  columns,
+  detailComponent,
+  expandColumnVisibility,
+  showControls,
+  controls,
+  emptyState,
+  isLoading,
+  pagination,
+  sort,
+  sortDescFirst,
+  enableSortingRemoval,
+  showColumnProperties,
+  onUpdateColumnProperties,
+  enableRowSelection,
+  enableSubRowSelection,
+  getRowId,
+  getRowLabel,
+  getRowSelectable,
+  getLinkToRow,
+  rowLinkPrefix,
+  rowLinkComponent,
+  compact,
+  disableRowHover,
+  title,
+  clientSearch,
+  searchTerm: controlledSearchTerm,
+  onSearchTermChange,
+  manualFiltering,
+  expandedRowIds: controlledExpandedRowIds,
+  onExpandedRowsChange,
+  clientFiltering,
+  columnFilters: controlledColumnFilters,
+  hasExternalActiveFilters,
+  onColumnFiltersChange,
+  renderFormat,
+  rowActions,
+  bulkActions,
+  getAvailableBulkActions,
+  onRowSelectionChange,
+  onAddRow,
+  stickyHeader,
+  canAddAfterRow,
+  onRowClick,
+  activeRowId,
+  onDisplayedRowIdsChange,
+  pinnedColumnLeftOffset,
+  floatingBarContent
+}: DataTableProps<TData>) => _$react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DataTable, DataTable as default, DataTableContainer, DataTableControls, FloatingActionBarContainer };
+//# sourceMappingURL=DataTable.d.mts.map

package/dist/DateField.d.cts

@@ -1,2 +1,23 @@
-import { t as DateField } from "./DateField-Bwe_0qm9.cjs";
-export { DateField, DateField as default };
+import { n as InputSizes } from "./input-BkzqXwn7.cjs";
+import * as _$react from "react";
+import { DateValue } from "@internationalized/date";
+import { AriaDateFieldProps } from "@react-aria/datepicker";
+
+//#region components/DatePicker/DateField.d.ts
+interface DateFieldProps extends AriaDateFieldProps<DateValue> {
+  inputPosition?: 'start' | 'end';
+  focused?: boolean;
+  readOnly?: boolean;
+  value?: DateValue;
+  disabled?: boolean;
+  size?: InputSizes;
+  style?: React.CSSProperties;
+  dateFieldProps?: {
+    style?: React.CSSProperties;
+  };
+  hasError?: boolean;
+}
+declare const DateField: _$react.ForwardRefExoticComponent<DateFieldProps & _$react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { DateField, DateField as default };
+//# sourceMappingURL=DateField.d.cts.map

package/dist/DateField.d.mts

@@ -1,2 +1,23 @@
-import { t as DateField } from "./DateField-Chko9oLb.mjs";
-export { DateField, DateField as default };
+import { n as InputSizes } from "./input-DrG6mA0V.mjs";
+import * as _$react from "react";
+import { DateValue } from "@internationalized/date";
+import { AriaDateFieldProps } from "@react-aria/datepicker";
+
+//#region components/DatePicker/DateField.d.ts
+interface DateFieldProps extends AriaDateFieldProps<DateValue> {
+  inputPosition?: 'start' | 'end';
+  focused?: boolean;
+  readOnly?: boolean;
+  value?: DateValue;
+  disabled?: boolean;
+  size?: InputSizes;
+  style?: React.CSSProperties;
+  dateFieldProps?: {
+    style?: React.CSSProperties;
+  };
+  hasError?: boolean;
+}
+declare const DateField: _$react.ForwardRefExoticComponent<DateFieldProps & _$react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { DateField, DateField as default };
+//# sourceMappingURL=DateField.d.mts.map

package/dist/DatePicker.d.cts

@@ -1,7 +1,7 @@
-import { n as InputSizes } from "./input-Bm_anD8X.cjs";
-import { n as DatePickerProps$1 } from "./index-CExuKKOI.cjs";
+import { n as InputSizes } from "./input-BkzqXwn7.cjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
 import { DateValue } from "@internationalized/date";
+import { DatePickerProps as DatePickerProps$1 } from "@react-types/datepicker";
 
 //#region components/DatePicker/DatePicker.d.ts
 interface DatePickerProps extends DatePickerProps$1<DateValue> {

package/dist/DatePicker.d.mts

@@ -1,7 +1,7 @@
-import { n as InputSizes } from "./input-BCmP106-.mjs";
-import { n as DatePickerProps$1 } from "./index-8R9vlM2B.mjs";
+import { n as InputSizes } from "./input-DrG6mA0V.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { DateValue } from "@internationalized/date";
+import { DatePickerProps as DatePickerProps$1 } from "@react-types/datepicker";
 
 //#region components/DatePicker/DatePicker.d.ts
 interface DatePickerProps extends DatePickerProps$1<DateValue> {

package/dist/DateRangePicker.d.cts

@@ -1,7 +1,8 @@
-import { n as InputSizes } from "./input-Bm_anD8X.cjs";
-import { a as AriaLabelingProps, i as RangeValue, r as DateRangePickerProps$1 } from "./index-CExuKKOI.cjs";
+import { n as InputSizes } from "./input-BkzqXwn7.cjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime.js";
 import { DateValue } from "@internationalized/date";
+import { DateRangePickerProps as DateRangePickerProps$1 } from "@react-types/datepicker";
+import { AriaLabelingProps, RangeValue } from "@react-types/shared";
 import { DateTime } from "luxon";
 
 //#region components/DatePicker/DateRangePicker.d.ts
@@ -33,12 +34,17 @@ interface DateRangePickerProps extends DateRangePickerProps$1<DateValue>, AriaLa
    * z-index of the calendar popover
    */
   calendarZIndex?: number;
+  /**
+   * Element that should contain the calendar portal.
+   */
+  portalContainer?: HTMLElement | null;
 }
 declare const DateRangePicker: ({
   granularity,
   hideTimeZone,
   className,
   calendarZIndex,
+  portalContainer,
   ...props
 }: DateRangePickerProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion

package/dist/DateRangePicker.d.mts

@@ -1,9 +1,9 @@
-import { n as InputSizes } from "./input-BCmP106-.mjs";
-import { l as AriaLabelingProps, o as RangeValue } from "./index-CKu60b9I.mjs";
-import { r as DateRangePickerProps$1 } from "./index-8R9vlM2B.mjs";
+import { n as InputSizes } from "./input-DrG6mA0V.mjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-import { DateValue } from "@internationalized/date";
 import { DateTime } from "luxon";
+import { DateValue } from "@internationalized/date";
+import { AriaLabelingProps, RangeValue } from "@react-types/shared";
+import { DateRangePickerProps as DateRangePickerProps$1 } from "@react-types/datepicker";
 
 //#region components/DatePicker/DateRangePicker.d.ts
 type DateRange = {
@@ -34,12 +34,17 @@ interface DateRangePickerProps extends DateRangePickerProps$1<DateValue>, AriaLa
    * z-index of the calendar popover
    */
   calendarZIndex?: number;
+  /**
+   * Element that should contain the calendar portal.
+   */
+  portalContainer?: HTMLElement | null;
 }
 declare const DateRangePicker: ({
   granularity,
   hideTimeZone,
   className,
   calendarZIndex,
+  portalContainer,
   ...props
 }: DateRangePickerProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion

package/dist/{DropdownButton-k9kEcexu.mjs → DropdownButton-B397h6ka.mjs}

@@ -1,6 +1,5 @@
-import { n as Button } from "./IconButton-C28qxOdi.mjs";
-import "./components/Button/index.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-BTk--LWo.mjs";
+import { n as Button } from "./IconButton-DC4rh6ow.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-cnkoGc7C.mjs";
 import { jsx } from "react/jsx-runtime";
 import { CaretDownIcon } from "@persona/icons";
 //#region components/DropdownButton/DropdownButton.tsx
@@ -24,4 +23,4 @@ const DropdownButton = ({ children, menuItems, menuProps, side, ...props }) => {
 //#endregion
 export { DropdownButton as t };
 
-//# sourceMappingURL=DropdownButton-k9kEcexu.mjs.map
+//# sourceMappingURL=DropdownButton-B397h6ka.mjs.map

package/dist/{DropdownButton-k9kEcexu.mjs.map → DropdownButton-B397h6ka.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton-k9kEcexu.mjs","names":["DropdownMenu"],"sources":["../components/DropdownButton/DropdownButton.tsx"],"sourcesContent":["import { CaretDownIcon } from '@persona/icons';\nimport type { FC, ReactNode } from 'react';\n\nimport Button, { type ButtonProps } from 'design-system/components/Button';\nimport DropdownMenu, {\n  type DropdownMenuProps,\n} from 'design-system/components/DropdownMenu/DropdownMenu';\n\nexport interface DropdownButtonProps extends ButtonProps {\n  /**\n   * Use `DropdownMenu.Item` components to render the menu items.\n   */\n  menuItems: ReactNode;\n  /**\n   * Additional props will be spread to the inner `<DropdownMenu>` component.\n   */\n  menuProps?: Partial<Omit<DropdownMenuProps, 'trigger'>>;\n  /**\n   * The side of the dropdown menu.\n   */\n  side?: DropdownMenuProps['side'];\n}\n\n/**\n * A button that opens a dropdown menu.\n */\nexport const DropdownButton: FC<DropdownButtonProps> = ({\n  children,\n  menuItems,\n  menuProps,\n  side,\n  ...props\n}) => {\n  return (\n    <DropdownMenu\n      trigger={\n        <Button variant='basic' width='auto' suffixIcon={<CaretDownIcon />} {...props}>\n          {children}\n        </Button>\n      }\n      side={side}\n      {...menuProps}\n    >\n      {menuItems}\n    </DropdownMenu>\n  );\n};\n\nexport default DropdownButton;\n"],"mappings":";;;;;;;;;AA0BA,MAAa,kBAA2C,EACtD,UACA,WACA,WACA,MACA,GAAG,YACC;AACJ,QACE,oBAACA,sBAAD;EACE,SACE,oBAAC,QAAD;GAAQ,SAAQ;GAAQ,OAAM;GAAO,YAAY,oBAAC,eAAD,EAAiB,CAAA;GAAE,GAAI;GACrE;GACM,CAAA;EAEL;EACN,GAAI;YAEH;EACY,CAAA"}
+{"version":3,"file":"DropdownButton-B397h6ka.mjs","names":["DropdownMenu"],"sources":["../components/DropdownButton/DropdownButton.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\n\nimport { CaretDownIcon } from '@persona/icons';\nimport Button, { type ButtonProps } from 'design-system/components/Button';\nimport DropdownMenu, {\n  type DropdownMenuProps,\n} from 'design-system/components/DropdownMenu/DropdownMenu';\n\nexport interface DropdownButtonProps extends ButtonProps {\n  /**\n   * Use `DropdownMenu.Item` components to render the menu items.\n   */\n  menuItems: ReactNode;\n  /**\n   * Additional props will be spread to the inner `<DropdownMenu>` component.\n   */\n  menuProps?: Partial<Omit<DropdownMenuProps, 'trigger'>>;\n  /**\n   * The side of the dropdown menu.\n   */\n  side?: DropdownMenuProps['side'];\n}\n\n/**\n * A button that opens a dropdown menu.\n */\nexport const DropdownButton: FC<DropdownButtonProps> = ({\n  children,\n  menuItems,\n  menuProps,\n  side,\n  ...props\n}) => {\n  return (\n    <DropdownMenu\n      trigger={\n        <Button variant='basic' width='auto' suffixIcon={<CaretDownIcon />} {...props}>\n          {children}\n        </Button>\n      }\n      side={side}\n      {...menuProps}\n    >\n      {menuItems}\n    </DropdownMenu>\n  );\n};\n\nexport default DropdownButton;\n"],"mappings":";;;;;;;;AA0BA,MAAa,kBAA2C,EACtD,UACA,WACA,WACA,MACA,GAAG,YACC;AACJ,QACE,oBAACA,sBAAD;EACE,SACE,oBAAC,QAAD;GAAQ,SAAQ;GAAQ,OAAM;GAAO,YAAY,oBAAC,eAAD,EAAiB,CAAA;GAAE,GAAI;GACrE;GACM,CAAA;EAEL;EACN,GAAI;YAEH;EACY,CAAA"}

package/dist/{DropdownButton-DO4NqvWR.cjs → DropdownButton-Du6dwZVL.cjs}

@@ -1,7 +1,6 @@
-require("./chunk-CoPdw6nB.cjs");
-const require_IconButton = require("./IconButton-B1ZL8BqW.cjs");
-require("./components/Button/index.cjs");
-const require_DropdownMenu = require("./DropdownMenu-D2fzpkX2.cjs");
+require("./chunk-CKQMccvm.cjs");
+const require_IconButton = require("./IconButton-DNy7g5zh.cjs");
+const require_DropdownMenu = require("./DropdownMenu-CfJxgWN5.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _persona_icons = require("@persona/icons");
 //#region components/DropdownButton/DropdownButton.tsx
@@ -30,4 +29,4 @@ Object.defineProperty(exports, "DropdownButton", {
 	}
 });
 
-//# sourceMappingURL=DropdownButton-DO4NqvWR.cjs.map
+//# sourceMappingURL=DropdownButton-Du6dwZVL.cjs.map

package/dist/{DropdownButton-DO4NqvWR.cjs.map → DropdownButton-Du6dwZVL.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton-DO4NqvWR.cjs","names":["DropdownMenu","Button","CaretDownIcon"],"sources":["../components/DropdownButton/DropdownButton.tsx"],"sourcesContent":["import { CaretDownIcon } from '@persona/icons';\nimport type { FC, ReactNode } from 'react';\n\nimport Button, { type ButtonProps } from 'design-system/components/Button';\nimport DropdownMenu, {\n  type DropdownMenuProps,\n} from 'design-system/components/DropdownMenu/DropdownMenu';\n\nexport interface DropdownButtonProps extends ButtonProps {\n  /**\n   * Use `DropdownMenu.Item` components to render the menu items.\n   */\n  menuItems: ReactNode;\n  /**\n   * Additional props will be spread to the inner `<DropdownMenu>` component.\n   */\n  menuProps?: Partial<Omit<DropdownMenuProps, 'trigger'>>;\n  /**\n   * The side of the dropdown menu.\n   */\n  side?: DropdownMenuProps['side'];\n}\n\n/**\n * A button that opens a dropdown menu.\n */\nexport const DropdownButton: FC<DropdownButtonProps> = ({\n  children,\n  menuItems,\n  menuProps,\n  side,\n  ...props\n}) => {\n  return (\n    <DropdownMenu\n      trigger={\n        <Button variant='basic' width='auto' suffixIcon={<CaretDownIcon />} {...props}>\n          {children}\n        </Button>\n      }\n      side={side}\n      {...menuProps}\n    >\n      {menuItems}\n    </DropdownMenu>\n  );\n};\n\nexport default DropdownButton;\n"],"mappings":";;;;;;;;;;AA0BA,MAAa,kBAA2C,EACtD,UACA,WACA,WACA,MACA,GAAG,YACC;AACJ,QACE,iBAAA,GAAA,kBAAA,KAACA,qBAAAA,sBAAD;EACE,SACE,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,QAAD;GAAQ,SAAQ;GAAQ,OAAM;GAAO,YAAY,iBAAA,GAAA,kBAAA,KAACC,eAAAA,eAAD,EAAiB,CAAA;GAAE,GAAI;GACrE;GACM,CAAA;EAEL;EACN,GAAI;YAEH;EACY,CAAA"}
+{"version":3,"file":"DropdownButton-Du6dwZVL.cjs","names":["DropdownMenu","Button","CaretDownIcon"],"sources":["../components/DropdownButton/DropdownButton.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\n\nimport { CaretDownIcon } from '@persona/icons';\nimport Button, { type ButtonProps } from 'design-system/components/Button';\nimport DropdownMenu, {\n  type DropdownMenuProps,\n} from 'design-system/components/DropdownMenu/DropdownMenu';\n\nexport interface DropdownButtonProps extends ButtonProps {\n  /**\n   * Use `DropdownMenu.Item` components to render the menu items.\n   */\n  menuItems: ReactNode;\n  /**\n   * Additional props will be spread to the inner `<DropdownMenu>` component.\n   */\n  menuProps?: Partial<Omit<DropdownMenuProps, 'trigger'>>;\n  /**\n   * The side of the dropdown menu.\n   */\n  side?: DropdownMenuProps['side'];\n}\n\n/**\n * A button that opens a dropdown menu.\n */\nexport const DropdownButton: FC<DropdownButtonProps> = ({\n  children,\n  menuItems,\n  menuProps,\n  side,\n  ...props\n}) => {\n  return (\n    <DropdownMenu\n      trigger={\n        <Button variant='basic' width='auto' suffixIcon={<CaretDownIcon />} {...props}>\n          {children}\n        </Button>\n      }\n      side={side}\n      {...menuProps}\n    >\n      {menuItems}\n    </DropdownMenu>\n  );\n};\n\nexport default DropdownButton;\n"],"mappings":";;;;;;;;;AA0BA,MAAa,kBAA2C,EACtD,UACA,WACA,WACA,MACA,GAAG,YACC;AACJ,QACE,iBAAA,GAAA,kBAAA,KAACA,qBAAAA,sBAAD;EACE,SACE,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,QAAD;GAAQ,SAAQ;GAAQ,OAAM;GAAO,YAAY,iBAAA,GAAA,kBAAA,KAACC,eAAAA,eAAD,EAAiB,CAAA;GAAE,GAAI;GACrE;GACM,CAAA;EAEL;EACN,GAAI;YAEH;EACY,CAAA"}

package/dist/DropdownButton.d.cts

@@ -1,5 +1,5 @@
 import { r as ButtonProps } from "./Button-C_3p5Xfi.cjs";
-import { n as DropdownMenuProps } from "./DropdownMenu-Bm2QqLEq.cjs";
+import { n as DropdownMenuProps } from "./DropdownMenu-FIYz6oAo.cjs";
 import { FC, ReactNode } from "react";
 
 //#region components/DropdownButton/DropdownButton.d.ts

package/dist/DropdownButton.d.mts

@@ -1,5 +1,5 @@
-import { r as ButtonProps } from "./Button-DqDLGURJ.mjs";
-import { n as DropdownMenuProps } from "./DropdownMenu-rWgROxQe.mjs";
+import { r as ButtonProps } from "./Button-DXsYU5qU.mjs";
+import { n as DropdownMenuProps } from "./DropdownMenu-5qIgQ14A.mjs";
 import { FC, ReactNode } from "react";
 
 //#region components/DropdownButton/DropdownButton.d.ts

package/dist/{DropdownMenu-rWgROxQe.d.mts → DropdownMenu-5qIgQ14A.d.mts}

@@ -1,9 +1,9 @@
-import { t as Property } from "./index-DQvVmqvS.mjs";
-import { l as MenuItemProps, s as MenuHeadingProps } from "./Menu-DIFkRQ6x.mjs";
+import { l as MenuItemProps, s as MenuHeadingProps } from "./Menu-BJ5c7HGD.mjs";
 import * as _$styled_components0 from "styled-components";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { ComponentPropsWithRef, ComponentPropsWithoutRef, ElementType, FC, FunctionComponentElement } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as Primitive from "@radix-ui/react-dropdown-menu";
+import { Property } from "csstype";
 
 //#region components/DropdownMenu/DropdownMenu.d.ts
 interface DropdownMenuProps extends Primitive.DropdownMenuProps, Pick<Primitive.DropdownMenuContentProps, 'side' | 'align'> {
@@ -72,4 +72,4 @@ declare const _default: (({
 };
 //#endregion
 export { DropdownMenuProps as n, _default as r, DropdownMenu as t };
-//# sourceMappingURL=DropdownMenu-rWgROxQe.d.mts.map
+//# sourceMappingURL=DropdownMenu-5qIgQ14A.d.mts.map

package/dist/{DropdownMenu-D2fzpkX2.cjs → DropdownMenu-CfJxgWN5.cjs}

@@ -1,11 +1,11 @@
-const require_chunk = require("./chunk-CoPdw6nB.cjs");
+const require_chunk = require("./chunk-CKQMccvm.cjs");
 require("./variables/spacing.cjs");
 const require_lib_zindex = require("./lib/zindex.cjs");
-const require_Menu = require("./Menu-BpkjNO81.cjs");
+const require_Menu = require("./Menu-BXic-30n.cjs");
 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_jsx_runtime = require("react/jsx-runtime");
 let _radix_ui_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 _radix_ui_react_dropdown_menu = require_chunk.__toESM(_radix_ui_react_dropdown_menu);
 //#region components/DropdownMenu/DropdownMenu.tsx
@@ -71,4 +71,4 @@ Object.defineProperty(exports, "DropdownMenu_default", {
 	}
 });
 
-//# sourceMappingURL=DropdownMenu-D2fzpkX2.cjs.map
+//# sourceMappingURL=DropdownMenu-CfJxgWN5.cjs.map

package/dist/{DropdownMenu-D2fzpkX2.cjs.map → DropdownMenu-CfJxgWN5.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu-D2fzpkX2.cjs","names":["Primitive","Z_INDICES","Children","Menu","MenuItem","MenuHeading","MenuDivider"],"sources":["../components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import * as Primitive from '@radix-ui/react-dropdown-menu';\nimport type { Property } from 'csstype';\nimport {\n  Children,\n  type ComponentPropsWithoutRef,\n  type ComponentPropsWithRef,\n  type ElementType,\n  type FC,\n  forwardRef,\n  type FunctionComponentElement,\n  type Ref,\n} from 'react';\nimport styled from 'styled-components';\n\nimport Menu, {\n  MenuDivider,\n  MenuHeading,\n  MenuItem,\n  type MenuItemProps,\n} from 'design-system/components/Menu/Menu';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport { BASE } from 'design-system/variables/spacing';\n\nconst DropdownMenuContent = styled(Primitive.Content)<{ $zIndex?: Property.ZIndex }>`\n  z-index: ${({ $zIndex }) => $zIndex || Z_INDICES.tooltip};\n`;\n\nexport interface DropdownMenuProps\n  extends Primitive.DropdownMenuProps, Pick<Primitive.DropdownMenuContentProps, 'side' | 'align'> {\n  id?: string;\n  className?: string;\n\n  trigger: FunctionComponentElement<any>;\n\n  /**\n   * Props passed to internal DropdownMenu.Content component.\n   */\n  contentProps?: Primitive.DropdownMenuContentProps;\n\n  /**\n   * Props passed to internal DropdownMenu.Trigger component.\n   */\n  triggerProps?: Primitive.DropdownMenuTriggerProps;\n\n  /**\n   * Props passed to internal DropdownMenu.Portal component.\n   */\n  portalProps?: Primitive.DropdownMenuPortalProps;\n\n  /**\n   * Whether or not to wrap menu with DropdownMenu.Portal component.\n   */\n  portal?: boolean;\n\n  /**\n   * Whether or not clicks render menu items.\n   */\n  disabled?: boolean;\n\n  zIndex?: Property.ZIndex;\n}\n\nexport const DropdownMenu = ({\n  trigger,\n  children,\n  side,\n  align = 'end',\n  contentProps,\n  triggerProps,\n  portalProps,\n  className,\n  portal = false, // Default to false for old behavior\n  modal = false,\n  disabled = false,\n  zIndex,\n  ...props\n}: DropdownMenuProps) => {\n  if (Children.count(children) === 0) {\n    return null;\n  }\n\n  const content = disabled ? null : (\n    <DropdownMenuContent\n      sideOffset={BASE}\n      collisionPadding={BASE}\n      align={align}\n      side={side}\n      $zIndex={zIndex}\n      {...contentProps}\n    >\n      <Menu className={className} doNotSetRole>\n        {children}\n      </Menu>\n    </DropdownMenuContent>\n  );\n\n  return (\n    <Primitive.Root modal={modal} {...props}>\n      <Primitive.Trigger asChild {...triggerProps}>\n        {trigger}\n      </Primitive.Trigger>\n\n      {portal ? <Primitive.Portal {...portalProps}>{content}</Primitive.Portal> : content}\n    </Primitive.Root>\n  );\n};\n\ninterface DropdownMenuItemProps<T extends ElementType = 'div'>\n  extends MenuItemProps<T>, Omit<Primitive.DropdownMenuItemProps, 'asChild' | 'children'> {}\n\ninterface DropdownMenuItemType<T extends ElementType = 'div'> extends FC<\n  DropdownMenuItemProps<T> & ComponentPropsWithRef<T>\n> {\n  <T extends ElementType = 'div'>(\n    props: DropdownMenuItemProps<T> & ComponentPropsWithoutRef<T>,\n  ): ReturnType<FC<DropdownMenuItemProps<T> & ComponentPropsWithoutRef<T>>>;\n}\n\n/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\nconst DropdownMenuItem: DropdownMenuItemType = forwardRef(function DropdownMenuItem(\n  { children, disabled, ...props },\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <Primitive.Item asChild disabled={disabled} {...props}>\n      <MenuItem disabled={disabled} ref={ref}>\n        {children}\n      </MenuItem>\n    </Primitive.Item>\n  );\n});\n\nexport default Object.assign(DropdownMenu, {\n  Item: DropdownMenuItem,\n  Heading: MenuHeading,\n  Divider: MenuDivider,\n});\n"],"mappings":";;;;;;;;;;;AAuBA,MAAM,sBAAsB,CAAA,GAAA,kBAAA,SAAOA,8BAAU,QAAQ;cACvC,EAAE,cAAc,WAAWC,mBAAAA,UAAU,QAAQ;;AAsC3D,MAAa,gBAAgB,EAC3B,SACA,UACA,MACA,QAAQ,OACR,cACA,cACA,aACA,WACA,SAAS,OACT,QAAQ,OACR,WAAW,OACX,QACA,GAAG,YACoB;AACvB,KAAIC,MAAAA,SAAS,MAAM,SAAS,KAAK,EAC/B,QAAO;CAGT,MAAM,UAAU,WAAW,OACzB,iBAAA,GAAA,kBAAA,KAAC,qBAAD;EACE,YAAA;EACA,kBAAA;EACO;EACD;EACN,SAAS;EACT,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD;GAAiB;GAAW,cAAA;GACzB;GACI,CAAA;EACa,CAAA;AAGxB,QACE,iBAAA,GAAA,kBAAA,MAACH,8BAAU,MAAX;EAAuB;EAAO,GAAI;YAAlC,CACE,iBAAA,GAAA,kBAAA,KAACA,8BAAU,SAAX;GAAmB,SAAA;GAAQ,GAAI;aAC5B;GACiB,CAAA,EAEnB,SAAS,iBAAA,GAAA,kBAAA,KAACA,8BAAU,QAAX;GAAkB,GAAI;aAAc;GAA2B,CAAA,GAAG,QAC7D;;;AAgBrB,MAAM,oBAAA,GAAA,MAAA,YAAoD,SAAS,iBACjE,EAAE,UAAU,UAAU,GAAG,SACzB,KACA;AACA,QACE,iBAAA,GAAA,kBAAA,KAACA,8BAAU,MAAX;EAAgB,SAAA;EAAkB;EAAU,GAAI;YAC9C,iBAAA,GAAA,kBAAA,KAACI,aAAAA,UAAD;GAAoB;GAAe;GAChC;GACQ,CAAA;EACI,CAAA;EAEnB;AAEF,IAAA,uBAAe,OAAO,OAAO,cAAc;CACzC,MAAM;CACN,SAASC,aAAAA;CACT,SAASC,aAAAA;CACV,CAAC"}
+{"version":3,"file":"DropdownMenu-CfJxgWN5.cjs","names":["Primitive","Z_INDICES","Children","Menu","MenuItem","MenuHeading","MenuDivider"],"sources":["../components/DropdownMenu/DropdownMenu.tsx"],"sourcesContent":["import * as Primitive from '@radix-ui/react-dropdown-menu';\nimport type { Property } from 'csstype';\nimport {\n  Children,\n  type ComponentPropsWithoutRef,\n  type ComponentPropsWithRef,\n  type ElementType,\n  type FC,\n  forwardRef,\n  type FunctionComponentElement,\n  type Ref,\n} from 'react';\nimport styled from 'styled-components';\n\nimport Menu, {\n  MenuDivider,\n  MenuHeading,\n  MenuItem,\n  type MenuItemProps,\n} from 'design-system/components/Menu/Menu';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport { BASE } from 'design-system/variables/spacing';\n\nconst DropdownMenuContent = styled(Primitive.Content)<{ $zIndex?: Property.ZIndex }>`\n  z-index: ${({ $zIndex }) => $zIndex || Z_INDICES.tooltip};\n`;\n\nexport interface DropdownMenuProps\n  extends Primitive.DropdownMenuProps, Pick<Primitive.DropdownMenuContentProps, 'side' | 'align'> {\n  id?: string;\n  className?: string;\n\n  trigger: FunctionComponentElement<any>;\n\n  /**\n   * Props passed to internal DropdownMenu.Content component.\n   */\n  contentProps?: Primitive.DropdownMenuContentProps;\n\n  /**\n   * Props passed to internal DropdownMenu.Trigger component.\n   */\n  triggerProps?: Primitive.DropdownMenuTriggerProps;\n\n  /**\n   * Props passed to internal DropdownMenu.Portal component.\n   */\n  portalProps?: Primitive.DropdownMenuPortalProps;\n\n  /**\n   * Whether or not to wrap menu with DropdownMenu.Portal component.\n   */\n  portal?: boolean;\n\n  /**\n   * Whether or not clicks render menu items.\n   */\n  disabled?: boolean;\n\n  zIndex?: Property.ZIndex;\n}\n\nexport const DropdownMenu = ({\n  trigger,\n  children,\n  side,\n  align = 'end',\n  contentProps,\n  triggerProps,\n  portalProps,\n  className,\n  portal = false, // Default to false for old behavior\n  modal = false,\n  disabled = false,\n  zIndex,\n  ...props\n}: DropdownMenuProps) => {\n  if (Children.count(children) === 0) {\n    return null;\n  }\n\n  const content = disabled ? null : (\n    <DropdownMenuContent\n      sideOffset={BASE}\n      collisionPadding={BASE}\n      align={align}\n      side={side}\n      $zIndex={zIndex}\n      {...contentProps}\n    >\n      <Menu className={className} doNotSetRole>\n        {children}\n      </Menu>\n    </DropdownMenuContent>\n  );\n\n  return (\n    <Primitive.Root modal={modal} {...props}>\n      <Primitive.Trigger asChild {...triggerProps}>\n        {trigger}\n      </Primitive.Trigger>\n\n      {portal ? <Primitive.Portal {...portalProps}>{content}</Primitive.Portal> : content}\n    </Primitive.Root>\n  );\n};\n\ninterface DropdownMenuItemProps<T extends ElementType = 'div'>\n  extends MenuItemProps<T>, Omit<Primitive.DropdownMenuItemProps, 'asChild' | 'children'> {}\n\ninterface DropdownMenuItemType<T extends ElementType = 'div'> extends FC<\n  DropdownMenuItemProps<T> & ComponentPropsWithRef<T>\n> {\n  <T extends ElementType = 'div'>(\n    props: DropdownMenuItemProps<T> & ComponentPropsWithoutRef<T>,\n  ): ReturnType<FC<DropdownMenuItemProps<T> & ComponentPropsWithoutRef<T>>>;\n}\n\n/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\nconst DropdownMenuItem: DropdownMenuItemType = forwardRef(function DropdownMenuItem(\n  { children, disabled, ...props },\n  ref: Ref<HTMLDivElement>,\n) {\n  return (\n    <Primitive.Item asChild disabled={disabled} {...props}>\n      <MenuItem disabled={disabled} ref={ref}>\n        {children}\n      </MenuItem>\n    </Primitive.Item>\n  );\n});\n\nexport default Object.assign(DropdownMenu, {\n  Item: DropdownMenuItem,\n  Heading: MenuHeading,\n  Divider: MenuDivider,\n});\n"],"mappings":";;;;;;;;;;;AAuBA,MAAM,sBAAsB,CAAA,GAAA,kBAAA,SAAOA,8BAAU,QAAQ;cACvC,EAAE,cAAc,WAAWC,mBAAAA,UAAU,QAAQ;;AAsC3D,MAAa,gBAAgB,EAC3B,SACA,UACA,MACA,QAAQ,OACR,cACA,cACA,aACA,WACA,SAAS,OACT,QAAQ,OACR,WAAW,OACX,QACA,GAAG,YACoB;AACvB,KAAIC,MAAAA,SAAS,MAAM,SAAS,KAAK,EAC/B,QAAO;CAGT,MAAM,UAAU,WAAW,OACzB,iBAAA,GAAA,kBAAA,KAAC,qBAAD;EACE,YAAA;EACA,kBAAA;EACO;EACD;EACN,SAAS;EACT,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD;GAAiB;GAAW,cAAA;GACzB;GACI,CAAA;EACa,CAAA;AAGxB,QACE,iBAAA,GAAA,kBAAA,MAACH,8BAAU,MAAX;EAAuB;EAAO,GAAI;YAAlC,CACE,iBAAA,GAAA,kBAAA,KAACA,8BAAU,SAAX;GAAmB,SAAA;GAAQ,GAAI;aAC5B;GACiB,CAAA,EAEnB,SAAS,iBAAA,GAAA,kBAAA,KAACA,8BAAU,QAAX;GAAkB,GAAI;aAAc;GAA2B,CAAA,GAAG,QAC7D;;;AAgBrB,MAAM,oBAAA,GAAA,MAAA,YAAoD,SAAS,iBACjE,EAAE,UAAU,UAAU,GAAG,SACzB,KACA;AACA,QACE,iBAAA,GAAA,kBAAA,KAACA,8BAAU,MAAX;EAAgB,SAAA;EAAkB;EAAU,GAAI;YAC9C,iBAAA,GAAA,kBAAA,KAACI,aAAAA,UAAD;GAAoB;GAAe;GAChC;GACQ,CAAA;EACI,CAAA;EAEnB;AAEF,IAAA,uBAAe,OAAO,OAAO,cAAc;CACzC,MAAM;CACN,SAASC,aAAAA;CACT,SAASC,aAAAA;CACV,CAAC"}