@wordpress/dataviews 4.22.0 → 5.0.1-next.719a03cbe.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 { ReactElement, ComponentType } 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\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' | 'media';\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< 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?: ( item: Item, context?: ValidationContext ) => boolean;\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 | 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< DataViewRenderFieldProps< 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\nexport type DataFormControlProps< Item > = {\n\tdata: Item;\n\tfield: NormalizedField< Item >;\n\tonChange: ( value: Record< string, any > ) => void;\n\thideLabelFromVision?: boolean;\n};\n\nexport type DataViewRenderFieldProps< Item > = {\n\titem: Item;\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\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\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 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\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\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\tisItemClickable: ( item: Item ) => boolean;\n\tview: View;\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 type SimpleFormField = {\n\tid: string;\n\tlayout?: 'regular' | 'panel';\n\tlabelPosition?: 'side' | 'top' | 'none';\n};\n\nexport type CombinedFormField = {\n\tid: string;\n\tlabel?: string;\n\tlayout?: 'regular' | 'panel';\n\tlabelPosition?: 'side' | 'top' | 'none';\n\tchildren: Array< FormField | string >;\n};\n\nexport type FormField = SimpleFormField | CombinedFormField;\n\n/**\n * The form configuration.\n */\nexport type Form = {\n\ttype?: 'regular' | 'panel';\n\tfields?: Array< FormField | string >;\n\tlabelPosition?: 'side' | 'top' | 'none';\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 { ReactElement, ComponentType, ComponentProps } 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| 'media'\n\t| 'boolean'\n\t| 'email'\n\t| 'array';\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 | 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\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?: ( item: Item, context?: ValidationContext ) => boolean;\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: ( item: Item, context?: ValidationContext ) => boolean;\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};\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\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\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\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}\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 type SimpleFormField = {\n\tid: string;\n\tlayout?: 'regular' | 'panel';\n\tlabelPosition?: 'side' | 'top' | 'none';\n};\n\nexport type CombinedFormField = {\n\tid: string;\n\tlabel?: string;\n\tlayout?: 'regular' | 'panel';\n\tlabelPosition?: 'side' | 'top' | 'none';\n\tchildren: Array< FormField | string >;\n};\n\nexport type FormField = SimpleFormField | CombinedFormField;\n\n/**\n * The form configuration.\n */\nexport type Form = {\n\ttype?: 'regular' | 'panel';\n\tfields?: Array< FormField | string >;\n\tlabelPosition?: 'side' | 'top' | 'none';\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/utils.js

@@ -1,23 +1,16 @@
 /**
  * Internal dependencies
  */
-import { ALL_OPERATORS, OPERATOR_IS, OPERATOR_IS_NOT, OPERATOR_IS_ANY, OPERATOR_IS_NONE } from './constants';
-export function sanitizeOperators(field) {
-  let operators = field.filterBy?.operators;
 
-  // Assign default values.
-  if (!operators || !Array.isArray(operators)) {
-    operators = [OPERATOR_IS_ANY, OPERATOR_IS_NONE];
-  }
-
-  // Make sure only valid operators are used.
-  operators = operators.filter(operator => ALL_OPERATORS.includes(operator));
-
-  // Do not allow mixing single & multiselection operators.
-  // Remove multiselection operators if any of the single selection ones is present.
-  if (operators.includes(OPERATOR_IS) || operators.includes(OPERATOR_IS_NOT)) {
-    operators = operators.filter(operator => [OPERATOR_IS, OPERATOR_IS_NOT].includes(operator));
-  }
-  return operators;
+export function renderFromElements({
+  item,
+  field
+}) {
+  const value = field.getValue({
+    item
+  });
+  return field?.elements?.find(element => element.value === value)?.label || field.getValue({
+    item
+  });
 }
 //# sourceMappingURL=utils.js.map

package/build-module/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["ALL_OPERATORS","OPERATOR_IS","OPERATOR_IS_NOT","OPERATOR_IS_ANY","OPERATOR_IS_NONE","sanitizeOperators","field","operators","filterBy","Array","isArray","filter","operator","includes"],"sources":["@wordpress/dataviews/src/utils.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport {\n\tALL_OPERATORS,\n\tOPERATOR_IS,\n\tOPERATOR_IS_NOT,\n\tOPERATOR_IS_ANY,\n\tOPERATOR_IS_NONE,\n} from './constants';\nimport type { NormalizedField } from './types';\n\nexport function sanitizeOperators< Item >( field: NormalizedField< Item > ) {\n\tlet operators = field.filterBy?.operators;\n\n\t// Assign default values.\n\tif ( ! operators || ! Array.isArray( operators ) ) {\n\t\toperators = [ OPERATOR_IS_ANY, OPERATOR_IS_NONE ];\n\t}\n\n\t// Make sure only valid operators are used.\n\toperators = operators.filter( ( operator ) =>\n\t\tALL_OPERATORS.includes( operator )\n\t);\n\n\t// Do not allow mixing single & multiselection operators.\n\t// Remove multiselection operators if any of the single selection ones is present.\n\tif (\n\t\toperators.includes( OPERATOR_IS ) ||\n\t\toperators.includes( OPERATOR_IS_NOT )\n\t) {\n\t\toperators = operators.filter( ( operator ) =>\n\t\t\t[ OPERATOR_IS, OPERATOR_IS_NOT ].includes( operator )\n\t\t);\n\t}\n\n\treturn operators;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SACCA,aAAa,EACbC,WAAW,EACXC,eAAe,EACfC,eAAe,EACfC,gBAAgB,QACV,aAAa;AAGpB,OAAO,SAASC,iBAAiBA,CAAUC,KAA8B,EAAG;EAC3E,IAAIC,SAAS,GAAGD,KAAK,CAACE,QAAQ,EAAED,SAAS;;EAEzC;EACA,IAAK,CAAEA,SAAS,IAAI,CAAEE,KAAK,CAACC,OAAO,CAAEH,SAAU,CAAC,EAAG;IAClDA,SAAS,GAAG,CAAEJ,eAAe,EAAEC,gBAAgB,CAAE;EAClD;;EAEA;EACAG,SAAS,GAAGA,SAAS,CAACI,MAAM,CAAIC,QAAQ,IACvCZ,aAAa,CAACa,QAAQ,CAAED,QAAS,CAClC,CAAC;;EAED;EACA;EACA,IACCL,SAAS,CAACM,QAAQ,CAAEZ,WAAY,CAAC,IACjCM,SAAS,CAACM,QAAQ,CAAEX,eAAgB,CAAC,EACpC;IACDK,SAAS,GAAGA,SAAS,CAACI,MAAM,CAAIC,QAAQ,IACvC,CAAEX,WAAW,EAAEC,eAAe,CAAE,CAACW,QAAQ,CAAED,QAAS,CACrD,CAAC;EACF;EAEA,OAAOL,SAAS;AACjB","ignoreList":[]}
+{"version":3,"names":["renderFromElements","item","field","value","getValue","elements","find","element","label"],"sources":["@wordpress/dataviews/src/utils.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { DataViewRenderFieldProps } from './types';\n\nexport function renderFromElements< Item >( {\n\titem,\n\tfield,\n}: DataViewRenderFieldProps< Item > ) {\n\tconst value = field.getValue( { item } );\n\treturn (\n\t\tfield?.elements?.find( ( element ) => element.value === value )\n\t\t\t?.label || field.getValue( { item } )\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;;AAGA,OAAO,SAASA,kBAAkBA,CAAU;EAC3CC,IAAI;EACJC;AACiC,CAAC,EAAG;EACrC,MAAMC,KAAK,GAAGD,KAAK,CAACE,QAAQ,CAAE;IAAEH;EAAK,CAAE,CAAC;EACxC,OACCC,KAAK,EAAEG,QAAQ,EAAEC,IAAI,CAAIC,OAAO,IAAMA,OAAO,CAACJ,KAAK,KAAKA,KAAM,CAAC,EAC5DK,KAAK,IAAIN,KAAK,CAACE,QAAQ,CAAE;IAAEH;EAAK,CAAE,CAAC;AAExC","ignoreList":[]}

package/build-style/style-rtl.css

@@ -343,6 +343,30 @@
   border-radius: 2px;
 }
 
+/**
+ * Applying a consistent 24px padding when DataViews are placed within cards.
+ */
+.components-card__body:has(> .dataviews-wrapper) {
+  padding: 8px 0 0;
+  overflow: hidden;
+}
+.components-card__body:has(> .dataviews-wrapper) .dataviews__view-actions,
+.components-card__body:has(> .dataviews-wrapper) .dataviews-filters__container,
+.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 {
+  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 {
+  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 {
+  padding-inline-end: 24px;
+}
+
 .dataviews-bulk-actions-footer__item-count {
   color: #1e1e1e;
   font-weight: 500;
@@ -383,17 +407,26 @@
 }
 
 .dataviews-filters__summary-operators-container {
-  padding: 8px 8px 0;
+  padding: 8px 16px;
 }
-.dataviews-filters__summary-operators-container:has(+ .dataviews-filters__search-widget-listbox) {
+.dataviews-filters__summary-operators-container:has(+ .dataviews-filters__search-widget-listbox), .dataviews-filters__summary-operators-container:has(+ .dataviews-filters__user-input-widget) {
   border-bottom: 1px solid #e0e0e0;
-  padding-bottom: 8px;
 }
 .dataviews-filters__summary-operators-container:empty {
   display: none;
 }
 .dataviews-filters__summary-operators-container .dataviews-filters__summary-operators-filter-name {
   color: #757575;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-shrink: 0; /* Prevents this element from shrinking */
+  max-width: calc(100% - 55px);
+}
+.dataviews-filters__summary-operators-container .dataviews-filters__summary-operators-filter-select {
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 .dataviews-filters__summary-chip-container {
@@ -491,9 +524,13 @@
   gap: 8px;
   border-radius: 2px;
   box-sizing: border-box;
-  padding: 8px 12px;
+  padding: 4px 12px;
   cursor: default;
-  margin-block-end: 2px;
+  min-height: 32px;
+  font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  font-weight: 400;
+  font-size: 13px;
+  line-height: 20px;
 }
 .dataviews-filters__search-widget-listitem:last-child {
   margin-block-end: 0;
@@ -502,16 +539,23 @@
   background-color: var(--wp-admin-theme-color);
   color: #fff;
 }
-.dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-check, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-check, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-check {
-  fill: #fff;
-}
 .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-description, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-description, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-description {
   color: #fff;
 }
-.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-check {
-  width: 24px;
-  height: 24px;
-  flex-shrink: 0;
+.dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-single-selection, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-single-selection, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-single-selection {
+  border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
+  background: #fff;
+}
+.dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-single-selection.is-selected, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-single-selection.is-selected, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-single-selection.is-selected {
+  border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
+  background: var(--wp-admin-theme-color-darker-20, #183ad6);
+}
+.dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-multi-selection, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-multi-selection, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-multi-selection {
+  border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
+}
+.dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-multi-selection.is-selected, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-multi-selection.is-selected, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-multi-selection.is-selected {
+  border-color: var(--wp-admin-theme-color-darker-20, #183ad6);
+  background: var(--wp-admin-theme-color-darker-20, #183ad6);
 }
 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-description {
   display: block;
@@ -521,6 +565,208 @@
   line-height: 16px;
   color: #757575;
 }
+.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
+  border: 1px solid #1e1e1e;
+  margin-left: 12px;
+  transition: none;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  min-width: 24px;
+  max-width: 24px;
+  position: relative;
+  margin: 0;
+  padding: 0;
+}
+@media not (prefers-reduced-motion) {
+  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
+    transition: box-shadow 0.1s linear;
+  }
+}
+@media (min-width: 600px) {
+  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection {
+    height: 16px;
+    width: 16px;
+    min-width: 16px;
+    max-width: 16px;
+  }
+}
+.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:checked::before {
+  box-sizing: inherit;
+  width: 12px;
+  height: 12px;
+  position: absolute;
+  top: 50%;
+  right: 50%;
+  transform: translate(50%, -50%);
+  margin: 0;
+  background-color: #fff;
+  border: 4px solid #fff;
+}
+@media (min-width: 600px) {
+  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:checked::before {
+    width: 8px;
+    height: 8px;
+  }
+}
+.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:focus {
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
+}
+.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection:checked {
+  background: var(--wp-admin-theme-color);
+  border: none;
+}
+.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected {
+  background: var(--wp-admin-theme-color, #3858e9);
+  border-color: var(--wp-admin-theme-color, #3858e9);
+}
+.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected::before {
+  content: "";
+  border-radius: 50%;
+  box-sizing: inherit;
+  width: 12px;
+  height: 12px;
+  position: absolute;
+  top: 50%;
+  right: 50%;
+  transform: translate(50%, -50%);
+  margin: 0;
+  background-color: #fff;
+  border: 4px solid #fff;
+}
+@media (min-width: 600px) {
+  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-single-selection.is-selected::before {
+    width: 8px;
+    height: 8px;
+  }
+}
+.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
+  --checkbox-size: 24px;
+  border: 1px solid #1e1e1e;
+  margin-left: 12px;
+  transition: none;
+  border-radius: 2px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  padding: 6px 8px;
+  /* Fonts smaller than 16px causes mobile safari to zoom. */
+  font-size: 16px;
+  /* Override core line-height. To be reviewed. */
+  line-height: normal;
+  box-shadow: 0 0 0 transparent;
+  border-radius: 2px;
+  border: 1px solid #949494;
+  position: relative;
+  background: #fff;
+  color: #1e1e1e;
+  margin: 0;
+  padding: 0;
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+}
+@media not (prefers-reduced-motion) {
+  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
+    transition: box-shadow 0.1s linear;
+  }
+}
+@media (min-width: 600px) {
+  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
+    font-size: 13px;
+    /* Override core line-height. To be reviewed. */
+    line-height: normal;
+  }
+}
+.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
+  border-color: var(--wp-admin-theme-color);
+  box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
+}
+.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::-webkit-input-placeholder {
+  color: rgba(30, 30, 30, 0.62);
+}
+.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::-moz-placeholder {
+  color: rgba(30, 30, 30, 0.62);
+}
+.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:-ms-input-placeholder {
+  color: rgba(30, 30, 30, 0.62);
+}
+.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:focus {
+  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
+}
+.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:checked {
+  background: var(--wp-admin-theme-color);
+  border-color: var(--wp-admin-theme-color);
+}
+.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:checked::-ms-check {
+  opacity: 0;
+}
+.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:checked::before, .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed]::before {
+  margin: -3px -5px;
+  color: #fff;
+}
+@media (min-width: 782px) {
+  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:checked::before, .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed]::before {
+    margin: -4px -5px 0 0;
+  }
+}
+.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed] {
+  background: var(--wp-admin-theme-color);
+  border-color: var(--wp-admin-theme-color);
+}
+.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed]::before {
+  content: "\f460";
+  float: right;
+  display: inline-block;
+  vertical-align: middle;
+  width: 16px;
+  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
+  font: normal 30px/1 dashicons;
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+@media (min-width: 782px) {
+  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-checked=mixed]::before {
+    float: none;
+    font-size: 21px;
+  }
+}
+.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection[aria-disabled=true], .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection:disabled {
+  background: #f0f0f0;
+  border-color: #ddd;
+  cursor: default;
+  opacity: 1;
+}
+@media (min-width: 600px) {
+  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
+    --checkbox-size: 16px;
+  }
+}
+@media not (prefers-reduced-motion) {
+  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
+    transition: 0.1s border-color ease-in-out;
+  }
+}
+.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected {
+  background: var(--wp-admin-theme-color, #3858e9);
+  border-color: var(--wp-admin-theme-color, #3858e9);
+}
+.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
+  --checkmark-size: var(--checkbox-size);
+  fill: #fff;
+  position: absolute;
+  right: 50%;
+  top: 50%;
+  transform: translate(50%, -50%);
+  width: var(--checkmark-size);
+  height: var(--checkmark-size);
+}
+@media (min-width: 600px) {
+  .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
+    --checkmark-size: calc(var(--checkbox-size) + 4px);
+  }
+}
 
 .dataviews-filters__search-widget-filter-combobox__wrapper {
   position: relative;
@@ -626,6 +872,13 @@
   width: fit-content;
 }
 
+.dataviews-filters__user-input-widget {
+  padding: 16px;
+}
+.dataviews-filters__user-input-widget .components-input-control__prefix {
+  padding-right: 8px;
+}
+
 .dataviews-footer {
   position: sticky;
   bottom: 0;
@@ -1131,6 +1384,23 @@ div.dataviews-view-list {
 .dataviews-view-table th.dataviews-view-table__actions-column {
   text-align: left;
 }
+.dataviews-view-table td.dataviews-view-table__actions-column--sticky,
+.dataviews-view-table th.dataviews-view-table__actions-column--sticky {
+  position: sticky;
+  left: 0;
+  background-color: #fff;
+}
+.dataviews-view-table td.dataviews-view-table__actions-column--stuck::after,
+.dataviews-view-table th.dataviews-view-table__actions-column--stuck::after {
+  display: block;
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 1px;
+  background-color: #f0f0f0;
+}
 .dataviews-view-table td.dataviews-view-table__checkbox-column,
 .dataviews-view-table th.dataviews-view-table__checkbox-column {
   padding-left: 0;
@@ -1157,7 +1427,7 @@ div.dataviews-view-list {
 .dataviews-view-table tr:last-child {
   border-bottom: 0;
 }
-.dataviews-view-table tr.is-hovered {
+.dataviews-view-table tr.is-hovered, .dataviews-view-table tr.is-hovered .dataviews-view-table__actions-column--sticky {
   background-color: #f8f8f8;
 }
 .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input {
@@ -1191,6 +1461,12 @@ div.dataviews-view-list {
 .dataviews-view-table tr.is-selected:hover {
   background-color: rgba(var(--wp-admin-theme-color--rgb), 0.08);
 }
+.dataviews-view-table tr.is-selected .dataviews-view-table__actions-column--sticky {
+  background-color: color-mix(in srgb, rgb(var(--wp-admin-theme-color--rgb)) 4%, #fff);
+}
+.dataviews-view-table tr.is-selected:hover .dataviews-view-table__actions-column--sticky {
+  background-color: color-mix(in srgb, rgb(var(--wp-admin-theme-color--rgb)) 8%, #fff);
+}
 .dataviews-view-table thead {
   position: sticky;
   inset-block-start: 0;
@@ -1219,6 +1495,12 @@ div.dataviews-view-list {
   display: flex;
   align-items: center;
 }
+.dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper.dataviews-view-table__cell-align-end {
+  justify-content: flex-end;
+}
+.dataviews-view-table tbody .dataviews-view-table__cell-content-wrapper.dataviews-view-table__cell-align-center {
+  justify-content: center;
+}
 .dataviews-view-table tbody .components-v-stack > .dataviews-view-table__cell-content-wrapper:not(:first-child) {
   min-height: 0;
 }
@@ -1291,6 +1573,11 @@ div.dataviews-view-list {
   padding: 0;
 }
 
+.dataviews-controls__datetime-number,
+.dataviews-controls__datetime-unit {
+  flex: 1 1 50%;
+}
+
 .dataforms-layouts-panel__field {
   width: 100%;
   min-height: 32px;
@@ -1306,6 +1593,8 @@ div.dataviews-view-list {
   align-items: center;
   line-height: 20px;
   hyphens: auto;
+}
+.dataforms-layouts-panel__field-label--label-position-side {
   align-self: center;
 }
 
@@ -1323,6 +1612,9 @@ div.dataviews-view-list {
   text-wrap: pretty;
   min-height: 32px;
 }
+.dataforms-layouts-panel__field-control.components-button.is-link[aria-disabled=true] {
+  text-decoration: none;
+}
 .dataforms-layouts-panel__field-control .components-dropdown {
   max-width: 100%;
 }
@@ -1361,6 +1653,8 @@ div.dataviews-view-list {
   align-items: center;
   line-height: 20px;
   hyphens: auto;
+}
+.dataforms-layouts-regular__field-label--label-position-side {
   align-self: center;
 }