@wordpress/dataviews 16.0.1 → 17.0.0
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.
- package/CHANGELOG.md +27 -0
- package/README.md +2 -2
- package/build/components/dataform-layouts/panel/dropdown.cjs +2 -2
- package/build/components/dataform-layouts/panel/dropdown.cjs.map +2 -2
- package/build/components/dataform-layouts/panel/modal.cjs +1 -1
- package/build/components/dataform-layouts/panel/modal.cjs.map +2 -2
- package/build/components/dataform-layouts/panel/summary-button.cjs +7 -6
- package/build/components/dataform-layouts/panel/summary-button.cjs.map +2 -2
- package/build/components/dataform-layouts/panel/utils/get-label-content.cjs.map +2 -2
- package/build/components/dataviews-filters/filter.cjs.map +2 -2
- package/build/components/dataviews-layouts/grid/composite-grid.cjs.map +2 -2
- package/build/components/dataviews-layouts/list/index.cjs.map +1 -1
- package/build/components/dataviews-layouts/table/column-primary.cjs +2 -2
- package/build/components/dataviews-layouts/table/column-primary.cjs.map +2 -2
- package/build/components/dataviews-pagination/index.cjs.map +1 -1
- package/build/components/dataviews-picker-footer/index.cjs +72 -33
- package/build/components/dataviews-picker-footer/index.cjs.map +2 -2
- package/build/constants.cjs +1 -1
- package/build/constants.cjs.map +2 -2
- package/build/dataviews-picker/index.cjs +2 -1
- package/build/dataviews-picker/index.cjs.map +2 -2
- package/build/field-types/password.cjs +1 -1
- package/build/field-types/password.cjs.map +2 -2
- package/build/hooks/use-form-validity.cjs +2 -2
- package/build/hooks/use-form-validity.cjs.map +2 -2
- package/build-module/components/dataform-layouts/panel/dropdown.mjs +2 -2
- package/build-module/components/dataform-layouts/panel/dropdown.mjs.map +2 -2
- package/build-module/components/dataform-layouts/panel/modal.mjs +1 -1
- package/build-module/components/dataform-layouts/panel/modal.mjs.map +2 -2
- package/build-module/components/dataform-layouts/panel/summary-button.mjs +7 -6
- package/build-module/components/dataform-layouts/panel/summary-button.mjs.map +2 -2
- package/build-module/components/dataform-layouts/panel/utils/get-label-content.mjs.map +2 -2
- package/build-module/components/dataviews-filters/filter.mjs.map +2 -2
- package/build-module/components/dataviews-layouts/grid/composite-grid.mjs.map +2 -2
- package/build-module/components/dataviews-layouts/list/index.mjs.map +1 -1
- package/build-module/components/dataviews-layouts/table/column-primary.mjs +2 -2
- package/build-module/components/dataviews-layouts/table/column-primary.mjs.map +2 -2
- package/build-module/components/dataviews-pagination/index.mjs.map +1 -1
- package/build-module/components/dataviews-picker-footer/index.mjs +71 -33
- package/build-module/components/dataviews-picker-footer/index.mjs.map +2 -2
- package/build-module/constants.mjs +1 -1
- package/build-module/constants.mjs.map +2 -2
- package/build-module/dataviews-picker/index.mjs +6 -2
- package/build-module/dataviews-picker/index.mjs.map +2 -2
- package/build-module/field-types/password.mjs +1 -1
- package/build-module/field-types/password.mjs.map +2 -2
- package/build-module/hooks/use-form-validity.mjs +2 -2
- package/build-module/hooks/use-form-validity.mjs.map +2 -2
- package/build-style/style-rtl.css +192 -207
- package/build-style/style.css +192 -207
- package/build-types/components/dataform-layouts/panel/summary-button.d.ts +2 -2
- package/build-types/components/dataform-layouts/panel/summary-button.d.ts.map +1 -1
- package/build-types/components/dataform-layouts/panel/utils/get-label-content.d.ts.map +1 -1
- package/build-types/components/dataviews-filters/filter.d.ts.map +1 -1
- package/build-types/components/dataviews-layouts/grid/composite-grid.d.ts.map +1 -1
- package/build-types/components/dataviews-picker-footer/index.d.ts +3 -2
- package/build-types/components/dataviews-picker-footer/index.d.ts.map +1 -1
- package/build-types/dataviews-picker/index.d.ts +3 -2
- package/build-types/dataviews-picker/index.d.ts.map +1 -1
- package/build-wp/index.js +712 -668
- package/package.json +26 -21
- package/src/components/dataform-controls/style.scss +1 -1
- package/src/components/dataform-layouts/card/style.scss +1 -1
- package/src/components/dataform-layouts/details/style.scss +1 -1
- package/src/components/dataform-layouts/panel/dropdown.tsx +1 -1
- package/src/components/dataform-layouts/panel/modal.tsx +1 -1
- package/src/components/dataform-layouts/panel/style.scss +18 -34
- package/src/components/dataform-layouts/panel/summary-button.tsx +17 -8
- package/src/components/dataform-layouts/panel/utils/get-label-content.tsx +0 -1
- package/src/components/dataform-layouts/regular/style.scss +4 -4
- package/src/components/dataviews-bulk-actions/style.scss +2 -2
- package/src/components/dataviews-filters/filter.tsx +0 -1
- package/src/components/dataviews-filters/style.scss +45 -46
- package/src/components/dataviews-layouts/activity/style.scss +19 -19
- package/src/components/dataviews-layouts/grid/composite-grid.tsx +0 -1
- package/src/components/dataviews-layouts/grid/style.scss +19 -13
- package/src/components/dataviews-layouts/list/style.scss +35 -27
- package/src/components/dataviews-layouts/picker-activity/style.scss +18 -18
- package/src/components/dataviews-layouts/picker-grid/style.scss +18 -12
- package/src/components/dataviews-layouts/picker-table/style.scss +7 -5
- package/src/components/dataviews-layouts/table/style.scss +17 -17
- package/src/components/dataviews-picker-footer/index.tsx +94 -31
- package/src/components/dataviews-picker-footer/style.scss +1 -1
- package/src/components/dataviews-view-config/style.scss +1 -1
- package/src/dataviews/style.scss +9 -9
- package/src/dataviews-picker/index.tsx +9 -3
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/dataviews-layouts/grid/composite-grid.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ComponentProps, ReactElement, HTMLAttributes } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tFlex,\n\tFlexItem,\n\tComposite,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\n// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.\nimport { Stack, Tooltip } from '@wordpress/ui';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { isAppleOS } from '@wordpress/keycodes';\nimport {\n\tuseCallback,\n\tuseContext,\n\tuseRef,\n\tforwardRef,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../../lock-unlock';\nimport ItemActions from '../../dataviews-item-actions';\nimport DataViewsSelectionCheckbox from '../../dataviews-selection-checkbox';\nimport DataViewsContext from '../../dataviews-context';\nimport {\n\tuseHasAPossibleBulkAction,\n\tuseSomeItemHasAPossibleBulkAction,\n} from '../../dataviews-bulk-actions';\nimport type {\n\tAction,\n\tNormalizedField,\n\tViewGrid as ViewGridType,\n} from '../../../types';\nimport type { SetSelection } from '../../../types/private';\nimport { ItemClickWrapper } from '../utils/item-click-wrapper';\nconst { Badge: WCBadge } = unlock( componentsPrivateApis );\nimport { useGridColumns } from './preview-size-picker';\nimport { GridItems } from '../utils/grid-items';\nimport {\n\tuseIntersectionObserver,\n\tusePlaceholdersNeeded,\n} from '../utils/use-infinite-scroll';\n\nfunction chunk< T >( array: T[], size: number ): T[][] {\n\tconst chunks: T[][] = [];\n\tfor ( let i = 0, j = array.length; i < j; i += size ) {\n\t\tchunks.push( array.slice( i, i + size ) );\n\t}\n\treturn chunks;\n}\n\ninterface GridItemProps< Item > extends HTMLAttributes< HTMLDivElement > {\n\tview: ViewGridType;\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tgetItemId: ( item: Item ) => string;\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\titem: Item;\n\tactions: Action< Item >[];\n\ttitleField?: NormalizedField< Item >;\n\tmediaField?: NormalizedField< Item >;\n\tdescriptionField?: NormalizedField< Item >;\n\tregularFields: NormalizedField< Item >[];\n\tbadgeFields: NormalizedField< Item >[];\n\thasBulkActions: boolean;\n\tconfig: {\n\t\tsizes: string;\n\t};\n\tposinset?: number;\n\tsetsize?: number;\n}\n\nconst GridItem = forwardRef< HTMLDivElement, GridItemProps< any > >(\n\tfunction GridItem(\n\t\t{\n\t\t\tview,\n\t\t\tselection,\n\t\t\tonChangeSelection,\n\t\t\tonClickItem,\n\t\t\tisItemClickable,\n\t\t\trenderItemLink,\n\t\t\tgetItemId,\n\t\t\titem,\n\t\t\tactions,\n\t\t\tmediaField,\n\t\t\ttitleField,\n\t\t\tdescriptionField,\n\t\t\tregularFields,\n\t\t\tbadgeFields,\n\t\t\thasBulkActions,\n\t\t\tconfig,\n\t\t\tposinset,\n\t\t\tsetsize,\n\t\t\t...props\n\t\t},\n\t\tforwardedRef\n\t) {\n\t\tconst {\n\t\t\tshowTitle = true,\n\t\t\tshowMedia = true,\n\t\t\tshowDescription = true,\n\t\t} = view;\n\t\tconst hasBulkAction = useHasAPossibleBulkAction( actions, item );\n\t\tconst id = getItemId( item );\n\t\tconst elementRef = useRef< HTMLDivElement | null >( null );\n\n\t\t// Merge refs callback\n\t\tconst setRefs = useCallback(\n\t\t\t( node: HTMLDivElement | null ) => {\n\t\t\t\telementRef.current = node;\n\t\t\t\tif ( typeof forwardedRef === 'function' ) {\n\t\t\t\t\tforwardedRef( node );\n\t\t\t\t} else if ( forwardedRef ) {\n\t\t\t\t\tforwardedRef.current = node;\n\t\t\t\t}\n\t\t\t},\n\t\t\t[ forwardedRef ]\n\t\t);\n\t\tuseIntersectionObserver( elementRef, posinset );\n\t\tconst instanceId = useInstanceId( GridItem );\n\n\t\tconst isSelected = selection.includes( id );\n\n\t\tconst mediaPlaceholder = (\n\t\t\t<span className=\"dataviews-view-grid__media-placeholder\" />\n\t\t);\n\t\tconst rendersMediaField = showMedia && mediaField?.render;\n\t\tconst renderedMediaField = rendersMediaField ? (\n\t\t\t<mediaField.render\n\t\t\t\titem={ item }\n\t\t\t\tfield={ mediaField }\n\t\t\t\tconfig={ config }\n\t\t\t/>\n\t\t) : (\n\t\t\tmediaPlaceholder\n\t\t);\n\t\tconst renderedTitleField =\n\t\t\tshowTitle && titleField?.render ? (\n\t\t\t\t<titleField.render item={ item } field={ titleField } />\n\t\t\t) : null;\n\t\tlet mediaA11yProps;\n\t\tlet titleA11yProps;\n\t\tif ( isItemClickable( item ) && onClickItem ) {\n\t\t\tif ( renderedTitleField ) {\n\t\t\t\tmediaA11yProps = {\n\t\t\t\t\t'aria-labelledby': `dataviews-view-grid__title-field-${ instanceId }`,\n\t\t\t\t};\n\t\t\t\ttitleA11yProps = {\n\t\t\t\t\tid: `dataviews-view-grid__title-field-${ instanceId }`,\n\t\t\t\t};\n\t\t\t} else {\n\t\t\t\tmediaA11yProps = {\n\t\t\t\t\t'aria-label': __( 'Navigate to item' ),\n\t\t\t\t};\n\t\t\t}\n\t\t}\n\t\treturn (\n\t\t\t<Stack\n\t\t\t\tdirection=\"column\"\n\t\t\t\t{ ...props }\n\t\t\t\tref={ setRefs }\n\t\t\t\taria-setsize={ setsize }\n\t\t\t\taria-posinset={ posinset }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\tprops.className,\n\t\t\t\t\t'dataviews-view-grid__row__gridcell',\n\t\t\t\t\t'dataviews-view-grid__card',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-selected': hasBulkAction && isSelected,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\tonClickCapture={ ( event ) => {\n\t\t\t\t\tprops.onClickCapture?.( event );\n\t\t\t\t\tif ( isAppleOS() ? event.metaKey : event.ctrlKey ) {\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tif ( ! hasBulkAction ) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t\t? selection.filter(\n\t\t\t\t\t\t\t\t\t\t( itemId ) => id !== itemId\n\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t\t: [ ...selection, id ]\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t>\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={ clsx( 'dataviews-view-grid__media', {\n\t\t\t\t\t\t'dataviews-view-grid__media--placeholder':\n\t\t\t\t\t\t\t! rendersMediaField,\n\t\t\t\t\t} ) }\n\t\t\t\t\t{ ...mediaA11yProps }\n\t\t\t\t>\n\t\t\t\t\t{ renderedMediaField }\n\t\t\t\t</ItemClickWrapper>\n\t\t\t\t{ hasBulkActions && (\n\t\t\t\t\t<DataViewsSelectionCheckbox\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\t\tdisabled={ ! hasBulkAction }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ !! actions?.length && (\n\t\t\t\t\t<div className=\"dataviews-view-grid__media-actions\">\n\t\t\t\t\t\t<ItemActions\n\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\tisCompact\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t{ showTitle && (\n\t\t\t\t\t<div className=\"dataviews-view-grid__title-actions\">\n\t\t\t\t\t\t<ItemClickWrapper\n\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\tisItemClickable={ isItemClickable }\n\t\t\t\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\t\t\t\trenderItemLink={ renderItemLink }\n\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__title-field dataviews-title-field\"\n\t\t\t\t\t\t\t{ ...titleA11yProps }\n\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\ttitleField?.getValueFormatted( {\n\t\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\t\tfield: titleField,\n\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\t\t{ renderedTitleField }\n\t\t\t\t\t\t</ItemClickWrapper>\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t<Stack direction=\"column\" gap=\"xs\">\n\t\t\t\t\t{ showDescription && descriptionField?.render && (\n\t\t\t\t\t\t<descriptionField.render\n\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\tfield={ descriptionField }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! badgeFields?.length && (\n\t\t\t\t\t\t<Stack\n\t\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__badge-fields\"\n\t\t\t\t\t\t\tgap=\"sm\"\n\t\t\t\t\t\t\twrap=\"wrap\"\n\t\t\t\t\t\t\talign=\"top\"\n\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ badgeFields.map( ( field ) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<WCBadge\n\t\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field-value\"\n\t\t\t\t\t\t\t\t\t>\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</WCBadge>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! regularFields?.length && (\n\t\t\t\t\t\t<Stack\n\t\t\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__fields\"\n\t\t\t\t\t\t\tgap=\"xs\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ regularFields.map( ( field ) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field\"\n\t\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\t\tgap={ 1 }\n\t\t\t\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\t\t\t\texpanded\n\t\t\t\t\t\t\t\t\t\tstyle={ { height: 'auto' } }\n\t\t\t\t\t\t\t\t\t\tdirection=\"row\"\n\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\t\t<Tooltip.Root>\n\t\t\t\t\t\t\t\t\t\t\t\t<Tooltip.Trigger\n\t\t\t\t\t\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<FlexItem className=\"dataviews-view-grid__field-name\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{ field.header }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t<Tooltip.Popup>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ field.label }\n\t\t\t\t\t\t\t\t\t\t\t\t</Tooltip.Popup>\n\t\t\t\t\t\t\t\t\t\t\t</Tooltip.Root>\n\t\t\t\t\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field-value\"\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={ { maxHeight: 'none' } }\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<field.render\n\t\t\t\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t) }\n\t\t\t\t</Stack>\n\t\t\t</Stack>\n\t\t);\n\t}\n) as < Item >(\n\tprops: GridItemProps< Item > & {\n\t\tref?: React.ForwardedRef< HTMLDivElement >;\n\t}\n) => React.ReactNode;\ninterface CompositeGridProps< Item > {\n\tdata: Item[];\n\tisInfiniteScroll: boolean;\n\tclassName?: string;\n\tinert?: string;\n\tisLoading?: boolean;\n\tview: ViewGridType;\n\tfields: NormalizedField< Item >[];\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tonClickItem?: ( item: Item ) => void;\n\tisItemClickable: ( item: Item ) => boolean;\n\trenderItemLink?: (\n\t\tprops: {\n\t\t\titem: Item;\n\t\t} & ComponentProps< 'a' >\n\t) => ReactElement;\n\tgetItemId: ( item: Item ) => string;\n\tactions: Action< Item >[];\n}\n\nexport default function CompositeGrid< Item >( {\n\tdata,\n\tisInfiniteScroll,\n\tclassName,\n\tinert,\n\tisLoading,\n\tview,\n\tfields,\n\tselection,\n\tonChangeSelection,\n\tonClickItem,\n\tisItemClickable,\n\trenderItemLink,\n\tgetItemId,\n\tactions,\n}: CompositeGridProps< Item > ) {\n\tconst { paginationInfo, resizeObserverRef } =\n\t\tuseContext( DataViewsContext );\n\tconst gridColumns = useGridColumns();\n\tconst hasBulkActions = useSomeItemHasAPossibleBulkAction( actions, data );\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\tconst { regularFields, badgeFields } = otherFields.reduce(\n\t\t(\n\t\t\taccumulator: Record< string, NormalizedField< Item >[] >,\n\t\t\tfieldId\n\t\t) => {\n\t\t\tconst field = fields.find( ( f ) => f.id === fieldId );\n\t\t\tif ( ! field ) {\n\t\t\t\treturn accumulator;\n\t\t\t}\n\t\t\t// If the field is a badge field, add it to the badgeFields array\n\t\t\t// otherwise add it to the rest visibleFields array.\n\t\t\tconst key = view.layout?.badgeFields?.includes( fieldId )\n\t\t\t\t? 'badgeFields'\n\t\t\t\t: 'regularFields';\n\t\t\taccumulator[ key ].push( field );\n\t\t\treturn accumulator;\n\t\t},\n\t\t{ regularFields: [], badgeFields: [] }\n\t);\n\n\t/*\n\t * This is the maximum width that an image can achieve in the grid. The reasoning is:\n\t * The biggest min image width available is 430px (see /dataviews-layouts/grid/preview-size-picker.tsx).\n\t * Because the grid is responsive, once there is room for another column, the images shrink to accommodate it.\n\t * So each image will never grow past 2*430px plus a little more to account for the gaps.\n\t */\n\tconst size = '900px';\n\tconst totalRows = Math.ceil( data.length / gridColumns );\n\n\t// Calculate placeholders needed for infinite scroll\n\tconst placeholdersNeeded = usePlaceholdersNeeded(\n\t\tdata,\n\t\tisInfiniteScroll,\n\t\tgridColumns\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{\n\t\t\t\t// Render infinite scroll layout (no rows, feed semantics)\n\t\t\t\tisInfiniteScroll && (\n\t\t\t\t\t<Composite\n\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t<GridItems\n\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t'dataviews-view-grid-infinite-scroll',\n\t\t\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t[ `has-${ view.layout?.density }-density` ]:\n\t\t\t\t\t\t\t\t\t\t\tview.layout?.density &&\n\t\t\t\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\t\t\t\t'compact',\n\t\t\t\t\t\t\t\t\t\t\t\t'comfortable',\n\t\t\t\t\t\t\t\t\t\t\t].includes( view.layout.density ),\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\tpreviewSize={ view.layout?.previewSize }\n\t\t\t\t\t\t\t\taria-busy={ isLoading }\n\t\t\t\t\t\t\t\tref={ resizeObserverRef }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t\trole=\"feed\"\n\t\t\t\t\t\tfocusWrap\n\t\t\t\t\t\t// @ts-ignore\n\t\t\t\t\t\tinert={ inert }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ /* Render placeholders for unloaded items in first row */ }\n\t\t\t\t\t\t{ Array.from( { length: placeholdersNeeded } ).map(\n\t\t\t\t\t\t\t( _, index ) => (\n\t\t\t\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\t\t\t\tkey={ `placeholder-${ index }` }\n\t\t\t\t\t\t\t\t\trender={ ( props ) => (\n\t\t\t\t\t\t\t\t\t\t<Stack\n\t\t\t\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\t\t\t\t\t\t\trole=\"article\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__row__gridcell dataviews-view-grid__card dataviews-view-grid__placeholder\"\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\taria-hidden\n\t\t\t\t\t\t\t\t\ttabIndex={ -1 }\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{ data.map( ( item ) => {\n\t\t\t\t\t\t\tconst itemId = getItemId( item );\n\t\t\t\t\t\t\t// Use position from item for infinite scroll\n\t\t\t\t\t\t\tconst stablePosition = ( item as any ).position;\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\t\t\t\tkey={ itemId }\n\t\t\t\t\t\t\t\t\trender={ ( props ) => (\n\t\t\t\t\t\t\t\t\t\t<GridItem\n\t\t\t\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\t\t\t\tid={ itemId }\n\t\t\t\t\t\t\t\t\t\t\trole=\"article\"\n\t\t\t\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\t\t\t\tonChangeSelection={\n\t\t\t\t\t\t\t\t\t\t\t\tonChangeSelection\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\t\t\t\t\t\t\t\tisItemClickable={ isItemClickable }\n\t\t\t\t\t\t\t\t\t\t\trenderItemLink={ renderItemLink }\n\t\t\t\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\t\tactions={ actions }\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\tregularFields={ regularFields }\n\t\t\t\t\t\t\t\t\t\t\tbadgeFields={ badgeFields }\n\t\t\t\t\t\t\t\t\t\t\thasBulkActions={ hasBulkActions }\n\t\t\t\t\t\t\t\t\t\t\tposinset={ stablePosition }\n\t\t\t\t\t\t\t\t\t\t\tsetsize={\n\t\t\t\t\t\t\t\t\t\t\t\tpaginationInfo.totalItems\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tconfig={ {\n\t\t\t\t\t\t\t\t\t\t\t\tsizes: size,\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</Composite>\n\t\t\t\t)\n\t\t\t}\n\t\t\t{\n\t\t\t\t// Render standard grid layout (with rows, grid semantics)\n\t\t\t\t! isInfiniteScroll && (\n\t\t\t\t\t<Composite\n\t\t\t\t\t\trole=\"grid\"\n\t\t\t\t\t\tclassName={ clsx( 'dataviews-view-grid', className, {\n\t\t\t\t\t\t\t[ `has-${ view.layout?.density }-density` ]:\n\t\t\t\t\t\t\t\tview.layout?.density &&\n\t\t\t\t\t\t\t\t[ 'compact', 'comfortable' ].includes(\n\t\t\t\t\t\t\t\t\tview.layout.density\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t\tfocusWrap\n\t\t\t\t\t\taria-busy={ isLoading }\n\t\t\t\t\t\taria-rowcount={ totalRows }\n\t\t\t\t\t\tref={ resizeObserverRef }\n\t\t\t\t\t\t// @ts-ignore\n\t\t\t\t\t\tinert={ inert }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ chunk( data, gridColumns ).map( ( row, i ) => (\n\t\t\t\t\t\t\t<Composite.Row\n\t\t\t\t\t\t\t\tkey={ i }\n\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\trole=\"row\"\n\t\t\t\t\t\t\t\t\t\taria-rowindex={ i + 1 }\n\t\t\t\t\t\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t\t\t\t\t\t/* translators: %d: The row number in the grid */\n\t\t\t\t\t\t\t\t\t\t\t__( 'Row %d' ),\n\t\t\t\t\t\t\t\t\t\t\ti + 1\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__row\"\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\tgridTemplateColumns: `repeat( ${ gridColumns }, minmax(0, 1fr) )`,\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\t\t{ row.map( ( item ) => {\n\t\t\t\t\t\t\t\t\tconst itemId = getItemId( item );\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\t\t\t\t\t\tkey={ itemId }\n\t\t\t\t\t\t\t\t\t\t\trender={ ( props ) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<GridItem\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\t\t\t\t\t\tid={ itemId }\n\t\t\t\t\t\t\t\t\t\t\t\t\trole=\"gridcell\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\t\t\t\t\t\tonChangeSelection={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChangeSelection\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\t\t\t\t\t\t\t\t\t\tisItemClickable={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tisItemClickable\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\trenderItemLink={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trenderItemLink\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\t\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\t\t\t\t\t\t\t\t\tdescriptionField={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdescriptionField\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tregularFields={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tregularFields\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tbadgeFields={ badgeFields }\n\t\t\t\t\t\t\t\t\t\t\t\t\thasBulkActions={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\thasBulkActions\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfig={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsizes: size,\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t/>\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</Composite.Row>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Composite>\n\t\t\t\t)\n\t\t\t}\n\t\t</>\n\t);\n}\n"],
|
|
5
|
-
"mappings": ";AAGA,OAAO,UAAU;AAMjB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,OACT;
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ComponentProps, ReactElement, HTMLAttributes } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tFlex,\n\tFlexItem,\n\tComposite,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { Stack, Tooltip } from '@wordpress/ui';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { isAppleOS } from '@wordpress/keycodes';\nimport {\n\tuseCallback,\n\tuseContext,\n\tuseRef,\n\tforwardRef,\n} from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../../lock-unlock';\nimport ItemActions from '../../dataviews-item-actions';\nimport DataViewsSelectionCheckbox from '../../dataviews-selection-checkbox';\nimport DataViewsContext from '../../dataviews-context';\nimport {\n\tuseHasAPossibleBulkAction,\n\tuseSomeItemHasAPossibleBulkAction,\n} from '../../dataviews-bulk-actions';\nimport type {\n\tAction,\n\tNormalizedField,\n\tViewGrid as ViewGridType,\n} from '../../../types';\nimport type { SetSelection } from '../../../types/private';\nimport { ItemClickWrapper } from '../utils/item-click-wrapper';\nconst { Badge: WCBadge } = unlock( componentsPrivateApis );\nimport { useGridColumns } from './preview-size-picker';\nimport { GridItems } from '../utils/grid-items';\nimport {\n\tuseIntersectionObserver,\n\tusePlaceholdersNeeded,\n} from '../utils/use-infinite-scroll';\n\nfunction chunk< T >( array: T[], size: number ): T[][] {\n\tconst chunks: T[][] = [];\n\tfor ( let i = 0, j = array.length; i < j; i += size ) {\n\t\tchunks.push( array.slice( i, i + size ) );\n\t}\n\treturn chunks;\n}\n\ninterface GridItemProps< Item > extends HTMLAttributes< HTMLDivElement > {\n\tview: ViewGridType;\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tgetItemId: ( item: Item ) => string;\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\titem: Item;\n\tactions: Action< Item >[];\n\ttitleField?: NormalizedField< Item >;\n\tmediaField?: NormalizedField< Item >;\n\tdescriptionField?: NormalizedField< Item >;\n\tregularFields: NormalizedField< Item >[];\n\tbadgeFields: NormalizedField< Item >[];\n\thasBulkActions: boolean;\n\tconfig: {\n\t\tsizes: string;\n\t};\n\tposinset?: number;\n\tsetsize?: number;\n}\n\nconst GridItem = forwardRef< HTMLDivElement, GridItemProps< any > >(\n\tfunction GridItem(\n\t\t{\n\t\t\tview,\n\t\t\tselection,\n\t\t\tonChangeSelection,\n\t\t\tonClickItem,\n\t\t\tisItemClickable,\n\t\t\trenderItemLink,\n\t\t\tgetItemId,\n\t\t\titem,\n\t\t\tactions,\n\t\t\tmediaField,\n\t\t\ttitleField,\n\t\t\tdescriptionField,\n\t\t\tregularFields,\n\t\t\tbadgeFields,\n\t\t\thasBulkActions,\n\t\t\tconfig,\n\t\t\tposinset,\n\t\t\tsetsize,\n\t\t\t...props\n\t\t},\n\t\tforwardedRef\n\t) {\n\t\tconst {\n\t\t\tshowTitle = true,\n\t\t\tshowMedia = true,\n\t\t\tshowDescription = true,\n\t\t} = view;\n\t\tconst hasBulkAction = useHasAPossibleBulkAction( actions, item );\n\t\tconst id = getItemId( item );\n\t\tconst elementRef = useRef< HTMLDivElement | null >( null );\n\n\t\t// Merge refs callback\n\t\tconst setRefs = useCallback(\n\t\t\t( node: HTMLDivElement | null ) => {\n\t\t\t\telementRef.current = node;\n\t\t\t\tif ( typeof forwardedRef === 'function' ) {\n\t\t\t\t\tforwardedRef( node );\n\t\t\t\t} else if ( forwardedRef ) {\n\t\t\t\t\tforwardedRef.current = node;\n\t\t\t\t}\n\t\t\t},\n\t\t\t[ forwardedRef ]\n\t\t);\n\t\tuseIntersectionObserver( elementRef, posinset );\n\t\tconst instanceId = useInstanceId( GridItem );\n\n\t\tconst isSelected = selection.includes( id );\n\n\t\tconst mediaPlaceholder = (\n\t\t\t<span className=\"dataviews-view-grid__media-placeholder\" />\n\t\t);\n\t\tconst rendersMediaField = showMedia && mediaField?.render;\n\t\tconst renderedMediaField = rendersMediaField ? (\n\t\t\t<mediaField.render\n\t\t\t\titem={ item }\n\t\t\t\tfield={ mediaField }\n\t\t\t\tconfig={ config }\n\t\t\t/>\n\t\t) : (\n\t\t\tmediaPlaceholder\n\t\t);\n\t\tconst renderedTitleField =\n\t\t\tshowTitle && titleField?.render ? (\n\t\t\t\t<titleField.render item={ item } field={ titleField } />\n\t\t\t) : null;\n\t\tlet mediaA11yProps;\n\t\tlet titleA11yProps;\n\t\tif ( isItemClickable( item ) && onClickItem ) {\n\t\t\tif ( renderedTitleField ) {\n\t\t\t\tmediaA11yProps = {\n\t\t\t\t\t'aria-labelledby': `dataviews-view-grid__title-field-${ instanceId }`,\n\t\t\t\t};\n\t\t\t\ttitleA11yProps = {\n\t\t\t\t\tid: `dataviews-view-grid__title-field-${ instanceId }`,\n\t\t\t\t};\n\t\t\t} else {\n\t\t\t\tmediaA11yProps = {\n\t\t\t\t\t'aria-label': __( 'Navigate to item' ),\n\t\t\t\t};\n\t\t\t}\n\t\t}\n\t\treturn (\n\t\t\t<Stack\n\t\t\t\tdirection=\"column\"\n\t\t\t\t{ ...props }\n\t\t\t\tref={ setRefs }\n\t\t\t\taria-setsize={ setsize }\n\t\t\t\taria-posinset={ posinset }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\tprops.className,\n\t\t\t\t\t'dataviews-view-grid__row__gridcell',\n\t\t\t\t\t'dataviews-view-grid__card',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-selected': hasBulkAction && isSelected,\n\t\t\t\t\t}\n\t\t\t\t) }\n\t\t\t\tonClickCapture={ ( event ) => {\n\t\t\t\t\tprops.onClickCapture?.( event );\n\t\t\t\t\tif ( isAppleOS() ? event.metaKey : event.ctrlKey ) {\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tif ( ! hasBulkAction ) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\t\tisSelected\n\t\t\t\t\t\t\t\t? selection.filter(\n\t\t\t\t\t\t\t\t\t\t( itemId ) => id !== itemId\n\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t\t: [ ...selection, id ]\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t} }\n\t\t\t>\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={ clsx( 'dataviews-view-grid__media', {\n\t\t\t\t\t\t'dataviews-view-grid__media--placeholder':\n\t\t\t\t\t\t\t! rendersMediaField,\n\t\t\t\t\t} ) }\n\t\t\t\t\t{ ...mediaA11yProps }\n\t\t\t\t>\n\t\t\t\t\t{ renderedMediaField }\n\t\t\t\t</ItemClickWrapper>\n\t\t\t\t{ hasBulkActions && (\n\t\t\t\t\t<DataViewsSelectionCheckbox\n\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\t\tdisabled={ ! hasBulkAction }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t\t{ !! actions?.length && (\n\t\t\t\t\t<div className=\"dataviews-view-grid__media-actions\">\n\t\t\t\t\t\t<ItemActions\n\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\tisCompact\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t{ showTitle && (\n\t\t\t\t\t<div className=\"dataviews-view-grid__title-actions\">\n\t\t\t\t\t\t<ItemClickWrapper\n\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\tisItemClickable={ isItemClickable }\n\t\t\t\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\t\t\t\trenderItemLink={ renderItemLink }\n\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__title-field dataviews-title-field\"\n\t\t\t\t\t\t\t{ ...titleA11yProps }\n\t\t\t\t\t\t\ttitle={\n\t\t\t\t\t\t\t\ttitleField?.getValueFormatted( {\n\t\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\t\tfield: titleField,\n\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\t\t{ renderedTitleField }\n\t\t\t\t\t\t</ItemClickWrapper>\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t<Stack direction=\"column\" gap=\"xs\">\n\t\t\t\t\t{ showDescription && descriptionField?.render && (\n\t\t\t\t\t\t<descriptionField.render\n\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\tfield={ descriptionField }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! badgeFields?.length && (\n\t\t\t\t\t\t<Stack\n\t\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__badge-fields\"\n\t\t\t\t\t\t\tgap=\"sm\"\n\t\t\t\t\t\t\twrap=\"wrap\"\n\t\t\t\t\t\t\talign=\"top\"\n\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ badgeFields.map( ( field ) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<WCBadge\n\t\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field-value\"\n\t\t\t\t\t\t\t\t\t>\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</WCBadge>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! regularFields?.length && (\n\t\t\t\t\t\t<Stack\n\t\t\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__fields\"\n\t\t\t\t\t\t\tgap=\"xs\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ regularFields.map( ( field ) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field\"\n\t\t\t\t\t\t\t\t\t\tkey={ field.id }\n\t\t\t\t\t\t\t\t\t\tgap={ 1 }\n\t\t\t\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\t\t\t\texpanded\n\t\t\t\t\t\t\t\t\t\tstyle={ { height: 'auto' } }\n\t\t\t\t\t\t\t\t\t\tdirection=\"row\"\n\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\t\t<Tooltip.Root>\n\t\t\t\t\t\t\t\t\t\t\t\t<Tooltip.Trigger\n\t\t\t\t\t\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<FlexItem className=\"dataviews-view-grid__field-name\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{ field.header }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t<Tooltip.Popup>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ field.label }\n\t\t\t\t\t\t\t\t\t\t\t\t</Tooltip.Popup>\n\t\t\t\t\t\t\t\t\t\t\t</Tooltip.Root>\n\t\t\t\t\t\t\t\t\t\t\t<FlexItem\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__field-value\"\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={ { maxHeight: 'none' } }\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<field.render\n\t\t\t\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t) }\n\t\t\t\t</Stack>\n\t\t\t</Stack>\n\t\t);\n\t}\n) as < Item >(\n\tprops: GridItemProps< Item > & {\n\t\tref?: React.ForwardedRef< HTMLDivElement >;\n\t}\n) => React.ReactNode;\ninterface CompositeGridProps< Item > {\n\tdata: Item[];\n\tisInfiniteScroll: boolean;\n\tclassName?: string;\n\tinert?: string;\n\tisLoading?: boolean;\n\tview: ViewGridType;\n\tfields: NormalizedField< Item >[];\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tonClickItem?: ( item: Item ) => void;\n\tisItemClickable: ( item: Item ) => boolean;\n\trenderItemLink?: (\n\t\tprops: {\n\t\t\titem: Item;\n\t\t} & ComponentProps< 'a' >\n\t) => ReactElement;\n\tgetItemId: ( item: Item ) => string;\n\tactions: Action< Item >[];\n}\n\nexport default function CompositeGrid< Item >( {\n\tdata,\n\tisInfiniteScroll,\n\tclassName,\n\tinert,\n\tisLoading,\n\tview,\n\tfields,\n\tselection,\n\tonChangeSelection,\n\tonClickItem,\n\tisItemClickable,\n\trenderItemLink,\n\tgetItemId,\n\tactions,\n}: CompositeGridProps< Item > ) {\n\tconst { paginationInfo, resizeObserverRef } =\n\t\tuseContext( DataViewsContext );\n\tconst gridColumns = useGridColumns();\n\tconst hasBulkActions = useSomeItemHasAPossibleBulkAction( actions, data );\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\tconst { regularFields, badgeFields } = otherFields.reduce(\n\t\t(\n\t\t\taccumulator: Record< string, NormalizedField< Item >[] >,\n\t\t\tfieldId\n\t\t) => {\n\t\t\tconst field = fields.find( ( f ) => f.id === fieldId );\n\t\t\tif ( ! field ) {\n\t\t\t\treturn accumulator;\n\t\t\t}\n\t\t\t// If the field is a badge field, add it to the badgeFields array\n\t\t\t// otherwise add it to the rest visibleFields array.\n\t\t\tconst key = view.layout?.badgeFields?.includes( fieldId )\n\t\t\t\t? 'badgeFields'\n\t\t\t\t: 'regularFields';\n\t\t\taccumulator[ key ].push( field );\n\t\t\treturn accumulator;\n\t\t},\n\t\t{ regularFields: [], badgeFields: [] }\n\t);\n\n\t/*\n\t * This is the maximum width that an image can achieve in the grid. The reasoning is:\n\t * The biggest min image width available is 430px (see /dataviews-layouts/grid/preview-size-picker.tsx).\n\t * Because the grid is responsive, once there is room for another column, the images shrink to accommodate it.\n\t * So each image will never grow past 2*430px plus a little more to account for the gaps.\n\t */\n\tconst size = '900px';\n\tconst totalRows = Math.ceil( data.length / gridColumns );\n\n\t// Calculate placeholders needed for infinite scroll\n\tconst placeholdersNeeded = usePlaceholdersNeeded(\n\t\tdata,\n\t\tisInfiniteScroll,\n\t\tgridColumns\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{\n\t\t\t\t// Render infinite scroll layout (no rows, feed semantics)\n\t\t\t\tisInfiniteScroll && (\n\t\t\t\t\t<Composite\n\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t<GridItems\n\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t'dataviews-view-grid-infinite-scroll',\n\t\t\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t[ `has-${ view.layout?.density }-density` ]:\n\t\t\t\t\t\t\t\t\t\t\tview.layout?.density &&\n\t\t\t\t\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\t\t\t\t\t'compact',\n\t\t\t\t\t\t\t\t\t\t\t\t'comfortable',\n\t\t\t\t\t\t\t\t\t\t\t].includes( view.layout.density ),\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\tpreviewSize={ view.layout?.previewSize }\n\t\t\t\t\t\t\t\taria-busy={ isLoading }\n\t\t\t\t\t\t\t\tref={ resizeObserverRef }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t\trole=\"feed\"\n\t\t\t\t\t\tfocusWrap\n\t\t\t\t\t\t// @ts-ignore\n\t\t\t\t\t\tinert={ inert }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ /* Render placeholders for unloaded items in first row */ }\n\t\t\t\t\t\t{ Array.from( { length: placeholdersNeeded } ).map(\n\t\t\t\t\t\t\t( _, index ) => (\n\t\t\t\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\t\t\t\tkey={ `placeholder-${ index }` }\n\t\t\t\t\t\t\t\t\trender={ ( props ) => (\n\t\t\t\t\t\t\t\t\t\t<Stack\n\t\t\t\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\t\t\t\tdirection=\"column\"\n\t\t\t\t\t\t\t\t\t\t\trole=\"article\"\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__row__gridcell dataviews-view-grid__card dataviews-view-grid__placeholder\"\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\taria-hidden\n\t\t\t\t\t\t\t\t\ttabIndex={ -1 }\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{ data.map( ( item ) => {\n\t\t\t\t\t\t\tconst itemId = getItemId( item );\n\t\t\t\t\t\t\t// Use position from item for infinite scroll\n\t\t\t\t\t\t\tconst stablePosition = ( item as any ).position;\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\t\t\t\tkey={ itemId }\n\t\t\t\t\t\t\t\t\trender={ ( props ) => (\n\t\t\t\t\t\t\t\t\t\t<GridItem\n\t\t\t\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\t\t\t\tid={ itemId }\n\t\t\t\t\t\t\t\t\t\t\trole=\"article\"\n\t\t\t\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\t\t\t\tonChangeSelection={\n\t\t\t\t\t\t\t\t\t\t\t\tonChangeSelection\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\t\t\t\t\t\t\t\tisItemClickable={ isItemClickable }\n\t\t\t\t\t\t\t\t\t\t\trenderItemLink={ renderItemLink }\n\t\t\t\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\t\tactions={ actions }\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\tregularFields={ regularFields }\n\t\t\t\t\t\t\t\t\t\t\tbadgeFields={ badgeFields }\n\t\t\t\t\t\t\t\t\t\t\thasBulkActions={ hasBulkActions }\n\t\t\t\t\t\t\t\t\t\t\tposinset={ stablePosition }\n\t\t\t\t\t\t\t\t\t\t\tsetsize={\n\t\t\t\t\t\t\t\t\t\t\t\tpaginationInfo.totalItems\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tconfig={ {\n\t\t\t\t\t\t\t\t\t\t\t\tsizes: size,\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</Composite>\n\t\t\t\t)\n\t\t\t}\n\t\t\t{\n\t\t\t\t// Render standard grid layout (with rows, grid semantics)\n\t\t\t\t! isInfiniteScroll && (\n\t\t\t\t\t<Composite\n\t\t\t\t\t\trole=\"grid\"\n\t\t\t\t\t\tclassName={ clsx( 'dataviews-view-grid', className, {\n\t\t\t\t\t\t\t[ `has-${ view.layout?.density }-density` ]:\n\t\t\t\t\t\t\t\tview.layout?.density &&\n\t\t\t\t\t\t\t\t[ 'compact', 'comfortable' ].includes(\n\t\t\t\t\t\t\t\t\tview.layout.density\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t\tfocusWrap\n\t\t\t\t\t\taria-busy={ isLoading }\n\t\t\t\t\t\taria-rowcount={ totalRows }\n\t\t\t\t\t\tref={ resizeObserverRef }\n\t\t\t\t\t\t// @ts-ignore\n\t\t\t\t\t\tinert={ inert }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ chunk( data, gridColumns ).map( ( row, i ) => (\n\t\t\t\t\t\t\t<Composite.Row\n\t\t\t\t\t\t\t\tkey={ i }\n\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\trole=\"row\"\n\t\t\t\t\t\t\t\t\t\taria-rowindex={ i + 1 }\n\t\t\t\t\t\t\t\t\t\taria-label={ sprintf(\n\t\t\t\t\t\t\t\t\t\t\t/* translators: %d: The row number in the grid */\n\t\t\t\t\t\t\t\t\t\t\t__( 'Row %d' ),\n\t\t\t\t\t\t\t\t\t\t\ti + 1\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\tclassName=\"dataviews-view-grid__row\"\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\tgridTemplateColumns: `repeat( ${ gridColumns }, minmax(0, 1fr) )`,\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\t\t{ row.map( ( item ) => {\n\t\t\t\t\t\t\t\t\tconst itemId = getItemId( item );\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\t\t\t\t\t\tkey={ itemId }\n\t\t\t\t\t\t\t\t\t\t\trender={ ( props ) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<GridItem\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t\t\t\t\t\t\t\t\tid={ itemId }\n\t\t\t\t\t\t\t\t\t\t\t\t\trole=\"gridcell\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\t\t\t\t\t\t\tselection={ selection }\n\t\t\t\t\t\t\t\t\t\t\t\t\tonChangeSelection={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tonChangeSelection\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClickItem={ onClickItem }\n\t\t\t\t\t\t\t\t\t\t\t\t\tisItemClickable={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tisItemClickable\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\trenderItemLink={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\trenderItemLink\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\t\t\t\t\t\t\t\t\titem={ item }\n\t\t\t\t\t\t\t\t\t\t\t\t\tactions={ actions }\n\t\t\t\t\t\t\t\t\t\t\t\t\tmediaField={ mediaField }\n\t\t\t\t\t\t\t\t\t\t\t\t\ttitleField={ titleField }\n\t\t\t\t\t\t\t\t\t\t\t\t\tdescriptionField={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tdescriptionField\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tregularFields={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tregularFields\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tbadgeFields={ badgeFields }\n\t\t\t\t\t\t\t\t\t\t\t\t\thasBulkActions={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\thasBulkActions\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\tconfig={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsizes: size,\n\t\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\t/>\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</Composite.Row>\n\t\t\t\t\t\t) ) }\n\t\t\t\t\t</Composite>\n\t\t\t\t)\n\t\t\t}\n\t\t</>\n\t);\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["GridItem"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/dataviews-layouts/list/index.tsx"],
|
|
4
|
-
"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"],
|
|
4
|
+
"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"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -49,8 +49,8 @@ function ColumnPrimary({
|
|
|
49
49
|
className: "dataviews-view-table__cell-content-wrapper dataviews-title-field",
|
|
50
50
|
children: [
|
|
51
51
|
level !== void 0 && level > 0 && /* @__PURE__ */ jsxs("span", { className: "dataviews-view-table__level", children: [
|
|
52
|
-
Array(level).fill("
|
|
53
|
-
"
|
|
52
|
+
Array(level).fill("—").join(" "),
|
|
53
|
+
" "
|
|
54
54
|
] }),
|
|
55
55
|
/* @__PURE__ */ jsx(titleField.render, { item, field: titleField })
|
|
56
56
|
]
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/dataviews-layouts/table/column-primary.tsx"],
|
|
4
|
-
"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( '
|
|
5
|
-
"mappings": ";AAQA,SAAS,aAAa;AAMtB,SAAS,wBAAwB;AA0C5B,cAqBE,YArBF;AAxCL,SAAS,cAAuB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAaI;AACH,SACC,qBAAC,SAAM,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,qBAAC,UAAK,WAAU,+BACb;AAAA,wBAAO,KAAM,EAAE,KAAM,
|
|
4
|
+
"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( ' ' ) } \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"],
|
|
5
|
+
"mappings": ";AAQA,SAAS,aAAa;AAMtB,SAAS,wBAAwB;AA0C5B,cAqBE,YArBF;AAxCL,SAAS,cAAuB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAaI;AACH,SACC,qBAAC,SAAM,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,qBAAC,UAAK,WAAU,+BACb;AAAA,wBAAO,KAAM,EAAE,KAAM,GAAI,EAAE,KAAM,GAAI;AAAA,kBAAG;AAAA,mBAC3C;AAAA,gBAED,oBAAC,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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/dataviews-pagination/index.tsx"],
|
|
4
|
-
"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
|
|
4
|
+
"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"],
|
|
5
5
|
"mappings": ";AAGA,SAAS,QAAQ,qBAAqB;AACtC,SAAS,0BAA0B,MAAM,kBAAkB;AAC3D,SAAS,SAAS,IAAI,IAAI,aAAa;AACvC,SAAS,MAAM,gBAAgB;AAC/B,SAAS,aAAa;AAKtB,OAAO,sBAAsB;AA6DjB,cAoBR,YApBQ;AA3DL,SAAS,sBAAsB;AACrC,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA,gBAAgB,EAAE,aAAa,GAAG,WAAW;AAAA,EAC9C,IAAI,WAAY,gBAAiB;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,OACb;AAAA;AAAA,UAEA,GAAI,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,cACD;AAAA;AAAA,gBAEC;AAAA,kBACC;AAAA,kBACA;AAAA,gBACD;AAAA,gBACA;AAAA,gBACA;AAAA,cACD;AAAA,cACA;AAAA,gBACC,KAAK,oBAAC,SAAI,eAAW,MAAC;AAAA;AAAA,gBAEtB,aACC;AAAA,kBAAC;AAAA;AAAA,oBACA,cAAa,GAAI,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,qBAAC,SAAM,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,OAAQ,GAAI,eAAgB;AAAA,cAC5B,MAAO,MAAM,IAAI,OAAO;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,OAAQ,GAAI,WAAY;AAAA,cACxB,MAAO,MAAM,IAAI,WAAW;AAAA,cAC5B,aAAW;AAAA,cACX,MAAK;AAAA,cACL,iBAAgB;AAAA;AAAA,UACjB;AAAA,WACD;AAAA;AAAA;AAAA,EACD;AAGH;AAEA,IAAO,+BAAQ,KAAM,mBAAoB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -11,7 +11,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
11
11
|
var EMPTY_ARRAY = [];
|
|
12
12
|
function useIsMultiselectPicker(actions) {
|
|
13
13
|
return useMemo(() => {
|
|
14
|
-
return actions?.every((action) => action.supportsBulk);
|
|
14
|
+
return !!actions?.length && actions?.every((action) => action.supportsBulk);
|
|
15
15
|
}, [actions]);
|
|
16
16
|
}
|
|
17
17
|
function BulkSelectionCheckbox({
|
|
@@ -104,7 +104,7 @@ function ActionButtons({
|
|
|
104
104
|
);
|
|
105
105
|
}) });
|
|
106
106
|
}
|
|
107
|
-
function
|
|
107
|
+
function PickerBulkSelectionInfo() {
|
|
108
108
|
const {
|
|
109
109
|
data,
|
|
110
110
|
selection,
|
|
@@ -115,16 +115,82 @@ function DataViewsPickerFooter() {
|
|
|
115
115
|
view
|
|
116
116
|
} = useContext(DataViewsContext);
|
|
117
117
|
const isMultiselect = useIsMultiselectPicker(actions);
|
|
118
|
+
const selectedItems = useMemo(
|
|
119
|
+
() => data.filter((item) => selection.includes(getItemId(item))),
|
|
120
|
+
[selection, getItemId, data]
|
|
121
|
+
);
|
|
122
|
+
if (!actions.length) {
|
|
123
|
+
return null;
|
|
124
|
+
}
|
|
118
125
|
const message = getFooterMessage(
|
|
119
126
|
selection.length,
|
|
120
127
|
data.length,
|
|
121
128
|
paginationInfo.totalItems,
|
|
122
129
|
!!view.infiniteScrollEnabled
|
|
123
130
|
);
|
|
131
|
+
return /* @__PURE__ */ jsxs(
|
|
132
|
+
Stack,
|
|
133
|
+
{
|
|
134
|
+
direction: "row",
|
|
135
|
+
className: "dataviews-picker-footer__bulk-selection",
|
|
136
|
+
gap: "md",
|
|
137
|
+
align: "center",
|
|
138
|
+
children: [
|
|
139
|
+
isMultiselect && /* @__PURE__ */ jsx(
|
|
140
|
+
BulkSelectionCheckbox,
|
|
141
|
+
{
|
|
142
|
+
selection,
|
|
143
|
+
selectedItems,
|
|
144
|
+
onChangeSelection,
|
|
145
|
+
data,
|
|
146
|
+
getItemId,
|
|
147
|
+
disableSelectAll: !!view.infiniteScrollEnabled
|
|
148
|
+
}
|
|
149
|
+
),
|
|
150
|
+
/* @__PURE__ */ jsx("span", { className: "dataviews-bulk-actions-footer__item-count", children: message })
|
|
151
|
+
]
|
|
152
|
+
}
|
|
153
|
+
);
|
|
154
|
+
}
|
|
155
|
+
function PickerActions() {
|
|
156
|
+
const {
|
|
157
|
+
data,
|
|
158
|
+
selection,
|
|
159
|
+
getItemId,
|
|
160
|
+
actions = EMPTY_ARRAY
|
|
161
|
+
} = useContext(DataViewsContext);
|
|
124
162
|
const selectedItems = useMemo(
|
|
125
163
|
() => data.filter((item) => selection.includes(getItemId(item))),
|
|
126
164
|
[selection, getItemId, data]
|
|
127
165
|
);
|
|
166
|
+
if (!actions.length) {
|
|
167
|
+
return null;
|
|
168
|
+
}
|
|
169
|
+
return /* @__PURE__ */ jsx("div", { className: "dataviews-picker-footer__actions", children: /* @__PURE__ */ jsx(
|
|
170
|
+
ActionButtons,
|
|
171
|
+
{
|
|
172
|
+
actions,
|
|
173
|
+
items: selectedItems,
|
|
174
|
+
selection
|
|
175
|
+
}
|
|
176
|
+
) });
|
|
177
|
+
}
|
|
178
|
+
function DataViewsPickerBulkActionToolbar() {
|
|
179
|
+
return /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: "md", align: "center", children: [
|
|
180
|
+
/* @__PURE__ */ jsx(PickerBulkSelectionInfo, {}),
|
|
181
|
+
/* @__PURE__ */ jsx(PickerActions, {})
|
|
182
|
+
] });
|
|
183
|
+
}
|
|
184
|
+
function DataViewsPickerFooter() {
|
|
185
|
+
const {
|
|
186
|
+
actions = EMPTY_ARRAY,
|
|
187
|
+
paginationInfo,
|
|
188
|
+
view
|
|
189
|
+
} = useContext(DataViewsContext);
|
|
190
|
+
const hasPagination = !view.infiniteScrollEnabled && !!paginationInfo.totalItems && paginationInfo.totalPages > 1;
|
|
191
|
+
if (!actions.length && !hasPagination) {
|
|
192
|
+
return null;
|
|
193
|
+
}
|
|
128
194
|
return /* @__PURE__ */ jsxs(
|
|
129
195
|
Stack,
|
|
130
196
|
{
|
|
@@ -134,43 +200,15 @@ function DataViewsPickerFooter() {
|
|
|
134
200
|
className: "dataviews-footer",
|
|
135
201
|
gap: "sm",
|
|
136
202
|
children: [
|
|
137
|
-
/* @__PURE__ */
|
|
138
|
-
Stack,
|
|
139
|
-
{
|
|
140
|
-
direction: "row",
|
|
141
|
-
className: "dataviews-picker-footer__bulk-selection",
|
|
142
|
-
gap: "md",
|
|
143
|
-
align: "center",
|
|
144
|
-
children: [
|
|
145
|
-
isMultiselect && /* @__PURE__ */ jsx(
|
|
146
|
-
BulkSelectionCheckbox,
|
|
147
|
-
{
|
|
148
|
-
selection,
|
|
149
|
-
selectedItems,
|
|
150
|
-
onChangeSelection,
|
|
151
|
-
data,
|
|
152
|
-
getItemId,
|
|
153
|
-
disableSelectAll: !!view.infiniteScrollEnabled
|
|
154
|
-
}
|
|
155
|
-
),
|
|
156
|
-
/* @__PURE__ */ jsx("span", { className: "dataviews-bulk-actions-footer__item-count", children: message })
|
|
157
|
-
]
|
|
158
|
-
}
|
|
159
|
-
),
|
|
203
|
+
/* @__PURE__ */ jsx(PickerBulkSelectionInfo, {}),
|
|
160
204
|
/* @__PURE__ */ jsx(DataViewsPagination, {}),
|
|
161
|
-
|
|
162
|
-
ActionButtons,
|
|
163
|
-
{
|
|
164
|
-
actions,
|
|
165
|
-
items: selectedItems,
|
|
166
|
-
selection
|
|
167
|
-
}
|
|
168
|
-
) })
|
|
205
|
+
/* @__PURE__ */ jsx(PickerActions, {})
|
|
169
206
|
]
|
|
170
207
|
}
|
|
171
208
|
);
|
|
172
209
|
}
|
|
173
210
|
export {
|
|
211
|
+
DataViewsPickerBulkActionToolbar,
|
|
174
212
|
DataViewsPickerFooter,
|
|
175
213
|
useIsMultiselectPicker
|
|
176
214
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/dataviews-picker-footer/index.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Button, CheckboxControl } from '@wordpress/components';\nimport { useRegistry } from '@wordpress/data';\nimport { useContext, useMemo, useState } from '@wordpress/element';\nimport { Stack } from '@wordpress/ui';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport DataViewsPagination from '../dataviews-pagination';\nimport DataViewsContext from '../dataviews-context';\nimport type { SetSelection } from '../../types/private';\nimport type { Action } from '../../types';\nimport getFooterMessage from '../../utils/get-footer-message';\n\nconst EMPTY_ARRAY: [] = [];\n\nexport function useIsMultiselectPicker< Item >(\n\tactions: Action< Item >[] | undefined\n) {\n\treturn useMemo( () => {\n\t\treturn actions?.every( ( action ) => action.supportsBulk );\n\t}, [ actions ] );\n}\n\nfunction BulkSelectionCheckbox< Item >( {\n\tselection,\n\tselectedItems,\n\tonChangeSelection,\n\tdata,\n\tgetItemId,\n\tdisableSelectAll = false,\n}: {\n\tselection: string[];\n\tselectedItems: Item[];\n\tonChangeSelection: SetSelection;\n\tdata: Item[];\n\tgetItemId: ( item: Item ) => string;\n\tdisableSelectAll?: boolean;\n} ) {\n\tconst hasSelection = selection.length > 0;\n\tconst areAllSelected = selectedItems.length === data.length;\n\n\tif ( disableSelectAll ) {\n\t\treturn (\n\t\t\t<CheckboxControl\n\t\t\t\tclassName=\"dataviews-view-table-selection-checkbox\"\n\t\t\t\tchecked={ hasSelection }\n\t\t\t\tdisabled={ ! hasSelection }\n\t\t\t\tonChange={ () => {\n\t\t\t\t\tonChangeSelection( [] );\n\t\t\t\t} }\n\t\t\t\taria-label={ __( 'Deselect all' ) }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<CheckboxControl\n\t\t\tclassName=\"dataviews-view-table-selection-checkbox\"\n\t\t\tchecked={ areAllSelected }\n\t\t\tindeterminate={ ! areAllSelected && !! selectedItems.length }\n\t\t\tonChange={ () => {\n\t\t\t\tif ( areAllSelected ) {\n\t\t\t\t\t// Deselect all - remove the current page from the total selection.\n\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\tselection.filter(\n\t\t\t\t\t\t\t( id ) =>\n\t\t\t\t\t\t\t\t! data.some(\n\t\t\t\t\t\t\t\t\t( item ) => id === getItemId( item )\n\t\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} else {\n\t\t\t\t\t// Select all - merge the current page into the total selection.\n\t\t\t\t\tconst selectionSet = new Set( [\n\t\t\t\t\t\t...selection,\n\t\t\t\t\t\t...data.map( ( item ) => getItemId( item ) ),\n\t\t\t\t\t] );\n\t\t\t\t\tonChangeSelection( Array.from( selectionSet ) );\n\t\t\t\t}\n\t\t\t} }\n\t\t\taria-label={\n\t\t\t\tareAllSelected ? __( 'Deselect all' ) : __( 'Select all' )\n\t\t\t}\n\t\t/>\n\t);\n}\n\nfunction ActionButtons< Item >( {\n\tactions,\n\titems,\n\tselection,\n}: {\n\tactions: Action< Item >[];\n\titems: Item[];\n\tselection: string[];\n} ) {\n\tconst registry = useRegistry();\n\tconst [ actionInProgress, setActionInProgress ] = useState< string | null >(\n\t\tnull\n\t);\n\n\treturn (\n\t\t<Stack direction=\"row\" gap=\"xs\">\n\t\t\t{ actions.map( ( action ) => {\n\t\t\t\t// Only support actions with callbacks for DataViewsPicker.\n\t\t\t\t// This is because many use cases of the picker will be already within modals.\n\t\t\t\tif ( ! ( 'callback' in action ) ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\tconst { id, label, icon, isPrimary, callback } = action;\n\n\t\t\t\tconst _label =\n\t\t\t\t\ttypeof label === 'string' ? label : label( items );\n\t\t\t\tconst variant = isPrimary ? 'primary' : 'tertiary';\n\t\t\t\tconst isInProgress = id === actionInProgress;\n\n\t\t\t\treturn (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\tdisabled={ isInProgress || ! selection?.length }\n\t\t\t\t\t\tisBusy={ isInProgress }\n\t\t\t\t\t\tonClick={ async () => {\n\t\t\t\t\t\t\tsetActionInProgress( id );\n\t\t\t\t\t\t\tawait callback( items, {\n\t\t\t\t\t\t\t\tregistry,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\tsetActionInProgress( null );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tvariant={ variant }\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</Stack>\n\t);\n}\n\
|
|
5
|
-
"mappings": ";AAGA,SAAS,QAAQ,uBAAuB;AACxC,SAAS,mBAAmB;AAC5B,SAAS,YAAY,SAAS,gBAAgB;AAC9C,SAAS,aAAa;AACtB,SAAS,UAAU;AAKnB,OAAO,yBAAyB;AAChC,OAAO,sBAAsB;AAG7B,OAAO,sBAAsB;
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Button, CheckboxControl } from '@wordpress/components';\nimport { useRegistry } from '@wordpress/data';\nimport { useContext, useMemo, useState } from '@wordpress/element';\nimport { Stack } from '@wordpress/ui';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport DataViewsPagination from '../dataviews-pagination';\nimport DataViewsContext from '../dataviews-context';\nimport type { SetSelection } from '../../types/private';\nimport type { Action } from '../../types';\nimport getFooterMessage from '../../utils/get-footer-message';\n\nconst EMPTY_ARRAY: [] = [];\n\nexport function useIsMultiselectPicker< Item >(\n\tactions: Action< Item >[] | undefined\n) {\n\treturn useMemo( () => {\n\t\treturn (\n\t\t\t!! actions?.length &&\n\t\t\tactions?.every( ( action ) => action.supportsBulk )\n\t\t);\n\t}, [ actions ] );\n}\n\nfunction BulkSelectionCheckbox< Item >( {\n\tselection,\n\tselectedItems,\n\tonChangeSelection,\n\tdata,\n\tgetItemId,\n\tdisableSelectAll = false,\n}: {\n\tselection: string[];\n\tselectedItems: Item[];\n\tonChangeSelection: SetSelection;\n\tdata: Item[];\n\tgetItemId: ( item: Item ) => string;\n\tdisableSelectAll?: boolean;\n} ) {\n\tconst hasSelection = selection.length > 0;\n\tconst areAllSelected = selectedItems.length === data.length;\n\n\tif ( disableSelectAll ) {\n\t\treturn (\n\t\t\t<CheckboxControl\n\t\t\t\tclassName=\"dataviews-view-table-selection-checkbox\"\n\t\t\t\tchecked={ hasSelection }\n\t\t\t\tdisabled={ ! hasSelection }\n\t\t\t\tonChange={ () => {\n\t\t\t\t\tonChangeSelection( [] );\n\t\t\t\t} }\n\t\t\t\taria-label={ __( 'Deselect all' ) }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<CheckboxControl\n\t\t\tclassName=\"dataviews-view-table-selection-checkbox\"\n\t\t\tchecked={ areAllSelected }\n\t\t\tindeterminate={ ! areAllSelected && !! selectedItems.length }\n\t\t\tonChange={ () => {\n\t\t\t\tif ( areAllSelected ) {\n\t\t\t\t\t// Deselect all - remove the current page from the total selection.\n\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\tselection.filter(\n\t\t\t\t\t\t\t( id ) =>\n\t\t\t\t\t\t\t\t! data.some(\n\t\t\t\t\t\t\t\t\t( item ) => id === getItemId( item )\n\t\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} else {\n\t\t\t\t\t// Select all - merge the current page into the total selection.\n\t\t\t\t\tconst selectionSet = new Set( [\n\t\t\t\t\t\t...selection,\n\t\t\t\t\t\t...data.map( ( item ) => getItemId( item ) ),\n\t\t\t\t\t] );\n\t\t\t\t\tonChangeSelection( Array.from( selectionSet ) );\n\t\t\t\t}\n\t\t\t} }\n\t\t\taria-label={\n\t\t\t\tareAllSelected ? __( 'Deselect all' ) : __( 'Select all' )\n\t\t\t}\n\t\t/>\n\t);\n}\n\nfunction ActionButtons< Item >( {\n\tactions,\n\titems,\n\tselection,\n}: {\n\tactions: Action< Item >[];\n\titems: Item[];\n\tselection: string[];\n} ) {\n\tconst registry = useRegistry();\n\tconst [ actionInProgress, setActionInProgress ] = useState< string | null >(\n\t\tnull\n\t);\n\n\treturn (\n\t\t<Stack direction=\"row\" gap=\"xs\">\n\t\t\t{ actions.map( ( action ) => {\n\t\t\t\t// Only support actions with callbacks for DataViewsPicker.\n\t\t\t\t// This is because many use cases of the picker will be already within modals.\n\t\t\t\tif ( ! ( 'callback' in action ) ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\tconst { id, label, icon, isPrimary, callback } = action;\n\n\t\t\t\tconst _label =\n\t\t\t\t\ttypeof label === 'string' ? label : label( items );\n\t\t\t\tconst variant = isPrimary ? 'primary' : 'tertiary';\n\t\t\t\tconst isInProgress = id === actionInProgress;\n\n\t\t\t\treturn (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\tdisabled={ isInProgress || ! selection?.length }\n\t\t\t\t\t\tisBusy={ isInProgress }\n\t\t\t\t\t\tonClick={ async () => {\n\t\t\t\t\t\t\tsetActionInProgress( id );\n\t\t\t\t\t\t\tawait callback( items, {\n\t\t\t\t\t\t\t\tregistry,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t\tsetActionInProgress( null );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tvariant={ variant }\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</Stack>\n\t);\n}\n\nfunction PickerBulkSelectionInfo() {\n\tconst {\n\t\tdata,\n\t\tselection,\n\t\tonChangeSelection,\n\t\tgetItemId,\n\t\tactions = EMPTY_ARRAY,\n\t\tpaginationInfo,\n\t\tview,\n\t} = useContext( DataViewsContext );\n\n\tconst isMultiselect = useIsMultiselectPicker( actions );\n\n\tconst selectedItems = useMemo(\n\t\t() =>\n\t\t\tdata.filter( ( item ) => selection.includes( getItemId( item ) ) ),\n\t\t[ selection, getItemId, data ]\n\t);\n\n\t// The count and the selection checkbox belong with the actions, mirroring `DataViews`.\n\tif ( ! actions.length ) {\n\t\treturn null;\n\t}\n\n\tconst message = getFooterMessage(\n\t\tselection.length,\n\t\tdata.length,\n\t\tpaginationInfo.totalItems,\n\t\t!! view.infiniteScrollEnabled\n\t);\n\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"row\"\n\t\t\tclassName=\"dataviews-picker-footer__bulk-selection\"\n\t\t\tgap=\"md\"\n\t\t\talign=\"center\"\n\t\t>\n\t\t\t{ isMultiselect && (\n\t\t\t\t<BulkSelectionCheckbox\n\t\t\t\t\tselection={ selection }\n\t\t\t\t\tselectedItems={ selectedItems }\n\t\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\t\tdata={ data }\n\t\t\t\t\tgetItemId={ getItemId }\n\t\t\t\t\tdisableSelectAll={ !! view.infiniteScrollEnabled }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t<span className=\"dataviews-bulk-actions-footer__item-count\">\n\t\t\t\t{ message }\n\t\t\t</span>\n\t\t</Stack>\n\t);\n}\n\nfunction PickerActions() {\n\tconst {\n\t\tdata,\n\t\tselection,\n\t\tgetItemId,\n\t\tactions = EMPTY_ARRAY,\n\t} = useContext( DataViewsContext );\n\n\tconst selectedItems = useMemo(\n\t\t() =>\n\t\t\tdata.filter( ( item ) => selection.includes( getItemId( item ) ) ),\n\t\t[ selection, getItemId, data ]\n\t);\n\n\tif ( ! actions.length ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div className=\"dataviews-picker-footer__actions\">\n\t\t\t<ActionButtons\n\t\t\t\tactions={ actions }\n\t\t\t\titems={ selectedItems }\n\t\t\t\tselection={ selection }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\n// The bulk-selection info and action buttons without pagination — the picker\n// counterpart to `DataViews.BulkActionToolbar`, for free composition.\nexport function DataViewsPickerBulkActionToolbar() {\n\treturn (\n\t\t<Stack direction=\"row\" gap=\"md\" align=\"center\">\n\t\t\t<PickerBulkSelectionInfo />\n\t\t\t<PickerActions />\n\t\t</Stack>\n\t);\n}\n\n// The full picker footer: bulk-selection info, pagination, and actions — the\n// picker counterpart to `DataViews.Footer`.\nexport function DataViewsPickerFooter() {\n\tconst {\n\t\tactions = EMPTY_ARRAY,\n\t\tpaginationInfo,\n\t\tview,\n\t} = useContext( DataViewsContext );\n\n\tconst hasPagination =\n\t\t! view.infiniteScrollEnabled &&\n\t\t!! paginationInfo.totalItems &&\n\t\tpaginationInfo.totalPages > 1;\n\n\tif ( ! actions.length && ! hasPagination ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"row\"\n\t\t\tjustify=\"space-between\"\n\t\t\talign=\"center\"\n\t\t\tclassName=\"dataviews-footer\"\n\t\t\tgap=\"sm\"\n\t\t>\n\t\t\t<PickerBulkSelectionInfo />\n\t\t\t<DataViewsPagination />\n\t\t\t<PickerActions />\n\t\t</Stack>\n\t);\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -24,7 +24,7 @@ var OPERATOR_STARTS_WITH = "startsWith";
|
|
|
24
24
|
var OPERATOR_ON = "on";
|
|
25
25
|
var OPERATOR_NOT_ON = "notOn";
|
|
26
26
|
var SORTING_DIRECTIONS = ["asc", "desc"];
|
|
27
|
-
var sortArrows = { asc: "
|
|
27
|
+
var sortArrows = { asc: "↑", desc: "↓" };
|
|
28
28
|
var sortValues = { asc: "ascending", desc: "descending" };
|
|
29
29
|
var sortLabels = {
|
|
30
30
|
asc: __("Sort ascending"),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/constants.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { arrowDown, arrowUp } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { DayNumber } from './types';\n\n// Filter operators.\nexport const OPERATOR_IS_ANY = 'isAny';\nexport const OPERATOR_IS_NONE = 'isNone';\nexport const OPERATOR_IS_ALL = 'isAll';\nexport const OPERATOR_IS_NOT_ALL = 'isNotAll';\nexport const OPERATOR_BETWEEN = 'between';\nexport const OPERATOR_IN_THE_PAST = 'inThePast';\nexport const OPERATOR_OVER = 'over';\nexport const OPERATOR_IS = 'is';\nexport const OPERATOR_IS_NOT = 'isNot';\nexport const OPERATOR_LESS_THAN = 'lessThan';\nexport const OPERATOR_GREATER_THAN = 'greaterThan';\nexport const OPERATOR_LESS_THAN_OR_EQUAL = 'lessThanOrEqual';\nexport const OPERATOR_GREATER_THAN_OR_EQUAL = 'greaterThanOrEqual';\nexport const OPERATOR_BEFORE = 'before';\nexport const OPERATOR_AFTER = 'after';\nexport const OPERATOR_BEFORE_INC = 'beforeInc';\nexport const OPERATOR_AFTER_INC = 'afterInc';\nexport const OPERATOR_CONTAINS = 'contains';\nexport const OPERATOR_NOT_CONTAINS = 'notContains';\nexport const OPERATOR_STARTS_WITH = 'startsWith';\nexport const OPERATOR_ON = 'on';\nexport const OPERATOR_NOT_ON = 'notOn';\n\nexport const SORTING_DIRECTIONS = [ 'asc', 'desc' ] as const;\nexport const sortArrows = { asc: '
|
|
5
|
-
"mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,WAAW,eAAe;AAQ5B,IAAM,kBAAkB;AACxB,IAAM,mBAAmB;AACzB,IAAM,kBAAkB;AACxB,IAAM,sBAAsB;AAC5B,IAAM,mBAAmB;AACzB,IAAM,uBAAuB;AAC7B,IAAM,gBAAgB;AACtB,IAAM,cAAc;AACpB,IAAM,kBAAkB;AACxB,IAAM,qBAAqB;AAC3B,IAAM,wBAAwB;AAC9B,IAAM,8BAA8B;AACpC,IAAM,iCAAiC;AACvC,IAAM,kBAAkB;AACxB,IAAM,iBAAiB;AACvB,IAAM,sBAAsB;AAC5B,IAAM,qBAAqB;AAC3B,IAAM,oBAAoB;AAC1B,IAAM,wBAAwB;AAC9B,IAAM,uBAAuB;AAC7B,IAAM,cAAc;AACpB,IAAM,kBAAkB;AAExB,IAAM,qBAAqB,CAAE,OAAO,MAAO;AAC3C,IAAM,aAAa,EAAE,KAAK,
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { arrowDown, arrowUp } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { DayNumber } from './types';\n\n// Filter operators.\nexport const OPERATOR_IS_ANY = 'isAny';\nexport const OPERATOR_IS_NONE = 'isNone';\nexport const OPERATOR_IS_ALL = 'isAll';\nexport const OPERATOR_IS_NOT_ALL = 'isNotAll';\nexport const OPERATOR_BETWEEN = 'between';\nexport const OPERATOR_IN_THE_PAST = 'inThePast';\nexport const OPERATOR_OVER = 'over';\nexport const OPERATOR_IS = 'is';\nexport const OPERATOR_IS_NOT = 'isNot';\nexport const OPERATOR_LESS_THAN = 'lessThan';\nexport const OPERATOR_GREATER_THAN = 'greaterThan';\nexport const OPERATOR_LESS_THAN_OR_EQUAL = 'lessThanOrEqual';\nexport const OPERATOR_GREATER_THAN_OR_EQUAL = 'greaterThanOrEqual';\nexport const OPERATOR_BEFORE = 'before';\nexport const OPERATOR_AFTER = 'after';\nexport const OPERATOR_BEFORE_INC = 'beforeInc';\nexport const OPERATOR_AFTER_INC = 'afterInc';\nexport const OPERATOR_CONTAINS = 'contains';\nexport const OPERATOR_NOT_CONTAINS = 'notContains';\nexport const OPERATOR_STARTS_WITH = 'startsWith';\nexport const OPERATOR_ON = 'on';\nexport const OPERATOR_NOT_ON = 'notOn';\n\nexport const SORTING_DIRECTIONS = [ 'asc', 'desc' ] as const;\nexport const sortArrows = { asc: '↑', desc: '↓' };\nexport const sortValues = { asc: 'ascending', desc: 'descending' } as const;\nexport const sortLabels = {\n\tasc: __( 'Sort ascending' ),\n\tdesc: __( 'Sort descending' ),\n};\nexport const sortIcons = {\n\tasc: arrowUp,\n\tdesc: arrowDown,\n};\n\n// View layouts.\nexport const LAYOUT_TABLE = 'table';\nexport const LAYOUT_GRID = 'grid';\nexport const LAYOUT_LIST = 'list';\nexport const LAYOUT_ACTIVITY = 'activity';\n\n// Picker view layouts.\nexport const LAYOUT_PICKER_GRID = 'pickerGrid';\nexport const LAYOUT_PICKER_TABLE = 'pickerTable';\nexport const LAYOUT_PICKER_ACTIVITY = 'pickerActivity';\n\nexport const DAYS_OF_WEEK: DayNumber[] = [ 0, 1, 2, 3, 4, 5, 6 ];\n"],
|
|
5
|
+
"mappings": ";AAGA,SAAS,UAAU;AACnB,SAAS,WAAW,eAAe;AAQ5B,IAAM,kBAAkB;AACxB,IAAM,mBAAmB;AACzB,IAAM,kBAAkB;AACxB,IAAM,sBAAsB;AAC5B,IAAM,mBAAmB;AACzB,IAAM,uBAAuB;AAC7B,IAAM,gBAAgB;AACtB,IAAM,cAAc;AACpB,IAAM,kBAAkB;AACxB,IAAM,qBAAqB;AAC3B,IAAM,wBAAwB;AAC9B,IAAM,8BAA8B;AACpC,IAAM,iCAAiC;AACvC,IAAM,kBAAkB;AACxB,IAAM,iBAAiB;AACvB,IAAM,sBAAsB;AAC5B,IAAM,qBAAqB;AAC3B,IAAM,oBAAoB;AAC1B,IAAM,wBAAwB;AAC9B,IAAM,uBAAuB;AAC7B,IAAM,cAAc;AACpB,IAAM,kBAAkB;AAExB,IAAM,qBAAqB,CAAE,OAAO,MAAO;AAC3C,IAAM,aAAa,EAAE,KAAK,KAAK,MAAM,IAAI;AACzC,IAAM,aAAa,EAAE,KAAK,aAAa,MAAM,aAAa;AAC1D,IAAM,aAAa;AAAA,EACzB,KAAK,GAAI,gBAAiB;AAAA,EAC1B,MAAM,GAAI,iBAAkB;AAC7B;AACO,IAAM,YAAY;AAAA,EACxB,KAAK;AAAA,EACL,MAAM;AACP;AAGO,IAAM,eAAe;AACrB,IAAM,cAAc;AACpB,IAAM,cAAc;AACpB,IAAM,kBAAkB;AAGxB,IAAM,qBAAqB;AAC3B,IAAM,sBAAsB;AAC5B,IAAM,yBAAyB;AAE/B,IAAM,eAA4B,CAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAE;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|