npm - @persona/design-system - Versions diffs - 0.1.6 → 0.1.8 - Mend

@persona/design-system 0.1.6 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (817) hide show

package/dist/TableControls-B7QEAzru.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"TableControls-B7QEAzru.cjs","names":["Label","Spacing","Input","isActive","isFocused","isHovered","isNotDisabled","noop","SmallSearchIcon","SearchIcon","InputGroup","Tooltip","HStack","Spacing","Paragraph","Button","SearchIcon","FilterIcon","IconButton","Tab","MenuList","TabBar","Spacing","StyledTab","MoreIcon","Popover","Stack","Input","MenuItem","CopyIcon","RotateCcwIcon","SaveIcon","TrashIcon","LockedIcon","Button","CirclePlusIcon","HStack","FilterIcon","Stack","Spacing","DragIcon","Color","Spacing","Card","Button","SettingsIcon","Tooltip","Popover","Z_INDICES","Fuse","Label","Spacer","Paragraph","DragDropContext","Droppable","Draggable","Toggle"],"sources":["../components/DataTable/FormControlLabel/FormControlLabel.ts","../components/DataTable/SearchInput/SearchInput.tsx","../components/DataTable/TableControls/CompactBar.tsx","../components/DataTable/TableControls/utils/positioning.ts","../components/DataTable/TableControls/ControlBar.tsx","../components/DataTable/TableControls/TableControls.tsx","../components/DataTable/dnd/StyledIconDrag.tsx","../components/DataTable/dnd/utils.ts","../components/DataTable/TableControls/TableViewConfigurationDropdown.tsx","../components/DataTable/TableControls/TableControlsContext.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { Label } from 'design-system/components/Text';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst FormControlLabel = styled(Label).attrs(() => ({ size: 'md', weight: 'bold' }))<{\n isDisabled?: boolean;\n}>`\n margin-bottom: ${Spacing[2]};\n transition: ${TransitionDuration.Fast};\n display: inline-block;\n\n ${({ theme, isDisabled }) => css`\n color: ${isDisabled ? theme.color.text.disabled : theme.color.text.primary};\n `}\n`;\n\nexport default FormControlLabel;\n","import { noop } from 'lodash';\nimport {\n type ChangeEvent,\n type FocusEventHandler,\n type ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { SearchIcon } from '@persona/icons';\nimport { SearchIcon as SmallSearchIcon } from '@persona/icons/12px';\nimport FormControlLabel from 'design-system/components/DataTable/FormControlLabel/FormControlLabel';\nimport Input, { InputGroup } from 'design-system/components/Input';\nimport Tooltip from 'design-system/components/Tooltip';\nimport { isActive, isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport type { InputSizes } from 'design-system/mixins/input';\n\nconst SearchBar = styled.div``;\n\ninterface StyledInputProps {\n flattenDisplay: boolean;\n}\n\nconst StyledInput = styled(Input)<StyledInputProps>`\n ${({ theme, flattenDisplay }) =>\n flattenDisplay &&\n css`\n border-width: 0px;\n\n &${isActive}, &${isFocused}, &${isHovered}&${isNotDisabled}, &${isHovered}&${isFocused} {\n border-color: ${theme.color.border.input};\n box-shadow: none;\n }\n `}\n`;\n\nexport interface OmniSearchProps {\n className?: string;\n title?: ReactNode;\n handleInput: (value: string) => void;\n id?: string;\n value: string;\n placeholder: string;\n dataTest?: string;\n autoFocus?: boolean;\n useClearIcon?: boolean;\n leftIcon?: ReactNode;\n handleOnFocus?: () => void;\n onBlur?: FocusEventHandler<HTMLInputElement>;\n disabled?: boolean;\n disabledTooltip?: string;\n flattenDisplay?: boolean;\n size?: InputSizes;\n maxLength?: number;\n}\n\nconst SearchInput = ({\n className,\n title = 'Search',\n handleInput,\n handleOnFocus = noop,\n onBlur = noop,\n id,\n value,\n placeholder,\n dataTest,\n autoFocus,\n useClearIcon = false,\n disabled = false,\n disabledTooltip,\n size = 'md',\n leftIcon = size === 'sm' ? <SmallSearchIcon /> : <SearchIcon />,\n flattenDisplay = false,\n maxLength,\n}: OmniSearchProps) => {\n // We duplicate state and track it separately here. This allows us to:\n // 1. immediately update the <input/> value\n // 2. do a debounced update of the actual state\n // We expect the callback passed to this input to be a debounced that updates\n // props.value.\n const [innerValue, setInnerValue] = useState<string>(value);\n const handleChange = useCallback(\n ({ target }: ChangeEvent<HTMLInputElement>): void => {\n setInnerValue(target.value);\n handleInput(target.value);\n },\n [handleInput, setInnerValue],\n );\n\n useEffect(() => {\n setInnerValue(value);\n }, [value]);\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleClear = useCallback(() => {\n setInnerValue('');\n handleInput('');\n handleOnFocus();\n inputRef.current?.focus();\n }, [handleInput, handleOnFocus, inputRef, setInnerValue]);\n\n const canClear = useClearIcon && !!innerValue;\n\n const searchBar = (\n <SearchBar className={className} data-test={dataTest}>\n {title != null && <FormControlLabel htmlFor={id}>{title}</FormControlLabel>}\n <InputGroup\n leftIcon={leftIcon}\n onClear={\n canClear\n ? (e) => {\n e.preventDefault();\n e.stopPropagation();\n handleClear();\n }\n : undefined\n }\n size={size}\n >\n <StyledInput\n id={id}\n onChange={handleChange}\n placeholder={placeholder}\n value={innerValue}\n autoFocus={autoFocus}\n ref={inputRef}\n onFocus={handleOnFocus}\n onBlur={onBlur}\n disabled={disabled}\n maxLength={maxLength}\n flattenDisplay={flattenDisplay}\n />\n </InputGroup>\n </SearchBar>\n );\n\n // The disabled <input> doesn't emit hover events, but the SearchBar wrapper does, so the tooltip\n // surfaces the reason the search is unavailable without taking up layout room.\n return disabled && disabledTooltip ? (\n <Tooltip trigger={searchBar} side='top'>\n {disabledTooltip}\n </Tooltip>\n ) : (\n searchBar\n );\n};\n\nexport default SearchInput;\n","import { useState } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { FilterIcon, SearchIcon } from '@persona/icons';\nimport Button from 'design-system/components/Button';\nimport SearchInput from 'design-system/components/DataTable/SearchInput';\nimport { HStack } from 'design-system/components/Stack';\nimport { Paragraph } from 'design-system/components/Text';\n\nimport type { ControlBarProps } from './ControlBar';\n\nexport const DataTableCompactBar = styled(HStack)`\n border-bottom: 1px solid ${({ theme }) => theme.color.border.secondary};\n padding-bottom: ${Spacing[1]};\n`;\n\nconst CompactSearchInput = styled(SearchInput)<{ $autoExpand: boolean }>`\n width: ${({ $autoExpand }) => ($autoExpand ? '100%' : '240px')};\n margin-right: ${Spacing[1]};\n`;\n\ntype CompactBarProps = Pick<\n ControlBarProps,\n | 'title'\n | 'searchProps'\n | 'showFilters'\n | 'setShowFilters'\n | 'filtersId'\n | 'isLoading'\n | 'propertiesButton'\n | 'tableActions'\n | 'data-tour-target'\n | 'filterPanel'\n>;\n\n/**\n * Compact variant of the ControlBar.\n * Not intended to be used by itself.\n *\n * Tested using the ControlBar specs.\n *\n * @see ControlBar.tsx\n * @see ControlBar.spec.tsx\n */\nconst CompactBar: React.FC<CompactBarProps> = ({\n title,\n searchProps,\n showFilters,\n setShowFilters,\n filtersId,\n isLoading,\n propertiesButton,\n tableActions,\n 'data-tour-target': dataTourTarget,\n filterPanel,\n}) => {\n const autoExpandSearch = !title;\n const [showSearch, setShowSearch] = useState<boolean>(autoExpandSearch);\n\n return (\n <>\n <DataTableCompactBar data-tour-target={dataTourTarget} justify='space-between' align='center'>\n {title && (\n <Paragraph size='md' weight='bold' color='primary'>\n {title}\n </Paragraph>\n )}\n\n <HStack\n spacing={Spacing[1]}\n align='center'\n justify='right'\n style={autoExpandSearch ? { width: '100%' } : { marginLeft: 'auto' }}\n >\n <HStack spacing={Spacing[1]} align='center' style={{ width: '100%' }}>\n {searchProps &&\n (showSearch ? (\n <CompactSearchInput\n title={null}\n size='sm'\n $autoExpand={autoExpandSearch}\n autoFocus={!autoExpandSearch}\n onBlur={\n autoExpandSearch\n ? undefined\n : () => {\n if (!searchProps.value) {\n setShowSearch(false);\n }\n }\n }\n useClearIcon\n {...searchProps}\n />\n ) : (\n <Button\n id='table-controls__compact-search-toggle'\n variant='text'\n width='icon'\n size='sm'\n aria-label='Show search bar'\n onClick={() => setShowSearch(true)}\n >\n <SearchIcon />\n </Button>\n ))}\n\n {setShowFilters && (\n <Button\n id='table-controls__view-tab-filters'\n variant='text'\n onClick={() => setShowFilters?.(!showFilters)}\n aria-label={showFilters ? 'Hide filters' : 'Show filters'}\n aria-expanded={showFilters}\n aria-controls={filtersId}\n disabled={isLoading}\n active={showFilters}\n width='icon'\n size='sm'\n >\n <FilterIcon />\n </Button>\n )}\n\n {propertiesButton}\n </HStack>\n\n {tableActions && Array.isArray(tableActions)\n ? tableActions.map((action) => (\n <Button\n id={`table-controls__compact-action-${action.label.toLowerCase().replace(/\\s+/g, '-')}`}\n key={action.label}\n variant='basic'\n size='sm'\n width='auto'\n onClick={action.onClick}\n >\n {action.label}\n </Button>\n ))\n : tableActions}\n </HStack>\n </DataTableCompactBar>\n {showFilters && filterPanel}\n </>\n );\n};\n\nexport default CompactBar;\n","/**\n * Check if a child rect is contained within a parent rect.\n * @param parent - The parent rect.\n * @param child - The child rect.\n * @returns True if the child rect is contained within the parent rect, false otherwise.\n */\nexport const rectContainsRect = (parent: DOMRect, child: DOMRect) => {\n return (\n child.top >= parent.top &&\n child.bottom <= parent.bottom &&\n child.left >= parent.left &&\n child.right <= parent.right\n );\n};\n","import {\n type CSSProperties,\n type FC,\n forwardRef,\n useCallback,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport styled, { createGlobalStyle } from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport {\n CirclePlusIcon,\n CopyIcon,\n FilterIcon,\n MoreIcon,\n RotateCcwIcon,\n SaveIcon,\n TrashIcon,\n} from '@persona/icons';\nimport { LockedIcon } from '@persona/icons/12px';\nimport Button, { IconButton } from 'design-system/components/Button';\nimport SearchInput, { type OmniSearchProps } from 'design-system/components/DataTable/SearchInput';\nimport Input from 'design-system/components/Input';\nimport { MenuItem, MenuList } from 'design-system/components/Menu';\nimport Popover from 'design-system/components/Popover';\nimport Stack, { HStack } from 'design-system/components/Stack';\nimport TabBar, { StyledTab, Tab } from 'design-system/components/TabBar';\n\nimport CompactBar from './CompactBar';\nimport { rectContainsRect } from './utils/positioning';\n\nconst TAB_ID_PREFIX = 'table-controls__view-tab_';\nconst OVERFLOW_TAB_ID_PREFIX = 'table-controls__view-tab-overflow_';\n\nfunction enterProxiesClick(e: React.KeyboardEvent<HTMLDivElement>) {\n if (e.key === 'Enter') {\n e.target.dispatchEvent(new Event('click', { bubbles: true }));\n }\n}\n\ninterface TableViewConfig {\n id: string;\n name: string;\n}\n\ninterface EventHandlers {\n /**\n * Called when the duplicate view button is clicked. If not provided, the duplicate view button will not be displayed.\n *\n * @returns Promise<{ id: string }> - The id of the newly created view\n */\n onDuplicateView?: (viewId: string) => Promise<{ id: string } | void>;\n /**\n * Called when the delete view button is clicked. If not provided, the delete view button will not be displayed.\n */\n onDeleteView?: (viewId: string) => Promise<void>;\n /**\n * Called when a view tab is selected\n */\n onSelectView?: (viewId: string | null) => void;\n /**\n * Called when the reset view button is clicked. If not provided, the reset view button will not be displayed.\n */\n onResetCurrentView?: () => void;\n /**\n * Called when the save view button is clicked. If not provided, the save view button will not be displayed.\n */\n onSaveView?: () => Promise<void>;\n /**\n * Called when the add view button is clicked. If not provided, the add view button will not be displayed.\n *\n * @returns Promise<{ id: string }> - The id of the newly created view\n */\n onAddView?: () => Promise<{ id: string } | void>;\n /**\n * Called when the view name is changed. If not provided, the view name will not be editable.\n */\n onViewNameChange?: (viewId: string, name: string) => void;\n /**\n * Called when the selection is cleared\n */\n onClearSelection?: () => void;\n}\n\nexport interface ControlBarProps extends EventHandlers {\n /**\n * Preset views that are not editable by the user.\n */\n presetViews?: TableViewConfig[];\n /**\n * Table view tabs\n */\n views?: TableViewConfig[];\n /**\n * Current table view id\n */\n currentView?: string | null;\n /**\n * Whether the filters have been changed and can be saved\n */\n isViewDirty?: boolean;\n /**\n * Whether the user has permission to edit views\n */\n canEditViews?: boolean;\n /**\n * Whether to show filters\n */\n showFilters?: boolean;\n /**\n * Called when the filters are toggled\n */\n setShowFilters?: (show: boolean) => void;\n /**\n * Search props\n */\n searchProps?: Omit<OmniSearchProps, 'size'>;\n /**\n * The id of the filters container\n */\n filtersId?: string;\n /**\n * Properties button\n */\n propertiesButton?: React.ReactNode;\n /**\n * Table actions\n */\n tableActions?:\n | React.ReactNode\n | { label: string; onClick: React.MouseEventHandler<HTMLButtonElement> }[];\n /**\n * Whether the table is loading\n */\n isLoading?: boolean;\n /**\n * Whether to show the views bar\n */\n showViews?: boolean;\n /**\n * The ids of the selected rows\n */\n selectedRows?: string[];\n /**\n * Bulk actions to display when there are selected rows.\n */\n bulkActions?: (\n | {\n label: string;\n icon?: React.ReactNode;\n disabled?: boolean;\n onClick: (selectedRows: string[], clearSelection: () => void) => void | Promise<void>;\n }\n | {\n 'aria-label': string;\n icon: React.ReactNode;\n disabled?: boolean;\n onClick: (selectedRows: string[], clearSelection: () => void) => void | Promise<void>;\n }\n )[];\n /**\n * The title of the table\n */\n title?: string;\n /**\n * The data-tour-target of the table\n */\n 'data-tour-target'?: string;\n /**\n * Whether to use compact spacing and styling.\n * The compact variant does not support views.\n */\n compact?: boolean;\n\n /** Use this to handle errors that occur in the control bar.\n * This can be helpful if you want to trigger a toast message.\n */\n onError?: (error: Error) => void;\n\n /**\n * Content to render in the filter panel area below the controls row.\n * Rendered when showFilters is true.\n */\n filterPanel?: React.ReactNode;\n}\n\nconst AddViewButton = styled(IconButton)`\n color: ${({ theme }) => theme.color.text.secondary};\n`;\n\nconst LockedTab = styled(Tab)`\n svg {\n height: 12px;\n width: 12px;\n }\n`;\n\nconst OverflowMenuList = styled(MenuList)`\n max-height: 300px;\n overflow: auto;\n`;\n\nconst ExpandedSearchInput = styled(SearchInput)`\n flex-basis: 440px;\n flex-grow: 1;\n`;\n\nconst ViewsBar = styled(TabBar)<{ $isAddingView: boolean }>`\n ${AddViewButton} {\n /* Shows button when view is in progress of being added */\n opacity: ${({ $isAddingView }) => ($isAddingView ? 1 : 0)};\n }\n\n &:hover,\n &:hover:focus,\n &:focus-within {\n ${AddViewButton} {\n opacity: 1;\n }\n }\n`;\n\nconst TabOverflowContainer = styled.div`\n display: flex;\n align-items: center;\n gap: ${Spacing[2]};\n position: absolute;\n height: 32px;\n`;\n\n/**\n * Base props for the SavedViewTab component\n * These are the props that must be passed to TabOverflow so it can render a SavedViewTab\n */\ninterface BaseSavedViewTabProps extends EventHandlers {\n canEditViews: boolean;\n isViewDirty: boolean;\n showTabContextMenu: boolean;\n setShowTabContextMenu: (show: boolean) => void;\n handleNameChange: (view: TableViewConfig, newName: string) => void;\n}\n\nconst SavedViewTab = ({\n view,\n selected,\n tabIdPrefix = TAB_ID_PREFIX,\n canEditViews,\n handleNameChange,\n onDuplicateView,\n onDeleteView,\n onSelectView,\n onResetCurrentView,\n onSaveView,\n isViewDirty,\n showTabContextMenu,\n setShowTabContextMenu,\n className,\n ...rest\n}: BaseSavedViewTabProps & {\n tabIdPrefix?: string;\n view: TableViewConfig;\n selected: boolean;\n className?: string;\n}) => {\n const inputRef = useRef<HTMLInputElement>(null);\n\n const tab = (\n <StyledTab\n id={`${tabIdPrefix}${view.id}`}\n selected={selected}\n aria-selected={selected}\n role='tab'\n onClick={!selected ? () => onSelectView?.(view.id) : undefined}\n suffixIcon={selected && canEditViews ? <MoreIcon /> : undefined}\n className={className}\n {...rest}\n >\n {view.name}\n </StyledTab>\n );\n\n if (canEditViews && selected) {\n return (\n <Popover\n trigger={tab}\n open={showTabContextMenu}\n onOpenChange={(open) => {\n if (selected) {\n setShowTabContextMenu(open);\n }\n if (!open && inputRef.current) {\n handleNameChange?.(view, inputRef.current.value);\n }\n }}\n contentProps={{ align: 'start', padding: Spacing[2] }}\n >\n <Stack spacing={Spacing[3]}>\n <Input\n defaultValue={view.name}\n onBlur={(e) => handleNameChange?.(view, e.currentTarget.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n handleNameChange?.(view, e.currentTarget.value);\n }\n }}\n disabled={!handleNameChange}\n ref={inputRef}\n />\n <MenuList padding={Spacing[0]}>\n {onDuplicateView && (\n <MenuItem\n id='table-controls__view__menu-duplicate'\n prefixIcon={<CopyIcon />}\n onClick={async () => {\n const newTableView = await onDuplicateView(view.id);\n if (newTableView) {\n const { id } = newTableView;\n if (view.id !== id) {\n onSelectView?.(id);\n setShowTabContextMenu(true);\n }\n }\n }}\n onKeyDown={enterProxiesClick}\n >\n Duplicate\n </MenuItem>\n )}\n {canEditViews && onResetCurrentView && (\n <MenuItem\n id='table-controls__view__menu-reset'\n prefixIcon={<RotateCcwIcon />}\n onClick={onResetCurrentView}\n onKeyDown={enterProxiesClick}\n >\n Reset\n </MenuItem>\n )}\n {canEditViews && onSaveView && (\n <MenuItem\n id='table-controls__view__menu-save'\n prefixIcon={<SaveIcon />}\n disabled={!isViewDirty}\n onClick={() => {\n void onSaveView();\n setShowTabContextMenu(false);\n }}\n onKeyDown={enterProxiesClick}\n >\n Save\n </MenuItem>\n )}\n {onDeleteView && (\n <MenuItem\n id='table-controls__view__menu-delete'\n prefixIcon={<TrashIcon />}\n onClick={async () => {\n await onDeleteView(view.id);\n setShowTabContextMenu(false);\n }}\n onKeyDown={enterProxiesClick}\n >\n Delete\n </MenuItem>\n )}\n </MenuList>\n </Stack>\n </Popover>\n );\n }\n\n return tab;\n};\n\ninterface LockedViewTabProps {\n id: string;\n /**\n * Whether the tab is selected. If true, the tab will not be clickable.\n */\n selected?: boolean;\n /**\n * Called when the tab is clicked. If the tab is selected, the click will be ignored.\n */\n onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n children: React.ReactNode;\n}\n\n/**\n * A tab that is locked and does not support editing or actions.\n */\nconst LockedViewTab = ({ id, selected, onClick, children, ...props }: LockedViewTabProps) => {\n return (\n <LockedTab\n id={id}\n selected={selected}\n onClick={selected ? undefined : onClick}\n suffixIcon={<LockedIcon />}\n {...props}\n >\n {children}\n </LockedTab>\n );\n};\n\nconst OverflowSavedViewTab = styled(SavedViewTab)`\n margin-left: ${Spacing[2]};\n`;\n\nconst TabOverflow = forwardRef<\n HTMLDivElement,\n BaseSavedViewTabProps & {\n hiddenViews: TableViewConfig[];\n currentView: string | null | undefined;\n handleAddView: (() => void) | null;\n lastVisibleViewElement: HTMLElement | null;\n }\n>(function TabOverflow(\n {\n hiddenViews,\n currentView: currentViewId,\n handleAddView,\n onSelectView,\n canEditViews,\n lastVisibleViewElement,\n ...rest\n },\n ref,\n) {\n const [filter, setFilter] = useState('');\n const [openPopover, setOpenPopover] = useState<boolean>(false);\n\n const currentView = useMemo(() => {\n return hiddenViews.find((view) => view.id === currentViewId);\n }, [currentViewId, hiddenViews]);\n\n const filteredViews = useMemo(\n () =>\n hiddenViews.filter(\n (view) =>\n view.name.toLowerCase().includes(filter.toLowerCase()) && view.id !== currentView?.id,\n ),\n [hiddenViews, filter, currentView],\n );\n\n const overflowContainerStyle = useMemo<CSSProperties | undefined>(() => {\n if (!lastVisibleViewElement) {\n return undefined;\n }\n\n return { left: lastVisibleViewElement.offsetLeft + lastVisibleViewElement.offsetWidth + 8 };\n }, [lastVisibleViewElement]);\n\n return (\n <TabOverflowContainer ref={ref} style={overflowContainerStyle}>\n {currentView && (\n <OverflowSavedViewTab\n view={currentView}\n canEditViews={canEditViews}\n selected={true}\n tabIdPrefix={OVERFLOW_TAB_ID_PREFIX}\n {...rest}\n />\n )}\n {/* Edge case when the current view is the first hidden view */}\n {hiddenViews.length === 1 && currentView && hiddenViews[0].id !== currentView.id ? null : (\n <Popover\n trigger={\n <Button variant='basic' size='sm' width='auto'>\n {currentView ? hiddenViews.length - 1 : hiddenViews.length} more…\n </Button>\n }\n contentProps={{ align: 'start', padding: Spacing[2] }}\n open={openPopover}\n onOpenChange={(open) => {\n if (!open) {\n setFilter('');\n }\n setOpenPopover(open);\n }}\n >\n <Input\n value={filter}\n onChange={(e) => setFilter(e.target.value)}\n placeholder='Search for a view...'\n />\n <OverflowMenuList padding={Spacing[0]}>\n {filteredViews.map((view) => {\n return (\n <MenuItem\n key={view.id}\n id={`${OVERFLOW_TAB_ID_PREFIX}${view.id}`}\n onClick={() => {\n onSelectView?.(view.id);\n setOpenPopover(false);\n }}\n onKeyDown={enterProxiesClick}\n >\n {view.name}\n </MenuItem>\n );\n })}\n </OverflowMenuList>\n </Popover>\n )}\n {canEditViews && handleAddView && (\n <AddViewButton\n id={`${OVERFLOW_TAB_ID_PREFIX}overflow-new`}\n onClick={handleAddView}\n size='md'\n aria-label='Add new view'\n >\n <CirclePlusIcon />\n </AddViewButton>\n )}\n </TabOverflowContainer>\n );\n});\n\n/**\n * Force the add button to be visible when the product tour is active\n */\nconst ProductTourStyles = createGlobalStyle`\n body:has(#react-joyride-portal) {\n [data-tour-target='saved-views-add-button'] {\n opacity: 1;\n }\n }\n`;\n\nconst ControlBar: FC<ControlBarProps> = ({\n presetViews,\n currentView,\n onSelectView,\n views,\n onAddView,\n onDuplicateView,\n onDeleteView,\n onViewNameChange,\n onSaveView,\n isViewDirty,\n canEditViews,\n showFilters,\n setShowFilters,\n searchProps,\n filtersId,\n propertiesButton,\n tableActions,\n isLoading,\n showViews,\n selectedRows = [],\n bulkActions,\n onResetCurrentView,\n onClearSelection,\n title,\n 'data-tour-target': dataTourTarget,\n compact,\n onError,\n filterPanel,\n}) => {\n const tabListRef = useRef<HTMLDivElement>(null);\n const tabOverflowRef = useRef<HTMLDivElement>(null);\n // The same could be done to get the visible views to only render them but that causes other jittery problems\n const [hiddenViews, setHiddenViews] = useState<TableViewConfig[]>([]);\n const [showTabContextMenu, setShowTabContextMenu] = useState<boolean>(false);\n const [isAddingView, setIsAddingView] = useState<boolean>(false);\n const [lastVisibleViewElement, setLastVisibleViewElement] = useState<HTMLElement | null>(null);\n const [tabOverflowWidth, setTabOverflowWidth] = useState<number | null>(null);\n\n const onResize = useCallback(() => {\n if (!tabListRef.current) {\n return;\n }\n\n const containerRect = tabListRef.current.getBoundingClientRect();\n const tabListContainer = tabListRef.current;\n const tabElements = Array.from(\n tabListContainer.querySelectorAll('[data-tab-view]'),\n ) as HTMLElement[];\n\n // Skip if the last element is not overflowing\n if (\n tabElements.length === 0 ||\n rectContainsRect(containerRect, tabElements[tabElements.length - 1].getBoundingClientRect())\n ) {\n setHiddenViews([]);\n return;\n }\n\n // Find first element that overflows the container\n const firstHiddenIndex = tabElements.findIndex(\n (el) => !rectContainsRect(containerRect, el.getBoundingClientRect()),\n );\n\n if (firstHiddenIndex === -1) {\n setLastVisibleViewElement(null);\n } else {\n const lastVisibleViewElement = tabElements[firstHiddenIndex - 1];\n if (lastVisibleViewElement) {\n setLastVisibleViewElement(lastVisibleViewElement);\n }\n }\n\n const newHiddenViews = firstHiddenIndex === -1 ? [] : views?.slice(firstHiddenIndex);\n setHiddenViews(newHiddenViews || []);\n\n const tabOverflowWidth = tabOverflowRef.current?.getBoundingClientRect().width;\n if (tabOverflowWidth) {\n setTabOverflowWidth(tabOverflowWidth);\n }\n }, [setHiddenViews, views]);\n\n // Set up ResizeObserver to watch for container size changes\n useLayoutEffect(() => {\n if (!showViews || !tabListRef.current) {\n return;\n }\n\n const resizeObserver = new ResizeObserver(() => {\n onResize();\n });\n\n resizeObserver.observe(tabListRef.current);\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [onResize, showViews]);\n\n // Update hidden tabs when views change. This needs to fire when we initially load the page, then again when the views load, and also when a view is added or removed\n useLayoutEffect(() => {\n if (showViews) {\n onResize();\n }\n }, [onResize, showViews, views]);\n\n const currentViewHidden = useMemo(() => {\n if (currentView) {\n return !!hiddenViews.find((view) => view.id === currentView);\n }\n return false;\n }, [currentView, hiddenViews]);\n\n const handleAddView = async () => {\n try {\n setIsAddingView(true);\n if (onAddView) {\n const view = await onAddView();\n\n // Occurs if there is an error adding the view\n if (!view || !view.id) {\n return;\n }\n\n if (currentView !== view.id) {\n onSelectView?.(view.id);\n }\n\n setShowTabContextMenu(true);\n }\n } catch {\n onError?.(new Error('Error adding view'));\n } finally {\n setIsAddingView(false);\n }\n };\n\n const handleNameChange = (view: TableViewConfig, newName: string) => {\n if (canEditViews && view.name !== newName) {\n onViewNameChange?.(view.id, newName);\n }\n };\n\n // Compact variant with simplified layout\n if (compact) {\n // todo(joseph): add bulk actions\n return (\n <CompactBar\n data-tour-target={dataTourTarget}\n title={title}\n searchProps={searchProps}\n showFilters={showFilters}\n setShowFilters={setShowFilters}\n filtersId={filtersId}\n isLoading={isLoading}\n propertiesButton={propertiesButton}\n tableActions={tableActions}\n filterPanel={filterPanel}\n />\n );\n }\n\n // Generate persistent bulk action buttons\n const bulkActionButtons = bulkActions?.map((action, index) => {\n const key = 'label' in action ? action.label : `action-${index}`;\n const isDisabled = selectedRows.length === 0 || action.disabled === true;\n const selectedCount = selectedRows.length;\n\n const clearSelection = () => {\n onClearSelection?.();\n };\n\n if ('icon' in action && 'aria-label' in action) {\n // Icon-only action\n return (\n <IconButton\n key={key}\n size='sm'\n aria-label={action['aria-label']}\n onClick={async () => {\n await action.onClick(selectedRows, clearSelection);\n }}\n disabled={isDisabled}\n >\n {action.icon}\n </IconButton>\n );\n }\n\n // Append count to label if rows are selected\n const displayLabel =\n 'label' in action && selectedCount > 0\n ? `${action.label} (${selectedCount})`\n : 'label' in action\n ? action.label\n : '';\n\n return (\n <Button\n id={`table-controls__view-tab-bulk-action-${index}`}\n variant='basic'\n size='sm'\n width='auto'\n key={key}\n onClick={async () => {\n await action.onClick(selectedRows, clearSelection);\n }}\n disabled={isDisabled}\n >\n {displayLabel}\n </Button>\n );\n });\n\n const showViewsBar =\n title || showViews || (canEditViews && onSaveView) || tableActions || bulkActions;\n\n return (\n <>\n <ProductTourStyles />\n {showViewsBar && (\n <ViewsBar\n ref={tabListRef}\n title={title}\n maxTabChars={25}\n $isAddingView={isAddingView}\n data-tour-target={dataTourTarget}\n actions={\n <HStack\n spacing={Spacing[3]}\n align='center'\n style={tabOverflowWidth ? { paddingLeft: `${tabOverflowWidth + 16}px` } : undefined}\n >\n {canEditViews && onSaveView && (\n <Button\n id='table-controls__view-tab-save'\n onClick={onSaveView}\n aria-label='Save current view'\n disabled={!isViewDirty || isLoading}\n size='sm'\n variant='basic'\n width='auto'\n data-tour-target='saved-views-save-button'\n >\n Save view\n </Button>\n )}\n {bulkActionButtons}\n {tableActions}\n </HStack>\n }\n >\n {showViews && (\n <>\n <LockedViewTab\n id={`${TAB_ID_PREFIX}default`}\n selected={!currentView}\n onClick={() => onSelectView?.(null)}\n data-tour-target='saved-views-default-view'\n >\n Default view\n </LockedViewTab>\n {presetViews?.map((view) => {\n const selected = view.id === currentView;\n return (\n <LockedViewTab\n key={view.id}\n id={`${TAB_ID_PREFIX}preset-${view.id}`}\n selected={selected}\n onClick={() => onSelectView?.(view.id)}\n >\n {view.name}\n </LockedViewTab>\n );\n })}\n {views?.map((view) => {\n return (\n <SavedViewTab\n key={view.id}\n view={view}\n canEditViews={canEditViews ?? false}\n handleNameChange={handleNameChange}\n onDuplicateView={onDuplicateView}\n onDeleteView={onDeleteView}\n onSelectView={onSelectView}\n onResetCurrentView={onResetCurrentView}\n onSaveView={onSaveView}\n isViewDirty={isViewDirty ?? false}\n selected={view.id === currentView}\n showTabContextMenu={showTabContextMenu && !currentViewHidden}\n setShowTabContextMenu={setShowTabContextMenu}\n data-tab-view\n />\n );\n })}\n {canEditViews && onAddView && (\n <AddViewButton\n id='table-controls__view-tab-new'\n size='md'\n onClick={handleAddView}\n aria-label='Add new view'\n data-tour-target='saved-views-add-button'\n >\n <CirclePlusIcon />\n </AddViewButton>\n )}\n {hiddenViews.length > 0 && (\n <TabOverflow\n ref={tabOverflowRef}\n hiddenViews={hiddenViews}\n currentView={currentView}\n onSelectView={onSelectView}\n canEditViews={canEditViews ?? false}\n handleAddView={onAddView ? handleAddView : null}\n handleNameChange={handleNameChange}\n onDuplicateView={onDuplicateView}\n onDeleteView={onDeleteView}\n onResetCurrentView={onResetCurrentView}\n onSaveView={onSaveView}\n isViewDirty={isViewDirty ?? false}\n showTabContextMenu={showTabContextMenu && currentViewHidden}\n setShowTabContextMenu={setShowTabContextMenu}\n lastVisibleViewElement={lastVisibleViewElement}\n />\n )}\n </>\n )}\n </ViewsBar>\n )}\n <HStack align='center' spacing={Spacing[2]} justify='right'>\n {searchProps && (\n <ExpandedSearchInput title={null} useClearIcon {...searchProps} size='md' />\n )}\n {setShowFilters && (\n <Button\n id='table-controls__view-tab-filters'\n variant='basic'\n onClick={() => setShowFilters?.(!showFilters)}\n aria-label={showFilters ? 'Hide filters' : 'Show filters'}\n aria-expanded={showFilters}\n aria-controls={filtersId}\n disabled={isLoading}\n active={showFilters}\n width='icon'\n size='md'\n data-tour-target='table-filters-toggle-button'\n >\n <FilterIcon />\n </Button>\n )}\n {propertiesButton}\n </HStack>\n {showFilters && filterPanel}\n </>\n );\n};\n\nexport default ControlBar;\n","import { type ReactNode, useMemo, useState } from 'react';\nimport { useId } from 'react-aria';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport {\n ControlBar,\n TableViewConfigurationDropdown,\n type ControlBarProps,\n} from 'design-system/components/DataTable/TableControls';\nimport Stack from 'design-system/components/Stack';\n\nimport type { AttributeColumn } from './types';\n\nexport interface TableControlsProps extends ControlBarProps {\n defaultShowFilters?: boolean;\n className?: string;\n tableActions?: ReactNode;\n propertiesButton?: ReactNode;\n isLoading?: boolean;\n\n /**\n * Whether to show filters always. If true, the filter row toggle button will not be rendered.\n */\n showFiltersAlways?: boolean;\n\n /**\n * Whether to display table views tab bar\n */\n showViews?: boolean;\n\n /**\n * Whether to use compact spacing and styling.\n * The compact variant does not support views.\n */\n compact?: boolean;\n\n /**\n * Column configuration options for the table.\n * If provided, displays a settings button to configure visible columns.\n */\n columnConfigurationProps?: {\n columnConfiguration: AttributeColumn[];\n attributeOptions: AttributeColumn[];\n updateColumnConfiguration: (newConfiguration: AttributeColumn[]) => void;\n };\n}\n\nconst TableControls = ({\n filterPanel,\n searchProps,\n defaultShowFilters,\n showFilters: controlledShowFilters,\n setShowFilters: controlledSetShowFilters,\n className,\n tableActions,\n propertiesButton,\n isLoading,\n showViews,\n canEditViews,\n onSelectView,\n views,\n currentView,\n onAddView,\n onViewNameChange,\n onDuplicateView,\n onDeleteView,\n onSaveView,\n isViewDirty,\n selectedRows,\n bulkActions,\n onClearSelection,\n title,\n presetViews,\n compact,\n columnConfigurationProps,\n showFiltersAlways = false,\n onError,\n 'data-tour-target': dataTourTarget,\n}: TableControlsProps) => {\n const filtersId = useId();\n const [internalShowFilters, internalSetShowFilters] = useState(defaultShowFilters ?? false);\n const showFilters = controlledShowFilters != null ? controlledShowFilters : internalShowFilters;\n const setShowFilters =\n controlledSetShowFilters != null ? controlledSetShowFilters : internalSetShowFilters;\n\n // Create enhanced properties button that includes column configuration if provided\n const enhancedPropertiesButton = useMemo(() => {\n if (!columnConfigurationProps && !propertiesButton) {\n return undefined;\n }\n\n const elements = [];\n\n // Add original properties button if provided\n if (propertiesButton) {\n elements.push(propertiesButton);\n }\n\n // Add column configuration dropdown if provided\n if (columnConfigurationProps) {\n elements.push(\n <TableViewConfigurationDropdown\n key='column-config'\n disabled={false}\n {...columnConfigurationProps}\n />,\n );\n }\n\n // Return single element or fragment with multiple elements\n if (elements.length === 1) {\n return elements[0];\n }\n\n return <StyledEnhancedPropertiesButton>{elements}</StyledEnhancedPropertiesButton>;\n }, [columnConfigurationProps, propertiesButton]);\n\n return (\n <Container className={className}>\n <ControlBar\n showViews={compact ? false : showViews}\n views={compact ? undefined : views}\n onSelectView={compact ? undefined : onSelectView}\n currentView={compact ? undefined : currentView}\n onAddView={compact ? undefined : onAddView}\n onDeleteView={compact ? undefined : onDeleteView}\n onDuplicateView={compact ? undefined : onDuplicateView}\n onViewNameChange={compact ? undefined : onViewNameChange}\n onSaveView={compact ? undefined : onSaveView}\n isViewDirty={isViewDirty}\n canEditViews={compact ? false : canEditViews}\n showFilters={showFilters}\n setShowFilters={filterPanel != null && !showFiltersAlways ? setShowFilters : undefined}\n filtersId={filtersId}\n searchProps={searchProps}\n propertiesButton={enhancedPropertiesButton}\n tableActions={tableActions}\n isLoading={isLoading}\n selectedRows={selectedRows}\n bulkActions={bulkActions}\n onClearSelection={onClearSelection}\n title={title}\n data-tour-target={dataTourTarget}\n presetViews={compact ? undefined : presetViews}\n compact={compact}\n onError={onError}\n filterPanel={filterPanel}\n />\n </Container>\n );\n};\n\nexport default TableControls;\n\nconst Container = styled(Stack)`\n margin-bottom: ${Spacing[2]};\n`;\n\nconst StyledEnhancedPropertiesButton = styled.div`\n display: flex;\n gap: ${Spacing[1]};\n`;\n","import styled, { css } from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\nimport { DragIcon } from '@persona/icons/24px';\n\n// StyledIconDrag is an IconDrag which changes color as you hover over it\nexport const StyledIconDrag = styled(DragIcon)<{\n $active: boolean;\n $hover?: boolean;\n $shouldHide?: boolean;\n $horizontal?: boolean;\n}>`\n display: ${({ $shouldHide = false }) => ($shouldHide ? 'none' : 'inline')};\n\n ${({ $horizontal = false }) =>\n $horizontal\n ? css`\n transform: rotate(90deg);\n `\n : ''}\n\n ${({ $active = false, $hover = false }) =>\n $active\n ? css`\n cursor: grabbing;\n opacity: 1;\n `\n : $hover\n ? css`\n cursor: grab;\n opacity: 1;\n `\n : css`\n cursor: normal;\n opacity: 0.4;\n `}\n\n transition: opacity 0.2s ease-in-out;\n\n path {\n stroke: ${Color.CoreSlate1000};\n stroke-width: 1px;\n }\n`;\n","/**\n * reorder returns a reordered version of the inputed list by swapping the element\n * at startIndex with the one at endIndex\n */\nexport function reorder<A>(list: A[], startIndex: number, endIndex: number): A[] {\n const result = Array.from(list);\n const [removed] = result.splice(startIndex, 1);\n result.splice(endIndex, 0, removed);\n\n return result;\n}\n","import {\n DragDropContext,\n Draggable,\n Droppable,\n type DropResult,\n type ResponderProvided,\n} from '@hello-pangea/dnd';\nimport Fuse from 'fuse.js';\nimport { union } from 'lodash/fp';\nimport { type ComponentProps, forwardRef, useMemo, useState } from 'react';\nimport styled from 'styled-components';\n\nimport { Spacing } from '@persona/design-tokens';\nimport { SettingsIcon } from '@persona/icons';\nimport Button from 'design-system/components/Button';\nimport Card from 'design-system/components/Card';\nimport { StyledIconDrag } from 'design-system/components/DataTable/dnd/StyledIconDrag';\nimport { reorder } from 'design-system/components/DataTable/dnd/utils';\nimport SearchInput from 'design-system/components/DataTable/SearchInput';\nimport Popover from 'design-system/components/Popover';\nimport Spacer from 'design-system/components/Spacer';\nimport { Label, Paragraph } from 'design-system/components/Text';\nimport Toggle from 'design-system/components/Toggle';\nimport Tooltip from 'design-system/components/Tooltip';\nimport { Z_INDICES } from 'design-system/lib/zindex';\n\nimport type { AttributeColumn } from './types';\n\nconst DndSection = styled('div')`\n max-height: 400px;\n\n overflow: scroll;\n ::-webkit-scrollbar {\n display: none;\n }\n`;\n\nconst DndItemWrapper = styled('div')`\n background: white;\n width: 100%;\n border-bottom: 1px solid ${({ theme }) => theme.color.border.secondary};\n padding: ${Spacing[2]} ${Spacing[2]};\n\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: left;\n`;\n\nconst SuffixContainer = styled('div')`\n padding-left: ${Spacing[2]};\n margin-left: auto;\n align-self: center;\n`;\n\nconst SearchContainer = styled.div`\n display: flex;\n`;\n\nconst StyledSearchInput = styled(SearchInput)`\n width: 100%;\n`;\n\nconst PopoverCard = styled(Card)`\n width: 300px;\n padding: ${Spacing[4]};\n`;\n\nconst TriggerIconButton = forwardRef<HTMLButtonElement, ComponentProps<typeof Button>>(\n function TriggerIconButton({ disabled, ...elemProps }, ref) {\n return (\n <Button\n disabled={disabled}\n width='icon'\n variant='basic'\n size='md'\n {...elemProps}\n ref={ref}\n data-tour-target='table-properties-button'\n aria-label='Table Properties'\n >\n <SettingsIcon />\n </Button>\n );\n },\n);\n\nconst TooltipButtonWrapper = styled('div')`\n display: inline-block;\n`;\n\nexport interface TableViewConfigurationDropdownProps extends TableViewConfigurationProps {\n disabled: boolean;\n disabledTooltipMessage?: string;\n size?: 'sm' | 'md';\n variant?: 'basic' | 'text';\n}\n\nconst TableViewConfigurationDropdown = ({\n disabled = false,\n disabledTooltipMessage = 'Your role does not have permission to configure the view.',\n size = 'md',\n variant = 'basic',\n ...props\n}: TableViewConfigurationDropdownProps) => {\n return disabled ? (\n <Tooltip\n trigger={\n // NB: this wrapping div is needed to properly display the tooltip. The library we're using, floating-ui\n // doesn't support displaying tooltips on disabled buttons.\n <TooltipButtonWrapper>\n <TriggerIconButton disabled={true} size={size} variant={variant} />\n </TooltipButtonWrapper>\n }\n >\n {disabledTooltipMessage}\n </Tooltip>\n ) : (\n <Popover>\n <Popover.Trigger asChild>\n <TriggerIconButton disabled={false} size={size} variant={variant} />\n </Popover.Trigger>\n <Popover.Content\n style={{ zIndex: Z_INDICES.dropdown }}\n sideOffset={8}\n side='bottom'\n align='end'\n >\n <PopoverCard elevated>\n <TableViewConfiguration {...props} />\n </PopoverCard>\n </Popover.Content>\n </Popover>\n );\n};\n\nexport interface TableViewConfigurationProps {\n columnConfiguration: AttributeColumn[];\n attributeOptions: AttributeColumn[];\n updateColumnConfiguration: (newConfiguration: AttributeColumn[]) => void;\n getColumnDisabled?: (columnId: string, shownColumnIds: string[]) => boolean;\n}\n\nexport const TableViewConfiguration = ({\n columnConfiguration,\n attributeOptions,\n updateColumnConfiguration,\n getColumnDisabled,\n}: TableViewConfigurationProps) => {\n const [searchTerm, setSearchTerm] = useState<string>('');\n\n const fuse = useMemo(() => {\n const fuseOptions = {\n shouldSort: false,\n threshold: 0.4,\n location: 0,\n distance: 100,\n minMatchCharLength: 1,\n keys: [{ name: 'label', weight: 1.0 }],\n };\n return new Fuse(attributeOptions, fuseOptions);\n }, [attributeOptions]);\n\n // NB: we do this to make sure that attributes that exist in the column configuration but NOT the standardized options still show up in the menu.\n // Options are deduped.\n const allOptions = useMemo(\n () => union(attributeOptions, columnConfiguration),\n [attributeOptions, columnConfiguration],\n );\n\n const filteredSearchOptions =\n searchTerm === '' ? allOptions : fuse.search(searchTerm).map(({ item }) => item);\n\n const hiddenAttributes = useMemo(() => {\n return filteredSearchOptions.filter((attribute) => {\n const columnConfigurationKeys = columnConfiguration.map((c) => c.key);\n return !columnConfigurationKeys.includes(attribute.key);\n });\n }, [columnConfiguration, filteredSearchOptions]);\n\n const filteredShownAttributes = useMemo(() => {\n return columnConfiguration.filter((column) =>\n filteredSearchOptions.map((o) => o.key).includes(column.key),\n );\n }, [columnConfiguration, filteredSearchOptions]);\n\n const handleDragEnd = (result: DropResult, _provided: ResponderProvided) => {\n const { destination, source } = result;\n if (\n !destination ||\n (destination.droppableId === source.droppableId && destination.index === source.index)\n ) {\n return;\n }\n\n const reorderedColumns = reorder(columnConfiguration, source.index, destination.index);\n updateColumnConfiguration(reorderedColumns);\n };\n\n const generateShownAttributesToggle = (column: AttributeColumn) => () => {\n const updatedAttributes = columnConfiguration.filter((a) => a.key !== column.key);\n updateColumnConfiguration(updatedAttributes);\n };\n\n const generateHiddenAttributesToggle = (column: AttributeColumn) => () => {\n const updatedAttributes = columnConfiguration.concat(column);\n updateColumnConfiguration(updatedAttributes);\n };\n\n const shownColumnIds = useMemo(() => {\n return columnConfiguration.map((c) => c.key);\n }, [columnConfiguration]);\n\n const shownDndItemProps: AttributeDndProps[] = filteredShownAttributes.map((column, index) => {\n const isDisabledByDefault = columnConfiguration.length === 1;\n const isDisabledByCustom = getColumnDisabled?.(column.key, shownColumnIds) ?? false;\n const shouldDisableDragForColumn =\n isDisabledByCustom && index === filteredShownAttributes.length - 1;\n const result: AttributeDndProps = {\n column: column,\n index: index,\n isDisabled: isDisabledByDefault || isDisabledByCustom,\n isToggled: true,\n shouldDisableDrag: shouldDisableDragForColumn,\n handleToggle: generateShownAttributesToggle(column),\n };\n return result;\n });\n\n const hiddenDndItemProps: AttributeDndProps[] = hiddenAttributes.map((column, index) => {\n const result: AttributeDndProps = {\n column: column,\n index: index,\n isToggled: false,\n shouldDisableDrag: true,\n handleToggle: generateHiddenAttributesToggle(column),\n };\n return result;\n });\n\n return (\n <div>\n <Label size='lg' weight='bold'>\n Configure columns\n </Label>\n <Spacer height={2} />\n <SearchContainer>\n <StyledSearchInput\n title={null}\n value={searchTerm}\n handleInput={setSearchTerm}\n size='md'\n placeholder='Search by item...'\n dataTest='checklist-item-panel-item-table__search'\n />\n </SearchContainer>\n <Spacer height={2} />\n {shownDndItemProps.length > 0 || hiddenDndItemProps.length > 0 ? (\n <DndSection>\n {shownDndItemProps.length > 0 && (\n <div>\n <Paragraph>Shown attributes</Paragraph>\n {/* Issue with @hello-pangea/dnd and transformed parent elements: https://github.com/hello-pangea/dnd/blob/main/docs/guides/reparenting.md\n We have to use the renderClone API to get the dragging working correctly. This has to do with one of the parent elements being a Popover. */}\n <DragDropContext onDragEnd={handleDragEnd}>\n <Droppable\n droppableId='cases-view__configure-shown-columns'\n renderClone={(provided, _snapshot, rubric) => {\n return (\n <div\n {...provided.draggableProps}\n {...provided.dragHandleProps}\n ref={provided.innerRef}\n >\n <AttributeDnd {...shownDndItemProps[rubric.source.index]} />\n </div>\n );\n }}\n >\n {(provided) => {\n return (\n <div ref={provided.innerRef} {...provided.droppableProps}>\n {shownDndItemProps.map((props, idx) => {\n return (\n <Draggable\n key={`${props.column.key}`}\n draggableId={props.column.key}\n index={idx}\n isDragDisabled={props.shouldDisableDrag}\n >\n {(provided) => {\n return (\n <div\n ref={provided.innerRef}\n {...provided.draggableProps}\n {...provided.dragHandleProps}\n >\n <AttributeDnd {...props} />\n </div>\n );\n }}\n </Draggable>\n );\n })}\n {provided.placeholder}\n </div>\n );\n }}\n </Droppable>\n </DragDropContext>\n </div>\n )}\n <Spacer height={2} />\n {hiddenDndItemProps.length > 0 && (\n <div>\n <Paragraph>Hidden attributes</Paragraph>\n <DragDropContext onDragEnd={handleDragEnd}>\n <Droppable\n droppableId='cases-view__configure-hidden-columns'\n renderClone={(provided, _snapshot, rubric) => {\n return (\n <div\n {...provided.draggableProps}\n {...provided.dragHandleProps}\n ref={provided.innerRef}\n >\n <AttributeDnd {...hiddenDndItemProps[rubric.source.index]} />\n </div>\n );\n }}\n >\n {(provided) => {\n return (\n <div ref={provided.innerRef} {...provided.droppableProps}>\n {hiddenDndItemProps.map((props, idx) => {\n return (\n <Draggable\n key={`${props.column.key}`}\n draggableId={props.column.key}\n index={idx}\n isDragDisabled={props.shouldDisableDrag}\n >\n {(provided) => {\n return (\n <div\n ref={provided.innerRef}\n {...provided.draggableProps}\n {...provided.dragHandleProps}\n >\n <AttributeDnd {...props} />\n </div>\n );\n }}\n </Draggable>\n );\n })}\n {provided.placeholder}\n </div>\n );\n }}\n </Droppable>\n </DragDropContext>\n </div>\n )}\n </DndSection>\n ) : (\n <div>\n <Paragraph>No matching attributes</Paragraph>\n </div>\n )}\n </div>\n );\n};\n\nconst OverflowText = styled('div')`\n max-width: 160px;\n flex-wrap: wrap;\n display: flex;\n`;\n\ninterface AttributeDndProps {\n column: AttributeColumn;\n index: number;\n isDisabled?: boolean;\n isToggled: boolean;\n shouldDisableDrag: boolean;\n handleToggle: () => void;\n}\n\nconst AttributeDnd = ({\n column,\n index,\n isDisabled = false,\n isToggled,\n shouldDisableDrag,\n handleToggle,\n}: AttributeDndProps) => {\n return (\n <DndItemWrapper key={`${column.key}-${index}`}>\n <StyledIconDrag $active $shouldHide={shouldDisableDrag} />\n <OverflowText>\n <Paragraph color='primary' size='sm'>\n {column.label}\n </Paragraph>\n </OverflowText>\n <SuffixContainer>\n <Toggle\n value={isToggled}\n disabled={isDisabled}\n onChange={handleToggle}\n aria-label={isToggled ? `Hide ${column.label}` : `Show ${column.label}`}\n />\n </SuffixContainer>\n </DndItemWrapper>\n );\n};\n\nexport default TableViewConfigurationDropdown;\n","import { type ReactNode, createElement, createContext, useContext } from 'react';\n\nimport type { BaseActiveFilter, BaseFilterConfig } from './types';\n\nexport interface TableControlsContextProps<\n TFilter extends BaseFilterConfig = BaseFilterConfig,\n TActiveFilter extends BaseActiveFilter<TFilter> = BaseActiveFilter<TFilter>,\n> {\n filters: TFilter[];\n activeFilters: TActiveFilter[];\n setActiveFilters: (filters: TActiveFilter[]) => void;\n}\n\nconst TableControlsContext = createContext<TableControlsContextProps>({\n filters: [],\n activeFilters: [],\n setActiveFilters: () => {},\n});\n\nexport function useTableControls<\n TFilter extends BaseFilterConfig = BaseFilterConfig,\n TActiveFilter extends BaseActiveFilter<TFilter> = BaseActiveFilter<TFilter>,\n>(): TableControlsContextProps<TFilter, TActiveFilter> {\n return useContext(TableControlsContext) as unknown as TableControlsContextProps<\n TFilter,\n TActiveFilter\n >;\n}\n\nexport function TableControlsProvider<\n TFilter extends BaseFilterConfig = BaseFilterConfig,\n TActiveFilter extends BaseActiveFilter<TFilter> = BaseActiveFilter<TFilter>,\n>({\n children,\n ...value\n}: TableControlsContextProps<TFilter, TActiveFilter> & { children: ReactNode }) {\n return createElement(\n TableControlsContext.Provider,\n { value: value as unknown as TableControlsContextProps },\n children,\n );\n}\n\nexport default TableControlsContext;\n"],"mappings":"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"}

package/dist/components/CardV2/index.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"index.cjs","names":["CardLoadingShimmer","LoadingShimmer","HeadlessAriaButton","focusStyle","HStack","Spacing","Color","Heading","Typography","IconButton","Button","Tooltip","DropdownButton","DropdownMenu","MoreIcon","TruncatedText","ChevronDownIcon","Paragraph","Color","Spacing","Z_INDICES","Disclosure","DisclosurePanel","LoadingShimmer","HStack","Color","ConfigContext","Paragraph","ErrorBoundary"],"sources":["../../../components/CardV2/SectionHeading.tsx","../../../lib/intersperse.ts","../../../components/CardV2/Section.tsx","../../../components/CardV2/Card.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { ChevronDownIcon, MoreIcon } from '@persona/icons';\nimport Button, { IconButton } from 'design-system/components/Button';\nimport DropdownButton from 'design-system/components/DropdownButton';\nimport DropdownMenu from 'design-system/components/DropdownMenu';\nimport { LoadingShimmer } from 'design-system/components/LoadingShimmer';\nimport { HStack } from 'design-system/components/Stack';\nimport { Heading } from 'design-system/components/Text';\nimport Tooltip from 'design-system/components/Tooltip';\nimport { HeadlessAriaButton } from 'design-system/lib/HeadlessAriaButton';\nimport { TruncatedText } from 'design-system/lib/TruncatedText';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport type { HeadingSize } from 'design-system/mixins/text';\nimport type { IconAction, MenuAction, TextAction } from 'design-system/types/Action';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst CardLoadingShimmer = styled(LoadingShimmer)`\n border-radius: ${({ theme }) => theme.card.borderRadius};\n`;\n\nconst StickerContainer = styled.div`\n display: flex;\n max-width: 180px;\n`;\n\ntype AccordionContainerProps = {\n $isTopSection: boolean;\n $expanded: boolean;\n};\nconst AccordionContainer = styled.div<AccordionContainerProps>`\n transition: opacity ${TransitionDuration.Faster};\n position: absolute;\n opacity: 0;\n\n height: 12px;\n width: 12px;\n display: flex;\n align-items: center;\n /* Because of padding in the top section heading we need to offset differently. */\n /* We want a 12px icon to be off-center in 24px padding, 4px on the right and 8px on the left */\n left: ${({ $isTopSection }) => ($isTopSection ? '8px' : '-16px')};\n /* center the icon vertically */\n top: calc(50% - 6px);\n\n border-radius: 1px;\n\n & svg {\n transition: transform ${TransitionDuration.Faster} ease-out;\n transform: rotate(${({ $expanded }) => ($expanded ? '0' : '-90deg')});\n }\n`;\n\nconst HeaderButton = styled(HeadlessAriaButton)`\n min-width: 0;\n flex: 1;\n\n &:hover ~ ${AccordionContainer} {\n opacity: 1;\n }\n\n &:focus-visible ~ ${AccordionContainer} {\n opacity: 1;\n ${focusStyle}\n }\n`;\n\ntype HeadingContainerProps = {\n $isTopSection: boolean;\n $divider: boolean;\n $hasFooter: boolean;\n $isExpanded: boolean;\n};\nconst HeadingContainer = styled(HStack)<HeadingContainerProps>`\n position: relative;\n\n ${({ $isTopSection }) =>\n $isTopSection &&\n css`\n padding: ${Spacing[4]} ${Spacing[5]};\n `}\n ${({ $divider }) =>\n $divider &&\n css`\n border-bottom: 1px solid ${Color.BorderDivider};\n `}\n ${({ $isTopSection, $hasFooter, $isExpanded }) =>\n $isTopSection &&\n !$hasFooter &&\n !$isExpanded &&\n css`\n // We apply 4px of whitespace to the bottom of the card container so that content has a buffer\n // when being scrolled and still appears inside the card. Here we adjust, subtracting\n // 4px from the 16px padding.\n padding-bottom: ${Spacing[3]};\n `}\n`;\n\ntype StyledHeadingProps = {\n $isCollapsible: boolean;\n $isTopSection: boolean;\n size: HeadingSize;\n};\nconst StyledHeading = styled(Heading)<StyledHeadingProps>`\n flex: 1;\n display: flex;\n align-items: center;\n gap: ${Spacing[2]};\n line-height: 24px; // We want an adjusted line-height to hit the target header size.\n overflow: hidden;\n\n ${({ $isCollapsible }) => $isCollapsible && 'cursor: pointer;'}\n ${({ $isTopSection }) =>\n !$isTopSection &&\n css`\n ${Typography.TextLargeBold};\n `}\n`;\n\nconst isIconAction = (action: IconAction | TextAction): action is IconAction => 'icon' in action;\n\nconst ButtonRow: FC<{\n actions: (IconAction | TextAction)[];\n menuActions: MenuAction[];\n}> = ({ actions, menuActions }) => {\n const buttons = actions\n .filter((action) => !action.hidden)\n .map((action, i) => {\n const key = isIconAction(action)\n ? (action.id ?? action.ariaLabel ?? `action-${i}`)\n : (action.id ?? action.label ?? `action-${i}`);\n\n const button = isIconAction(action) ? (\n <IconButton\n id={action.id}\n key={key}\n to={action.to}\n onClick={(e) => {\n e.stopPropagation();\n return action.onClick?.(e);\n }}\n disabled={action.disabled}\n aria-label={action.ariaLabel}\n size='sm'\n >\n {action.icon}\n </IconButton>\n ) : (\n <Button\n id={action.id}\n key={key}\n aria-label={action.ariaLabel}\n to={action.to}\n onClick={(e) => {\n e.stopPropagation();\n return action.onClick?.(e);\n }}\n disabled={action.disabled}\n variant={action.variant ?? 'basic'}\n size='sm'\n width='auto'\n prefixIcon={action.prefixIcon}\n suffixIcon={action.suffixIcon}\n >\n {action.label}\n </Button>\n );\n\n return action.tooltip ? (\n <Tooltip key={key} {...action.tooltipProps} trigger={button}>\n {action.tooltip}\n </Tooltip>\n ) : (\n button\n );\n });\n\n return (\n <HStack>\n {buttons}\n {menuActions.length > 0 && (\n <DropdownButton\n variant='text'\n width='icon'\n size='sm'\n suffixIcon={undefined}\n style={{ justifySelf: 'flex-end' }}\n aria-label='More actions'\n menuProps={{\n portal: true,\n }}\n menuItems={menuActions\n .filter((action) => !action.hidden)\n .map((action) => (\n <DropdownMenu.Item\n id={action.id ?? action.label}\n key={action.id ?? action.label}\n onClick={action.onClick}\n disabled={action.disabled}\n >\n {action.label}\n </DropdownMenu.Item>\n ))}\n >\n <MoreIcon />\n </DropdownButton>\n )}\n </HStack>\n );\n};\n\n/**\n * Private component for rendering the heading of a section, both the primary card heading and\n * section headings.\n */\nexport const SectionHeading: FC<{\n /**\n * Whether this is the top-level section of the card which has different visual treatment.\n */\n isTopSection: boolean;\n\n /**\n * Whether this heading's section has content.\n */\n sectionHasContent: boolean;\n\n /**\n * Whether this heading's section has a footer.\n */\n hasFooter: boolean;\n\n loading: boolean;\n\n /**\n * Title text to render in the heading.\n */\n title: string;\n\n /**\n * Optional sticker to render after the title.\n */\n sticker?: ReactElement;\n\n /**\n * Optional icon to render before the title text.\n *\n * Usage of this icon slot should be avoided if possible to maintain left-text alignement. If\n * using this icon slot for a section heading use it for all sections.\n */\n leftDecorativeIcon?: ReactElement;\n\n /**\n * Optional actions to render in the heading.\n * Only accepts IconButton or Button components with specific prop restrictions.\n */\n actions?: (IconAction | TextAction | undefined)[];\n\n /**\n * Optional actions to render in the heading in a menu.\n */\n menuActions?: (MenuAction | undefined)[];\n\n /**\n * Optional custom content to render in the heading in the button row. Prefer setting `actions` or\n * `menuActions` if possible.\n */\n headerActionsRowContent?: ReactNode;\n\n /**\n * Callback to toggle collapsed state of the section. Omit to disable collapsing.\n */\n toggle?: () => void;\n\n /**\n * Whether the section is currently expanded or collapsed.\n */\n isExpanded: boolean;\n\n /**\n * Optional props to pass to the heading element. Accepts an `as` key to override the\n * rendered heading level. Defaults to `h2` for the top-level card heading and `h3` for\n * section headings so that the document heading hierarchy reflects the visual hierarchy.\n */\n headingProps?: Omit<ComponentPropsWithoutRef<'span'>, 'color'> & {\n as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n };\n}> = ({\n isTopSection,\n sectionHasContent,\n hasFooter,\n loading,\n title,\n actions = [],\n menuActions = [],\n headerActionsRowContent,\n sticker,\n leftDecorativeIcon,\n toggle,\n isExpanded,\n headingProps,\n}) => {\n const renderButtonRow = actions.length > 0 || menuActions.length > 0;\n const { as: headingAs, ...restHeadingProps } = headingProps ?? {};\n\n return (\n <HeadingContainer\n $isTopSection={isTopSection}\n $hasFooter={hasFooter}\n $isExpanded={isExpanded}\n $divider={isTopSection && isExpanded && sectionHasContent}\n align='center'\n justify='space-between'\n spacing={Spacing[2]}\n >\n {loading ? (\n <CardLoadingShimmer height='24px' width='200px' />\n ) : (\n <>\n {/* https://github.com/adobe/react-spectrum/issues/7444 */}\n <HeaderButton slot='trigger' isDisabled={!toggle}>\n <StyledHeading\n forwardedAs={headingAs ?? (isTopSection ? 'h2' : 'h3')}\n size='xsm'\n $isCollapsible={!!toggle}\n $isTopSection={isTopSection}\n aria-label={title}\n {...restHeadingProps}\n >\n {leftDecorativeIcon}\n <TruncatedText>{title}</TruncatedText>\n {sticker && <StickerContainer>{sticker}</StickerContainer>}\n </StyledHeading>\n </HeaderButton>\n {headerActionsRowContent}\n {renderButtonRow && (\n <ButtonRow\n actions={actions.filter((action) => action != null)}\n menuActions={menuActions.filter((action) => action != null)}\n />\n )}\n {toggle && (\n <AccordionContainer $isTopSection={isTopSection} $expanded={isExpanded}>\n <ChevronDownIcon />\n </AccordionContainer>\n )}\n </>\n )}\n </HeadingContainer>\n );\n};\n","/**\n * @name intersperse\n *\n * Inserts an element between array items using a separator function. The\n * separator function is passed the previous index, the previous element, and\n * the next element.\n *\n * ```typescript\n * const nodeList: React.ReactNode[] = [...]\n * const commaSeparatedList = intersperse(nodeList, () => ', ')\n * const advancedSeparatedList = intersperse(nodeList, i => <Separator key={i}/>)\n * ```\n */\nexport function intersperse<T>(arr: T[], separator: (n: number, prev: T, curr: T) => T): T[] {\n return arr.flatMap((a, i) => (i > 0 ? [separator(i - 1, arr[i - 1], a), a] : [a]));\n}\n","import type { ComponentProps, FC, ReactNode } from 'react';\nimport { Disclosure, DisclosurePanel } from 'react-aria-components';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { SectionHeading } from 'design-system/components/CardV2/SectionHeading';\nimport { LoadingShimmer } from 'design-system/components/LoadingShimmer';\nimport { HStack } from 'design-system/components/Stack';\nimport { Paragraph } from 'design-system/components/Text';\nimport { intersperse } from 'design-system/lib/intersperse';\nimport { Z_INDICES } from 'design-system/lib/zindex';\n\nconst FooterParagraph = styled(Paragraph)`\n line-height: 16px;\n`;\n\ntype FooterContainerProps = {\n $divider: boolean;\n};\nconst FooterContainer = styled.div<FooterContainerProps>`\n ${({ $divider }) =>\n $divider &&\n css`\n border-top: 1px solid ${Color.BorderDivider};\n `}\n padding: ${Spacing[3]} ${Spacing[5]} ${Spacing[2]};\n`;\n\ntype MaybeStickyContainerProps = {\n $enabled: boolean;\n $bottom?: boolean;\n};\nconst MaybeStickyContainer = styled.div<MaybeStickyContainerProps>`\n ${({ $enabled }) =>\n $enabled &&\n css`\n // We are using sticky positioning here to have consistent scrollbar behavior between\n // different card configurations. Usage of sticky allows us to keep the scroll container at\n // the top of the card DOM structure regardless of whether the heading or footer is sticky.\n //\n // This also afaict helps eliminate the need to carry height values through the card DOM\n // structure to the content container (and possibly needing to adjust heights for heading and footer).\n position: sticky;\n top: 0;\n background-color: ${({ theme }) => theme.color.background.primary};\n z-index: ${Z_INDICES.sticky};\n `}\n\n ${({ $bottom = false }) =>\n $bottom &&\n css`\n top: unset;\n bottom: 0;\n `}\n`;\n\ntype StyledDisclosureProps = {\n $fullHeight: boolean;\n};\nconst StyledDisclosure = styled(Disclosure)<StyledDisclosureProps>`\n display: flex;\n flex-direction: column;\n gap: 0;\n ${({ $fullHeight }) =>\n $fullHeight &&\n css`\n height: 100%;\n `}\n`;\n\ntype StyledDisclosurePanelProps = {\n $isTopSection: boolean;\n};\nconst StyledDisclosurePanel = styled(DisclosurePanel)<StyledDisclosurePanelProps>`\n flex: 1;\n ${({ $isTopSection }) =>\n $isTopSection &&\n css`\n // Safari does not support hidden='until-found' so react-aria uses display: none instead.\n // Since react-aria is using display to hide content we need to not set display ourselves.\n &:not([aria-hidden='true']) {\n display: flex;\n }\n `}\n`;\n\nconst CardLoadingShimmer = styled(LoadingShimmer)`\n border-radius: ${({ theme }) => theme.card.borderRadius};\n`;\n\ntype SectionContentContainerProps = {\n $isTopSection: boolean;\n $hasHeading: boolean;\n $hasFooter: boolean;\n};\nconst SectionContentContainer = styled.div<SectionContentContainerProps>`\n ${({ $isTopSection }) =>\n $isTopSection &&\n css`\n padding: ${Spacing[5]};\n display: flex;\n flex-direction: column;\n gap: ${Spacing[5]};\n flex: 1;\n /* Prevent grid blowout https://css-tricks.com/preventing-a-grid-blowout/ */\n min-width: 0;\n `}\n\n ${({ $isTopSection, $hasHeading }) =>\n !$isTopSection &&\n $hasHeading &&\n css`\n padding-top: ${Spacing[3]};\n `}\n\n ${({ $isTopSection, $hasFooter }) =>\n $isTopSection &&\n !$hasFooter &&\n css`\n // We apply 4px of whitespace to the bottom of the card container so that content has a buffer\n // when being scrolled and still appears inside the card. Here we adjust, subtracting\n // 4px from the 24px padding.\n padding-bottom: 20px;\n `}\n`;\n\n/**\n * Private component for rendering sections of the card, both the primary card section and\n * individual sections.\n */\nexport const Section: FC<{\n children?: ReactNode;\n\n /**\n * Whether this is the top-level section of the card which has different visual treatment.\n */\n isTopSection: boolean;\n\n /**\n * Available props for the section's heading.\n */\n heading?: Pick<\n ComponentProps<typeof SectionHeading>,\n | 'title'\n | 'actions'\n | 'menuActions'\n | 'headerActionsRowContent'\n | 'sticker'\n | 'leftDecorativeIcon'\n | 'headingProps'\n >;\n\n /**\n * Optional footer to render at the bottom of the card. Footer content is rendered as a\n * paragraph with the items separated by a dot.\n */\n footer?: ReactNode[];\n\n /**\n * Optional arbitrary footer content to render as-is.\n */\n footerContent?: ReactNode;\n\n /**\n * Whether the section is collapsible.\n */\n collapsible?: boolean;\n\n /**\n * Whether the section heading and footer are sticky.\n */\n sticky?: boolean;\n\n /**\n * Whether the section is initially collapsed.\n */\n defaultCollapsed?: boolean;\n\n /**\n * If true, the section will be rendered in a loading state.\n */\n loading?: boolean;\n\n /**\n * Set height of the loading state.\n */\n loadingProps?: {\n height?: string;\n };\n\n /**\n * Control display of the empty state.\n */\n empty?: boolean;\n\n /**\n * Props for the empty state.\n */\n emptyProps?: {\n /**\n * Empty state message.\n */\n message?: string;\n };\n\n fullHeight?: boolean;\n}> = ({\n children,\n isTopSection,\n heading,\n footer,\n footerContent,\n loading = false,\n loadingProps,\n empty = false,\n emptyProps,\n defaultCollapsed = false,\n collapsible = false,\n sticky = false,\n fullHeight = false,\n}) => {\n let content: ReactNode;\n if (loading) {\n content = <CardLoadingShimmer height={loadingProps?.height ?? '200px'} width='100%' />;\n } else if (empty) {\n content = <Paragraph>{emptyProps?.message ?? 'No data collected'}</Paragraph>;\n } else {\n content = children;\n }\n\n const hasFooter = !!(footer || footerContent);\n const hasContent = !!content;\n\n // Normally we would have `isDisabled` as well but there's a react-aria-components quirk\n // that sets `hidden` on the disclosure panel if both `defaultExpanded` and `isDisabled` are true.\n // https://github.com/adobe/react-spectrum/issues/7444\n return (\n <StyledDisclosure defaultExpanded={!defaultCollapsed} $fullHeight={fullHeight}>\n {({ isExpanded, state }) => (\n <>\n {heading && (\n <MaybeStickyContainer $enabled={sticky}>\n <SectionHeading\n isTopSection={isTopSection}\n hasFooter={hasFooter}\n sectionHasContent={hasContent}\n loading={loading}\n toggle={collapsible ? state.toggle : undefined}\n isExpanded={isExpanded}\n {...heading}\n />\n </MaybeStickyContainer>\n )}\n {hasContent && (\n <StyledDisclosurePanel $isTopSection={isTopSection}>\n <SectionContentContainer\n $isTopSection={isTopSection}\n $hasHeading={!!heading}\n $hasFooter={hasFooter}\n >\n {content}\n </SectionContentContainer>\n </StyledDisclosurePanel>\n )}\n {hasFooter && (\n <MaybeStickyContainer $enabled={sticky} $bottom>\n <FooterContainer $divider={hasContent}>\n {loading ? (\n <HStack>\n <CardLoadingShimmer height='16px' width='120px' />\n <CardLoadingShimmer height='16px' width='120px' />\n </HStack>\n ) : (\n <>\n {footer && (\n <FooterParagraph size='sm'>\n <HStack spacing={Spacing[1]}>\n {intersperse(\n footer\n .filter((item) => item != null)\n .map((item, i) => <span key={`footer-item-${i}`}>{item}</span>),\n (i) => (\n <span key={i}>•</span>\n ),\n )}\n </HStack>\n </FooterParagraph>\n )}\n {footerContent}\n </>\n )}\n </FooterContainer>\n </MaybeStickyContainer>\n )}\n </>\n )}\n </StyledDisclosure>\n );\n};\n","import { type ComponentProps, createContext, type FC, type ReactNode, useContext } from 'react';\nimport { ErrorBoundary } from 'react-error-boundary';\nimport styled from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\nimport { Section } from 'design-system/components/CardV2/Section';\nimport { Paragraph } from 'design-system/components/Text';\nimport ConfigContext from 'design-system/lib/ConfigContext';\nimport { intersperse } from 'design-system/lib/intersperse';\n\nconst CardContainer = styled.div`\n border-radius: ${({ theme }) => theme.card.borderRadius};\n background-color: ${({ theme }) => theme.color.background.primary};\n // Height has been tricky here.\n // inherit seems to work well for both grid and flexbox layouts. In a grid we want this\n // container to receive the full cell height, In a flexbox we want this container to flex, maintaining\n // the minimum height for it's content.\n height: inherit;\n overflow-y: auto;\n\n box-sizing: border-box;\n // Small buffer so that content is not scrolling right on the edge of the card.\n border-bottom: 4px solid ${({ theme }) => theme.color.background.primary};\n`;\n\nconst CardContext = createContext<{ isStacked?: boolean }>({});\n\nconst Divider = styled.hr`\n margin: 0;\n border: none;\n border-top: 1px solid ${Color.BorderDivider};\n`;\n\n/**\n * Renders a card section.\n */\nconst PublicSection: FC<\n Pick<\n ComponentProps<typeof Section>,\n | 'children'\n | 'collapsible'\n | 'defaultCollapsed'\n | 'heading'\n | 'loading'\n | 'loadingProps'\n | 'empty'\n | 'emptyProps'\n >\n> = (props) => {\n return <Section isTopSection={false} {...props} />;\n};\n\n/**\n * Render the card in a \"stacked\" mode. Used for rendering multiple cards on top of each other\n * that appear visually as a single card.\n */\nconst Stacked: FC<{\n children: ReactNode[];\n}> = ({ children }) => {\n return (\n <CardContext.Provider value={{ isStacked: true }}>\n <CardContainer>\n {intersperse(children, (i) => (\n <Divider key={i} />\n ))}\n </CardContainer>\n </CardContext.Provider>\n );\n};\n\nconst DEFAULT_ERROR_MESSAGE = '🔍 Oops, something went wrong loading this card.';\n\n/**\n * Renders a PDS Card.\n *\n * To render sections of the card use `<Card.Section>...</Card.Section>`\n */\nconst Card: FC<\n {\n /**\n * Optional footer to render at the bottom of the card. Footer content is rendered as a\n * paragraph with the items separated by a dot.\n */\n footer?: ReactNode[];\n\n /**\n * Optional arbitrary footer content to render as-is.\n */\n footerContent?: ReactNode;\n\n /**\n * Whether the card heading and footer are sticky.\n */\n sticky?: boolean;\n\n /**\n * Force the card to render in an errored state. Errors bubbling up from children will also\n * render the errored state.\n */\n errored?: boolean;\n\n /**\n * Props for the errored state.\n */\n erroredProps?: {\n /**\n * Message to render in the errored state.\n */\n message?: string;\n /**\n * Callback to handle errors. Note this callback is only called when the error is bubbled up\n * from children, not when `errored` is set to true.\n */\n onError?: (error: Error) => void;\n };\n\n containerProps?: ComponentProps<typeof CardContainer>;\n\n /**\n * Whether the card should render its content with 100% height. This is a bit of a hack for cards\n * that want full control of their content and don't use sections.\n */\n fullHeight?: boolean;\n } & ComponentProps<typeof PublicSection>\n> = ({ children, errored, erroredProps, containerProps, sticky = true, ...sectionProps }) => {\n const { isStacked = false } = useContext(CardContext);\n const { captureException } = useContext(ConfigContext);\n\n const errorFallback = (\n <Section isTopSection {...sectionProps}>\n <Paragraph>{erroredProps?.message ?? DEFAULT_ERROR_MESSAGE}</Paragraph>\n </Section>\n );\n\n const section = (\n <Section isTopSection sticky={sticky} {...sectionProps}>\n {children}\n </Section>\n );\n\n return (\n <ErrorBoundary\n fallback={\n isStacked ? (\n errorFallback\n ) : (\n <CardContainer {...containerProps}>{errorFallback}</CardContainer>\n )\n }\n onError={erroredProps?.onError ?? ((error) => captureException(error))}\n >\n {isStacked ? (\n <>{errored ? <>{errorFallback}</> : <>{section}</>}</>\n ) : (\n <CardContainer {...containerProps}>\n {errored ? <>{errorFallback}</> : <>{section}</>}\n </CardContainer>\n )}\n </ErrorBoundary>\n );\n};\n\nexport default Object.assign(Card, {\n Section: PublicSection,\n Stacked: Stacked,\n});\n"],"mappings":"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"}

package/dist/components/CardV2/index.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"index.mjs","names":["CardLoadingShimmer","Heading","Button","DropdownMenu"],"sources":["../../../components/CardV2/SectionHeading.tsx","../../../lib/intersperse.ts","../../../components/CardV2/Section.tsx","../../../components/CardV2/Card.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, FC, ReactElement, ReactNode } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing, Typography } from '@persona/design-tokens';\nimport { ChevronDownIcon, MoreIcon } from '@persona/icons';\nimport Button, { IconButton } from 'design-system/components/Button';\nimport DropdownButton from 'design-system/components/DropdownButton';\nimport DropdownMenu from 'design-system/components/DropdownMenu';\nimport { LoadingShimmer } from 'design-system/components/LoadingShimmer';\nimport { HStack } from 'design-system/components/Stack';\nimport { Heading } from 'design-system/components/Text';\nimport Tooltip from 'design-system/components/Tooltip';\nimport { HeadlessAriaButton } from 'design-system/lib/HeadlessAriaButton';\nimport { TruncatedText } from 'design-system/lib/TruncatedText';\nimport { focusStyle } from 'design-system/mixins/focus';\nimport type { HeadingSize } from 'design-system/mixins/text';\nimport type { IconAction, MenuAction, TextAction } from 'design-system/types/Action';\nimport { TransitionDuration } from 'design-system/variables/transitions';\n\nconst CardLoadingShimmer = styled(LoadingShimmer)`\n border-radius: ${({ theme }) => theme.card.borderRadius};\n`;\n\nconst StickerContainer = styled.div`\n display: flex;\n max-width: 180px;\n`;\n\ntype AccordionContainerProps = {\n $isTopSection: boolean;\n $expanded: boolean;\n};\nconst AccordionContainer = styled.div<AccordionContainerProps>`\n transition: opacity ${TransitionDuration.Faster};\n position: absolute;\n opacity: 0;\n\n height: 12px;\n width: 12px;\n display: flex;\n align-items: center;\n /* Because of padding in the top section heading we need to offset differently. */\n /* We want a 12px icon to be off-center in 24px padding, 4px on the right and 8px on the left */\n left: ${({ $isTopSection }) => ($isTopSection ? '8px' : '-16px')};\n /* center the icon vertically */\n top: calc(50% - 6px);\n\n border-radius: 1px;\n\n & svg {\n transition: transform ${TransitionDuration.Faster} ease-out;\n transform: rotate(${({ $expanded }) => ($expanded ? '0' : '-90deg')});\n }\n`;\n\nconst HeaderButton = styled(HeadlessAriaButton)`\n min-width: 0;\n flex: 1;\n\n &:hover ~ ${AccordionContainer} {\n opacity: 1;\n }\n\n &:focus-visible ~ ${AccordionContainer} {\n opacity: 1;\n ${focusStyle}\n }\n`;\n\ntype HeadingContainerProps = {\n $isTopSection: boolean;\n $divider: boolean;\n $hasFooter: boolean;\n $isExpanded: boolean;\n};\nconst HeadingContainer = styled(HStack)<HeadingContainerProps>`\n position: relative;\n\n ${({ $isTopSection }) =>\n $isTopSection &&\n css`\n padding: ${Spacing[4]} ${Spacing[5]};\n `}\n ${({ $divider }) =>\n $divider &&\n css`\n border-bottom: 1px solid ${Color.BorderDivider};\n `}\n ${({ $isTopSection, $hasFooter, $isExpanded }) =>\n $isTopSection &&\n !$hasFooter &&\n !$isExpanded &&\n css`\n // We apply 4px of whitespace to the bottom of the card container so that content has a buffer\n // when being scrolled and still appears inside the card. Here we adjust, subtracting\n // 4px from the 16px padding.\n padding-bottom: ${Spacing[3]};\n `}\n`;\n\ntype StyledHeadingProps = {\n $isCollapsible: boolean;\n $isTopSection: boolean;\n size: HeadingSize;\n};\nconst StyledHeading = styled(Heading)<StyledHeadingProps>`\n flex: 1;\n display: flex;\n align-items: center;\n gap: ${Spacing[2]};\n line-height: 24px; // We want an adjusted line-height to hit the target header size.\n overflow: hidden;\n\n ${({ $isCollapsible }) => $isCollapsible && 'cursor: pointer;'}\n ${({ $isTopSection }) =>\n !$isTopSection &&\n css`\n ${Typography.TextLargeBold};\n `}\n`;\n\nconst isIconAction = (action: IconAction | TextAction): action is IconAction => 'icon' in action;\n\nconst ButtonRow: FC<{\n actions: (IconAction | TextAction)[];\n menuActions: MenuAction[];\n}> = ({ actions, menuActions }) => {\n const buttons = actions\n .filter((action) => !action.hidden)\n .map((action, i) => {\n const key = isIconAction(action)\n ? (action.id ?? action.ariaLabel ?? `action-${i}`)\n : (action.id ?? action.label ?? `action-${i}`);\n\n const button = isIconAction(action) ? (\n <IconButton\n id={action.id}\n key={key}\n to={action.to}\n onClick={(e) => {\n e.stopPropagation();\n return action.onClick?.(e);\n }}\n disabled={action.disabled}\n aria-label={action.ariaLabel}\n size='sm'\n >\n {action.icon}\n </IconButton>\n ) : (\n <Button\n id={action.id}\n key={key}\n aria-label={action.ariaLabel}\n to={action.to}\n onClick={(e) => {\n e.stopPropagation();\n return action.onClick?.(e);\n }}\n disabled={action.disabled}\n variant={action.variant ?? 'basic'}\n size='sm'\n width='auto'\n prefixIcon={action.prefixIcon}\n suffixIcon={action.suffixIcon}\n >\n {action.label}\n </Button>\n );\n\n return action.tooltip ? (\n <Tooltip key={key} {...action.tooltipProps} trigger={button}>\n {action.tooltip}\n </Tooltip>\n ) : (\n button\n );\n });\n\n return (\n <HStack>\n {buttons}\n {menuActions.length > 0 && (\n <DropdownButton\n variant='text'\n width='icon'\n size='sm'\n suffixIcon={undefined}\n style={{ justifySelf: 'flex-end' }}\n aria-label='More actions'\n menuProps={{\n portal: true,\n }}\n menuItems={menuActions\n .filter((action) => !action.hidden)\n .map((action) => (\n <DropdownMenu.Item\n id={action.id ?? action.label}\n key={action.id ?? action.label}\n onClick={action.onClick}\n disabled={action.disabled}\n >\n {action.label}\n </DropdownMenu.Item>\n ))}\n >\n <MoreIcon />\n </DropdownButton>\n )}\n </HStack>\n );\n};\n\n/**\n * Private component for rendering the heading of a section, both the primary card heading and\n * section headings.\n */\nexport const SectionHeading: FC<{\n /**\n * Whether this is the top-level section of the card which has different visual treatment.\n */\n isTopSection: boolean;\n\n /**\n * Whether this heading's section has content.\n */\n sectionHasContent: boolean;\n\n /**\n * Whether this heading's section has a footer.\n */\n hasFooter: boolean;\n\n loading: boolean;\n\n /**\n * Title text to render in the heading.\n */\n title: string;\n\n /**\n * Optional sticker to render after the title.\n */\n sticker?: ReactElement;\n\n /**\n * Optional icon to render before the title text.\n *\n * Usage of this icon slot should be avoided if possible to maintain left-text alignement. If\n * using this icon slot for a section heading use it for all sections.\n */\n leftDecorativeIcon?: ReactElement;\n\n /**\n * Optional actions to render in the heading.\n * Only accepts IconButton or Button components with specific prop restrictions.\n */\n actions?: (IconAction | TextAction | undefined)[];\n\n /**\n * Optional actions to render in the heading in a menu.\n */\n menuActions?: (MenuAction | undefined)[];\n\n /**\n * Optional custom content to render in the heading in the button row. Prefer setting `actions` or\n * `menuActions` if possible.\n */\n headerActionsRowContent?: ReactNode;\n\n /**\n * Callback to toggle collapsed state of the section. Omit to disable collapsing.\n */\n toggle?: () => void;\n\n /**\n * Whether the section is currently expanded or collapsed.\n */\n isExpanded: boolean;\n\n /**\n * Optional props to pass to the heading element. Accepts an `as` key to override the\n * rendered heading level. Defaults to `h2` for the top-level card heading and `h3` for\n * section headings so that the document heading hierarchy reflects the visual hierarchy.\n */\n headingProps?: Omit<ComponentPropsWithoutRef<'span'>, 'color'> & {\n as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n };\n}> = ({\n isTopSection,\n sectionHasContent,\n hasFooter,\n loading,\n title,\n actions = [],\n menuActions = [],\n headerActionsRowContent,\n sticker,\n leftDecorativeIcon,\n toggle,\n isExpanded,\n headingProps,\n}) => {\n const renderButtonRow = actions.length > 0 || menuActions.length > 0;\n const { as: headingAs, ...restHeadingProps } = headingProps ?? {};\n\n return (\n <HeadingContainer\n $isTopSection={isTopSection}\n $hasFooter={hasFooter}\n $isExpanded={isExpanded}\n $divider={isTopSection && isExpanded && sectionHasContent}\n align='center'\n justify='space-between'\n spacing={Spacing[2]}\n >\n {loading ? (\n <CardLoadingShimmer height='24px' width='200px' />\n ) : (\n <>\n {/* https://github.com/adobe/react-spectrum/issues/7444 */}\n <HeaderButton slot='trigger' isDisabled={!toggle}>\n <StyledHeading\n forwardedAs={headingAs ?? (isTopSection ? 'h2' : 'h3')}\n size='xsm'\n $isCollapsible={!!toggle}\n $isTopSection={isTopSection}\n aria-label={title}\n {...restHeadingProps}\n >\n {leftDecorativeIcon}\n <TruncatedText>{title}</TruncatedText>\n {sticker && <StickerContainer>{sticker}</StickerContainer>}\n </StyledHeading>\n </HeaderButton>\n {headerActionsRowContent}\n {renderButtonRow && (\n <ButtonRow\n actions={actions.filter((action) => action != null)}\n menuActions={menuActions.filter((action) => action != null)}\n />\n )}\n {toggle && (\n <AccordionContainer $isTopSection={isTopSection} $expanded={isExpanded}>\n <ChevronDownIcon />\n </AccordionContainer>\n )}\n </>\n )}\n </HeadingContainer>\n );\n};\n","/**\n * @name intersperse\n *\n * Inserts an element between array items using a separator function. The\n * separator function is passed the previous index, the previous element, and\n * the next element.\n *\n * ```typescript\n * const nodeList: React.ReactNode[] = [...]\n * const commaSeparatedList = intersperse(nodeList, () => ', ')\n * const advancedSeparatedList = intersperse(nodeList, i => <Separator key={i}/>)\n * ```\n */\nexport function intersperse<T>(arr: T[], separator: (n: number, prev: T, curr: T) => T): T[] {\n return arr.flatMap((a, i) => (i > 0 ? [separator(i - 1, arr[i - 1], a), a] : [a]));\n}\n","import type { ComponentProps, FC, ReactNode } from 'react';\nimport { Disclosure, DisclosurePanel } from 'react-aria-components';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { SectionHeading } from 'design-system/components/CardV2/SectionHeading';\nimport { LoadingShimmer } from 'design-system/components/LoadingShimmer';\nimport { HStack } from 'design-system/components/Stack';\nimport { Paragraph } from 'design-system/components/Text';\nimport { intersperse } from 'design-system/lib/intersperse';\nimport { Z_INDICES } from 'design-system/lib/zindex';\n\nconst FooterParagraph = styled(Paragraph)`\n line-height: 16px;\n`;\n\ntype FooterContainerProps = {\n $divider: boolean;\n};\nconst FooterContainer = styled.div<FooterContainerProps>`\n ${({ $divider }) =>\n $divider &&\n css`\n border-top: 1px solid ${Color.BorderDivider};\n `}\n padding: ${Spacing[3]} ${Spacing[5]} ${Spacing[2]};\n`;\n\ntype MaybeStickyContainerProps = {\n $enabled: boolean;\n $bottom?: boolean;\n};\nconst MaybeStickyContainer = styled.div<MaybeStickyContainerProps>`\n ${({ $enabled }) =>\n $enabled &&\n css`\n // We are using sticky positioning here to have consistent scrollbar behavior between\n // different card configurations. Usage of sticky allows us to keep the scroll container at\n // the top of the card DOM structure regardless of whether the heading or footer is sticky.\n //\n // This also afaict helps eliminate the need to carry height values through the card DOM\n // structure to the content container (and possibly needing to adjust heights for heading and footer).\n position: sticky;\n top: 0;\n background-color: ${({ theme }) => theme.color.background.primary};\n z-index: ${Z_INDICES.sticky};\n `}\n\n ${({ $bottom = false }) =>\n $bottom &&\n css`\n top: unset;\n bottom: 0;\n `}\n`;\n\ntype StyledDisclosureProps = {\n $fullHeight: boolean;\n};\nconst StyledDisclosure = styled(Disclosure)<StyledDisclosureProps>`\n display: flex;\n flex-direction: column;\n gap: 0;\n ${({ $fullHeight }) =>\n $fullHeight &&\n css`\n height: 100%;\n `}\n`;\n\ntype StyledDisclosurePanelProps = {\n $isTopSection: boolean;\n};\nconst StyledDisclosurePanel = styled(DisclosurePanel)<StyledDisclosurePanelProps>`\n flex: 1;\n ${({ $isTopSection }) =>\n $isTopSection &&\n css`\n // Safari does not support hidden='until-found' so react-aria uses display: none instead.\n // Since react-aria is using display to hide content we need to not set display ourselves.\n &:not([aria-hidden='true']) {\n display: flex;\n }\n `}\n`;\n\nconst CardLoadingShimmer = styled(LoadingShimmer)`\n border-radius: ${({ theme }) => theme.card.borderRadius};\n`;\n\ntype SectionContentContainerProps = {\n $isTopSection: boolean;\n $hasHeading: boolean;\n $hasFooter: boolean;\n};\nconst SectionContentContainer = styled.div<SectionContentContainerProps>`\n ${({ $isTopSection }) =>\n $isTopSection &&\n css`\n padding: ${Spacing[5]};\n display: flex;\n flex-direction: column;\n gap: ${Spacing[5]};\n flex: 1;\n /* Prevent grid blowout https://css-tricks.com/preventing-a-grid-blowout/ */\n min-width: 0;\n `}\n\n ${({ $isTopSection, $hasHeading }) =>\n !$isTopSection &&\n $hasHeading &&\n css`\n padding-top: ${Spacing[3]};\n `}\n\n ${({ $isTopSection, $hasFooter }) =>\n $isTopSection &&\n !$hasFooter &&\n css`\n // We apply 4px of whitespace to the bottom of the card container so that content has a buffer\n // when being scrolled and still appears inside the card. Here we adjust, subtracting\n // 4px from the 24px padding.\n padding-bottom: 20px;\n `}\n`;\n\n/**\n * Private component for rendering sections of the card, both the primary card section and\n * individual sections.\n */\nexport const Section: FC<{\n children?: ReactNode;\n\n /**\n * Whether this is the top-level section of the card which has different visual treatment.\n */\n isTopSection: boolean;\n\n /**\n * Available props for the section's heading.\n */\n heading?: Pick<\n ComponentProps<typeof SectionHeading>,\n | 'title'\n | 'actions'\n | 'menuActions'\n | 'headerActionsRowContent'\n | 'sticker'\n | 'leftDecorativeIcon'\n | 'headingProps'\n >;\n\n /**\n * Optional footer to render at the bottom of the card. Footer content is rendered as a\n * paragraph with the items separated by a dot.\n */\n footer?: ReactNode[];\n\n /**\n * Optional arbitrary footer content to render as-is.\n */\n footerContent?: ReactNode;\n\n /**\n * Whether the section is collapsible.\n */\n collapsible?: boolean;\n\n /**\n * Whether the section heading and footer are sticky.\n */\n sticky?: boolean;\n\n /**\n * Whether the section is initially collapsed.\n */\n defaultCollapsed?: boolean;\n\n /**\n * If true, the section will be rendered in a loading state.\n */\n loading?: boolean;\n\n /**\n * Set height of the loading state.\n */\n loadingProps?: {\n height?: string;\n };\n\n /**\n * Control display of the empty state.\n */\n empty?: boolean;\n\n /**\n * Props for the empty state.\n */\n emptyProps?: {\n /**\n * Empty state message.\n */\n message?: string;\n };\n\n fullHeight?: boolean;\n}> = ({\n children,\n isTopSection,\n heading,\n footer,\n footerContent,\n loading = false,\n loadingProps,\n empty = false,\n emptyProps,\n defaultCollapsed = false,\n collapsible = false,\n sticky = false,\n fullHeight = false,\n}) => {\n let content: ReactNode;\n if (loading) {\n content = <CardLoadingShimmer height={loadingProps?.height ?? '200px'} width='100%' />;\n } else if (empty) {\n content = <Paragraph>{emptyProps?.message ?? 'No data collected'}</Paragraph>;\n } else {\n content = children;\n }\n\n const hasFooter = !!(footer || footerContent);\n const hasContent = !!content;\n\n // Normally we would have `isDisabled` as well but there's a react-aria-components quirk\n // that sets `hidden` on the disclosure panel if both `defaultExpanded` and `isDisabled` are true.\n // https://github.com/adobe/react-spectrum/issues/7444\n return (\n <StyledDisclosure defaultExpanded={!defaultCollapsed} $fullHeight={fullHeight}>\n {({ isExpanded, state }) => (\n <>\n {heading && (\n <MaybeStickyContainer $enabled={sticky}>\n <SectionHeading\n isTopSection={isTopSection}\n hasFooter={hasFooter}\n sectionHasContent={hasContent}\n loading={loading}\n toggle={collapsible ? state.toggle : undefined}\n isExpanded={isExpanded}\n {...heading}\n />\n </MaybeStickyContainer>\n )}\n {hasContent && (\n <StyledDisclosurePanel $isTopSection={isTopSection}>\n <SectionContentContainer\n $isTopSection={isTopSection}\n $hasHeading={!!heading}\n $hasFooter={hasFooter}\n >\n {content}\n </SectionContentContainer>\n </StyledDisclosurePanel>\n )}\n {hasFooter && (\n <MaybeStickyContainer $enabled={sticky} $bottom>\n <FooterContainer $divider={hasContent}>\n {loading ? (\n <HStack>\n <CardLoadingShimmer height='16px' width='120px' />\n <CardLoadingShimmer height='16px' width='120px' />\n </HStack>\n ) : (\n <>\n {footer && (\n <FooterParagraph size='sm'>\n <HStack spacing={Spacing[1]}>\n {intersperse(\n footer\n .filter((item) => item != null)\n .map((item, i) => <span key={`footer-item-${i}`}>{item}</span>),\n (i) => (\n <span key={i}>•</span>\n ),\n )}\n </HStack>\n </FooterParagraph>\n )}\n {footerContent}\n </>\n )}\n </FooterContainer>\n </MaybeStickyContainer>\n )}\n </>\n )}\n </StyledDisclosure>\n );\n};\n","import { type ComponentProps, createContext, type FC, type ReactNode, useContext } from 'react';\nimport { ErrorBoundary } from 'react-error-boundary';\nimport styled from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\nimport { Section } from 'design-system/components/CardV2/Section';\nimport { Paragraph } from 'design-system/components/Text';\nimport ConfigContext from 'design-system/lib/ConfigContext';\nimport { intersperse } from 'design-system/lib/intersperse';\n\nconst CardContainer = styled.div`\n border-radius: ${({ theme }) => theme.card.borderRadius};\n background-color: ${({ theme }) => theme.color.background.primary};\n // Height has been tricky here.\n // inherit seems to work well for both grid and flexbox layouts. In a grid we want this\n // container to receive the full cell height, In a flexbox we want this container to flex, maintaining\n // the minimum height for it's content.\n height: inherit;\n overflow-y: auto;\n\n box-sizing: border-box;\n // Small buffer so that content is not scrolling right on the edge of the card.\n border-bottom: 4px solid ${({ theme }) => theme.color.background.primary};\n`;\n\nconst CardContext = createContext<{ isStacked?: boolean }>({});\n\nconst Divider = styled.hr`\n margin: 0;\n border: none;\n border-top: 1px solid ${Color.BorderDivider};\n`;\n\n/**\n * Renders a card section.\n */\nconst PublicSection: FC<\n Pick<\n ComponentProps<typeof Section>,\n | 'children'\n | 'collapsible'\n | 'defaultCollapsed'\n | 'heading'\n | 'loading'\n | 'loadingProps'\n | 'empty'\n | 'emptyProps'\n >\n> = (props) => {\n return <Section isTopSection={false} {...props} />;\n};\n\n/**\n * Render the card in a \"stacked\" mode. Used for rendering multiple cards on top of each other\n * that appear visually as a single card.\n */\nconst Stacked: FC<{\n children: ReactNode[];\n}> = ({ children }) => {\n return (\n <CardContext.Provider value={{ isStacked: true }}>\n <CardContainer>\n {intersperse(children, (i) => (\n <Divider key={i} />\n ))}\n </CardContainer>\n </CardContext.Provider>\n );\n};\n\nconst DEFAULT_ERROR_MESSAGE = '🔍 Oops, something went wrong loading this card.';\n\n/**\n * Renders a PDS Card.\n *\n * To render sections of the card use `<Card.Section>...</Card.Section>`\n */\nconst Card: FC<\n {\n /**\n * Optional footer to render at the bottom of the card. Footer content is rendered as a\n * paragraph with the items separated by a dot.\n */\n footer?: ReactNode[];\n\n /**\n * Optional arbitrary footer content to render as-is.\n */\n footerContent?: ReactNode;\n\n /**\n * Whether the card heading and footer are sticky.\n */\n sticky?: boolean;\n\n /**\n * Force the card to render in an errored state. Errors bubbling up from children will also\n * render the errored state.\n */\n errored?: boolean;\n\n /**\n * Props for the errored state.\n */\n erroredProps?: {\n /**\n * Message to render in the errored state.\n */\n message?: string;\n /**\n * Callback to handle errors. Note this callback is only called when the error is bubbled up\n * from children, not when `errored` is set to true.\n */\n onError?: (error: Error) => void;\n };\n\n containerProps?: ComponentProps<typeof CardContainer>;\n\n /**\n * Whether the card should render its content with 100% height. This is a bit of a hack for cards\n * that want full control of their content and don't use sections.\n */\n fullHeight?: boolean;\n } & ComponentProps<typeof PublicSection>\n> = ({ children, errored, erroredProps, containerProps, sticky = true, ...sectionProps }) => {\n const { isStacked = false } = useContext(CardContext);\n const { captureException } = useContext(ConfigContext);\n\n const errorFallback = (\n <Section isTopSection {...sectionProps}>\n <Paragraph>{erroredProps?.message ?? DEFAULT_ERROR_MESSAGE}</Paragraph>\n </Section>\n );\n\n const section = (\n <Section isTopSection sticky={sticky} {...sectionProps}>\n {children}\n </Section>\n );\n\n return (\n <ErrorBoundary\n fallback={\n isStacked ? (\n errorFallback\n ) : (\n <CardContainer {...containerProps}>{errorFallback}</CardContainer>\n )\n }\n onError={erroredProps?.onError ?? ((error) => captureException(error))}\n >\n {isStacked ? (\n <>{errored ? <>{errorFallback}</> : <>{section}</>}</>\n ) : (\n <CardContainer {...containerProps}>\n {errored ? <>{errorFallback}</> : <>{section}</>}\n </CardContainer>\n )}\n </ErrorBoundary>\n );\n};\n\nexport default Object.assign(Card, {\n Section: PublicSection,\n Stacked: Stacked,\n});\n"],"mappings":"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"}

package/dist/components/DatePicker/index.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"index.cjs","names":["Spacing","Typography","IconButton","Typography","Color","BorderRadius","Color","Typography","GregorianCalendar","ArrowLeftIcon","ArrowRightIcon","isFocused","Color","Spacing","inputMixin","isFocusedVisible","isNotDisabled","focusWithinOutline","OpenButton","Popover","Z_INDICES","VisuallyHidden","MenuItem","isNotDisabled","isHovered","isFocused","Color","Settings","MenuList","Spacing","BorderRadius","Card","Color","Settings","ArrowLeftIcon","ArrowRightIcon","RangeCalendarPresets","VisuallyHidden","FormLabel","Spacing","Typography","ClearButton","isDisabled","Settings","CalendarDate","Popover","CircleXInverseIcon","VisuallyHidden"],"sources":["../../../components/DatePicker/Calendar/CalendarBase.tsx","../../../components/DatePicker/Calendar/CalendarCell.tsx","../../../components/DatePicker/Calendar/CalendarGrid.tsx","../../../components/DatePicker/common.ts","../../../components/DatePicker/Calendar/Calendar.tsx","../../../components/DatePicker/DateField.tsx","../../../components/DatePicker/DatePicker.tsx","../../../components/DatePicker/Calendar/RangeCalendarPresets.tsx","../../../components/DatePicker/Calendar/RangeCalendar.tsx","../../../components/DatePicker/DateRangePicker.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { useButton } from 'react-aria';\nimport styled from 'styled-components';\n\nimport { Spacing, Typography } from '@persona/design-tokens';\nimport { IconButton } from 'design-system/components/Button';\nimport type { IconButtonProps } from 'design-system/components/Button/IconButton';\n\nexport const CalendarContainer = styled.div`\n display: inline-block;\n`;\n\nexport const CalendarHeader = styled.div`\n display: flex;\n align-items: center;\n margin-bottom: ${Spacing[2]};\n`;\n\nexport const CalendarHeading = styled.div`\n ${Typography.TextLargeBold};\n flex: 1;\n text-align: center;\n`;\n\nconst StyledCalendarButton = styled(IconButton)`\n width: 32px;\n height: 32px;\n`;\n\nexport const CalendarButton = (props: IconButtonProps) => {\n const ref = useRef();\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n const { buttonProps } = useButton(props, ref);\n\n return (\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n <StyledCalendarButton {...buttonProps} className={props.className} ref={ref}>\n {props.children}\n </StyledCalendarButton>\n );\n};\n","import { type CalendarDate, type DateValue, isSameDay, isSameMonth } from '@internationalized/date';\nimport { useRef } from 'react';\nimport { useCalendarCell } from 'react-aria';\nimport type { CalendarState, RangeCalendarState } from 'react-stately';\nimport styled, { css } from 'styled-components';\n\nimport { BorderRadius, Color, Typography } from '@persona/design-tokens';\n\nconst CalendarCellContainer = styled.td`\n text-align: center;\n width: 38px;\n height: 38px;\n padding: 0px;\n`;\n\ninterface CalendarCellButtonProps {\n isSelected?: boolean;\n isSelectionStart?: boolean;\n isSelectionEnd?: boolean;\n isInvalid?: boolean;\n isDisabled?: boolean;\n}\n\nconst CalendarCellButton = styled.button<CalendarCellButtonProps>`\n ${Typography.TextMedium};\n border-style: none;\n padding: 0;\n background: none;\n width: 100%;\n height: 100%;\n cursor: pointer;\n position: relative;\n\n ${({ isSelected }) =>\n isSelected &&\n css`\n background: ${Color.CorePurple100};\n `}\n\n ${({ isSelectionStart }) =>\n isSelectionStart &&\n css`\n background: ${Color.BackgroundButtonPrimary};\n color: ${Color.TextInverse};\n border-top-left-radius: ${BorderRadius.Sm};\n border-bottom-left-radius: ${BorderRadius.Sm};\n `}\n\n ${({ isSelectionEnd }) =>\n isSelectionEnd &&\n css`\n background: ${Color.BackgroundButtonPrimary};\n color: ${Color.TextInverse};\n border-top-right-radius: ${BorderRadius.Sm};\n border-bottom-right-radius: ${BorderRadius.Sm};\n `}\n\n ${({ isDisabled }) =>\n isDisabled &&\n css`\n color: ${Color.CoreSlate300};\n `}\n\n ${({ isInvalid }) =>\n isInvalid &&\n css`\n background: ${Color.BackgroundButtonDanger};\n color: ${Color.TextInverse};\n `}\n\n &:focus-visible {\n outline: 2px solid ${Color.BorderFocus};\n outline-offset: -2px;\n box-shadow: ${Color.PrimaryWhite} 0px 0px 0px 3px inset;\n z-index: 1;\n }\n`;\n\ninterface CalendarCellProps {\n state: CalendarState | RangeCalendarState;\n date: CalendarDate;\n currentMonth: DateValue;\n}\n\nconst CalendarCell = ({ state, date, currentMonth }: CalendarCellProps) => {\n const ref = useRef();\n const { cellProps, buttonProps, isSelected, isInvalid, isDisabled, formattedDate } =\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n useCalendarCell({ date }, state, ref);\n\n const highlightedRange = 'highlightedRange' in state && state.highlightedRange;\n\n const isOutsideMonth = !isSameMonth(currentMonth, date);\n const isSelectionStart = highlightedRange ? isSameDay(date, highlightedRange.start) : isSelected;\n const isSelectionEnd = highlightedRange ? isSameDay(date, highlightedRange.end) : isSelected;\n\n return (\n <CalendarCellContainer {...cellProps}>\n <CalendarCellButton\n {...buttonProps}\n hidden={isOutsideMonth}\n isSelected={isSelected}\n isSelectionStart={isSelectionStart}\n isSelectionEnd={isSelectionEnd}\n isInvalid={isInvalid}\n isDisabled={isDisabled}\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n ref={ref}\n >\n {formattedDate}\n </CalendarCellButton>\n </CalendarCellContainer>\n );\n};\n\nexport default CalendarCell;\n","import { type DateDuration, endOfMonth, getWeeksInMonth } from '@internationalized/date';\nimport { useCalendarGrid, useLocale } from 'react-aria';\nimport type { CalendarState, RangeCalendarState } from 'react-stately';\nimport styled from 'styled-components';\n\nimport { Color, Typography } from '@persona/design-tokens';\n\nimport CalendarCell from './CalendarCell';\n\nconst CalendarGridContainer = styled.table`\n width: 266px;\n border-spacing: 0px;\n border-collapse: collapse;\n\n &:focus-visible {\n outline: 2px solid ${Color.BorderFocus};\n outline-offset: 1px;\n }\n`;\n\nconst CalendarGridDayHeader = styled.th`\n ${Typography.TextMedium};\n color: ${Color.TextSecondary};\n`;\n\ninterface CalendarGridProps {\n state: CalendarState | RangeCalendarState;\n offset?: DateDuration;\n skipFromTabOrder?: boolean;\n}\n\nconst CalendarGrid = ({ state, offset = {}, skipFromTabOrder = false }: CalendarGridProps) => {\n const { locale } = useLocale();\n const startDate = state.visibleRange.start.add(offset);\n const endDate = endOfMonth(startDate);\n\n const { gridProps, headerProps, weekDays } = useCalendarGrid(\n {\n startDate,\n endDate,\n },\n state,\n );\n\n const weeksInMonth = getWeeksInMonth(startDate, locale);\n\n // Remove second calendar grid from tab order - use arrow keys to navigate between months\n const modifiedGridProps = skipFromTabOrder ? { ...gridProps, tabIndex: -1 } : gridProps;\n\n return (\n <CalendarGridContainer {...modifiedGridProps}>\n <thead {...headerProps}>\n <tr>\n {weekDays.map((day, index) => (\n <CalendarGridDayHeader key={index}>{day}</CalendarGridDayHeader>\n ))}\n </tr>\n </thead>\n <tbody>\n {[...new Array(weeksInMonth).keys()].map((weekIndex) => (\n <tr key={weekIndex}>\n {state\n .getDatesInWeek(weekIndex, startDate)\n .map((date, i) =>\n date ? (\n <CalendarCell key={i} state={state} date={date} currentMonth={startDate} />\n ) : (\n <td key={i} />\n ),\n )}\n </tr>\n ))}\n </tbody>\n </CalendarGridContainer>\n );\n};\n\nexport default CalendarGrid;\n","import { GregorianCalendar } from '@internationalized/date';\n\nexport const createCalendar = () => new GregorianCalendar();\n","import type { Ref } from 'react';\nimport { type AriaCalendarProps, type DateValue, useCalendar, useLocale } from 'react-aria';\nimport { useCalendarState } from 'react-stately';\n\nimport { ArrowLeftIcon, ArrowRightIcon } from '@persona/icons';\nimport {\n CalendarButton,\n CalendarContainer,\n CalendarHeader,\n CalendarHeading,\n} from 'design-system/components/DatePicker/Calendar/CalendarBase';\nimport CalendarGrid from 'design-system/components/DatePicker/Calendar/CalendarGrid';\nimport { createCalendar } from 'design-system/components/DatePicker/common';\n\ninterface CalendarProps extends AriaCalendarProps<DateValue> {\n calendarRef?: Ref<HTMLDivElement>;\n}\n\nconst Calendar = (props: CalendarProps) => {\n const { locale } = useLocale();\n const state = useCalendarState({ ...props, locale, createCalendar });\n const { calendarProps, prevButtonProps, nextButtonProps, title } = useCalendar(props, state);\n\n return (\n <CalendarContainer {...calendarProps} ref={props.calendarRef}>\n <CalendarHeader>\n <CalendarButton {...prevButtonProps}>\n <ArrowLeftIcon />\n </CalendarButton>\n <CalendarHeading>{title}</CalendarHeading>\n <CalendarButton {...nextButtonProps}>\n <ArrowRightIcon />\n </CalendarButton>\n </CalendarHeader>\n <CalendarGrid state={state} />\n </CalendarContainer>\n );\n};\n\nexport default Calendar;\n","import type { DateValue } from '@internationalized/date';\nimport { type AriaDateFieldProps, useDateField, useDateSegment } from '@react-aria/datepicker';\nimport { useLocale } from '@react-aria/i18n';\nimport { mergeRefs } from '@react-aria/utils';\nimport {\n type DateFieldState,\n type DateSegment as DateSegmentObj,\n type SegmentType,\n useDateFieldState,\n} from '@react-stately/datepicker';\nimport { forwardRef, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { Color, Spacing } from '@persona/design-tokens';\nimport { createCalendar } from 'design-system/components/DatePicker/common';\nimport { isFocused, isFocusedVisible, isNotDisabled } from 'design-system/lib/pseudoClass';\nimport { focusWithinOutline } from 'design-system/mixins/focus';\nimport inputMixin, { type InputMixinProps, type InputSizes } from 'design-system/mixins/input';\nimport type PseudoClassProps from 'design-system/types/PseudoClassProps';\n\ntype DateSegmentContainerProps = { $isComma?: boolean; $isTimezone?: boolean } & PseudoClassProps;\nconst DateSegmentContainer = styled.div<DateSegmentContainerProps>`\n font-variant-numeric: tabular-nums;\n box-sizing: content-box;\n text-align: end;\n\n ${isFocused} {\n outline: 2px solid ${Color.BorderFocus};\n outline-offset: 1px;\n background-color: ${Color.CorePurple200};\n }\n\n ${({ $isComma, $isTimezone }) =>\n ($isComma || $isTimezone) &&\n css`\n margin-left: 0.25ch;\n margin-right: 0.25ch;\n `}\n\n ${({ $isTimezone }) =>\n $isTimezone &&\n css`\n color: ${Color.TextSecondary};\n pointer-events: none;\n\n &:focus {\n outline: none;\n background-color: transparent;\n }\n `}\n`;\n\ntype DateSegmentPlaceholderProps = { isPlaceholder?: boolean; type: SegmentType };\nconst DateSegmentPlaceholder = styled.span<DateSegmentPlaceholderProps>`\n display: block;\n width: 100%;\n pointer-events: none;\n\n &:focus {\n outline: none;\n }\n\n ${({ isPlaceholder }) =>\n isPlaceholder\n ? css`\n height: 100%;\n color: ${({ theme }) => theme.color.text.tertiary};\n `\n : css`\n visibility: hidden;\n height: 0;\n `}\n ${({ type }) =>\n type === 'literal' &&\n css`\n padding-left: ${Spacing[1]};\n padding-right: ${Spacing[1]};\n `}\n ${({ type, isPlaceholder }) =>\n type === 'month' &&\n isPlaceholder &&\n css`\n width: 3ch;\n `}\n`;\n\ninterface DateSegmentProps {\n segment: DateSegmentObj;\n state: DateFieldState;\n}\n\nfunction DateSegment({ segment, state }: DateSegmentProps) {\n const ref = useRef();\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n const { segmentProps } = useDateSegment(segment, state, ref);\n\n let minWidth: string;\n\n switch (segment.type) {\n case 'dayPeriod': {\n minWidth = '2.75ch';\n break;\n }\n default: {\n minWidth = `${segment.maxValue != null && String(segment.maxValue).length + 0.25}ch`;\n break;\n }\n }\n\n const isComma = segment.type === 'literal' && segment.text === ', ';\n const isTimezone = segment.type === 'timeZoneName';\n\n return (\n <DateSegmentContainer\n {...segmentProps}\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n ref={ref}\n style={{\n ...segmentProps.style,\n minWidth,\n }}\n $isComma={isComma}\n $isTimezone={isTimezone}\n {...(isTimezone && { tabIndex: -1, role: 'presentation' })}\n >\n {/* Always reserve space for the placeholder, to prevent layout shift when editing. */}\n {segment.placeholder && (\n <DateSegmentPlaceholder\n aria-hidden='true'\n isPlaceholder={segment.isPlaceholder}\n type={segment.type}\n >\n {segment.placeholder}\n </DateSegmentPlaceholder>\n )}\n {segment.isPlaceholder ? '' : segment.text}\n </DateSegmentContainer>\n );\n}\n\nconst InputBox = styled.div<InputMixinProps & { $inputPosition: 'start' | 'end' }>`\n ${inputMixin};\n display: flex;\n padding-left: ${Spacing[2]};\n padding-right: ${Spacing[2]};\n line-height: 1;\n position: relative;\n\n &${isFocusedVisible}${isNotDisabled} {\n position: relative;\n z-index: 1;\n }\n\n ${focusWithinOutline}\n\n ${({ $inputPosition }) => {\n switch ($inputPosition) {\n case 'start': {\n return css`\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n `;\n }\n case 'end': {\n return css`\n margin-left: -1px;\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n `;\n }\n }\n }}\n`;\n\ninterface DateFieldProps extends AriaDateFieldProps<DateValue> {\n inputPosition?: 'start' | 'end';\n focused?: boolean;\n readOnly?: boolean;\n value?: DateValue;\n disabled?: boolean;\n size?: InputSizes;\n style?: React.CSSProperties;\n dateFieldProps?: {\n style?: React.CSSProperties;\n };\n hasError?: boolean;\n}\n\nexport const DateField = forwardRef<HTMLDivElement, DateFieldProps>(function DateField(\n props: DateFieldProps,\n forwardedRef,\n) {\n const { locale } = useLocale();\n const state = useDateFieldState({\n ...props,\n locale,\n createCalendar,\n });\n\n const ref = useRef<HTMLDivElement>();\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n const { fieldProps } = useDateField(props, state, ref);\n\n return (\n <InputBox\n {...fieldProps}\n {...(props.dateFieldProps || {})}\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n ref={mergeRefs<HTMLDivElement>(ref, forwardedRef)}\n focused={props.focused}\n disabled={props.disabled}\n aria-label={props['aria-label']}\n $size={props.size ?? 'md'}\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n $inputPosition={props.inputPosition}\n hasError={props.hasError}\n >\n {state.segments.map((segment, i) => (\n <DateSegment key={i} segment={segment} state={state} />\n ))}\n </InputBox>\n );\n});\n\nexport default DateField;\n","import type { DateValue } from '@internationalized/date';\nimport type { DatePickerProps as DatePickerBase } from '@react-types/datepicker';\nimport { type RefObject, useCallback, useRef, useState } from 'react';\nimport { mergeProps, useButton, useDatePicker, useFocusWithin, VisuallyHidden } from 'react-aria';\nimport { useDatePickerState } from 'react-stately';\n\nimport Calendar from 'design-system/components/DatePicker/Calendar/Calendar';\nimport DateField from 'design-system/components/DatePicker/DateField';\nimport Popover from 'design-system/components/Popover';\nimport { Z_INDICES } from 'design-system/lib/zindex';\nimport type { InputSizes } from 'design-system/mixins/input';\n\nexport interface DatePickerProps extends DatePickerBase<DateValue> {\n id?: string;\n dateFieldProps?: {\n style?: React.CSSProperties;\n };\n disabled?: boolean;\n size?: InputSizes;\n useModalZIndex?: boolean;\n}\n\nconst OpenButton = ({ calendarRef }: { calendarRef: RefObject<HTMLElement> }) => {\n const openCalBtnRef = useRef<HTMLButtonElement>(null);\n const { buttonProps } = useButton(\n {\n onPress: () => {\n if (calendarRef.current) {\n (\n calendarRef.current.querySelector('button[aria-label=\"Previous\"]') as HTMLButtonElement\n ).focus();\n }\n },\n },\n openCalBtnRef,\n );\n\n return <button {...buttonProps} ref={openCalBtnRef} aria-label='Open calendar' />;\n};\n\nexport const DatePicker = (props: DatePickerProps) => {\n const state = useDatePickerState(props);\n const ref = useRef<HTMLDivElement>(null);\n const fieldRef = useRef<HTMLDivElement>(null);\n const { groupProps, fieldProps, calendarProps } = useDatePicker(props, state, ref);\n const calendarRef = useRef<HTMLDivElement>(null);\n const [isClosing, setIsClosing] = useState(false);\n\n const { focusWithinProps } = useFocusWithin({\n onFocusWithin: () => {\n if (!state.isOpen && !isClosing) {\n state.setOpen(true);\n }\n },\n onBlurWithin: (e) => {\n // Close calendar if next target is not within the calendar\n if (e.relatedTarget && !calendarRef?.current?.contains(e.relatedTarget) && state.isOpen) {\n state.setOpen(false);\n }\n },\n });\n\n const handleOutsideClick = (e: Event) => {\n const target = e.target as Node;\n // Don't close if clicking on the date input itself\n if (ref.current?.contains(target)) {\n return;\n }\n if (state.isOpen) {\n state.setOpen(false);\n }\n };\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === 'Enter' && !state.isOpen) {\n event.preventDefault();\n state.setOpen(true);\n }\n },\n [state],\n );\n\n return (\n <div style={{ display: 'flex', flexDirection: 'column' }}>\n <Popover\n open={state.isOpen}\n modal={false}\n contentProps={{\n style: { zIndex: props.useModalZIndex ? Z_INDICES.modalDropdown : Z_INDICES.dropdown },\n align: 'start',\n 'aria-modal': true,\n onInteractOutside: handleOutsideClick,\n onEscapeKeyDown: () => {\n state.setOpen(false);\n },\n onCloseAutoFocus: (e: Event) => {\n // Prevent Radix's default focus restoration\n e.preventDefault();\n setIsClosing(true);\n\n // Manually restore focus to the date field\n if (fieldRef.current) {\n const firstEditableSegment = fieldRef.current.querySelector('[tabindex=\"0\"]');\n if (firstEditableSegment instanceof HTMLElement) {\n firstEditableSegment.focus();\n }\n }\n\n // Reset flag after focus is done\n requestAnimationFrame(() => setIsClosing(false));\n },\n noPadding: true,\n }}\n >\n <Popover.Trigger asChild>\n <div\n {...mergeProps(groupProps, focusWithinProps)}\n ref={ref}\n style={{ display: 'flex', position: 'relative' }}\n >\n <DateField\n ref={fieldRef}\n id={props.id}\n dateFieldProps={props.dateFieldProps}\n disabled={props.disabled}\n size={props.size}\n {...mergeProps(fieldProps, { onKeyDown: handleKeyDown })}\n value={fieldProps.value ?? undefined}\n />\n <VisuallyHidden>\n <OpenButton calendarRef={calendarRef} />\n </VisuallyHidden>\n </div>\n </Popover.Trigger>\n <Calendar\n {...{ ...calendarProps, autoFocus: undefined }}\n calendarRef={calendarRef}\n id='calendar-popover'\n />\n </Popover>\n </div>\n );\n};\n\nexport default DatePicker;\n","import {\n type CalendarDate,\n type DateValue,\n endOfMonth,\n endOfYear,\n startOfMonth,\n startOfYear,\n today,\n} from '@internationalized/date';\nimport type { RangeValue } from '@react-types/shared';\nimport { Settings } from 'luxon';\nimport { memo, useRef } from 'react';\nimport { mergeProps, useButton } from 'react-aria';\nimport type { RangeCalendarState } from 'react-stately';\nimport styled, { css } from 'styled-components';\n\nimport { Color } from '@persona/design-tokens';\nimport { MenuItem, MenuList } from 'design-system/components/Menu';\nimport { isFocused, isHovered, isNotDisabled } from 'design-system/lib/pseudoClass';\n\ninterface DateRangePreset {\n label: string;\n range: RangeValue<CalendarDate>;\n}\n\nconst getDefaultPresets = (tz: string) => {\n const now = today(tz);\n return [\n {\n label: 'Last 7 days',\n range: {\n start: now.subtract({ days: 7 }),\n end: now,\n },\n },\n {\n label: 'Last 14 days',\n range: {\n start: now.subtract({ days: 14 }),\n end: now,\n },\n },\n {\n label: 'Last 30 days',\n range: {\n start: now.subtract({ days: 30 }),\n end: now,\n },\n },\n {\n label: 'This month',\n range: {\n start: startOfMonth(now),\n // Effectively, this should always be today, since we can't look forward\n end: now,\n },\n },\n {\n label: 'Last month',\n range: {\n start: startOfMonth(now.subtract({ months: 1 })),\n end: endOfMonth(now.subtract({ months: 1 })),\n },\n },\n {\n label: 'This year',\n range: {\n start: startOfYear(now),\n end: now,\n },\n },\n {\n label: 'Last year',\n range: {\n start: startOfYear(now.subtract({ years: 1 })),\n end: endOfYear(now.subtract({ years: 1 })),\n },\n },\n ];\n};\n\n/**\n * Compare two date values by year/month/day only, ignoring time components.\n */\nconst datesMatchByDay = (a: CalendarDate, b: DateValue): boolean =>\n a.year === b.year && a.month === b.month && a.day === b.day;\n\nconst Container = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\ninterface PresetButtonProps {\n state: RangeCalendarState;\n preset: DateRangePreset;\n isSelected: boolean;\n setDateMode: (mode: 'start' | 'end' | null) => void;\n}\n\nconst StyledPresetButton = styled(MenuItem)`\n ${({ selected }) =>\n !selected &&\n css`\n &${isNotDisabled}${isHovered}, &${isNotDisabled}${isFocused} {\n background-color: transparent;\n }\n `}\n\n &:focus-visible {\n // MenuItems default to outline: none, so we need to override it here.\n outline: 2px solid ${Color.BorderFocus} !important;\n outline-offset: 1px;\n }\n`;\n\ninterface DateRangePickerPresetsProps {\n presetsFn?: (tz: string) => DateRangePreset[];\n state: RangeCalendarState;\n setDateMode: (mode: 'start' | 'end' | null) => void;\n}\n\nconst PresetButton = ({ state, preset, isSelected, setDateMode, ...props }: PresetButtonProps) => {\n const ref = useRef<HTMLDivElement>();\n const { buttonProps } = useButton(\n {\n onPress: () => {\n state.setValue(preset.range);\n setDateMode(null);\n },\n },\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n ref,\n );\n\n // Strip aria-current from useButton's props so it doesn't override MenuItem's.\n const { 'aria-current': _ariaCurrent, ...mergedProps } = mergeProps(props, buttonProps);\n\n return (\n <StyledPresetButton\n selected={isSelected}\n {...mergedProps}\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n ref={ref}\n >\n {preset.label}\n </StyledPresetButton>\n );\n};\n\nconst DateRangePickerPresets = ({\n presetsFn = getDefaultPresets,\n state,\n setDateMode,\n ...props\n}: DateRangePickerPresetsProps) => {\n // The reason that we need to do this at render time is because the default timezone for moment is set after\n // the current User's timezone is loaded. Thus we woudln't be getting the right timezone unless if we defer getting\n // the timezone.\n const presets = presetsFn(Settings.defaultZone.name);\n\n // First match wins — prevents multiple presets appearing selected when ranges overlap.\n const { value } = state;\n const selectedPresetIndex = value\n ? presets.findIndex(\n (preset) =>\n datesMatchByDay(preset.range.start, value.start) &&\n datesMatchByDay(preset.range.end, value.end),\n )\n : -1;\n\n return (\n <Container {...props}>\n <MenuList aria-label='Date range presets'>\n {presets.map((preset, i) => (\n <PresetButton\n key={i}\n preset={preset}\n state={state}\n setDateMode={setDateMode}\n isSelected={i === selectedPresetIndex}\n />\n ))}\n </MenuList>\n </Container>\n );\n};\n\n// Memoize to prevent re-renders when irrelevant state properties change\n// Only re-render when the actual selected date range (state.value) changes\nconst arePropsEqual = (\n prevProps: DateRangePickerPresetsProps,\n nextProps: DateRangePickerPresetsProps,\n) => {\n // Only care about the selected date range, not internal calendar state like isInvalid, visibleRange, etc.\n const prevValue = prevProps.state.value;\n const nextValue = nextProps.state.value;\n\n // If both are null/undefined, they're equal\n if (!prevValue && !nextValue) {\n return true;\n }\n // If only one is null/undefined, they're different\n if (!prevValue || !nextValue) {\n return false;\n }\n\n // Compare the actual date values\n return (\n prevValue.start.compare(nextValue.start) === 0 && prevValue.end.compare(nextValue.end) === 0\n );\n};\n\nexport default memo(DateRangePickerPresets, arePropsEqual);\n","import { type CalendarDate, type DateValue, toCalendarDateTime } from '@internationalized/date';\nimport { range } from 'lodash/fp';\nimport { Settings } from 'luxon';\nimport { type Ref, useRef } from 'react';\nimport {\n type DateRange,\n type RangeCalendarProps as RangeCalendarBaseProps,\n useDateFormatter,\n useLocale,\n useRangeCalendar,\n VisuallyHidden,\n} from 'react-aria';\nimport { type RangeCalendarState, useRangeCalendarState } from 'react-stately';\nimport styled from 'styled-components';\n\nimport { BorderRadius, Color, Spacing } from '@persona/design-tokens';\nimport { ArrowLeftIcon, ArrowRightIcon } from '@persona/icons';\nimport Card from 'design-system/components/Card';\nimport {\n CalendarButton,\n CalendarContainer,\n CalendarHeader,\n CalendarHeading,\n} from 'design-system/components/DatePicker/Calendar/CalendarBase';\nimport CalendarGrid from 'design-system/components/DatePicker/Calendar/CalendarGrid';\nimport RangeCalendarPresets from 'design-system/components/DatePicker/Calendar/RangeCalendarPresets';\nimport { createCalendar } from 'design-system/components/DatePicker/common';\n\nconst RangeCalendarHeader = styled(CalendarHeader)`\n gap: ${Spacing[5]};\n`;\n\nconst CalendarHeaderMonth = styled.div`\n display: grid;\n grid-template-columns: minmax(auto, 1fr) auto minmax(auto, 1fr);\n grid-template-areas: 'prev title next';\n width: 266px;\n align-items: center;\n`;\n\nconst CalendarGrids = styled.div`\n display: flex;\n gap: ${Spacing[5]};\n align-items: start;\n`;\n\nconst PrevButton = styled(CalendarButton)`\n grid-area: prev;\n justify-self: start;\n border-radius: ${BorderRadius.Sm};\n`;\n\nconst NextButton = styled(CalendarButton)`\n grid-area: next;\n justify-self: end;\n border-radius: ${BorderRadius.Sm};\n`;\n\nconst RangeCalendarHeading = styled(CalendarHeading)`\n grid-area: title;\n`;\n\nconst RangeCalendarContainer = styled.div`\n display: flex;\n`;\n\nconst PresetsContainer = styled(Card.Body)`\n border-right: 1px solid ${Color.BorderHairline};\n`;\n\nexport interface RangeCalendarProps extends RangeCalendarBaseProps<DateValue> {\n minDate?: RangeCalendarBaseProps<DateValue>['minValue'];\n maxDate?: RangeCalendarBaseProps<DateValue>['maxValue'];\n calendarRef?: Ref<HTMLDivElement>;\n hidePresets?: boolean;\n onSelectDate?: (d: CalendarDate) => void;\n setDateMode: (mode: 'start' | 'end' | null) => void;\n /**\n * From setValue of DateRangePicker\n */\n setValue: (value: DateRange | null) => void;\n granularity: 'day' | 'hour' | 'minute' | 'second';\n}\n\nconst RangeCalendar = ({\n calendarRef,\n onSelectDate,\n minDate,\n maxDate,\n hidePresets,\n setDateMode,\n setValue,\n granularity,\n ...props\n}: RangeCalendarProps) => {\n const visibleMonths = 2;\n const { locale } = useLocale();\n // Must gather the TZ from the user's settings.\n const timezoneName = Settings.defaultZone.name;\n const rangeCalendarState = useRangeCalendarState({\n ...props,\n minValue: minDate,\n maxValue: maxDate,\n visibleDuration: {\n months: visibleMonths,\n },\n locale,\n createCalendar,\n });\n\n const state: RangeCalendarState = {\n ...rangeCalendarState,\n setValue: (value) => {\n if (!value || granularity === 'day') {\n rangeCalendarState.setValue(value);\n return;\n }\n\n setValue({\n start: toCalendarDateTime(value.start),\n end: toCalendarDateTime(value.end),\n });\n },\n selectDate: (date) => {\n if (onSelectDate) {\n onSelectDate(date);\n rangeCalendarState.setAnchorDate(null);\n } else {\n rangeCalendarState.selectDate(date);\n }\n },\n };\n\n const ref = useRef();\n\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n const { calendarProps, prevButtonProps, nextButtonProps } = useRangeCalendar(props, state, ref);\n\n const monthDateFormatter = useDateFormatter({\n month: 'long',\n year: 'numeric',\n timeZone: timezoneName,\n });\n\n const monthHeaders = range(0, visibleMonths).map((i) => {\n return (\n <CalendarHeaderMonth key={`calendar-month-${i}`}>\n {i === 0 && (\n <PrevButton {...prevButtonProps}>\n <ArrowLeftIcon />\n </PrevButton>\n )}\n <RangeCalendarHeading aria-hidden>\n {monthDateFormatter.format(\n state.visibleRange.start.add({ months: i }).toDate(timezoneName),\n )}\n </RangeCalendarHeading>\n {i === visibleMonths - 1 && (\n <NextButton {...nextButtonProps}>\n <ArrowRightIcon />\n </NextButton>\n )}\n </CalendarHeaderMonth>\n );\n });\n\n const monthGrids = range(0, visibleMonths).map((i) => {\n return (\n <CalendarGrid\n key={`calendar-grid-${i}`}\n state={state}\n offset={{ months: i }}\n skipFromTabOrder={i > 0}\n />\n );\n });\n\n return (\n <RangeCalendarContainer ref={calendarRef}>\n {!hidePresets && (\n <PresetsContainer padding={Spacing[3]}>\n <RangeCalendarPresets state={state} setDateMode={setDateMode} />\n </PresetsContainer>\n )}\n <Card.Body padding={Spacing[3]}>\n {/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */}\n <CalendarContainer {...calendarProps} ref={ref}>\n {/* Calendar header is separate from grid like this to facilitate a11y. */}\n <RangeCalendarHeader>\n <VisuallyHidden isFocusable={false}>{calendarProps['aria-label']}</VisuallyHidden>\n {monthHeaders}\n </RangeCalendarHeader>\n <CalendarGrids>{monthGrids}</CalendarGrids>\n </CalendarContainer>\n </Card.Body>\n </RangeCalendarContainer>\n );\n};\n\nexport default RangeCalendar;\n","import {\n CalendarDate,\n type DateValue,\n parseAbsolute,\n toCalendarDateTime,\n} from '@internationalized/date';\nimport type { DateRangePickerProps as DateRangePickerBase } from '@react-types/datepicker';\nimport type { AriaLabelingProps, RangeValue } from '@react-types/shared';\nimport { type DateTime, Settings } from 'luxon';\nimport { type MutableRefObject, useCallback, useEffect, useRef, useState } from 'react';\nimport {\n mergeProps,\n useButton,\n useDateRangePicker,\n useFocusWithin,\n usePress,\n VisuallyHidden,\n} from 'react-aria';\nimport { useDateRangePickerState } from 'react-stately';\nimport styled from 'styled-components';\n\nimport { Spacing, Typography } from '@persona/design-tokens';\nimport { CircleXInverseIcon } from '@persona/icons';\nimport RangeCalendar from 'design-system/components/DatePicker/Calendar/RangeCalendar';\nimport DateField from 'design-system/components/DatePicker/DateField';\nimport { FormLabel } from 'design-system/components/FormControl';\nimport { ClearButton } from 'design-system/components/Input';\nimport Popover from 'design-system/components/Popover';\nimport { isDisabled } from 'design-system/lib/pseudoClass';\nimport type { InputSizes } from 'design-system/mixins/input';\n\nconst DateRangeContainer = styled.div`\n display: inline-flex;\n flex-direction: column;\n width: 100%;\n`;\n\nconst DateRangeInputs = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst CustomFormLabel = styled(FormLabel)`\n margin-bottom: ${Spacing[2]};\n ${Typography.TextMediumBold};\n`;\n\nexport type DateRange = {\n startDate?: DateTime;\n endDate?: DateTime;\n};\n\nexport interface DateRangePickerProps extends DateRangePickerBase<DateValue>, AriaLabelingProps {\n dateRange: DateRange;\n onChange: (range: RangeValue<DateValue> | null) => void;\n disabled?: boolean;\n size?: InputSizes;\n minDate?: DateValue;\n maxDate?: DateValue;\n label?: string | null;\n dataTest?: string;\n id?: string;\n hidePresets?: boolean;\n className?: string;\n /**\n * Whether or not to display clear button\n */\n showClear?: boolean;\n /**\n * Called when the clear button is clicked/pressed\n */\n onClear?: () => void;\n /**\n * z-index of the calendar popover\n */\n calendarZIndex?: number;\n}\n\nconst OpenButton = ({ calendarRef }: { calendarRef: MutableRefObject<HTMLElement | null> }) => {\n const openCalBtnRef = useRef();\n const { buttonProps } = useButton(\n {\n onPress: () => {\n if (calendarRef.current) {\n (\n calendarRef.current.querySelector('button[aria-label=\"Previous\"]') as HTMLButtonElement\n ).focus();\n }\n },\n },\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n openCalBtnRef,\n );\n\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n return <button {...buttonProps} ref={openCalBtnRef} aria-label='Open calendar' tabIndex={-1} />;\n};\n\nconst ClearRangeButton = styled(ClearButton)`\n height: 16px;\n width: 16px;\n margin-left: ${Spacing[2]};\n\n &${isDisabled}, &:disabled {\n background-color: transparent;\n }\n`;\n\nconst DateRangePicker = ({\n granularity = 'day',\n hideTimeZone = true,\n className,\n calendarZIndex,\n ...props\n}: DateRangePickerProps) => {\n const state = useDateRangePickerState({ granularity, hideTimeZone, ...props });\n const ref = useRef<HTMLDivElement>(null);\n const startFieldRef = useRef<HTMLDivElement>(null);\n const endFieldRef = useRef<HTMLDivElement>(null);\n const [dateMode, setDateMode] = useState<'start' | 'end' | null>(null);\n const { groupProps, startFieldProps, endFieldProps, calendarProps, labelProps } =\n useDateRangePicker({ granularity, hideTimeZone, ...props }, state, ref);\n\n useEffect(() => {\n // If not set, return early\n if (!props.dateRange.startDate || !props.dateRange.endDate) {\n return;\n }\n\n if (!props.dateRange.startDate.isValid || !props.dateRange.endDate.isValid) {\n return;\n }\n\n // Find out the real time by adjusting the date to the user's timezone\n const startDate = props.dateRange.startDate.setZone(Settings.defaultZone);\n const endDate = props.dateRange.endDate.setZone(Settings.defaultZone);\n\n if (!startDate.isValid || !endDate.isValid) {\n return;\n }\n\n // Months are 1-indexed, no translations need to happen to CalendarDates\n const startCalendar = state.hasTime\n ? parseAbsolute(startDate.toISO(), Settings.defaultZone.name)\n : new CalendarDate(startDate.year, startDate.month, startDate.day);\n const endCalendar = state.hasTime\n ? parseAbsolute(endDate.toISO(), Settings.defaultZone.name)\n : new CalendarDate(endDate.year, endDate.month, endDate.day);\n\n const dateRangeV2: RangeValue<DateValue> = {\n start: startCalendar,\n end: endCalendar,\n };\n\n state.setValue(dateRangeV2);\n }, [props.dateRange.startDate, props.dateRange.endDate, granularity]);\n\n // Auto-close overlay when a complete range is selected (e.g., from presets with time enabled)\n const prevValueRef = useRef<RangeValue<DateValue | null> | null>(state.value);\n useEffect(() => {\n const prevValue = prevValueRef.current;\n const currentValue = state.value;\n\n // Update ref for next comparison\n prevValueRef.current = currentValue;\n\n // Close overlay only if BOTH start and end changed simultaneously to DIFFERENT dates (e.g., preset selection)\n // Do not close during manual date selection where:\n // 1. Only one date changes at a time, OR\n // 2. Both dates are set to the same value (initial selection from empty state)\n // Use value comparison (.compare) instead of object identity to handle controlled component re-renders\n const startChanged =\n prevValue?.start && currentValue?.start\n ? prevValue.start.compare(currentValue.start) !== 0\n : prevValue?.start !== currentValue?.start;\n const endChanged =\n prevValue?.end && currentValue?.end\n ? prevValue.end.compare(currentValue.end) !== 0\n : prevValue?.end !== currentValue?.end;\n const datesAreDifferent =\n currentValue?.start &&\n currentValue?.end &&\n currentValue.start.compare(currentValue.end) !== 0;\n\n if (state.isOpen && startChanged && endChanged && datesAreDifferent) {\n state.setOpen(false);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [state.value, state.isOpen]);\n\n const calendarRef = useRef<HTMLDivElement>(null);\n const [isClosing, setIsClosing] = useState(false);\n\n const { focusWithinProps: startFocusWithinProps } = useFocusWithin({\n onFocusWithin: () => {\n setDateMode('start');\n if (!state.isOpen && !isClosing) {\n state.setOpen(true);\n }\n },\n });\n\n const { focusWithinProps: endFocusWithinProps } = useFocusWithin({\n onFocusWithin: () => {\n setDateMode('end');\n if (!state.isOpen && !isClosing) {\n state.setOpen(true);\n }\n },\n });\n\n const { focusWithinProps: containerFocusProps } = useFocusWithin({\n onBlurWithin: (e) => {\n // Clear dateMode when focus leaves the entire date range picker\n // This prevents the blue outline from persisting after Tab\n if (!calendarRef?.current?.contains(e.relatedTarget)) {\n setDateMode(null);\n // Close overlay when focus leaves the component entirely\n // Provides intuitive UX: user tabs away = done with date selection\n if (state.isOpen) {\n state.setOpen(false);\n }\n }\n },\n });\n\n const handleOutsideClick = (e: Event) => {\n const target = e.target as Node;\n // Don't close if clicking on the date inputs themselves\n if (ref.current?.contains(target)) {\n return;\n }\n\n // When there's a click outside of the containers + calendars, reset the highlighted date\n // Only close the calendar if it's open\n // Note: Radix UI's onInteractOutside already ensures the interaction is outside the popover content\n if (state.isOpen) {\n setDateMode(null);\n state.setOpen(false);\n }\n };\n\n const { pressProps: pressClearProps } = usePress({\n onPress: () => {\n state.setValue(null);\n\n if (props.onClear) {\n props.onClear();\n }\n },\n });\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === 'Enter' && !state.isOpen) {\n event.preventDefault(); // Prevent form submission\n state.setOpen(true);\n }\n },\n [state],\n );\n\n const isValueNull = state.value && state.value.start == null && state.value.end == null;\n\n return (\n <DateRangeContainer data-test={props.dataTest} className={className}>\n {props.label && <CustomFormLabel {...labelProps}>{props.label}</CustomFormLabel>}\n <Popover\n open={state.isOpen}\n modal={false}\n contentProps={{\n align: 'start',\n 'aria-modal': true,\n 'aria-label': props['aria-label'] ?? undefined,\n onInteractOutside: handleOutsideClick,\n onEscapeKeyDown: () => {\n state.setOpen(false);\n // Restore focus to the date field for keyboard users\n if (dateMode) {\n const fieldRef = dateMode === 'start' ? startFieldRef : endFieldRef;\n const seg = fieldRef.current?.querySelector('[tabindex=\"0\"]');\n if (seg instanceof HTMLElement) {\n seg.focus();\n }\n }\n },\n onCloseAutoFocus: (e: Event) => {\n // Prevent Radix's default focus restoration — Escape handles its own above.\n e.preventDefault();\n setIsClosing(true);\n requestAnimationFrame(() => setIsClosing(false));\n },\n noPadding: true,\n style: { zIndex: calendarZIndex },\n }}\n >\n <Popover.Trigger asChild>\n <DateRangeInputs {...mergeProps(groupProps, containerFocusProps)} ref={ref}>\n {/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */}\n <DateField\n ref={startFieldRef}\n inputPosition='start'\n focused={dateMode === 'start'}\n disabled={props.disabled}\n size={props.size}\n {...mergeProps(startFieldProps, startFocusWithinProps, { onKeyDown: handleKeyDown })}\n />\n {/* @ts-expect-error [strict-migration] The following line is not strict; please fix! */}\n <DateField\n ref={endFieldRef}\n inputPosition='end'\n focused={dateMode === 'end'}\n disabled={props.disabled}\n size={props.size}\n {...mergeProps(endFieldProps, endFocusWithinProps, { onKeyDown: handleKeyDown })}\n />\n {props.showClear && (\n <ClearRangeButton\n {...pressClearProps}\n disabled={isValueNull}\n aria-label='Clear date range'\n >\n <CircleXInverseIcon />\n </ClearRangeButton>\n )}\n <VisuallyHidden>\n <OpenButton calendarRef={calendarRef} />\n </VisuallyHidden>\n </DateRangeInputs>\n </Popover.Trigger>\n <RangeCalendar\n {...{ ...calendarProps, autoFocus: undefined }}\n calendarRef={calendarRef}\n setDateMode={setDateMode}\n setValue={state.setValue}\n granularity={granularity}\n hidePresets={props.hidePresets}\n onSelectDate={(dateVal) => {\n /**\n * Please use caution when editing the logic below.\n * It is specific to react-aria's date picker and can be brittle.\n */\n if (dateVal) {\n const date = state.hasTime ? toCalendarDateTime(dateVal) : dateVal;\n\n if (dateMode === 'start') {\n // Handle a case where we've deleted both dates\n if (state.value.end == null && state.value.start == null) {\n state.setValue({\n start: date,\n end: date,\n });\n }\n // If end becomes the start\n else if (state.value.end && date.compare(state.value.end) > 0) {\n state.setValue({\n start: state.value.end,\n end: state.value.end.set(dateVal), // Preserve time\n });\n } else {\n state.setValue({\n // if start is not set, set it to the date or date + time value, otherwise set the dateVal to preserve time\n start: state.value.start == null ? date : state.value.start.set(dateVal),\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n\n end: state.value.end,\n });\n }\n setDateMode('end');\n } else {\n // Handle a case where we've deleted both dates\n if (state.value.end == null && state.value.start == null) {\n state.setValue({\n start: date,\n end: date,\n });\n }\n // If start becomes the end\n else if (state.value.start && date.compare(state.value.start) < 0) {\n state.setValue({\n start: state.value.start.set(dateVal),\n end: state.value.start,\n });\n } else {\n state.setValue({\n /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n start: state.value.start,\n // if end is not set, set it to the date or date + time value, otherwise set the dateVal to preserve time\n end: state.value.end == null ? date : state.value.end.set(dateVal),\n });\n }\n // Close popover and keep focus on end field\n state.setOpen(false);\n }\n }\n }}\n minDate={props.minDate}\n maxDate={props.maxDate}\n />\n </Popover>\n </DateRangeContainer>\n );\n};\n\nexport default DateRangePicker;\n"],"mappings":"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"}