@wordpress/dataviews 1.1.0 → 2.0.0

package/build/dropdown-menu-helper.js

@@ -1,71 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DropdownMenuRadioItemCustom = void 0;
-var _react = require("react");
-var _components = require("@wordpress/components");
-var _element = require("@wordpress/element");
-var _primitives = require("@wordpress/primitives");
-var _lockUnlock = require("./lock-unlock");
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-const {
-  DropdownMenuItemV2: DropdownMenuItem
-} = (0, _lockUnlock.unlock)(_components.privateApis);
-const radioCheck = (0, _react.createElement)(_primitives.SVG, {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24"
-}, (0, _react.createElement)(_primitives.Circle, {
-  cx: 12,
-  cy: 12,
-  r: 3
-}));
-
-/**
- * A custom implementation of a radio menu item using the standard menu item
- * component, which allows deselecting selected values.
- */
-const DropdownMenuRadioItemCustom = exports.DropdownMenuRadioItemCustom = (0, _element.forwardRef)(function DropdownMenuRadioItemCustom({
-  checked,
-  name,
-  value,
-  hideOnClick,
-  onChange,
-  onClick,
-  ...props
-}, ref) {
-  const onClickHandler = e => {
-    onClick?.(e);
-    onChange?.({
-      ...e,
-      target: {
-        ...e.target,
-        value
-      }
-    });
-  };
-  return (0, _react.createElement)(DropdownMenuItem, {
-    ref: ref,
-    role: "menuitemradio",
-    name: name,
-    "aria-checked": checked,
-    hideOnClick: !!hideOnClick,
-    prefix: checked ? (0, _react.createElement)(_components.Icon, {
-      icon: radioCheck
-    }) : (0, _react.createElement)("span", {
-      className: "dataviews-filters__custom-menu-radio-item-prefix",
-      "aria-hidden": "true"
-    }),
-    onClick: onClickHandler,
-    ...props
-  });
-});
-//# sourceMappingURL=dropdown-menu-helper.js.map

package/build/dropdown-menu-helper.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_components","require","_element","_primitives","_lockUnlock","DropdownMenuItemV2","DropdownMenuItem","unlock","componentsPrivateApis","radioCheck","_react","createElement","SVG","xmlns","viewBox","Circle","cx","cy","r","DropdownMenuRadioItemCustom","exports","forwardRef","checked","name","value","hideOnClick","onChange","onClick","props","ref","onClickHandler","e","target","role","prefix","Icon","icon","className"],"sources":["@wordpress/dataviews/src/dropdown-menu-helper.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tIcon,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { forwardRef } from '@wordpress/element';\nimport { SVG, Circle } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from './lock-unlock';\n\nconst { DropdownMenuItemV2: DropdownMenuItem } = unlock(\n\tcomponentsPrivateApis\n);\n\nconst radioCheck = (\n\t<SVG xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n\t\t<Circle cx={ 12 } cy={ 12 } r={ 3 }></Circle>\n\t</SVG>\n);\n\n/**\n * A custom implementation of a radio menu item using the standard menu item\n * component, which allows deselecting selected values.\n */\nexport const DropdownMenuRadioItemCustom = forwardRef(\n\tfunction DropdownMenuRadioItemCustom(\n\t\t{ checked, name, value, hideOnClick, onChange, onClick, ...props },\n\t\tref\n\t) {\n\t\tconst onClickHandler = ( e ) => {\n\t\t\tonClick?.( e );\n\t\t\tonChange?.( { ...e, target: { ...e.target, value } } );\n\t\t};\n\t\treturn (\n\t\t\t<DropdownMenuItem\n\t\t\t\tref={ ref }\n\t\t\t\trole=\"menuitemradio\"\n\t\t\t\tname={ name }\n\t\t\t\taria-checked={ checked }\n\t\t\t\thideOnClick={ !! hideOnClick }\n\t\t\t\tprefix={\n\t\t\t\t\tchecked ? (\n\t\t\t\t\t\t<Icon icon={ radioCheck } />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName=\"dataviews-filters__custom-menu-radio-item-prefix\"\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t></span>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t\tonClick={ onClickHandler }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t);\n\t}\n);\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAIA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AAKA,IAAAG,WAAA,GAAAH,OAAA;AAbA;AACA;AACA;;AAQA;AACA;AACA;;AAGA,MAAM;EAAEI,kBAAkB,EAAEC;AAAiB,CAAC,GAAG,IAAAC,kBAAM,EACtDC,uBACD,CAAC;AAED,MAAMC,UAAU,GACf,IAAAC,MAAA,CAAAC,aAAA,EAACR,WAAA,CAAAS,GAAG;EAACC,KAAK,EAAC,4BAA4B;EAACC,OAAO,EAAC;AAAW,GAC1D,IAAAJ,MAAA,CAAAC,aAAA,EAACR,WAAA,CAAAY,MAAM;EAACC,EAAE,EAAG,EAAI;EAACC,EAAE,EAAG,EAAI;EAACC,CAAC,EAAG;AAAG,CAAS,CACxC,CACL;;AAED;AACA;AACA;AACA;AACO,MAAMC,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,GAAG,IAAAE,mBAAU,EACpD,SAASF,2BAA2BA,CACnC;EAAEG,OAAO;EAAEC,IAAI;EAAEC,KAAK;EAAEC,WAAW;EAAEC,QAAQ;EAAEC,OAAO;EAAE,GAAGC;AAAM,CAAC,EAClEC,GAAG,EACF;EACD,MAAMC,cAAc,GAAKC,CAAC,IAAM;IAC/BJ,OAAO,GAAII,CAAE,CAAC;IACdL,QAAQ,GAAI;MAAE,GAAGK,CAAC;MAAEC,MAAM,EAAE;QAAE,GAAGD,CAAC,CAACC,MAAM;QAAER;MAAM;IAAE,CAAE,CAAC;EACvD,CAAC;EACD,OACC,IAAAd,MAAA,CAAAC,aAAA,EAACL,gBAAgB;IAChBuB,GAAG,EAAGA,GAAK;IACXI,IAAI,EAAC,eAAe;IACpBV,IAAI,EAAGA,IAAM;IACb,gBAAeD,OAAS;IACxBG,WAAW,EAAG,CAAC,CAAEA,WAAa;IAC9BS,MAAM,EACLZ,OAAO,GACN,IAAAZ,MAAA,CAAAC,aAAA,EAACX,WAAA,CAAAmC,IAAI;MAACC,IAAI,EAAG3B;IAAY,CAAE,CAAC,GAE5B,IAAAC,MAAA,CAAAC,aAAA;MACC0B,SAAS,EAAC,kDAAkD;MAC5D,eAAY;IAAM,CACZ,CAER;IACDV,OAAO,EAAGG,cAAgB;IAAA,GACrBF;EAAK,CACV,CAAC;AAEJ,CACD,CAAC","ignoreList":[]}

package/build-module/dropdown-menu-helper.js

@@ -1,64 +0,0 @@
-import { createElement } from "react";
-/**
- * WordPress dependencies
- */
-import { Icon, privateApis as componentsPrivateApis } from '@wordpress/components';
-import { forwardRef } from '@wordpress/element';
-import { SVG, Circle } from '@wordpress/primitives';
-
-/**
- * Internal dependencies
- */
-import { unlock } from './lock-unlock';
-const {
-  DropdownMenuItemV2: DropdownMenuItem
-} = unlock(componentsPrivateApis);
-const radioCheck = createElement(SVG, {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24"
-}, createElement(Circle, {
-  cx: 12,
-  cy: 12,
-  r: 3
-}));
-
-/**
- * A custom implementation of a radio menu item using the standard menu item
- * component, which allows deselecting selected values.
- */
-export const DropdownMenuRadioItemCustom = forwardRef(function DropdownMenuRadioItemCustom({
-  checked,
-  name,
-  value,
-  hideOnClick,
-  onChange,
-  onClick,
-  ...props
-}, ref) {
-  const onClickHandler = e => {
-    onClick?.(e);
-    onChange?.({
-      ...e,
-      target: {
-        ...e.target,
-        value
-      }
-    });
-  };
-  return createElement(DropdownMenuItem, {
-    ref: ref,
-    role: "menuitemradio",
-    name: name,
-    "aria-checked": checked,
-    hideOnClick: !!hideOnClick,
-    prefix: checked ? createElement(Icon, {
-      icon: radioCheck
-    }) : createElement("span", {
-      className: "dataviews-filters__custom-menu-radio-item-prefix",
-      "aria-hidden": "true"
-    }),
-    onClick: onClickHandler,
-    ...props
-  });
-});
-//# sourceMappingURL=dropdown-menu-helper.js.map

package/build-module/dropdown-menu-helper.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["Icon","privateApis","componentsPrivateApis","forwardRef","SVG","Circle","unlock","DropdownMenuItemV2","DropdownMenuItem","radioCheck","createElement","xmlns","viewBox","cx","cy","r","DropdownMenuRadioItemCustom","checked","name","value","hideOnClick","onChange","onClick","props","ref","onClickHandler","e","target","role","prefix","icon","className"],"sources":["@wordpress/dataviews/src/dropdown-menu-helper.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tIcon,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { forwardRef } from '@wordpress/element';\nimport { SVG, Circle } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from './lock-unlock';\n\nconst { DropdownMenuItemV2: DropdownMenuItem } = unlock(\n\tcomponentsPrivateApis\n);\n\nconst radioCheck = (\n\t<SVG xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n\t\t<Circle cx={ 12 } cy={ 12 } r={ 3 }></Circle>\n\t</SVG>\n);\n\n/**\n * A custom implementation of a radio menu item using the standard menu item\n * component, which allows deselecting selected values.\n */\nexport const DropdownMenuRadioItemCustom = forwardRef(\n\tfunction DropdownMenuRadioItemCustom(\n\t\t{ checked, name, value, hideOnClick, onChange, onClick, ...props },\n\t\tref\n\t) {\n\t\tconst onClickHandler = ( e ) => {\n\t\t\tonClick?.( e );\n\t\t\tonChange?.( { ...e, target: { ...e.target, value } } );\n\t\t};\n\t\treturn (\n\t\t\t<DropdownMenuItem\n\t\t\t\tref={ ref }\n\t\t\t\trole=\"menuitemradio\"\n\t\t\t\tname={ name }\n\t\t\t\taria-checked={ checked }\n\t\t\t\thideOnClick={ !! hideOnClick }\n\t\t\t\tprefix={\n\t\t\t\t\tchecked ? (\n\t\t\t\t\t\t<Icon icon={ radioCheck } />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName=\"dataviews-filters__custom-menu-radio-item-prefix\"\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t></span>\n\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t\tonClick={ onClickHandler }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t);\n\t}\n);\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,IAAI,EACJC,WAAW,IAAIC,qBAAqB,QAC9B,uBAAuB;AAC9B,SAASC,UAAU,QAAQ,oBAAoB;AAC/C,SAASC,GAAG,EAAEC,MAAM,QAAQ,uBAAuB;;AAEnD;AACA;AACA;AACA,SAASC,MAAM,QAAQ,eAAe;AAEtC,MAAM;EAAEC,kBAAkB,EAAEC;AAAiB,CAAC,GAAGF,MAAM,CACtDJ,qBACD,CAAC;AAED,MAAMO,UAAU,GACfC,aAAA,CAACN,GAAG;EAACO,KAAK,EAAC,4BAA4B;EAACC,OAAO,EAAC;AAAW,GAC1DF,aAAA,CAACL,MAAM;EAACQ,EAAE,EAAG,EAAI;EAACC,EAAE,EAAG,EAAI;EAACC,CAAC,EAAG;AAAG,CAAS,CACxC,CACL;;AAED;AACA;AACA;AACA;AACA,OAAO,MAAMC,2BAA2B,GAAGb,UAAU,CACpD,SAASa,2BAA2BA,CACnC;EAAEC,OAAO;EAAEC,IAAI;EAAEC,KAAK;EAAEC,WAAW;EAAEC,QAAQ;EAAEC,OAAO;EAAE,GAAGC;AAAM,CAAC,EAClEC,GAAG,EACF;EACD,MAAMC,cAAc,GAAKC,CAAC,IAAM;IAC/BJ,OAAO,GAAII,CAAE,CAAC;IACdL,QAAQ,GAAI;MAAE,GAAGK,CAAC;MAAEC,MAAM,EAAE;QAAE,GAAGD,CAAC,CAACC,MAAM;QAAER;MAAM;IAAE,CAAE,CAAC;EACvD,CAAC;EACD,OACCT,aAAA,CAACF,gBAAgB;IAChBgB,GAAG,EAAGA,GAAK;IACXI,IAAI,EAAC,eAAe;IACpBV,IAAI,EAAGA,IAAM;IACb,gBAAeD,OAAS;IACxBG,WAAW,EAAG,CAAC,CAAEA,WAAa;IAC9BS,MAAM,EACLZ,OAAO,GACNP,aAAA,CAACV,IAAI;MAAC8B,IAAI,EAAGrB;IAAY,CAAE,CAAC,GAE5BC,aAAA;MACCqB,SAAS,EAAC,kDAAkD;MAC5D,eAAY;IAAM,CACZ,CAER;IACDT,OAAO,EAAGG,cAAgB;IAAA,GACrBF;EAAK,CACV,CAAC;AAEJ,CACD,CAAC","ignoreList":[]}

package/src/dropdown-menu-helper.js

@@ -1,61 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	Icon,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
-import { forwardRef } from '@wordpress/element';
-import { SVG, Circle } from '@wordpress/primitives';
-
-/**
- * Internal dependencies
- */
-import { unlock } from './lock-unlock';
-
-const { DropdownMenuItemV2: DropdownMenuItem } = unlock(
-	componentsPrivateApis
-);
-
-const radioCheck = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Circle cx={ 12 } cy={ 12 } r={ 3 }></Circle>
-	</SVG>
-);
-
-/**
- * A custom implementation of a radio menu item using the standard menu item
- * component, which allows deselecting selected values.
- */
-export const DropdownMenuRadioItemCustom = forwardRef(
-	function DropdownMenuRadioItemCustom(
-		{ checked, name, value, hideOnClick, onChange, onClick, ...props },
-		ref
-	) {
-		const onClickHandler = ( e ) => {
-			onClick?.( e );
-			onChange?.( { ...e, target: { ...e.target, value } } );
-		};
-		return (
-			<DropdownMenuItem
-				ref={ ref }
-				role="menuitemradio"
-				name={ name }
-				aria-checked={ checked }
-				hideOnClick={ !! hideOnClick }
-				prefix={
-					checked ? (
-						<Icon icon={ radioCheck } />
-					) : (
-						<span
-							className="dataviews-filters__custom-menu-radio-item-prefix"
-							aria-hidden="true"
-						></span>
-					)
-				}
-				onClick={ onClickHandler }
-				{ ...props }
-			/>
-		);
-	}
-);

package/src/view-list.js

@@ -1,207 +0,0 @@
-/**
- * External dependencies
- */
-import classNames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useInstanceId } from '@wordpress/compose';
-import {
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	privateApis as componentsPrivateApis,
-	Spinner,
-	VisuallyHidden,
-} from '@wordpress/components';
-import { useCallback, useEffect, useRef } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { unlock } from './lock-unlock';
-
-const {
-	useCompositeStoreV2: useCompositeStore,
-	CompositeV2: Composite,
-	CompositeItemV2: CompositeItem,
-	CompositeRowV2: CompositeRow,
-} = unlock( componentsPrivateApis );
-
-function ListItem( {
-	id,
-	item,
-	isSelected,
-	onSelect,
-	mediaField,
-	primaryField,
-	visibleFields,
-} ) {
-	const itemRef = useRef( null );
-	const labelId = `${ id }-label`;
-	const descriptionId = `${ id }-description`;
-
-	useEffect( () => {
-		if ( isSelected ) {
-			itemRef.current?.scrollIntoView( {
-				behavior: 'auto',
-				block: 'nearest',
-				inline: 'nearest',
-			} );
-		}
-	}, [ isSelected ] );
-
-	return (
-		<CompositeRow
-			ref={ itemRef }
-			render={ <li /> }
-			role="row"
-			className={ classNames( {
-				'is-selected': isSelected,
-			} ) }
-		>
-			<HStack className="dataviews-view-list__item-wrapper">
-				<div role="gridcell">
-					<CompositeItem
-						render={ <div /> }
-						role="button"
-						id={ id }
-						aria-pressed={ isSelected }
-						aria-labelledby={ labelId }
-						aria-describedby={ descriptionId }
-						className="dataviews-view-list__item"
-						onClick={ () => onSelect( item ) }
-					>
-						<HStack
-							spacing={ 3 }
-							justify="start"
-							alignment="flex-start"
-						>
-							<div className="dataviews-view-list__media-wrapper">
-								{ mediaField?.render( { item } ) || (
-									<div className="dataviews-view-list__media-placeholder"></div>
-								) }
-							</div>
-							<VStack spacing={ 1 }>
-								<span
-									className="dataviews-view-list__primary-field"
-									id={ labelId }
-								>
-									{ primaryField?.render( { item } ) }
-								</span>
-								<div
-									className="dataviews-view-list__fields"
-									id={ descriptionId }
-								>
-									{ visibleFields.map( ( field ) => (
-										<div
-											key={ field.id }
-											className="dataviews-view-list__field"
-										>
-											<VisuallyHidden
-												as="span"
-												className="dataviews-view-list__field-label"
-											>
-												{ field.header }
-											</VisuallyHidden>
-											<span className="dataviews-view-list__field-value">
-												{ field.render( { item } ) }
-											</span>
-										</div>
-									) ) }
-								</div>
-							</VStack>
-						</HStack>
-					</CompositeItem>
-				</div>
-			</HStack>
-		</CompositeRow>
-	);
-}
-
-export default function ViewList( {
-	view,
-	fields,
-	data,
-	isLoading,
-	getItemId,
-	onSelectionChange,
-	selection,
-	id: preferredId,
-} ) {
-	const baseId = useInstanceId( ViewList, 'view-list', preferredId );
-	const selectedItem = data?.findLast( ( item ) =>
-		selection.includes( item.id )
-	);
-
-	const mediaField = fields.find(
-		( field ) => field.id === view.layout.mediaField
-	);
-	const primaryField = fields.find(
-		( field ) => field.id === view.layout.primaryField
-	);
-	const visibleFields = fields.filter(
-		( field ) =>
-			! view.hiddenFields.includes( field.id ) &&
-			! [ view.layout.primaryField, view.layout.mediaField ].includes(
-				field.id
-			)
-	);
-
-	const onSelect = useCallback(
-		( item ) => onSelectionChange( [ item ] ),
-		[ onSelectionChange ]
-	);
-
-	const getItemDomId = useCallback(
-		( item ) => ( item ? `${ baseId }-${ getItemId( item ) }` : undefined ),
-		[ baseId, getItemId ]
-	);
-
-	const store = useCompositeStore( {
-		defaultActiveId: getItemDomId( selectedItem ),
-	} );
-
-	const hasData = data?.length;
-	if ( ! hasData ) {
-		return (
-			<div
-				className={ classNames( {
-					'dataviews-loading': isLoading,
-					'dataviews-no-results': ! hasData && ! isLoading,
-				} ) }
-			>
-				{ ! hasData && (
-					<p>{ isLoading ? <Spinner /> : __( 'No results' ) }</p>
-				) }
-			</div>
-		);
-	}
-
-	return (
-		<Composite
-			id={ baseId }
-			render={ <ul /> }
-			className="dataviews-view-list"
-			role="grid"
-			store={ store }
-		>
-			{ data.map( ( item ) => {
-				const id = getItemDomId( item );
-				return (
-					<ListItem
-						key={ id }
-						id={ id }
-						item={ item }
-						isSelected={ item === selectedItem }
-						onSelect={ onSelect }
-						mediaField={ mediaField }
-						primaryField={ primaryField }
-						visibleFields={ visibleFields }
-					/>
-				);
-			} ) }
-		</Composite>
-	);
-}