@persona/design-system 0.1.7 → 0.1.9

package/dist/components/CardV2/index.mjs

@@ -1,411 +1,2 @@
-import { focusStyle } from "../../mixins/focus.mjs";
-import "../../variables/transitions.mjs";
-import ConfigContext from "../../lib/ConfigContext.mjs";
-import { HeadlessAriaButton } from "../../lib/HeadlessAriaButton.mjs";
-import { TruncatedText } from "../../lib/TruncatedText.mjs";
-import { i as Paragraph, n as Heading$1 } from "../../Text-hEoPeOc9.mjs";
-import { a as Tooltip } from "../../Tooltip-CDvOu1UN.mjs";
-import { Z_INDICES } from "../../lib/zindex.mjs";
-import { t as HStack } from "../../Stack-ckRN7LrP.mjs";
-import { n as Button$1, t as IconButton } from "../../IconButton-DC4rh6ow.mjs";
-import { t as intersperse } from "../../intersperse-yd3oMrQl.mjs";
-import { n as DropdownMenu_default } from "../../DropdownMenu-cnkoGc7C.mjs";
-import { t as DropdownButton } from "../../DropdownButton-B397h6ka.mjs";
-import { t as LoadingShimmer } from "../../LoadingShimmer-Bu6KtQ06.mjs";
-import { Color, Spacing, Typography } from "@persona/design-tokens";
-import styled, { css } from "styled-components";
-import { createContext, useContext } from "react";
-import { Disclosure, DisclosurePanel } from "react-aria-components";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ChevronDownIcon, MoreIcon } from "@persona/icons";
-import { ErrorBoundary } from "react-error-boundary";
-//#region components/CardV2/SectionHeading.tsx
-const CardLoadingShimmer$1 = styled(LoadingShimmer)`
-  border-radius: ${({ theme }) => theme.card.borderRadius};
-`;
-const StickerContainer = styled.div`
-  display: flex;
-  max-width: 180px;
-`;
-const AccordionContainer = styled.div`
-  transition: opacity ${"150ms"};
-  position: absolute;
-  opacity: 0;
-
-  height: 12px;
-  width: 12px;
-  display: flex;
-  align-items: center;
-  /* Because of padding in the top section heading we need to offset differently. */
-  /* We want a 12px icon to be off-center in 24px padding, 4px on the right and 8px on the left */
-  left: ${({ $isTopSection }) => $isTopSection ? "8px" : "-16px"};
-  /* center the icon vertically */
-  top: calc(50% - 6px);
-
-  border-radius: 1px;
-
-  & svg {
-    transition: transform ${"150ms"} ease-out;
-    transform: rotate(${({ $expanded }) => $expanded ? "0" : "-90deg"});
-  }
-`;
-const HeaderButton = styled(HeadlessAriaButton)`
-  min-width: 0;
-  flex: 1;
-
-  &:hover ~ ${AccordionContainer} {
-    opacity: 1;
-  }
-
-  &:focus-visible ~ ${AccordionContainer} {
-    opacity: 1;
-    ${focusStyle}
-  }
-`;
-const HeadingContainer = styled(HStack)`
-  position: relative;
-
-  ${({ $isTopSection }) => $isTopSection && css`
-      padding: ${Spacing[4]} ${Spacing[5]};
-    `}
-  ${({ $divider }) => $divider && css`
-      border-bottom: 1px solid ${Color.BorderDivider};
-    `}
-  ${({ $isTopSection, $hasFooter, $isExpanded }) => $isTopSection && !$hasFooter && !$isExpanded && css`
-      // We apply 4px of whitespace to the bottom of the card container so that content has a buffer
-      // when being scrolled and still appears inside the card. Here we adjust, subtracting
-      // 4px from the 16px padding.
-      padding-bottom: ${Spacing[3]};
-    `}
-`;
-const StyledHeading = styled(Heading$1)`
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: ${Spacing[2]};
-  line-height: 24px; // We want an adjusted line-height to hit the target header size.
-  overflow: hidden;
-
-  ${({ $isCollapsible }) => $isCollapsible && "cursor: pointer;"}
-  ${({ $isTopSection }) => !$isTopSection && css`
-      ${Typography.TextLargeBold};
-    `}
-`;
-const isIconAction = (action) => "icon" in action;
-const ButtonRow = ({ actions, menuActions }) => {
-	return /* @__PURE__ */ jsxs(HStack, { children: [actions.filter((action) => !action.hidden).map((action, i) => {
-		const key = isIconAction(action) ? action.id ?? action.ariaLabel ?? `action-${i}` : action.id ?? action.label ?? `action-${i}`;
-		const button = isIconAction(action) ? /* @__PURE__ */ jsx(IconButton, {
-			id: action.id,
-			to: action.to,
-			onClick: (e) => {
-				e.stopPropagation();
-				return action.onClick?.(e);
-			},
-			disabled: action.disabled,
-			"aria-label": action.ariaLabel,
-			size: "sm",
-			children: action.icon
-		}, key) : /* @__PURE__ */ jsx(Button$1, {
-			id: action.id,
-			"aria-label": action.ariaLabel,
-			to: action.to,
-			onClick: (e) => {
-				e.stopPropagation();
-				return action.onClick?.(e);
-			},
-			disabled: action.disabled,
-			variant: action.variant ?? "basic",
-			size: "sm",
-			width: "auto",
-			prefixIcon: action.prefixIcon,
-			suffixIcon: action.suffixIcon,
-			children: action.label
-		}, key);
-		return action.tooltip ? /* @__PURE__ */ jsx(Tooltip, {
-			...action.tooltipProps,
-			trigger: button,
-			children: action.tooltip
-		}, key) : button;
-	}), menuActions.length > 0 && /* @__PURE__ */ jsx(DropdownButton, {
-		variant: "text",
-		width: "icon",
-		size: "sm",
-		suffixIcon: void 0,
-		style: { justifySelf: "flex-end" },
-		"aria-label": "More actions",
-		menuProps: { portal: true },
-		menuItems: menuActions.filter((action) => !action.hidden).map((action) => /* @__PURE__ */ jsx(DropdownMenu_default.Item, {
-			id: action.id ?? action.label,
-			onClick: action.onClick,
-			disabled: action.disabled,
-			children: action.label
-		}, action.id ?? action.label)),
-		children: /* @__PURE__ */ jsx(MoreIcon, {})
-	})] });
-};
-/**
-* Private component for rendering the heading of a section, both the primary card heading and
-* section headings.
-*/
-const SectionHeading = ({ isTopSection, sectionHasContent, hasFooter, loading, title, actions = [], menuActions = [], headerActionsRowContent, sticker, leftDecorativeIcon, toggle, isExpanded, headingProps }) => {
-	const renderButtonRow = actions.length > 0 || menuActions.length > 0;
-	const { as: headingAs, ...restHeadingProps } = headingProps ?? {};
-	return /* @__PURE__ */ jsx(HeadingContainer, {
-		$isTopSection: isTopSection,
-		$hasFooter: hasFooter,
-		$isExpanded: isExpanded,
-		$divider: isTopSection && isExpanded && sectionHasContent,
-		align: "center",
-		justify: "space-between",
-		spacing: Spacing[2],
-		children: loading ? /* @__PURE__ */ jsx(CardLoadingShimmer$1, {
-			height: "24px",
-			width: "200px"
-		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			/* @__PURE__ */ jsx(HeaderButton, {
-				slot: "trigger",
-				isDisabled: !toggle,
-				children: /* @__PURE__ */ jsxs(StyledHeading, {
-					forwardedAs: headingAs ?? (isTopSection ? "h2" : "h3"),
-					size: "xsm",
-					$isCollapsible: !!toggle,
-					$isTopSection: isTopSection,
-					"aria-label": title,
-					...restHeadingProps,
-					children: [
-						leftDecorativeIcon,
-						/* @__PURE__ */ jsx(TruncatedText, { children: title }),
-						sticker && /* @__PURE__ */ jsx(StickerContainer, { children: sticker })
-					]
-				})
-			}),
-			headerActionsRowContent,
-			renderButtonRow && /* @__PURE__ */ jsx(ButtonRow, {
-				actions: actions.filter((action) => action != null),
-				menuActions: menuActions.filter((action) => action != null)
-			}),
-			toggle && /* @__PURE__ */ jsx(AccordionContainer, {
-				$isTopSection: isTopSection,
-				$expanded: isExpanded,
-				children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
-			})
-		] })
-	});
-};
-//#endregion
-//#region components/CardV2/Section.tsx
-const FooterParagraph = styled(Paragraph)`
-  line-height: 16px;
-`;
-const FooterContainer = styled.div`
-  ${({ $divider }) => $divider && css`
-      border-top: 1px solid ${Color.BorderDivider};
-    `}
-  padding: ${Spacing[3]} ${Spacing[5]} ${Spacing[2]};
-`;
-const MaybeStickyContainer = styled.div`
-  ${({ $enabled }) => $enabled && css`
-      // We are using sticky positioning here to have consistent scrollbar behavior between
-      // different card configurations. Usage of sticky allows us to keep the scroll container at
-      // the top of the card DOM structure regardless of whether the heading or footer is sticky.
-      //
-      // This also afaict helps eliminate the need to carry height values through the card DOM
-      // structure to the content container (and possibly needing to adjust heights for heading and footer).
-      position: sticky;
-      top: 0;
-      background-color: ${({ theme }) => theme.color.background.primary};
-      z-index: ${Z_INDICES.sticky};
-    `}
-
-  ${({ $bottom = false }) => $bottom && css`
-      top: unset;
-      bottom: 0;
-    `}
-`;
-const StyledDisclosure = styled(Disclosure)`
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  ${({ $fullHeight }) => $fullHeight && css`
-      height: 100%;
-    `}
-`;
-const StyledDisclosurePanel = styled(DisclosurePanel)`
-  flex: 1;
-  ${({ $isTopSection }) => $isTopSection && css`
-      // Safari does not support hidden='until-found' so react-aria uses display: none instead.
-      // Since react-aria is using display to hide content we need to not set display ourselves.
-      &:not([aria-hidden='true']) {
-        display: flex;
-      }
-    `}
-`;
-const CardLoadingShimmer = styled(LoadingShimmer)`
-  border-radius: ${({ theme }) => theme.card.borderRadius};
-`;
-const SectionContentContainer = styled.div`
-  ${({ $isTopSection }) => $isTopSection && css`
-      padding: ${Spacing[5]};
-      display: flex;
-      flex-direction: column;
-      gap: ${Spacing[5]};
-      flex: 1;
-      /* Prevent grid blowout https://css-tricks.com/preventing-a-grid-blowout/ */
-      min-width: 0;
-    `}
-
-  ${({ $isTopSection, $hasHeading }) => !$isTopSection && $hasHeading && css`
-      padding-top: ${Spacing[3]};
-    `}
-
-    ${({ $isTopSection, $hasFooter }) => $isTopSection && !$hasFooter && css`
-      // We apply 4px of whitespace to the bottom of the card container so that content has a buffer
-      // when being scrolled and still appears inside the card. Here we adjust, subtracting
-      // 4px from the 24px padding.
-      padding-bottom: 20px;
-    `}
-`;
-/**
-* Private component for rendering sections of the card, both the primary card section and
-* individual sections.
-*/
-const Section = ({ children, isTopSection, heading, footer, footerContent, loading = false, loadingProps, empty = false, emptyProps, defaultCollapsed = false, collapsible = false, sticky = false, fullHeight = false }) => {
-	let content;
-	if (loading) content = /* @__PURE__ */ jsx(CardLoadingShimmer, {
-		height: loadingProps?.height ?? "200px",
-		width: "100%"
-	});
-	else if (empty) content = /* @__PURE__ */ jsx(Paragraph, { children: emptyProps?.message ?? "No data collected" });
-	else content = children;
-	const hasFooter = !!(footer || footerContent);
-	const hasContent = !!content;
-	return /* @__PURE__ */ jsx(StyledDisclosure, {
-		defaultExpanded: !defaultCollapsed,
-		$fullHeight: fullHeight,
-		children: ({ isExpanded, state }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			heading && /* @__PURE__ */ jsx(MaybeStickyContainer, {
-				$enabled: sticky,
-				children: /* @__PURE__ */ jsx(SectionHeading, {
-					isTopSection,
-					hasFooter,
-					sectionHasContent: hasContent,
-					loading,
-					toggle: collapsible ? state.toggle : void 0,
-					isExpanded,
-					...heading
-				})
-			}),
-			hasContent && /* @__PURE__ */ jsx(StyledDisclosurePanel, {
-				$isTopSection: isTopSection,
-				children: /* @__PURE__ */ jsx(SectionContentContainer, {
-					$isTopSection: isTopSection,
-					$hasHeading: !!heading,
-					$hasFooter: hasFooter,
-					children: content
-				})
-			}),
-			hasFooter && /* @__PURE__ */ jsx(MaybeStickyContainer, {
-				$enabled: sticky,
-				$bottom: true,
-				children: /* @__PURE__ */ jsx(FooterContainer, {
-					$divider: hasContent,
-					children: loading ? /* @__PURE__ */ jsxs(HStack, { children: [/* @__PURE__ */ jsx(CardLoadingShimmer, {
-						height: "16px",
-						width: "120px"
-					}), /* @__PURE__ */ jsx(CardLoadingShimmer, {
-						height: "16px",
-						width: "120px"
-					})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [footer && /* @__PURE__ */ jsx(FooterParagraph, {
-						size: "sm",
-						children: /* @__PURE__ */ jsx(HStack, {
-							spacing: Spacing[1],
-							children: intersperse(footer.filter((item) => item != null).map((item, i) => /* @__PURE__ */ jsx("span", { children: item }, `footer-item-${i}`)), (i) => /* @__PURE__ */ jsx("span", { children: "•" }, i))
-						})
-					}), footerContent] })
-				})
-			})
-		] })
-	});
-};
-//#endregion
-//#region components/CardV2/Card.tsx
-const CardContainer = styled.div`
-  border-radius: ${({ theme }) => theme.card.borderRadius};
-  background-color: ${({ theme }) => theme.color.background.primary};
-  // Height has been tricky here.
-  // inherit seems to work well for both grid and flexbox layouts. In a grid we want this
-  // container to receive the full cell height, In a flexbox we want this container to flex, maintaining
-  // the minimum height for it's content.
-  height: inherit;
-  overflow-y: auto;
-
-  box-sizing: border-box;
-  // Small buffer so that content is not scrolling right on the edge of the card.
-  border-bottom: 4px solid ${({ theme }) => theme.color.background.primary};
-`;
-const CardContext = createContext({});
-const Divider = styled.hr`
-  margin: 0;
-  border: none;
-  border-top: 1px solid ${Color.BorderDivider};
-`;
-/**
-* Renders a card section.
-*/
-const PublicSection = (props) => {
-	return /* @__PURE__ */ jsx(Section, {
-		isTopSection: false,
-		...props
-	});
-};
-/**
-* Render the card in a "stacked" mode. Used for rendering multiple cards on top of each other
-* that appear visually as a single card.
-*/
-const Stacked = ({ children }) => {
-	return /* @__PURE__ */ jsx(CardContext.Provider, {
-		value: { isStacked: true },
-		children: /* @__PURE__ */ jsx(CardContainer, { children: intersperse(children, (i) => /* @__PURE__ */ jsx(Divider, {}, i)) })
-	});
-};
-const DEFAULT_ERROR_MESSAGE = "🔍 Oops, something went wrong loading this card.";
-/**
-* Renders a PDS Card.
-*
-* To render sections of the card use `<Card.Section>...</Card.Section>`
-*/
-const Card = ({ children, errored, erroredProps, containerProps, sticky = true, ...sectionProps }) => {
-	const { isStacked = false } = useContext(CardContext);
-	const { captureException } = useContext(ConfigContext);
-	const errorFallback = /* @__PURE__ */ jsx(Section, {
-		isTopSection: true,
-		...sectionProps,
-		children: /* @__PURE__ */ jsx(Paragraph, { children: erroredProps?.message ?? DEFAULT_ERROR_MESSAGE })
-	});
-	const section = /* @__PURE__ */ jsx(Section, {
-		isTopSection: true,
-		sticky,
-		...sectionProps,
-		children
-	});
-	return /* @__PURE__ */ jsx(ErrorBoundary, {
-		fallback: isStacked ? errorFallback : /* @__PURE__ */ jsx(CardContainer, {
-			...containerProps,
-			children: errorFallback
-		}),
-		onError: erroredProps?.onError ?? ((error) => captureException(error)),
-		children: isStacked ? /* @__PURE__ */ jsx(Fragment$1, { children: errored ? /* @__PURE__ */ jsx(Fragment$1, { children: errorFallback }) : /* @__PURE__ */ jsx(Fragment$1, { children: section }) }) : /* @__PURE__ */ jsx(CardContainer, {
-			...containerProps,
-			children: errored ? /* @__PURE__ */ jsx(Fragment$1, { children: errorFallback }) : /* @__PURE__ */ jsx(Fragment$1, { children: section })
-		})
-	});
-};
-var Card_default = Object.assign(Card, {
-	Section: PublicSection,
-	Stacked
-});
-//#endregion
+import { t as Card_default } from "../../CardV2-C0fcOUdp.mjs";
 export { Card_default as Card, Card_default as default };
-
-//# sourceMappingURL=index.mjs.map

package/dist/components/Checkbox/index.d.mts

@@ -1,2 +1,2 @@
-import { n as CheckboxProps, t as Checkbox } from "../../Checkbox-MUC37dLY.mjs";
+import { n as CheckboxProps, t as Checkbox } from "../../Checkbox-Bm8exUfH.mjs";
 export { Checkbox, Checkbox as default, CheckboxProps };

package/dist/components/Checkbox/index.mjs

@@ -1,2 +1,2 @@
-import { t as Checkbox } from "../../Checkbox-BghGF-iW.mjs";
+import { t as Checkbox } from "../../Checkbox-BcuiFvK7.mjs";
 export { Checkbox, Checkbox as default };

package/dist/components/Combobox/index.d.mts

@@ -1,3 +1,3 @@
-import { T as flattenOptions, a as ComboboxOptionGroup, i as ComboboxOption, o as ComboboxOptionsOrGroups, t as CaretButton } from "../../ComboboxBase-DGZUdsQa.mjs";
-import { n as ComboboxProps, t as Combobox } from "../../Combobox-Bedo_GIj.mjs";
+import { D as flattenOptions, a as ComboboxOptionGroup, i as ComboboxOption, o as ComboboxOptionsOrGroups, t as CaretButton } from "../../ComboboxBase-BsPf8BZh.mjs";
+import { n as ComboboxProps, t as Combobox } from "../../Combobox-BaD0f2Du.mjs";
 export { CaretButton, Combobox, Combobox as default, ComboboxOption, ComboboxOptionGroup, ComboboxOptionsOrGroups, ComboboxProps, flattenOptions };

package/dist/components/Combobox/index.mjs

@@ -1,2 +1,2 @@
-import { n as CaretButton, r as flattenOptions, t as Combobox } from "../../Combobox-CeKMrlxy.mjs";
+import { n as CaretButton, r as flattenOptions, t as Combobox } from "../../Combobox-B6JyLog8.mjs";
 export { CaretButton, Combobox, Combobox as default, flattenOptions };

package/dist/components/ConfigFormGroup/index.mjs

@@ -1,3 +1,3 @@
-import { n as useFormGroup, t as FormGroupContext } from "../../useFormGroup-BMukAMAd.mjs";
-import { t as ConfigFormGroup } from "../../ConfigFormGroup-DISUwz5j.mjs";
+import { n as useFormGroup, t as FormGroupContext } from "../../useFormGroup-DWVW7A9f.mjs";
+import { t as ConfigFormGroup } from "../../ConfigFormGroup-yhb2jldT.mjs";
 export { ConfigFormGroup, ConfigFormGroup as default, FormGroupContext, useFormGroup };

package/dist/components/DataTable/TableControls/index.d.mts

@@ -1,6 +1,16 @@
-import { n as ControlBarProps, t as ControlBar } from "../../../ControlBar-DXyl1gjc.mjs";
-import { n as DataTableCompactBar } from "../../../CompactBar-2cpJD7qg.mjs";
-import { i as TableViewConfigurationProps, n as TableViewConfigurationDropdown, r as TableViewConfigurationDropdownProps, t as TableViewConfiguration } from "../../../TableViewConfigurationDropdown-D2TM2wCv.mjs";
-import { i as useTableControls, n as TableControlsContextProps, r as TableControlsProvider, t as TableControlsContext } from "../../../TableControlsContext-CleTWT7z.mjs";
-import { t as TableControls } from "../../../TableControls-BZyiqk9V.mjs";
-export { ControlBar, ControlBarProps, DataTableCompactBar, TableControlsContext, TableControlsContextProps, TableControlsProvider, TableViewConfiguration, TableViewConfigurationDropdown, TableViewConfigurationDropdownProps, TableViewConfigurationProps, TableControls as default, useTableControls };
+import { n as ControlBarProps, t as ControlBar } from "../../../ControlBar-tOCQnbAl.mjs";
+import { n as DataTableCompactBar } from "../../../CompactBar-CXqlVKy7.mjs";
+import { i as TableViewConfigurationProps, n as TableViewConfigurationDropdown, r as TableViewConfigurationDropdownProps, t as TableViewConfiguration } from "../../../TableViewConfigurationDropdown-BYPh4dIP.mjs";
+import { i as useTableControls, n as TableControlsContextProps, r as TableControlsProvider, t as TableControlsContext } from "../../../TableControlsContext-D_SBFZN1.mjs";
+import { a as FilterField, c as FilterOperator, d as FilterSize, f as FilterStateV2, i as EMPTY_FILTER_STATE, l as FilterRule, n as CompoundExpression, o as FilterFieldSource, p as TopLevelFilterRule, r as DateRangeFilterValue, s as FilterFieldType, t as AndGroup, u as FilterRuleValue } from "../../../types-D58IoRx6.mjs";
+import { n as RawFieldInfo, r as buildFieldRegistry, t as FieldRegistry } from "../../../FieldRegistry-rqSkjchY.mjs";
+import { n as ValueControlResolver, r as resolveValueControl, t as ResolveValueControlOptions } from "../../../value-control-resolver-CE-bqdAl.mjs";
+import { t as FilterBar } from "../../../FilterBar-D3LiIy1-.mjs";
+import { t as FilterBarProps } from "../../../index-4_B2yRzD.mjs";
+import { a as useFilterBarSize } from "../../../filter-size-context-Blw6Sd69.mjs";
+import { a as getOperatorsForField, o as getOperatorsForType, r as getDefaultOperatorForType, s as isValuelessOperator } from "../../../operators-Bo31xlc2.mjs";
+import { n as UseFilterStateV2Result, r as useFilterStateV2, t as UseFilterStateV2Options } from "../../../useFilterStateV2-DCQghouq.mjs";
+import { n as isFilterStateV2, r as pruneToRegistry, t as hasCompleteValue } from "../../../validation-vLh3t2dk.mjs";
+import { t as ValueControlProps } from "../../../types-D7ppqnNj.mjs";
+import { t as TableControls } from "../../../TableControls-BehR7CKS.mjs";
+export { AndGroup, CompoundExpression, ControlBar, ControlBarProps, DataTableCompactBar, DateRangeFilterValue, EMPTY_FILTER_STATE, FieldRegistry, FilterBar, FilterBarProps, FilterField, FilterFieldSource, FilterFieldType, FilterOperator, FilterRule, FilterRuleValue, FilterSize, FilterStateV2, RawFieldInfo, ResolveValueControlOptions, TableControlsContext, TableControlsContextProps, TableControlsProvider, TableViewConfiguration, TableViewConfigurationDropdown, TableViewConfigurationDropdownProps, TableViewConfigurationProps, TopLevelFilterRule, UseFilterStateV2Options, UseFilterStateV2Result, ValueControlProps, ValueControlResolver, buildFieldRegistry, TableControls as default, getDefaultOperatorForType, getOperatorsForField, getOperatorsForType, hasCompleteValue, isFilterStateV2, isValuelessOperator, pruneToRegistry, resolveValueControl, useFilterBarSize, useFilterStateV2, useTableControls };

package/dist/components/DataTable/TableControls/index.mjs

@@ -1,2 +1,2 @@
-import { a as TableViewConfigurationDropdown, c as DataTableCompactBar, i as TableViewConfiguration, n as TableControlsProvider, o as TableControls, r as useTableControls, s as ControlBar, t as TableControlsContext } from "../../../TableControls-BkdSeQvt.mjs";
-export { ControlBar, DataTableCompactBar, TableControlsContext, TableControlsProvider, TableViewConfiguration, TableViewConfigurationDropdown, TableControls as default, useTableControls };
+import { S as DataTableCompactBar, _ as useTableControls, a as hasCompleteValue, b as TableControls, c as EMPTY_FILTER_STATE, d as getDefaultOperatorForType, f as getOperatorsForField, g as TableControlsProvider, h as TableControlsContext, i as useFilterStateV2, l as resolveValueControl, m as isValuelessOperator, n as buildFieldRegistry, o as isFilterStateV2, p as getOperatorsForType, r as FilterBar_default, s as pruneToRegistry, t as FieldRegistry, u as useFilterBarSize, v as TableViewConfiguration, x as ControlBar, y as TableViewConfigurationDropdown } from "../../../TableControls-DVTtNAPo.mjs";
+export { ControlBar, DataTableCompactBar, EMPTY_FILTER_STATE, FieldRegistry, FilterBar_default as FilterBar, TableControlsContext, TableControlsProvider, TableViewConfiguration, TableViewConfigurationDropdown, buildFieldRegistry, TableControls as default, getDefaultOperatorForType, getOperatorsForField, getOperatorsForType, hasCompleteValue, isFilterStateV2, isValuelessOperator, pruneToRegistry, resolveValueControl, useFilterBarSize, useFilterStateV2, useTableControls };

package/dist/components/DataTable/index.mjs

@@ -1,31 +1,31 @@
 import { isFocused } from "../../lib/pseudoClass.mjs";
 import "../../variables/effect.mjs";
 import "../../variables/transitions.mjs";
-import { i as Paragraph, o as TabularNumber } from "../../Text-hEoPeOc9.mjs";
-import { t as TextUnderlineTooltip } from "../../Tooltip-CDvOu1UN.mjs";
+import { t as HStack } from "../../Stack-Bl54WmhY.mjs";
+import { i as Paragraph, o as TabularNumber } from "../../Text-RcEfNFLx.mjs";
+import { t as TextUnderlineTooltip } from "../../Tooltip-BvDbmXak.mjs";
 import { Z_INDICES } from "../../lib/zindex.mjs";
-import { t as HStack } from "../../Stack-ckRN7LrP.mjs";
-import { n as Button, t as IconButton } from "../../IconButton-DC4rh6ow.mjs";
-import { n as Sticker } from "../../Sticker-B0TbkV4o.mjs";
-import { n as DropdownMenu_default } from "../../DropdownMenu-cnkoGc7C.mjs";
-import { t as Checkbox } from "../../Checkbox-BghGF-iW.mjs";
-import { t as Pagination_default } from "../../Pagination-Cj08JRG9.mjs";
-import { a as StickyTH, d as TableTR, f as TableTH, i as StickyTD, n as TableBody, o as TableActionTD, p as TableRow, s as TableCell, t as TableLayout, u as TableTD } from "../../Table-CNs8p8hL.mjs";
-import { t as HoverCopyableField_default } from "../../HoverCopyableField-DR575ayC.mjs";
-import { t as Pii_default } from "../../Pii-Bxh6_R4T.mjs";
-import { a as TableViewConfigurationDropdown, o as TableControls } from "../../TableControls-BkdSeQvt.mjs";
+import { n as Button, t as IconButton } from "../../IconButton-P8w0JDI5.mjs";
+import { n as DropdownMenu_default } from "../../DropdownMenu-D25WBCah.mjs";
+import { a as StickyTH, d as TableTR, f as TableTH, i as StickyTD, n as TableBody, o as TableActionTD, p as TableRow, s as TableCell, t as TableLayout, u as TableTD } from "../../Table-BfontAeY.mjs";
+import { n as Sticker } from "../../Sticker-CyGb9dEu.mjs";
+import { t as Checkbox } from "../../Checkbox-BcuiFvK7.mjs";
+import { t as Pagination_default } from "../../Pagination-BeYukNCj.mjs";
+import { t as HoverCopyableField_default } from "../../HoverCopyableField-7TWP0Y1Z.mjs";
+import { t as Pii_default } from "../../Pii-QsTrz8wn.mjs";
+import { b as TableControls, y as TableViewConfigurationDropdown } from "../../TableControls-DVTtNAPo.mjs";
 import "./types.mjs";
 import { BorderRadius, Color, Spacing } from "@persona/design-tokens";
 import styled, { css } from "styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Link } from "react-router-dom";
 import { createElement, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon, ChevronRightIcon, ImageIcon, MoreIcon, XIcon } from "@persona/icons";
 import { PlusIcon as PlusIcon$1 } from "@persona/icons/12px";
-import { Link } from "react-router-dom";
 import { kebabCase } from "lodash";
 import { createColumnHelper, flexRender, getCoreRowModel, getFilteredRowModel, getMemoOptions, getPaginationRowModel, getSortedRowModel, memo as memo$1, useReactTable } from "@tanstack/react-table";
 import { DateTime } from "luxon";
-import startCase from "lodash/fp/startCase.js";
+import startCase$1 from "lodash/fp/startCase.js";
 //#region components/DataTable/constants.ts
 function getColumnWidths(compact) {
 	return {
@@ -81,12 +81,13 @@ const FloatingActionBar = ({ selectedCount, onClearSelection, extraContent, acti
 				return /* @__PURE__ */ jsx(DropdownMenu_default, {
 					trigger,
 					align: "center",
+					portal: true,
 					children: (action.popover?.options ?? []).map((option) => /* @__PURE__ */ jsx(DropdownMenu_default.Item, {
 						id: option.value,
 						onClick: () => action.popover.onOptionSelect(option.value),
 						children: option.label
 					}, option.value))
-				});
+				}, key);
 			} else if ("icon" in action && "aria-label" in action) return /* @__PURE__ */ jsx(IconButton, {
 				size: "sm",
 				"aria-label": action["aria-label"],
@@ -232,14 +233,14 @@ const renderAsPii = (row, config) => {
 	if (!config || !row) return "";
 	const { isRedacted, piiValue, emptyText } = config;
 	const piiValueString = piiValue(row);
-	if (piiValueString == null || piiValueString.length === 0) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Paragraph, { children: emptyText }), config.subComponent?.(row)] });
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Pii_default, {
+	if (piiValueString == null || piiValueString.length === 0) return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Paragraph, { children: emptyText }), config.subComponent?.(row)] });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Pii_default, {
 		isRedacted: isRedacted(row),
 		children: piiValueString
 	}), config.subComponent?.(row)] });
 };
 const renderAsLightweightImage = (value, config) => {
-	if (value == null || value === "" || Array.isArray(value) && value.length === 0) return config?.fallback ? /* @__PURE__ */ jsx(Fragment$1, { children: config.fallback }) : /* @__PURE__ */ jsx(EmptyImageContainer, {
+	if (value == null || value === "" || Array.isArray(value) && value.length === 0) return config?.fallback ? /* @__PURE__ */ jsx(Fragment, { children: config.fallback }) : /* @__PURE__ */ jsx(EmptyImageContainer, {
 		$width: config?.width,
 		$height: config?.height,
 		"aria-label": config?.alt ?? "image",
@@ -511,7 +512,7 @@ function useTableColumns({ columns, data, compact, sort, clientSearch, clientFil
 				return columnHelper.accessor(column.accessor, columnHelperOptions);
 			}
 			return columnHelper.accessor(column, {
-				header: startCase(column),
+				header: startCase$1(column),
 				enableGlobalFilter: Boolean(clientSearch),
 				enableSorting: sort != null
 			});
@@ -571,7 +572,7 @@ function useTableColumns({ columns, data, compact, sort, clientSearch, clientFil
 			}
 		}));
 		if (hasRowActions) {
-			const emptyHeader = () => /* @__PURE__ */ jsx(Fragment$1, {});
+			const emptyHeader = () => /* @__PURE__ */ jsx(Fragment, {});
 			tableColumns.push(columnHelper.display({
 				id: "action-col",
 				enableResizing: false,
@@ -585,7 +586,7 @@ function useTableColumns({ columns, data, compact, sort, clientSearch, clientFil
 			const key = typeof column === "object" ? column.accessor : column;
 			return {
 				key,
-				label: typeof column === "object" ? typeof column.header === "string" ? column.header : key : startCase(column)
+				label: typeof column === "object" ? typeof column.header === "string" ? column.header : key : startCase$1(column)
 			};
 		})];
 	}, [
@@ -764,7 +765,7 @@ const getFilterFnName = (filterType) => {
 		default: return "equals";
 	}
 };
-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, 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, 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, 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 DEFAULT_SEARCH_PLACEHOLDER = "Search...";
 	const { NEST_SPACING, EXPAND_COLUMN_WIDTH } = getColumnWidths(compact);
 	const [columnVisibility, setColumnVisibility] = useState(() => {
@@ -1210,7 +1211,8 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 				children: [/* @__PURE__ */ jsx(StyledTableLayout, {
 					$onAddRow: !!onAddRow,
 					stickyHeader,
-					headerTR: /* @__PURE__ */ jsx(Fragment$1, { children: tableHeaderGroup.headers.map((header) => {
+					containerScrollsHorizontally: scrollsHorizontally,
+					headerTR: /* @__PURE__ */ jsx(Fragment, { children: tableHeaderGroup.headers.map((header) => {
 						const pinningStyles = getCommonPinningStyles(header.column);
 						const isPinned = pinningStyles.position === "sticky";
 						const width = header.column.columnDef.meta?.width ? `${header.column.columnDef.meta?.width}px` : void 0;
@@ -1353,14 +1355,14 @@ const DataTable = ({ data, columns, detailComponent, expandColumnVisibility = "a
 							else detailContent = rowData._details;
 							else if (detailComponent) detailContent = /* @__PURE__ */ jsx(detailComponent, { rowData });
 							if (detailContent) {
-								const detailCells = initialColumnPinning?.left?.length ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(StickyTD, {
+								const detailCells = initialColumnPinning?.left?.length ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(StickyTD, {
 									colSpan: 1,
 									left: pinnedColumnLeftOffset
 								}), /* @__PURE__ */ jsx(StickyDetailsTD, {
 									colSpan: tableHeaderGroup.headers.length - 1,
 									left: EXPAND_COLUMN_WIDTH + pinnedColumnLeftOffset,
 									children: detailContent
-								})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TableTD, { colSpan: 1 }), /* @__PURE__ */ jsx(DetailsTD, {
+								})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TableTD, { colSpan: 1 }), /* @__PURE__ */ jsx(DetailsTD, {
 									colSpan: tableHeaderGroup.headers.length - 1,
 									children: detailContent
 								})] });