@wordpress/dataviews 4.1.0 → 4.3.0

package/build/normalize-fields.js.map

@@ -1 +1 @@
-{"version":3,"names":["_fieldTypes","_interopRequireDefault","require","normalizeFields","fields","map","field","_field$sort","_field$isValid","fieldTypeDefinition","getFieldTypeDefinition","type","getValue","item","id","sort","a","b","direction","isValid","context","Edit","renderFromElements","value","label","elements","find","element","render"],"sources":["@wordpress/dataviews/src/normalize-fields.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport getFieldTypeDefinition from './field-types';\nimport type { Field, NormalizedField } from './types';\n\n/**\n * Apply default values and normalize the fields config.\n *\n * @param fields Fields config.\n * @return Normalized fields config.\n */\nexport function normalizeFields< Item >(\n\tfields: Field< Item >[]\n): NormalizedField< Item >[] {\n\treturn fields.map( ( field ) => {\n\t\tconst fieldTypeDefinition = getFieldTypeDefinition( field.type );\n\n\t\tconst getValue =\n\t\t\tfield.getValue ||\n\t\t\t( ( { item }: { item: Item } ) => item[ field.id as keyof Item ] );\n\n\t\tconst sort =\n\t\t\tfield.sort ??\n\t\t\tfunction sort( a, b, direction ) {\n\t\t\t\treturn fieldTypeDefinition.sort(\n\t\t\t\t\tgetValue( { item: a } ),\n\t\t\t\t\tgetValue( { item: b } ),\n\t\t\t\t\tdirection\n\t\t\t\t);\n\t\t\t};\n\n\t\tconst isValid =\n\t\t\tfield.isValid ??\n\t\t\tfunction isValid( item, context ) {\n\t\t\t\treturn fieldTypeDefinition.isValid(\n\t\t\t\t\tgetValue( { item } ),\n\t\t\t\t\tcontext\n\t\t\t\t);\n\t\t\t};\n\n\t\tconst Edit = field.Edit || fieldTypeDefinition.Edit;\n\n\t\tconst renderFromElements = ( { item }: { item: Item } ) => {\n\t\t\tconst value = getValue( { item } );\n\t\t\tconst label = field?.elements?.find( ( element ) => {\n\t\t\t\t// Intentionally using == here to allow for type coercion.\n\t\t\t\t// eslint-disable-next-line eqeqeq\n\t\t\t\treturn element.value == value;\n\t\t\t} )?.label;\n\n\t\t\treturn label || value;\n\t\t};\n\n\t\tconst render =\n\t\t\tfield.render || ( field.elements ? renderFromElements : getValue );\n\n\t\treturn {\n\t\t\t...field,\n\t\t\tlabel: field.label || field.id,\n\t\t\tgetValue,\n\t\t\trender,\n\t\t\tsort,\n\t\t\tisValid,\n\t\t\tEdit,\n\t\t};\n\t} );\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAHA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,eAAeA,CAC9BC,MAAuB,EACK;EAC5B,OAAOA,MAAM,CAACC,GAAG,CAAIC,KAAK,IAAM;IAAA,IAAAC,WAAA,EAAAC,cAAA;IAC/B,MAAMC,mBAAmB,GAAG,IAAAC,mBAAsB,EAAEJ,KAAK,CAACK,IAAK,CAAC;IAEhE,MAAMC,QAAQ,GACbN,KAAK,CAACM,QAAQ,KACZ,CAAE;MAAEC;IAAqB,CAAC,KAAMA,IAAI,CAAEP,KAAK,CAACQ,EAAE,CAAgB,CAAE;IAEnE,MAAMC,IAAI,IAAAR,WAAA,GACTD,KAAK,CAACS,IAAI,cAAAR,WAAA,cAAAA,WAAA,GACV,SAASQ,IAAIA,CAAEC,CAAC,EAAEC,CAAC,EAAEC,SAAS,EAAG;MAChC,OAAOT,mBAAmB,CAACM,IAAI,CAC9BH,QAAQ,CAAE;QAAEC,IAAI,EAAEG;MAAE,CAAE,CAAC,EACvBJ,QAAQ,CAAE;QAAEC,IAAI,EAAEI;MAAE,CAAE,CAAC,EACvBC,SACD,CAAC;IACF,CAAC;IAEF,MAAMC,OAAO,IAAAX,cAAA,GACZF,KAAK,CAACa,OAAO,cAAAX,cAAA,cAAAA,cAAA,GACb,SAASW,OAAOA,CAAEN,IAAI,EAAEO,OAAO,EAAG;MACjC,OAAOX,mBAAmB,CAACU,OAAO,CACjCP,QAAQ,CAAE;QAAEC;MAAK,CAAE,CAAC,EACpBO,OACD,CAAC;IACF,CAAC;IAEF,MAAMC,IAAI,GAAGf,KAAK,CAACe,IAAI,IAAIZ,mBAAmB,CAACY,IAAI;IAEnD,MAAMC,kBAAkB,GAAGA,CAAE;MAAET;IAAqB,CAAC,KAAM;MAC1D,MAAMU,KAAK,GAAGX,QAAQ,CAAE;QAAEC;MAAK,CAAE,CAAC;MAClC,MAAMW,KAAK,GAAGlB,KAAK,EAAEmB,QAAQ,EAAEC,IAAI,CAAIC,OAAO,IAAM;QACnD;QACA;QACA,OAAOA,OAAO,CAACJ,KAAK,IAAIA,KAAK;MAC9B,CAAE,CAAC,EAAEC,KAAK;MAEV,OAAOA,KAAK,IAAID,KAAK;IACtB,CAAC;IAED,MAAMK,MAAM,GACXtB,KAAK,CAACsB,MAAM,KAAMtB,KAAK,CAACmB,QAAQ,GAAGH,kBAAkB,GAAGV,QAAQ,CAAE;IAEnE,OAAO;MACN,GAAGN,KAAK;MACRkB,KAAK,EAAElB,KAAK,CAACkB,KAAK,IAAIlB,KAAK,CAACQ,EAAE;MAC9BF,QAAQ;MACRgB,MAAM;MACNb,IAAI;MACJI,OAAO;MACPE;IACD,CAAC;EACF,CAAE,CAAC;AACJ","ignoreList":[]}
+{"version":3,"names":["_fieldTypes","_interopRequireDefault","require","_dataformControls","normalizeFields","fields","map","field","_field$sort","_field$isValid","_field$enableHiding","_field$enableSorting","fieldTypeDefinition","getFieldTypeDefinition","type","getValue","item","id","sort","a","b","direction","isValid","context","Edit","getControl","renderFromElements","value","elements","find","element","label","render","header","enableHiding","enableSorting"],"sources":["@wordpress/dataviews/src/normalize-fields.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport getFieldTypeDefinition from './field-types';\nimport type { Field, NormalizedField } from './types';\nimport { getControl } from './dataform-controls';\n\n/**\n * Apply default values and normalize the fields config.\n *\n * @param fields Fields config.\n * @return Normalized fields config.\n */\nexport function normalizeFields< Item >(\n\tfields: Field< Item >[]\n): NormalizedField< Item >[] {\n\treturn fields.map( ( field ) => {\n\t\tconst fieldTypeDefinition = getFieldTypeDefinition( field.type );\n\n\t\tconst getValue =\n\t\t\tfield.getValue || ( ( { item } ) => ( item as any )[ field.id ] );\n\n\t\tconst sort =\n\t\t\tfield.sort ??\n\t\t\tfunction sort( a, b, direction ) {\n\t\t\t\treturn fieldTypeDefinition.sort(\n\t\t\t\t\tgetValue( { item: a } ),\n\t\t\t\t\tgetValue( { item: b } ),\n\t\t\t\t\tdirection\n\t\t\t\t);\n\t\t\t};\n\n\t\tconst isValid =\n\t\t\tfield.isValid ??\n\t\t\tfunction isValid( item, context ) {\n\t\t\t\treturn fieldTypeDefinition.isValid(\n\t\t\t\t\tgetValue( { item } ),\n\t\t\t\t\tcontext\n\t\t\t\t);\n\t\t\t};\n\n\t\tconst Edit = getControl( field, fieldTypeDefinition );\n\n\t\tconst renderFromElements = ( { item }: { item: Item } ) => {\n\t\t\tconst value = getValue( { item } );\n\t\t\treturn (\n\t\t\t\tfield?.elements?.find( ( element ) => element.value === value )\n\t\t\t\t\t?.label || getValue( { item } )\n\t\t\t);\n\t\t};\n\n\t\tconst render =\n\t\t\tfield.render || ( field.elements ? renderFromElements : getValue );\n\n\t\treturn {\n\t\t\t...field,\n\t\t\tlabel: field.label || field.id,\n\t\t\theader: field.header || field.label || field.id,\n\t\t\tgetValue,\n\t\t\trender,\n\t\t\tsort,\n\t\t\tisValid,\n\t\t\tEdit,\n\t\t\tenableHiding: field.enableHiding ?? true,\n\t\t\tenableSorting: field.enableSorting ?? true,\n\t\t};\n\t} );\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAD,OAAA;AALA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA;AACA;AACO,SAASE,eAAeA,CAC9BC,MAAuB,EACK;EAC5B,OAAOA,MAAM,CAACC,GAAG,CAAIC,KAAK,IAAM;IAAA,IAAAC,WAAA,EAAAC,cAAA,EAAAC,mBAAA,EAAAC,oBAAA;IAC/B,MAAMC,mBAAmB,GAAG,IAAAC,mBAAsB,EAAEN,KAAK,CAACO,IAAK,CAAC;IAEhE,MAAMC,QAAQ,GACbR,KAAK,CAACQ,QAAQ,KAAM,CAAE;MAAEC;IAAK,CAAC,KAAQA,IAAI,CAAWT,KAAK,CAACU,EAAE,CAAE,CAAE;IAElE,MAAMC,IAAI,IAAAV,WAAA,GACTD,KAAK,CAACW,IAAI,cAAAV,WAAA,cAAAA,WAAA,GACV,SAASU,IAAIA,CAAEC,CAAC,EAAEC,CAAC,EAAEC,SAAS,EAAG;MAChC,OAAOT,mBAAmB,CAACM,IAAI,CAC9BH,QAAQ,CAAE;QAAEC,IAAI,EAAEG;MAAE,CAAE,CAAC,EACvBJ,QAAQ,CAAE;QAAEC,IAAI,EAAEI;MAAE,CAAE,CAAC,EACvBC,SACD,CAAC;IACF,CAAC;IAEF,MAAMC,OAAO,IAAAb,cAAA,GACZF,KAAK,CAACe,OAAO,cAAAb,cAAA,cAAAA,cAAA,GACb,SAASa,OAAOA,CAAEN,IAAI,EAAEO,OAAO,EAAG;MACjC,OAAOX,mBAAmB,CAACU,OAAO,CACjCP,QAAQ,CAAE;QAAEC;MAAK,CAAE,CAAC,EACpBO,OACD,CAAC;IACF,CAAC;IAEF,MAAMC,IAAI,GAAG,IAAAC,4BAAU,EAAElB,KAAK,EAAEK,mBAAoB,CAAC;IAErD,MAAMc,kBAAkB,GAAGA,CAAE;MAAEV;IAAqB,CAAC,KAAM;MAC1D,MAAMW,KAAK,GAAGZ,QAAQ,CAAE;QAAEC;MAAK,CAAE,CAAC;MAClC,OACCT,KAAK,EAAEqB,QAAQ,EAAEC,IAAI,CAAIC,OAAO,IAAMA,OAAO,CAACH,KAAK,KAAKA,KAAM,CAAC,EAC5DI,KAAK,IAAIhB,QAAQ,CAAE;QAAEC;MAAK,CAAE,CAAC;IAElC,CAAC;IAED,MAAMgB,MAAM,GACXzB,KAAK,CAACyB,MAAM,KAAMzB,KAAK,CAACqB,QAAQ,GAAGF,kBAAkB,GAAGX,QAAQ,CAAE;IAEnE,OAAO;MACN,GAAGR,KAAK;MACRwB,KAAK,EAAExB,KAAK,CAACwB,KAAK,IAAIxB,KAAK,CAACU,EAAE;MAC9BgB,MAAM,EAAE1B,KAAK,CAAC0B,MAAM,IAAI1B,KAAK,CAACwB,KAAK,IAAIxB,KAAK,CAACU,EAAE;MAC/CF,QAAQ;MACRiB,MAAM;MACNd,IAAI;MACJI,OAAO;MACPE,IAAI;MACJU,YAAY,GAAAxB,mBAAA,GAAEH,KAAK,CAAC2B,YAAY,cAAAxB,mBAAA,cAAAA,mBAAA,GAAI,IAAI;MACxCyB,aAAa,GAAAxB,oBAAA,GAAEJ,KAAK,CAAC4B,aAAa,cAAAxB,oBAAA,cAAAA,oBAAA,GAAI;IACvC,CAAC;EACF,CAAE,CAAC;AACJ","ignoreList":[]}

package/build/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/dataviews/src/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type {\n\tReactElement,\n\tComponentType,\n\tDispatch,\n\tSetStateAction,\n} from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { SetSelection } from './private-types';\n\nexport type SortDirection = 'asc' | 'desc';\n\n/**\n * Generic option type.\n */\nexport interface Option< Value extends any = any > {\n\tvalue: Value;\n\tlabel: string;\n\tdescription?: string;\n}\n\ninterface FilterByConfig {\n\t/**\n\t * The list of operators supported by the field.\n\t */\n\toperators?: Operator[];\n\n\t/**\n\t * Whether it is a primary filter.\n\t *\n\t * A primary filter is always visible and is not listed in the \"Add filter\" component,\n\t * except for the list layout where it behaves like a secondary filter.\n\t */\n\tisPrimary?: boolean;\n}\n\nexport type Operator =\n\t| 'is'\n\t| 'isNot'\n\t| 'isAny'\n\t| 'isNone'\n\t| 'isAll'\n\t| 'isNotAll';\n\nexport type ItemRecord = Record< string, unknown >;\n\nexport type FieldType = 'text' | 'integer';\n\nexport type ValidationContext = {\n\telements?: Option[];\n};\n\n/**\n * A dataview field for a specific property of a data type.\n */\nexport type Field< Item > = {\n\t/**\n\t * Type of the fields.\n\t */\n\ttype?: FieldType;\n\n\t/**\n\t * The unique identifier of the field.\n\t */\n\tid: string;\n\n\t/**\n\t * The label of the field. Defaults to the id.\n\t */\n\tlabel?: string;\n\n\t/**\n\t * A description of the field.\n\t */\n\tdescription?: string;\n\n\t/**\n\t * Placeholder for the field.\n\t */\n\tplaceholder?: string;\n\n\t/**\n\t * Callback used to render the field. Defaults to `field.getValue`.\n\t */\n\trender?: ComponentType< { item: Item } >;\n\n\t/**\n\t * Callback used to render an edit control for the field.\n\t */\n\tEdit?: ComponentType< DataFormControlProps< Item > >;\n\n\t/**\n\t * Callback used to sort the field.\n\t */\n\tsort?: ( a: Item, b: Item, direction: SortDirection ) => number;\n\n\t/**\n\t * Callback used to validate the field.\n\t */\n\tisValid?: ( item: Item, context?: ValidationContext ) => boolean;\n\n\t/**\n\t * Whether the field is sortable.\n\t */\n\tenableSorting?: boolean;\n\n\t/**\n\t * Whether the field is searchable.\n\t */\n\tenableGlobalSearch?: boolean;\n\n\t/**\n\t * Whether the field is filterable.\n\t */\n\tenableHiding?: boolean;\n\n\t/**\n\t * The list of options to pick from when using the field as a filter.\n\t */\n\telements?: Option[];\n\n\t/**\n\t * Filter config for the field.\n\t */\n\tfilterBy?: FilterByConfig | undefined;\n} & ( Item extends ItemRecord\n\t? {\n\t\t\t/**\n\t\t\t * Callback used to retrieve the value of the field from the item.\n\t\t\t * Defaults to `item[ field.id ]`.\n\t\t\t */\n\t\t\tgetValue?: ( args: { item: Item } ) => any;\n\t  }\n\t: {\n\t\t\t/**\n\t\t\t * Callback used to retrieve the value of the field from the item.\n\t\t\t * Defaults to `item[ field.id ]`.\n\t\t\t */\n\t\t\tgetValue: ( args: { item: Item } ) => any;\n\t  } );\n\nexport type NormalizedField< Item > = Field< Item > & {\n\tlabel: string;\n\tgetValue: ( args: { item: Item } ) => any;\n\trender: ComponentType< { item: Item } >;\n\tEdit: ComponentType< DataFormControlProps< Item > >;\n\tsort: ( a: Item, b: Item, direction: SortDirection ) => number;\n\tisValid: ( item: Item, context?: ValidationContext ) => boolean;\n};\n\n/**\n * A collection of dataview fields for a data type.\n */\nexport type Fields< Item > = Field< Item >[];\n\nexport type Data< Item > = Item[];\n\n/**\n * The form configuration.\n */\nexport type Form = {\n\ttype?: 'regular' | 'panel';\n\tfields?: string[];\n};\n\nexport type DataFormControlProps< Item > = {\n\tdata: Item;\n\tfield: NormalizedField< Item >;\n\tonChange: Dispatch< SetStateAction< Item > >;\n\thideLabelFromVision?: boolean;\n};\n\n/**\n * The filters applied to the dataset.\n */\nexport interface Filter {\n\t/**\n\t * The field to filter by.\n\t */\n\tfield: string;\n\n\t/**\n\t * The operator to use.\n\t */\n\toperator: Operator;\n\n\t/**\n\t * The value to filter by.\n\t */\n\tvalue: any;\n}\n\nexport interface NormalizedFilter {\n\t/**\n\t * The field to filter by.\n\t */\n\tfield: string;\n\n\t/**\n\t * The field name.\n\t */\n\tname: string;\n\n\t/**\n\t * The list of options to pick from when using the field as a filter.\n\t */\n\telements: Option[];\n\n\t/**\n\t * Is a single selection filter.\n\t */\n\tsingleSelection: boolean;\n\n\t/**\n\t * The list of operators supported by the field.\n\t */\n\toperators: Operator[];\n\n\t/**\n\t * Whether the filter is visible.\n\t */\n\tisVisible: boolean;\n\n\t/**\n\t * Whether it is a primary filter.\n\t */\n\tisPrimary: boolean;\n}\n\ninterface ViewBase {\n\t/**\n\t * The layout of the view.\n\t */\n\ttype: string;\n\n\t/**\n\t * The global search term.\n\t */\n\tsearch?: string;\n\n\t/**\n\t * The filters to apply.\n\t */\n\tfilters?: Filter[];\n\n\t/**\n\t * The sorting configuration.\n\t */\n\tsort?: {\n\t\t/**\n\t\t * The field to sort by.\n\t\t */\n\t\tfield: string;\n\n\t\t/**\n\t\t * The direction to sort by.\n\t\t */\n\t\tdirection: SortDirection;\n\t};\n\n\t/**\n\t * The active page\n\t */\n\tpage?: number;\n\n\t/**\n\t * The number of items per page\n\t */\n\tperPage?: number;\n\n\t/**\n\t * The fields to render\n\t */\n\tfields?: string[];\n}\n\nexport interface CombinedField {\n\tid: string;\n\n\tlabel: string;\n\n\t/**\n\t * The fields to use as columns.\n\t */\n\tchildren: string[];\n\n\t/**\n\t * The direction of the stack.\n\t */\n\tdirection: 'horizontal' | 'vertical';\n}\n\nexport interface ColumnStyle {\n\t/**\n\t * The width of the field column.\n\t */\n\twidth?: string | number;\n\n\t/**\n\t * The minimum width of the field column.\n\t */\n\tmaxWidth?: string | number;\n\n\t/**\n\t * The maximum width of the field column.\n\t */\n\tminWidth?: string | number;\n}\n\nexport interface ViewTable extends ViewBase {\n\ttype: 'table';\n\n\tlayout?: {\n\t\t/**\n\t\t * The field to use as the primary field.\n\t\t */\n\t\tprimaryField?: string;\n\n\t\t/**\n\t\t * The fields to use as columns.\n\t\t */\n\t\tcombinedFields?: CombinedField[];\n\n\t\t/**\n\t\t * The styles for the columns.\n\t\t */\n\t\tstyles?: Record< string, ColumnStyle >;\n\t};\n}\n\nexport interface ViewList extends ViewBase {\n\ttype: 'list';\n\n\tlayout?: {\n\t\t/**\n\t\t * The field to use as the primary field.\n\t\t */\n\t\tprimaryField?: string;\n\n\t\t/**\n\t\t * The field to use as the media field.\n\t\t */\n\t\tmediaField?: string;\n\t};\n}\n\nexport interface ViewGrid extends ViewBase {\n\ttype: 'grid';\n\n\tlayout?: {\n\t\t/**\n\t\t * The field to use as the primary field.\n\t\t */\n\t\tprimaryField?: string;\n\n\t\t/**\n\t\t * The field to use as the media field.\n\t\t */\n\t\tmediaField?: string;\n\n\t\t/**\n\t\t * The fields to use as columns.\n\t\t */\n\t\tcolumnFields?: string[];\n\n\t\t/**\n\t\t * The fields to use as badge fields.\n\t\t */\n\t\tbadgeFields?: string[];\n\t};\n}\n\nexport type View = ViewList | ViewGrid | ViewTable;\n\ninterface ActionBase< Item > {\n\t/**\n\t * The unique identifier of the action.\n\t */\n\tid: string;\n\n\t/**\n\t * The label of the action.\n\t * In case we want to adjust the label based on the selected items,\n\t * a function can be provided.\n\t */\n\tlabel: string | ( ( items: Item[] ) => string );\n\n\t/**\n\t * The icon of the action. (Either a string or an SVG element)\n\t * This should be IconType from the components package\n\t * but that import is breaking typescript build for the moment.\n\t */\n\ticon?: any;\n\n\t/**\n\t * Whether the action is disabled.\n\t */\n\tdisabled?: boolean;\n\n\t/**\n\t * Whether the action is destructive.\n\t */\n\tisDestructive?: boolean;\n\n\t/**\n\t * Whether the action is a primary action.\n\t */\n\tisPrimary?: boolean;\n\n\t/**\n\t * Whether the item passed as an argument supports the current action.\n\t */\n\tisEligible?: ( item: Item ) => boolean;\n\n\t/**\n\t * Whether the action can be used as a bulk action.\n\t */\n\tsupportsBulk?: boolean;\n}\n\nexport interface ActionModal< Item > extends ActionBase< Item > {\n\t/**\n\t * Modal to render when the action is triggered.\n\t */\n\tRenderModal: ( {\n\t\titems,\n\t\tcloseModal,\n\t\tonActionPerformed,\n\t}: {\n\t\titems: Item[];\n\t\tcloseModal?: () => void;\n\t\tonActionPerformed?: ( items: Item[] ) => void;\n\t} ) => ReactElement;\n\n\t/**\n\t * Whether to hide the modal header.\n\t */\n\thideModalHeader?: boolean;\n\n\t/**\n\t * The header of the modal.\n\t */\n\tmodalHeader?: string;\n}\n\nexport interface ActionButton< Item > extends ActionBase< Item > {\n\t/**\n\t * The callback to execute when the action is triggered.\n\t */\n\tcallback: (\n\t\titems: Item[],\n\t\tcontext: {\n\t\t\tregistry: any;\n\t\t\tonActionPerformed?: ( items: Item[] ) => void;\n\t\t}\n\t) => void;\n}\n\nexport type Action< Item > = ActionModal< Item > | ActionButton< Item >;\n\nexport interface ViewBaseProps< Item > {\n\tactions: Action< Item >[];\n\tdata: Item[];\n\tfields: NormalizedField< Item >[];\n\tgetItemId: ( item: Item ) => string;\n\tisLoading?: boolean;\n\tonChangeView: ( view: View ) => void;\n\tonChangeSelection: SetSelection;\n\tselection: string[];\n\tsetOpenedFilter: ( fieldId: string ) => void;\n\tview: View;\n\tdensity: number;\n}\n\nexport interface ViewTableProps< Item > extends ViewBaseProps< Item > {\n\tview: ViewTable;\n}\n\nexport interface ViewListProps< Item > extends ViewBaseProps< Item > {\n\tview: ViewList;\n}\n\nexport interface ViewGridProps< Item > extends ViewBaseProps< Item > {\n\tview: ViewGrid;\n}\n\nexport type ViewProps< Item > =\n\t| ViewTableProps< Item >\n\t| ViewGridProps< Item >\n\t| ViewListProps< Item >;\n\nexport interface SupportedLayouts {\n\tlist?: Omit< ViewList, 'type' >;\n\tgrid?: Omit< ViewGrid, 'type' >;\n\ttable?: Omit< ViewTable, 'type' >;\n}\n\nexport interface DataFormProps< Item > {\n\tdata: Item;\n\tfields: Field< Item >[];\n\tform: Form;\n\tonChange: Dispatch< SetStateAction< Item > >;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["@wordpress/dataviews/src/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactElement, ComponentType } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { SetSelection } from './private-types';\n\nexport type SortDirection = 'asc' | 'desc';\n\n/**\n * Generic option type.\n */\nexport interface Option< Value extends any = any > {\n\tvalue: Value;\n\tlabel: string;\n\tdescription?: string;\n}\n\ninterface FilterByConfig {\n\t/**\n\t * The list of operators supported by the field.\n\t */\n\toperators?: Operator[];\n\n\t/**\n\t * Whether it is a primary filter.\n\t *\n\t * A primary filter is always visible and is not listed in the \"Add filter\" component,\n\t * except for the list layout where it behaves like a secondary filter.\n\t */\n\tisPrimary?: boolean;\n}\n\nexport type Operator =\n\t| 'is'\n\t| 'isNot'\n\t| 'isAny'\n\t| 'isNone'\n\t| 'isAll'\n\t| 'isNotAll';\n\nexport type FieldType = 'text' | 'integer' | 'datetime';\n\nexport type ValidationContext = {\n\telements?: Option[];\n};\n\n/**\n * An abstract interface for Field based on the field type.\n */\nexport type FieldTypeDefinition< Item > = {\n\t/**\n\t * Callback used to sort the field.\n\t */\n\tsort: ( a: Item, b: Item, direction: SortDirection ) => number;\n\n\t/**\n\t * Callback used to validate the field.\n\t */\n\tisValid: ( item: Item, context?: ValidationContext ) => boolean;\n\n\t/**\n\t * Callback used to render an edit control for the field or control name.\n\t */\n\tEdit: ComponentType< DataFormControlProps< Item > > | string;\n};\n\n/**\n * A dataview field for a specific property of a data type.\n */\nexport type Field< Item > = {\n\t/**\n\t * Type of the fields.\n\t */\n\ttype?: FieldType;\n\n\t/**\n\t * The unique identifier of the field.\n\t */\n\tid: string;\n\n\t/**\n\t * The label of the field. Defaults to the id.\n\t */\n\tlabel?: string;\n\n\t/**\n\t * The header of the field. Defaults to the label.\n\t * It allows the usage of a React Element to render the field labels.\n\t */\n\theader?: string | ReactElement;\n\n\t/**\n\t * A description of the field.\n\t */\n\tdescription?: string;\n\n\t/**\n\t * Placeholder for the field.\n\t */\n\tplaceholder?: string;\n\n\t/**\n\t * Callback used to render the field. Defaults to `field.getValue`.\n\t */\n\trender?: ComponentType< { item: Item } >;\n\n\t/**\n\t * Callback used to render an edit control for the field.\n\t */\n\tEdit?: ComponentType< DataFormControlProps< Item > > | string;\n\n\t/**\n\t * Callback used to sort the field.\n\t */\n\tsort?: ( a: Item, b: Item, direction: SortDirection ) => number;\n\n\t/**\n\t * Callback used to validate the field.\n\t */\n\tisValid?: ( item: Item, context?: ValidationContext ) => boolean;\n\n\t/**\n\t * Whether the field is sortable.\n\t */\n\tenableSorting?: boolean;\n\n\t/**\n\t * Whether the field is searchable.\n\t */\n\tenableGlobalSearch?: boolean;\n\n\t/**\n\t * Whether the field is filterable.\n\t */\n\tenableHiding?: boolean;\n\n\t/**\n\t * The list of options to pick from when using the field as a filter.\n\t */\n\telements?: Option[];\n\n\t/**\n\t * Filter config for the field.\n\t */\n\tfilterBy?: FilterByConfig | undefined;\n\n\t/**\n\t * Callback used to retrieve the value of the field from the item.\n\t * Defaults to `item[ field.id ]`.\n\t */\n\tgetValue?: ( args: { item: Item } ) => any;\n};\n\nexport type NormalizedField< Item > = Field< Item > & {\n\tlabel: string;\n\theader: string | ReactElement;\n\tgetValue: ( args: { item: Item } ) => any;\n\trender: ComponentType< { item: Item } >;\n\tEdit: ComponentType< DataFormControlProps< Item > >;\n\tsort: ( a: Item, b: Item, direction: SortDirection ) => number;\n\tisValid: ( item: Item, context?: ValidationContext ) => boolean;\n\tenableHiding: boolean;\n\tenableSorting: boolean;\n};\n\n/**\n * A collection of dataview fields for a data type.\n */\nexport type Fields< Item > = Field< Item >[];\n\nexport type Data< Item > = Item[];\n\n/**\n * The form configuration.\n */\nexport type Form = {\n\ttype?: 'regular' | 'panel';\n\tfields?: string[];\n};\n\nexport type DataFormControlProps< Item > = {\n\tdata: Item;\n\tfield: NormalizedField< Item >;\n\tonChange: ( value: Record< string, any > ) => void;\n\thideLabelFromVision?: boolean;\n};\n\n/**\n * The filters applied to the dataset.\n */\nexport interface Filter {\n\t/**\n\t * The field to filter by.\n\t */\n\tfield: string;\n\n\t/**\n\t * The operator to use.\n\t */\n\toperator: Operator;\n\n\t/**\n\t * The value to filter by.\n\t */\n\tvalue: any;\n}\n\nexport interface NormalizedFilter {\n\t/**\n\t * The field to filter by.\n\t */\n\tfield: string;\n\n\t/**\n\t * The field name.\n\t */\n\tname: string;\n\n\t/**\n\t * The list of options to pick from when using the field as a filter.\n\t */\n\telements: Option[];\n\n\t/**\n\t * Is a single selection filter.\n\t */\n\tsingleSelection: boolean;\n\n\t/**\n\t * The list of operators supported by the field.\n\t */\n\toperators: Operator[];\n\n\t/**\n\t * Whether the filter is visible.\n\t */\n\tisVisible: boolean;\n\n\t/**\n\t * Whether it is a primary filter.\n\t */\n\tisPrimary: boolean;\n}\n\ninterface ViewBase {\n\t/**\n\t * The layout of the view.\n\t */\n\ttype: string;\n\n\t/**\n\t * The global search term.\n\t */\n\tsearch?: string;\n\n\t/**\n\t * The filters to apply.\n\t */\n\tfilters?: Filter[];\n\n\t/**\n\t * The sorting configuration.\n\t */\n\tsort?: {\n\t\t/**\n\t\t * The field to sort by.\n\t\t */\n\t\tfield: string;\n\n\t\t/**\n\t\t * The direction to sort by.\n\t\t */\n\t\tdirection: SortDirection;\n\t};\n\n\t/**\n\t * The active page\n\t */\n\tpage?: number;\n\n\t/**\n\t * The number of items per page\n\t */\n\tperPage?: number;\n\n\t/**\n\t * The fields to render\n\t */\n\tfields?: string[];\n}\n\nexport interface CombinedField {\n\tid: string;\n\n\tlabel: string;\n\n\theader?: string | ReactElement;\n\n\t/**\n\t * The fields to use as columns.\n\t */\n\tchildren: string[];\n\n\t/**\n\t * The direction of the stack.\n\t */\n\tdirection: 'horizontal' | 'vertical';\n}\n\nexport interface ColumnStyle {\n\t/**\n\t * The width of the field column.\n\t */\n\twidth?: string | number;\n\n\t/**\n\t * The minimum width of the field column.\n\t */\n\tmaxWidth?: string | number;\n\n\t/**\n\t * The maximum width of the field column.\n\t */\n\tminWidth?: string | number;\n}\n\nexport interface ViewTable extends ViewBase {\n\ttype: 'table';\n\n\tlayout?: {\n\t\t/**\n\t\t * The field to use as the primary field.\n\t\t */\n\t\tprimaryField?: string;\n\n\t\t/**\n\t\t * The fields to use as columns.\n\t\t */\n\t\tcombinedFields?: CombinedField[];\n\n\t\t/**\n\t\t * The styles for the columns.\n\t\t */\n\t\tstyles?: Record< string, ColumnStyle >;\n\t};\n}\n\nexport interface ViewList extends ViewBase {\n\ttype: 'list';\n\n\tlayout?: {\n\t\t/**\n\t\t * The field to use as the primary field.\n\t\t */\n\t\tprimaryField?: string;\n\n\t\t/**\n\t\t * The field to use as the media field.\n\t\t */\n\t\tmediaField?: string;\n\t};\n}\n\nexport interface ViewGrid extends ViewBase {\n\ttype: 'grid';\n\n\tlayout?: {\n\t\t/**\n\t\t * The field to use as the primary field.\n\t\t */\n\t\tprimaryField?: string;\n\n\t\t/**\n\t\t * The field to use as the media field.\n\t\t */\n\t\tmediaField?: string;\n\n\t\t/**\n\t\t * The fields to use as columns.\n\t\t */\n\t\tcolumnFields?: string[];\n\n\t\t/**\n\t\t * The fields to use as badge fields.\n\t\t */\n\t\tbadgeFields?: string[];\n\t};\n}\n\nexport type View = ViewList | ViewGrid | ViewTable;\n\ninterface ActionBase< Item > {\n\t/**\n\t * The unique identifier of the action.\n\t */\n\tid: string;\n\n\t/**\n\t * The label of the action.\n\t * In case we want to adjust the label based on the selected items,\n\t * a function can be provided.\n\t */\n\tlabel: string | ( ( items: Item[] ) => string );\n\n\t/**\n\t * The icon of the action. (Either a string or an SVG element)\n\t * This should be IconType from the components package\n\t * but that import is breaking typescript build for the moment.\n\t */\n\ticon?: any;\n\n\t/**\n\t * Whether the action is disabled.\n\t */\n\tdisabled?: boolean;\n\n\t/**\n\t * Whether the action is destructive.\n\t */\n\tisDestructive?: boolean;\n\n\t/**\n\t * Whether the action is a primary action.\n\t */\n\tisPrimary?: boolean;\n\n\t/**\n\t * Whether the item passed as an argument supports the current action.\n\t */\n\tisEligible?: ( item: Item ) => boolean;\n\n\t/**\n\t * Whether the action can be used as a bulk action.\n\t */\n\tsupportsBulk?: boolean;\n\n\t/**\n\t * The context in which the action is visible.\n\t * This is only a \"meta\" information for now.\n\t */\n\tcontext?: 'list' | 'single';\n}\n\nexport interface RenderModalProps< Item > {\n\titems: Item[];\n\tcloseModal?: () => void;\n\tonActionPerformed?: ( items: Item[] ) => void;\n}\n\nexport interface ActionModal< Item > extends ActionBase< Item > {\n\t/**\n\t * Modal to render when the action is triggered.\n\t */\n\tRenderModal: ( {\n\t\titems,\n\t\tcloseModal,\n\t\tonActionPerformed,\n\t}: RenderModalProps< Item > ) => ReactElement;\n\n\t/**\n\t * Whether to hide the modal header.\n\t */\n\thideModalHeader?: boolean;\n\n\t/**\n\t * The header of the modal.\n\t */\n\tmodalHeader?: string;\n}\n\nexport interface ActionButton< Item > extends ActionBase< Item > {\n\t/**\n\t * The callback to execute when the action is triggered.\n\t */\n\tcallback: (\n\t\titems: Item[],\n\t\tcontext: {\n\t\t\tregistry: any;\n\t\t\tonActionPerformed?: ( items: Item[] ) => void;\n\t\t}\n\t) => void;\n}\n\nexport type Action< Item > = ActionModal< Item > | ActionButton< Item >;\n\nexport interface ViewBaseProps< Item > {\n\tactions: Action< Item >[];\n\tdata: Item[];\n\tfields: NormalizedField< Item >[];\n\tgetItemId: ( item: Item ) => string;\n\tisLoading?: boolean;\n\tonChangeView: ( view: View ) => void;\n\tonChangeSelection: SetSelection;\n\tselection: string[];\n\tsetOpenedFilter: ( fieldId: string ) => void;\n\tview: View;\n\tdensity: number;\n}\n\nexport interface ViewTableProps< Item > extends ViewBaseProps< Item > {\n\tview: ViewTable;\n}\n\nexport interface ViewListProps< Item > extends ViewBaseProps< Item > {\n\tview: ViewList;\n}\n\nexport interface ViewGridProps< Item > extends ViewBaseProps< Item > {\n\tview: ViewGrid;\n}\n\nexport type ViewProps< Item > =\n\t| ViewTableProps< Item >\n\t| ViewGridProps< Item >\n\t| ViewListProps< Item >;\n\nexport interface SupportedLayouts {\n\tlist?: Omit< ViewList, 'type' >;\n\tgrid?: Omit< ViewGrid, 'type' >;\n\ttable?: Omit< ViewTable, 'type' >;\n}\n\nexport interface DataFormProps< Item > {\n\tdata: Item;\n\tfields: Field< Item >[];\n\tform: Form;\n\tonChange: ( value: Record< string, any > ) => void;\n}\n"],"mappings":"","ignoreList":[]}

package/build-module/components/dataviews/index.js

@@ -11,17 +11,13 @@ import { useMemo, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { default as DataViewsBulkActions } from '../dataviews-bulk-actions';
-import DataViewsBulkActionsToolbar from '../dataviews-bulk-actions-toolbar';
 import DataViewsContext from '../dataviews-context';
 import { default as DataViewsFilters, useFilters, FilterVisibilityToggle } from '../dataviews-filters';
 import DataViewsLayout from '../dataviews-layout';
-import DataviewsPagination from '../dataviews-pagination';
+import DataViewsFooter from '../dataviews-footer';
 import DataViewsSearch from '../dataviews-search';
 import DataViewsViewConfig from '../dataviews-view-config';
 import { normalizeFields } from '../../normalize-fields';
-import DensityPicker from '../../dataviews-layouts/grid/density-picker';
-import { LAYOUT_GRID } from '../../constants';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const defaultGetItemId = item => item.id;
@@ -43,7 +39,6 @@ export default function DataViews({
 }) {
   const [selectionState, setSelectionState] = useState([]);
   const [density, setDensity] = useState(0);
-  const [isShowingFilter, setIsShowingFilter] = useState(false);
   const isUncontrolled = selectionProperty === undefined || onChangeSelection === undefined;
   const selection = isUncontrolled ? selectionState : selectionProperty;
   const [openedFilter, setOpenedFilter] = useState(null);
@@ -61,6 +56,7 @@ export default function DataViews({
     return selection.filter(id => data.some(item => getItemId(item) === id));
   }, [selection, data, getItemId]);
   const filters = useFilters(_fields, view);
+  const [isShowingFilter, setIsShowingFilter] = useState(() => (filters || []).some(filter => filter.isPrimary));
   return /*#__PURE__*/_jsx(DataViewsContext.Provider, {
     value: {
       view,
@@ -81,12 +77,13 @@ export default function DataViews({
       className: "dataviews-wrapper",
       children: [/*#__PURE__*/_jsxs(HStack, {
         alignment: "top",
-        justify: "start",
+        justify: "space-between",
         className: "dataviews__view-actions",
         spacing: 1,
         children: [/*#__PURE__*/_jsxs(HStack, {
           justify: "start",
-          wrap: true,
+          expanded: false,
+          className: "dataviews__search",
           children: [search && /*#__PURE__*/_jsx(DataViewsSearch, {
             label: searchLabel
           }), /*#__PURE__*/_jsx(FilterVisibilityToggle, {
@@ -97,20 +94,19 @@ export default function DataViews({
             setIsShowingFilter: setIsShowingFilter,
             isShowingFilter: isShowingFilter
           })]
-        }), view.type === LAYOUT_GRID && /*#__PURE__*/_jsx(DensityPicker, {
-          density: density,
-          setDensity: setDensity
-        }), /*#__PURE__*/_jsx(DataViewsBulkActions, {}), /*#__PURE__*/_jsxs(HStack, {
+        }), /*#__PURE__*/_jsxs(HStack, {
           spacing: 1,
           expanded: false,
           style: {
             flexShrink: 0
           },
           children: [/*#__PURE__*/_jsx(DataViewsViewConfig, {
-            defaultLayouts: defaultLayouts
+            defaultLayouts: defaultLayouts,
+            density: density,
+            setDensity: setDensity
           }), header]
         })]
-      }), isShowingFilter && /*#__PURE__*/_jsx(DataViewsFilters, {}), /*#__PURE__*/_jsx(DataViewsLayout, {}), /*#__PURE__*/_jsx(DataviewsPagination, {}), /*#__PURE__*/_jsx(DataViewsBulkActionsToolbar, {})]
+      }), isShowingFilter && /*#__PURE__*/_jsx(DataViewsFilters, {}), /*#__PURE__*/_jsx(DataViewsLayout, {}), /*#__PURE__*/_jsx(DataViewsFooter, {})]
     })
   });
 }

package/build-module/components/dataviews/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["__experimentalHStack","HStack","useMemo","useState","default","DataViewsBulkActions","DataViewsBulkActionsToolbar","DataViewsContext","DataViewsFilters","useFilters","FilterVisibilityToggle","DataViewsLayout","DataviewsPagination","DataViewsSearch","DataViewsViewConfig","normalizeFields","DensityPicker","LAYOUT_GRID","jsx","_jsx","jsxs","_jsxs","defaultGetItemId","item","id","DataViews","view","onChangeView","fields","search","searchLabel","undefined","actions","data","getItemId","isLoading","paginationInfo","defaultLayouts","selection","selectionProperty","onChangeSelection","header","selectionState","setSelectionState","density","setDensity","isShowingFilter","setIsShowingFilter","isUncontrolled","openedFilter","setOpenedFilter","setSelectionWithChange","value","newValue","_fields","_selection","filter","some","filters","Provider","children","className","alignment","justify","spacing","wrap","label","type","expanded","style","flexShrink"],"sources":["@wordpress/dataviews/src/components/dataviews/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __experimentalHStack as HStack } from '@wordpress/components';\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { default as DataViewsBulkActions } from '../dataviews-bulk-actions';\nimport DataViewsBulkActionsToolbar from '../dataviews-bulk-actions-toolbar';\nimport DataViewsContext from '../dataviews-context';\nimport {\n\tdefault as DataViewsFilters,\n\tuseFilters,\n\tFilterVisibilityToggle,\n} from '../dataviews-filters';\nimport DataViewsLayout from '../dataviews-layout';\nimport DataviewsPagination from '../dataviews-pagination';\nimport DataViewsSearch from '../dataviews-search';\nimport DataViewsViewConfig from '../dataviews-view-config';\nimport { normalizeFields } from '../../normalize-fields';\nimport type { Action, Field, View, SupportedLayouts } from '../../types';\nimport type { SelectionOrUpdater } from '../../private-types';\nimport DensityPicker from '../../dataviews-layouts/grid/density-picker';\nimport { LAYOUT_GRID } from '../../constants';\n\ntype ItemWithId = { id: string };\n\ntype DataViewsProps< Item > = {\n\tview: View;\n\tonChangeView: ( view: View ) => void;\n\tfields: Field< Item >[];\n\tsearch?: boolean;\n\tsearchLabel?: string;\n\tactions?: Action< Item >[];\n\tdata: Item[];\n\tisLoading?: boolean;\n\tpaginationInfo: {\n\t\ttotalItems: number;\n\t\ttotalPages: number;\n\t};\n\tdefaultLayouts: SupportedLayouts;\n\tselection?: string[];\n\tonChangeSelection?: ( items: string[] ) => void;\n\theader?: ReactNode;\n} & ( Item extends ItemWithId\n\t? { getItemId?: ( item: Item ) => string }\n\t: { getItemId: ( item: Item ) => string } );\n\nconst defaultGetItemId = ( item: ItemWithId ) => item.id;\n\nexport default function DataViews< Item >( {\n\tview,\n\tonChangeView,\n\tfields,\n\tsearch = true,\n\tsearchLabel = undefined,\n\tactions = [],\n\tdata,\n\tgetItemId = defaultGetItemId,\n\tisLoading = false,\n\tpaginationInfo,\n\tdefaultLayouts,\n\tselection: selectionProperty,\n\tonChangeSelection,\n\theader,\n}: DataViewsProps< Item > ) {\n\tconst [ selectionState, setSelectionState ] = useState< string[] >( [] );\n\tconst [ density, setDensity ] = useState< number >( 0 );\n\tconst [ isShowingFilter, setIsShowingFilter ] =\n\t\tuseState< boolean >( false );\n\tconst isUncontrolled =\n\t\tselectionProperty === undefined || onChangeSelection === undefined;\n\tconst selection = isUncontrolled ? selectionState : selectionProperty;\n\tconst [ openedFilter, setOpenedFilter ] = useState< string | null >( null );\n\tfunction setSelectionWithChange( value: SelectionOrUpdater ) {\n\t\tconst newValue =\n\t\t\ttypeof value === 'function' ? value( selection ) : value;\n\t\tif ( isUncontrolled ) {\n\t\t\tsetSelectionState( newValue );\n\t\t}\n\t\tif ( onChangeSelection ) {\n\t\t\tonChangeSelection( newValue );\n\t\t}\n\t}\n\tconst _fields = useMemo( () => normalizeFields( fields ), [ fields ] );\n\tconst _selection = useMemo( () => {\n\t\treturn selection.filter( ( id ) =>\n\t\t\tdata.some( ( item ) => getItemId( item ) === id )\n\t\t);\n\t}, [ selection, data, getItemId ] );\n\n\tconst filters = useFilters( _fields, view );\n\treturn (\n\t\t<DataViewsContext.Provider\n\t\t\tvalue={ {\n\t\t\t\tview,\n\t\t\t\tonChangeView,\n\t\t\t\tfields: _fields,\n\t\t\t\tactions,\n\t\t\t\tdata,\n\t\t\t\tisLoading,\n\t\t\t\tpaginationInfo,\n\t\t\t\tselection: _selection,\n\t\t\t\tonChangeSelection: setSelectionWithChange,\n\t\t\t\topenedFilter,\n\t\t\t\tsetOpenedFilter,\n\t\t\t\tgetItemId,\n\t\t\t\tdensity,\n\t\t\t} }\n\t\t>\n\t\t\t<div className=\"dataviews-wrapper\">\n\t\t\t\t<HStack\n\t\t\t\t\talignment=\"top\"\n\t\t\t\t\tjustify=\"start\"\n\t\t\t\t\tclassName=\"dataviews__view-actions\"\n\t\t\t\t\tspacing={ 1 }\n\t\t\t\t>\n\t\t\t\t\t<HStack justify=\"start\" wrap>\n\t\t\t\t\t\t{ search && <DataViewsSearch label={ searchLabel } /> }\n\t\t\t\t\t\t<FilterVisibilityToggle\n\t\t\t\t\t\t\tfilters={ filters }\n\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\t\t\tsetOpenedFilter={ setOpenedFilter }\n\t\t\t\t\t\t\tsetIsShowingFilter={ setIsShowingFilter }\n\t\t\t\t\t\t\tisShowingFilter={ isShowingFilter }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\n\t\t\t\t\t{ view.type === LAYOUT_GRID && (\n\t\t\t\t\t\t<DensityPicker\n\t\t\t\t\t\t\tdensity={ density }\n\t\t\t\t\t\t\tsetDensity={ setDensity }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<DataViewsBulkActions />\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\tstyle={ { flexShrink: 0 } }\n\t\t\t\t\t>\n\t\t\t\t\t\t<DataViewsViewConfig\n\t\t\t\t\t\t\tdefaultLayouts={ defaultLayouts }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ header }\n\t\t\t\t\t</HStack>\n\t\t\t\t</HStack>\n\t\t\t\t{ isShowingFilter && <DataViewsFilters /> }\n\t\t\t\t<DataViewsLayout />\n\t\t\t\t<DataviewsPagination />\n\t\t\t\t<DataViewsBulkActionsToolbar />\n\t\t\t</div>\n\t\t</DataViewsContext.Provider>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__experimentalHStack","HStack","useMemo","useState","DataViewsContext","default","DataViewsFilters","useFilters","FilterVisibilityToggle","DataViewsLayout","DataViewsFooter","DataViewsSearch","DataViewsViewConfig","normalizeFields","jsx","_jsx","jsxs","_jsxs","defaultGetItemId","item","id","DataViews","view","onChangeView","fields","search","searchLabel","undefined","actions","data","getItemId","isLoading","paginationInfo","defaultLayouts","selection","selectionProperty","onChangeSelection","header","selectionState","setSelectionState","density","setDensity","isUncontrolled","openedFilter","setOpenedFilter","setSelectionWithChange","value","newValue","_fields","_selection","filter","some","filters","isShowingFilter","setIsShowingFilter","isPrimary","Provider","children","className","alignment","justify","spacing","expanded","label","style","flexShrink"],"sources":["@wordpress/dataviews/src/components/dataviews/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __experimentalHStack as HStack } from '@wordpress/components';\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport DataViewsContext from '../dataviews-context';\nimport {\n\tdefault as DataViewsFilters,\n\tuseFilters,\n\tFilterVisibilityToggle,\n} from '../dataviews-filters';\nimport DataViewsLayout from '../dataviews-layout';\nimport DataViewsFooter from '../dataviews-footer';\nimport DataViewsSearch from '../dataviews-search';\nimport DataViewsViewConfig from '../dataviews-view-config';\nimport { normalizeFields } from '../../normalize-fields';\nimport type { Action, Field, View, SupportedLayouts } from '../../types';\nimport type { SelectionOrUpdater } from '../../private-types';\n\ntype ItemWithId = { id: string };\n\ntype DataViewsProps< Item > = {\n\tview: View;\n\tonChangeView: ( view: View ) => void;\n\tfields: Field< Item >[];\n\tsearch?: boolean;\n\tsearchLabel?: string;\n\tactions?: Action< Item >[];\n\tdata: Item[];\n\tisLoading?: boolean;\n\tpaginationInfo: {\n\t\ttotalItems: number;\n\t\ttotalPages: number;\n\t};\n\tdefaultLayouts: SupportedLayouts;\n\tselection?: string[];\n\tonChangeSelection?: ( items: string[] ) => void;\n\theader?: ReactNode;\n} & ( Item extends ItemWithId\n\t? { getItemId?: ( item: Item ) => string }\n\t: { getItemId: ( item: Item ) => string } );\n\nconst defaultGetItemId = ( item: ItemWithId ) => item.id;\n\nexport default function DataViews< Item >( {\n\tview,\n\tonChangeView,\n\tfields,\n\tsearch = true,\n\tsearchLabel = undefined,\n\tactions = [],\n\tdata,\n\tgetItemId = defaultGetItemId,\n\tisLoading = false,\n\tpaginationInfo,\n\tdefaultLayouts,\n\tselection: selectionProperty,\n\tonChangeSelection,\n\theader,\n}: DataViewsProps< Item > ) {\n\tconst [ selectionState, setSelectionState ] = useState< string[] >( [] );\n\tconst [ density, setDensity ] = useState< number >( 0 );\n\tconst isUncontrolled =\n\t\tselectionProperty === undefined || onChangeSelection === undefined;\n\tconst selection = isUncontrolled ? selectionState : selectionProperty;\n\tconst [ openedFilter, setOpenedFilter ] = useState< string | null >( null );\n\tfunction setSelectionWithChange( value: SelectionOrUpdater ) {\n\t\tconst newValue =\n\t\t\ttypeof value === 'function' ? value( selection ) : value;\n\t\tif ( isUncontrolled ) {\n\t\t\tsetSelectionState( newValue );\n\t\t}\n\t\tif ( onChangeSelection ) {\n\t\t\tonChangeSelection( newValue );\n\t\t}\n\t}\n\tconst _fields = useMemo( () => normalizeFields( fields ), [ fields ] );\n\tconst _selection = useMemo( () => {\n\t\treturn selection.filter( ( id ) =>\n\t\t\tdata.some( ( item ) => getItemId( item ) === id )\n\t\t);\n\t}, [ selection, data, getItemId ] );\n\n\tconst filters = useFilters( _fields, view );\n\tconst [ isShowingFilter, setIsShowingFilter ] = useState< boolean >( () =>\n\t\t( filters || [] ).some( ( filter ) => filter.isPrimary )\n\t);\n\n\treturn (\n\t\t<DataViewsContext.Provider\n\t\t\tvalue={ {\n\t\t\t\tview,\n\t\t\t\tonChangeView,\n\t\t\t\tfields: _fields,\n\t\t\t\tactions,\n\t\t\t\tdata,\n\t\t\t\tisLoading,\n\t\t\t\tpaginationInfo,\n\t\t\t\tselection: _selection,\n\t\t\t\tonChangeSelection: setSelectionWithChange,\n\t\t\t\topenedFilter,\n\t\t\t\tsetOpenedFilter,\n\t\t\t\tgetItemId,\n\t\t\t\tdensity,\n\t\t\t} }\n\t\t>\n\t\t\t<div className=\"dataviews-wrapper\">\n\t\t\t\t<HStack\n\t\t\t\t\talignment=\"top\"\n\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\tclassName=\"dataviews__view-actions\"\n\t\t\t\t\tspacing={ 1 }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tjustify=\"start\"\n\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\tclassName=\"dataviews__search\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ search && <DataViewsSearch label={ searchLabel } /> }\n\t\t\t\t\t\t<FilterVisibilityToggle\n\t\t\t\t\t\t\tfilters={ filters }\n\t\t\t\t\t\t\tview={ view }\n\t\t\t\t\t\t\tonChangeView={ onChangeView }\n\t\t\t\t\t\t\tsetOpenedFilter={ setOpenedFilter }\n\t\t\t\t\t\t\tsetIsShowingFilter={ setIsShowingFilter }\n\t\t\t\t\t\t\tisShowingFilter={ isShowingFilter }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</HStack>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\tstyle={ { flexShrink: 0 } }\n\t\t\t\t\t>\n\t\t\t\t\t\t<DataViewsViewConfig\n\t\t\t\t\t\t\tdefaultLayouts={ defaultLayouts }\n\t\t\t\t\t\t\tdensity={ density }\n\t\t\t\t\t\t\tsetDensity={ setDensity }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ header }\n\t\t\t\t\t</HStack>\n\t\t\t\t</HStack>\n\t\t\t\t{ isShowingFilter && <DataViewsFilters /> }\n\t\t\t\t<DataViewsLayout />\n\t\t\t\t<DataViewsFooter />\n\t\t\t</div>\n\t\t</DataViewsContext.Provider>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/components/dataviews-bulk-actions/index.js

@@ -1,26 +1,19 @@
 /**
  * WordPress dependencies
  */
-import { privateApis as componentsPrivateApis, Button, Modal } from '@wordpress/components';
+import { Button, CheckboxControl, __experimentalHStack as HStack } from '@wordpress/components';
 import { __, sprintf, _n } from '@wordpress/i18n';
-import { useMemo, useState, useCallback, useContext } from '@wordpress/element';
+import { useMemo, useState, useRef, useContext } from '@wordpress/element';
 import { useRegistry } from '@wordpress/data';
+import { closeSmall } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import DataViewsContext from '../dataviews-context';
-import { LAYOUT_TABLE, LAYOUT_GRID } from '../../constants';
-import { unlock } from '../../lock-unlock';
+import { ActionWithModal } from '../dataviews-item-actions';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const {
-  DropdownMenuV2: DropdownMenu,
-  DropdownMenuGroupV2: DropdownMenuGroup,
-  DropdownMenuItemV2: DropdownMenuItem,
-  DropdownMenuSeparatorV2: DropdownMenuSeparator
-} = unlock(componentsPrivateApis);
 export function useHasAPossibleBulkAction(actions, item) {
   return useMemo(() => {
     return actions.some(action => {
@@ -37,166 +30,175 @@ export function useSomeItemHasAPossibleBulkAction(actions, data) {
     });
   }, [actions, data]);
 }
-function ActionWithModal({
+export function BulkSelectionCheckbox({
+  selection,
+  onChangeSelection,
+  data,
+  actions,
+  getItemId
+}) {
+  const selectableItems = useMemo(() => {
+    return data.filter(item => {
+      return actions.some(action => action.supportsBulk && (!action.isEligible || action.isEligible(item)));
+    });
+  }, [data, actions]);
+  const selectedItems = data.filter(item => selection.includes(getItemId(item)) && selectableItems.includes(item));
+  const areAllSelected = selectedItems.length === selectableItems.length;
+  return /*#__PURE__*/_jsx(CheckboxControl, {
+    className: "dataviews-view-table-selection-checkbox",
+    __nextHasNoMarginBottom: true,
+    checked: areAllSelected,
+    indeterminate: !areAllSelected && !!selectedItems.length,
+    onChange: () => {
+      if (areAllSelected) {
+        onChangeSelection([]);
+      } else {
+        onChangeSelection(selectableItems.map(item => getItemId(item)));
+      }
+    },
+    "aria-label": areAllSelected ? __('Deselect all') : __('Select all')
+  });
+}
+function ActionTrigger({
   action,
-  selectedItems,
-  setActionWithModal,
-  onMenuOpenChange
+  onClick,
+  isBusy,
+  items
 }) {
-  const eligibleItems = useMemo(() => {
-    return selectedItems.filter(item => !action.isEligible || action.isEligible(item));
-  }, [action, selectedItems]);
-  const {
-    RenderModal,
-    hideModalHeader
-  } = action;
-  const onCloseModal = useCallback(() => {
-    setActionWithModal(undefined);
-  }, [setActionWithModal]);
-  if (!eligibleItems.length) {
-    return null;
-  }
-  const label = typeof action.label === 'string' ? action.label : action.label(selectedItems);
-  return /*#__PURE__*/_jsx(Modal, {
-    title: !hideModalHeader ? label : undefined,
-    __experimentalHideHeader: !!hideModalHeader,
-    onRequestClose: onCloseModal,
-    overlayClassName: "dataviews-bulk-actions__modal",
-    children: /*#__PURE__*/_jsx(RenderModal, {
-      items: eligibleItems,
-      closeModal: onCloseModal,
-      onActionPerformed: () => onMenuOpenChange(false)
-    })
+  const label = typeof action.label === 'string' ? action.label : action.label(items);
+  return /*#__PURE__*/_jsx(Button, {
+    disabled: isBusy,
+    accessibleWhenDisabled: true,
+    label: label,
+    icon: action.icon,
+    isDestructive: action.isDestructive,
+    size: "compact",
+    onClick: onClick,
+    isBusy: isBusy,
+    tooltipPosition: "top"
   });
 }
-function BulkActionItem({
+const EMPTY_ARRAY = [];
+function ActionButton({
   action,
   selectedItems,
-  setActionWithModal
+  actionInProgress,
+  setActionInProgress
 }) {
   const registry = useRegistry();
-  const eligibleItems = useMemo(() => {
-    return selectedItems.filter(item => !action.isEligible || action.isEligible(item));
+  const selectedEligibleItems = useMemo(() => {
+    return selectedItems.filter(item => {
+      return !action.isEligible || action.isEligible(item);
+    });
   }, [action, selectedItems]);
-  const shouldShowModal = ('RenderModal' in action);
-  return /*#__PURE__*/_jsx(DropdownMenuItem, {
-    hideOnClick: !shouldShowModal,
+  if ('RenderModal' in action) {
+    return /*#__PURE__*/_jsx(ActionWithModal, {
+      action: action,
+      items: selectedEligibleItems,
+      ActionTrigger: ActionTrigger
+    }, action.id);
+  }
+  return /*#__PURE__*/_jsx(ActionTrigger, {
+    action: action,
     onClick: async () => {
-      if (shouldShowModal) {
-        setActionWithModal(action);
-      } else {
-        action.callback(eligibleItems, {
-          registry
-        });
-      }
+      setActionInProgress(action.id);
+      await action.callback(selectedItems, {
+        registry
+      });
+      setActionInProgress(null);
     },
-    suffix: eligibleItems.length,
-    children: action.label
+    items: selectedEligibleItems,
+    isBusy: actionInProgress === action.id
   }, action.id);
 }
-function ActionsMenuGroup({
-  actions,
-  selectedItems,
-  setActionWithModal
-}) {
-  const elligibleActions = useMemo(() => {
-    return actions.filter(action => {
-      return selectedItems.some(item => !action.isEligible || action.isEligible(item));
-    });
-  }, [actions, selectedItems]);
-  if (!elligibleActions.length) {
-    return null;
-  }
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(DropdownMenuGroup, {
-      children: elligibleActions.map(action => /*#__PURE__*/_jsx(BulkActionItem, {
-        action: action,
-        selectedItems: selectedItems,
-        setActionWithModal: setActionWithModal
-      }, action.id))
-    }), /*#__PURE__*/_jsx(DropdownMenuSeparator, {})]
+function renderFooterContent(data, actions, getItemId, selection, actionsToShow, selectedItems, actionInProgress, setActionInProgress, onChangeSelection) {
+  const message = selectedItems.length > 0 ? sprintf( /* translators: %d: number of items. */
+  _n('%d Item selected', '%d Items selected', selectedItems.length), selectedItems.length) : sprintf( /* translators: %d: number of items. */
+  _n('%d Item', '%d Items', data.length), data.length);
+  return /*#__PURE__*/_jsxs(HStack, {
+    expanded: false,
+    className: "dataviews-bulk-actions-footer__container",
+    spacing: 3,
+    children: [/*#__PURE__*/_jsx(BulkSelectionCheckbox, {
+      selection: selection,
+      onChangeSelection: onChangeSelection,
+      data: data,
+      actions: actions,
+      getItemId: getItemId
+    }), /*#__PURE__*/_jsx("span", {
+      className: "dataviews-bulk-actions-footer__item-count",
+      children: message
+    }), /*#__PURE__*/_jsxs(HStack, {
+      className: "dataviews-bulk-actions-footer__action-buttons",
+      expanded: false,
+      spacing: 1,
+      children: [actionsToShow.map(action => {
+        return /*#__PURE__*/_jsx(ActionButton, {
+          action: action,
+          selectedItems: selectedItems,
+          actionInProgress: actionInProgress,
+          setActionInProgress: setActionInProgress
+        }, action.id);
+      }), selectedItems.length > 0 && /*#__PURE__*/_jsx(Button, {
+        icon: closeSmall,
+        showTooltip: true,
+        tooltipPosition: "top",
+        size: "compact",
+        label: __('Cancel'),
+        disabled: !!actionInProgress,
+        accessibleWhenDisabled: false,
+        onClick: () => {
+          onChangeSelection(EMPTY_ARRAY);
+        }
+      })]
+    })]
   });
 }
-function _BulkActions() {
-  const {
-    data,
-    actions = [],
-    selection,
-    onChangeSelection,
-    getItemId
-  } = useContext(DataViewsContext);
+function FooterContent({
+  selection,
+  actions,
+  onChangeSelection,
+  data,
+  getItemId
+}) {
+  const [actionInProgress, setActionInProgress] = useState(null);
+  const footerContent = useRef(null);
   const bulkActions = useMemo(() => actions.filter(action => action.supportsBulk), [actions]);
-  const [isMenuOpen, onMenuOpenChange] = useState(false);
-  const [actionWithModal, setActionWithModal] = useState();
   const selectableItems = useMemo(() => {
     return data.filter(item => {
       return bulkActions.some(action => !action.isEligible || action.isEligible(item));
     });
   }, [data, bulkActions]);
-  const numberSelectableItems = selectableItems.length;
   const selectedItems = useMemo(() => {
     return data.filter(item => selection.includes(getItemId(item)) && selectableItems.includes(item));
   }, [selection, data, getItemId, selectableItems]);
-  const areAllSelected = selectedItems.length === numberSelectableItems;
-  if (bulkActions.length === 0) {
-    return null;
+  const actionsToShow = useMemo(() => actions.filter(action => {
+    return action.supportsBulk && action.icon && selectedItems.some(item => !action.isEligible || action.isEligible(item));
+  }), [actions, selectedItems]);
+  if (!actionInProgress) {
+    if (footerContent.current) {
+      footerContent.current = null;
+    }
+    return renderFooterContent(data, actions, getItemId, selection, actionsToShow, selectedItems, actionInProgress, setActionInProgress, onChangeSelection);
+  } else if (!footerContent.current) {
+    footerContent.current = renderFooterContent(data, actions, getItemId, selection, actionsToShow, selectedItems, actionInProgress, setActionInProgress, onChangeSelection);
   }
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(DropdownMenu, {
-      open: isMenuOpen,
-      onOpenChange: onMenuOpenChange,
-      label: __('Bulk actions'),
-      style: {
-        minWidth: '240px'
-      },
-      trigger: /*#__PURE__*/_jsx(Button, {
-        className: "dataviews-bulk-actions__edit-button",
-        __next40pxDefaultSize: true,
-        variant: "tertiary",
-        size: "compact",
-        children: selectedItems.length ? sprintf( /* translators: %d: Number of items. */
-        _n('Edit %d item', 'Edit %d items', selectedItems.length), selectedItems.length) : __('Bulk edit')
-      }),
-      children: [/*#__PURE__*/_jsx(ActionsMenuGroup, {
-        actions: bulkActions,
-        setActionWithModal: setActionWithModal,
-        selectedItems: selectedItems
-      }), /*#__PURE__*/_jsxs(DropdownMenuGroup, {
-        children: [/*#__PURE__*/_jsx(DropdownMenuItem, {
-          disabled: areAllSelected,
-          hideOnClick: false,
-          onClick: () => {
-            onChangeSelection(selectableItems.map(item => getItemId(item)));
-          },
-          suffix: numberSelectableItems,
-          children: __('Select all')
-        }), /*#__PURE__*/_jsx(DropdownMenuItem, {
-          disabled: selection.length === 0,
-          hideOnClick: false,
-          onClick: () => {
-            onChangeSelection([]);
-          },
-          children: __('Deselect')
-        })]
-      })]
-    }), actionWithModal && /*#__PURE__*/_jsx(ActionWithModal, {
-      action: actionWithModal,
-      selectedItems: selectedItems,
-      setActionWithModal: setActionWithModal,
-      onMenuOpenChange: onMenuOpenChange
-    })]
-  });
+  return footerContent.current;
 }
-export default function BulkActions() {
+export function BulkActionsFooter() {
   const {
     data,
-    actions = [],
-    view
+    selection,
+    actions = EMPTY_ARRAY,
+    onChangeSelection,
+    getItemId
   } = useContext(DataViewsContext);
-  const hasPossibleBulkAction = useSomeItemHasAPossibleBulkAction(actions, data);
-  if (![LAYOUT_TABLE, LAYOUT_GRID].includes(view.type) || !hasPossibleBulkAction) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx(_BulkActions, {});
+  return /*#__PURE__*/_jsx(FooterContent, {
+    selection: selection,
+    onChangeSelection: onChangeSelection,
+    data: data,
+    actions: actions,
+    getItemId: getItemId
+  });
 }
 //# sourceMappingURL=index.js.map