@wordpress/dataviews 16.0.0 → 17.0.0

package/build/components/dataviews-layouts/list/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/dataviews-layouts/list/index.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId, usePrevious } from '@wordpress/compose';\nimport {\n\tButton,\n\tprivateApis as componentsPrivateApis,\n\tSpinner,\n\tComposite,\n} from '@wordpress/components';\nimport {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n\tuseContext,\n} from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { moreVertical } from '@wordpress/icons';\nimport { useRegistry } from '@wordpress/data';\nimport { Stack, VisuallyHidden } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../../lock-unlock';\nimport { ActionsMenuGroup, ActionModal } from '../../dataviews-item-actions';\nimport DataViewsContext from '../../dataviews-context';\nimport { useDelayedLoading } from '../../../hooks/use-delayed-loading';\nimport type {\n\tAction,\n\tNormalizedField,\n\tViewList as ViewListType,\n\tViewListProps,\n\tActionModal as ActionModalType,\n} from '../../../types';\nimport getDataByGroup from '../utils/get-data-by-group';\n\ninterface ListViewItemProps< Item > {\n\tview: ViewListType;\n\tactions: Action< Item >[];\n\tidPrefix: string;\n\tisSelected: boolean;\n\titem: Item;\n\ttitleField?: NormalizedField< Item >;\n\tmediaField?: NormalizedField< Item >;\n\tdescriptionField?: NormalizedField< Item >;\n\tonSelect: ( item: Item ) => void;\n\totherFields: NormalizedField< Item >[];\n\tonDropdownTriggerKeyDown: React.KeyboardEventHandler< HTMLButtonElement >;\n\tposinset?: number;\n}\n\nconst { Menu } = unlock( componentsPrivateApis );\n\nfunction generateItemWrapperCompositeId( idPrefix: string ) {\n\treturn `${ idPrefix }-item-wrapper`;\n}\nfunction generatePrimaryActionCompositeId(\n\tidPrefix: string,\n\tprimaryActionId: string\n) {\n\treturn `${ idPrefix }-primary-action-${ primaryActionId }`;\n}\nfunction generateDropdownTriggerCompositeId( idPrefix: string ) {\n\treturn `${ idPrefix }-dropdown`;\n}\n\nfunction PrimaryActionGridCell< Item >( {\n\tidPrefix,\n\tprimaryAction,\n\titem,\n}: {\n\tidPrefix: string;\n\tprimaryAction: Action< Item >;\n\titem: Item;\n} ) {\n\tconst registry = useRegistry();\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\n\tconst compositeItemId = generatePrimaryActionCompositeId(\n\t\tidPrefix,\n\t\tprimaryAction.id\n\t);\n\n\tconst label =\n\t\ttypeof primaryAction.label === 'string'\n\t\t\t? primaryAction.label\n\t\t\t: primaryAction.label( [ item ] );\n\n\treturn 'RenderModal' in primaryAction ? (\n\t\t<div role=\"gridcell\" key={ primaryAction.id }>\n\t\t\t<Composite.Item\n\t\t\t\tid={ compositeItemId }\n\t\t\t\trender={\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdisabled={ !! primaryAction.disabled }\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\ttext={ label }\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tonClick={ () => setIsModalOpen( true ) }\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{ isModalOpen && (\n\t\t\t\t\t<ActionModal< Item >\n\t\t\t\t\t\taction={ primaryAction }\n\t\t\t\t\t\titems={ [ item ] }\n\t\t\t\t\t\tcloseModal={ () => setIsModalOpen( false ) }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</Composite.Item>\n\t\t</div>\n\t) : (\n\t\t<div role=\"gridcell\" key={ primaryAction.id }>\n\t\t\t<Composite.Item\n\t\t\t\tid={ compositeItemId }\n\t\t\t\trender={\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdisabled={ !! primaryAction.disabled }\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tprimaryAction.callback( [ item ], { registry } );\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</Button>\n\t\t\t\t}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nfunction ListItem< Item >( {\n\tview,\n\tactions,\n\tidPrefix,\n\tisSelected,\n\titem,\n\ttitleField,\n\tmediaField,\n\tdescriptionField,\n\tonSelect,\n\totherFields,\n\tonDropdownTriggerKeyDown,\n\tposinset,\n}: ListViewItemProps< Item > ) {\n\tconst {\n\t\tshowTitle = true,\n\t\tshowMedia = true,\n\t\tshowDescription = true,\n\t\tinfiniteScrollEnabled,\n\t} = view;\n\tconst itemRef = useRef< HTMLDivElement >( null );\n\tconst labelId = `${ idPrefix }-label`;\n\tconst descriptionId = `${ idPrefix }-description`;\n\n\tconst registry = useRegistry();\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ activeModalAction, setActiveModalAction ] = useState(\n\t\tnull as ActionModalType< Item > | null\n\t);\n\tconst handleHover: React.MouseEventHandler = ( { type } ) => {\n\t\tconst isHover = type === 'mouseenter';\n\t\tsetIsHovered( isHover );\n\t};\n\n\tconst { paginationInfo } = useContext( DataViewsContext );\n\tuseEffect( () => {\n\t\tif ( isSelected ) {\n\t\t\titemRef.current?.scrollIntoView( {\n\t\t\t\tbehavior: 'auto',\n\t\t\t\tblock: 'nearest',\n\t\t\t\tinline: 'nearest',\n\t\t\t} );\n\t\t}\n\t}, [ isSelected ] );\n\n\tconst { primaryAction, eligibleActions } = useMemo( () => {\n\t\t// If an action is eligible for all items, doesn't need\n\t\t// to provide the `isEligible` function.\n\t\tconst _eligibleActions = actions.filter(\n\t\t\t( action ) => ! action.isEligible || action.isEligible( item )\n\t\t);\n\t\tconst _primaryActions = _eligibleActions.filter(\n\t\t\t( action ) => action.isPrimary\n\t\t);\n\t\treturn {\n\t\t\tprimaryAction: _primaryActions[ 0 ],\n\t\t\teligibleActions: _eligibleActions,\n\t\t};\n\t}, [ actions, item ] );\n\n\tconst hasOnlyOnePrimaryAction = primaryAction && actions.length === 1;\n\n\tconst renderedMediaField =\n\t\tshowMedia && mediaField?.render ? (\n\t\t\t<div className=\"dataviews-view-list__media-wrapper\">\n\t\t\t\t<mediaField.render\n\t\t\t\t\titem={ item }\n\t\t\t\t\tfield={ mediaField }\n\t\t\t\t\tconfig={ { sizes: '52px' } }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t) : null;\n\n\tconst renderedTitleField =\n\t\tshowTitle && titleField?.render ? (\n\t\t\t<titleField.render item={ item } field={ titleField } />\n\t\t) : null;\n\n\tconst renderDescription = showDescription && descriptionField?.render;\n\t// When we have only the media and title fields, we want to center them vertically in the list item.\n\tconst hasOnlyMediaAndTitle =\n\t\t!! renderedMediaField && ! renderDescription && ! otherFields.length;\n\tconst usedActions = eligibleActions?.length > 0 && (\n\t\t<Stack\n\t\t\tdirection=\"row\"\n\t\t\tgap=\"md\"\n\t\t\tclassName=\"dataviews-view-list__item-actions\"\n\t\t>\n\t\t\t{ primaryAction && (\n\t\t\t\t<PrimaryActionGridCell\n\t\t\t\t\tidPrefix={ idPrefix }\n\t\t\t\t\tprimaryAction={ primaryAction }\n\t\t\t\t\titem={ item }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ! hasOnlyOnePrimaryAction && (\n\t\t\t\t<div role=\"gridcell\">\n\t\t\t\t\t<Menu placement=\"bottom-end\">\n\t\t\t\t\t\t<Menu.TriggerButton\n\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\t\t\t\tid={ generateDropdownTriggerCompositeId(\n\t\t\t\t\t\t\t\t\t\tidPrefix\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Actions' ) }\n\t\t\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\t\t\tdisabled={ ! actions.length }\n\t\t\t\t\t\t\t\t\t\t\tonKeyDown={\n\t\t\t\t\t\t\t\t\t\t\t\tonDropdownTriggerKeyDown\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Menu.Popover>\n\t\t\t\t\t\t\t<ActionsMenuGroup\n\t\t\t\t\t\t\t\tactions={ eligibleActions }\n\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\tregistry={ registry }\n\t\t\t\t\t\t\t\tsetActiveModalAction={ setActiveModalAction }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Menu.Popover>\n\t\t\t\t\t</Menu>\n\t\t\t\t\t{ !! activeModalAction && (\n\t\t\t\t\t\t<ActionModal\n\t\t\t\t\t\t\taction={ activeModalAction }\n\t\t\t\t\t\t\titems={ [ item ] }\n\t\t\t\t\t\t\tcloseModal={ () => setActiveModalAction( null ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</Stack>\n\t);\n\n\treturn (\n\t\t<Composite.Row\n\t\t\tref={ itemRef }\n\t\t\trender={\n\t\t\t\t/* aria-posinset breaks Composite.Row if passed to it directly. */\n\t\t\t\t<div\n\t\t\t\t\taria-posinset={ posinset }\n\t\t\t\t\taria-setsize={\n\t\t\t\t\t\tinfiniteScrollEnabled\n\t\t\t\t\t\t\t? paginationInfo.totalItems\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t}\n\t\t\trole={ infiniteScrollEnabled ? 'article' : 'row' }\n\t\t\tclassName={ clsx( {\n\t\t\t\t'is-selected': isSelected,\n\t\t\t\t'is-hovered': isHovered,\n\t\t\t} ) }\n\t\t\tonMouseEnter={ handleHover }\n\t\t\tonMouseLeave={ handleHover }\n\t\t>\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\tclassName=\"dataviews-view-list__item-wrapper\"\n\t\t\t>\n\t\t\t\t<div role=\"gridcell\">\n\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\tid={ generateItemWrapperCompositeId( idPrefix ) }\n\t\t\t\t\t\taria-pressed={ isSelected }\n\t\t\t\t\t\taria-labelledby={ labelId }\n\t\t\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\t\t\tclassName=\"dataviews-view-list__item\"\n\t\t\t\t\t\tonClick={ () => onSelect( item ) }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\tgap=\"md\"\n\t\t\t\t\tjustify=\"start\"\n\t\t\t\t\talign={ hasOnlyMediaAndTitle ? 'center' : 'flex-start' }\n\t\t\t\t\tstyle={ { flex: 1, minWidth: 0 } }\n\t\t\t\t>\n\t\t\t\t\t{ renderedMediaField }\n\t\t\t\t\t<Stack\n\t\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\t\tgap=\"xs\"\n\t\t\t\t\t\tclassName=\"dataviews-view-list__field-wrapper\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Stack direction=\"row\" align=\"center\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"dataviews-title-field dataviews-view-list__title-field\"\n\t\t\t\t\t\t\t\tid={ labelId }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ renderedTitleField }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{ usedActions }\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t{ renderDescription && (\n\t\t\t\t\t\t\t<div className=\"dataviews-view-list__field\">\n\t\t\t\t\t\t\t\t<descriptionField.render\n\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\tfield={ descriptionField }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"dataviews-view-list__fields\"\n\t\t\t\t\t\t\tid={ descriptionId }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ otherFields.map( ( field ) => (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-list__field\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<VisuallyHidden\n\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-list__field-label\"\n\t\t\t\t\t\t\t\t\t\trender={ <span /> }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ field.label }\n\t\t\t\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t\t\t\t\t<span className=\"dataviews-view-list__field-value\">\n\t\t\t\t\t\t\t\t\t\t<field.render\n\t\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Stack>\n\t\t\t\t</Stack>\n\t\t\t</Stack>\n\t\t</Composite.Row>\n\t);\n}\n\nfunction isDefined< T >( item: T | undefined ): item is T {\n\treturn !! item;\n}\n\nexport default function ViewList< Item >( props: ViewListProps< Item > ) {\n\tconst {\n\t\tactions,\n\t\tdata,\n\t\tfields,\n\t\tgetItemId,\n\t\tisLoading,\n\t\tonChangeSelection,\n\t\tselection,\n\t\tview,\n\t\tclassName,\n\t\tempty,\n\t} = props;\n\tconst baseId = useInstanceId( ViewList, 'view-list' );\n\tconst isDelayedLoading = useDelayedLoading( !! isLoading );\n\n\tconst selectedItem = data?.findLast( ( item ) =>\n\t\tselection.includes( getItemId( item ) )\n\t);\n\tconst titleField = fields.find( ( field ) => field.id === view.titleField );\n\tconst mediaField = fields.find( ( field ) => field.id === view.mediaField );\n\tconst descriptionField = fields.find(\n\t\t( field ) => field.id === view.descriptionField\n\t);\n\tconst otherFields = ( view?.fields ?? [] )\n\t\t.map( ( fieldId ) => fields.find( ( f ) => fieldId === f.id ) )\n\t\t.filter( isDefined );\n\n\tconst onSelect = ( item: Item ) =>\n\t\tonChangeSelection( [ getItemId( item ) ] );\n\n\tconst generateCompositeItemIdPrefix = useCallback(\n\t\t( item: Item ) => `${ baseId }-${ getItemId( item ) }`,\n\t\t[ baseId, getItemId ]\n\t);\n\n\tconst isActiveCompositeItem = useCallback(\n\t\t( item: Item, idToCheck: string ) => {\n\t\t\t// All composite items use the same prefix in their IDs.\n\t\t\treturn idToCheck.startsWith(\n\t\t\t\tgenerateCompositeItemIdPrefix( item )\n\t\t\t);\n\t\t},\n\t\t[ generateCompositeItemIdPrefix ]\n\t);\n\n\t// Controlled state for the active composite item.\n\tconst [ activeCompositeId, setActiveCompositeId ] = useState<\n\t\tstring | null | undefined\n\t>( undefined );\n\n\tconst compositeRef = useRef< HTMLDivElement >( null );\n\n\t// Update the active composite item when the selected item changes.\n\tuseEffect( () => {\n\t\tif ( selectedItem ) {\n\t\t\tsetActiveCompositeId(\n\t\t\t\tgenerateItemWrapperCompositeId(\n\t\t\t\t\tgenerateCompositeItemIdPrefix( selectedItem )\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\t}, [ selectedItem, generateCompositeItemIdPrefix ] );\n\n\tconst activeItemIndex = data.findIndex( ( item ) =>\n\t\tisActiveCompositeItem( item, activeCompositeId ?? '' )\n\t);\n\tconst previousActiveItemIndex = usePrevious( activeItemIndex );\n\tconst isActiveIdInList = activeItemIndex !== -1;\n\n\tconst selectCompositeItem = useCallback(\n\t\t(\n\t\t\ttargetIndex: number,\n\t\t\t// Allows invokers to specify a custom function to generate the\n\t\t\t// target composite item ID\n\t\t\tgenerateCompositeId: ( idPrefix: string ) => string\n\t\t) => {\n\t\t\t// Clamping between 0 and data.length - 1 to avoid out of bounds.\n\t\t\tconst clampedIndex = Math.min(\n\t\t\t\tdata.length - 1,\n\t\t\t\tMath.max( 0, targetIndex )\n\t\t\t);\n\t\t\tif ( ! data[ clampedIndex ] ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst itemIdPrefix = generateCompositeItemIdPrefix(\n\t\t\t\tdata[ clampedIndex ]\n\t\t\t);\n\t\t\tconst targetCompositeItemId = generateCompositeId( itemIdPrefix );\n\n\t\t\tsetActiveCompositeId( targetCompositeItemId );\n\t\t\t// The active composite item is controlled state that\n\t\t\t// can update without needing a focus move (e.g., searching\n\t\t\t// can trigger an active ID update). Only move DOM focus\n\t\t\t// when it's already within the list.\n\t\t\tif (\n\t\t\t\tcompositeRef.current?.contains(\n\t\t\t\t\tcompositeRef.current.ownerDocument.activeElement\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\tdocument.getElementById( targetCompositeItemId )?.focus();\n\t\t\t}\n\t\t},\n\t\t[ data, generateCompositeItemIdPrefix ]\n\t);\n\n\t// Select a new active composite item when the current active item\n\t// is removed from the list.\n\tuseEffect( () => {\n\t\tconst wasActiveIdInList =\n\t\t\tpreviousActiveItemIndex !== undefined &&\n\t\t\tpreviousActiveItemIndex !== -1;\n\t\tif ( ! isActiveIdInList && wasActiveIdInList ) {\n\t\t\t// By picking `previousActiveItemIndex` as the next item index, we are\n\t\t\t// basically picking the item that would have been after the deleted one.\n\t\t\t// If the previously active (and removed) item was the last of the list,\n\t\t\t// we will select the item before it \u2014 which is the new last item.\n\t\t\tselectCompositeItem(\n\t\t\t\tpreviousActiveItemIndex,\n\t\t\t\tgenerateItemWrapperCompositeId\n\t\t\t);\n\t\t}\n\t}, [ isActiveIdInList, selectCompositeItem, previousActiveItemIndex ] );\n\n\t// Prevent the default behavior (open dropdown menu) and instead select the\n\t// dropdown menu trigger on the previous/next row.\n\t// https://github.com/ariakit/ariakit/issues/3768\n\tconst onDropdownTriggerKeyDown = useCallback(\n\t\t( event: React.KeyboardEvent< HTMLButtonElement > ) => {\n\t\t\tif ( event.key === 'ArrowDown' ) {\n\t\t\t\t// Select the dropdown menu trigger item in the next row.\n\t\t\t\tevent.preventDefault();\n\t\t\t\tselectCompositeItem(\n\t\t\t\t\tactiveItemIndex + 1,\n\t\t\t\t\tgenerateDropdownTriggerCompositeId\n\t\t\t\t);\n\t\t\t}\n\t\t\tif ( event.key === 'ArrowUp' ) {\n\t\t\t\t// Select the dropdown menu trigger item in the previous row.\n\t\t\t\tevent.preventDefault();\n\t\t\t\tselectCompositeItem(\n\t\t\t\t\tactiveItemIndex - 1,\n\t\t\t\t\tgenerateDropdownTriggerCompositeId\n\t\t\t\t);\n\t\t\t}\n\t\t},\n\t\t[ selectCompositeItem, activeItemIndex ]\n\t);\n\n\tconst hasData = !! data?.length;\n\tconst groupField = view.groupBy?.field\n\t\t? fields.find( ( field ) => field.id === view.groupBy?.field )\n\t\t: null;\n\tconst dataByGroup =\n\t\thasData && groupField ? getDataByGroup( data, groupField ) : null;\n\tconst isInfiniteScroll = view.infiniteScrollEnabled && ! dataByGroup;\n\tif ( ! hasData ) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={ clsx( 'dataviews-no-results', {\n\t\t\t\t\t'is-refreshing': isDelayedLoading,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ empty }\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Render data grouped by field\n\tif ( hasData && groupField && dataByGroup ) {\n\t\treturn (\n\t\t\t<Composite\n\t\t\t\tref={ compositeRef }\n\t\t\t\tid={ `${ baseId }` }\n\t\t\t\trender={ <div /> }\n\t\t\t\tclassName=\"dataviews-view-list__group\"\n\t\t\t\trole=\"grid\"\n\t\t\t\tactiveId={ activeCompositeId }\n\t\t\t\tsetActiveId={ setActiveCompositeId }\n\t\t\t>\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\tgap=\"lg\"\n\t\t\t\t\tclassName={ clsx( 'dataviews-view-list', className ) }\n\t\t\t\t>\n\t\t\t\t\t{ Array.from( dataByGroup.entries() ).map(\n\t\t\t\t\t\t( [ groupName, groupItems ] ) => (\n\t\t\t\t\t\t\t<Stack\n\t\t\t\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\t\t\t\tkey={ groupName }\n\t\t\t\t\t\t\t\tgap=\"sm\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<h3 className=\"dataviews-view-list__group-header\">\n\t\t\t\t\t\t\t\t\t{ view.groupBy?.showLabel === false\n\t\t\t\t\t\t\t\t\t\t? groupName\n\t\t\t\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t// translators: 1: The label of the field e.g. \"Date\". 2: The value of the field, e.g.: \"May 2022\".\n\t\t\t\t\t\t\t\t\t\t\t\t__( '%1$s: %2$s' ),\n\t\t\t\t\t\t\t\t\t\t\t\tgroupField.label,\n\t\t\t\t\t\t\t\t\t\t\t\tgroupName\n\t\t\t\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t\t{ groupItems.map( ( item ) => {\n\t\t\t\t\t\t\t\t\tconst id =\n\t\t\t\t\t\t\t\t\t\tgenerateCompositeItemIdPrefix( item );\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<ListItem\n\t\t\t\t\t\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\t\t\t\tidPrefix={ id }\n\t\t\t\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\t\tisSelected={ item === selectedItem }\n\t\t\t\t\t\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\t\t\t\t\t\t\tdescriptionField={\n\t\t\t\t\t\t\t\t\t\t\t\tdescriptionField\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\totherFields={ otherFields }\n\t\t\t\t\t\t\t\t\t\t\tonDropdownTriggerKeyDown={\n\t\t\t\t\t\t\t\t\t\t\t\tonDropdownTriggerKeyDown\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t)\n\t\t\t\t\t) }\n\t\t\t\t</Stack>\n\t\t\t</Composite>\n\t\t);\n\t}\n\n\t// Render ungrouped data\n\treturn (\n\t\t<>\n\t\t\t<Composite\n\t\t\t\tref={ compositeRef }\n\t\t\t\tid={ baseId }\n\t\t\t\trender={ <div /> }\n\t\t\t\tclassName={ clsx( 'dataviews-view-list', className, {\n\t\t\t\t\t[ `has-${ view.layout?.density }-density` ]:\n\t\t\t\t\t\tview.layout?.density &&\n\t\t\t\t\t\t[ 'compact', 'comfortable' ].includes(\n\t\t\t\t\t\t\tview.layout.density\n\t\t\t\t\t\t),\n\t\t\t\t\t'is-refreshing': ! isInfiniteScroll && isDelayedLoading,\n\t\t\t\t} ) }\n\t\t\t\trole={ view.infiniteScrollEnabled ? 'feed' : 'grid' }\n\t\t\t\tactiveId={ activeCompositeId }\n\t\t\t\tsetActiveId={ setActiveCompositeId }\n\t\t\t\t// @ts-ignore\n\t\t\t\tinert={\n\t\t\t\t\t! isInfiniteScroll && !! isLoading ? 'true' : undefined\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{ data.map( ( item, index ) => {\n\t\t\t\t\tconst id = generateCompositeItemIdPrefix( item );\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<ListItem\n\t\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\tidPrefix={ id }\n\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\tisSelected={ item === selectedItem }\n\t\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\t\t\tdescriptionField={ descriptionField }\n\t\t\t\t\t\t\totherFields={ otherFields }\n\t\t\t\t\t\t\tonDropdownTriggerKeyDown={\n\t\t\t\t\t\t\t\tonDropdownTriggerKeyDown\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tposinset={\n\t\t\t\t\t\t\t\tview.infiniteScrollEnabled\n\t\t\t\t\t\t\t\t\t? index + 1\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</Composite>\n\t\t\t{ isInfiniteScroll && isLoading && (\n\t\t\t\t<p className=\"dataviews-loading-more\">\n\t\t\t\t\t<Spinner />\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId, usePrevious } from '@wordpress/compose';\nimport {\n\tButton,\n\tprivateApis as componentsPrivateApis,\n\tSpinner,\n\tComposite,\n} from '@wordpress/components';\nimport {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n\tuseContext,\n} from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { moreVertical } from '@wordpress/icons';\nimport { useRegistry } from '@wordpress/data';\nimport { Stack, VisuallyHidden } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../../lock-unlock';\nimport { ActionsMenuGroup, ActionModal } from '../../dataviews-item-actions';\nimport DataViewsContext from '../../dataviews-context';\nimport { useDelayedLoading } from '../../../hooks/use-delayed-loading';\nimport type {\n\tAction,\n\tNormalizedField,\n\tViewList as ViewListType,\n\tViewListProps,\n\tActionModal as ActionModalType,\n} from '../../../types';\nimport getDataByGroup from '../utils/get-data-by-group';\n\ninterface ListViewItemProps< Item > {\n\tview: ViewListType;\n\tactions: Action< Item >[];\n\tidPrefix: string;\n\tisSelected: boolean;\n\titem: Item;\n\ttitleField?: NormalizedField< Item >;\n\tmediaField?: NormalizedField< Item >;\n\tdescriptionField?: NormalizedField< Item >;\n\tonSelect: ( item: Item ) => void;\n\totherFields: NormalizedField< Item >[];\n\tonDropdownTriggerKeyDown: React.KeyboardEventHandler< HTMLButtonElement >;\n\tposinset?: number;\n}\n\nconst { Menu } = unlock( componentsPrivateApis );\n\nfunction generateItemWrapperCompositeId( idPrefix: string ) {\n\treturn `${ idPrefix }-item-wrapper`;\n}\nfunction generatePrimaryActionCompositeId(\n\tidPrefix: string,\n\tprimaryActionId: string\n) {\n\treturn `${ idPrefix }-primary-action-${ primaryActionId }`;\n}\nfunction generateDropdownTriggerCompositeId( idPrefix: string ) {\n\treturn `${ idPrefix }-dropdown`;\n}\n\nfunction PrimaryActionGridCell< Item >( {\n\tidPrefix,\n\tprimaryAction,\n\titem,\n}: {\n\tidPrefix: string;\n\tprimaryAction: Action< Item >;\n\titem: Item;\n} ) {\n\tconst registry = useRegistry();\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\n\tconst compositeItemId = generatePrimaryActionCompositeId(\n\t\tidPrefix,\n\t\tprimaryAction.id\n\t);\n\n\tconst label =\n\t\ttypeof primaryAction.label === 'string'\n\t\t\t? primaryAction.label\n\t\t\t: primaryAction.label( [ item ] );\n\n\treturn 'RenderModal' in primaryAction ? (\n\t\t<div role=\"gridcell\" key={ primaryAction.id }>\n\t\t\t<Composite.Item\n\t\t\t\tid={ compositeItemId }\n\t\t\t\trender={\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdisabled={ !! primaryAction.disabled }\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\ttext={ label }\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tonClick={ () => setIsModalOpen( true ) }\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{ isModalOpen && (\n\t\t\t\t\t<ActionModal< Item >\n\t\t\t\t\t\taction={ primaryAction }\n\t\t\t\t\t\titems={ [ item ] }\n\t\t\t\t\t\tcloseModal={ () => setIsModalOpen( false ) }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</Composite.Item>\n\t\t</div>\n\t) : (\n\t\t<div role=\"gridcell\" key={ primaryAction.id }>\n\t\t\t<Composite.Item\n\t\t\t\tid={ compositeItemId }\n\t\t\t\trender={\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdisabled={ !! primaryAction.disabled }\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tprimaryAction.callback( [ item ], { registry } );\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label }\n\t\t\t\t\t</Button>\n\t\t\t\t}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nfunction ListItem< Item >( {\n\tview,\n\tactions,\n\tidPrefix,\n\tisSelected,\n\titem,\n\ttitleField,\n\tmediaField,\n\tdescriptionField,\n\tonSelect,\n\totherFields,\n\tonDropdownTriggerKeyDown,\n\tposinset,\n}: ListViewItemProps< Item > ) {\n\tconst {\n\t\tshowTitle = true,\n\t\tshowMedia = true,\n\t\tshowDescription = true,\n\t\tinfiniteScrollEnabled,\n\t} = view;\n\tconst itemRef = useRef< HTMLDivElement >( null );\n\tconst labelId = `${ idPrefix }-label`;\n\tconst descriptionId = `${ idPrefix }-description`;\n\n\tconst registry = useRegistry();\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ activeModalAction, setActiveModalAction ] = useState(\n\t\tnull as ActionModalType< Item > | null\n\t);\n\tconst handleHover: React.MouseEventHandler = ( { type } ) => {\n\t\tconst isHover = type === 'mouseenter';\n\t\tsetIsHovered( isHover );\n\t};\n\n\tconst { paginationInfo } = useContext( DataViewsContext );\n\tuseEffect( () => {\n\t\tif ( isSelected ) {\n\t\t\titemRef.current?.scrollIntoView( {\n\t\t\t\tbehavior: 'auto',\n\t\t\t\tblock: 'nearest',\n\t\t\t\tinline: 'nearest',\n\t\t\t} );\n\t\t}\n\t}, [ isSelected ] );\n\n\tconst { primaryAction, eligibleActions } = useMemo( () => {\n\t\t// If an action is eligible for all items, doesn't need\n\t\t// to provide the `isEligible` function.\n\t\tconst _eligibleActions = actions.filter(\n\t\t\t( action ) => ! action.isEligible || action.isEligible( item )\n\t\t);\n\t\tconst _primaryActions = _eligibleActions.filter(\n\t\t\t( action ) => action.isPrimary\n\t\t);\n\t\treturn {\n\t\t\tprimaryAction: _primaryActions[ 0 ],\n\t\t\teligibleActions: _eligibleActions,\n\t\t};\n\t}, [ actions, item ] );\n\n\tconst hasOnlyOnePrimaryAction = primaryAction && actions.length === 1;\n\n\tconst renderedMediaField =\n\t\tshowMedia && mediaField?.render ? (\n\t\t\t<div className=\"dataviews-view-list__media-wrapper\">\n\t\t\t\t<mediaField.render\n\t\t\t\t\titem={ item }\n\t\t\t\t\tfield={ mediaField }\n\t\t\t\t\tconfig={ { sizes: '52px' } }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t) : null;\n\n\tconst renderedTitleField =\n\t\tshowTitle && titleField?.render ? (\n\t\t\t<titleField.render item={ item } field={ titleField } />\n\t\t) : null;\n\n\tconst renderDescription = showDescription && descriptionField?.render;\n\t// When we have only the media and title fields, we want to center them vertically in the list item.\n\tconst hasOnlyMediaAndTitle =\n\t\t!! renderedMediaField && ! renderDescription && ! otherFields.length;\n\tconst usedActions = eligibleActions?.length > 0 && (\n\t\t<Stack\n\t\t\tdirection=\"row\"\n\t\t\tgap=\"md\"\n\t\t\tclassName=\"dataviews-view-list__item-actions\"\n\t\t>\n\t\t\t{ primaryAction && (\n\t\t\t\t<PrimaryActionGridCell\n\t\t\t\t\tidPrefix={ idPrefix }\n\t\t\t\t\tprimaryAction={ primaryAction }\n\t\t\t\t\titem={ item }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ ! hasOnlyOnePrimaryAction && (\n\t\t\t\t<div role=\"gridcell\">\n\t\t\t\t\t<Menu placement=\"bottom-end\">\n\t\t\t\t\t\t<Menu.TriggerButton\n\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\t\t\t\tid={ generateDropdownTriggerCompositeId(\n\t\t\t\t\t\t\t\t\t\tidPrefix\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Actions' ) }\n\t\t\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\t\t\tdisabled={ ! actions.length }\n\t\t\t\t\t\t\t\t\t\t\tonKeyDown={\n\t\t\t\t\t\t\t\t\t\t\t\tonDropdownTriggerKeyDown\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Menu.Popover>\n\t\t\t\t\t\t\t<ActionsMenuGroup\n\t\t\t\t\t\t\t\tactions={ eligibleActions }\n\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\tregistry={ registry }\n\t\t\t\t\t\t\t\tsetActiveModalAction={ setActiveModalAction }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</Menu.Popover>\n\t\t\t\t\t</Menu>\n\t\t\t\t\t{ !! activeModalAction && (\n\t\t\t\t\t\t<ActionModal\n\t\t\t\t\t\t\taction={ activeModalAction }\n\t\t\t\t\t\t\titems={ [ item ] }\n\t\t\t\t\t\t\tcloseModal={ () => setActiveModalAction( null ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</Stack>\n\t);\n\n\treturn (\n\t\t<Composite.Row\n\t\t\tref={ itemRef }\n\t\t\trender={\n\t\t\t\t/* aria-posinset breaks Composite.Row if passed to it directly. */\n\t\t\t\t<div\n\t\t\t\t\taria-posinset={ posinset }\n\t\t\t\t\taria-setsize={\n\t\t\t\t\t\tinfiniteScrollEnabled\n\t\t\t\t\t\t\t? paginationInfo.totalItems\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t}\n\t\t\trole={ infiniteScrollEnabled ? 'article' : 'row' }\n\t\t\tclassName={ clsx( {\n\t\t\t\t'is-selected': isSelected,\n\t\t\t\t'is-hovered': isHovered,\n\t\t\t} ) }\n\t\t\tonMouseEnter={ handleHover }\n\t\t\tonMouseLeave={ handleHover }\n\t\t>\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\tclassName=\"dataviews-view-list__item-wrapper\"\n\t\t\t>\n\t\t\t\t<div role=\"gridcell\">\n\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\tid={ generateItemWrapperCompositeId( idPrefix ) }\n\t\t\t\t\t\taria-pressed={ isSelected }\n\t\t\t\t\t\taria-labelledby={ labelId }\n\t\t\t\t\t\taria-describedby={ descriptionId }\n\t\t\t\t\t\tclassName=\"dataviews-view-list__item\"\n\t\t\t\t\t\tonClick={ () => onSelect( item ) }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\tgap=\"md\"\n\t\t\t\t\tjustify=\"start\"\n\t\t\t\t\talign={ hasOnlyMediaAndTitle ? 'center' : 'flex-start' }\n\t\t\t\t\tstyle={ { flex: 1, minWidth: 0 } }\n\t\t\t\t>\n\t\t\t\t\t{ renderedMediaField }\n\t\t\t\t\t<Stack\n\t\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\t\tgap=\"xs\"\n\t\t\t\t\t\tclassName=\"dataviews-view-list__field-wrapper\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Stack direction=\"row\" align=\"center\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"dataviews-title-field dataviews-view-list__title-field\"\n\t\t\t\t\t\t\t\tid={ labelId }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ renderedTitleField }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{ usedActions }\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t{ renderDescription && (\n\t\t\t\t\t\t\t<div className=\"dataviews-view-list__field\">\n\t\t\t\t\t\t\t\t<descriptionField.render\n\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\tfield={ descriptionField }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"dataviews-view-list__fields\"\n\t\t\t\t\t\t\tid={ descriptionId }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ otherFields.map( ( field ) => (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-list__field\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<VisuallyHidden\n\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-list__field-label\"\n\t\t\t\t\t\t\t\t\t\trender={ <span /> }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ field.label }\n\t\t\t\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t\t\t\t\t<span className=\"dataviews-view-list__field-value\">\n\t\t\t\t\t\t\t\t\t\t<field.render\n\t\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Stack>\n\t\t\t\t</Stack>\n\t\t\t</Stack>\n\t\t</Composite.Row>\n\t);\n}\n\nfunction isDefined< T >( item: T | undefined ): item is T {\n\treturn !! item;\n}\n\nexport default function ViewList< Item >( props: ViewListProps< Item > ) {\n\tconst {\n\t\tactions,\n\t\tdata,\n\t\tfields,\n\t\tgetItemId,\n\t\tisLoading,\n\t\tonChangeSelection,\n\t\tselection,\n\t\tview,\n\t\tclassName,\n\t\tempty,\n\t} = props;\n\tconst baseId = useInstanceId( ViewList, 'view-list' );\n\tconst isDelayedLoading = useDelayedLoading( !! isLoading );\n\n\tconst selectedItem = data?.findLast( ( item ) =>\n\t\tselection.includes( getItemId( item ) )\n\t);\n\tconst titleField = fields.find( ( field ) => field.id === view.titleField );\n\tconst mediaField = fields.find( ( field ) => field.id === view.mediaField );\n\tconst descriptionField = fields.find(\n\t\t( field ) => field.id === view.descriptionField\n\t);\n\tconst otherFields = ( view?.fields ?? [] )\n\t\t.map( ( fieldId ) => fields.find( ( f ) => fieldId === f.id ) )\n\t\t.filter( isDefined );\n\n\tconst onSelect = ( item: Item ) =>\n\t\tonChangeSelection( [ getItemId( item ) ] );\n\n\tconst generateCompositeItemIdPrefix = useCallback(\n\t\t( item: Item ) => `${ baseId }-${ getItemId( item ) }`,\n\t\t[ baseId, getItemId ]\n\t);\n\n\tconst isActiveCompositeItem = useCallback(\n\t\t( item: Item, idToCheck: string ) => {\n\t\t\t// All composite items use the same prefix in their IDs.\n\t\t\treturn idToCheck.startsWith(\n\t\t\t\tgenerateCompositeItemIdPrefix( item )\n\t\t\t);\n\t\t},\n\t\t[ generateCompositeItemIdPrefix ]\n\t);\n\n\t// Controlled state for the active composite item.\n\tconst [ activeCompositeId, setActiveCompositeId ] = useState<\n\t\tstring | null | undefined\n\t>( undefined );\n\n\tconst compositeRef = useRef< HTMLDivElement >( null );\n\n\t// Update the active composite item when the selected item changes.\n\tuseEffect( () => {\n\t\tif ( selectedItem ) {\n\t\t\tsetActiveCompositeId(\n\t\t\t\tgenerateItemWrapperCompositeId(\n\t\t\t\t\tgenerateCompositeItemIdPrefix( selectedItem )\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\t}, [ selectedItem, generateCompositeItemIdPrefix ] );\n\n\tconst activeItemIndex = data.findIndex( ( item ) =>\n\t\tisActiveCompositeItem( item, activeCompositeId ?? '' )\n\t);\n\tconst previousActiveItemIndex = usePrevious( activeItemIndex );\n\tconst isActiveIdInList = activeItemIndex !== -1;\n\n\tconst selectCompositeItem = useCallback(\n\t\t(\n\t\t\ttargetIndex: number,\n\t\t\t// Allows invokers to specify a custom function to generate the\n\t\t\t// target composite item ID\n\t\t\tgenerateCompositeId: ( idPrefix: string ) => string\n\t\t) => {\n\t\t\t// Clamping between 0 and data.length - 1 to avoid out of bounds.\n\t\t\tconst clampedIndex = Math.min(\n\t\t\t\tdata.length - 1,\n\t\t\t\tMath.max( 0, targetIndex )\n\t\t\t);\n\t\t\tif ( ! data[ clampedIndex ] ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst itemIdPrefix = generateCompositeItemIdPrefix(\n\t\t\t\tdata[ clampedIndex ]\n\t\t\t);\n\t\t\tconst targetCompositeItemId = generateCompositeId( itemIdPrefix );\n\n\t\t\tsetActiveCompositeId( targetCompositeItemId );\n\t\t\t// The active composite item is controlled state that\n\t\t\t// can update without needing a focus move (e.g., searching\n\t\t\t// can trigger an active ID update). Only move DOM focus\n\t\t\t// when it's already within the list.\n\t\t\tif (\n\t\t\t\tcompositeRef.current?.contains(\n\t\t\t\t\tcompositeRef.current.ownerDocument.activeElement\n\t\t\t\t)\n\t\t\t) {\n\t\t\t\tdocument.getElementById( targetCompositeItemId )?.focus();\n\t\t\t}\n\t\t},\n\t\t[ data, generateCompositeItemIdPrefix ]\n\t);\n\n\t// Select a new active composite item when the current active item\n\t// is removed from the list.\n\tuseEffect( () => {\n\t\tconst wasActiveIdInList =\n\t\t\tpreviousActiveItemIndex !== undefined &&\n\t\t\tpreviousActiveItemIndex !== -1;\n\t\tif ( ! isActiveIdInList && wasActiveIdInList ) {\n\t\t\t// By picking `previousActiveItemIndex` as the next item index, we are\n\t\t\t// basically picking the item that would have been after the deleted one.\n\t\t\t// If the previously active (and removed) item was the last of the list,\n\t\t\t// we will select the item before it — which is the new last item.\n\t\t\tselectCompositeItem(\n\t\t\t\tpreviousActiveItemIndex,\n\t\t\t\tgenerateItemWrapperCompositeId\n\t\t\t);\n\t\t}\n\t}, [ isActiveIdInList, selectCompositeItem, previousActiveItemIndex ] );\n\n\t// Prevent the default behavior (open dropdown menu) and instead select the\n\t// dropdown menu trigger on the previous/next row.\n\t// https://github.com/ariakit/ariakit/issues/3768\n\tconst onDropdownTriggerKeyDown = useCallback(\n\t\t( event: React.KeyboardEvent< HTMLButtonElement > ) => {\n\t\t\tif ( event.key === 'ArrowDown' ) {\n\t\t\t\t// Select the dropdown menu trigger item in the next row.\n\t\t\t\tevent.preventDefault();\n\t\t\t\tselectCompositeItem(\n\t\t\t\t\tactiveItemIndex + 1,\n\t\t\t\t\tgenerateDropdownTriggerCompositeId\n\t\t\t\t);\n\t\t\t}\n\t\t\tif ( event.key === 'ArrowUp' ) {\n\t\t\t\t// Select the dropdown menu trigger item in the previous row.\n\t\t\t\tevent.preventDefault();\n\t\t\t\tselectCompositeItem(\n\t\t\t\t\tactiveItemIndex - 1,\n\t\t\t\t\tgenerateDropdownTriggerCompositeId\n\t\t\t\t);\n\t\t\t}\n\t\t},\n\t\t[ selectCompositeItem, activeItemIndex ]\n\t);\n\n\tconst hasData = !! data?.length;\n\tconst groupField = view.groupBy?.field\n\t\t? fields.find( ( field ) => field.id === view.groupBy?.field )\n\t\t: null;\n\tconst dataByGroup =\n\t\thasData && groupField ? getDataByGroup( data, groupField ) : null;\n\tconst isInfiniteScroll = view.infiniteScrollEnabled && ! dataByGroup;\n\tif ( ! hasData ) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={ clsx( 'dataviews-no-results', {\n\t\t\t\t\t'is-refreshing': isDelayedLoading,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ empty }\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Render data grouped by field\n\tif ( hasData && groupField && dataByGroup ) {\n\t\treturn (\n\t\t\t<Composite\n\t\t\t\tref={ compositeRef }\n\t\t\t\tid={ `${ baseId }` }\n\t\t\t\trender={ <div /> }\n\t\t\t\tclassName=\"dataviews-view-list__group\"\n\t\t\t\trole=\"grid\"\n\t\t\t\tactiveId={ activeCompositeId }\n\t\t\t\tsetActiveId={ setActiveCompositeId }\n\t\t\t>\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\tgap=\"lg\"\n\t\t\t\t\tclassName={ clsx( 'dataviews-view-list', className ) }\n\t\t\t\t>\n\t\t\t\t\t{ Array.from( dataByGroup.entries() ).map(\n\t\t\t\t\t\t( [ groupName, groupItems ] ) => (\n\t\t\t\t\t\t\t<Stack\n\t\t\t\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\t\t\t\tkey={ groupName }\n\t\t\t\t\t\t\t\tgap=\"sm\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<h3 className=\"dataviews-view-list__group-header\">\n\t\t\t\t\t\t\t\t\t{ view.groupBy?.showLabel === false\n\t\t\t\t\t\t\t\t\t\t? groupName\n\t\t\t\t\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t// translators: 1: The label of the field e.g. \"Date\". 2: The value of the field, e.g.: \"May 2022\".\n\t\t\t\t\t\t\t\t\t\t\t\t__( '%1$s: %2$s' ),\n\t\t\t\t\t\t\t\t\t\t\t\tgroupField.label,\n\t\t\t\t\t\t\t\t\t\t\t\tgroupName\n\t\t\t\t\t\t\t\t\t\t  ) }\n\t\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t\t{ groupItems.map( ( item ) => {\n\t\t\t\t\t\t\t\t\tconst id =\n\t\t\t\t\t\t\t\t\t\tgenerateCompositeItemIdPrefix( item );\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<ListItem\n\t\t\t\t\t\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\t\t\t\tidPrefix={ id }\n\t\t\t\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\t\tisSelected={ item === selectedItem }\n\t\t\t\t\t\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\t\t\t\t\t\t\tdescriptionField={\n\t\t\t\t\t\t\t\t\t\t\t\tdescriptionField\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\totherFields={ otherFields }\n\t\t\t\t\t\t\t\t\t\t\tonDropdownTriggerKeyDown={\n\t\t\t\t\t\t\t\t\t\t\t\tonDropdownTriggerKeyDown\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t)\n\t\t\t\t\t) }\n\t\t\t\t</Stack>\n\t\t\t</Composite>\n\t\t);\n\t}\n\n\t// Render ungrouped data\n\treturn (\n\t\t<>\n\t\t\t<Composite\n\t\t\t\tref={ compositeRef }\n\t\t\t\tid={ baseId }\n\t\t\t\trender={ <div /> }\n\t\t\t\tclassName={ clsx( 'dataviews-view-list', className, {\n\t\t\t\t\t[ `has-${ view.layout?.density }-density` ]:\n\t\t\t\t\t\tview.layout?.density &&\n\t\t\t\t\t\t[ 'compact', 'comfortable' ].includes(\n\t\t\t\t\t\t\tview.layout.density\n\t\t\t\t\t\t),\n\t\t\t\t\t'is-refreshing': ! isInfiniteScroll && isDelayedLoading,\n\t\t\t\t} ) }\n\t\t\t\trole={ view.infiniteScrollEnabled ? 'feed' : 'grid' }\n\t\t\t\tactiveId={ activeCompositeId }\n\t\t\t\tsetActiveId={ setActiveCompositeId }\n\t\t\t\t// @ts-ignore\n\t\t\t\tinert={\n\t\t\t\t\t! isInfiniteScroll && !! isLoading ? 'true' : undefined\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{ data.map( ( item, index ) => {\n\t\t\t\t\tconst id = generateCompositeItemIdPrefix( item );\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<ListItem\n\t\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\tidPrefix={ id }\n\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\tisSelected={ item === selectedItem }\n\t\t\t\t\t\t\tonSelect={ onSelect }\n\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\t\t\tdescriptionField={ descriptionField }\n\t\t\t\t\t\t\totherFields={ otherFields }\n\t\t\t\t\t\t\tonDropdownTriggerKeyDown={\n\t\t\t\t\t\t\t\tonDropdownTriggerKeyDown\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tposinset={\n\t\t\t\t\t\t\t\tview.infiniteScrollEnabled\n\t\t\t\t\t\t\t\t\t? index + 1\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</Composite>\n\t\t\t{ isInfiniteScroll && isLoading && (\n\t\t\t\t<p className=\"dataviews-loading-more\">\n\t\t\t\t\t<Spinner />\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],
   "mappings": "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",
   "names": ["componentsPrivateApis", "DataViewsContext", "clsx", "getDataByGroup"]
 }

package/build/components/dataviews-layouts/picker-activity/index.cjs

@@ -0,0 +1,304 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/dataviews/src/components/dataviews-layouts/picker-activity/index.tsx
+var picker_activity_exports = {};
+__export(picker_activity_exports, {
+  default: () => ViewPickerActivity
+});
+module.exports = __toCommonJS(picker_activity_exports);
+var import_clsx = __toESM(require("clsx"));
+var import_components = require("@wordpress/components");
+var import_element = require("@wordpress/element");
+var import_compose = require("@wordpress/compose");
+var import_i18n = require("@wordpress/i18n");
+var import_ui = require("@wordpress/ui");
+var import_dataviews_context = __toESM(require("../../dataviews-context/index.cjs"));
+var import_dataviews_picker_footer = require("../../dataviews-picker-footer/index.cjs");
+var import_get_data_by_group = __toESM(require("../utils/get-data-by-group.cjs"));
+var import_use_infinite_scroll = require("../utils/use-infinite-scroll.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function isDefined(item) {
+  return !!item;
+}
+function PickerActivityItem({
+  view,
+  multiselect,
+  selection,
+  onChangeSelection,
+  getItemId,
+  item,
+  titleField,
+  mediaField,
+  descriptionField,
+  otherFields,
+  posinset,
+  setsize
+}) {
+  const elementRef = (0, import_element.useRef)(null);
+  (0, import_use_infinite_scroll.useIntersectionObserver)(elementRef, posinset);
+  const { showTitle = true, showMedia = true, showDescription = true } = view;
+  const id = getItemId(item);
+  const isSelected = selection.includes(id);
+  const density = view.layout?.density ?? "balanced";
+  const mediaContent = showMedia && density !== "compact" && mediaField?.render ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    mediaField.render,
+    {
+      item,
+      field: mediaField,
+      config: {
+        sizes: density === "comfortable" ? "32px" : "24px"
+      }
+    }
+  ) : null;
+  const renderedMediaField = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataviews-view-picker-activity__item-type-icon", children: mediaContent || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      className: "dataviews-view-picker-activity__item-bullet",
+      "aria-hidden": "true"
+    }
+  ) });
+  const renderedTitleField = showTitle && titleField?.render ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(titleField.render, { item, field: titleField }) : null;
+  const renderedDescriptionField = showDescription && descriptionField?.render ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(descriptionField.render, { item, field: descriptionField }) : null;
+  const verticalGap = (0, import_element.useMemo)(() => {
+    switch (density) {
+      case "comfortable":
+        return "md";
+      default:
+        return "sm";
+    }
+  }, [density]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.Composite.Item,
+    {
+      ref: elementRef,
+      role: "option",
+      "aria-label": titleField ? titleField.getValue({ item }) || void 0 : void 0,
+      "aria-posinset": posinset,
+      "aria-setsize": setsize,
+      "aria-selected": isSelected,
+      className: (0, import_clsx.default)(
+        "dataviews-view-picker-activity__item",
+        density === "compact" && "is-compact",
+        density === "balanced" && "is-balanced",
+        density === "comfortable" && "is-comfortable",
+        isSelected && "is-selected"
+      ),
+      onClick: () => {
+        if (isSelected) {
+          onChangeSelection(
+            selection.filter((itemId) => id !== itemId)
+          );
+        } else {
+          const newSelection = multiselect ? [...selection, id] : [id];
+          onChangeSelection(newSelection);
+        }
+      },
+      render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Stack, { direction: "row", gap: "lg", justify: "start", align: "flex-start", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ui.Stack,
+          {
+            direction: "column",
+            gap: "xs",
+            align: "center",
+            className: "dataviews-view-picker-activity__item-type",
+            children: renderedMediaField
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_ui.Stack,
+          {
+            direction: "column",
+            gap: verticalGap,
+            align: "flex-start",
+            className: "dataviews-view-picker-activity__item-content",
+            children: [
+              renderedTitleField && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataviews-view-picker-activity__item-title", children: renderedTitleField }),
+              renderedDescriptionField && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataviews-view-picker-activity__item-description", children: renderedDescriptionField }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataviews-view-picker-activity__item-fields", children: otherFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  className: "dataviews-view-picker-activity__item-field",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_ui.VisuallyHidden,
+                      {
+                        render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {}),
+                        className: "dataviews-view-picker-activity__item-field-label",
+                        children: field.label
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dataviews-view-picker-activity__item-field-value", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      field.render,
+                      {
+                        item,
+                        field
+                      }
+                    ) })
+                  ]
+                },
+                field.id
+              )) })
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+function PickerActivityGroup({
+  groupName,
+  groupField,
+  showLabel = true,
+  children
+}) {
+  const headerId = (0, import_compose.useInstanceId)(
+    PickerActivityGroup,
+    "dataviews-view-picker-activity-group__header"
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_ui.Stack,
+    {
+      direction: "column",
+      role: "group",
+      "aria-labelledby": headerId,
+      className: "dataviews-view-picker-activity-group",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "h3",
+          {
+            className: "dataviews-view-picker-activity-group__header",
+            id: headerId,
+            children: showLabel ? (0, import_i18n.sprintf)(
+              // translators: 1: The label of the field e.g. "Date". 2: The value of the field, e.g.: "May 2022".
+              (0, import_i18n.__)("%1$s: %2$s"),
+              groupField.label,
+              groupName
+            ) : groupName
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function ViewPickerActivity({
+  data,
+  fields,
+  getItemId,
+  isLoading,
+  onChangeSelection,
+  selection,
+  view,
+  actions,
+  className,
+  empty
+}) {
+  const { itemListLabel, paginationInfo } = (0, import_element.useContext)(import_dataviews_context.default);
+  const isMultiselect = (0, import_dataviews_picker_footer.useIsMultiselectPicker)(actions);
+  const titleField = fields.find(
+    (field) => field.id === view?.titleField
+  );
+  const mediaField = fields.find(
+    (field) => field.id === view?.mediaField
+  );
+  const descriptionField = fields.find(
+    (field) => field.id === view?.descriptionField
+  );
+  const otherFields = (view?.fields ?? []).map((fieldId) => fields.find((f) => fieldId === f.id)).filter(isDefined);
+  const groupField = view.groupBy?.field ? fields.find((f) => f.id === view.groupBy?.field) : null;
+  const dataByGroup = groupField ? (0, import_get_data_by_group.default)(data, groupField) : null;
+  const isInfiniteScroll = (view.infiniteScrollEnabled && !dataByGroup) ?? false;
+  const setsize = isInfiniteScroll ? paginationInfo?.totalItems : void 0;
+  const hasData = !!data?.length;
+  const isGrouped = !!(groupField && dataByGroup);
+  const renderItem = (item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    PickerActivityItem,
+    {
+      view,
+      multiselect: isMultiselect,
+      selection,
+      onChangeSelection,
+      getItemId,
+      item,
+      titleField,
+      mediaField,
+      descriptionField,
+      otherFields,
+      posinset: item.position,
+      setsize
+    },
+    getItemId(item)
+  );
+  if (!hasData) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: (0, import_clsx.default)({
+          "dataviews-loading": isLoading,
+          "dataviews-no-results": !isLoading
+        }),
+        children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {}) }) : empty
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.Composite,
+      {
+        virtualFocus: true,
+        orientation: "vertical",
+        role: "listbox",
+        "aria-multiselectable": isMultiselect,
+        "aria-label": itemListLabel,
+        "aria-busy": isLoading,
+        render: isGrouped ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Stack, { direction: "column", gap: "sm" }) : void 0,
+        className: (0, import_clsx.default)(
+          "dataviews-view-picker-activity",
+          className
+        ),
+        children: isGrouped && dataByGroup ? Array.from(dataByGroup.entries()).map(
+          ([groupName, groupItems]) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            PickerActivityGroup,
+            {
+              groupName,
+              groupField,
+              showLabel: view.groupBy?.showLabel !== false,
+              children: groupItems.map(renderItem)
+            },
+            groupName
+          )
+        ) : data.map(renderItem)
+      }
+    ),
+    isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "dataviews-loading-more", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {}) })
+  ] });
+}
+//# sourceMappingURL=index.cjs.map

package/build/components/dataviews-layouts/picker-activity/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/dataviews-layouts/picker-activity/index.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Spinner, Composite } from '@wordpress/components';\nimport { useContext, useMemo, useRef } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Stack, VisuallyHidden } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../../dataviews-context';\nimport { useIsMultiselectPicker } from '../../dataviews-picker-footer';\nimport getDataByGroup from '../utils/get-data-by-group';\nimport { useIntersectionObserver } from '../utils/use-infinite-scroll';\nimport type {\n\tNormalizedField,\n\tViewPickerActivity as ViewPickerActivityType,\n\tViewPickerActivityProps,\n} from '../../../types';\nimport type { SetSelection } from '../../../types/private';\n\nfunction isDefined< T >( item: T | undefined ): item is T {\n\treturn !! item;\n}\n\ninterface PickerActivityItemProps< Item > {\n\tview: ViewPickerActivityType;\n\tmultiselect?: boolean;\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tgetItemId: ( item: Item ) => string;\n\titem: Item;\n\ttitleField?: NormalizedField< Item >;\n\tmediaField?: NormalizedField< Item >;\n\tdescriptionField?: NormalizedField< Item >;\n\totherFields: NormalizedField< Item >[];\n\tposinset?: number;\n\tsetsize?: number;\n}\n\nfunction PickerActivityItem< Item >( {\n\tview,\n\tmultiselect,\n\tselection,\n\tonChangeSelection,\n\tgetItemId,\n\titem,\n\ttitleField,\n\tmediaField,\n\tdescriptionField,\n\totherFields,\n\tposinset,\n\tsetsize,\n}: PickerActivityItemProps< Item > ) {\n\tconst elementRef = useRef< HTMLButtonElement >( null );\n\tuseIntersectionObserver( elementRef, posinset );\n\tconst { showTitle = true, showMedia = true, showDescription = true } = view;\n\tconst id = getItemId( item );\n\tconst isSelected = selection.includes( id );\n\tconst density = view.layout?.density ?? 'balanced';\n\n\tconst mediaContent =\n\t\tshowMedia && density !== 'compact' && mediaField?.render ? (\n\t\t\t<mediaField.render\n\t\t\t\titem={ item }\n\t\t\t\tfield={ mediaField }\n\t\t\t\tconfig={ {\n\t\t\t\t\tsizes: density === 'comfortable' ? '32px' : '24px',\n\t\t\t\t} }\n\t\t\t/>\n\t\t) : null;\n\n\tconst renderedMediaField = (\n\t\t<div className=\"dataviews-view-picker-activity__item-type-icon\">\n\t\t\t{ mediaContent || (\n\t\t\t\t<span\n\t\t\t\t\tclassName=\"dataviews-view-picker-activity__item-bullet\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n\n\tconst renderedTitleField =\n\t\tshowTitle && titleField?.render ? (\n\t\t\t<titleField.render item={ item } field={ titleField } />\n\t\t) : null;\n\n\tconst renderedDescriptionField =\n\t\tshowDescription && descriptionField?.render ? (\n\t\t\t<descriptionField.render item={ item } field={ descriptionField } />\n\t\t) : null;\n\n\tconst verticalGap = useMemo( () => {\n\t\tswitch ( density ) {\n\t\t\tcase 'comfortable':\n\t\t\t\treturn 'md';\n\t\t\tdefault:\n\t\t\t\treturn 'sm';\n\t\t}\n\t}, [ density ] );\n\n\treturn (\n\t\t<Composite.Item\n\t\t\tref={ elementRef }\n\t\t\trole=\"option\"\n\t\t\taria-label={\n\t\t\t\ttitleField\n\t\t\t\t\t? titleField.getValue( { item } ) || undefined\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\taria-posinset={ posinset }\n\t\t\taria-setsize={ setsize }\n\t\t\taria-selected={ isSelected }\n\t\t\tclassName={ clsx(\n\t\t\t\t'dataviews-view-picker-activity__item',\n\t\t\t\tdensity === 'compact' && 'is-compact',\n\t\t\t\tdensity === 'balanced' && 'is-balanced',\n\t\t\t\tdensity === 'comfortable' && 'is-comfortable',\n\t\t\t\tisSelected && 'is-selected'\n\t\t\t) }\n\t\t\tonClick={ () => {\n\t\t\t\tif ( isSelected ) {\n\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\tselection.filter( ( itemId ) => id !== itemId )\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\tconst newSelection = multiselect\n\t\t\t\t\t\t? [ ...selection, id ]\n\t\t\t\t\t\t: [ id ];\n\t\t\t\t\tonChangeSelection( newSelection );\n\t\t\t\t}\n\t\t\t} }\n\t\t\trender={ <div /> }\n\t\t>\n\t\t\t<Stack direction=\"row\" gap=\"lg\" justify=\"start\" align=\"flex-start\">\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\tgap=\"xs\"\n\t\t\t\t\talign=\"center\"\n\t\t\t\t\tclassName=\"dataviews-view-picker-activity__item-type\"\n\t\t\t\t>\n\t\t\t\t\t{ renderedMediaField }\n\t\t\t\t</Stack>\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\tgap={ verticalGap }\n\t\t\t\t\talign=\"flex-start\"\n\t\t\t\t\tclassName=\"dataviews-view-picker-activity__item-content\"\n\t\t\t\t>\n\t\t\t\t\t{ renderedTitleField && (\n\t\t\t\t\t\t<div className=\"dataviews-view-picker-activity__item-title\">\n\t\t\t\t\t\t\t{ renderedTitleField }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t\t{ renderedDescriptionField && (\n\t\t\t\t\t\t<div className=\"dataviews-view-picker-activity__item-description\">\n\t\t\t\t\t\t\t{ renderedDescriptionField }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t\t<div className=\"dataviews-view-picker-activity__item-fields\">\n\t\t\t\t\t\t{ otherFields.map( ( field ) => (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\tclassName=\"dataviews-view-picker-activity__item-field\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<VisuallyHidden\n\t\t\t\t\t\t\t\t\trender={ <span /> }\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-picker-activity__item-field-label\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ field.label }\n\t\t\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t\t\t\t<span className=\"dataviews-view-picker-activity__item-field-value\">\n\t\t\t\t\t\t\t\t\t<field.render\n\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</div>\n\t\t\t\t</Stack>\n\t\t\t</Stack>\n\t\t</Composite.Item>\n\t);\n}\n\nfunction PickerActivityGroup< Item >( {\n\tgroupName,\n\tgroupField,\n\tshowLabel = true,\n\tchildren,\n}: {\n\tgroupName: string;\n\tgroupField: NormalizedField< Item >;\n\tshowLabel?: boolean;\n\tchildren: ReactNode;\n} ) {\n\tconst headerId = useInstanceId(\n\t\tPickerActivityGroup,\n\t\t'dataviews-view-picker-activity-group__header'\n\t);\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"column\"\n\t\t\trole=\"group\"\n\t\t\taria-labelledby={ headerId }\n\t\t\tclassName=\"dataviews-view-picker-activity-group\"\n\t\t>\n\t\t\t<h3\n\t\t\t\tclassName=\"dataviews-view-picker-activity-group__header\"\n\t\t\t\tid={ headerId }\n\t\t\t>\n\t\t\t\t{ showLabel\n\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t// translators: 1: The label of the field e.g. \"Date\". 2: The value of the field, e.g.: \"May 2022\".\n\t\t\t\t\t\t\t__( '%1$s: %2$s' ),\n\t\t\t\t\t\t\tgroupField.label,\n\t\t\t\t\t\t\tgroupName\n\t\t\t\t\t  )\n\t\t\t\t\t: groupName }\n\t\t\t</h3>\n\t\t\t{ children }\n\t\t</Stack>\n\t);\n}\n\nexport default function ViewPickerActivity< Item >( {\n\tdata,\n\tfields,\n\tgetItemId,\n\tisLoading,\n\tonChangeSelection,\n\tselection,\n\tview,\n\tactions,\n\tclassName,\n\tempty,\n}: ViewPickerActivityProps< Item > ) {\n\tconst { itemListLabel, paginationInfo } = useContext( DataViewsContext );\n\tconst isMultiselect = useIsMultiselectPicker( actions );\n\n\tconst titleField = fields.find(\n\t\t( field ) => field.id === view?.titleField\n\t);\n\tconst mediaField = fields.find(\n\t\t( field ) => field.id === view?.mediaField\n\t);\n\tconst descriptionField = fields.find(\n\t\t( field ) => field.id === view?.descriptionField\n\t);\n\tconst otherFields = ( view?.fields ?? [] )\n\t\t.map( ( fieldId ) => fields.find( ( f ) => fieldId === f.id ) )\n\t\t.filter( isDefined );\n\n\tconst groupField = view.groupBy?.field\n\t\t? fields.find( ( f ) => f.id === view.groupBy?.field )\n\t\t: null;\n\tconst dataByGroup = groupField ? getDataByGroup( data, groupField ) : null;\n\n\tconst isInfiniteScroll =\n\t\t( view.infiniteScrollEnabled && ! dataByGroup ) ?? false;\n\tconst setsize = isInfiniteScroll ? paginationInfo?.totalItems : undefined;\n\n\tconst hasData = !! data?.length;\n\tconst isGrouped = !! ( groupField && dataByGroup );\n\n\tconst renderItem = ( item: Item ) => (\n\t\t<PickerActivityItem\n\t\t\tkey={ getItemId( item ) }\n\t\t\tview={ view }\n\t\t\tmultiselect={ isMultiselect }\n\t\t\tselection={ selection }\n\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\tgetItemId={ getItemId }\n\t\t\titem={ item }\n\t\t\ttitleField={ titleField }\n\t\t\tmediaField={ mediaField }\n\t\t\tdescriptionField={ descriptionField }\n\t\t\totherFields={ otherFields }\n\t\t\tposinset={ ( item as { position?: number } ).position }\n\t\t\tsetsize={ setsize }\n\t\t/>\n\t);\n\n\tif ( ! hasData ) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={ clsx( {\n\t\t\t\t\t'dataviews-loading': isLoading,\n\t\t\t\t\t'dataviews-no-results': ! isLoading,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ isLoading ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t</p>\n\t\t\t\t) : (\n\t\t\t\t\tempty\n\t\t\t\t) }\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<Composite\n\t\t\t\tvirtualFocus\n\t\t\t\torientation=\"vertical\"\n\t\t\t\trole=\"listbox\"\n\t\t\t\taria-multiselectable={ isMultiselect }\n\t\t\t\taria-label={ itemListLabel }\n\t\t\t\taria-busy={ isLoading }\n\t\t\t\trender={\n\t\t\t\t\tisGrouped ? (\n\t\t\t\t\t\t<Stack direction=\"column\" gap=\"sm\" />\n\t\t\t\t\t) : undefined\n\t\t\t\t}\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'dataviews-view-picker-activity',\n\t\t\t\t\tclassName\n\t\t\t\t) }\n\t\t\t>\n\t\t\t\t{ isGrouped && dataByGroup\n\t\t\t\t\t? Array.from( dataByGroup.entries() ).map(\n\t\t\t\t\t\t\t( [ groupName, groupItems ]: [\n\t\t\t\t\t\t\t\tstring,\n\t\t\t\t\t\t\t\tItem[],\n\t\t\t\t\t\t\t] ) => (\n\t\t\t\t\t\t\t\t<PickerActivityGroup< Item >\n\t\t\t\t\t\t\t\t\tkey={ groupName }\n\t\t\t\t\t\t\t\t\tgroupName={ groupName }\n\t\t\t\t\t\t\t\t\tgroupField={ groupField }\n\t\t\t\t\t\t\t\t\tshowLabel={\n\t\t\t\t\t\t\t\t\t\tview.groupBy?.showLabel !== false\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ groupItems.map( renderItem ) }\n\t\t\t\t\t\t\t\t</PickerActivityGroup>\n\t\t\t\t\t\t\t)\n\t\t\t\t\t  )\n\t\t\t\t\t: data.map( renderItem ) }\n\t\t\t</Composite>\n\t\t\t{ isLoading && (\n\t\t\t\t<p className=\"dataviews-loading-more\">\n\t\t\t\t\t<Spinner />\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": ["clsx", "DataViewsContext", "getDataByGroup"]
+}

package/build/components/dataviews-layouts/table/column-primary.cjs

@@ -73,8 +73,8 @@ function ColumnPrimary({
               className: "dataviews-view-table__cell-content-wrapper dataviews-title-field",
               children: [
                 level !== void 0 && level > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "dataviews-view-table__level", children: [
-                  Array(level).fill("\u2014").join(" "),
-                  "\xA0"
+                  Array(level).fill("—").join(" "),
+                  " "
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(titleField.render, { item, field: titleField })
               ]

package/build/components/dataviews-layouts/table/column-primary.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/dataviews-layouts/table/column-primary.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ComponentProps, ReactElement } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport type { NormalizedField } from '../../../types';\nimport { ItemClickWrapper } from '../utils/item-click-wrapper';\n\nfunction ColumnPrimary< Item >( {\n\titem,\n\tlevel,\n\ttitleField,\n\tmediaField,\n\tdescriptionField,\n\tonClickItem,\n\trenderItemLink,\n\tisItemClickable,\n}: {\n\titem: Item;\n\tlevel?: number;\n\ttitleField?: NormalizedField< Item >;\n\tmediaField?: NormalizedField< Item >;\n\tdescriptionField?: NormalizedField< Item >;\n\tonClickItem?: ( item: Item ) => void;\n\trenderItemLink?: (\n\t\tprops: {\n\t\t\titem: Item;\n\t\t} & ComponentProps< 'a' >\n\t) => ReactElement;\n\tisItemClickable: ( item: Item ) => boolean;\n} ) {\n\treturn (\n\t\t<Stack direction=\"row\" gap=\"md\" align=\"flex-start\" justify=\"flex-start\">\n\t\t\t{ mediaField && (\n\t\t\t\t<ItemClickWrapper\n\t\t\t\t\titem={ item }\n\t\t\t\t\tisItemClickable={ isItemClickable }\n\t\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\t\trenderItemLink={ renderItemLink }\n\t\t\t\t\tclassName=\"dataviews-view-table__cell-content-wrapper dataviews-column-primary__media\"\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tisItemClickable( item ) &&\n\t\t\t\t\t\t( !! onClickItem || !! renderItemLink ) &&\n\t\t\t\t\t\t!! titleField\n\t\t\t\t\t\t\t? titleField.getValue?.( { item } )\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<mediaField.render\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tfield={ mediaField }\n\t\t\t\t\t\tconfig={ { sizes: '32px' } }\n\t\t\t\t\t/>\n\t\t\t\t</ItemClickWrapper>\n\t\t\t) }\n\t\t\t<Stack\n\t\t\t\tdirection=\"column\"\n\t\t\t\talign=\"flex-start\"\n\t\t\t\tclassName=\"dataviews-view-table__primary-column-content\"\n\t\t\t>\n\t\t\t\t{ titleField && (\n\t\t\t\t\t<ItemClickWrapper\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tisItemClickable={ isItemClickable }\n\t\t\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\t\t\trenderItemLink={ renderItemLink }\n\t\t\t\t\t\tclassName=\"dataviews-view-table__cell-content-wrapper dataviews-title-field\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ level !== undefined && level > 0 && (\n\t\t\t\t\t\t\t<span className=\"dataviews-view-table__level\">\n\t\t\t\t\t\t\t\t{ Array( level ).fill( '\u2014' ).join( ' ' ) }&nbsp;\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<titleField.render item={ item } field={ titleField } />\n\t\t\t\t\t</ItemClickWrapper>\n\t\t\t\t) }\n\t\t\t\t{ descriptionField && (\n\t\t\t\t\t<descriptionField.render\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tfield={ descriptionField }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</Stack>\n\t\t</Stack>\n\t);\n}\n\nexport default ColumnPrimary;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,gBAAsB;AAMtB,gCAAiC;AA0C5B;AAxCL,SAAS,cAAuB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAaI;AACH,SACC,6CAAC,mBAAM,WAAU,OAAM,KAAI,MAAK,OAAM,cAAa,SAAQ,cACxD;AAAA,kBACD;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAU;AAAA,QACV,cACC,gBAAiB,IAAK,MACpB,CAAC,CAAE,eAAe,CAAC,CAAE,mBACvB,CAAC,CAAE,aACA,WAAW,WAAY,EAAE,KAAK,CAAE,IAChC;AAAA,QAGJ;AAAA,UAAC,WAAW;AAAA,UAAX;AAAA,YACA;AAAA,YACA,OAAQ;AAAA,YACR,QAAS,EAAE,OAAO,OAAO;AAAA;AAAA,QAC1B;AAAA;AAAA,IACD;AAAA,IAED;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,OAAM;AAAA,QACN,WAAU;AAAA,QAER;AAAA,wBACD;AAAA,YAAC;AAAA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,WAAU;AAAA,cAER;AAAA,0BAAU,UAAa,QAAQ,KAChC,6CAAC,UAAK,WAAU,+BACb;AAAA,wBAAO,KAAM,EAAE,KAAM,QAAI,EAAE,KAAM,GAAI;AAAA,kBAAG;AAAA,mBAC3C;AAAA,gBAED,4CAAC,WAAW,QAAX,EAAkB,MAAc,OAAQ,YAAa;AAAA;AAAA;AAAA,UACvD;AAAA,UAEC,oBACD;AAAA,YAAC,iBAAiB;AAAA,YAAjB;AAAA,cACA;AAAA,cACA,OAAQ;AAAA;AAAA,UACT;AAAA;AAAA;AAAA,IAEF;AAAA,KACD;AAEF;AAEA,IAAO,yBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ComponentProps, ReactElement } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport type { NormalizedField } from '../../../types';\nimport { ItemClickWrapper } from '../utils/item-click-wrapper';\n\nfunction ColumnPrimary< Item >( {\n\titem,\n\tlevel,\n\ttitleField,\n\tmediaField,\n\tdescriptionField,\n\tonClickItem,\n\trenderItemLink,\n\tisItemClickable,\n}: {\n\titem: Item;\n\tlevel?: number;\n\ttitleField?: NormalizedField< Item >;\n\tmediaField?: NormalizedField< Item >;\n\tdescriptionField?: NormalizedField< Item >;\n\tonClickItem?: ( item: Item ) => void;\n\trenderItemLink?: (\n\t\tprops: {\n\t\t\titem: Item;\n\t\t} & ComponentProps< 'a' >\n\t) => ReactElement;\n\tisItemClickable: ( item: Item ) => boolean;\n} ) {\n\treturn (\n\t\t<Stack direction=\"row\" gap=\"md\" align=\"flex-start\" justify=\"flex-start\">\n\t\t\t{ mediaField && (\n\t\t\t\t<ItemClickWrapper\n\t\t\t\t\titem={ item }\n\t\t\t\t\tisItemClickable={ isItemClickable }\n\t\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\t\trenderItemLink={ renderItemLink }\n\t\t\t\t\tclassName=\"dataviews-view-table__cell-content-wrapper dataviews-column-primary__media\"\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tisItemClickable( item ) &&\n\t\t\t\t\t\t( !! onClickItem || !! renderItemLink ) &&\n\t\t\t\t\t\t!! titleField\n\t\t\t\t\t\t\t? titleField.getValue?.( { item } )\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<mediaField.render\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tfield={ mediaField }\n\t\t\t\t\t\tconfig={ { sizes: '32px' } }\n\t\t\t\t\t/>\n\t\t\t\t</ItemClickWrapper>\n\t\t\t) }\n\t\t\t<Stack\n\t\t\t\tdirection=\"column\"\n\t\t\t\talign=\"flex-start\"\n\t\t\t\tclassName=\"dataviews-view-table__primary-column-content\"\n\t\t\t>\n\t\t\t\t{ titleField && (\n\t\t\t\t\t<ItemClickWrapper\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tisItemClickable={ isItemClickable }\n\t\t\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\t\t\trenderItemLink={ renderItemLink }\n\t\t\t\t\t\tclassName=\"dataviews-view-table__cell-content-wrapper dataviews-title-field\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ level !== undefined && level > 0 && (\n\t\t\t\t\t\t\t<span className=\"dataviews-view-table__level\">\n\t\t\t\t\t\t\t\t{ Array( level ).fill( '—' ).join( ' ' ) }&nbsp;\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<titleField.render item={ item } field={ titleField } />\n\t\t\t\t\t</ItemClickWrapper>\n\t\t\t\t) }\n\t\t\t\t{ descriptionField && (\n\t\t\t\t\t<descriptionField.render\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tfield={ descriptionField }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</Stack>\n\t\t</Stack>\n\t);\n}\n\nexport default ColumnPrimary;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,gBAAsB;AAMtB,gCAAiC;AA0C5B;AAxCL,SAAS,cAAuB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAaI;AACH,SACC,6CAAC,mBAAM,WAAU,OAAM,KAAI,MAAK,OAAM,cAAa,SAAQ,cACxD;AAAA,kBACD;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAU;AAAA,QACV,cACC,gBAAiB,IAAK,MACpB,CAAC,CAAE,eAAe,CAAC,CAAE,mBACvB,CAAC,CAAE,aACA,WAAW,WAAY,EAAE,KAAK,CAAE,IAChC;AAAA,QAGJ;AAAA,UAAC,WAAW;AAAA,UAAX;AAAA,YACA;AAAA,YACA,OAAQ;AAAA,YACR,QAAS,EAAE,OAAO,OAAO;AAAA;AAAA,QAC1B;AAAA;AAAA,IACD;AAAA,IAED;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,OAAM;AAAA,QACN,WAAU;AAAA,QAER;AAAA,wBACD;AAAA,YAAC;AAAA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,WAAU;AAAA,cAER;AAAA,0BAAU,UAAa,QAAQ,KAChC,6CAAC,UAAK,WAAU,+BACb;AAAA,wBAAO,KAAM,EAAE,KAAM,GAAI,EAAE,KAAM,GAAI;AAAA,kBAAG;AAAA,mBAC3C;AAAA,gBAED,4CAAC,WAAW,QAAX,EAAkB,MAAc,OAAQ,YAAa;AAAA;AAAA;AAAA,UACvD;AAAA,UAEC,oBACD;AAAA,YAAC,iBAAiB;AAAA,YAAjB;AAAA,cACA;AAAA,cACA,OAAQ;AAAA;AAAA,UACT;AAAA;AAAA;AAAA,IAEF;AAAA,KACD;AAEF;AAEA,IAAO,yBAAQ;",
   "names": []
 }

package/build/components/dataviews-pagination/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataviews-pagination/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Button, SelectControl } from '@wordpress/components';\nimport { createInterpolateElement, memo, useContext } from '@wordpress/element';\nimport { sprintf, __, _x, isRTL } from '@wordpress/i18n';\nimport { next, previous } from '@wordpress/icons';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\n\nexport function DataViewsPagination() {\n\tconst {\n\t\tview,\n\t\tonChangeView,\n\t\tpaginationInfo: { totalItems = 0, totalPages },\n\t} = useContext( DataViewsContext );\n\n\tif ( ! totalItems || ! totalPages || view.infiniteScrollEnabled ) {\n\t\treturn null;\n\t}\n\n\tconst currentPage = view.page ?? 1;\n\tconst pageSelectOptions = Array.from( Array( totalPages ) ).map(\n\t\t( _, i ) => {\n\t\t\tconst page = i + 1;\n\t\t\treturn {\n\t\t\t\tvalue: page.toString(),\n\t\t\t\tlabel: page.toString(),\n\t\t\t\t'aria-label':\n\t\t\t\t\tcurrentPage === page\n\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t// translators: 1: current page number. 2: total number of pages.\n\t\t\t\t\t\t\t\t__( 'Page %1$d of %2$d' ),\n\t\t\t\t\t\t\t\tcurrentPage,\n\t\t\t\t\t\t\t\ttotalPages\n\t\t\t\t\t\t  )\n\t\t\t\t\t\t: page.toString(),\n\t\t\t};\n\t\t}\n\t);\n\n\treturn (\n\t\t!! totalItems &&\n\t\ttotalPages !== 1 && (\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\tclassName=\"dataviews-pagination\"\n\t\t\t\tjustify=\"end\"\n\t\t\t\talign=\"center\"\n\t\t\t\tgap=\"xl\"\n\t\t\t>\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\talign=\"center\"\n\t\t\t\t\tgap=\"xs\"\n\t\t\t\t\tclassName=\"dataviews-pagination__page-select\"\n\t\t\t\t>\n\t\t\t\t\t{ createInterpolateElement(\n\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t// translators: 1: Current page number, 2: Total number of pages.\n\t\t\t\t\t\t\t_x(\n\t\t\t\t\t\t\t\t'<div>Page</div>%1$s<div>of %2$d</div>',\n\t\t\t\t\t\t\t\t'paging'\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t'<CurrentPage />',\n\t\t\t\t\t\t\ttotalPages\n\t\t\t\t\t\t),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tdiv: <div aria-hidden />,\n\t\t\t\t\t\t\t// @ts-expect-error \u2014 Tag injected via sprintf argument, not visible in format string.\n\t\t\t\t\t\t\tCurrentPage: (\n\t\t\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\t\t\taria-label={ __( 'Current page' ) }\n\t\t\t\t\t\t\t\t\tvalue={ currentPage.toString() }\n\t\t\t\t\t\t\t\t\toptions={ pageSelectOptions }\n\t\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\t\t\tpage: +newValue,\n\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tvariant=\"minimal\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t</Stack>\n\t\t\t\t<Stack direction=\"row\" gap=\"xs\" align=\"center\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\tpage: currentPage - 1,\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tdisabled={ currentPage === 1 }\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\tlabel={ __( 'Previous page' ) }\n\t\t\t\t\t\ticon={ isRTL() ? next : previous }\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\tonChangeView( { ...view, page: currentPage + 1 } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tdisabled={ currentPage >= totalPages }\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\tlabel={ __( 'Next page' ) }\n\t\t\t\t\t\ticon={ isRTL() ? previous : next }\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t/>\n\t\t\t\t</Stack>\n\t\t\t</Stack>\n\t\t)\n\t);\n}\n\nexport default memo( DataViewsPagination );\n"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Button, SelectControl } from '@wordpress/components';\nimport { createInterpolateElement, memo, useContext } from '@wordpress/element';\nimport { sprintf, __, _x, isRTL } from '@wordpress/i18n';\nimport { next, previous } from '@wordpress/icons';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\n\nexport function DataViewsPagination() {\n\tconst {\n\t\tview,\n\t\tonChangeView,\n\t\tpaginationInfo: { totalItems = 0, totalPages },\n\t} = useContext( DataViewsContext );\n\n\tif ( ! totalItems || ! totalPages || view.infiniteScrollEnabled ) {\n\t\treturn null;\n\t}\n\n\tconst currentPage = view.page ?? 1;\n\tconst pageSelectOptions = Array.from( Array( totalPages ) ).map(\n\t\t( _, i ) => {\n\t\t\tconst page = i + 1;\n\t\t\treturn {\n\t\t\t\tvalue: page.toString(),\n\t\t\t\tlabel: page.toString(),\n\t\t\t\t'aria-label':\n\t\t\t\t\tcurrentPage === page\n\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t// translators: 1: current page number. 2: total number of pages.\n\t\t\t\t\t\t\t\t__( 'Page %1$d of %2$d' ),\n\t\t\t\t\t\t\t\tcurrentPage,\n\t\t\t\t\t\t\t\ttotalPages\n\t\t\t\t\t\t  )\n\t\t\t\t\t\t: page.toString(),\n\t\t\t};\n\t\t}\n\t);\n\n\treturn (\n\t\t!! totalItems &&\n\t\ttotalPages !== 1 && (\n\t\t\t<Stack\n\t\t\t\tdirection=\"row\"\n\t\t\t\tclassName=\"dataviews-pagination\"\n\t\t\t\tjustify=\"end\"\n\t\t\t\talign=\"center\"\n\t\t\t\tgap=\"xl\"\n\t\t\t>\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\talign=\"center\"\n\t\t\t\t\tgap=\"xs\"\n\t\t\t\t\tclassName=\"dataviews-pagination__page-select\"\n\t\t\t\t>\n\t\t\t\t\t{ createInterpolateElement(\n\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t// translators: 1: Current page number, 2: Total number of pages.\n\t\t\t\t\t\t\t_x(\n\t\t\t\t\t\t\t\t'<div>Page</div>%1$s<div>of %2$d</div>',\n\t\t\t\t\t\t\t\t'paging'\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t'<CurrentPage />',\n\t\t\t\t\t\t\ttotalPages\n\t\t\t\t\t\t),\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tdiv: <div aria-hidden />,\n\t\t\t\t\t\t\t// @ts-expect-error — Tag injected via sprintf argument, not visible in format string.\n\t\t\t\t\t\t\tCurrentPage: (\n\t\t\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\t\t\taria-label={ __( 'Current page' ) }\n\t\t\t\t\t\t\t\t\tvalue={ currentPage.toString() }\n\t\t\t\t\t\t\t\t\toptions={ pageSelectOptions }\n\t\t\t\t\t\t\t\t\tonChange={ ( newValue ) => {\n\t\t\t\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\t\t\t\tpage: +newValue,\n\t\t\t\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tvariant=\"minimal\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t</Stack>\n\t\t\t\t<Stack direction=\"row\" gap=\"xs\" align=\"center\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\tonChangeView( {\n\t\t\t\t\t\t\t\t...view,\n\t\t\t\t\t\t\t\tpage: currentPage - 1,\n\t\t\t\t\t\t\t} )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tdisabled={ currentPage === 1 }\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\tlabel={ __( 'Previous page' ) }\n\t\t\t\t\t\ticon={ isRTL() ? next : previous }\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\tonChangeView( { ...view, page: currentPage + 1 } )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tdisabled={ currentPage >= totalPages }\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\tlabel={ __( 'Next page' ) }\n\t\t\t\t\t\ticon={ isRTL() ? previous : next }\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t/>\n\t\t\t\t</Stack>\n\t\t\t</Stack>\n\t\t)\n\t);\n}\n\nexport default memo( DataViewsPagination );\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAAsC;AACtC,qBAA2D;AAC3D,kBAAuC;AACvC,mBAA+B;AAC/B,gBAAsB;AAKtB,+BAA6B;AA6DjB;AA3DL,SAAS,sBAAsB;AACrC,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA,gBAAgB,EAAE,aAAa,GAAG,WAAW;AAAA,EAC9C,QAAI,2BAAY,yBAAAA,OAAiB;AAEjC,MAAK,CAAE,cAAc,CAAE,cAAc,KAAK,uBAAwB;AACjE,WAAO;AAAA,EACR;AAEA,QAAM,cAAc,KAAK,QAAQ;AACjC,QAAM,oBAAoB,MAAM,KAAM,MAAO,UAAW,CAAE,EAAE;AAAA,IAC3D,CAAE,GAAG,MAAO;AACX,YAAM,OAAO,IAAI;AACjB,aAAO;AAAA,QACN,OAAO,KAAK,SAAS;AAAA,QACrB,OAAO,KAAK,SAAS;AAAA,QACrB,cACC,gBAAgB,WACb;AAAA;AAAA,cAEA,gBAAI,mBAAoB;AAAA,UACxB;AAAA,UACA;AAAA,QACA,IACA,KAAK,SAAS;AAAA,MACnB;AAAA,IACD;AAAA,EACD;AAEA,SACC,CAAC,CAAE,cACH,eAAe,KACd;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,WAAU;AAAA,MACV,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,KAAI;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,WAAU;AAAA,YAER;AAAA,kBACD;AAAA;AAAA,oBAEC;AAAA,kBACC;AAAA,kBACA;AAAA,gBACD;AAAA,gBACA;AAAA,gBACA;AAAA,cACD;AAAA,cACA;AAAA,gBACC,KAAK,4CAAC,SAAI,eAAW,MAAC;AAAA;AAAA,gBAEtB,aACC;AAAA,kBAAC;AAAA;AAAA,oBACA,kBAAa,gBAAI,cAAe;AAAA,oBAChC,OAAQ,YAAY,SAAS;AAAA,oBAC7B,SAAU;AAAA,oBACV,UAAW,CAAE,aAAc;AAC1B,mCAAc;AAAA,wBACb,GAAG;AAAA,wBACH,MAAM,CAAC;AAAA,sBACR,CAAE;AAAA,oBACH;AAAA,oBACA,MAAK;AAAA,oBACL,SAAQ;AAAA;AAAA,gBACT;AAAA,cAEF;AAAA,YACD;AAAA;AAAA,QACD;AAAA,QACA,6CAAC,mBAAM,WAAU,OAAM,KAAI,MAAK,OAAM,UACrC;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU,MACT,aAAc;AAAA,gBACb,GAAG;AAAA,gBACH,MAAM,cAAc;AAAA,cACrB,CAAE;AAAA,cAEH,UAAW,gBAAgB;AAAA,cAC3B,wBAAsB;AAAA,cACtB,WAAQ,gBAAI,eAAgB;AAAA,cAC5B,UAAO,mBAAM,IAAI,oBAAO;AAAA,cACxB,aAAW;AAAA,cACX,MAAK;AAAA,cACL,iBAAgB;AAAA;AAAA,UACjB;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,SAAU,MACT,aAAc,EAAE,GAAG,MAAM,MAAM,cAAc,EAAE,CAAE;AAAA,cAElD,UAAW,eAAe;AAAA,cAC1B,wBAAsB;AAAA,cACtB,WAAQ,gBAAI,WAAY;AAAA,cACxB,UAAO,mBAAM,IAAI,wBAAW;AAAA,cAC5B,aAAW;AAAA,cACX,MAAK;AAAA,cACL,iBAAgB;AAAA;AAAA,UACjB;AAAA,WACD;AAAA;AAAA;AAAA,EACD;AAGH;AAEA,IAAO,mCAAQ,qBAAM,mBAAoB;",
   "names": ["DataViewsContext"]
 }