@wordpress/dataviews 8.0.1-next.e256d081a.0 → 9.0.1-next.6870dfe5b.0

package/build-module/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/dataviews/src/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type {\n\tReactElement,\n\tReactNode,\n\tComponentType,\n\tComponentProps,\n} from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { SetSelection } from './private-types';\n\n/**\n * WordPress dependencies\n */\nimport type { useFocusOnMount } from '@wordpress/compose';\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\nexport interface 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 interface NormalizedFilterByConfig {\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\ninterface FilterConfigForType {\n\t/**\n\t * What operators are used by default.\n\t */\n\tdefaultOperators: Operator[];\n\n\t/**\n\t * What operators are supported by the field.\n\t */\n\tvalidOperators: Operator[];\n}\n\nexport type Operator =\n\t| 'is'\n\t| 'isNot'\n\t| 'isAny'\n\t| 'isNone'\n\t| 'isAll'\n\t| 'isNotAll'\n\t| 'lessThan'\n\t| 'greaterThan'\n\t| 'lessThanOrEqual'\n\t| 'greaterThanOrEqual'\n\t| 'before'\n\t| 'after'\n\t| 'beforeInc'\n\t| 'afterInc'\n\t| 'contains'\n\t| 'notContains'\n\t| 'startsWith'\n\t| 'between'\n\t| 'on'\n\t| 'notOn'\n\t| 'inThePast'\n\t| 'over';\n\nexport type FieldType =\n\t| 'text'\n\t| 'integer'\n\t| 'datetime'\n\t| 'date'\n\t| 'media'\n\t| 'boolean'\n\t| 'email'\n\t| 'array';\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: Rules< Item >;\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 | null;\n\n\t/**\n\t * Callback used to render the field.\n\t */\n\trender: ComponentType< DataViewRenderFieldProps< Item > >;\n\n\t/**\n\t * The filter config for the field.\n\t */\n\tfilterBy: FilterConfigForType | false;\n\n\t/**\n\t * Whether the field is readOnly.\n\t * If `true`, the value will be rendered using the `render` callback.\n\t */\n\treadOnly?: boolean;\n\n\t/**\n\t * Whether the field is sortable.\n\t */\n\tenableSorting: boolean;\n};\n\nexport type Rules< Item > = {\n\trequired?: boolean;\n\tcustom?: ( item: Item, field: NormalizedField< Item > ) => null | 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< DataViewRenderFieldProps< 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?: Rules< Item >;\n\n\t/**\n\t * Callback used to decide if a field should be displayed.\n\t */\n\tisVisible?: ( item: Item ) => 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 | false;\n\n\t/**\n\t * Whether the field is readOnly.\n\t * If `true`, the value will be rendered using the `render` callback.\n\t */\n\treadOnly?: boolean;\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 > = Omit< Field< Item >, 'Edit' > & {\n\tlabel: string;\n\theader: string | ReactElement;\n\tgetValue: ( args: { item: Item } ) => any;\n\trender: ComponentType< DataViewRenderFieldProps< Item > >;\n\tEdit: ComponentType< DataFormControlProps< Item > > | null;\n\tsort: ( a: Item, b: Item, direction: SortDirection ) => number;\n\tisValid: Rules< Item >;\n\tenableHiding: boolean;\n\tenableSorting: boolean;\n\tfilterBy: NormalizedFilterByConfig | false;\n\treadOnly: 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\nexport type DataFormControlProps< Item > = {\n\tdata: Item;\n\tfield: NormalizedField< Item >;\n\tonChange: ( value: Record< string, any > ) => void;\n\thideLabelFromVision?: boolean;\n\t/**\n\t * The currently selected filter operator for this field.\n\t *\n\t * Used by DataViews filters to determine which control to render based on the operator type.\n\t */\n\toperator?: Operator;\n};\n\nexport type DataViewRenderFieldProps< Item > = {\n\titem: Item;\n\tfield: NormalizedField< Item >;\n\tconfig?: {\n\t\tsizes: string;\n\t};\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\t/**\n\t * Whether the filter can be edited by the user.\n\t */\n\tisLocked?: boolean;\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\t/**\n\t * Whether the filter can be edited by the user.\n\t */\n\tisLocked: 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\t/**\n\t * Title field\n\t */\n\ttitleField?: string;\n\n\t/**\n\t * Media field\n\t */\n\tmediaField?: string;\n\n\t/**\n\t * Description field\n\t */\n\tdescriptionField?: string;\n\n\t/**\n\t * Whether to show the title\n\t */\n\tshowTitle?: boolean;\n\n\t/**\n\t * Whether to show the media\n\t */\n\tshowMedia?: boolean;\n\n\t/**\n\t * Whether to show the description\n\t */\n\tshowDescription?: boolean;\n\n\t/**\n\t * Whether to show the hierarchical levels.\n\t */\n\tshowLevels?: boolean;\n\n\t/**\n\t * The field to group by.\n\t */\n\tgroupByField?: string;\n\n\t/**\n\t * Whether infinite scroll is enabled.\n\t */\n\tinfiniteScrollEnabled?: boolean;\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\t/**\n\t * The alignment of the field column, defaults to left.\n\t */\n\talign?: 'start' | 'center' | 'end';\n}\n\nexport type Density = 'compact' | 'balanced' | 'comfortable';\n\nexport interface ViewTable extends ViewBase {\n\ttype: 'table';\n\n\tlayout?: {\n\t\t/**\n\t\t * The styles for the columns.\n\t\t */\n\t\tstyles?: Record< string, ColumnStyle >;\n\n\t\t/**\n\t\t * The density of the view.\n\t\t */\n\t\tdensity?: Density;\n\n\t\t/**\n\t\t * Whether the view allows column moving.\n\t\t */\n\t\tenableMoving?: boolean;\n\t};\n}\n\nexport interface ViewList extends ViewBase {\n\ttype: 'list';\n}\n\nexport interface ViewGrid extends ViewBase {\n\ttype: 'grid';\n\n\tlayout?: {\n\t\t/**\n\t\t * The fields to use as badge fields.\n\t\t */\n\t\tbadgeFields?: string[];\n\n\t\t/**\n\t\t * The preview size of the grid.\n\t\t */\n\t\tpreviewSize?: number;\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\t/**\n\t * The size of the modal.\n\t *\n\t * @default 'medium'\n\t */\n\tmodalSize?: 'small' | 'medium' | 'large' | 'fill';\n\n\t/**\n\t * The focus on mount property of the modal.\n\t */\n\tmodalFocusOnMount?:\n\t\t| Parameters< typeof useFocusOnMount >[ 0 ]\n\t\t| 'firstContentElement';\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\tclassName?: string;\n\tactions: Action< Item >[];\n\tdata: Item[];\n\tfields: NormalizedField< Item >[];\n\tgetItemId: ( item: Item ) => string;\n\tgetItemLevel?: ( item: Item ) => number;\n\tisLoading?: boolean;\n\tonChangeView: ( view: View ) => void;\n\tonChangeSelection: SetSelection;\n\tselection: string[];\n\tsetOpenedFilter: ( fieldId: string ) => void;\n\tonClickItem?: ( item: Item ) => void;\n\trenderItemLink?: (\n\t\tprops: {\n\t\t\titem: Item;\n\t\t} & ComponentProps< 'a' >\n\t) => ReactElement;\n\tisItemClickable: ( item: Item ) => boolean;\n\tview: View;\n\tempty: ReactNode;\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\n/**\n * DataForm layouts.\n */\nexport type LayoutType = 'regular' | 'panel' | 'card';\nexport type LabelPosition = 'top' | 'side' | 'none';\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};\nexport type NormalizedPanelLayout = {\n\ttype: 'panel';\n\tlabelPosition: LabelPosition;\n\topenAs: 'dropdown' | 'modal';\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  };\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  }\n\t| {\n\t\t\ttype: 'card';\n\t\t\twithHeader: true;\n\t\t\tisOpened: boolean;\n\t  };\n\nexport type Layout = RegularLayout | PanelLayout | CardLayout;\nexport type NormalizedLayout =\n\t| NormalizedRegularLayout\n\t| NormalizedPanelLayout\n\t| NormalizedCardLayout;\n\nexport type SimpleFormField = {\n\tid: string;\n\tlayout?: Layout;\n};\n\nexport type CombinedFormField = {\n\tid: string;\n\tlabel?: 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}\n\nexport interface FieldLayoutProps< Item > {\n\tdata: Item;\n\tfield: FormField;\n\tonChange: ( value: any ) => void;\n\thideLabelFromVision?: boolean;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["@wordpress/dataviews/src/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type {\n\tReactElement,\n\tReactNode,\n\tComponentType,\n\tComponentProps,\n} from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { SetSelection } from './private-types';\n\n/**\n * WordPress dependencies\n */\nimport type { useFocusOnMount } from '@wordpress/compose';\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\nexport interface 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 interface NormalizedFilterByConfig {\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\ninterface FilterConfigForType {\n\t/**\n\t * What operators are used by default.\n\t */\n\tdefaultOperators: Operator[];\n\n\t/**\n\t * What operators are supported by the field.\n\t */\n\tvalidOperators: Operator[];\n}\n\nexport type Operator =\n\t| 'is'\n\t| 'isNot'\n\t| 'isAny'\n\t| 'isNone'\n\t| 'isAll'\n\t| 'isNotAll'\n\t| 'lessThan'\n\t| 'greaterThan'\n\t| 'lessThanOrEqual'\n\t| 'greaterThanOrEqual'\n\t| 'before'\n\t| 'after'\n\t| 'beforeInc'\n\t| 'afterInc'\n\t| 'contains'\n\t| 'notContains'\n\t| 'startsWith'\n\t| 'between'\n\t| 'on'\n\t| 'notOn'\n\t| 'inThePast'\n\t| 'over';\n\nexport type FieldType =\n\t| 'text'\n\t| 'integer'\n\t| 'datetime'\n\t| 'date'\n\t| 'media'\n\t| 'boolean'\n\t| 'email'\n\t| 'telephone'\n\t| 'color'\n\t| 'url'\n\t| 'array';\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: Rules< Item >;\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 | null;\n\n\t/**\n\t * Callback used to render the field.\n\t */\n\trender: ComponentType< DataViewRenderFieldProps< Item > >;\n\n\t/**\n\t * The filter config for the field.\n\t */\n\tfilterBy: FilterConfigForType | false;\n\n\t/**\n\t * Whether the field is readOnly.\n\t * If `true`, the value will be rendered using the `render` callback.\n\t */\n\treadOnly?: boolean;\n\n\t/**\n\t * Whether the field is sortable.\n\t */\n\tenableSorting: boolean;\n};\n\nexport type Rules< Item > = {\n\trequired?: boolean;\n\tcustom?: ( item: Item, field: NormalizedField< Item > ) => null | 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< DataViewRenderFieldProps< 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?: Rules< Item >;\n\n\t/**\n\t * Callback used to decide if a field should be displayed.\n\t */\n\tisVisible?: ( item: Item ) => 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 | false;\n\n\t/**\n\t * Whether the field is readOnly.\n\t * If `true`, the value will be rendered using the `render` callback.\n\t */\n\treadOnly?: boolean;\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 > = Omit< Field< Item >, 'Edit' > & {\n\tlabel: string;\n\theader: string | ReactElement;\n\tgetValue: ( args: { item: Item } ) => any;\n\trender: ComponentType< DataViewRenderFieldProps< Item > >;\n\tEdit: ComponentType< DataFormControlProps< Item > > | null;\n\tsort: ( a: Item, b: Item, direction: SortDirection ) => number;\n\tisValid: Rules< Item >;\n\tenableHiding: boolean;\n\tenableSorting: boolean;\n\tfilterBy: NormalizedFilterByConfig | false;\n\treadOnly: 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\nexport type DataFormControlProps< Item > = {\n\tdata: Item;\n\tfield: NormalizedField< Item >;\n\tonChange: ( value: Record< string, any > ) => void;\n\thideLabelFromVision?: boolean;\n\t/**\n\t * The currently selected filter operator for this field.\n\t *\n\t * Used by DataViews filters to determine which control to render based on the operator type.\n\t */\n\toperator?: Operator;\n};\n\nexport type DataViewRenderFieldProps< Item > = {\n\titem: Item;\n\tfield: NormalizedField< Item >;\n\tconfig?: {\n\t\tsizes: string;\n\t};\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\t/**\n\t * Whether the filter can be edited by the user.\n\t */\n\tisLocked?: boolean;\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\t/**\n\t * Whether the filter can be edited by the user.\n\t */\n\tisLocked: 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\t/**\n\t * Title field\n\t */\n\ttitleField?: string;\n\n\t/**\n\t * Media field\n\t */\n\tmediaField?: string;\n\n\t/**\n\t * Description field\n\t */\n\tdescriptionField?: string;\n\n\t/**\n\t * Whether to show the title\n\t */\n\tshowTitle?: boolean;\n\n\t/**\n\t * Whether to show the media\n\t */\n\tshowMedia?: boolean;\n\n\t/**\n\t * Whether to show the description\n\t */\n\tshowDescription?: boolean;\n\n\t/**\n\t * Whether to show the hierarchical levels.\n\t */\n\tshowLevels?: boolean;\n\n\t/**\n\t * The field to group by.\n\t */\n\tgroupByField?: string;\n\n\t/**\n\t * Whether infinite scroll is enabled.\n\t */\n\tinfiniteScrollEnabled?: boolean;\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\t/**\n\t * The alignment of the field column, defaults to left.\n\t */\n\talign?: 'start' | 'center' | 'end';\n}\n\nexport type Density = 'compact' | 'balanced' | 'comfortable';\n\nexport interface ViewTable extends ViewBase {\n\ttype: 'table';\n\n\tlayout?: {\n\t\t/**\n\t\t * The styles for the columns.\n\t\t */\n\t\tstyles?: Record< string, ColumnStyle >;\n\n\t\t/**\n\t\t * The density of the view.\n\t\t */\n\t\tdensity?: Density;\n\n\t\t/**\n\t\t * Whether the view allows column moving.\n\t\t */\n\t\tenableMoving?: boolean;\n\t};\n}\n\nexport interface ViewList extends ViewBase {\n\ttype: 'list';\n}\n\nexport interface ViewGrid extends ViewBase {\n\ttype: 'grid';\n\n\tlayout?: {\n\t\t/**\n\t\t * The fields to use as badge fields.\n\t\t */\n\t\tbadgeFields?: string[];\n\n\t\t/**\n\t\t * The preview size of the grid.\n\t\t */\n\t\tpreviewSize?: number;\n\t};\n}\n\nexport interface ViewPickerGrid extends ViewBase {\n\ttype: 'pickerGrid';\n\n\tlayout?: {\n\t\t/**\n\t\t * The fields to use as badge fields.\n\t\t */\n\t\tbadgeFields?: string[];\n\n\t\t/**\n\t\t * The preview size of the grid.\n\t\t */\n\t\tpreviewSize?: number;\n\t};\n}\n\nexport type View = ViewList | ViewGrid | ViewTable | ViewPickerGrid;\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\t/**\n\t * The size of the modal.\n\t *\n\t * @default 'medium'\n\t */\n\tmodalSize?: 'small' | 'medium' | 'large' | 'fill';\n\n\t/**\n\t * The focus on mount property of the modal.\n\t */\n\tmodalFocusOnMount?:\n\t\t| Parameters< typeof useFocusOnMount >[ 0 ]\n\t\t| 'firstContentElement';\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\tclassName?: string;\n\tactions: Action< Item >[];\n\tdata: Item[];\n\tfields: NormalizedField< Item >[];\n\tgetItemId: ( item: Item ) => string;\n\tgetItemLevel?: ( item: Item ) => number;\n\tisLoading?: boolean;\n\tonChangeView: ( view: View ) => void;\n\tonChangeSelection: SetSelection;\n\tselection: string[];\n\tsetOpenedFilter: ( fieldId: string ) => void;\n\tonClickItem?: ( item: Item ) => void;\n\trenderItemLink?: (\n\t\tprops: {\n\t\t\titem: Item;\n\t\t} & ComponentProps< 'a' >\n\t) => ReactElement;\n\tisItemClickable: ( item: Item ) => boolean;\n\tview: View;\n\tempty: ReactNode;\n}\n\nexport type ViewPickerBaseProps< Item > = Omit<\n\tViewBaseProps< Item >,\n\t| 'view'\n\t| 'onChangeView'\n\t// The following props are not supported for pickers.\n\t| 'isItemClickable'\n\t| 'onClickItem'\n\t| 'renderItemLink'\n\t| 'getItemLevel'\n> & {\n\tview: View;\n\tonChangeView: ( view: View ) => void;\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 interface ViewPickerGridProps< Item >\n\textends Omit< ViewPickerBaseProps< Item >, 'view' > {\n\tview: ViewPickerGrid;\n}\n\nexport type ViewProps< Item > =\n\t| ViewTableProps< Item >\n\t| ViewGridProps< Item >\n\t| ViewListProps< Item >;\n\nexport type ViewPickerProps< Item > = ViewPickerGridProps< Item >;\n\nexport interface SupportedLayouts {\n\tlist?: Omit< ViewList, 'type' >;\n\tgrid?: Omit< ViewGrid, 'type' >;\n\ttable?: Omit< ViewTable, 'type' >;\n\tpickerGrid?: Omit< ViewPickerGrid, 'type' >;\n}\n\n/**\n * DataForm layouts.\n */\nexport type LayoutType = 'regular' | 'panel' | 'card' | 'row';\nexport type LabelPosition = 'top' | 'side' | 'none';\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};\nexport type NormalizedPanelLayout = {\n\ttype: 'panel';\n\tlabelPosition: LabelPosition;\n\topenAs: 'dropdown' | 'modal';\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  };\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  }\n\t| {\n\t\t\ttype: 'card';\n\t\t\twithHeader: true;\n\t\t\tisOpened: boolean;\n\t  };\n\nexport type RowLayout = {\n\ttype: 'row';\n\talignment?: 'start' | 'center' | 'end';\n};\nexport type NormalizedRowLayout = {\n\ttype: 'row';\n\talignment: 'start' | 'center' | 'end';\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 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}\n\nexport interface FieldLayoutProps< Item > {\n\tdata: Item;\n\tfield: FormField;\n\tonChange: ( value: any ) => void;\n\thideLabelFromVision?: boolean;\n}\n"],"mappings":"","ignoreList":[]}

package/build-module/validation.js

@@ -21,7 +21,7 @@ export function isItemValid(item, fields, form) {
       item
     });
     if (field.isValid.required) {
-      if (field.type === 'text' && isEmptyNullOrUndefined(value) || field.type === 'email' && isEmptyNullOrUndefined(value) || field.type === 'integer' && isEmptyNullOrUndefined(value) || field.type === undefined && isEmptyNullOrUndefined(value)) {
+      if (field.type === 'text' && isEmptyNullOrUndefined(value) || field.type === 'email' && isEmptyNullOrUndefined(value) || field.type === 'url' && isEmptyNullOrUndefined(value) || field.type === 'telephone' && isEmptyNullOrUndefined(value) || field.type === 'integer' && isEmptyNullOrUndefined(value) || field.type === undefined && isEmptyNullOrUndefined(value)) {
         return false;
       }
       if (field.type === 'boolean' && value !== true) {

package/build-module/validation.js.map

@@ -1 +1 @@
-{"version":3,"names":["normalizeFields","isItemValid","item","fields","form","_fields","filter","id","includes","isEmptyNullOrUndefined","value","undefined","every","field","getValue","isValid","required","type","custom"],"sources":["@wordpress/dataviews/src/validation.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { normalizeFields } from './normalize-fields';\nimport type { Field, Form } from './types';\n\n/**\n * Whether or not the given item's value is valid according to the fields and form config.\n *\n * @param item   The item to validate.\n * @param fields Fields config.\n * @param form   Form config.\n *\n * @return A boolean indicating if the item is valid (true) or not (false).\n */\nexport function isItemValid< Item >(\n\titem: Item,\n\tfields: Field< Item >[],\n\tform: Form\n): boolean {\n\tconst _fields = normalizeFields(\n\t\tfields.filter( ( { id } ) => !! form.fields?.includes( id ) )\n\t);\n\n\tconst isEmptyNullOrUndefined = ( value: any ) =>\n\t\t[ undefined, '', null ].includes( value );\n\n\treturn _fields.every( ( field ) => {\n\t\tconst value = field.getValue( { item } );\n\n\t\tif ( field.isValid.required ) {\n\t\t\tif (\n\t\t\t\t( field.type === 'text' && isEmptyNullOrUndefined( value ) ) ||\n\t\t\t\t( field.type === 'email' && isEmptyNullOrUndefined( value ) ) ||\n\t\t\t\t( field.type === 'integer' &&\n\t\t\t\t\tisEmptyNullOrUndefined( value ) ) ||\n\t\t\t\t( field.type === undefined && isEmptyNullOrUndefined( value ) )\n\t\t\t) {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\tif ( field.type === 'boolean' && value !== true ) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t}\n\n\t\tif (\n\t\t\ttypeof field.isValid.custom === 'function' &&\n\t\t\tfield.isValid.custom( item, field ) !== null\n\t\t) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn true;\n\t} );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,eAAe,QAAQ,oBAAoB;AAGpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,WAAWA,CAC1BC,IAAU,EACVC,MAAuB,EACvBC,IAAU,EACA;EACV,MAAMC,OAAO,GAAGL,eAAe,CAC9BG,MAAM,CAACG,MAAM,CAAE,CAAE;IAAEC;EAAG,CAAC,KAAM,CAAC,CAAEH,IAAI,CAACD,MAAM,EAAEK,QAAQ,CAAED,EAAG,CAAE,CAC7D,CAAC;EAED,MAAME,sBAAsB,GAAKC,KAAU,IAC1C,CAAEC,SAAS,EAAE,EAAE,EAAE,IAAI,CAAE,CAACH,QAAQ,CAAEE,KAAM,CAAC;EAE1C,OAAOL,OAAO,CAACO,KAAK,CAAIC,KAAK,IAAM;IAClC,MAAMH,KAAK,GAAGG,KAAK,CAACC,QAAQ,CAAE;MAAEZ;IAAK,CAAE,CAAC;IAExC,IAAKW,KAAK,CAACE,OAAO,CAACC,QAAQ,EAAG;MAC7B,IACGH,KAAK,CAACI,IAAI,KAAK,MAAM,IAAIR,sBAAsB,CAAEC,KAAM,CAAC,IACxDG,KAAK,CAACI,IAAI,KAAK,OAAO,IAAIR,sBAAsB,CAAEC,KAAM,CAAG,IAC3DG,KAAK,CAACI,IAAI,KAAK,SAAS,IACzBR,sBAAsB,CAAEC,KAAM,CAAG,IAChCG,KAAK,CAACI,IAAI,KAAKN,SAAS,IAAIF,sBAAsB,CAAEC,KAAM,CAAG,EAC9D;QACD,OAAO,KAAK;MACb;MAEA,IAAKG,KAAK,CAACI,IAAI,KAAK,SAAS,IAAIP,KAAK,KAAK,IAAI,EAAG;QACjD,OAAO,KAAK;MACb;IACD;IAEA,IACC,OAAOG,KAAK,CAACE,OAAO,CAACG,MAAM,KAAK,UAAU,IAC1CL,KAAK,CAACE,OAAO,CAACG,MAAM,CAAEhB,IAAI,EAAEW,KAAM,CAAC,KAAK,IAAI,EAC3C;MACD,OAAO,KAAK;IACb;IAEA,OAAO,IAAI;EACZ,CAAE,CAAC;AACJ","ignoreList":[]}
+{"version":3,"names":["normalizeFields","isItemValid","item","fields","form","_fields","filter","id","includes","isEmptyNullOrUndefined","value","undefined","every","field","getValue","isValid","required","type","custom"],"sources":["@wordpress/dataviews/src/validation.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { normalizeFields } from './normalize-fields';\nimport type { Field, Form } from './types';\n\n/**\n * Whether or not the given item's value is valid according to the fields and form config.\n *\n * @param item   The item to validate.\n * @param fields Fields config.\n * @param form   Form config.\n *\n * @return A boolean indicating if the item is valid (true) or not (false).\n */\nexport function isItemValid< Item >(\n\titem: Item,\n\tfields: Field< Item >[],\n\tform: Form\n): boolean {\n\tconst _fields = normalizeFields(\n\t\tfields.filter( ( { id } ) => !! form.fields?.includes( id ) )\n\t);\n\n\tconst isEmptyNullOrUndefined = ( value: any ) =>\n\t\t[ undefined, '', null ].includes( value );\n\n\treturn _fields.every( ( field ) => {\n\t\tconst value = field.getValue( { item } );\n\n\t\tif ( field.isValid.required ) {\n\t\t\tif (\n\t\t\t\t( field.type === 'text' && isEmptyNullOrUndefined( value ) ) ||\n\t\t\t\t( field.type === 'email' && isEmptyNullOrUndefined( value ) ) ||\n\t\t\t\t( field.type === 'url' && isEmptyNullOrUndefined( value ) ) ||\n\t\t\t\t( field.type === 'telephone' &&\n\t\t\t\t\tisEmptyNullOrUndefined( value ) ) ||\n\t\t\t\t( field.type === 'integer' &&\n\t\t\t\t\tisEmptyNullOrUndefined( value ) ) ||\n\t\t\t\t( field.type === undefined && isEmptyNullOrUndefined( value ) )\n\t\t\t) {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\tif ( field.type === 'boolean' && value !== true ) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t}\n\n\t\tif (\n\t\t\ttypeof field.isValid.custom === 'function' &&\n\t\t\tfield.isValid.custom( item, field ) !== null\n\t\t) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn true;\n\t} );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,eAAe,QAAQ,oBAAoB;AAGpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,WAAWA,CAC1BC,IAAU,EACVC,MAAuB,EACvBC,IAAU,EACA;EACV,MAAMC,OAAO,GAAGL,eAAe,CAC9BG,MAAM,CAACG,MAAM,CAAE,CAAE;IAAEC;EAAG,CAAC,KAAM,CAAC,CAAEH,IAAI,CAACD,MAAM,EAAEK,QAAQ,CAAED,EAAG,CAAE,CAC7D,CAAC;EAED,MAAME,sBAAsB,GAAKC,KAAU,IAC1C,CAAEC,SAAS,EAAE,EAAE,EAAE,IAAI,CAAE,CAACH,QAAQ,CAAEE,KAAM,CAAC;EAE1C,OAAOL,OAAO,CAACO,KAAK,CAAIC,KAAK,IAAM;IAClC,MAAMH,KAAK,GAAGG,KAAK,CAACC,QAAQ,CAAE;MAAEZ;IAAK,CAAE,CAAC;IAExC,IAAKW,KAAK,CAACE,OAAO,CAACC,QAAQ,EAAG;MAC7B,IACGH,KAAK,CAACI,IAAI,KAAK,MAAM,IAAIR,sBAAsB,CAAEC,KAAM,CAAC,IACxDG,KAAK,CAACI,IAAI,KAAK,OAAO,IAAIR,sBAAsB,CAAEC,KAAM,CAAG,IAC3DG,KAAK,CAACI,IAAI,KAAK,KAAK,IAAIR,sBAAsB,CAAEC,KAAM,CAAG,IACzDG,KAAK,CAACI,IAAI,KAAK,WAAW,IAC3BR,sBAAsB,CAAEC,KAAM,CAAG,IAChCG,KAAK,CAACI,IAAI,KAAK,SAAS,IACzBR,sBAAsB,CAAEC,KAAM,CAAG,IAChCG,KAAK,CAACI,IAAI,KAAKN,SAAS,IAAIF,sBAAsB,CAAEC,KAAM,CAAG,EAC9D;QACD,OAAO,KAAK;MACb;MAEA,IAAKG,KAAK,CAACI,IAAI,KAAK,SAAS,IAAIP,KAAK,KAAK,IAAI,EAAG;QACjD,OAAO,KAAK;MACb;IACD;IAEA,IACC,OAAOG,KAAK,CAACE,OAAO,CAACG,MAAM,KAAK,UAAU,IAC1CL,KAAK,CAACE,OAAO,CAACG,MAAM,CAAEhB,IAAI,EAAEW,KAAM,CAAC,KAAK,IAAI,EAC3C;MACD,OAAO,KAAK;IACb;IAEA,OAAO,IAAI;EACZ,CAAE,CAAC;AACJ","ignoreList":[]}

package/build-style/style-rtl.css

@@ -237,7 +237,8 @@
   }
 }
 
-.dataviews-wrapper {
+.dataviews-wrapper,
+.dataviews-picker-wrapper {
   height: 100%;
   overflow: auto;
   box-sizing: border-box;
@@ -350,7 +351,8 @@
 /**
  * Applying a consistent 24px padding when DataViews are placed within cards.
  */
-.components-card__body:has(> .dataviews-wrapper) {
+.components-card__body:has(> .dataviews-wrapper),
+.components-card__body:has(> .dataviews-picker-wrapper) {
   padding: 8px 0 0;
   overflow: hidden;
 }
@@ -359,15 +361,25 @@
 .components-card__body:has(> .dataviews-wrapper) .dataviews-footer,
 .components-card__body:has(> .dataviews-wrapper) .dataviews-view-grid,
 .components-card__body:has(> .dataviews-wrapper) .dataviews-loading,
-.components-card__body:has(> .dataviews-wrapper) .dataviews-no-results {
+.components-card__body:has(> .dataviews-wrapper) .dataviews-no-results,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews__view-actions,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-filters__container,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-footer,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-grid,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-loading,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-no-results {
   padding-inline: 24px;
 }
 .components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr td:first-child,
-.components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr th:first-child {
+.components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr th:first-child,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr td:first-child,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr th:first-child {
   padding-inline-start: 24px;
 }
 .components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr td:last-child,
-.components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr th:last-child {
+.components-card__body:has(> .dataviews-wrapper) .dataviews-view-table tr th:last-child,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr td:last-child,
+.components-card__body:has(> .dataviews-picker-wrapper) .dataviews-view-table tr th:last-child {
   padding-inline-end: 24px;
 }
 
@@ -940,6 +952,15 @@
   z-index: 1000001;
 }
 
+.dataviews-picker-footer__bulk-selection {
+  align-self: flex-start;
+  height: 32px;
+}
+
+.dataviews-picker-footer__actions {
+  align-self: flex-end;
+}
+
 .dataviews-selection-checkbox {
   --checkbox-input-size: 24px;
   line-height: 0;
@@ -1051,7 +1072,7 @@
   color: #757575;
 }
 
-.dataviews-view-grid {
+.dataviews-view-grid-items {
   margin-bottom: auto;
   display: grid;
   gap: 32px;
@@ -1060,21 +1081,22 @@
   padding: 0 48px 24px;
   container-type: inline-size;
   /**
-   * Breakpoints were adjusted from media queries breakpoints to account for
-   * the sidebar width. This was done to match the existing styles we had.
-   */
+  	* Breakpoints were adjusted from media queries breakpoints to account for
+  	* the sidebar width. This was done to match the existing styles we had.
+  	*/
 }
-@container (max-width: 480px) {
-  .dataviews-view-grid {
+@container (max-width: 430px) {
+  .dataviews-view-grid-items {
     padding-right: 24px;
     padding-left: 24px;
   }
 }
 @media not (prefers-reduced-motion) {
-  .dataviews-view-grid {
+  .dataviews-view-grid-items {
     transition: padding ease-out 0.1s;
   }
 }
+
 .dataviews-view-grid .dataviews-view-grid__card {
   height: 100%;
   justify-content: flex-start;
@@ -1174,9 +1196,16 @@
   top: -9999em;
   right: 8px;
   z-index: 1;
+  opacity: 0;
+}
+@media not (prefers-reduced-motion) {
+  .dataviews-view-grid__card .dataviews-selection-checkbox {
+    transition: opacity 0.1s linear;
+  }
 }
 @media (hover: none) {
   .dataviews-view-grid__card .dataviews-selection-checkbox {
+    opacity: 1;
     top: 8px;
   }
 }
@@ -1184,9 +1213,37 @@
 .dataviews-view-grid__card:hover .dataviews-selection-checkbox,
 .dataviews-view-grid__card:focus-within .dataviews-selection-checkbox,
 .dataviews-view-grid__card.is-selected .dataviews-selection-checkbox {
+  opacity: 1;
   top: 8px;
 }
 
+.dataviews-view-grid__card .dataviews-view-grid__media-actions {
+  position: absolute;
+  top: 4px;
+  opacity: 0;
+  left: 4px;
+}
+.dataviews-view-grid__card .dataviews-view-grid__media-actions .dataviews-all-actions-button {
+  background-color: #fff;
+}
+@media not (prefers-reduced-motion) {
+  .dataviews-view-grid__card .dataviews-view-grid__media-actions {
+    transition: opacity 0.1s linear;
+  }
+}
+@media (hover: none) {
+  .dataviews-view-grid__card .dataviews-view-grid__media-actions {
+    opacity: 1;
+    top: 4px;
+  }
+}
+
+.dataviews-view-grid__card:hover .dataviews-view-grid__media-actions,
+.dataviews-view-grid__card:focus-within .dataviews-view-grid__media-actions,
+.dataviews-view-grid__card .dataviews-view-grid__media-actions:has(.dataviews-all-actions-button[aria-expanded=true]) {
+  opacity: 1;
+}
+
 .dataviews-view-grid__media--clickable {
   cursor: pointer;
 }
@@ -1197,6 +1254,13 @@
   color: #1e1e1e;
   margin: 0 0 8px 0;
   padding: 0 48px;
+  container-type: inline-size;
+}
+@container (max-width: 430px) {
+  .dataviews-view-grid__group-header {
+    padding-right: 24px;
+    padding-left: 24px;
+  }
 }
 
 div.dataviews-view-list {
@@ -1631,6 +1695,167 @@ div.dataviews-view-list {
   color: #1e1e1e;
 }
 
+.dataviews-view-grid-items {
+  margin-bottom: auto;
+  display: grid;
+  gap: 32px;
+  grid-template-rows: max-content;
+  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+  padding: 0 48px 24px;
+  container-type: inline-size;
+  /**
+  	* Breakpoints were adjusted from media queries breakpoints to account for
+  	* the sidebar width. This was done to match the existing styles we had.
+  	*/
+}
+@container (max-width: 430px) {
+  .dataviews-view-grid-items {
+    padding-right: 24px;
+    padding-left: 24px;
+  }
+}
+@media not (prefers-reduced-motion) {
+  .dataviews-view-grid-items {
+    transition: padding ease-out 0.1s;
+  }
+}
+
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card {
+  height: 100%;
+  justify-content: flex-start;
+  position: relative;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-actions {
+  padding: 8px 0 4px;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field {
+  min-height: 24px;
+  display: flex;
+  align-items: center;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field--clickable {
+  width: fit-content;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
+  color: #1e1e1e;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__media::after,
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__media:focus::after {
+  background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card.is-selected .dataviews-view-picker-grid__media::after {
+  box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__media:focus::after {
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+}
+.dataviews-view-picker-grid:focus-visible[aria-activedescendant] {
+  outline: none;
+}
+.dataviews-view-picker-grid:focus-visible [data-active-item=true] {
+  outline: 2px solid var(--wp-admin-theme-color);
+}
+.dataviews-view-picker-grid .dataviews-selection-checkbox {
+  top: 8px !important;
+}
+.dataviews-view-picker-grid .dataviews-selection-checkbox input {
+  pointer-events: none;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__media {
+  width: 100%;
+  aspect-ratio: 1/1;
+  background-color: #fff;
+  border-radius: 4px;
+  position: relative;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__media img {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__media::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  pointer-events: none;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__fields {
+  position: relative;
+  font-size: 12px;
+  line-height: 16px;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__fields:not(:empty) {
+  padding: 0 0 12px;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field-value:not(:empty) {
+  min-height: 24px;
+  line-height: 20px;
+  padding-top: 2px;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field {
+  min-height: 24px;
+  align-items: center;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-name {
+  width: 35%;
+  color: #757575;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field .dataviews-view-picker-grid__field-value {
+  width: 65%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__fields .dataviews-view-picker-grid__field:not(:has(.dataviews-view-picker-grid__field-value:not(:empty))) {
+  display: none;
+}
+.dataviews-view-picker-grid .dataviews-view-picker-grid__badge-fields:not(:empty) {
+  padding-bottom: 12px;
+}
+
+.dataviews-view-picker-grid__field-value:empty,
+.dataviews-view-picker-grid__field:empty {
+  display: none;
+}
+
+.dataviews-view-picker-grid__card .dataviews-selection-checkbox {
+  position: absolute;
+  top: -9999em;
+  right: 8px;
+  z-index: 1;
+}
+@media (hover: none) {
+  .dataviews-view-picker-grid__card .dataviews-selection-checkbox {
+    top: 8px;
+  }
+}
+
+.dataviews-view-picker-grid__card:hover .dataviews-selection-checkbox,
+.dataviews-view-picker-grid__card:focus-within .dataviews-selection-checkbox,
+.dataviews-view-picker-grid__card.is-selected .dataviews-selection-checkbox {
+  top: 8px;
+}
+
+.dataviews-view-picker-grid__media--clickable {
+  cursor: pointer;
+}
+
+.dataviews-view-picker-grid-group__header {
+  font-size: 15px;
+  font-weight: 500;
+  color: #1e1e1e;
+  margin: 0 0 8px 0;
+  padding: 0 48px;
+}
+
 .dataviews-controls__datetime {
   border: none;
   padding: 0;
@@ -1743,4 +1968,19 @@ div.dataviews-view-list {
   min-height: 32px;
   display: flex;
   align-items: center;
+}
+
+.dataforms-layouts-card__field {
+  width: 100%;
+}
+
+.dataforms-layouts-card__field-description {
+  color: #757575;
+  display: block;
+  font-size: 13px;
+  margin-bottom: 16px;
+}
+
+.dataforms-layouts-row__field-control {
+  width: 100%;
 }