@wordpress/dataviews 10.1.2 → 10.1.3
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 +4 -0
- package/build/dataviews-layouts/list/index.js +1 -3
- package/build/dataviews-layouts/list/index.js.map +2 -2
- package/build-module/dataviews-layouts/list/index.js +1 -3
- package/build-module/dataviews-layouts/list/index.js.map +2 -2
- package/build-types/dataviews-layouts/list/index.d.ts.map +1 -1
- package/build-wp/index.js +1 -3
- package/package.json +3 -3
- package/src/dataviews-layouts/list/index.tsx +0 -2
- package/tsconfig.tsbuildinfo +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
## Unreleased
|
|
4
4
|
|
|
5
|
+
### Enhancements
|
|
6
|
+
|
|
7
|
+
- DatViews list layout: remove link variant from primary actions's button. [#72920](https://github.com/WordPress/gutenberg/pull/72920)
|
|
8
|
+
|
|
5
9
|
### Bug fixes
|
|
6
10
|
|
|
7
11
|
- Fix: DataViews modal actions in list layout. [#72793](https://github.com/WordPress/gutenberg/pull/72793)
|
|
@@ -76,8 +76,7 @@ function PrimaryActionGridCell({
|
|
|
76
76
|
accessibleWhenDisabled: true,
|
|
77
77
|
text: label,
|
|
78
78
|
size: "small",
|
|
79
|
-
onClick: () => setIsModalOpen(true)
|
|
80
|
-
variant: "link"
|
|
79
|
+
onClick: () => setIsModalOpen(true)
|
|
81
80
|
}
|
|
82
81
|
),
|
|
83
82
|
children: isModalOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -102,7 +101,6 @@ function PrimaryActionGridCell({
|
|
|
102
101
|
onClick: () => {
|
|
103
102
|
primaryAction.callback([item], { registry });
|
|
104
103
|
},
|
|
105
|
-
variant: "link",
|
|
106
104
|
children: label
|
|
107
105
|
}
|
|
108
106
|
)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/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\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tButton,\n\tprivateApis as componentsPrivateApis,\n\tSpinner,\n\tVisuallyHidden,\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';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport {\n\tActionsMenuGroup,\n\tActionModal,\n} from '../../components/dataviews-item-actions';\nimport DataViewsContext from '../../components/dataviews-context';\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\tvariant=\"link\"\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\tvariant=\"link\"\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 usedActions = eligibleActions?.length > 0 && (\n\t\t<HStack spacing={ 3 } className=\"dataviews-view-list__item-actions\">\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</HStack>\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<HStack className=\"dataviews-view-list__item-wrapper\" spacing={ 0 }>\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<HStack spacing={ 3 } justify=\"start\" alignment=\"flex-start\">\n\t\t\t\t\t{ renderedMediaField }\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tspacing={ 1 }\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<HStack spacing={ 0 }>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"dataviews-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</HStack>\n\t\t\t\t\t\t{ showDescription && descriptionField?.render && (\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\tas=\"span\"\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>\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</VStack>\n\t\t\t\t</HStack>\n\t\t\t</HStack>\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\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\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\tdocument.getElementById( targetCompositeItemId )?.focus();\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\tif ( ! hasData ) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={ clsx( {\n\t\t\t\t\t'dataviews-loading': isLoading,\n\t\t\t\t\t'dataviews-no-results': ! hasData && ! isLoading,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ ! hasData &&\n\t\t\t\t\t( isLoading ? (\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t\t</p>\n\t\t\t\t\t) : (\n\t\t\t\t\t\tempty\n\t\t\t\t\t) ) }\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst groupField = view.groupByField\n\t\t? fields.find( ( field ) => field.id === view.groupByField )\n\t\t: null;\n\tconst dataByGroup = groupField ? getDataByGroup( data, groupField ) : null;\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\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<VStack\n\t\t\t\t\tspacing={ 4 }\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<VStack key={ groupName } spacing={ 2 }>\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{ sprintf(\n\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__( '%1$s: %2$s' ),\n\t\t\t\t\t\t\t\t\t\tgroupField.label,\n\t\t\t\t\t\t\t\t\t\tgroupName\n\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</VStack>\n\t\t\t\t\t\t)\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\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\tid={ baseId }\n\t\t\t\trender={ <div /> }\n\t\t\t\tclassName={ clsx( 'dataviews-view-list', className ) }\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>\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{ hasData && 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
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyGK;AAtGL,kBAAiB;AAKjB,qBAA2C;AAC3C,wBAQO;AACP,qBAOO;AACP,kBAA4B;AAC5B,mBAA6B;AAC7B,kBAA4B;AAK5B,yBAAuB;AACvB,oCAGO;AACP,+BAA6B;AAQ7B,+BAA2B;AAiB3B,MAAM,EAAE,KAAK,QAAI,2BAAQ,kBAAAA,WAAsB;AAE/C,SAAS,+BAAgC,UAAmB;AAC3D,SAAO,GAAI,QAAS;AACrB;AACA,SAAS,iCACR,UACA,iBACC;AACD,SAAO,GAAI,QAAS,mBAAoB,eAAgB;AACzD;AACA,SAAS,mCAAoC,UAAmB;AAC/D,SAAO,GAAI,QAAS;AACrB;AAEA,SAAS,sBAA+B;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AACD,GAII;AACH,QAAM,eAAW,yBAAY;AAC7B,QAAM,CAAE,aAAa,cAAe,QAAI,yBAAU,KAAM;AAExD,QAAM,kBAAkB;AAAA,IACvB;AAAA,IACA,cAAc;AAAA,EACf;AAEA,QAAM,QACL,OAAO,cAAc,UAAU,WAC5B,cAAc,QACd,cAAc,MAAO,CAAE,IAAK,CAAE;AAElC,SAAO,iBAAiB,gBACvB,4CAAC,SAAI,MAAK,YACT;AAAA,IAAC,4BAAU;AAAA,IAAV;AAAA,MACA,IAAK;AAAA,MACL,QACC;AAAA,QAAC;AAAA;AAAA,UACA,UAAW,CAAC,CAAE,cAAc;AAAA,UAC5B,wBAAsB;AAAA,UACtB,MAAO;AAAA,UACP,MAAK;AAAA,UACL,SAAU,MAAM,eAAgB,IAAK;AAAA
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId, usePrevious } from '@wordpress/compose';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tButton,\n\tprivateApis as componentsPrivateApis,\n\tSpinner,\n\tVisuallyHidden,\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';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport {\n\tActionsMenuGroup,\n\tActionModal,\n} from '../../components/dataviews-item-actions';\nimport DataViewsContext from '../../components/dataviews-context';\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 usedActions = eligibleActions?.length > 0 && (\n\t\t<HStack spacing={ 3 } className=\"dataviews-view-list__item-actions\">\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</HStack>\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<HStack className=\"dataviews-view-list__item-wrapper\" spacing={ 0 }>\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<HStack spacing={ 3 } justify=\"start\" alignment=\"flex-start\">\n\t\t\t\t\t{ renderedMediaField }\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tspacing={ 1 }\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<HStack spacing={ 0 }>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"dataviews-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</HStack>\n\t\t\t\t\t\t{ showDescription && descriptionField?.render && (\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\tas=\"span\"\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>\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</VStack>\n\t\t\t\t</HStack>\n\t\t\t</HStack>\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\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\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\tdocument.getElementById( targetCompositeItemId )?.focus();\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\tif ( ! hasData ) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={ clsx( {\n\t\t\t\t\t'dataviews-loading': isLoading,\n\t\t\t\t\t'dataviews-no-results': ! hasData && ! isLoading,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ ! hasData &&\n\t\t\t\t\t( isLoading ? (\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t\t</p>\n\t\t\t\t\t) : (\n\t\t\t\t\t\tempty\n\t\t\t\t\t) ) }\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst groupField = view.groupByField\n\t\t? fields.find( ( field ) => field.id === view.groupByField )\n\t\t: null;\n\tconst dataByGroup = groupField ? getDataByGroup( data, groupField ) : null;\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\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<VStack\n\t\t\t\t\tspacing={ 4 }\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<VStack key={ groupName } spacing={ 2 }>\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{ sprintf(\n\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__( '%1$s: %2$s' ),\n\t\t\t\t\t\t\t\t\t\tgroupField.label,\n\t\t\t\t\t\t\t\t\t\tgroupName\n\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</VStack>\n\t\t\t\t\t\t)\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\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\tid={ baseId }\n\t\t\t\trender={ <div /> }\n\t\t\t\tclassName={ clsx( 'dataviews-view-list', className ) }\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>\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{ hasData && 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
|
+
"mappings": "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",
|
|
6
6
|
"names": ["componentsPrivateApis", "DataViewsContext", "HStack", "clsx", "VStack", "getDataByGroup"]
|
|
7
7
|
}
|
|
@@ -61,8 +61,7 @@ function PrimaryActionGridCell({
|
|
|
61
61
|
accessibleWhenDisabled: true,
|
|
62
62
|
text: label,
|
|
63
63
|
size: "small",
|
|
64
|
-
onClick: () => setIsModalOpen(true)
|
|
65
|
-
variant: "link"
|
|
64
|
+
onClick: () => setIsModalOpen(true)
|
|
66
65
|
}
|
|
67
66
|
),
|
|
68
67
|
children: isModalOpen && /* @__PURE__ */ jsx(
|
|
@@ -87,7 +86,6 @@ function PrimaryActionGridCell({
|
|
|
87
86
|
onClick: () => {
|
|
88
87
|
primaryAction.callback([item], { registry });
|
|
89
88
|
},
|
|
90
|
-
variant: "link",
|
|
91
89
|
children: label
|
|
92
90
|
}
|
|
93
91
|
)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/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\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tButton,\n\tprivateApis as componentsPrivateApis,\n\tSpinner,\n\tVisuallyHidden,\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';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport {\n\tActionsMenuGroup,\n\tActionModal,\n} from '../../components/dataviews-item-actions';\nimport DataViewsContext from '../../components/dataviews-context';\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\tvariant=\"link\"\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\tvariant=\"link\"\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 usedActions = eligibleActions?.length > 0 && (\n\t\t<HStack spacing={ 3 } className=\"dataviews-view-list__item-actions\">\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</HStack>\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<HStack className=\"dataviews-view-list__item-wrapper\" spacing={ 0 }>\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<HStack spacing={ 3 } justify=\"start\" alignment=\"flex-start\">\n\t\t\t\t\t{ renderedMediaField }\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tspacing={ 1 }\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<HStack spacing={ 0 }>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"dataviews-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</HStack>\n\t\t\t\t\t\t{ showDescription && descriptionField?.render && (\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\tas=\"span\"\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>\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</VStack>\n\t\t\t\t</HStack>\n\t\t\t</HStack>\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\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\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\tdocument.getElementById( targetCompositeItemId )?.focus();\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\tif ( ! hasData ) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={ clsx( {\n\t\t\t\t\t'dataviews-loading': isLoading,\n\t\t\t\t\t'dataviews-no-results': ! hasData && ! isLoading,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ ! hasData &&\n\t\t\t\t\t( isLoading ? (\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t\t</p>\n\t\t\t\t\t) : (\n\t\t\t\t\t\tempty\n\t\t\t\t\t) ) }\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst groupField = view.groupByField\n\t\t? fields.find( ( field ) => field.id === view.groupByField )\n\t\t: null;\n\tconst dataByGroup = groupField ? getDataByGroup( data, groupField ) : null;\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\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<VStack\n\t\t\t\t\tspacing={ 4 }\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<VStack key={ groupName } spacing={ 2 }>\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{ sprintf(\n\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__( '%1$s: %2$s' ),\n\t\t\t\t\t\t\t\t\t\tgroupField.label,\n\t\t\t\t\t\t\t\t\t\tgroupName\n\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</VStack>\n\t\t\t\t\t\t)\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\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\tid={ baseId }\n\t\t\t\trender={ <div /> }\n\t\t\t\tclassName={ clsx( 'dataviews-view-list', className ) }\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>\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{ hasData && 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
|
-
"mappings": "AAyGK,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useInstanceId, usePrevious } from '@wordpress/compose';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tButton,\n\tprivateApis as componentsPrivateApis,\n\tSpinner,\n\tVisuallyHidden,\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';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport {\n\tActionsMenuGroup,\n\tActionModal,\n} from '../../components/dataviews-item-actions';\nimport DataViewsContext from '../../components/dataviews-context';\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 usedActions = eligibleActions?.length > 0 && (\n\t\t<HStack spacing={ 3 } className=\"dataviews-view-list__item-actions\">\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</HStack>\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<HStack className=\"dataviews-view-list__item-wrapper\" spacing={ 0 }>\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<HStack spacing={ 3 } justify=\"start\" alignment=\"flex-start\">\n\t\t\t\t\t{ renderedMediaField }\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tspacing={ 1 }\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<HStack spacing={ 0 }>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName=\"dataviews-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</HStack>\n\t\t\t\t\t\t{ showDescription && descriptionField?.render && (\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\tas=\"span\"\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>\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</VStack>\n\t\t\t\t</HStack>\n\t\t\t</HStack>\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\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\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\tdocument.getElementById( targetCompositeItemId )?.focus();\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\tif ( ! hasData ) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={ clsx( {\n\t\t\t\t\t'dataviews-loading': isLoading,\n\t\t\t\t\t'dataviews-no-results': ! hasData && ! isLoading,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ ! hasData &&\n\t\t\t\t\t( isLoading ? (\n\t\t\t\t\t\t<p>\n\t\t\t\t\t\t\t<Spinner />\n\t\t\t\t\t\t</p>\n\t\t\t\t\t) : (\n\t\t\t\t\t\tempty\n\t\t\t\t\t) ) }\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst groupField = view.groupByField\n\t\t? fields.find( ( field ) => field.id === view.groupByField )\n\t\t: null;\n\tconst dataByGroup = groupField ? getDataByGroup( data, groupField ) : null;\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\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<VStack\n\t\t\t\t\tspacing={ 4 }\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<VStack key={ groupName } spacing={ 2 }>\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{ sprintf(\n\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__( '%1$s: %2$s' ),\n\t\t\t\t\t\t\t\t\t\tgroupField.label,\n\t\t\t\t\t\t\t\t\t\tgroupName\n\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</VStack>\n\t\t\t\t\t\t)\n\t\t\t\t\t) }\n\t\t\t\t</VStack>\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\tid={ baseId }\n\t\t\t\trender={ <div /> }\n\t\t\t\tclassName={ clsx( 'dataviews-view-list', className ) }\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>\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{ hasData && 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
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/dataviews-layouts/list/index.tsx"],"names":[],"mappings":"AAuCA,OAAO,KAAK,EAIX,aAAa,EAEb,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/dataviews-layouts/list/index.tsx"],"names":[],"mappings":"AAuCA,OAAO,KAAK,EAIX,aAAa,EAEb,MAAM,aAAa,CAAC;AAkUrB,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAE,IAAI,EAAI,KAAK,EAAE,aAAa,CAAE,IAAI,CAAE,+BAyQrE"}
|
package/build-wp/index.js
CHANGED
|
@@ -14678,8 +14678,7 @@ function PrimaryActionGridCell({
|
|
|
14678
14678
|
accessibleWhenDisabled: true,
|
|
14679
14679
|
text: label,
|
|
14680
14680
|
size: "small",
|
|
14681
|
-
onClick: () => setIsModalOpen(true)
|
|
14682
|
-
variant: "link"
|
|
14681
|
+
onClick: () => setIsModalOpen(true)
|
|
14683
14682
|
}
|
|
14684
14683
|
),
|
|
14685
14684
|
children: isModalOpen && /* @__PURE__ */ jsx45(
|
|
@@ -14704,7 +14703,6 @@ function PrimaryActionGridCell({
|
|
|
14704
14703
|
onClick: () => {
|
|
14705
14704
|
primaryAction.callback([item2], { registry });
|
|
14706
14705
|
},
|
|
14707
|
-
variant: "link",
|
|
14708
14706
|
children: label
|
|
14709
14707
|
}
|
|
14710
14708
|
)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/dataviews",
|
|
3
|
-
"version": "10.1.
|
|
3
|
+
"version": "10.1.3",
|
|
4
4
|
"description": "DataViews is a component that provides an API to render datasets using different types of layouts (table, grid, list, etc.).",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"dependencies": {
|
|
46
46
|
"@ariakit/react": "^0.4.15",
|
|
47
47
|
"@wordpress/base-styles": "^6.9.1",
|
|
48
|
-
"@wordpress/components": "^30.6.
|
|
48
|
+
"@wordpress/components": "^30.6.2",
|
|
49
49
|
"@wordpress/compose": "^7.33.1",
|
|
50
50
|
"@wordpress/data": "^10.33.1",
|
|
51
51
|
"@wordpress/date": "^5.33.1",
|
|
@@ -74,5 +74,5 @@
|
|
|
74
74
|
"scripts": {
|
|
75
75
|
"build:wp": "node build"
|
|
76
76
|
},
|
|
77
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "2e2a11a11f0c5c9cb2bba2dd40b8046d2a10dc9d"
|
|
78
78
|
}
|
|
@@ -109,7 +109,6 @@ function PrimaryActionGridCell< Item >( {
|
|
|
109
109
|
text={ label }
|
|
110
110
|
size="small"
|
|
111
111
|
onClick={ () => setIsModalOpen( true ) }
|
|
112
|
-
variant="link"
|
|
113
112
|
/>
|
|
114
113
|
}
|
|
115
114
|
>
|
|
@@ -134,7 +133,6 @@ function PrimaryActionGridCell< Item >( {
|
|
|
134
133
|
onClick={ () => {
|
|
135
134
|
primaryAction.callback( [ item ], { registry } );
|
|
136
135
|
} }
|
|
137
|
-
variant="link"
|
|
138
136
|
>
|
|
139
137
|
{ label }
|
|
140
138
|
</Button>
|