fix: prevent asset conflicts between React and Grid.js versions

Add coexistence checks to all enqueue methods to prevent loading
both React and Grid.js assets simultaneously.

Changes:
- ReactAdmin.php: Only enqueue React assets when ?react=1
- Init.php: Skip Grid.js when React active on admin pages
- Form.php, Coupon.php, Access.php: Restore classic assets when ?react=0
- Customer.php, Product.php, License.php: Add coexistence checks

Now the toggle between Classic and React versions works correctly.

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
dwindown
2026-04-18 17:02:14 +07:00
parent bd9cdac02e
commit e8fbfb14c1
74973 changed files with 6658406 additions and 71 deletions

View File

@@ -0,0 +1,45 @@
import { createElement } from "react";
/**
* External dependencies
*/
/**
* Internal dependencies
*/
import { contextConnect, useContextSystem } from '../context';
import { DropdownContentWrapperDiv } from './styles';
function UnconnectedDropdownContentWrapper(props, forwardedRef) {
const {
paddingSize = 'small',
...derivedProps
} = useContextSystem(props, 'DropdownContentWrapper');
return createElement(DropdownContentWrapperDiv, {
...derivedProps,
paddingSize: paddingSize,
ref: forwardedRef
});
}
/**
* A convenience wrapper for the `renderContent` when you want to apply
* different padding. (Default is `paddingSize="small"`).
*
* ```jsx
* import {
* Dropdown,
* __experimentalDropdownContentWrapper as DropdownContentWrapper,
* } from '@wordpress/components';
*
* <Dropdown
* renderContent={ () => (
* <DropdownContentWrapper paddingSize="medium">
* My dropdown content
* </DropdownContentWrapper>
* ) }
* />
* ```
*/
export const DropdownContentWrapper = contextConnect(UnconnectedDropdownContentWrapper, 'DropdownContentWrapper');
export default DropdownContentWrapper;
//# sourceMappingURL=dropdown-content-wrapper.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["contextConnect","useContextSystem","DropdownContentWrapperDiv","UnconnectedDropdownContentWrapper","props","forwardedRef","paddingSize","derivedProps","createElement","ref","DropdownContentWrapper"],"sources":["@wordpress/components/src/dropdown/dropdown-content-wrapper.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { contextConnect, useContextSystem } from '../context';\nimport { DropdownContentWrapperDiv } from './styles';\nimport type { DropdownContentWrapperProps } from './types';\n\nfunction UnconnectedDropdownContentWrapper(\n\tprops: WordPressComponentProps< DropdownContentWrapperProps, 'div', false >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { paddingSize = 'small', ...derivedProps } = useContextSystem(\n\t\tprops,\n\t\t'DropdownContentWrapper'\n\t);\n\n\treturn (\n\t\t<DropdownContentWrapperDiv\n\t\t\t{ ...derivedProps }\n\t\t\tpaddingSize={ paddingSize }\n\t\t\tref={ forwardedRef }\n\t\t/>\n\t);\n}\n\n/**\n * A convenience wrapper for the `renderContent` when you want to apply\n * different padding. (Default is `paddingSize=\"small\"`).\n *\n * ```jsx\n * import {\n * Dropdown,\n * __experimentalDropdownContentWrapper as DropdownContentWrapper,\n * } from '@wordpress/components';\n *\n * <Dropdown\n * renderContent={ () => (\n * <DropdownContentWrapper paddingSize=\"medium\">\n * My dropdown content\n * </DropdownContentWrapper>\n * ) }\n * />\n * ```\n */\nexport const DropdownContentWrapper = contextConnect(\n\tUnconnectedDropdownContentWrapper,\n\t'DropdownContentWrapper'\n);\n\nexport default DropdownContentWrapper;\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,cAAc,EAAEC,gBAAgB,QAAQ,YAAY;AAC7D,SAASC,yBAAyB,QAAQ,UAAU;AAGpD,SAASC,iCAAiCA,CACzCC,KAA2E,EAC3EC,YAAiC,EAChC;EACD,MAAM;IAAEC,WAAW,GAAG,OAAO;IAAE,GAAGC;EAAa,CAAC,GAAGN,gBAAgB,CAClEG,KAAK,EACL,wBACD,CAAC;EAED,OACCI,aAAA,CAACN,yBAAyB;IAAA,GACpBK,YAAY;IACjBD,WAAW,EAAGA,WAAa;IAC3BG,GAAG,EAAGJ;EAAc,CACpB,CAAC;AAEJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMK,sBAAsB,GAAGV,cAAc,CACnDG,iCAAiC,EACjC,wBACD,CAAC;AAED,eAAeO,sBAAsB"}

View File

@@ -0,0 +1,142 @@
import { createElement } from "react";
/**
* External dependencies
*/
import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { useRef, useState } from '@wordpress/element';
import { useMergeRefs } from '@wordpress/compose';
import deprecated from '@wordpress/deprecated';
/**
* Internal dependencies
*/
import { contextConnect, useContextSystem } from '../context';
import { useControlledValue } from '../utils/hooks';
import Popover from '../popover';
const UnconnectedDropdown = (props, forwardedRef) => {
const {
renderContent,
renderToggle,
className,
contentClassName,
expandOnMobile,
headerTitle,
focusOnMount,
popoverProps,
onClose,
onToggle,
style,
open,
defaultOpen,
// Deprecated props
position,
// From context system
variant
} = useContextSystem(props, 'Dropdown');
if (position !== undefined) {
deprecated('`position` prop in wp.components.Dropdown', {
since: '6.2',
alternative: '`popoverProps.placement` prop',
hint: 'Note that the `position` prop will override any values passed through the `popoverProps.placement` prop.'
});
}
// Use internal state instead of a ref to make sure that the component
// re-renders when the popover's anchor updates.
const [fallbackPopoverAnchor, setFallbackPopoverAnchor] = useState(null);
const containerRef = useRef();
const [isOpen, setIsOpen] = useControlledValue({
defaultValue: defaultOpen,
value: open,
onChange: onToggle
});
/**
* Closes the popover when focus leaves it unless the toggle was pressed or
* focus has moved to a separate dialog. The former is to let the toggle
* handle closing the popover and the latter is to preserve presence in
* case a dialog has opened, allowing focus to return when it's dismissed.
*/
function closeIfFocusOutside() {
if (!containerRef.current) {
return;
}
const {
ownerDocument
} = containerRef.current;
const dialog = ownerDocument?.activeElement?.closest('[role="dialog"]');
if (!containerRef.current.contains(ownerDocument.activeElement) && (!dialog || dialog.contains(containerRef.current))) {
close();
}
}
function close() {
onClose?.();
setIsOpen(false);
}
const args = {
isOpen: !!isOpen,
onToggle: () => setIsOpen(!isOpen),
onClose: close
};
const popoverPropsHaveAnchor = !!popoverProps?.anchor ||
// Note: `anchorRef`, `getAnchorRect` and `anchorRect` are deprecated and
// be removed from `Popover` from WordPress 6.3
!!popoverProps?.anchorRef || !!popoverProps?.getAnchorRect || !!popoverProps?.anchorRect;
return createElement("div", {
className: className,
ref: useMergeRefs([containerRef, forwardedRef, setFallbackPopoverAnchor])
// Some UAs focus the closest focusable parent when the toggle is
// clicked. Making this div focusable ensures such UAs will focus
// it and `closeIfFocusOutside` can tell if the toggle was clicked.
,
tabIndex: -1,
style: style
}, renderToggle(args), isOpen && createElement(Popover, {
position: position,
onClose: close,
onFocusOutside: closeIfFocusOutside,
expandOnMobile: expandOnMobile,
headerTitle: headerTitle,
focusOnMount: focusOnMount
// This value is used to ensure that the dropdowns
// align with the editor header by default.
,
offset: 13,
anchor: !popoverPropsHaveAnchor ? fallbackPopoverAnchor : undefined,
variant: variant,
...popoverProps,
className: classnames('components-dropdown__content', popoverProps?.className, contentClassName)
}, renderContent(args)));
};
/**
* Renders a button that opens a floating content modal when clicked.
*
* ```jsx
* import { Button, Dropdown } from '@wordpress/components';
*
* const MyDropdown = () => (
* <Dropdown
* className="my-container-class-name"
* contentClassName="my-dropdown-content-classname"
* popoverProps={ { placement: 'bottom-start' } }
* renderToggle={ ( { isOpen, onToggle } ) => (
* <Button
* variant="primary"
* onClick={ onToggle }
* aria-expanded={ isOpen }
* >
* Toggle Dropdown!
* </Button>
* ) }
* renderContent={ () => <div>This is the content of the dropdown.</div> }
* />
* );
* ```
*/
export const Dropdown = contextConnect(UnconnectedDropdown, 'Dropdown');
export default Dropdown;
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,64 @@
import { createElement, Fragment } from "react";
/**
* WordPress dependencies
*/
import { Component } from '@wordpress/element';
class Dropdown extends Component {
constructor() {
super(...arguments);
this.toggle = this.toggle.bind(this);
this.close = this.close.bind(this);
this.state = {
isOpen: false
};
}
componentWillUnmount() {
const {
isOpen
} = this.state;
const {
onToggle
} = this.props;
if (isOpen && onToggle) {
onToggle(false);
}
}
componentDidUpdate(prevProps, prevState) {
const {
isOpen
} = this.state;
const {
onToggle
} = this.props;
if (prevState.isOpen !== isOpen && onToggle) {
onToggle(isOpen);
}
}
toggle() {
this.setState(state => ({
isOpen: !state.isOpen
}));
}
close() {
this.setState({
isOpen: false
});
}
render() {
const {
isOpen
} = this.state;
const {
renderContent,
renderToggle
} = this.props;
const args = {
isOpen,
onToggle: this.toggle,
onClose: this.close
};
return createElement(Fragment, null, renderToggle(args), isOpen && renderContent(args));
}
}
export default Dropdown;
//# sourceMappingURL=index.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["Component","Dropdown","constructor","arguments","toggle","bind","close","state","isOpen","componentWillUnmount","onToggle","props","componentDidUpdate","prevProps","prevState","setState","render","renderContent","renderToggle","args","onClose","createElement","Fragment"],"sources":["@wordpress/components/src/dropdown/index.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\n\nclass Dropdown extends Component {\n\tconstructor() {\n\t\tsuper( ...arguments );\n\n\t\tthis.toggle = this.toggle.bind( this );\n\t\tthis.close = this.close.bind( this );\n\n\t\tthis.state = {\n\t\t\tisOpen: false,\n\t\t};\n\t}\n\n\tcomponentWillUnmount() {\n\t\tconst { isOpen } = this.state;\n\t\tconst { onToggle } = this.props;\n\t\tif ( isOpen && onToggle ) {\n\t\t\tonToggle( false );\n\t\t}\n\t}\n\n\tcomponentDidUpdate( prevProps, prevState ) {\n\t\tconst { isOpen } = this.state;\n\t\tconst { onToggle } = this.props;\n\t\tif ( prevState.isOpen !== isOpen && onToggle ) {\n\t\t\tonToggle( isOpen );\n\t\t}\n\t}\n\n\ttoggle() {\n\t\tthis.setState( ( state ) => ( {\n\t\t\tisOpen: ! state.isOpen,\n\t\t} ) );\n\t}\n\n\tclose() {\n\t\tthis.setState( { isOpen: false } );\n\t}\n\n\trender() {\n\t\tconst { isOpen } = this.state;\n\t\tconst { renderContent, renderToggle } = this.props;\n\n\t\tconst args = { isOpen, onToggle: this.toggle, onClose: this.close };\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ renderToggle( args ) }\n\t\t\t\t{ isOpen && renderContent( args ) }\n\t\t\t</>\n\t\t);\n\t}\n}\n\nexport default Dropdown;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,oBAAoB;AAE9C,MAAMC,QAAQ,SAASD,SAAS,CAAC;EAChCE,WAAWA,CAAA,EAAG;IACb,KAAK,CAAE,GAAGC,SAAU,CAAC;IAErB,IAAI,CAACC,MAAM,GAAG,IAAI,CAACA,MAAM,CAACC,IAAI,CAAE,IAAK,CAAC;IACtC,IAAI,CAACC,KAAK,GAAG,IAAI,CAACA,KAAK,CAACD,IAAI,CAAE,IAAK,CAAC;IAEpC,IAAI,CAACE,KAAK,GAAG;MACZC,MAAM,EAAE;IACT,CAAC;EACF;EAEAC,oBAAoBA,CAAA,EAAG;IACtB,MAAM;MAAED;IAAO,CAAC,GAAG,IAAI,CAACD,KAAK;IAC7B,MAAM;MAAEG;IAAS,CAAC,GAAG,IAAI,CAACC,KAAK;IAC/B,IAAKH,MAAM,IAAIE,QAAQ,EAAG;MACzBA,QAAQ,CAAE,KAAM,CAAC;IAClB;EACD;EAEAE,kBAAkBA,CAAEC,SAAS,EAAEC,SAAS,EAAG;IAC1C,MAAM;MAAEN;IAAO,CAAC,GAAG,IAAI,CAACD,KAAK;IAC7B,MAAM;MAAEG;IAAS,CAAC,GAAG,IAAI,CAACC,KAAK;IAC/B,IAAKG,SAAS,CAACN,MAAM,KAAKA,MAAM,IAAIE,QAAQ,EAAG;MAC9CA,QAAQ,CAAEF,MAAO,CAAC;IACnB;EACD;EAEAJ,MAAMA,CAAA,EAAG;IACR,IAAI,CAACW,QAAQ,CAAIR,KAAK,KAAQ;MAC7BC,MAAM,EAAE,CAAED,KAAK,CAACC;IACjB,CAAC,CAAG,CAAC;EACN;EAEAF,KAAKA,CAAA,EAAG;IACP,IAAI,CAACS,QAAQ,CAAE;MAAEP,MAAM,EAAE;IAAM,CAAE,CAAC;EACnC;EAEAQ,MAAMA,CAAA,EAAG;IACR,MAAM;MAAER;IAAO,CAAC,GAAG,IAAI,CAACD,KAAK;IAC7B,MAAM;MAAEU,aAAa;MAAEC;IAAa,CAAC,GAAG,IAAI,CAACP,KAAK;IAElD,MAAMQ,IAAI,GAAG;MAAEX,MAAM;MAAEE,QAAQ,EAAE,IAAI,CAACN,MAAM;MAAEgB,OAAO,EAAE,IAAI,CAACd;IAAM,CAAC;IAEnE,OACCe,aAAA,CAAAC,QAAA,QACGJ,YAAY,CAAEC,IAAK,CAAC,EACpBX,MAAM,IAAIS,aAAa,CAAEE,IAAK,CAC/B,CAAC;EAEL;AACD;AAEA,eAAelB,QAAQ"}

View File

@@ -0,0 +1,26 @@
import _styled from "@emotion/styled/base";
/**
* External dependencies
*/
import { css } from '@emotion/react';
/**
* Internal dependencies
*/
import { space } from '../utils/space';
const padding = ({
paddingSize = 'small'
}) => {
if (paddingSize === 'none') return;
const paddingValues = {
small: space(2),
medium: space(4)
};
return /*#__PURE__*/css("padding:", paddingValues[paddingSize] || paddingValues.small, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:padding;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZHJvcGRvd24vc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9CVyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL2Ryb3Bkb3duL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgc3BhY2UgfSBmcm9tICcuLi91dGlscy9zcGFjZSc7XG5pbXBvcnQgdHlwZSB7IERyb3Bkb3duQ29udGVudFdyYXBwZXJQcm9wcyB9IGZyb20gJy4vdHlwZXMnO1xuXG5jb25zdCBwYWRkaW5nID0gKCB7IHBhZGRpbmdTaXplID0gJ3NtYWxsJyB9OiBEcm9wZG93bkNvbnRlbnRXcmFwcGVyUHJvcHMgKSA9PiB7XG5cdGlmICggcGFkZGluZ1NpemUgPT09ICdub25lJyApIHJldHVybjtcblxuXHRjb25zdCBwYWRkaW5nVmFsdWVzID0ge1xuXHRcdHNtYWxsOiBzcGFjZSggMiApLFxuXHRcdG1lZGl1bTogc3BhY2UoIDQgKSxcblx0fTtcblxuXHRyZXR1cm4gY3NzYFxuXHRcdHBhZGRpbmc6ICR7IHBhZGRpbmdWYWx1ZXNbIHBhZGRpbmdTaXplIF0gfHwgcGFkZGluZ1ZhbHVlcy5zbWFsbCB9O1xuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IERyb3Bkb3duQ29udGVudFdyYXBwZXJEaXYgPSBzdHlsZWQuZGl2PCBEcm9wZG93bkNvbnRlbnRXcmFwcGVyUHJvcHMgPmBcblx0Ly8gTmVnYXRpdmUgbWFyZ2luIHRvIHJlc2V0IChvZmZzZXQpIHRoZSBkZWZhdWx0IHBhZGRpbmcgb24gLmNvbXBvbmVudHMtcG9wb3Zlcl9fY29udGVudFxuXHRtYXJnaW4tbGVmdDogJHsgc3BhY2UoIC0yICkgfTtcblx0bWFyZ2luLXJpZ2h0OiAkeyBzcGFjZSggLTIgKSB9O1xuXHQmOmZpcnN0LW9mLXR5cGUge1xuXHRcdG1hcmdpbi10b3A6ICR7IHNwYWNlKCAtMiApIH07XG5cdH1cblx0JjpsYXN0LW9mLXR5cGUge1xuXHRcdG1hcmdpbi1ib3R0b206ICR7IHNwYWNlKCAtMiApIH07XG5cdH1cblxuXHQkeyBwYWRkaW5nIH07XG5gO1xuIl19 */");
};
export const DropdownContentWrapperDiv = _styled("div", process.env.NODE_ENV === "production" ? {
target: "eovvns30"
} : {
target: "eovvns30",
label: "DropdownContentWrapperDiv"
})("margin-left:", space(-2), ";margin-right:", space(-2), ";&:first-of-type{margin-top:", space(-2), ";}&:last-of-type{margin-bottom:", space(-2), ";}", padding, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZHJvcGRvd24vc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlCa0YiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9kcm9wZG93bi9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IHNwYWNlIH0gZnJvbSAnLi4vdXRpbHMvc3BhY2UnO1xuaW1wb3J0IHR5cGUgeyBEcm9wZG93bkNvbnRlbnRXcmFwcGVyUHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuY29uc3QgcGFkZGluZyA9ICggeyBwYWRkaW5nU2l6ZSA9ICdzbWFsbCcgfTogRHJvcGRvd25Db250ZW50V3JhcHBlclByb3BzICkgPT4ge1xuXHRpZiAoIHBhZGRpbmdTaXplID09PSAnbm9uZScgKSByZXR1cm47XG5cblx0Y29uc3QgcGFkZGluZ1ZhbHVlcyA9IHtcblx0XHRzbWFsbDogc3BhY2UoIDIgKSxcblx0XHRtZWRpdW06IHNwYWNlKCA0ICksXG5cdH07XG5cblx0cmV0dXJuIGNzc2Bcblx0XHRwYWRkaW5nOiAkeyBwYWRkaW5nVmFsdWVzWyBwYWRkaW5nU2l6ZSBdIHx8IHBhZGRpbmdWYWx1ZXMuc21hbGwgfTtcblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBEcm9wZG93bkNvbnRlbnRXcmFwcGVyRGl2ID0gc3R5bGVkLmRpdjwgRHJvcGRvd25Db250ZW50V3JhcHBlclByb3BzID5gXG5cdC8vIE5lZ2F0aXZlIG1hcmdpbiB0byByZXNldCAob2Zmc2V0KSB0aGUgZGVmYXVsdCBwYWRkaW5nIG9uIC5jb21wb25lbnRzLXBvcG92ZXJfX2NvbnRlbnRcblx0bWFyZ2luLWxlZnQ6ICR7IHNwYWNlKCAtMiApIH07XG5cdG1hcmdpbi1yaWdodDogJHsgc3BhY2UoIC0yICkgfTtcblx0JjpmaXJzdC1vZi10eXBlIHtcblx0XHRtYXJnaW4tdG9wOiAkeyBzcGFjZSggLTIgKSB9O1xuXHR9XG5cdCY6bGFzdC1vZi10eXBlIHtcblx0XHRtYXJnaW4tYm90dG9tOiAkeyBzcGFjZSggLTIgKSB9O1xuXHR9XG5cblx0JHsgcGFkZGluZyB9O1xuYDtcbiJdfQ== */"));
//# sourceMappingURL=styles.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["css","space","padding","paddingSize","paddingValues","small","medium","process","env","NODE_ENV","DropdownContentWrapperDiv","_styled","target","label"],"sources":["@wordpress/components/src/dropdown/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { space } from '../utils/space';\nimport type { DropdownContentWrapperProps } from './types';\n\nconst padding = ( { paddingSize = 'small' }: DropdownContentWrapperProps ) => {\n\tif ( paddingSize === 'none' ) return;\n\n\tconst paddingValues = {\n\t\tsmall: space( 2 ),\n\t\tmedium: space( 4 ),\n\t};\n\n\treturn css`\n\t\tpadding: ${ paddingValues[ paddingSize ] || paddingValues.small };\n\t`;\n};\n\nexport const DropdownContentWrapperDiv = styled.div< DropdownContentWrapperProps >`\n\t// Negative margin to reset (offset) the default padding on .components-popover__content\n\tmargin-left: ${ space( -2 ) };\n\tmargin-right: ${ space( -2 ) };\n\t&:first-of-type {\n\t\tmargin-top: ${ space( -2 ) };\n\t}\n\t&:last-of-type {\n\t\tmargin-bottom: ${ space( -2 ) };\n\t}\n\n\t${ padding };\n`;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,GAAG,QAAQ,gBAAgB;AAGpC;AACA;AACA;AACA,SAASC,KAAK,QAAQ,gBAAgB;AAGtC,MAAMC,OAAO,GAAGA,CAAE;EAAEC,WAAW,GAAG;AAAqC,CAAC,KAAM;EAC7E,IAAKA,WAAW,KAAK,MAAM,EAAG;EAE9B,MAAMC,aAAa,GAAG;IACrBC,KAAK,EAAEJ,KAAK,CAAE,CAAE,CAAC;IACjBK,MAAM,EAAEL,KAAK,CAAE,CAAE;EAClB,CAAC;EAED,oBAAOD,GAAG,aACGI,aAAa,CAAED,WAAW,CAAE,IAAIC,aAAa,CAACC,KAAK,SAAAE,OAAA,CAAAC,GAAA,CAAAC,QAAA,6CAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA;AAEjE,CAAC;AAED,OAAO,MAAMC,yBAAyB,GAAAC,OAAA,QAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,mBAErBZ,KAAK,CAAE,CAAC,CAAE,CAAC,oBACVA,KAAK,CAAE,CAAC,CAAE,CAAC,kCAEZA,KAAK,CAAE,CAAC,CAAE,CAAC,qCAGRA,KAAK,CAAE,CAAC,CAAE,CAAC,QAG3BC,OAAO,SAAAK,OAAA,CAAAC,GAAA,CAAAC,QAAA,4kDACV"}

View File

@@ -0,0 +1,2 @@
export {};
//# sourceMappingURL=types.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":[],"sources":["@wordpress/components/src/dropdown/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type Popover from '../popover';\nimport type { PopoverProps } from '../popover/types';\n\ntype CallbackProps = {\n\tisOpen: boolean;\n\tonToggle: () => void;\n\tonClose: () => void;\n};\n\nexport type DropdownContentWrapperProps = {\n\t/**\n\t * Amount of padding to apply on the dropdown content.\n\t *\n\t * @default 'small'\n\t */\n\tpaddingSize?: 'none' | 'small' | 'medium';\n};\n\nexport type DropdownProps = {\n\t/**\n\t * The className of the global container.\n\t */\n\tclassName?: string;\n\t/**\n\t * If you want to target the dropdown menu for styling purposes,\n\t * you need to provide a contentClassName because it's not being rendered\n\t * as a child of the container node.\n\t */\n\tcontentClassName?: string;\n\t/**\n\t * Opt-in prop to show popovers fullscreen on mobile.\n\t *\n\t * @default false\n\t */\n\texpandOnMobile?: boolean;\n\t/**\n\t * By default, the first tabbable element in the popover will receive focus\n\t * when it mounts. This is the same as setting this prop to \"firstElement\".\n\t * Specifying a true value will focus the container instead.\n\t * Specifying a false value disables the focus handling entirely\n\t * (this should only be done when an appropriately accessible\n\t * substitute behavior exists).\n\t *\n\t * @default 'firstElement'\n\t */\n\tfocusOnMount?: 'firstElement' | boolean;\n\t/**\n\t * Set this to customize the text that is shown in the dropdown's header\n\t * when it is fullscreen on mobile.\n\t */\n\theaderTitle?: string;\n\t/**\n\t * A callback invoked when the popover should be closed.\n\t */\n\tonClose?: () => void;\n\t/**\n\t * A callback invoked when the state of the dropdown changes\n\t * from open to closed and vice versa.\n\t */\n\tonToggle?: ( willOpen: boolean ) => void;\n\t/**\n\t * Properties of popoverProps object will be passed as props\n\t * to the Popover component.\n\t * Use this object to access properties/features\n\t * of the Popover component that are not already exposed\n\t * in the Dropdown component,\n\t * e.g.: the ability to have the popover without an arrow.\n\t */\n\tpopoverProps?: Omit<\n\t\tComponentPropsWithoutRef< typeof Popover >,\n\t\t'children'\n\t>;\n\t/**\n\t * A callback invoked to render the content of the dropdown menu.\n\t * Its first argument is the same as the renderToggle prop.\n\t */\n\trenderContent: ( props: CallbackProps ) => ReactNode;\n\t/**\n\t * A callback invoked to render the Dropdown Toggle Button.\n\t *\n\t * The first argument of the callback is an object\n\t * containing the following properties:\n\t *\n\t * - isOpen: whether the dropdown menu is opened or not\n\t * - onToggle: A function switching the dropdown menu's state\n\t * from open to closed and vice versa\n\t * - onClose: A function that closes the menu if invoked\n\t */\n\trenderToggle: ( props: CallbackProps ) => ReactNode;\n\t/**\n\t * The style of the global container.\n\t */\n\tstyle?: CSSProperties;\n\t/**\n\t * Legacy way to specify the popover's position with respect to its anchor.\n\t * For details about the possible values, see the `Popover` component's docs.\n\t * _Note: this prop is deprecated. Use the `popoverProps.placement` prop\n\t * instead._\n\t *\n\t * @deprecated\n\t */\n\tposition?: PopoverProps[ 'position' ];\n\t/**\n\t * The controlled open state of the dropdown.\n\t * Must be used in conjunction with `onToggle`.\n\t */\n\topen?: boolean;\n\t/**\n\t * The open state of the dropdown when initially rendered.\n\t * Use when you do not need to control its open state. It will be overridden\n\t * by the `open` prop if it is specified on the component's first render.\n\t */\n\tdefaultOpen?: boolean;\n};\n\nexport type DropdownInternalContext = {\n\t/**\n\t * This variant can be used to change the appearance of the component in\n\t * specific contexts, ie. when rendered inside the `Toolbar` component.\n\t */\n\tvariant?: 'toolbar';\n};\n"],"mappings":""}