@persona/design-system 0.10.10 → 0.10.12

package/dist/{ComboboxMultiSelect-BwkkSymj.d.mts → ComboboxMultiSelect-Cp5GBGQj.d.mts}

@@ -1,7 +1,7 @@
-import { n as ComboboxBaseProps } from "./ComboboxBase-BPXqJHaQ.mjs";
+import { n as ComboboxBaseProps, s as ComboboxServerBaseProps } from "./ComboboxBase-CrFweFGi.mjs";
 
 //#region src/components/Combobox/ComboboxMultiSelect.d.ts
-interface ComboboxMultiSelectProps<T = string> extends ComboboxBaseProps<T> {
+interface ComboboxMultiSelectionProps<T> {
   /**
    * Multi-select mode
    */
@@ -23,7 +23,9 @@ interface ComboboxMultiSelectProps<T = string> extends ComboboxBaseProps<T> {
    */
   truncate?: boolean;
   /**
-   * If true, the combobox will show a special option to select or deselect all items in the current list
+   * Client mode only: show an option to select/deselect the current filtered list.
+   * Ignored in server mode, where PDS cannot know the complete result set. Consumers
+   * can provide an explicit selection action through footerAction.
    */
   selectAll?: boolean;
   /**
@@ -39,9 +41,11 @@ interface ComboboxMultiSelectProps<T = string> extends ComboboxBaseProps<T> {
   onChange?: never;
   virtualize?: boolean;
 }
-declare const ComboboxMultiSelect: <T = string>(props: ComboboxMultiSelectProps<T> & {
+interface ComboboxMultiSelectProps<T = string> extends ComboboxBaseProps<T>, ComboboxMultiSelectionProps<T> {}
+interface ComboboxServerMultiSelectProps<T = string> extends ComboboxServerBaseProps<T>, ComboboxMultiSelectionProps<T> {}
+declare const ComboboxMultiSelect: <T = string>(props: (ComboboxMultiSelectProps<T> | ComboboxServerMultiSelectProps<T>) & {
   ref?: React.Ref<HTMLInputElement>;
 }) => React.ReactElement;
 //#endregion
-export { ComboboxMultiSelectProps as n, ComboboxMultiSelect as t };
-//# sourceMappingURL=ComboboxMultiSelect-BwkkSymj.d.mts.map
+export { ComboboxMultiSelectProps as n, ComboboxServerMultiSelectProps as r, ComboboxMultiSelect as t };
+//# sourceMappingURL=ComboboxMultiSelect-Cp5GBGQj.d.mts.map

package/dist/ComboboxMultiSelect.d.mts

@@ -1,2 +1,2 @@
-import { n as ComboboxMultiSelectProps, t as ComboboxMultiSelect } from "./ComboboxMultiSelect-BwkkSymj.mjs";
-export { ComboboxMultiSelect, ComboboxMultiSelect as default, ComboboxMultiSelectProps };
+import { n as ComboboxMultiSelectProps, r as ComboboxServerMultiSelectProps, t as ComboboxMultiSelect } from "./ComboboxMultiSelect-Cp5GBGQj.mjs";
+export { ComboboxMultiSelect, ComboboxMultiSelect as default, ComboboxMultiSelectProps, ComboboxServerMultiSelectProps };

package/dist/{ComboboxSingleSelect-CdNNJNkp.d.mts → ComboboxSingleSelect-u7fK3Yvy.d.mts}

@@ -1,10 +1,10 @@
-import { u as MenuItemType } from "./Menu-D6OrKCTC.mjs";
+import { u as MenuItemType } from "./Menu-DviYNrFd.mjs";
 import { n as InputSizes } from "./input-JDU1Goyr.mjs";
-import { i as ComboboxOption, n as ComboboxBaseProps } from "./ComboboxBase-BPXqJHaQ.mjs";
+import { i as ComboboxOption, n as ComboboxBaseProps, s as ComboboxServerBaseProps } from "./ComboboxBase-CrFweFGi.mjs";
 import * as _$styled_components0 from "styled-components";
 
 //#region src/components/Combobox/ComboboxSingleSelect.d.ts
-interface ComboboxSingleSelectProps<T = string> extends ComboboxBaseProps<T> {
+interface ComboboxSingleSelectionProps<T> {
   /**
    * Single-select mode
    */
@@ -25,12 +25,14 @@ interface ComboboxSingleSelectProps<T = string> extends ComboboxBaseProps<T> {
   selectAll?: never;
   stableOptionOrder?: never;
 }
+interface ComboboxSingleSelectProps<T = string> extends ComboboxBaseProps<T>, ComboboxSingleSelectionProps<T> {}
+interface ComboboxServerSingleSelectProps<T = string> extends ComboboxServerBaseProps<T>, ComboboxSingleSelectionProps<T> {}
 declare const StyledMenuItem: _$styled_components0.StyledComponent<MenuItemType<"div">, any, {
   size?: InputSizes;
 }, never>;
-declare const ComboboxSingleSelect: <T = string>(props: ComboboxSingleSelectProps<T> & {
+declare const ComboboxSingleSelect: <T = string>(props: (ComboboxSingleSelectProps<T> | ComboboxServerSingleSelectProps<T>) & {
   ref?: React.Ref<HTMLInputElement>;
 }) => React.ReactElement;
 //#endregion
-export { ComboboxSingleSelectProps as n, StyledMenuItem as r, ComboboxSingleSelect as t };
-//# sourceMappingURL=ComboboxSingleSelect-CdNNJNkp.d.mts.map
+export { StyledMenuItem as i, ComboboxSingleSelect as n, ComboboxSingleSelectProps as r, ComboboxServerSingleSelectProps as t };
+//# sourceMappingURL=ComboboxSingleSelect-u7fK3Yvy.d.mts.map

package/dist/ComboboxSingleSelect.d.mts

@@ -1,2 +1,2 @@
-import { n as ComboboxSingleSelectProps, r as StyledMenuItem, t as ComboboxSingleSelect } from "./ComboboxSingleSelect-CdNNJNkp.mjs";
-export { ComboboxSingleSelect, ComboboxSingleSelect as default, ComboboxSingleSelectProps, StyledMenuItem };
+import { i as StyledMenuItem, n as ComboboxSingleSelect, r as ComboboxSingleSelectProps, t as ComboboxServerSingleSelectProps } from "./ComboboxSingleSelect-u7fK3Yvy.mjs";
+export { ComboboxServerSingleSelectProps, ComboboxSingleSelect, ComboboxSingleSelect as default, ComboboxSingleSelectProps, StyledMenuItem };

package/dist/{DataTable-BE9inUi-.d.mts → DataTable-C1mdfmQa.d.mts}

@@ -1,8 +1,8 @@
 import { t as Pagination } from "./Pagination-CCKuudiz.mjs";
-import { i as BaseFilterConfig, n as AttributeColumn, s as FilterConfig } from "./types-BEdERA4v.mjs";
-import { r as TableControlsProps, t as TableControls } from "./TableControls-Clo_0Mty.mjs";
-import { C as RowAction, O as SortProps, _ as DataTableColumns, l as DataTableColumnFormat, t as BulkAction } from "./types-BiqzeNsa.mjs";
-import { t as RenderFormatFn } from "./useTableColumns-Xd14vx_h.mjs";
+import { i as BaseFilterConfig, n as AttributeColumn, s as FilterConfig } from "./types-NO2GRlM-.mjs";
+import { r as TableControlsProps, t as TableControls } from "./TableControls-DE6eHq8h.mjs";
+import { C as RowAction, O as SortProps, _ as DataTableColumns, l as DataTableColumnFormat, t as BulkAction } from "./types-Dws2XDz2.mjs";
+import { t as RenderFormatFn } from "./useTableColumns-tITjHasE.mjs";
 import { ComponentProps } from "react";
 import * as _$styled_components0 from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -192,6 +192,14 @@ interface DataTableProps<TData extends RowData, TFilter extends BaseFilterConfig
    * Compact tables do not support views.
    */
   compact?: boolean;
+  /**
+   * Show bulk actions in a floating action bar over the table while rows are selected, instead of
+   * as buttons in the table controls. Lets regular-density tables use the floating bar; compact
+   * tables always use it, so this has no effect when `compact` is set. When the floating bar is
+   * used, the controls render no bulk-action buttons.
+   * @default false
+   */
+  floatingBulkActions?: 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.
@@ -283,7 +291,8 @@ interface DataTableProps<TData extends RowData, TFilter extends BaseFilterConfig
   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 standard variant, actions will be shown in the table controls (or in a floating action bar
+   * when `floatingBulkActions` is set).
    * 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.
    */
@@ -344,7 +353,7 @@ interface DataTableProps<TData extends RowData, TFilter extends BaseFilterConfig
   /**
    * 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).
+   * action bar is visible (compact or `floatingBulkActions` mode, with selected rows).
    */
   floatingBarContent?: React.ReactNode;
 }
@@ -411,6 +420,7 @@ declare const DataTable: <TData extends RowData, TFilter extends BaseFilterConfi
   rowLinkColumnId,
   rowLinkComponent,
   compact,
+  floatingBulkActions,
   disableRowHover,
   title,
   clientSearch,
@@ -440,4 +450,4 @@ declare const DataTable: <TData extends RowData, TFilter extends BaseFilterConfi
 }: DataTableProps<TData, TFilter>) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 export { FloatingActionBarContainer as a, DataTableProps as i, DataTableContainer as n, DataTableControls as r, DataTable as t };
-//# sourceMappingURL=DataTable-BE9inUi-.d.mts.map
+//# sourceMappingURL=DataTable-C1mdfmQa.d.mts.map

package/dist/{DataTable-CIZJ1vO8.mjs → DataTable-DdSY9mzT.mjs}

@@ -1,26 +1,26 @@
-import { a as styled, r as css } from "./styledComponentsInterop-Cs5CCPRy.mjs";
-import { semanticColor, semanticOnly } from "./lib/semanticColor.mjs";
+import { a as styled, o as useTheme, r as css } from "./styledComponentsInterop-Cs5CCPRy.mjs";
+import { semanticColor, semanticOnly, semanticTokens } from "./lib/semanticColor.mjs";
 import { c as usePDSLocale, i as formatDateTime, l as usePDSStrings, r as formatDate, u as DEFAULT_COMMON_STRINGS } from "./i18n-DaOKaFc2.mjs";
 import { n as RouterLink } from "./router-BxmA940v.mjs";
 import { i as Paragraph, o as TabularNumber } from "./Text-D0vEReED.mjs";
-import "./variables/transitions.mjs";
-import { t as TextUnderlineTooltip } from "./Tooltip-YViXzMdm.mjs";
+import { t as TextUnderlineTooltip } from "./Tooltip-CVBxc1yf.mjs";
 import { isFocused } from "./lib/pseudoClass.mjs";
 import { Z_INDICES } from "./lib/zindex.mjs";
 import { focusOutline } from "./mixins/focus.mjs";
 import "./variables/effect.mjs";
+import { revealHidden, revealShown } from "./mixins/motion.mjs";
 import { semanticScrollbar } from "./mixins/scrollbar.mjs";
 import { t as HStack } from "./Stack-Bzom2BTR.mjs";
-import { n as Button, t as IconButton } from "./IconButton-DxHB2g80.mjs";
-import { n as Sticker } from "./Sticker-C1_6I08u.mjs";
-import { n as DropdownMenu_default } from "./DropdownMenu-c8XK2Lr4.mjs";
-import { t as Checkbox } from "./Checkbox-Dr4LMKHV.mjs";
-import { t as Pagination_default } from "./Pagination-DMH2IaV0.mjs";
-import { a as StickyTH, d as TableTR, f as TableTH, i as StickyTD, o as TableActionTD, p as TableRow, s as TableCell, t as TableLayout, u as TableTD } from "./Table-DPi4Dt5H.mjs";
-import { t as HoverCopyableField } from "./HoverCopyableField-XHC_n9tp.mjs";
-import { t as Link } from "./Link-D_kCyLYX.mjs";
-import { t as Pii_default } from "./Pii-24D_nSRQ.mjs";
-import { I as isFilterActive, f as TableViewConfigurationDropdown, u as TableControls, v as isEmptyState } from "./TableControls-BrP_BqnF.mjs";
+import { n as Button, t as IconButton } from "./IconButton-Bj1fry_K.mjs";
+import { n as Sticker } from "./Sticker-4VdGEFAu.mjs";
+import { n as DropdownMenu_default } from "./DropdownMenu-Ip75l4Th.mjs";
+import { t as Checkbox } from "./Checkbox-BAh-wF_F.mjs";
+import { t as Pagination_default } from "./Pagination-CqFvnlXc.mjs";
+import { a as StickyTH, d as TableTR, f as TableTH, i as StickyTD, o as TableActionTD, p as TableRow, s as TableCell, t as TableLayout, u as TableTD } from "./Table-9mNn8Q-d.mjs";
+import { t as HoverCopyableField } from "./HoverCopyableField-X2XfKTTh.mjs";
+import { t as Link } from "./Link-B29ZMN6m.mjs";
+import { t as Pii_default } from "./Pii-jSYND7Cn.mjs";
+import { L as isFilterActive, f as TableViewConfigurationDropdown, u as TableControls, v as isEmptyState } from "./TableControls-BXykbUBf.mjs";
 import { createElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -112,11 +112,15 @@ function getColumnWidths(compact) {
 }
 //#endregion
 //#region src/components/DataTable/FloatingActionBar.tsx
+/**
+* The bar uses `SurfacePrimary` with the Mid elevation in every theme. The clear-selection icon and
+* the selected count use `FgPrimary`.
+*/
 const Bar = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background-color: ${({ theme }) => semanticColor(theme, "SurfaceElevated", theme.color.background.primary)};
+  background-color: ${({ theme }) => semanticColor(theme, "SurfacePrimary", theme.color.background.primary)};
   width: 100%;
   padding: ${Spacing[2]};
   border-radius: ${BorderRadius.Md};
@@ -126,13 +130,14 @@ const Bar = styled.div`
 `;
 const FloatingActionBar = ({ selectedCount, onClearSelection, extraContent, actions }) => {
 	const strings = usePDSStrings();
+	const theme = useTheme();
 	return /* @__PURE__ */ jsxs(Bar, { children: [/* @__PURE__ */ jsxs(HStack, {
 		align: "center",
 		children: [/* @__PURE__ */ jsx(IconButton, {
 			size: "sm",
 			onClick: onClearSelection,
 			"aria-label": strings.clearSelection,
-			children: /* @__PURE__ */ jsx(XIcon, {})
+			children: /* @__PURE__ */ jsx(XIcon, { style: { color: semanticTokens(theme)?.FgPrimary } })
 		}), /* @__PURE__ */ jsx(Paragraph, {
 			color: "primary",
 			children: strings.selectedItems(selectedCount)
@@ -379,9 +384,7 @@ const AddRowLine = styled.div`
   top: -1px;
   background-color: ${({ theme }) => semanticColor(theme, "BorderAccent", theme.color.primary.brand)};
   width: ${({ $nestSpacing }) => $nestSpacing ? `calc(100% - ${$nestSpacing}px)` : "100%"};
-  transition-duration: ${"200ms"};
-  transition-property: opacity;
-  transition-timing-function: ease-in;
+  ${revealHidden}
 `;
 const StyledPlusButton = styled.button`
   position: absolute;
@@ -397,13 +400,16 @@ const StyledPlusButton = styled.button`
   // TODO: Add a focus style
 
   opacity: 0;
+  ${revealHidden}
 
   &:hover {
     opacity: 1;
+    ${revealShown}
   }
 
   &:hover ~ ${AddRowLine} {
     opacity: 1;
+    ${revealShown}
     height: 2px;
   }
 `;
@@ -414,11 +420,13 @@ const StyledTableRow = styled(TableRow)`
   cursor: pointer;
   &:hover > ${AddRowLine}, &:focus > ${AddRowLine} {
     opacity: 1;
+    ${revealShown}
     height: 2px;
   }
 
   &:hover > ${StyledPlusButton}, &:focus > ${StyledPlusButton} {
     opacity: 1;
+    ${revealShown}
   }
 `;
 const HoverArea = styled.div`
@@ -429,11 +437,13 @@ const HoverArea = styled.div`
   z-index: ${Z_INDICES.withShadow};
   &:hover ~ ${AddRowLine} {
     opacity: 1;
+    ${revealShown}
     height: 2px;
   }
 
   &:hover ~ ${StyledPlusButton} {
     opacity: 1;
+    ${revealShown}
   }
 `;
 const StyledPlusIcon = styled(PlusIcon$1)`
@@ -796,6 +806,8 @@ const FloatingActionBarContainer = styled.div`
   top: 0;
   left: 50%;
   transform: translateX(-50%);
+  /* Above sticky headers, pinned columns and row content at any row height. */
+  z-index: ${Z_INDICES.floatingBar};
 `;
 const isServerPagination = (pagination) => {
 	return typeof pagination === "object" && !("clientPagination" in pagination);
@@ -857,7 +869,7 @@ const DISPLAYED_ROW_IDS_SEPARATOR = "";
 *   { accessor: 'email', header: 'Email' },
 * ];
 */
-const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "auto", showControls, controls, emptyState, isLoading, pagination, sort, sortDescFirst, enableSortingRemoval, showColumnProperties = false, onUpdateColumnProperties, enableRowSelection = false, enableSubRowSelection = true, getRowId, getRowLabel, getRowSelectable, getLinkToRow, rowLinkPrefix, rowLinkColumnId, rowLinkComponent, compact, disableRowHover, title, clientSearch = false, searchTerm: controlledSearchTerm, onSearchTermChange, manualFiltering, expandedRowIds: controlledExpandedRowIds, onExpandedRowsChange, clientFiltering = false, columnFilters: controlledColumnFilters, hasExternalActiveFilters = false, onColumnFiltersChange, renderFormat, rowActions, bulkActions, getAvailableBulkActions, onRowSelectionChange, onAddRow, stickyHeader = false, canAddAfterRow, onRowClick, activeRowId, onDisplayedRowIdsChange, pinnedColumnLeftOffset = 0, scrollsHorizontally = true, floatingBarContent }) => {
+const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "auto", showControls, controls, emptyState, isLoading, pagination, sort, sortDescFirst, enableSortingRemoval, showColumnProperties = false, onUpdateColumnProperties, enableRowSelection = false, enableSubRowSelection = true, getRowId, getRowLabel, getRowSelectable, getLinkToRow, rowLinkPrefix, rowLinkColumnId, rowLinkComponent, compact, floatingBulkActions = false, disableRowHover, title, clientSearch = false, searchTerm: controlledSearchTerm, onSearchTermChange, manualFiltering, expandedRowIds: controlledExpandedRowIds, onExpandedRowsChange, clientFiltering = false, columnFilters: controlledColumnFilters, hasExternalActiveFilters = false, onColumnFiltersChange, renderFormat, rowActions, bulkActions, getAvailableBulkActions, onRowSelectionChange, onAddRow, stickyHeader = false, canAddAfterRow, onRowClick, activeRowId, onDisplayedRowIdsChange, pinnedColumnLeftOffset = 0, scrollsHorizontally = true, floatingBarContent }) => {
 	const DEFAULT_SEARCH_PLACEHOLDER = "Search...";
 	const { NEST_SPACING, EXPAND_COLUMN_WIDTH } = getColumnWidths(compact);
 	const [columnVisibility, setColumnVisibility] = useState(() => {
@@ -1282,7 +1294,8 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 		table,
 		controls?.bulkActions
 	]);
-	const shouldShowFloatingActionBar = compact && actions && actions.length > 0 && selectedRows.length > 0;
+	const usesFloatingBulkActions = Boolean(compact || floatingBulkActions);
+	const shouldShowFloatingActionBar = usesFloatingBulkActions && actions && actions.length > 0 && selectedRows.length > 0;
 	const hasGlobalFilter = clientSearch && globalFilter && globalFilter.trim().length > 0;
 	const hasFilters = columnFilters.length > 0 || controls?.filterPanel == null && (controls?.filtersV2 != null ? controls.filtersV2.initialState != null && !isEmptyState(controls.filtersV2.initialState) : unifiedFilters.some((filter) => filter.enabled !== false && isFilterActive(filter, controls?.filterResolver)));
 	const hasActiveFilters = hasGlobalFilter || hasFilters || hasExternalActiveFilters;
@@ -1315,7 +1328,7 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 				onClearSelection: () => table.setRowSelection({}),
 				searchProps: generatedSearchProps,
 				...controls,
-				bulkActions: actions,
+				bulkActions: usesFloatingBulkActions ? void 0 : actions,
 				filters: unifiedFilters
 			}),
 			/* @__PURE__ */ jsxs(TableContainer, {
@@ -1545,4 +1558,4 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 //#endregion
 export { getFilterFnName as S, renderAsString as _, useTableColumns as a, getColumnWidths as b, renderAsCheckboxHeader as c, renderAsDatetime as d, renderAsLightweightImage as f, renderAsSticker as g, renderAsPii as h, FloatingActionBarContainer as i, renderAsCopyableString as l, renderAsPDSFormat as m, DataTableContainer as n, Inserter as o, renderAsNumber as p, DataTableControls as r, renderAsCheckbox as s, DataTable as t, renderAsDate as u, renderAsURL as v, generateClientFilters as x, FloatingActionBar as y };
 
-//# sourceMappingURL=DataTable-CIZJ1vO8.mjs.map
+//# sourceMappingURL=DataTable-DdSY9mzT.mjs.map