@wordpress/dataviews 10.1.1 → 10.2.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 +5 -1
- package/README.md +1 -0
- package/build/components/dataviews-bulk-actions/index.js +19 -2
- package/build/components/dataviews-bulk-actions/index.js.map +2 -2
- package/build/dataform-controls/password.js +3 -4
- package/build/dataform-controls/password.js.map +3 -3
- package/build/dataform-layouts/card/index.js +28 -10
- package/build/dataform-layouts/card/index.js.map +3 -3
- package/build/dataform-layouts/normalize-form-fields.js +4 -2
- package/build/dataform-layouts/normalize-form-fields.js.map +2 -2
- package/build/types/dataform.js.map +1 -1
- package/build-module/components/dataviews-bulk-actions/index.js +19 -2
- package/build-module/components/dataviews-bulk-actions/index.js.map +2 -2
- package/build-module/dataform-controls/password.js +7 -5
- package/build-module/dataform-controls/password.js.map +2 -2
- package/build-module/dataform-layouts/card/index.js +34 -11
- package/build-module/dataform-layouts/card/index.js.map +2 -2
- package/build-module/dataform-layouts/normalize-form-fields.js +4 -2
- package/build-module/dataform-layouts/normalize-form-fields.js.map +2 -2
- package/build-style/style-rtl.css +12 -12
- package/build-style/style.css +12 -12
- package/build-types/components/dataviews-bulk-actions/index.d.ts.map +1 -1
- package/build-types/dataform-controls/password.d.ts.map +1 -1
- package/build-types/dataform-layouts/card/index.d.ts +3 -3
- package/build-types/dataform-layouts/card/index.d.ts.map +1 -1
- package/build-types/dataform-layouts/normalize-form-fields.d.ts.map +1 -1
- package/build-types/stories/dataform.story.d.ts +9 -1
- package/build-types/stories/dataform.story.d.ts.map +1 -1
- package/build-types/types/dataform.d.ts +4 -0
- package/build-types/types/dataform.d.ts.map +1 -1
- package/build-wp/index.js +140 -101
- package/package.json +15 -15
- package/src/components/dataviews/style.scss +1 -1
- package/src/components/dataviews-bulk-actions/index.tsx +20 -1
- package/src/components/dataviews-bulk-actions/style.scss +1 -1
- package/src/components/dataviews-filters/style.scss +1 -1
- package/src/components/dataviews-pagination/style.scss +2 -2
- package/src/dataform-controls/password.tsx +16 -12
- package/src/dataform-layouts/card/index.tsx +45 -13
- package/src/dataform-layouts/normalize-form-fields.ts +5 -0
- package/src/dataviews-layouts/table/style.scss +2 -2
- package/src/stories/dataform.story.tsx +19 -3
- package/src/test/normalize-form-fields.ts +7 -0
- package/src/types/dataform.ts +6 -0
- package/tsconfig.tsbuildinfo +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,17 +2,21 @@
|
|
|
2
2
|
|
|
3
3
|
## Unreleased
|
|
4
4
|
|
|
5
|
-
## 10.
|
|
5
|
+
## 10.2.0 (2025-10-29)
|
|
6
6
|
|
|
7
7
|
### Enhancements
|
|
8
8
|
|
|
9
|
+
- DataViews: keep icon-only buttons on mobile for bulk actions. [#72761](https://github.com/WordPress/gutenberg/pull/72761)
|
|
9
10
|
- DataForm: update spacing for regular and card layouts. [#72249](https://github.com/WordPress/gutenberg/pull/72249).
|
|
11
|
+
- DataForm: Fix password field suffix alignment. [#72524](https://github.com/WordPress/gutenberg/pull/72524).
|
|
10
12
|
|
|
11
13
|
## 10.1.0 (2025-10-21)
|
|
12
14
|
|
|
13
15
|
### Enhancements
|
|
14
16
|
|
|
17
|
+
- Consistently use font-weight 499 instead of 500 ([#72473](https://github.com/WordPress/gutenberg/pull/72473)).
|
|
15
18
|
- Dataviews: Use text based buttons for actions instead of text. [#72417](https://github.com/WordPress/gutenberg/pull/72417)
|
|
19
|
+
- DataForm: Add support for non collapsible cards. [#72540](https://github.com/WordPress/gutenberg/pull/72540)
|
|
16
20
|
|
|
17
21
|
## 10.0.0 (2025-10-17)
|
|
18
22
|
|
package/README.md
CHANGED
|
@@ -1610,6 +1610,7 @@ For example:
|
|
|
1610
1610
|
- A string (single field ID)
|
|
1611
1611
|
- An array of strings (multiple field IDs)
|
|
1612
1612
|
- An array of objects for per-field visibility control `[{ id: string, visibility: 'always' | 'when-collapsed' }]`
|
|
1613
|
+
- `isCollapsible`: boolean. Optional. `true` by default. Specifies whether the card can be collapsed.
|
|
1613
1614
|
|
|
1614
1615
|
Cards can be collapsed while visible, so you can control when summary fields appear:
|
|
1615
1616
|
|
|
@@ -40,6 +40,7 @@ var import_i18n = require("@wordpress/i18n");
|
|
|
40
40
|
var import_element = require("@wordpress/element");
|
|
41
41
|
var import_data = require("@wordpress/data");
|
|
42
42
|
var import_icons = require("@wordpress/icons");
|
|
43
|
+
var import_compose = require("@wordpress/compose");
|
|
43
44
|
var import_dataviews_context = __toESM(require("../dataviews-context"));
|
|
44
45
|
var import_dataviews_item_actions = require("../dataviews-item-actions");
|
|
45
46
|
function ActionWithModal({
|
|
@@ -128,6 +129,21 @@ function ActionTrigger({
|
|
|
128
129
|
items
|
|
129
130
|
}) {
|
|
130
131
|
const label = typeof action.label === "string" ? action.label : action.label(items);
|
|
132
|
+
const isMobile = (0, import_compose.useViewportMatch)("medium", "<");
|
|
133
|
+
if (isMobile) {
|
|
134
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
135
|
+
import_components.Button,
|
|
136
|
+
{
|
|
137
|
+
disabled: isBusy,
|
|
138
|
+
accessibleWhenDisabled: true,
|
|
139
|
+
label,
|
|
140
|
+
icon: action.icon,
|
|
141
|
+
size: "compact",
|
|
142
|
+
onClick,
|
|
143
|
+
isBusy
|
|
144
|
+
}
|
|
145
|
+
);
|
|
146
|
+
}
|
|
131
147
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
132
148
|
import_components.Button,
|
|
133
149
|
{
|
|
@@ -265,6 +281,7 @@ function FooterContent({
|
|
|
265
281
|
null
|
|
266
282
|
);
|
|
267
283
|
const footerContentRef = (0, import_element.useRef)(null);
|
|
284
|
+
const isMobile = (0, import_compose.useViewportMatch)("medium", "<");
|
|
268
285
|
const bulkActions = (0, import_element.useMemo)(
|
|
269
286
|
() => actions.filter((action) => action.supportsBulk),
|
|
270
287
|
[actions]
|
|
@@ -283,11 +300,11 @@ function FooterContent({
|
|
|
283
300
|
}, [selection, data, getItemId, selectableItems]);
|
|
284
301
|
const actionsToShow = (0, import_element.useMemo)(
|
|
285
302
|
() => actions.filter((action) => {
|
|
286
|
-
return action.supportsBulk && selectedItems.some(
|
|
303
|
+
return action.supportsBulk && (!isMobile || action.icon) && selectedItems.some(
|
|
287
304
|
(item) => !action.isEligible || action.isEligible(item)
|
|
288
305
|
);
|
|
289
306
|
}),
|
|
290
|
-
[actions, selectedItems]
|
|
307
|
+
[actions, selectedItems, isMobile]
|
|
291
308
|
);
|
|
292
309
|
if (!actionInProgress) {
|
|
293
310
|
if (footerContentRef.current) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/dataviews-bulk-actions/index.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport type { ReactElement } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tCheckboxControl,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport { useMemo, useState, useRef, useContext } from '@wordpress/element';\nimport { useRegistry } from '@wordpress/data';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\nimport { ActionModal } from '../dataviews-item-actions';\nimport type { Action, ActionModal as ActionModalType } from '../../types';\nimport type { SetSelection } from '../../types/private';\nimport type { ActionTriggerProps } from '../dataviews-item-actions';\n\ninterface ActionWithModalProps< Item > {\n\taction: ActionModalType< Item >;\n\titems: Item[];\n\tActionTriggerComponent: (\n\t\tprops: ActionTriggerProps< Item >\n\t) => ReactElement;\n}\n\nfunction ActionWithModal< Item >( {\n\taction,\n\titems,\n\tActionTriggerComponent,\n}: ActionWithModalProps< Item > ) {\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\tconst actionTriggerProps = {\n\t\taction,\n\t\tonClick: () => {\n\t\t\tsetIsModalOpen( true );\n\t\t},\n\t\titems,\n\t};\n\treturn (\n\t\t<>\n\t\t\t<ActionTriggerComponent { ...actionTriggerProps } />\n\t\t\t{ isModalOpen && (\n\t\t\t\t<ActionModal\n\t\t\t\t\taction={ action }\n\t\t\t\t\titems={ items }\n\t\t\t\t\tcloseModal={ () => setIsModalOpen( false ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport function useHasAPossibleBulkAction< Item >(\n\tactions: Action< Item >[],\n\titem: Item\n) {\n\treturn useMemo( () => {\n\t\treturn actions.some( ( action ) => {\n\t\t\treturn (\n\t\t\t\taction.supportsBulk &&\n\t\t\t\t( ! action.isEligible || action.isEligible( item ) )\n\t\t\t);\n\t\t} );\n\t}, [ actions, item ] );\n}\n\nexport function useSomeItemHasAPossibleBulkAction< Item >(\n\tactions: Action< Item >[],\n\tdata: Item[]\n) {\n\treturn useMemo( () => {\n\t\treturn data.some( ( item ) => {\n\t\t\treturn actions.some( ( action ) => {\n\t\t\t\treturn (\n\t\t\t\t\taction.supportsBulk &&\n\t\t\t\t\t( ! action.isEligible || action.isEligible( item ) )\n\t\t\t\t);\n\t\t\t} );\n\t\t} );\n\t}, [ actions, data ] );\n}\n\ninterface BulkSelectionCheckboxProps< Item > {\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tdata: Item[];\n\tactions: Action< Item >[];\n\tgetItemId: ( item: Item ) => string;\n}\n\nexport function BulkSelectionCheckbox< Item >( {\n\tselection,\n\tonChangeSelection,\n\tdata,\n\tactions,\n\tgetItemId,\n}: BulkSelectionCheckboxProps< Item > ) {\n\tconst selectableItems = useMemo( () => {\n\t\treturn data.filter( ( item ) => {\n\t\t\treturn actions.some(\n\t\t\t\t( action ) =>\n\t\t\t\t\taction.supportsBulk &&\n\t\t\t\t\t( ! action.isEligible || action.isEligible( item ) )\n\t\t\t);\n\t\t} );\n\t}, [ data, actions ] );\n\tconst selectedItems = data.filter(\n\t\t( item ) =>\n\t\t\tselection.includes( getItemId( item ) ) &&\n\t\t\tselectableItems.includes( item )\n\t);\n\tconst areAllSelected = selectedItems.length === selectableItems.length;\n\treturn (\n\t\t<CheckboxControl\n\t\t\tclassName=\"dataviews-view-table-selection-checkbox\"\n\t\t\t__nextHasNoMarginBottom\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\tonChangeSelection( [] );\n\t\t\t\t} else {\n\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\tselectableItems.map( ( item ) => getItemId( item ) )\n\t\t\t\t\t);\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\ninterface ActionButtonProps< Item > {\n\taction: Action< Item >;\n\tselectedItems: Item[];\n\tactionInProgress: string | null;\n\tsetActionInProgress: ( actionId: string | null ) => void;\n}\n\ninterface ToolbarContentProps< Item > {\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tdata: Item[];\n\tactions: Action< Item >[];\n\tgetItemId: ( item: Item ) => string;\n}\n\nfunction ActionTrigger< Item >( {\n\taction,\n\tonClick,\n\tisBusy,\n\titems,\n}: ActionTriggerProps< Item > ) {\n\tconst label =\n\t\ttypeof action.label === 'string' ? action.label : action.label( items );\n\treturn (\n\t\t<Button\n\t\t\tdisabled={ isBusy }\n\t\t\taccessibleWhenDisabled\n\t\t\tsize=\"compact\"\n\t\t\tonClick={ onClick }\n\t\t\tisBusy={ isBusy }\n\t\t>\n\t\t\t{ label }\n\t\t</Button>\n\t);\n}\n\nconst EMPTY_ARRAY: [] = [];\n\nfunction ActionButton< Item >( {\n\taction,\n\tselectedItems,\n\tactionInProgress,\n\tsetActionInProgress,\n}: ActionButtonProps< Item > ) {\n\tconst registry = useRegistry();\n\tconst selectedEligibleItems = useMemo( () => {\n\t\treturn selectedItems.filter( ( item ) => {\n\t\t\treturn ! action.isEligible || action.isEligible( item );\n\t\t} );\n\t}, [ action, selectedItems ] );\n\tif ( 'RenderModal' in action ) {\n\t\treturn (\n\t\t\t<ActionWithModal\n\t\t\t\tkey={ action.id }\n\t\t\t\taction={ action }\n\t\t\t\titems={ selectedEligibleItems }\n\t\t\t\tActionTriggerComponent={ ActionTrigger }\n\t\t\t/>\n\t\t);\n\t}\n\treturn (\n\t\t<ActionTrigger\n\t\t\tkey={ action.id }\n\t\t\taction={ action }\n\t\t\tonClick={ async () => {\n\t\t\t\tsetActionInProgress( action.id );\n\t\t\t\tawait action.callback( selectedItems, {\n\t\t\t\t\tregistry,\n\t\t\t\t} );\n\t\t\t\tsetActionInProgress( null );\n\t\t\t} }\n\t\t\titems={ selectedEligibleItems }\n\t\t\tisBusy={ actionInProgress === action.id }\n\t\t/>\n\t);\n}\n\nfunction renderFooterContent< Item >(\n\tdata: Item[],\n\tactions: Action< Item >[],\n\tgetItemId: ( item: Item ) => string,\n\tselection: string[],\n\tactionsToShow: Action< Item >[],\n\tselectedItems: Item[],\n\tactionInProgress: string | null,\n\tsetActionInProgress: ( actionId: string | null ) => void,\n\tonChangeSelection: SetSelection\n) {\n\tconst message =\n\t\tselectedItems.length > 0\n\t\t\t? sprintf(\n\t\t\t\t\t/* translators: %d: number of items. */\n\t\t\t\t\t_n(\n\t\t\t\t\t\t'%d Item selected',\n\t\t\t\t\t\t'%d Items selected',\n\t\t\t\t\t\tselectedItems.length\n\t\t\t\t\t),\n\t\t\t\t\tselectedItems.length\n\t\t\t )\n\t\t\t: sprintf(\n\t\t\t\t\t/* translators: %d: number of items. */\n\t\t\t\t\t_n( '%d Item', '%d Items', data.length ),\n\t\t\t\t\tdata.length\n\t\t\t );\n\treturn (\n\t\t<HStack\n\t\t\texpanded={ false }\n\t\t\tclassName=\"dataviews-bulk-actions-footer__container\"\n\t\t\tspacing={ 3 }\n\t\t>\n\t\t\t<BulkSelectionCheckbox\n\t\t\t\tselection={ selection }\n\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\tdata={ data }\n\t\t\t\tactions={ actions }\n\t\t\t\tgetItemId={ getItemId }\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\t<HStack\n\t\t\t\tclassName=\"dataviews-bulk-actions-footer__action-buttons\"\n\t\t\t\texpanded={ false }\n\t\t\t\tspacing={ 1 }\n\t\t\t>\n\t\t\t\t{ actionsToShow.map( ( action ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<ActionButton\n\t\t\t\t\t\t\tkey={ action.id }\n\t\t\t\t\t\t\taction={ action }\n\t\t\t\t\t\t\tselectedItems={ selectedItems }\n\t\t\t\t\t\t\tactionInProgress={ actionInProgress }\n\t\t\t\t\t\t\tsetActionInProgress={ setActionInProgress }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ selectedItems.length > 0 && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tlabel={ __( 'Cancel' ) }\n\t\t\t\t\t\tdisabled={ !! actionInProgress }\n\t\t\t\t\t\taccessibleWhenDisabled={ false }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonChangeSelection( EMPTY_ARRAY );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</HStack>\n\t);\n}\n\nfunction FooterContent< Item >( {\n\tselection,\n\tactions,\n\tonChangeSelection,\n\tdata,\n\tgetItemId,\n}: ToolbarContentProps< Item > ) {\n\tconst [ actionInProgress, setActionInProgress ] = useState< string | null >(\n\t\tnull\n\t);\n\tconst footerContentRef = useRef< JSX.Element | null >( null );\n\n\tconst bulkActions = useMemo(\n\t\t() => actions.filter( ( action ) => action.supportsBulk ),\n\t\t[ actions ]\n\t);\n\tconst selectableItems = useMemo( () => {\n\t\treturn data.filter( ( item ) => {\n\t\t\treturn bulkActions.some(\n\t\t\t\t( action ) => ! action.isEligible || action.isEligible( item )\n\t\t\t);\n\t\t} );\n\t}, [ data, bulkActions ] );\n\n\tconst selectedItems = useMemo( () => {\n\t\treturn data.filter(\n\t\t\t( item ) =>\n\t\t\t\tselection.includes( getItemId( item ) ) &&\n\t\t\t\tselectableItems.includes( item )\n\t\t);\n\t}, [ selection, data, getItemId, selectableItems ] );\n\n\tconst actionsToShow = useMemo(\n\t\t() =>\n\t\t\tactions.filter( ( action ) => {\n\t\t\t\treturn (\n\t\t\t\t\taction.supportsBulk &&\n\t\t\t\t\tselectedItems.some(\n\t\t\t\t\t\t( item ) =>\n\t\t\t\t\t\t\t! action.isEligible || action.isEligible( item )\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t} ),\n\t\t[ actions, selectedItems ]\n\t);\n\tif ( ! actionInProgress ) {\n\t\tif ( footerContentRef.current ) {\n\t\t\tfooterContentRef.current = null;\n\t\t}\n\t\treturn renderFooterContent(\n\t\t\tdata,\n\t\t\tactions,\n\t\t\tgetItemId,\n\t\t\tselection,\n\t\t\tactionsToShow,\n\t\t\tselectedItems,\n\t\t\tactionInProgress,\n\t\t\tsetActionInProgress,\n\t\t\tonChangeSelection\n\t\t);\n\t} else if ( ! footerContentRef.current ) {\n\t\tfooterContentRef.current = renderFooterContent(\n\t\t\tdata,\n\t\t\tactions,\n\t\t\tgetItemId,\n\t\t\tselection,\n\t\t\tactionsToShow,\n\t\t\tselectedItems,\n\t\t\tactionInProgress,\n\t\t\tsetActionInProgress,\n\t\t\tonChangeSelection\n\t\t);\n\t}\n\treturn footerContentRef.current;\n}\n\nexport function BulkActionsFooter() {\n\tconst {\n\t\tdata,\n\t\tselection,\n\t\tactions = EMPTY_ARRAY,\n\t\tonChangeSelection,\n\t\tgetItemId,\n\t} = useContext( DataViewsContext );\n\treturn (\n\t\t<FooterContent\n\t\t\tselection={ selection }\n\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\tdata={ data }\n\t\t\tactions={ actions }\n\t\t\tgetItemId={ getItemId }\n\t\t/>\n\t);\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport type { ReactElement } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tCheckboxControl,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport { useMemo, useState, useRef, useContext } from '@wordpress/element';\nimport { useRegistry } from '@wordpress/data';\nimport { closeSmall } from '@wordpress/icons';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\nimport { ActionModal } from '../dataviews-item-actions';\nimport type { Action, ActionModal as ActionModalType } from '../../types';\nimport type { SetSelection } from '../../types/private';\nimport type { ActionTriggerProps } from '../dataviews-item-actions';\n\ninterface ActionWithModalProps< Item > {\n\taction: ActionModalType< Item >;\n\titems: Item[];\n\tActionTriggerComponent: (\n\t\tprops: ActionTriggerProps< Item >\n\t) => ReactElement;\n}\n\nfunction ActionWithModal< Item >( {\n\taction,\n\titems,\n\tActionTriggerComponent,\n}: ActionWithModalProps< Item > ) {\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\tconst actionTriggerProps = {\n\t\taction,\n\t\tonClick: () => {\n\t\t\tsetIsModalOpen( true );\n\t\t},\n\t\titems,\n\t};\n\treturn (\n\t\t<>\n\t\t\t<ActionTriggerComponent { ...actionTriggerProps } />\n\t\t\t{ isModalOpen && (\n\t\t\t\t<ActionModal\n\t\t\t\t\taction={ action }\n\t\t\t\t\titems={ items }\n\t\t\t\t\tcloseModal={ () => setIsModalOpen( false ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport function useHasAPossibleBulkAction< Item >(\n\tactions: Action< Item >[],\n\titem: Item\n) {\n\treturn useMemo( () => {\n\t\treturn actions.some( ( action ) => {\n\t\t\treturn (\n\t\t\t\taction.supportsBulk &&\n\t\t\t\t( ! action.isEligible || action.isEligible( item ) )\n\t\t\t);\n\t\t} );\n\t}, [ actions, item ] );\n}\n\nexport function useSomeItemHasAPossibleBulkAction< Item >(\n\tactions: Action< Item >[],\n\tdata: Item[]\n) {\n\treturn useMemo( () => {\n\t\treturn data.some( ( item ) => {\n\t\t\treturn actions.some( ( action ) => {\n\t\t\t\treturn (\n\t\t\t\t\taction.supportsBulk &&\n\t\t\t\t\t( ! action.isEligible || action.isEligible( item ) )\n\t\t\t\t);\n\t\t\t} );\n\t\t} );\n\t}, [ actions, data ] );\n}\n\ninterface BulkSelectionCheckboxProps< Item > {\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tdata: Item[];\n\tactions: Action< Item >[];\n\tgetItemId: ( item: Item ) => string;\n}\n\nexport function BulkSelectionCheckbox< Item >( {\n\tselection,\n\tonChangeSelection,\n\tdata,\n\tactions,\n\tgetItemId,\n}: BulkSelectionCheckboxProps< Item > ) {\n\tconst selectableItems = useMemo( () => {\n\t\treturn data.filter( ( item ) => {\n\t\t\treturn actions.some(\n\t\t\t\t( action ) =>\n\t\t\t\t\taction.supportsBulk &&\n\t\t\t\t\t( ! action.isEligible || action.isEligible( item ) )\n\t\t\t);\n\t\t} );\n\t}, [ data, actions ] );\n\tconst selectedItems = data.filter(\n\t\t( item ) =>\n\t\t\tselection.includes( getItemId( item ) ) &&\n\t\t\tselectableItems.includes( item )\n\t);\n\tconst areAllSelected = selectedItems.length === selectableItems.length;\n\treturn (\n\t\t<CheckboxControl\n\t\t\tclassName=\"dataviews-view-table-selection-checkbox\"\n\t\t\t__nextHasNoMarginBottom\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\tonChangeSelection( [] );\n\t\t\t\t} else {\n\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\tselectableItems.map( ( item ) => getItemId( item ) )\n\t\t\t\t\t);\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\ninterface ActionButtonProps< Item > {\n\taction: Action< Item >;\n\tselectedItems: Item[];\n\tactionInProgress: string | null;\n\tsetActionInProgress: ( actionId: string | null ) => void;\n}\n\ninterface ToolbarContentProps< Item > {\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tdata: Item[];\n\tactions: Action< Item >[];\n\tgetItemId: ( item: Item ) => string;\n}\n\nfunction ActionTrigger< Item >( {\n\taction,\n\tonClick,\n\tisBusy,\n\titems,\n}: ActionTriggerProps< Item > ) {\n\tconst label =\n\t\ttypeof action.label === 'string' ? action.label : action.label( items );\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\n\tif ( isMobile ) {\n\t\treturn (\n\t\t\t<Button\n\t\t\t\tdisabled={ isBusy }\n\t\t\t\taccessibleWhenDisabled\n\t\t\t\tlabel={ label }\n\t\t\t\ticon={ action.icon }\n\t\t\t\tsize=\"compact\"\n\t\t\t\tonClick={ onClick }\n\t\t\t\tisBusy={ isBusy }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Button\n\t\t\tdisabled={ isBusy }\n\t\t\taccessibleWhenDisabled\n\t\t\tsize=\"compact\"\n\t\t\tonClick={ onClick }\n\t\t\tisBusy={ isBusy }\n\t\t>\n\t\t\t{ label }\n\t\t</Button>\n\t);\n}\n\nconst EMPTY_ARRAY: [] = [];\n\nfunction ActionButton< Item >( {\n\taction,\n\tselectedItems,\n\tactionInProgress,\n\tsetActionInProgress,\n}: ActionButtonProps< Item > ) {\n\tconst registry = useRegistry();\n\tconst selectedEligibleItems = useMemo( () => {\n\t\treturn selectedItems.filter( ( item ) => {\n\t\t\treturn ! action.isEligible || action.isEligible( item );\n\t\t} );\n\t}, [ action, selectedItems ] );\n\tif ( 'RenderModal' in action ) {\n\t\treturn (\n\t\t\t<ActionWithModal\n\t\t\t\tkey={ action.id }\n\t\t\t\taction={ action }\n\t\t\t\titems={ selectedEligibleItems }\n\t\t\t\tActionTriggerComponent={ ActionTrigger }\n\t\t\t/>\n\t\t);\n\t}\n\treturn (\n\t\t<ActionTrigger\n\t\t\tkey={ action.id }\n\t\t\taction={ action }\n\t\t\tonClick={ async () => {\n\t\t\t\tsetActionInProgress( action.id );\n\t\t\t\tawait action.callback( selectedItems, {\n\t\t\t\t\tregistry,\n\t\t\t\t} );\n\t\t\t\tsetActionInProgress( null );\n\t\t\t} }\n\t\t\titems={ selectedEligibleItems }\n\t\t\tisBusy={ actionInProgress === action.id }\n\t\t/>\n\t);\n}\n\nfunction renderFooterContent< Item >(\n\tdata: Item[],\n\tactions: Action< Item >[],\n\tgetItemId: ( item: Item ) => string,\n\tselection: string[],\n\tactionsToShow: Action< Item >[],\n\tselectedItems: Item[],\n\tactionInProgress: string | null,\n\tsetActionInProgress: ( actionId: string | null ) => void,\n\tonChangeSelection: SetSelection\n) {\n\tconst message =\n\t\tselectedItems.length > 0\n\t\t\t? sprintf(\n\t\t\t\t\t/* translators: %d: number of items. */\n\t\t\t\t\t_n(\n\t\t\t\t\t\t'%d Item selected',\n\t\t\t\t\t\t'%d Items selected',\n\t\t\t\t\t\tselectedItems.length\n\t\t\t\t\t),\n\t\t\t\t\tselectedItems.length\n\t\t\t )\n\t\t\t: sprintf(\n\t\t\t\t\t/* translators: %d: number of items. */\n\t\t\t\t\t_n( '%d Item', '%d Items', data.length ),\n\t\t\t\t\tdata.length\n\t\t\t );\n\treturn (\n\t\t<HStack\n\t\t\texpanded={ false }\n\t\t\tclassName=\"dataviews-bulk-actions-footer__container\"\n\t\t\tspacing={ 3 }\n\t\t>\n\t\t\t<BulkSelectionCheckbox\n\t\t\t\tselection={ selection }\n\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\tdata={ data }\n\t\t\t\tactions={ actions }\n\t\t\t\tgetItemId={ getItemId }\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\t<HStack\n\t\t\t\tclassName=\"dataviews-bulk-actions-footer__action-buttons\"\n\t\t\t\texpanded={ false }\n\t\t\t\tspacing={ 1 }\n\t\t\t>\n\t\t\t\t{ actionsToShow.map( ( action ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<ActionButton\n\t\t\t\t\t\t\tkey={ action.id }\n\t\t\t\t\t\t\taction={ action }\n\t\t\t\t\t\t\tselectedItems={ selectedItems }\n\t\t\t\t\t\t\tactionInProgress={ actionInProgress }\n\t\t\t\t\t\t\tsetActionInProgress={ setActionInProgress }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ selectedItems.length > 0 && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tlabel={ __( 'Cancel' ) }\n\t\t\t\t\t\tdisabled={ !! actionInProgress }\n\t\t\t\t\t\taccessibleWhenDisabled={ false }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonChangeSelection( EMPTY_ARRAY );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</HStack>\n\t);\n}\n\nfunction FooterContent< Item >( {\n\tselection,\n\tactions,\n\tonChangeSelection,\n\tdata,\n\tgetItemId,\n}: ToolbarContentProps< Item > ) {\n\tconst [ actionInProgress, setActionInProgress ] = useState< string | null >(\n\t\tnull\n\t);\n\tconst footerContentRef = useRef< JSX.Element | null >( null );\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\n\tconst bulkActions = useMemo(\n\t\t() => actions.filter( ( action ) => action.supportsBulk ),\n\t\t[ actions ]\n\t);\n\tconst selectableItems = useMemo( () => {\n\t\treturn data.filter( ( item ) => {\n\t\t\treturn bulkActions.some(\n\t\t\t\t( action ) => ! action.isEligible || action.isEligible( item )\n\t\t\t);\n\t\t} );\n\t}, [ data, bulkActions ] );\n\n\tconst selectedItems = useMemo( () => {\n\t\treturn data.filter(\n\t\t\t( item ) =>\n\t\t\t\tselection.includes( getItemId( item ) ) &&\n\t\t\t\tselectableItems.includes( item )\n\t\t);\n\t}, [ selection, data, getItemId, selectableItems ] );\n\n\tconst actionsToShow = useMemo(\n\t\t() =>\n\t\t\tactions.filter( ( action ) => {\n\t\t\t\treturn (\n\t\t\t\t\taction.supportsBulk &&\n\t\t\t\t\t( ! isMobile || action.icon ) &&\n\t\t\t\t\tselectedItems.some(\n\t\t\t\t\t\t( item ) =>\n\t\t\t\t\t\t\t! action.isEligible || action.isEligible( item )\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t} ),\n\t\t[ actions, selectedItems, isMobile ]\n\t);\n\tif ( ! actionInProgress ) {\n\t\tif ( footerContentRef.current ) {\n\t\t\tfooterContentRef.current = null;\n\t\t}\n\t\treturn renderFooterContent(\n\t\t\tdata,\n\t\t\tactions,\n\t\t\tgetItemId,\n\t\t\tselection,\n\t\t\tactionsToShow,\n\t\t\tselectedItems,\n\t\t\tactionInProgress,\n\t\t\tsetActionInProgress,\n\t\t\tonChangeSelection\n\t\t);\n\t} else if ( ! footerContentRef.current ) {\n\t\tfooterContentRef.current = renderFooterContent(\n\t\t\tdata,\n\t\t\tactions,\n\t\t\tgetItemId,\n\t\t\tselection,\n\t\t\tactionsToShow,\n\t\t\tselectedItems,\n\t\t\tactionInProgress,\n\t\t\tsetActionInProgress,\n\t\t\tonChangeSelection\n\t\t);\n\t}\n\treturn footerContentRef.current;\n}\n\nexport function BulkActionsFooter() {\n\tconst {\n\t\tdata,\n\t\tselection,\n\t\tactions = EMPTY_ARRAY,\n\t\tonChangeSelection,\n\t\tgetItemId,\n\t} = useContext( DataViewsContext );\n\treturn (\n\t\t<FooterContent\n\t\t\tselection={ selection }\n\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\tdata={ data }\n\t\t\tactions={ actions }\n\t\t\tgetItemId={ getItemId }\n\t\t/>\n\t);\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["HStack", "DataViewsContext"]
|
|
7
7
|
}
|
|
@@ -58,16 +58,15 @@ function Password({
|
|
|
58
58
|
hideLabelFromVision,
|
|
59
59
|
validity,
|
|
60
60
|
type: isVisible ? "text" : "password",
|
|
61
|
-
suffix: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
61
|
+
suffix: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalInputControlSuffixWrapper, { variant: "control", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
62
62
|
import_components.Button,
|
|
63
63
|
{
|
|
64
64
|
icon: isVisible ? import_icons.unseen : import_icons.seen,
|
|
65
65
|
onClick: toggleVisibility,
|
|
66
66
|
size: "small",
|
|
67
|
-
|
|
68
|
-
"aria-label": isVisible ? (0, import_i18n.__)("Hide password") : (0, import_i18n.__)("Show password")
|
|
67
|
+
label: isVisible ? (0, import_i18n.__)("Hide password") : (0, import_i18n.__)("Show password")
|
|
69
68
|
}
|
|
70
|
-
)
|
|
69
|
+
) })
|
|
71
70
|
}
|
|
72
71
|
}
|
|
73
72
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/dataform-controls/password.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
6
|
-
"names": ["ValidatedText"]
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,\n\tButton,\n} from '@wordpress/components';\nimport { useCallback, useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { seen, unseen } from '@wordpress/icons';\n/**\n * Internal dependencies\n */\nimport ValidatedText from './utils/validated-input';\nimport type { DataFormControlProps } from '../types';\n\nexport default function Password< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst [ isVisible, setIsVisible ] = useState( false );\n\n\tconst toggleVisibility = useCallback( () => {\n\t\tsetIsVisible( ( prev ) => ! prev );\n\t}, [] );\n\n\treturn (\n\t\t<ValidatedText\n\t\t\t{ ...{\n\t\t\t\tdata,\n\t\t\t\tfield,\n\t\t\t\tonChange,\n\t\t\t\thideLabelFromVision,\n\t\t\t\tvalidity,\n\t\t\t\ttype: isVisible ? 'text' : 'password',\n\t\t\t\tsuffix: (\n\t\t\t\t\t<InputControlSuffixWrapper variant=\"control\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ticon={ isVisible ? unseen : seen }\n\t\t\t\t\t\t\tonClick={ toggleVisibility }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tisVisible\n\t\t\t\t\t\t\t\t\t? __( 'Hide password' )\n\t\t\t\t\t\t\t\t\t: __( 'Show password' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</InputControlSuffixWrapper>\n\t\t\t\t),\n\t\t\t} }\n\t\t/>\n\t);\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwCM;AArCN,wBAGO;AACP,qBAAsC;AACtC,kBAAmB;AACnB,mBAA6B;AAI7B,6BAA0B;AAGX,SAAR,SAAmC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,CAAE,WAAW,YAAa,QAAI,yBAAU,KAAM;AAEpD,QAAM,uBAAmB,4BAAa,MAAM;AAC3C,iBAAc,CAAE,SAAU,CAAE,IAAK;AAAA,EAClC,GAAG,CAAC,CAAE;AAEN,SACC;AAAA,IAAC,uBAAAA;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM,YAAY,SAAS;AAAA,QAC3B,QACC,4CAAC,kBAAAC,yCAAA,EAA0B,SAAQ,WAClC;AAAA,UAAC;AAAA;AAAA,YACA,MAAO,YAAY,sBAAS;AAAA,YAC5B,SAAU;AAAA,YACV,MAAK;AAAA,YACL,OACC,gBACG,gBAAI,eAAgB,QACpB,gBAAI,eAAgB;AAAA;AAAA,QAEzB,GACD;AAAA,MAEF;AAAA;AAAA,EACD;AAEF;",
|
|
6
|
+
"names": ["ValidatedText", "InputControlSuffixWrapper"]
|
|
7
7
|
}
|
|
@@ -29,7 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
29
29
|
var card_exports = {};
|
|
30
30
|
__export(card_exports, {
|
|
31
31
|
default: () => FormCardField,
|
|
32
|
-
|
|
32
|
+
useCardHeader: () => useCardHeader
|
|
33
33
|
});
|
|
34
34
|
module.exports = __toCommonJS(card_exports);
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
@@ -42,8 +42,26 @@ var import_data_form_layout = require("../data-form-layout");
|
|
|
42
42
|
var import_is_combined_field = require("../is-combined-field");
|
|
43
43
|
var import_normalize_form_fields = require("../normalize-form-fields");
|
|
44
44
|
var import_get_summary_fields = require("../get-summary-fields");
|
|
45
|
-
|
|
46
|
-
|
|
45
|
+
const NonCollapsibleCardHeader = ({
|
|
46
|
+
children,
|
|
47
|
+
...props
|
|
48
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.CardHeader, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
49
|
+
"div",
|
|
50
|
+
{
|
|
51
|
+
style: {
|
|
52
|
+
height: "40px",
|
|
53
|
+
// This is to match the chevron's __next40pxDefaultSize
|
|
54
|
+
width: "100%",
|
|
55
|
+
display: "flex",
|
|
56
|
+
justifyContent: "space-between",
|
|
57
|
+
alignItems: "center"
|
|
58
|
+
},
|
|
59
|
+
children
|
|
60
|
+
}
|
|
61
|
+
) });
|
|
62
|
+
function useCardHeader(layout) {
|
|
63
|
+
const { isOpened, isCollapsible } = layout;
|
|
64
|
+
const [isOpen, setIsOpen] = (0, import_element.useState)(isOpened);
|
|
47
65
|
const toggle = (0, import_element.useCallback)(() => {
|
|
48
66
|
setIsOpen((prev) => !prev);
|
|
49
67
|
}, []);
|
|
@@ -88,7 +106,9 @@ function useCollapsibleCard(initialIsOpen = true) {
|
|
|
88
106
|
),
|
|
89
107
|
[toggle, isOpen]
|
|
90
108
|
);
|
|
91
|
-
|
|
109
|
+
const effectiveIsOpen = isCollapsible ? isOpen : true;
|
|
110
|
+
const CardHeaderComponent = isCollapsible ? CollapsibleCardHeader : NonCollapsibleCardHeader;
|
|
111
|
+
return { isOpen: effectiveIsOpen, CardHeader: CardHeaderComponent };
|
|
92
112
|
}
|
|
93
113
|
function isSummaryFieldVisible(summaryField, summaryConfig, isOpen) {
|
|
94
114
|
if (!summaryConfig || Array.isArray(summaryConfig) && summaryConfig.length === 0) {
|
|
@@ -134,9 +154,7 @@ function FormCardField({
|
|
|
134
154
|
}),
|
|
135
155
|
[field]
|
|
136
156
|
);
|
|
137
|
-
const { isOpen,
|
|
138
|
-
layout.isOpened
|
|
139
|
-
);
|
|
157
|
+
const { isOpen, CardHeader } = useCardHeader(layout);
|
|
140
158
|
const summaryFields = (0, import_get_summary_fields.getSummaryFields)(layout.summary, fields);
|
|
141
159
|
const visibleSummaryFields = summaryFields.filter(
|
|
142
160
|
(summaryField) => isSummaryFieldVisible(summaryField, layout.summary, isOpen)
|
|
@@ -144,7 +162,7 @@ function FormCardField({
|
|
|
144
162
|
if ((0, import_is_combined_field.isCombinedField)(field)) {
|
|
145
163
|
const withHeader2 = !!field.label && layout.withHeader;
|
|
146
164
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.Card, { className: "dataforms-layouts-card__field", children: [
|
|
147
|
-
withHeader2 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
165
|
+
withHeader2 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, { className: "dataforms-layouts-card__field-header", children: [
|
|
148
166
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dataforms-layouts-card__field-header-label", children: field.label }),
|
|
149
167
|
visibleSummaryFields.length > 0 && layout.withHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataforms-layouts-card__field-summary", children: visibleSummaryFields.map(
|
|
150
168
|
(summaryField) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -185,7 +203,7 @@ function FormCardField({
|
|
|
185
203
|
}
|
|
186
204
|
const withHeader = !!fieldDefinition.label && layout.withHeader;
|
|
187
205
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.Card, { className: "dataforms-layouts-card__field", children: [
|
|
188
|
-
withHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
206
|
+
withHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, { className: "dataforms-layouts-card__field-header", children: [
|
|
189
207
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dataforms-layouts-card__field-header-label", children: fieldDefinition.label }),
|
|
190
208
|
visibleSummaryFields.length > 0 && layout.withHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataforms-layouts-card__field-summary", children: visibleSummaryFields.map((summaryField) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
191
209
|
summaryField.render,
|
|
@@ -212,6 +230,6 @@ function FormCardField({
|
|
|
212
230
|
}
|
|
213
231
|
// Annotate the CommonJS export names for ESM import in node:
|
|
214
232
|
0 && (module.exports = {
|
|
215
|
-
|
|
233
|
+
useCardHeader
|
|
216
234
|
});
|
|
217
235
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/dataform-layouts/card/index.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
6
|
-
"names": ["DataFormContext", "withHeader"]
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tCard,\n\tCardBody,\n\tCardHeader as OriginalCardHeader,\n} from '@wordpress/components';\nimport { useCallback, useContext, useMemo, useState } from '@wordpress/element';\nimport { chevronDown, chevronUp } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { getFormFieldLayout } from '..';\nimport DataFormContext from '../../components/dataform-context';\nimport type {\n\tNormalizedCardLayout,\n\tCardLayout,\n\tFieldLayoutProps,\n\tForm,\n\tLayout,\n\tNormalizedField,\n} from '../../types';\nimport { DataFormLayout } from '../data-form-layout';\nimport { isCombinedField } from '../is-combined-field';\nimport { DEFAULT_LAYOUT, normalizeLayout } from '../normalize-form-fields';\nimport { getSummaryFields } from '../get-summary-fields';\n\nconst NonCollapsibleCardHeader = ( {\n\tchildren,\n\t...props\n}: {\n\tchildren: React.ReactNode;\n} ) => (\n\t<OriginalCardHeader { ...props }>\n\t\t<div\n\t\t\tstyle={ {\n\t\t\t\theight: '40px', // This is to match the chevron's __next40pxDefaultSize\n\t\t\t\twidth: '100%',\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\talignItems: 'center',\n\t\t\t} }\n\t\t>\n\t\t\t{ children }\n\t\t</div>\n\t</OriginalCardHeader>\n);\n\nexport function useCardHeader( layout: NormalizedCardLayout ) {\n\tconst { isOpened, isCollapsible } = layout;\n\tconst [ isOpen, setIsOpen ] = useState( isOpened );\n\n\tconst toggle = useCallback( () => {\n\t\tsetIsOpen( ( prev ) => ! prev );\n\t}, [] );\n\n\tconst CollapsibleCardHeader = useCallback(\n\t\t( {\n\t\t\tchildren,\n\t\t\t...props\n\t\t}: {\n\t\t\tchildren: React.ReactNode;\n\t\t\t[ key: string ]: any;\n\t\t} ) => (\n\t\t\t<OriginalCardHeader\n\t\t\t\t{ ...props }\n\t\t\t\tonClick={ toggle }\n\t\t\t\tstyle={ {\n\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t...props.style,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\ticon={ isOpen ? chevronUp : chevronDown }\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-label={ isOpen ? 'Collapse' : 'Expand' }\n\t\t\t\t/>\n\t\t\t</OriginalCardHeader>\n\t\t),\n\t\t[ toggle, isOpen ]\n\t);\n\n\tconst effectiveIsOpen = isCollapsible ? isOpen : true;\n\tconst CardHeaderComponent = isCollapsible\n\t\t? CollapsibleCardHeader\n\t\t: NonCollapsibleCardHeader;\n\n\treturn { isOpen: effectiveIsOpen, CardHeader: CardHeaderComponent };\n}\n\nfunction isSummaryFieldVisible< Item >(\n\tsummaryField: NormalizedField< Item >,\n\tsummaryConfig: NormalizedCardLayout[ 'summary' ],\n\tisOpen: boolean\n) {\n\t// If no summary config, dont't show any fields\n\tif (\n\t\t! summaryConfig ||\n\t\t( Array.isArray( summaryConfig ) && summaryConfig.length === 0 )\n\t) {\n\t\treturn false;\n\t}\n\n\t// Convert to array for consistent handling\n\tconst summaryConfigArray = Array.isArray( summaryConfig )\n\t\t? summaryConfig\n\t\t: [ summaryConfig ];\n\n\t// Find the config for this specific field\n\tconst fieldConfig = summaryConfigArray.find( ( config ) => {\n\t\tif ( typeof config === 'string' ) {\n\t\t\treturn config === summaryField.id;\n\t\t}\n\t\tif ( typeof config === 'object' && 'id' in config ) {\n\t\t\treturn config.id === summaryField.id;\n\t\t}\n\t\treturn false;\n\t} );\n\n\t// If field is not in summary config, don't show it\n\tif ( ! fieldConfig ) {\n\t\treturn false;\n\t}\n\n\t// If it's a string, always show it\n\tif ( typeof fieldConfig === 'string' ) {\n\t\treturn true;\n\t}\n\n\t// If it has visibility rules, respect them\n\tif ( typeof fieldConfig === 'object' && 'visibility' in fieldConfig ) {\n\t\treturn (\n\t\t\tfieldConfig.visibility === 'always' ||\n\t\t\t( fieldConfig.visibility === 'when-collapsed' && ! isOpen )\n\t\t);\n\t}\n\n\t// Default to always show\n\treturn true;\n}\n\nexport default function FormCardField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: FieldLayoutProps< Item > ) {\n\tconst { fields } = useContext( DataFormContext );\n\n\tconst layout: NormalizedCardLayout = normalizeLayout( {\n\t\t...field.layout,\n\t\ttype: 'card',\n\t} as CardLayout ) as NormalizedCardLayout;\n\n\tconst form: Form = useMemo(\n\t\t(): Form => ( {\n\t\t\tlayout: DEFAULT_LAYOUT as Layout,\n\t\t\tfields: isCombinedField( field ) ? field.children : [],\n\t\t} ),\n\t\t[ field ]\n\t);\n\n\tconst { isOpen, CardHeader } = useCardHeader( layout );\n\n\tconst summaryFields = getSummaryFields< Item >( layout.summary, fields );\n\n\tconst visibleSummaryFields = summaryFields.filter( ( summaryField ) =>\n\t\tisSummaryFieldVisible( summaryField, layout.summary, isOpen )\n\t);\n\n\tif ( isCombinedField( field ) ) {\n\t\tconst withHeader = !! field.label && layout.withHeader;\n\n\t\treturn (\n\t\t\t<Card className=\"dataforms-layouts-card__field\">\n\t\t\t\t{ withHeader && (\n\t\t\t\t\t<CardHeader className=\"dataforms-layouts-card__field-header\">\n\t\t\t\t\t\t<span className=\"dataforms-layouts-card__field-header-label\">\n\t\t\t\t\t\t\t{ field.label }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{ visibleSummaryFields.length > 0 &&\n\t\t\t\t\t\t\tlayout.withHeader && (\n\t\t\t\t\t\t\t\t<div className=\"dataforms-layouts-card__field-summary\">\n\t\t\t\t\t\t\t\t\t{ visibleSummaryFields.map(\n\t\t\t\t\t\t\t\t\t\t( summaryField ) => (\n\t\t\t\t\t\t\t\t\t\t\t<summaryField.render\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ summaryField.id }\n\t\t\t\t\t\t\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\t\t\t\t\t\t\tfield={ summaryField }\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</div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t</CardHeader>\n\t\t\t\t) }\n\t\t\t\t{ ( isOpen || ! withHeader ) && (\n\t\t\t\t\t// If it doesn't have a header, keep it open.\n\t\t\t\t\t// Otherwise, the card will not be visible.\n\t\t\t\t\t<CardBody className=\"dataforms-layouts-card__field-control\">\n\t\t\t\t\t\t{ field.description && (\n\t\t\t\t\t\t\t<div className=\"dataforms-layouts-card__field-description\">\n\t\t\t\t\t\t\t\t{ field.description }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<DataFormLayout\n\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\tform={ form }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tvalidity={ validity?.children }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</CardBody>\n\t\t\t\t) }\n\t\t\t</Card>\n\t\t);\n\t}\n\n\tconst fieldDefinition = fields.find(\n\t\t( fieldDef ) => fieldDef.id === field.id\n\t);\n\n\tif ( ! fieldDefinition || ! fieldDefinition.Edit ) {\n\t\treturn null;\n\t}\n\n\tconst RegularLayout = getFormFieldLayout( 'regular' )?.component;\n\tif ( ! RegularLayout ) {\n\t\treturn null;\n\t}\n\tconst withHeader = !! fieldDefinition.label && layout.withHeader;\n\n\treturn (\n\t\t<Card className=\"dataforms-layouts-card__field\">\n\t\t\t{ withHeader && (\n\t\t\t\t<CardHeader className=\"dataforms-layouts-card__field-header\">\n\t\t\t\t\t<span className=\"dataforms-layouts-card__field-header-label\">\n\t\t\t\t\t\t{ fieldDefinition.label }\n\t\t\t\t\t</span>\n\t\t\t\t\t{ visibleSummaryFields.length > 0 && layout.withHeader && (\n\t\t\t\t\t\t<div className=\"dataforms-layouts-card__field-summary\">\n\t\t\t\t\t\t\t{ visibleSummaryFields.map( ( summaryField ) => (\n\t\t\t\t\t\t\t\t<summaryField.render\n\t\t\t\t\t\t\t\t\tkey={ summaryField.id }\n\t\t\t\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\t\t\t\tfield={ summaryField }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</CardHeader>\n\t\t\t) }\n\t\t\t{ ( isOpen || ! withHeader ) && (\n\t\t\t\t// If it doesn't have a header, keep it open.\n\t\t\t\t// Otherwise, the card will not be visible.\n\t\t\t\t<CardBody className=\"dataforms-layouts-card__field-control\">\n\t\t\t\t\t<RegularLayout\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\thideLabelFromVision={\n\t\t\t\t\t\t\thideLabelFromVision || withHeader\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvalidity={ validity }\n\t\t\t\t\t/>\n\t\t\t\t</CardBody>\n\t\t\t) }\n\t\t</Card>\n\t);\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["OriginalCardHeader", "DataFormContext", "withHeader"]
|
|
7
7
|
}
|
|
@@ -60,7 +60,8 @@ function normalizeLayout(layout) {
|
|
|
60
60
|
type: "card",
|
|
61
61
|
withHeader: false,
|
|
62
62
|
isOpened: true,
|
|
63
|
-
summary: []
|
|
63
|
+
summary: [],
|
|
64
|
+
isCollapsible: false
|
|
64
65
|
};
|
|
65
66
|
} else {
|
|
66
67
|
const summary = layout.summary ?? [];
|
|
@@ -68,7 +69,8 @@ function normalizeLayout(layout) {
|
|
|
68
69
|
type: "card",
|
|
69
70
|
withHeader: true,
|
|
70
71
|
isOpened: typeof layout.isOpened === "boolean" ? layout.isOpened : true,
|
|
71
|
-
summary: normalizeCardSummaryField(summary)
|
|
72
|
+
summary: normalizeCardSummaryField(summary),
|
|
73
|
+
isCollapsible: layout.isCollapsible === void 0 ? true : layout.isCollapsible
|
|
72
74
|
};
|
|
73
75
|
}
|
|
74
76
|
} else if (layout?.type === "row") {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/dataform-layouts/normalize-form-fields.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport type {\n\tForm,\n\tLayout,\n\tNormalizedLayout,\n\tNormalizedRegularLayout,\n\tNormalizedPanelLayout,\n\tNormalizedCardLayout,\n\tNormalizedRowLayout,\n\tNormalizedCardSummaryField,\n\tCardSummaryField,\n} from '../types';\n\ninterface NormalizedFormField {\n\tid: string;\n\tlayout: Layout;\n}\n\nexport const DEFAULT_LAYOUT: NormalizedLayout = {\n\ttype: 'regular',\n\tlabelPosition: 'top',\n} as NormalizedRegularLayout;\n\nconst normalizeCardSummaryField = (\n\tsum: CardSummaryField\n): NormalizedCardSummaryField => {\n\tif ( typeof sum === 'string' ) {\n\t\treturn [ { id: sum, visibility: 'when-collapsed' } ];\n\t}\n\treturn sum.map( ( item ) => {\n\t\tif ( typeof item === 'string' ) {\n\t\t\treturn { id: item, visibility: 'when-collapsed' };\n\t\t}\n\t\treturn { id: item.id, visibility: item.visibility };\n\t} );\n};\n\n/**\n * Normalizes a layout configuration based on its type.\n *\n * @param layout The layout object to normalize.\n * @return The normalized layout object.\n */\nexport function normalizeLayout( layout?: Layout ): NormalizedLayout {\n\tlet normalizedLayout = DEFAULT_LAYOUT;\n\n\tif ( layout?.type === 'regular' ) {\n\t\tnormalizedLayout = {\n\t\t\ttype: 'regular',\n\t\t\tlabelPosition: layout?.labelPosition ?? 'top',\n\t\t} satisfies NormalizedRegularLayout;\n\t} else if ( layout?.type === 'panel' ) {\n\t\tconst summary = layout.summary ?? [];\n\t\tconst normalizedSummary = Array.isArray( summary )\n\t\t\t? summary\n\t\t\t: [ summary ];\n\n\t\tnormalizedLayout = {\n\t\t\ttype: 'panel',\n\t\t\tlabelPosition: layout?.labelPosition ?? 'side',\n\t\t\topenAs: layout?.openAs ?? 'dropdown',\n\t\t\tsummary: normalizedSummary,\n\t\t} satisfies NormalizedPanelLayout;\n\t} else if ( layout?.type === 'card' ) {\n\t\tif ( layout.withHeader === false ) {\n\t\t\t// Don't let isOpened be false if withHeader is false.\n\t\t\t// Otherwise, the card will not be visible.\n\t\t\tnormalizedLayout = {\n\t\t\t\ttype: 'card',\n\t\t\t\twithHeader: false,\n\t\t\t\tisOpened: true,\n\t\t\t\tsummary: [],\n\t\t\t} satisfies NormalizedCardLayout;\n\t\t} else {\n\t\t\tconst summary = layout.summary ?? [];\n\n\t\t\tnormalizedLayout = {\n\t\t\t\ttype: 'card',\n\t\t\t\twithHeader: true,\n\t\t\t\tisOpened:\n\t\t\t\t\ttypeof layout.isOpened === 'boolean'\n\t\t\t\t\t\t? layout.isOpened\n\t\t\t\t\t\t: true,\n\t\t\t\tsummary: normalizeCardSummaryField( summary ),\n\t\t\t} satisfies NormalizedCardLayout;\n\t\t}\n\t} else if ( layout?.type === 'row' ) {\n\t\tnormalizedLayout = {\n\t\t\ttype: 'row',\n\t\t\talignment: layout?.alignment ?? 'center',\n\t\t\tstyles: layout?.styles ?? {},\n\t\t} satisfies NormalizedRowLayout;\n\t}\n\n\treturn normalizedLayout;\n}\n\nexport default function normalizeFormFields(\n\tform: Form\n): NormalizedFormField[] {\n\tconst formLayout = normalizeLayout( form?.layout );\n\n\treturn ( form.fields ?? [] ).map( ( field ) => {\n\t\tif ( typeof field === 'string' ) {\n\t\t\treturn {\n\t\t\t\tid: field,\n\t\t\t\tlayout: formLayout,\n\t\t\t};\n\t\t}\n\n\t\tconst fieldLayout = field.layout\n\t\t\t? normalizeLayout( field.layout )\n\t\t\t: formLayout;\n\t\treturn {\n\t\t\t...field,\n\t\t\tlayout: fieldLayout,\n\t\t};\n\t} );\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBO,MAAM,iBAAmC;AAAA,EAC/C,MAAM;AAAA,EACN,eAAe;AAChB;AAEA,MAAM,4BAA4B,CACjC,QACgC;AAChC,MAAK,OAAO,QAAQ,UAAW;AAC9B,WAAO,CAAE,EAAE,IAAI,KAAK,YAAY,iBAAiB,CAAE;AAAA,EACpD;AACA,SAAO,IAAI,IAAK,CAAE,SAAU;AAC3B,QAAK,OAAO,SAAS,UAAW;AAC/B,aAAO,EAAE,IAAI,MAAM,YAAY,iBAAiB;AAAA,IACjD;AACA,WAAO,EAAE,IAAI,KAAK,IAAI,YAAY,KAAK,WAAW;AAAA,EACnD,CAAE;AACH;AAQO,SAAS,gBAAiB,QAAoC;AACpE,MAAI,mBAAmB;AAEvB,MAAK,QAAQ,SAAS,WAAY;AACjC,uBAAmB;AAAA,MAClB,MAAM;AAAA,MACN,eAAe,QAAQ,iBAAiB;AAAA,IACzC;AAAA,EACD,WAAY,QAAQ,SAAS,SAAU;AACtC,UAAM,UAAU,OAAO,WAAW,CAAC;AACnC,UAAM,oBAAoB,MAAM,QAAS,OAAQ,IAC9C,UACA,CAAE,OAAQ;AAEb,uBAAmB;AAAA,MAClB,MAAM;AAAA,MACN,eAAe,QAAQ,iBAAiB;AAAA,MACxC,QAAQ,QAAQ,UAAU;AAAA,MAC1B,SAAS;AAAA,IACV;AAAA,EACD,WAAY,QAAQ,SAAS,QAAS;AACrC,QAAK,OAAO,eAAe,OAAQ;AAGlC,yBAAmB;AAAA,QAClB,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,SAAS,CAAC;AAAA,
|
|
4
|
+
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport type {\n\tForm,\n\tLayout,\n\tNormalizedLayout,\n\tNormalizedRegularLayout,\n\tNormalizedPanelLayout,\n\tNormalizedCardLayout,\n\tNormalizedRowLayout,\n\tNormalizedCardSummaryField,\n\tCardSummaryField,\n} from '../types';\n\ninterface NormalizedFormField {\n\tid: string;\n\tlayout: Layout;\n}\n\nexport const DEFAULT_LAYOUT: NormalizedLayout = {\n\ttype: 'regular',\n\tlabelPosition: 'top',\n} as NormalizedRegularLayout;\n\nconst normalizeCardSummaryField = (\n\tsum: CardSummaryField\n): NormalizedCardSummaryField => {\n\tif ( typeof sum === 'string' ) {\n\t\treturn [ { id: sum, visibility: 'when-collapsed' } ];\n\t}\n\treturn sum.map( ( item ) => {\n\t\tif ( typeof item === 'string' ) {\n\t\t\treturn { id: item, visibility: 'when-collapsed' };\n\t\t}\n\t\treturn { id: item.id, visibility: item.visibility };\n\t} );\n};\n\n/**\n * Normalizes a layout configuration based on its type.\n *\n * @param layout The layout object to normalize.\n * @return The normalized layout object.\n */\nexport function normalizeLayout( layout?: Layout ): NormalizedLayout {\n\tlet normalizedLayout = DEFAULT_LAYOUT;\n\n\tif ( layout?.type === 'regular' ) {\n\t\tnormalizedLayout = {\n\t\t\ttype: 'regular',\n\t\t\tlabelPosition: layout?.labelPosition ?? 'top',\n\t\t} satisfies NormalizedRegularLayout;\n\t} else if ( layout?.type === 'panel' ) {\n\t\tconst summary = layout.summary ?? [];\n\t\tconst normalizedSummary = Array.isArray( summary )\n\t\t\t? summary\n\t\t\t: [ summary ];\n\n\t\tnormalizedLayout = {\n\t\t\ttype: 'panel',\n\t\t\tlabelPosition: layout?.labelPosition ?? 'side',\n\t\t\topenAs: layout?.openAs ?? 'dropdown',\n\t\t\tsummary: normalizedSummary,\n\t\t} satisfies NormalizedPanelLayout;\n\t} else if ( layout?.type === 'card' ) {\n\t\tif ( layout.withHeader === false ) {\n\t\t\t// Don't let isOpened be false if withHeader is false.\n\t\t\t// Otherwise, the card will not be visible.\n\t\t\tnormalizedLayout = {\n\t\t\t\ttype: 'card',\n\t\t\t\twithHeader: false,\n\t\t\t\tisOpened: true,\n\t\t\t\tsummary: [],\n\t\t\t\tisCollapsible: false,\n\t\t\t} satisfies NormalizedCardLayout;\n\t\t} else {\n\t\t\tconst summary = layout.summary ?? [];\n\n\t\t\tnormalizedLayout = {\n\t\t\t\ttype: 'card',\n\t\t\t\twithHeader: true,\n\t\t\t\tisOpened:\n\t\t\t\t\ttypeof layout.isOpened === 'boolean'\n\t\t\t\t\t\t? layout.isOpened\n\t\t\t\t\t\t: true,\n\t\t\t\tsummary: normalizeCardSummaryField( summary ),\n\t\t\t\tisCollapsible:\n\t\t\t\t\tlayout.isCollapsible === undefined\n\t\t\t\t\t\t? true\n\t\t\t\t\t\t: layout.isCollapsible,\n\t\t\t} satisfies NormalizedCardLayout;\n\t\t}\n\t} else if ( layout?.type === 'row' ) {\n\t\tnormalizedLayout = {\n\t\t\ttype: 'row',\n\t\t\talignment: layout?.alignment ?? 'center',\n\t\t\tstyles: layout?.styles ?? {},\n\t\t} satisfies NormalizedRowLayout;\n\t}\n\n\treturn normalizedLayout;\n}\n\nexport default function normalizeFormFields(\n\tform: Form\n): NormalizedFormField[] {\n\tconst formLayout = normalizeLayout( form?.layout );\n\n\treturn ( form.fields ?? [] ).map( ( field ) => {\n\t\tif ( typeof field === 'string' ) {\n\t\t\treturn {\n\t\t\t\tid: field,\n\t\t\t\tlayout: formLayout,\n\t\t\t};\n\t\t}\n\n\t\tconst fieldLayout = field.layout\n\t\t\t? normalizeLayout( field.layout )\n\t\t\t: formLayout;\n\t\treturn {\n\t\t\t...field,\n\t\t\tlayout: fieldLayout,\n\t\t};\n\t} );\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBO,MAAM,iBAAmC;AAAA,EAC/C,MAAM;AAAA,EACN,eAAe;AAChB;AAEA,MAAM,4BAA4B,CACjC,QACgC;AAChC,MAAK,OAAO,QAAQ,UAAW;AAC9B,WAAO,CAAE,EAAE,IAAI,KAAK,YAAY,iBAAiB,CAAE;AAAA,EACpD;AACA,SAAO,IAAI,IAAK,CAAE,SAAU;AAC3B,QAAK,OAAO,SAAS,UAAW;AAC/B,aAAO,EAAE,IAAI,MAAM,YAAY,iBAAiB;AAAA,IACjD;AACA,WAAO,EAAE,IAAI,KAAK,IAAI,YAAY,KAAK,WAAW;AAAA,EACnD,CAAE;AACH;AAQO,SAAS,gBAAiB,QAAoC;AACpE,MAAI,mBAAmB;AAEvB,MAAK,QAAQ,SAAS,WAAY;AACjC,uBAAmB;AAAA,MAClB,MAAM;AAAA,MACN,eAAe,QAAQ,iBAAiB;AAAA,IACzC;AAAA,EACD,WAAY,QAAQ,SAAS,SAAU;AACtC,UAAM,UAAU,OAAO,WAAW,CAAC;AACnC,UAAM,oBAAoB,MAAM,QAAS,OAAQ,IAC9C,UACA,CAAE,OAAQ;AAEb,uBAAmB;AAAA,MAClB,MAAM;AAAA,MACN,eAAe,QAAQ,iBAAiB;AAAA,MACxC,QAAQ,QAAQ,UAAU;AAAA,MAC1B,SAAS;AAAA,IACV;AAAA,EACD,WAAY,QAAQ,SAAS,QAAS;AACrC,QAAK,OAAO,eAAe,OAAQ;AAGlC,yBAAmB;AAAA,QAClB,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,SAAS,CAAC;AAAA,QACV,eAAe;AAAA,MAChB;AAAA,IACD,OAAO;AACN,YAAM,UAAU,OAAO,WAAW,CAAC;AAEnC,yBAAmB;AAAA,QAClB,MAAM;AAAA,QACN,YAAY;AAAA,QACZ,UACC,OAAO,OAAO,aAAa,YACxB,OAAO,WACP;AAAA,QACJ,SAAS,0BAA2B,OAAQ;AAAA,QAC5C,eACC,OAAO,kBAAkB,SACtB,OACA,OAAO;AAAA,MACZ;AAAA,IACD;AAAA,EACD,WAAY,QAAQ,SAAS,OAAQ;AACpC,uBAAmB;AAAA,MAClB,MAAM;AAAA,MACN,WAAW,QAAQ,aAAa;AAAA,MAChC,QAAQ,QAAQ,UAAU,CAAC;AAAA,IAC5B;AAAA,EACD;AAEA,SAAO;AACR;AAEe,SAAR,oBACN,MACwB;AACxB,QAAM,aAAa,gBAAiB,MAAM,MAAO;AAEjD,UAAS,KAAK,UAAU,CAAC,GAAI,IAAK,CAAE,UAAW;AAC9C,QAAK,OAAO,UAAU,UAAW;AAChC,aAAO;AAAA,QACN,IAAI;AAAA,QACJ,QAAQ;AAAA,MACT;AAAA,IACD;AAEA,UAAM,cAAc,MAAM,SACvB,gBAAiB,MAAM,MAAO,IAC9B;AACH,WAAO;AAAA,MACN,GAAG;AAAA,MACH,QAAQ;AAAA,IACT;AAAA,EACD,CAAE;AACH;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/types/dataform.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { Field, FieldValidity } from './field-api';\n\n/**\n * DataForm layouts.\n */\nexport type LayoutType = 'regular' | 'panel' | 'card' | 'row';\nexport type LabelPosition = 'top' | 'side' | 'none';\n\nexport type PanelSummaryField = string | string[];\nexport type NormalizedPanelSummaryField = string[];\n\nexport type RegularLayout = {\n\ttype: 'regular';\n\tlabelPosition?: LabelPosition;\n};\nexport type NormalizedRegularLayout = {\n\ttype: 'regular';\n\tlabelPosition: LabelPosition;\n};\n\nexport type PanelLayout = {\n\ttype: 'panel';\n\tlabelPosition?: LabelPosition;\n\topenAs?: 'dropdown' | 'modal';\n\tsummary?: PanelSummaryField;\n};\nexport type NormalizedPanelLayout = {\n\ttype: 'panel';\n\tlabelPosition: LabelPosition;\n\topenAs: 'dropdown' | 'modal';\n\tsummary: NormalizedPanelSummaryField;\n};\n\nexport type CardSummaryField =\n\t| PanelSummaryField // Basic usage: string or string[]\n\t| Array<\n\t\t\t| string\n\t\t\t| {\n\t\t\t\t\tid: string;\n\t\t\t\t\tvisibility: 'always' | 'when-collapsed';\n\t\t\t }\n\t >;\n\nexport type NormalizedCardSummaryField = Array< {\n\tid: string;\n\tvisibility: 'always' | 'when-collapsed';\n} >;\n\nexport type CardLayout =\n\t| {\n\t\t\ttype: 'card';\n\t\t\twithHeader: false;\n\t\t\t// isOpened cannot be false if withHeader is false as well.\n\t\t\t// Otherwise, the card would not be visible.\n\t\t\tisOpened?: true;\n\t }\n\t| {\n\t\t\ttype: 'card';\n\t\t\twithHeader?: true | undefined;\n\t\t\tisOpened?: boolean;\n\t\t\tsummary?: CardSummaryField;\n\t };\nexport type NormalizedCardLayout =\n\t| {\n\t\t\ttype: 'card';\n\t\t\twithHeader: false;\n\t\t\t// isOpened cannot be false if withHeader is false as well.\n\t\t\t// Otherwise, the card would not be visible.\n\t\t\tisOpened: true;\n\t\t\t// Summary is an empty array\n\t\t\tsummary: [];\n\t }\n\t| {\n\t\t\ttype: 'card';\n\t\t\twithHeader: true;\n\t\t\tisOpened: boolean;\n\t\t\tsummary: NormalizedCardSummaryField;\n\t };\n\nexport type RowLayout = {\n\ttype: 'row';\n\talignment?: 'start' | 'center' | 'end';\n\tstyles?: Record< string, { flex?: React.CSSProperties[ 'flex' ] } >;\n};\nexport type NormalizedRowLayout = {\n\ttype: 'row';\n\talignment: 'start' | 'center' | 'end';\n\tstyles: Record< string, { flex?: React.CSSProperties[ 'flex' ] } >;\n};\n\nexport type Layout = RegularLayout | PanelLayout | CardLayout | RowLayout;\nexport type NormalizedLayout =\n\t| NormalizedRegularLayout\n\t| NormalizedPanelLayout\n\t| NormalizedCardLayout\n\t| NormalizedRowLayout;\n\nexport type NormalizedSummaryField =\n\t| NormalizedPanelSummaryField\n\t| NormalizedCardSummaryField;\n\nexport type SimpleFormField = {\n\tid: string;\n\tlayout?: Layout;\n};\n\nexport type CombinedFormField = {\n\tid: string;\n\tlabel?: string;\n\tdescription?: string;\n\tlayout?: Layout;\n\tchildren: Array< FormField | string >;\n};\n\nexport type FormField = SimpleFormField | CombinedFormField;\n\n/**\n * The form configuration.\n */\nexport type Form = {\n\tlayout?: Layout;\n\tfields?: Array< FormField | string >;\n};\n\nexport interface DataFormProps< Item > {\n\tdata: Item;\n\tfields: Field< Item >[];\n\tform: Form;\n\tonChange: ( value: Record< string, any > ) => void;\n\tvalidity?: FormValidity;\n}\n\nexport type FormValidity = Record< string, FieldValidity > | undefined;\n\nexport interface FieldLayoutProps< Item > {\n\tdata: Item;\n\tfield: FormField;\n\tonChange: ( value: any ) => void;\n\thideLabelFromVision?: boolean;\n\tvalidity?: FieldValidity;\n}\n"],
|
|
4
|
+
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { Field, FieldValidity } from './field-api';\n\n/**\n * DataForm layouts.\n */\nexport type LayoutType = 'regular' | 'panel' | 'card' | 'row';\nexport type LabelPosition = 'top' | 'side' | 'none';\n\nexport type PanelSummaryField = string | string[];\nexport type NormalizedPanelSummaryField = string[];\n\nexport type RegularLayout = {\n\ttype: 'regular';\n\tlabelPosition?: LabelPosition;\n};\nexport type NormalizedRegularLayout = {\n\ttype: 'regular';\n\tlabelPosition: LabelPosition;\n};\n\nexport type PanelLayout = {\n\ttype: 'panel';\n\tlabelPosition?: LabelPosition;\n\topenAs?: 'dropdown' | 'modal';\n\tsummary?: PanelSummaryField;\n};\nexport type NormalizedPanelLayout = {\n\ttype: 'panel';\n\tlabelPosition: LabelPosition;\n\topenAs: 'dropdown' | 'modal';\n\tsummary: NormalizedPanelSummaryField;\n};\n\nexport type CardSummaryField =\n\t| PanelSummaryField // Basic usage: string or string[]\n\t| Array<\n\t\t\t| string\n\t\t\t| {\n\t\t\t\t\tid: string;\n\t\t\t\t\tvisibility: 'always' | 'when-collapsed';\n\t\t\t }\n\t >;\n\nexport type NormalizedCardSummaryField = Array< {\n\tid: string;\n\tvisibility: 'always' | 'when-collapsed';\n} >;\n\nexport type CardLayout =\n\t| {\n\t\t\ttype: 'card';\n\t\t\twithHeader: false;\n\t\t\t// isOpened cannot be false if withHeader is false as well.\n\t\t\t// Otherwise, the card would not be visible.\n\t\t\tisOpened?: true;\n\t\t\t// isCollapsible cannot be true if withHeader is false as well.\n\t\t\tisCollapsible?: false;\n\t }\n\t| {\n\t\t\ttype: 'card';\n\t\t\twithHeader?: true | undefined;\n\t\t\tisOpened?: boolean;\n\t\t\tsummary?: CardSummaryField;\n\t\t\tisCollapsible?: boolean | undefined;\n\t };\nexport type NormalizedCardLayout =\n\t| {\n\t\t\ttype: 'card';\n\t\t\twithHeader: false;\n\t\t\t// isOpened cannot be false if withHeader is false as well.\n\t\t\t// Otherwise, the card would not be visible.\n\t\t\tisOpened: true;\n\t\t\t// Summary is an empty array\n\t\t\tsummary: [];\n\t\t\t// If no header, the card should not be collapsible.\n\t\t\tisCollapsible: false;\n\t }\n\t| {\n\t\t\ttype: 'card';\n\t\t\twithHeader: true;\n\t\t\tisOpened: boolean;\n\t\t\tsummary: NormalizedCardSummaryField;\n\t\t\tisCollapsible: boolean;\n\t };\n\nexport type RowLayout = {\n\ttype: 'row';\n\talignment?: 'start' | 'center' | 'end';\n\tstyles?: Record< string, { flex?: React.CSSProperties[ 'flex' ] } >;\n};\nexport type NormalizedRowLayout = {\n\ttype: 'row';\n\talignment: 'start' | 'center' | 'end';\n\tstyles: Record< string, { flex?: React.CSSProperties[ 'flex' ] } >;\n};\n\nexport type Layout = RegularLayout | PanelLayout | CardLayout | RowLayout;\nexport type NormalizedLayout =\n\t| NormalizedRegularLayout\n\t| NormalizedPanelLayout\n\t| NormalizedCardLayout\n\t| NormalizedRowLayout;\n\nexport type NormalizedSummaryField =\n\t| NormalizedPanelSummaryField\n\t| NormalizedCardSummaryField;\n\nexport type SimpleFormField = {\n\tid: string;\n\tlayout?: Layout;\n};\n\nexport type CombinedFormField = {\n\tid: string;\n\tlabel?: string;\n\tdescription?: string;\n\tlayout?: Layout;\n\tchildren: Array< FormField | string >;\n};\n\nexport type FormField = SimpleFormField | CombinedFormField;\n\n/**\n * The form configuration.\n */\nexport type Form = {\n\tlayout?: Layout;\n\tfields?: Array< FormField | string >;\n};\n\nexport interface DataFormProps< Item > {\n\tdata: Item;\n\tfields: Field< Item >[];\n\tform: Form;\n\tonChange: ( value: Record< string, any > ) => void;\n\tvalidity?: FormValidity;\n}\n\nexport type FormValidity = Record< string, FieldValidity > | undefined;\n\nexport interface FieldLayoutProps< Item > {\n\tdata: Item;\n\tfield: FormField;\n\tonChange: ( value: any ) => void;\n\thideLabelFromVision?: boolean;\n\tvalidity?: FieldValidity;\n}\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -8,6 +8,7 @@ import { __, sprintf, _n } from "@wordpress/i18n";
|
|
|
8
8
|
import { useMemo, useState, useRef, useContext } from "@wordpress/element";
|
|
9
9
|
import { useRegistry } from "@wordpress/data";
|
|
10
10
|
import { closeSmall } from "@wordpress/icons";
|
|
11
|
+
import { useViewportMatch } from "@wordpress/compose";
|
|
11
12
|
import DataViewsContext from "../dataviews-context";
|
|
12
13
|
import { ActionModal } from "../dataviews-item-actions";
|
|
13
14
|
function ActionWithModal({
|
|
@@ -96,6 +97,21 @@ function ActionTrigger({
|
|
|
96
97
|
items
|
|
97
98
|
}) {
|
|
98
99
|
const label = typeof action.label === "string" ? action.label : action.label(items);
|
|
100
|
+
const isMobile = useViewportMatch("medium", "<");
|
|
101
|
+
if (isMobile) {
|
|
102
|
+
return /* @__PURE__ */ jsx(
|
|
103
|
+
Button,
|
|
104
|
+
{
|
|
105
|
+
disabled: isBusy,
|
|
106
|
+
accessibleWhenDisabled: true,
|
|
107
|
+
label,
|
|
108
|
+
icon: action.icon,
|
|
109
|
+
size: "compact",
|
|
110
|
+
onClick,
|
|
111
|
+
isBusy
|
|
112
|
+
}
|
|
113
|
+
);
|
|
114
|
+
}
|
|
99
115
|
return /* @__PURE__ */ jsx(
|
|
100
116
|
Button,
|
|
101
117
|
{
|
|
@@ -233,6 +249,7 @@ function FooterContent({
|
|
|
233
249
|
null
|
|
234
250
|
);
|
|
235
251
|
const footerContentRef = useRef(null);
|
|
252
|
+
const isMobile = useViewportMatch("medium", "<");
|
|
236
253
|
const bulkActions = useMemo(
|
|
237
254
|
() => actions.filter((action) => action.supportsBulk),
|
|
238
255
|
[actions]
|
|
@@ -251,11 +268,11 @@ function FooterContent({
|
|
|
251
268
|
}, [selection, data, getItemId, selectableItems]);
|
|
252
269
|
const actionsToShow = useMemo(
|
|
253
270
|
() => actions.filter((action) => {
|
|
254
|
-
return action.supportsBulk && selectedItems.some(
|
|
271
|
+
return action.supportsBulk && (!isMobile || action.icon) && selectedItems.some(
|
|
255
272
|
(item) => !action.isEligible || action.isEligible(item)
|
|
256
273
|
);
|
|
257
274
|
}),
|
|
258
|
-
[actions, selectedItems]
|
|
275
|
+
[actions, selectedItems, isMobile]
|
|
259
276
|
);
|
|
260
277
|
if (!actionInProgress) {
|
|
261
278
|
if (footerContentRef.current) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/dataviews-bulk-actions/index.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport type { ReactElement } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tCheckboxControl,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport { useMemo, useState, useRef, useContext } from '@wordpress/element';\nimport { useRegistry } from '@wordpress/data';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\nimport { ActionModal } from '../dataviews-item-actions';\nimport type { Action, ActionModal as ActionModalType } from '../../types';\nimport type { SetSelection } from '../../types/private';\nimport type { ActionTriggerProps } from '../dataviews-item-actions';\n\ninterface ActionWithModalProps< Item > {\n\taction: ActionModalType< Item >;\n\titems: Item[];\n\tActionTriggerComponent: (\n\t\tprops: ActionTriggerProps< Item >\n\t) => ReactElement;\n}\n\nfunction ActionWithModal< Item >( {\n\taction,\n\titems,\n\tActionTriggerComponent,\n}: ActionWithModalProps< Item > ) {\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\tconst actionTriggerProps = {\n\t\taction,\n\t\tonClick: () => {\n\t\t\tsetIsModalOpen( true );\n\t\t},\n\t\titems,\n\t};\n\treturn (\n\t\t<>\n\t\t\t<ActionTriggerComponent { ...actionTriggerProps } />\n\t\t\t{ isModalOpen && (\n\t\t\t\t<ActionModal\n\t\t\t\t\taction={ action }\n\t\t\t\t\titems={ items }\n\t\t\t\t\tcloseModal={ () => setIsModalOpen( false ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport function useHasAPossibleBulkAction< Item >(\n\tactions: Action< Item >[],\n\titem: Item\n) {\n\treturn useMemo( () => {\n\t\treturn actions.some( ( action ) => {\n\t\t\treturn (\n\t\t\t\taction.supportsBulk &&\n\t\t\t\t( ! action.isEligible || action.isEligible( item ) )\n\t\t\t);\n\t\t} );\n\t}, [ actions, item ] );\n}\n\nexport function useSomeItemHasAPossibleBulkAction< Item >(\n\tactions: Action< Item >[],\n\tdata: Item[]\n) {\n\treturn useMemo( () => {\n\t\treturn data.some( ( item ) => {\n\t\t\treturn actions.some( ( action ) => {\n\t\t\t\treturn (\n\t\t\t\t\taction.supportsBulk &&\n\t\t\t\t\t( ! action.isEligible || action.isEligible( item ) )\n\t\t\t\t);\n\t\t\t} );\n\t\t} );\n\t}, [ actions, data ] );\n}\n\ninterface BulkSelectionCheckboxProps< Item > {\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tdata: Item[];\n\tactions: Action< Item >[];\n\tgetItemId: ( item: Item ) => string;\n}\n\nexport function BulkSelectionCheckbox< Item >( {\n\tselection,\n\tonChangeSelection,\n\tdata,\n\tactions,\n\tgetItemId,\n}: BulkSelectionCheckboxProps< Item > ) {\n\tconst selectableItems = useMemo( () => {\n\t\treturn data.filter( ( item ) => {\n\t\t\treturn actions.some(\n\t\t\t\t( action ) =>\n\t\t\t\t\taction.supportsBulk &&\n\t\t\t\t\t( ! action.isEligible || action.isEligible( item ) )\n\t\t\t);\n\t\t} );\n\t}, [ data, actions ] );\n\tconst selectedItems = data.filter(\n\t\t( item ) =>\n\t\t\tselection.includes( getItemId( item ) ) &&\n\t\t\tselectableItems.includes( item )\n\t);\n\tconst areAllSelected = selectedItems.length === selectableItems.length;\n\treturn (\n\t\t<CheckboxControl\n\t\t\tclassName=\"dataviews-view-table-selection-checkbox\"\n\t\t\t__nextHasNoMarginBottom\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\tonChangeSelection( [] );\n\t\t\t\t} else {\n\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\tselectableItems.map( ( item ) => getItemId( item ) )\n\t\t\t\t\t);\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\ninterface ActionButtonProps< Item > {\n\taction: Action< Item >;\n\tselectedItems: Item[];\n\tactionInProgress: string | null;\n\tsetActionInProgress: ( actionId: string | null ) => void;\n}\n\ninterface ToolbarContentProps< Item > {\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tdata: Item[];\n\tactions: Action< Item >[];\n\tgetItemId: ( item: Item ) => string;\n}\n\nfunction ActionTrigger< Item >( {\n\taction,\n\tonClick,\n\tisBusy,\n\titems,\n}: ActionTriggerProps< Item > ) {\n\tconst label =\n\t\ttypeof action.label === 'string' ? action.label : action.label( items );\n\treturn (\n\t\t<Button\n\t\t\tdisabled={ isBusy }\n\t\t\taccessibleWhenDisabled\n\t\t\tsize=\"compact\"\n\t\t\tonClick={ onClick }\n\t\t\tisBusy={ isBusy }\n\t\t>\n\t\t\t{ label }\n\t\t</Button>\n\t);\n}\n\nconst EMPTY_ARRAY: [] = [];\n\nfunction ActionButton< Item >( {\n\taction,\n\tselectedItems,\n\tactionInProgress,\n\tsetActionInProgress,\n}: ActionButtonProps< Item > ) {\n\tconst registry = useRegistry();\n\tconst selectedEligibleItems = useMemo( () => {\n\t\treturn selectedItems.filter( ( item ) => {\n\t\t\treturn ! action.isEligible || action.isEligible( item );\n\t\t} );\n\t}, [ action, selectedItems ] );\n\tif ( 'RenderModal' in action ) {\n\t\treturn (\n\t\t\t<ActionWithModal\n\t\t\t\tkey={ action.id }\n\t\t\t\taction={ action }\n\t\t\t\titems={ selectedEligibleItems }\n\t\t\t\tActionTriggerComponent={ ActionTrigger }\n\t\t\t/>\n\t\t);\n\t}\n\treturn (\n\t\t<ActionTrigger\n\t\t\tkey={ action.id }\n\t\t\taction={ action }\n\t\t\tonClick={ async () => {\n\t\t\t\tsetActionInProgress( action.id );\n\t\t\t\tawait action.callback( selectedItems, {\n\t\t\t\t\tregistry,\n\t\t\t\t} );\n\t\t\t\tsetActionInProgress( null );\n\t\t\t} }\n\t\t\titems={ selectedEligibleItems }\n\t\t\tisBusy={ actionInProgress === action.id }\n\t\t/>\n\t);\n}\n\nfunction renderFooterContent< Item >(\n\tdata: Item[],\n\tactions: Action< Item >[],\n\tgetItemId: ( item: Item ) => string,\n\tselection: string[],\n\tactionsToShow: Action< Item >[],\n\tselectedItems: Item[],\n\tactionInProgress: string | null,\n\tsetActionInProgress: ( actionId: string | null ) => void,\n\tonChangeSelection: SetSelection\n) {\n\tconst message =\n\t\tselectedItems.length > 0\n\t\t\t? sprintf(\n\t\t\t\t\t/* translators: %d: number of items. */\n\t\t\t\t\t_n(\n\t\t\t\t\t\t'%d Item selected',\n\t\t\t\t\t\t'%d Items selected',\n\t\t\t\t\t\tselectedItems.length\n\t\t\t\t\t),\n\t\t\t\t\tselectedItems.length\n\t\t\t )\n\t\t\t: sprintf(\n\t\t\t\t\t/* translators: %d: number of items. */\n\t\t\t\t\t_n( '%d Item', '%d Items', data.length ),\n\t\t\t\t\tdata.length\n\t\t\t );\n\treturn (\n\t\t<HStack\n\t\t\texpanded={ false }\n\t\t\tclassName=\"dataviews-bulk-actions-footer__container\"\n\t\t\tspacing={ 3 }\n\t\t>\n\t\t\t<BulkSelectionCheckbox\n\t\t\t\tselection={ selection }\n\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\tdata={ data }\n\t\t\t\tactions={ actions }\n\t\t\t\tgetItemId={ getItemId }\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\t<HStack\n\t\t\t\tclassName=\"dataviews-bulk-actions-footer__action-buttons\"\n\t\t\t\texpanded={ false }\n\t\t\t\tspacing={ 1 }\n\t\t\t>\n\t\t\t\t{ actionsToShow.map( ( action ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<ActionButton\n\t\t\t\t\t\t\tkey={ action.id }\n\t\t\t\t\t\t\taction={ action }\n\t\t\t\t\t\t\tselectedItems={ selectedItems }\n\t\t\t\t\t\t\tactionInProgress={ actionInProgress }\n\t\t\t\t\t\t\tsetActionInProgress={ setActionInProgress }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ selectedItems.length > 0 && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tlabel={ __( 'Cancel' ) }\n\t\t\t\t\t\tdisabled={ !! actionInProgress }\n\t\t\t\t\t\taccessibleWhenDisabled={ false }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonChangeSelection( EMPTY_ARRAY );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</HStack>\n\t);\n}\n\nfunction FooterContent< Item >( {\n\tselection,\n\tactions,\n\tonChangeSelection,\n\tdata,\n\tgetItemId,\n}: ToolbarContentProps< Item > ) {\n\tconst [ actionInProgress, setActionInProgress ] = useState< string | null >(\n\t\tnull\n\t);\n\tconst footerContentRef = useRef< JSX.Element | null >( null );\n\n\tconst bulkActions = useMemo(\n\t\t() => actions.filter( ( action ) => action.supportsBulk ),\n\t\t[ actions ]\n\t);\n\tconst selectableItems = useMemo( () => {\n\t\treturn data.filter( ( item ) => {\n\t\t\treturn bulkActions.some(\n\t\t\t\t( action ) => ! action.isEligible || action.isEligible( item )\n\t\t\t);\n\t\t} );\n\t}, [ data, bulkActions ] );\n\n\tconst selectedItems = useMemo( () => {\n\t\treturn data.filter(\n\t\t\t( item ) =>\n\t\t\t\tselection.includes( getItemId( item ) ) &&\n\t\t\t\tselectableItems.includes( item )\n\t\t);\n\t}, [ selection, data, getItemId, selectableItems ] );\n\n\tconst actionsToShow = useMemo(\n\t\t() =>\n\t\t\tactions.filter( ( action ) => {\n\t\t\t\treturn (\n\t\t\t\t\taction.supportsBulk &&\n\t\t\t\t\tselectedItems.some(\n\t\t\t\t\t\t( item ) =>\n\t\t\t\t\t\t\t! action.isEligible || action.isEligible( item )\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t} ),\n\t\t[ actions, selectedItems ]\n\t);\n\tif ( ! actionInProgress ) {\n\t\tif ( footerContentRef.current ) {\n\t\t\tfooterContentRef.current = null;\n\t\t}\n\t\treturn renderFooterContent(\n\t\t\tdata,\n\t\t\tactions,\n\t\t\tgetItemId,\n\t\t\tselection,\n\t\t\tactionsToShow,\n\t\t\tselectedItems,\n\t\t\tactionInProgress,\n\t\t\tsetActionInProgress,\n\t\t\tonChangeSelection\n\t\t);\n\t} else if ( ! footerContentRef.current ) {\n\t\tfooterContentRef.current = renderFooterContent(\n\t\t\tdata,\n\t\t\tactions,\n\t\t\tgetItemId,\n\t\t\tselection,\n\t\t\tactionsToShow,\n\t\t\tselectedItems,\n\t\t\tactionInProgress,\n\t\t\tsetActionInProgress,\n\t\t\tonChangeSelection\n\t\t);\n\t}\n\treturn footerContentRef.current;\n}\n\nexport function BulkActionsFooter() {\n\tconst {\n\t\tdata,\n\t\tselection,\n\t\tactions = EMPTY_ARRAY,\n\t\tonChangeSelection,\n\t\tgetItemId,\n\t} = useContext( DataViewsContext );\n\treturn (\n\t\t<FooterContent\n\t\t\tselection={ selection }\n\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\tdata={ data }\n\t\t\tactions={ actions }\n\t\t\tgetItemId={ getItemId }\n\t\t/>\n\t);\n}\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport type { ReactElement } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tCheckboxControl,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport { useMemo, useState, useRef, useContext } from '@wordpress/element';\nimport { useRegistry } from '@wordpress/data';\nimport { closeSmall } from '@wordpress/icons';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\nimport { ActionModal } from '../dataviews-item-actions';\nimport type { Action, ActionModal as ActionModalType } from '../../types';\nimport type { SetSelection } from '../../types/private';\nimport type { ActionTriggerProps } from '../dataviews-item-actions';\n\ninterface ActionWithModalProps< Item > {\n\taction: ActionModalType< Item >;\n\titems: Item[];\n\tActionTriggerComponent: (\n\t\tprops: ActionTriggerProps< Item >\n\t) => ReactElement;\n}\n\nfunction ActionWithModal< Item >( {\n\taction,\n\titems,\n\tActionTriggerComponent,\n}: ActionWithModalProps< Item > ) {\n\tconst [ isModalOpen, setIsModalOpen ] = useState( false );\n\tconst actionTriggerProps = {\n\t\taction,\n\t\tonClick: () => {\n\t\t\tsetIsModalOpen( true );\n\t\t},\n\t\titems,\n\t};\n\treturn (\n\t\t<>\n\t\t\t<ActionTriggerComponent { ...actionTriggerProps } />\n\t\t\t{ isModalOpen && (\n\t\t\t\t<ActionModal\n\t\t\t\t\taction={ action }\n\t\t\t\t\titems={ items }\n\t\t\t\t\tcloseModal={ () => setIsModalOpen( false ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport function useHasAPossibleBulkAction< Item >(\n\tactions: Action< Item >[],\n\titem: Item\n) {\n\treturn useMemo( () => {\n\t\treturn actions.some( ( action ) => {\n\t\t\treturn (\n\t\t\t\taction.supportsBulk &&\n\t\t\t\t( ! action.isEligible || action.isEligible( item ) )\n\t\t\t);\n\t\t} );\n\t}, [ actions, item ] );\n}\n\nexport function useSomeItemHasAPossibleBulkAction< Item >(\n\tactions: Action< Item >[],\n\tdata: Item[]\n) {\n\treturn useMemo( () => {\n\t\treturn data.some( ( item ) => {\n\t\t\treturn actions.some( ( action ) => {\n\t\t\t\treturn (\n\t\t\t\t\taction.supportsBulk &&\n\t\t\t\t\t( ! action.isEligible || action.isEligible( item ) )\n\t\t\t\t);\n\t\t\t} );\n\t\t} );\n\t}, [ actions, data ] );\n}\n\ninterface BulkSelectionCheckboxProps< Item > {\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tdata: Item[];\n\tactions: Action< Item >[];\n\tgetItemId: ( item: Item ) => string;\n}\n\nexport function BulkSelectionCheckbox< Item >( {\n\tselection,\n\tonChangeSelection,\n\tdata,\n\tactions,\n\tgetItemId,\n}: BulkSelectionCheckboxProps< Item > ) {\n\tconst selectableItems = useMemo( () => {\n\t\treturn data.filter( ( item ) => {\n\t\t\treturn actions.some(\n\t\t\t\t( action ) =>\n\t\t\t\t\taction.supportsBulk &&\n\t\t\t\t\t( ! action.isEligible || action.isEligible( item ) )\n\t\t\t);\n\t\t} );\n\t}, [ data, actions ] );\n\tconst selectedItems = data.filter(\n\t\t( item ) =>\n\t\t\tselection.includes( getItemId( item ) ) &&\n\t\t\tselectableItems.includes( item )\n\t);\n\tconst areAllSelected = selectedItems.length === selectableItems.length;\n\treturn (\n\t\t<CheckboxControl\n\t\t\tclassName=\"dataviews-view-table-selection-checkbox\"\n\t\t\t__nextHasNoMarginBottom\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\tonChangeSelection( [] );\n\t\t\t\t} else {\n\t\t\t\t\tonChangeSelection(\n\t\t\t\t\t\tselectableItems.map( ( item ) => getItemId( item ) )\n\t\t\t\t\t);\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\ninterface ActionButtonProps< Item > {\n\taction: Action< Item >;\n\tselectedItems: Item[];\n\tactionInProgress: string | null;\n\tsetActionInProgress: ( actionId: string | null ) => void;\n}\n\ninterface ToolbarContentProps< Item > {\n\tselection: string[];\n\tonChangeSelection: SetSelection;\n\tdata: Item[];\n\tactions: Action< Item >[];\n\tgetItemId: ( item: Item ) => string;\n}\n\nfunction ActionTrigger< Item >( {\n\taction,\n\tonClick,\n\tisBusy,\n\titems,\n}: ActionTriggerProps< Item > ) {\n\tconst label =\n\t\ttypeof action.label === 'string' ? action.label : action.label( items );\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\n\tif ( isMobile ) {\n\t\treturn (\n\t\t\t<Button\n\t\t\t\tdisabled={ isBusy }\n\t\t\t\taccessibleWhenDisabled\n\t\t\t\tlabel={ label }\n\t\t\t\ticon={ action.icon }\n\t\t\t\tsize=\"compact\"\n\t\t\t\tonClick={ onClick }\n\t\t\t\tisBusy={ isBusy }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Button\n\t\t\tdisabled={ isBusy }\n\t\t\taccessibleWhenDisabled\n\t\t\tsize=\"compact\"\n\t\t\tonClick={ onClick }\n\t\t\tisBusy={ isBusy }\n\t\t>\n\t\t\t{ label }\n\t\t</Button>\n\t);\n}\n\nconst EMPTY_ARRAY: [] = [];\n\nfunction ActionButton< Item >( {\n\taction,\n\tselectedItems,\n\tactionInProgress,\n\tsetActionInProgress,\n}: ActionButtonProps< Item > ) {\n\tconst registry = useRegistry();\n\tconst selectedEligibleItems = useMemo( () => {\n\t\treturn selectedItems.filter( ( item ) => {\n\t\t\treturn ! action.isEligible || action.isEligible( item );\n\t\t} );\n\t}, [ action, selectedItems ] );\n\tif ( 'RenderModal' in action ) {\n\t\treturn (\n\t\t\t<ActionWithModal\n\t\t\t\tkey={ action.id }\n\t\t\t\taction={ action }\n\t\t\t\titems={ selectedEligibleItems }\n\t\t\t\tActionTriggerComponent={ ActionTrigger }\n\t\t\t/>\n\t\t);\n\t}\n\treturn (\n\t\t<ActionTrigger\n\t\t\tkey={ action.id }\n\t\t\taction={ action }\n\t\t\tonClick={ async () => {\n\t\t\t\tsetActionInProgress( action.id );\n\t\t\t\tawait action.callback( selectedItems, {\n\t\t\t\t\tregistry,\n\t\t\t\t} );\n\t\t\t\tsetActionInProgress( null );\n\t\t\t} }\n\t\t\titems={ selectedEligibleItems }\n\t\t\tisBusy={ actionInProgress === action.id }\n\t\t/>\n\t);\n}\n\nfunction renderFooterContent< Item >(\n\tdata: Item[],\n\tactions: Action< Item >[],\n\tgetItemId: ( item: Item ) => string,\n\tselection: string[],\n\tactionsToShow: Action< Item >[],\n\tselectedItems: Item[],\n\tactionInProgress: string | null,\n\tsetActionInProgress: ( actionId: string | null ) => void,\n\tonChangeSelection: SetSelection\n) {\n\tconst message =\n\t\tselectedItems.length > 0\n\t\t\t? sprintf(\n\t\t\t\t\t/* translators: %d: number of items. */\n\t\t\t\t\t_n(\n\t\t\t\t\t\t'%d Item selected',\n\t\t\t\t\t\t'%d Items selected',\n\t\t\t\t\t\tselectedItems.length\n\t\t\t\t\t),\n\t\t\t\t\tselectedItems.length\n\t\t\t )\n\t\t\t: sprintf(\n\t\t\t\t\t/* translators: %d: number of items. */\n\t\t\t\t\t_n( '%d Item', '%d Items', data.length ),\n\t\t\t\t\tdata.length\n\t\t\t );\n\treturn (\n\t\t<HStack\n\t\t\texpanded={ false }\n\t\t\tclassName=\"dataviews-bulk-actions-footer__container\"\n\t\t\tspacing={ 3 }\n\t\t>\n\t\t\t<BulkSelectionCheckbox\n\t\t\t\tselection={ selection }\n\t\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\t\tdata={ data }\n\t\t\t\tactions={ actions }\n\t\t\t\tgetItemId={ getItemId }\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\t<HStack\n\t\t\t\tclassName=\"dataviews-bulk-actions-footer__action-buttons\"\n\t\t\t\texpanded={ false }\n\t\t\t\tspacing={ 1 }\n\t\t\t>\n\t\t\t\t{ actionsToShow.map( ( action ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<ActionButton\n\t\t\t\t\t\t\tkey={ action.id }\n\t\t\t\t\t\t\taction={ action }\n\t\t\t\t\t\t\tselectedItems={ selectedItems }\n\t\t\t\t\t\t\tactionInProgress={ actionInProgress }\n\t\t\t\t\t\t\tsetActionInProgress={ setActionInProgress }\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ selectedItems.length > 0 && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tlabel={ __( 'Cancel' ) }\n\t\t\t\t\t\tdisabled={ !! actionInProgress }\n\t\t\t\t\t\taccessibleWhenDisabled={ false }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tonChangeSelection( EMPTY_ARRAY );\n\t\t\t\t\t\t} }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</HStack>\n\t);\n}\n\nfunction FooterContent< Item >( {\n\tselection,\n\tactions,\n\tonChangeSelection,\n\tdata,\n\tgetItemId,\n}: ToolbarContentProps< Item > ) {\n\tconst [ actionInProgress, setActionInProgress ] = useState< string | null >(\n\t\tnull\n\t);\n\tconst footerContentRef = useRef< JSX.Element | null >( null );\n\tconst isMobile = useViewportMatch( 'medium', '<' );\n\n\tconst bulkActions = useMemo(\n\t\t() => actions.filter( ( action ) => action.supportsBulk ),\n\t\t[ actions ]\n\t);\n\tconst selectableItems = useMemo( () => {\n\t\treturn data.filter( ( item ) => {\n\t\t\treturn bulkActions.some(\n\t\t\t\t( action ) => ! action.isEligible || action.isEligible( item )\n\t\t\t);\n\t\t} );\n\t}, [ data, bulkActions ] );\n\n\tconst selectedItems = useMemo( () => {\n\t\treturn data.filter(\n\t\t\t( item ) =>\n\t\t\t\tselection.includes( getItemId( item ) ) &&\n\t\t\t\tselectableItems.includes( item )\n\t\t);\n\t}, [ selection, data, getItemId, selectableItems ] );\n\n\tconst actionsToShow = useMemo(\n\t\t() =>\n\t\t\tactions.filter( ( action ) => {\n\t\t\t\treturn (\n\t\t\t\t\taction.supportsBulk &&\n\t\t\t\t\t( ! isMobile || action.icon ) &&\n\t\t\t\t\tselectedItems.some(\n\t\t\t\t\t\t( item ) =>\n\t\t\t\t\t\t\t! action.isEligible || action.isEligible( item )\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t} ),\n\t\t[ actions, selectedItems, isMobile ]\n\t);\n\tif ( ! actionInProgress ) {\n\t\tif ( footerContentRef.current ) {\n\t\t\tfooterContentRef.current = null;\n\t\t}\n\t\treturn renderFooterContent(\n\t\t\tdata,\n\t\t\tactions,\n\t\t\tgetItemId,\n\t\t\tselection,\n\t\t\tactionsToShow,\n\t\t\tselectedItems,\n\t\t\tactionInProgress,\n\t\t\tsetActionInProgress,\n\t\t\tonChangeSelection\n\t\t);\n\t} else if ( ! footerContentRef.current ) {\n\t\tfooterContentRef.current = renderFooterContent(\n\t\t\tdata,\n\t\t\tactions,\n\t\t\tgetItemId,\n\t\t\tselection,\n\t\t\tactionsToShow,\n\t\t\tselectedItems,\n\t\t\tactionInProgress,\n\t\t\tsetActionInProgress,\n\t\t\tonChangeSelection\n\t\t);\n\t}\n\treturn footerContentRef.current;\n}\n\nexport function BulkActionsFooter() {\n\tconst {\n\t\tdata,\n\t\tselection,\n\t\tactions = EMPTY_ARRAY,\n\t\tonChangeSelection,\n\t\tgetItemId,\n\t} = useContext( DataViewsContext );\n\treturn (\n\t\t<FooterContent\n\t\t\tselection={ selection }\n\t\t\tonChangeSelection={ onChangeSelection }\n\t\t\tdata={ data }\n\t\t\tactions={ actions }\n\t\t\tgetItemId={ getItemId }\n\t\t/>\n\t);\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
|
|
4
|
+
Button
|
|
5
|
+
} from "@wordpress/components";
|
|
3
6
|
import { useCallback, useState } from "@wordpress/element";
|
|
4
7
|
import { __ } from "@wordpress/i18n";
|
|
5
8
|
import { seen, unseen } from "@wordpress/icons";
|
|
@@ -25,16 +28,15 @@ function Password({
|
|
|
25
28
|
hideLabelFromVision,
|
|
26
29
|
validity,
|
|
27
30
|
type: isVisible ? "text" : "password",
|
|
28
|
-
suffix: /* @__PURE__ */ jsx(
|
|
31
|
+
suffix: /* @__PURE__ */ jsx(InputControlSuffixWrapper, { variant: "control", children: /* @__PURE__ */ jsx(
|
|
29
32
|
Button,
|
|
30
33
|
{
|
|
31
34
|
icon: isVisible ? unseen : seen,
|
|
32
35
|
onClick: toggleVisibility,
|
|
33
36
|
size: "small",
|
|
34
|
-
|
|
35
|
-
"aria-label": isVisible ? __("Hide password") : __("Show password")
|
|
37
|
+
label: isVisible ? __("Hide password") : __("Show password")
|
|
36
38
|
}
|
|
37
|
-
)
|
|
39
|
+
) })
|
|
38
40
|
}
|
|
39
41
|
}
|
|
40
42
|
);
|