@wordpress/components 23.9.0 → 25.0.0

package/build-module/date-time/date-time/index.js

@@ -7,20 +7,14 @@ import { createElement, Fragment } from "@wordpress/element";
 /**
  * WordPress dependencies
  */
-import { useState, forwardRef } from '@wordpress/element';
-import { __, _x } from '@wordpress/i18n';
-import deprecated from '@wordpress/deprecated';
+import { forwardRef } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
-
-import Button from '../../button';
 import { default as DatePicker } from '../date';
 import { default as TimePicker } from '../time';
-import { Wrapper, CalendarHelp } from './styles';
-import { HStack } from '../../h-stack';
-import { Heading } from '../../heading';
-import { Spacer } from '../../spacer';
+import { Wrapper } from './styles';
 export { DatePicker, TimePicker };
 
 const noop = () => {};
@@ -33,40 +27,13 @@ function UnforwardedDateTimePicker(_ref, ref) {
     onMonthPreviewed = noop,
     onChange,
     events,
-    startOfWeek,
-    __nextRemoveHelpButton = false,
-    __nextRemoveResetButton = false
+    startOfWeek
   } = _ref;
-
-  if (!__nextRemoveHelpButton) {
-    deprecated('Help button in wp.components.DateTimePicker', {
-      since: '13.4',
-      version: '15.8',
-      // One year of plugin releases.
-      hint: 'Set the `__nextRemoveHelpButton` prop to `true` to remove this warning and opt in to the new behaviour, which will become the default in a future version.'
-    });
-  }
-
-  if (!__nextRemoveResetButton) {
-    deprecated('Reset button in wp.components.DateTimePicker', {
-      since: '13.4',
-      version: '15.8',
-      // One year of plugin releases.
-      hint: 'Set the `__nextRemoveResetButton` prop to `true` to remove this warning and opt in to the new behaviour, which will become the default in a future version.'
-    });
-  }
-
-  const [calendarHelpIsVisible, setCalendarHelpIsVisible] = useState(false);
-
-  function onClickDescriptionToggle() {
-    setCalendarHelpIsVisible(!calendarHelpIsVisible);
-  }
-
   return createElement(Wrapper, {
     ref: ref,
     className: "components-datetime",
     spacing: 4
-  }, !calendarHelpIsVisible && createElement(Fragment, null, createElement(TimePicker, {
+  }, createElement(Fragment, null, createElement(TimePicker, {
     currentTime: currentDate,
     onChange: onChange,
     is12Hour: is12Hour
@@ -77,47 +44,7 @@ function UnforwardedDateTimePicker(_ref, ref) {
     events: events,
     onMonthPreviewed: onMonthPreviewed,
     startOfWeek: startOfWeek
-  })), calendarHelpIsVisible && createElement(CalendarHelp, {
-    className: "components-datetime__calendar-help" // Unused, for backwards compatibility.
-
-  }, createElement(Heading, {
-    level: 4
-  }, __('Click to Select')), createElement("ul", null, createElement("li", null, __('Click the right or left arrows to select other months in the past or the future.')), createElement("li", null, __('Click the desired day to select it.'))), createElement(Heading, {
-    level: 4
-  }, __('Navigating with a keyboard')), createElement("ul", null, createElement("li", null, createElement("abbr", {
-    "aria-label": _x('Enter', 'keyboard button')
-  }, "\u21B5"), ' '
-  /* JSX removes whitespace, but a space is required for screen readers. */
-  , createElement("span", null, __('Select the date in focus.'))), createElement("li", null, createElement("abbr", {
-    "aria-label": __('Left and Right Arrows')
-  }, "\u2190/\u2192"), ' '
-  /* JSX removes whitespace, but a space is required for screen readers. */
-  , __('Move backward (left) or forward (right) by one day.')), createElement("li", null, createElement("abbr", {
-    "aria-label": __('Up and Down Arrows')
-  }, "\u2191/\u2193"), ' '
-  /* JSX removes whitespace, but a space is required for screen readers. */
-  , __('Move backward (up) or forward (down) by one week.')), createElement("li", null, createElement("abbr", {
-    "aria-label": __('Page Up and Page Down')
-  }, __('PgUp/PgDn')), ' '
-  /* JSX removes whitespace, but a space is required for screen readers. */
-  , __('Move backward (PgUp) or forward (PgDn) by one month.')), createElement("li", null, createElement("abbr", {
-    "aria-label": __('Home and End')
-  }, __('Home/End')), ' '
-  /* JSX removes whitespace, but a space is required for screen readers. */
-  , __('Go to the first (Home) or last (End) day of a week.')))), (!__nextRemoveResetButton || !__nextRemoveHelpButton) && createElement(HStack, {
-    className: "components-datetime__buttons" // Unused, for backwards compatibility.
-
-  }, !__nextRemoveResetButton && !calendarHelpIsVisible && currentDate && createElement(Button, {
-    className: "components-datetime__date-reset-button" // Unused, for backwards compatibility.
-    ,
-    variant: "link",
-    onClick: () => onChange === null || onChange === void 0 ? void 0 : onChange(null)
-  }, __('Reset')), createElement(Spacer, null), !__nextRemoveHelpButton && createElement(Button, {
-    className: "components-datetime__date-help-toggle" // Unused, for backwards compatibility.
-    ,
-    variant: "link",
-    onClick: onClickDescriptionToggle
-  }, calendarHelpIsVisible ? __('Close') : __('Calendar Help'))));
+  })));
 }
 /**
  * DateTimePicker is a React component that renders a calendar and clock for
@@ -136,8 +63,6 @@ function UnforwardedDateTimePicker(_ref, ref) {
  *       currentDate={ date }
  *       onChange={ ( newDate ) => setDate( newDate ) }
  *       is12Hour
- *       __nextRemoveHelpButton
- *       __nextRemoveResetButton
  *     />
  *   );
  * };

package/build-module/date-time/date-time/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/date-time/date-time/index.tsx"],"names":["useState","forwardRef","__","_x","deprecated","Button","default","DatePicker","TimePicker","Wrapper","CalendarHelp","HStack","Heading","Spacer","noop","UnforwardedDateTimePicker","ref","currentDate","is12Hour","isInvalidDate","onMonthPreviewed","onChange","events","startOfWeek","__nextRemoveHelpButton","__nextRemoveResetButton","since","version","hint","calendarHelpIsVisible","setCalendarHelpIsVisible","onClickDescriptionToggle","DateTimePicker"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useState, forwardRef } from '@wordpress/element';\nimport { __, _x } from '@wordpress/i18n';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { default as DatePicker } from '../date';\nimport { default as TimePicker } from '../time';\nimport type { DateTimePickerProps } from '../types';\nimport { Wrapper, CalendarHelp } from './styles';\nimport { HStack } from '../../h-stack';\nimport { Heading } from '../../heading';\nimport { Spacer } from '../../spacer';\n\nexport { DatePicker, TimePicker };\n\nconst noop = () => {};\n\nfunction UnforwardedDateTimePicker(\n\t{\n\t\tcurrentDate,\n\t\tis12Hour,\n\t\tisInvalidDate,\n\t\tonMonthPreviewed = noop,\n\t\tonChange,\n\t\tevents,\n\t\tstartOfWeek,\n\t\t__nextRemoveHelpButton = false,\n\t\t__nextRemoveResetButton = false,\n\t}: DateTimePickerProps,\n\tref: ForwardedRef< any >\n) {\n\tif ( ! __nextRemoveHelpButton ) {\n\t\tdeprecated( 'Help button in wp.components.DateTimePicker', {\n\t\t\tsince: '13.4',\n\t\t\tversion: '15.8', // One year of plugin releases.\n\t\t\thint: 'Set the `__nextRemoveHelpButton` prop to `true` to remove this warning and opt in to the new behaviour, which will become the default in a future version.',\n\t\t} );\n\t}\n\tif ( ! __nextRemoveResetButton ) {\n\t\tdeprecated( 'Reset button in wp.components.DateTimePicker', {\n\t\t\tsince: '13.4',\n\t\t\tversion: '15.8', // One year of plugin releases.\n\t\t\thint: 'Set the `__nextRemoveResetButton` prop to `true` to remove this warning and opt in to the new behaviour, which will become the default in a future version.',\n\t\t} );\n\t}\n\n\tconst [ calendarHelpIsVisible, setCalendarHelpIsVisible ] =\n\t\tuseState( false );\n\n\tfunction onClickDescriptionToggle() {\n\t\tsetCalendarHelpIsVisible( ! calendarHelpIsVisible );\n\t}\n\n\treturn (\n\t\t<Wrapper ref={ ref } className=\"components-datetime\" spacing={ 4 }>\n\t\t\t{ ! calendarHelpIsVisible && (\n\t\t\t\t<>\n\t\t\t\t\t<TimePicker\n\t\t\t\t\t\tcurrentTime={ currentDate }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tis12Hour={ is12Hour }\n\t\t\t\t\t/>\n\t\t\t\t\t<DatePicker\n\t\t\t\t\t\tcurrentDate={ currentDate }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tisInvalidDate={ isInvalidDate }\n\t\t\t\t\t\tevents={ events }\n\t\t\t\t\t\tonMonthPreviewed={ onMonthPreviewed }\n\t\t\t\t\t\tstartOfWeek={ startOfWeek }\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t) }\n\t\t\t{ calendarHelpIsVisible && (\n\t\t\t\t<CalendarHelp\n\t\t\t\t\tclassName=\"components-datetime__calendar-help\" // Unused, for backwards compatibility.\n\t\t\t\t>\n\t\t\t\t\t<Heading level={ 4 }>{ __( 'Click to Select' ) }</Heading>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Click the right or left arrows to select other months in the past or the future.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>{ __( 'Click the desired day to select it.' ) }</li>\n\t\t\t\t\t</ul>\n\t\t\t\t\t<Heading level={ 4 }>\n\t\t\t\t\t\t{ __( 'Navigating with a keyboard' ) }\n\t\t\t\t\t</Heading>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<abbr\n\t\t\t\t\t\t\t\taria-label={ _x( 'Enter', 'keyboard button' ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t↵\n\t\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t' ' /* JSX removes whitespace, but a space is required for screen readers. */\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t<span>{ __( 'Select the date in focus.' ) }</span>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<abbr aria-label={ __( 'Left and Right Arrows' ) }>\n\t\t\t\t\t\t\t\t←/→\n\t\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t' ' /* JSX removes whitespace, but a space is required for screen readers. */\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Move backward (left) or forward (right) by one day.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<abbr aria-label={ __( 'Up and Down Arrows' ) }>\n\t\t\t\t\t\t\t\t↑/↓\n\t\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t' ' /* JSX removes whitespace, but a space is required for screen readers. */\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Move backward (up) or forward (down) by one week.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<abbr aria-label={ __( 'Page Up and Page Down' ) }>\n\t\t\t\t\t\t\t\t{ __( 'PgUp/PgDn' ) }\n\t\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t' ' /* JSX removes whitespace, but a space is required for screen readers. */\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Move backward (PgUp) or forward (PgDn) by one month.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<abbr aria-label={ __( 'Home and End' ) }>\n\t\t\t\t\t\t\t\t{ /* Translators: Home/End reffer to the 'Home' and 'End' buttons on the keyboard.*/ }\n\t\t\t\t\t\t\t\t{ __( 'Home/End' ) }\n\t\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t' ' /* JSX removes whitespace, but a space is required for screen readers. */\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t'Go to the first (Home) or last (End) day of a week.'\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</CalendarHelp>\n\t\t\t) }\n\t\t\t{ ( ! __nextRemoveResetButton || ! __nextRemoveHelpButton ) && (\n\t\t\t\t<HStack\n\t\t\t\t\tclassName=\"components-datetime__buttons\" // Unused, for backwards compatibility.\n\t\t\t\t>\n\t\t\t\t\t{ ! __nextRemoveResetButton &&\n\t\t\t\t\t\t! calendarHelpIsVisible &&\n\t\t\t\t\t\tcurrentDate && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tclassName=\"components-datetime__date-reset-button\" // Unused, for backwards compatibility.\n\t\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\t\tonClick={ () => onChange?.( null ) }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Reset' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t) }\n\t\t\t\t\t<Spacer />\n\t\t\t\t\t{ ! __nextRemoveHelpButton && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"components-datetime__date-help-toggle\" // Unused, for backwards compatibility.\n\t\t\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\t\t\tonClick={ onClickDescriptionToggle }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ calendarHelpIsVisible\n\t\t\t\t\t\t\t\t? __( 'Close' )\n\t\t\t\t\t\t\t\t: __( 'Calendar Help' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t</Wrapper>\n\t);\n}\n\n/**\n * DateTimePicker is a React component that renders a calendar and clock for\n * date and time selection. The calendar and clock components can be accessed\n * individually using the `DatePicker` and `TimePicker` components respectively.\n *\n * ```jsx\n * import { DateTimePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDateTimePicker = () => {\n *   const [ date, setDate ] = useState( new Date() );\n *\n *   return (\n *     <DateTimePicker\n *       currentDate={ date }\n *       onChange={ ( newDate ) => setDate( newDate ) }\n *       is12Hour\n *       __nextRemoveHelpButton\n *       __nextRemoveResetButton\n *     />\n *   );\n * };\n * ```\n */\nexport const DateTimePicker = forwardRef( UnforwardedDateTimePicker );\n\nexport default DateTimePicker;\n"]}
+{"version":3,"sources":["@wordpress/components/src/date-time/date-time/index.tsx"],"names":["forwardRef","default","DatePicker","TimePicker","Wrapper","noop","UnforwardedDateTimePicker","ref","currentDate","is12Hour","isInvalidDate","onMonthPreviewed","onChange","events","startOfWeek","DateTimePicker"],"mappings":";;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,UAAT,QAA2B,oBAA3B;;AAGA;AACA;AACA;AACA,SAASC,OAAO,IAAIC,UAApB,QAAsC,SAAtC;AACA,SAASD,OAAO,IAAIE,UAApB,QAAsC,SAAtC;AAEA,SAASC,OAAT,QAAwB,UAAxB;AAEA,SAASF,UAAT,EAAqBC,UAArB;;AAEA,MAAME,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEA,SAASC,yBAAT,OAUCC,GAVD,EAWE;AAAA,MAVD;AACCC,IAAAA,WADD;AAECC,IAAAA,QAFD;AAGCC,IAAAA,aAHD;AAICC,IAAAA,gBAAgB,GAAGN,IAJpB;AAKCO,IAAAA,QALD;AAMCC,IAAAA,MAND;AAOCC,IAAAA;AAPD,GAUC;AACD,SACC,cAAC,OAAD;AAAS,IAAA,GAAG,EAAGP,GAAf;AAAqB,IAAA,SAAS,EAAC,qBAA/B;AAAqD,IAAA,OAAO,EAAG;AAA/D,KACC,8BACC,cAAC,UAAD;AACC,IAAA,WAAW,EAAGC,WADf;AAEC,IAAA,QAAQ,EAAGI,QAFZ;AAGC,IAAA,QAAQ,EAAGH;AAHZ,IADD,EAMC,cAAC,UAAD;AACC,IAAA,WAAW,EAAGD,WADf;AAEC,IAAA,QAAQ,EAAGI,QAFZ;AAGC,IAAA,aAAa,EAAGF,aAHjB;AAIC,IAAA,MAAM,EAAGG,MAJV;AAKC,IAAA,gBAAgB,EAAGF,gBALpB;AAMC,IAAA,WAAW,EAAGG;AANf,IAND,CADD,CADD;AAmBA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,MAAMC,cAAc,GAAGf,UAAU,CAAEM,yBAAF,CAAjC;AAEP,eAAeS,cAAf","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { default as DatePicker } from '../date';\nimport { default as TimePicker } from '../time';\nimport type { DateTimePickerProps } from '../types';\nimport { Wrapper } from './styles';\n\nexport { DatePicker, TimePicker };\n\nconst noop = () => {};\n\nfunction UnforwardedDateTimePicker(\n\t{\n\t\tcurrentDate,\n\t\tis12Hour,\n\t\tisInvalidDate,\n\t\tonMonthPreviewed = noop,\n\t\tonChange,\n\t\tevents,\n\t\tstartOfWeek,\n\t}: DateTimePickerProps,\n\tref: ForwardedRef< any >\n) {\n\treturn (\n\t\t<Wrapper ref={ ref } className=\"components-datetime\" spacing={ 4 }>\n\t\t\t<>\n\t\t\t\t<TimePicker\n\t\t\t\t\tcurrentTime={ currentDate }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tis12Hour={ is12Hour }\n\t\t\t\t/>\n\t\t\t\t<DatePicker\n\t\t\t\t\tcurrentDate={ currentDate }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tisInvalidDate={ isInvalidDate }\n\t\t\t\t\tevents={ events }\n\t\t\t\t\tonMonthPreviewed={ onMonthPreviewed }\n\t\t\t\t\tstartOfWeek={ startOfWeek }\n\t\t\t\t/>\n\t\t\t</>\n\t\t</Wrapper>\n\t);\n}\n\n/**\n * DateTimePicker is a React component that renders a calendar and clock for\n * date and time selection. The calendar and clock components can be accessed\n * individually using the `DatePicker` and `TimePicker` components respectively.\n *\n * ```jsx\n * import { DateTimePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyDateTimePicker = () => {\n *   const [ date, setDate ] = useState( new Date() );\n *\n *   return (\n *     <DateTimePicker\n *       currentDate={ date }\n *       onChange={ ( newDate ) => setDate( newDate ) }\n *       is12Hour\n *     />\n *   );\n * };\n * ```\n */\nexport const DateTimePicker = forwardRef( UnforwardedDateTimePicker );\n\nexport default DateTimePicker;\n"]}

package/build-module/date-time/date-time/styles.js

@@ -11,9 +11,9 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 import { VStack } from '../../v-stack';
 export const Wrapper = /*#__PURE__*/_styled(VStack, process.env.NODE_ENV === "production" ? {
-  target: "e1p5onf01"
+  target: "e1p5onf00"
 } : {
-  target: "e1p5onf01",
+  target: "e1p5onf00",
   label: "Wrapper"
 })(process.env.NODE_ENV === "production" ? {
   name: "1khn195",
@@ -21,21 +21,7 @@ export const Wrapper = /*#__PURE__*/_styled(VStack, process.env.NODE_ENV === "pr
 } : {
   name: "1khn195",
   styles: "box-sizing:border-box",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGF0ZS10aW1lL2RhdGUtdGltZS9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVXVDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGF0ZS10aW1lL2RhdGUtdGltZS9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IFZTdGFjayB9IGZyb20gJy4uLy4uL3Ytc3RhY2snO1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZCggVlN0YWNrIClgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5gO1xuXG5leHBvcnQgY29uc3QgQ2FsZW5kYXJIZWxwID0gc3R5bGVkLmRpdmBcblx0bWluLXdpZHRoOiAyNjBweDtcbmA7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-export const CalendarHelp = _styled("div", process.env.NODE_ENV === "production" ? {
-  target: "e1p5onf00"
-} : {
-  target: "e1p5onf00",
-  label: "CalendarHelp"
-})(process.env.NODE_ENV === "production" ? {
-  name: "l0rwn2",
-  styles: "min-width:260px"
-} : {
-  name: "l0rwn2",
-  styles: "min-width:260px",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGF0ZS10aW1lL2RhdGUtdGltZS9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBY3NDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGF0ZS10aW1lL2RhdGUtdGltZS9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IFZTdGFjayB9IGZyb20gJy4uLy4uL3Ytc3RhY2snO1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZCggVlN0YWNrIClgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5gO1xuXG5leHBvcnQgY29uc3QgQ2FsZW5kYXJIZWxwID0gc3R5bGVkLmRpdmBcblx0bWluLXdpZHRoOiAyNjBweDtcbmA7XG4iXX0= */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGF0ZS10aW1lL2RhdGUtdGltZS9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVXVDIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvZGF0ZS10aW1lL2RhdGUtdGltZS9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IFZTdGFjayB9IGZyb20gJy4uLy4uL3Ytc3RhY2snO1xuXG5leHBvcnQgY29uc3QgV3JhcHBlciA9IHN0eWxlZCggVlN0YWNrIClgXG5cdGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG5gO1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });
 //# sourceMappingURL=styles.js.map

package/build-module/date-time/date-time/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/date-time/date-time/styles.ts"],"names":["VStack","Wrapper","CalendarHelp"],"mappings":";;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,MAAT,QAAuB,eAAvB;AAEA,OAAO,MAAMC,OAAO,GAAG,qBAAQD,MAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAb;AAIP,OAAO,MAAME,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { VStack } from '../../v-stack';\n\nexport const Wrapper = styled( VStack )`\n\tbox-sizing: border-box;\n`;\n\nexport const CalendarHelp = styled.div`\n\tmin-width: 260px;\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/date-time/date-time/styles.ts"],"names":["VStack","Wrapper"],"mappings":";;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,MAAT,QAAuB,eAAvB;AAEA,OAAO,MAAMC,OAAO,GAAG,qBAAQD,MAAR;AAAA;AAAA;AAAA;AAAA;AAAA,EAAH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAb","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport { VStack } from '../../v-stack';\n\nexport const Wrapper = styled( VStack )`\n\tbox-sizing: border-box;\n`;\n"]}

package/build-module/dimension-control/index.js

@@ -23,8 +23,8 @@ import sizesTable, { findSizeBySlug } from './sizes';
  * This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
  *
  * ```jsx
- * import { useState } from 'react';
  * import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
  *
  * export default function MyCustomDimensionControl() {
  * 	const [ paddingSize, setPaddingSize ] = useState( '' );

package/build-module/dimension-control/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/dimension-control/index.tsx"],"names":["classnames","__","Icon","SelectControl","sizesTable","findSizeBySlug","DimensionControl","props","label","value","sizes","icon","onChange","className","onChangeSpacingSize","val","theSize","slug","undefined","formatSizesAsOptions","theSizes","options","map","name","selectLabel"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,IAAP,MAAiB,SAAjB;AACA,OAAOC,aAAP,MAA0B,mBAA1B;AACA,OAAOC,UAAP,IAAqBC,cAArB,QAA2C,SAA3C;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAT,CAA2BC,KAA3B,EAA0D;AAChE,QAAM;AACLC,IAAAA,KADK;AAELC,IAAAA,KAFK;AAGLC,IAAAA,KAAK,GAAGN,UAHH;AAILO,IAAAA,IAJK;AAKLC,IAAAA,QALK;AAMLC,IAAAA,SAAS,GAAG;AANP,MAOFN,KAPJ;;AASA,QAAMO,mBAAoE,GACvEC,GAAF,IAAW;AACV,UAAMC,OAAO,GAAGX,cAAc,CAAEK,KAAF,EAASK,GAAT,CAA9B;;AAEA,QAAK,CAAEC,OAAF,IAAaP,KAAK,KAAKO,OAAO,CAACC,IAApC,EAA2C;AAC1CL,MAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAIM,SAAJ,CAAR;AACA,KAFD,MAEO,IAAK,OAAON,QAAP,KAAoB,UAAzB,EAAsC;AAC5CA,MAAAA,QAAQ,CAAEI,OAAO,CAACC,IAAV,CAAR;AACA;AACD,GATF;;AAWA,QAAME,oBAAoB,GAAKC,QAAF,IAAwB;AACpD,UAAMC,OAAO,GAAGD,QAAQ,CAACE,GAAT,CAAc;AAAA,UAAE;AAAEC,QAAAA,IAAF;AAAQN,QAAAA;AAAR,OAAF;AAAA,aAAwB;AACrDT,QAAAA,KAAK,EAAEe,IAD8C;AAErDd,QAAAA,KAAK,EAAEQ;AAF8C,OAAxB;AAAA,KAAd,CAAhB;AAKA,WAAO,CACN;AACCT,MAAAA,KAAK,EAAEP,EAAE,CAAE,SAAF,CADV;AAECQ,MAAAA,KAAK,EAAE;AAFR,KADM,EAKN,GAAGY,OALG,CAAP;AAOA,GAbD;;AAeA,QAAMG,WAAW,GAChB,8BACGb,IAAI,IAAI,cAAC,IAAD;AAAM,IAAA,IAAI,EAAGA;AAAb,IADX,EAEGH,KAFH,CADD;AAOA,SACC,cAAC,aAAD;AACC,IAAA,SAAS,EAAGR,UAAU,CACrBa,SADqB,EAErB,gCAFqB,CADvB;AAKC,IAAA,KAAK,EAAGW,WALT;AAMC,IAAA,mBAAmB,EAAG,KANvB;AAOC,IAAA,KAAK,EAAGf,KAPT;AAQC,IAAA,QAAQ,EAAGK,mBARZ;AASC,IAAA,OAAO,EAAGK,oBAAoB,CAAET,KAAF;AAT/B,IADD;AAaA;AAED,eAAeJ,gBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Icon from '../icon';\nimport SelectControl from '../select-control';\nimport sizesTable, { findSizeBySlug } from './sizes';\nimport type { DimensionControlProps, Size } from './types';\nimport type { SelectControlSingleSelectionProps } from '../select-control/types';\n\n/**\n * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.\n *\n * This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.\n *\n * ```jsx\n * import { useState } from 'react';\n * import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';\n *\n * export default function MyCustomDimensionControl() {\n * \tconst [ paddingSize, setPaddingSize ] = useState( '' );\n *\n * \treturn (\n * \t\t<DimensionControl\n * \t\t\tlabel={ 'Padding' }\n * \t\t\ticon={ 'desktop' }\n * \t\t\tonChange={ ( value ) => setPaddingSize( value ) }\n * \t\t\tvalue={ paddingSize }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nexport function DimensionControl( props: DimensionControlProps ) {\n\tconst {\n\t\tlabel,\n\t\tvalue,\n\t\tsizes = sizesTable,\n\t\ticon,\n\t\tonChange,\n\t\tclassName = '',\n\t} = props;\n\n\tconst onChangeSpacingSize: SelectControlSingleSelectionProps[ 'onChange' ] =\n\t\t( val ) => {\n\t\t\tconst theSize = findSizeBySlug( sizes, val );\n\n\t\t\tif ( ! theSize || value === theSize.slug ) {\n\t\t\t\tonChange?.( undefined );\n\t\t\t} else if ( typeof onChange === 'function' ) {\n\t\t\t\tonChange( theSize.slug );\n\t\t\t}\n\t\t};\n\n\tconst formatSizesAsOptions = ( theSizes: Size[] ) => {\n\t\tconst options = theSizes.map( ( { name, slug } ) => ( {\n\t\t\tlabel: name,\n\t\t\tvalue: slug,\n\t\t} ) );\n\n\t\treturn [\n\t\t\t{\n\t\t\t\tlabel: __( 'Default' ),\n\t\t\t\tvalue: '',\n\t\t\t},\n\t\t\t...options,\n\t\t];\n\t};\n\n\tconst selectLabel = (\n\t\t<>\n\t\t\t{ icon && <Icon icon={ icon } /> }\n\t\t\t{ label }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<SelectControl\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'block-editor-dimension-control'\n\t\t\t) }\n\t\t\tlabel={ selectLabel }\n\t\t\thideLabelFromVision={ false }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChangeSpacingSize }\n\t\t\toptions={ formatSizesAsOptions( sizes ) }\n\t\t/>\n\t);\n}\n\nexport default DimensionControl;\n"]}
+{"version":3,"sources":["@wordpress/components/src/dimension-control/index.tsx"],"names":["classnames","__","Icon","SelectControl","sizesTable","findSizeBySlug","DimensionControl","props","label","value","sizes","icon","onChange","className","onChangeSpacingSize","val","theSize","slug","undefined","formatSizesAsOptions","theSizes","options","map","name","selectLabel"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,IAAP,MAAiB,SAAjB;AACA,OAAOC,aAAP,MAA0B,mBAA1B;AACA,OAAOC,UAAP,IAAqBC,cAArB,QAA2C,SAA3C;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAT,CAA2BC,KAA3B,EAA0D;AAChE,QAAM;AACLC,IAAAA,KADK;AAELC,IAAAA,KAFK;AAGLC,IAAAA,KAAK,GAAGN,UAHH;AAILO,IAAAA,IAJK;AAKLC,IAAAA,QALK;AAMLC,IAAAA,SAAS,GAAG;AANP,MAOFN,KAPJ;;AASA,QAAMO,mBAAoE,GACvEC,GAAF,IAAW;AACV,UAAMC,OAAO,GAAGX,cAAc,CAAEK,KAAF,EAASK,GAAT,CAA9B;;AAEA,QAAK,CAAEC,OAAF,IAAaP,KAAK,KAAKO,OAAO,CAACC,IAApC,EAA2C;AAC1CL,MAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAIM,SAAJ,CAAR;AACA,KAFD,MAEO,IAAK,OAAON,QAAP,KAAoB,UAAzB,EAAsC;AAC5CA,MAAAA,QAAQ,CAAEI,OAAO,CAACC,IAAV,CAAR;AACA;AACD,GATF;;AAWA,QAAME,oBAAoB,GAAKC,QAAF,IAAwB;AACpD,UAAMC,OAAO,GAAGD,QAAQ,CAACE,GAAT,CAAc;AAAA,UAAE;AAAEC,QAAAA,IAAF;AAAQN,QAAAA;AAAR,OAAF;AAAA,aAAwB;AACrDT,QAAAA,KAAK,EAAEe,IAD8C;AAErDd,QAAAA,KAAK,EAAEQ;AAF8C,OAAxB;AAAA,KAAd,CAAhB;AAKA,WAAO,CACN;AACCT,MAAAA,KAAK,EAAEP,EAAE,CAAE,SAAF,CADV;AAECQ,MAAAA,KAAK,EAAE;AAFR,KADM,EAKN,GAAGY,OALG,CAAP;AAOA,GAbD;;AAeA,QAAMG,WAAW,GAChB,8BACGb,IAAI,IAAI,cAAC,IAAD;AAAM,IAAA,IAAI,EAAGA;AAAb,IADX,EAEGH,KAFH,CADD;AAOA,SACC,cAAC,aAAD;AACC,IAAA,SAAS,EAAGR,UAAU,CACrBa,SADqB,EAErB,gCAFqB,CADvB;AAKC,IAAA,KAAK,EAAGW,WALT;AAMC,IAAA,mBAAmB,EAAG,KANvB;AAOC,IAAA,KAAK,EAAGf,KAPT;AAQC,IAAA,QAAQ,EAAGK,mBARZ;AASC,IAAA,OAAO,EAAGK,oBAAoB,CAAET,KAAF;AAT/B,IADD;AAaA;AAED,eAAeJ,gBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Icon from '../icon';\nimport SelectControl from '../select-control';\nimport sizesTable, { findSizeBySlug } from './sizes';\nimport type { DimensionControlProps, Size } from './types';\nimport type { SelectControlSingleSelectionProps } from '../select-control/types';\n\n/**\n * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions.\n *\n * This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.\n *\n * ```jsx\n * import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * export default function MyCustomDimensionControl() {\n * \tconst [ paddingSize, setPaddingSize ] = useState( '' );\n *\n * \treturn (\n * \t\t<DimensionControl\n * \t\t\tlabel={ 'Padding' }\n * \t\t\ticon={ 'desktop' }\n * \t\t\tonChange={ ( value ) => setPaddingSize( value ) }\n * \t\t\tvalue={ paddingSize }\n * \t\t/>\n * \t);\n * }\n * ```\n */\nexport function DimensionControl( props: DimensionControlProps ) {\n\tconst {\n\t\tlabel,\n\t\tvalue,\n\t\tsizes = sizesTable,\n\t\ticon,\n\t\tonChange,\n\t\tclassName = '',\n\t} = props;\n\n\tconst onChangeSpacingSize: SelectControlSingleSelectionProps[ 'onChange' ] =\n\t\t( val ) => {\n\t\t\tconst theSize = findSizeBySlug( sizes, val );\n\n\t\t\tif ( ! theSize || value === theSize.slug ) {\n\t\t\t\tonChange?.( undefined );\n\t\t\t} else if ( typeof onChange === 'function' ) {\n\t\t\t\tonChange( theSize.slug );\n\t\t\t}\n\t\t};\n\n\tconst formatSizesAsOptions = ( theSizes: Size[] ) => {\n\t\tconst options = theSizes.map( ( { name, slug } ) => ( {\n\t\t\tlabel: name,\n\t\t\tvalue: slug,\n\t\t} ) );\n\n\t\treturn [\n\t\t\t{\n\t\t\t\tlabel: __( 'Default' ),\n\t\t\t\tvalue: '',\n\t\t\t},\n\t\t\t...options,\n\t\t];\n\t};\n\n\tconst selectLabel = (\n\t\t<>\n\t\t\t{ icon && <Icon icon={ icon } /> }\n\t\t\t{ label }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<SelectControl\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'block-editor-dimension-control'\n\t\t\t) }\n\t\t\tlabel={ selectLabel }\n\t\t\thideLabelFromVision={ false }\n\t\t\tvalue={ value }\n\t\t\tonChange={ onChangeSpacingSize }\n\t\t\toptions={ formatSizesAsOptions( sizes ) }\n\t\t/>\n\t);\n}\n\nexport default DimensionControl;\n"]}

package/build-module/draggable/index.js

@@ -195,14 +195,10 @@ export function Draggable(_ref) {
     const throttledDragOver = throttle(over, 16);
     ownerDocument.addEventListener('dragover', throttledDragOver); // Update cursor to 'grabbing', document wide.
 
-    ownerDocument.body.classList.add(bodyClass); // Allow the Synthetic Event to be accessed from asynchronous code.
-    // https://reactjs.org/docs/events.html#event-pooling
-
-    event.persist();
-    let timerId;
+    ownerDocument.body.classList.add(bodyClass);
 
     if (onDragStart) {
-      timerId = setTimeout(() => onDragStart(event));
+      onDragStart(event);
     }
 
     cleanup.current = () => {
@@ -218,7 +214,6 @@ export function Draggable(_ref) {
 
       ownerDocument.body.classList.remove(bodyClass);
       ownerDocument.removeEventListener('dragover', throttledDragOver);
-      clearTimeout(timerId);
     };
   }
 

package/build-module/draggable/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/draggable/index.tsx"],"names":["throttle","useEffect","useRef","dragImageClass","cloneWrapperClass","clonePadding","bodyClass","Draggable","children","onDragStart","onDragOver","onDragEnd","appendToOwnerDocument","cloneClassname","elementId","transferData","__experimentalTransferDataType","transferDataType","__experimentalDragComponent","dragComponent","dragComponentRef","cleanup","end","event","preventDefault","current","start","ownerDocument","target","dataTransfer","setData","JSON","stringify","cloneWrapper","createElement","style","top","left","dragImage","setDragImage","classList","add","body","appendChild","x","y","clientX","clientY","transform","clonedDragComponent","innerHTML","element","getElementById","elementRect","getBoundingClientRect","elementWrapper","parentNode","elementTopOffset","elementLeftOffset","width","clone","cloneNode","id","Array","from","querySelectorAll","forEach","child","removeChild","cursorLeft","cursorTop","over","e","nextX","nextY","throttledDragOver","addEventListener","persist","timerId","setTimeout","remove","removeEventListener","clearTimeout","onDraggableStart","onDraggableEnd","display"],"mappings":";;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,QAAT,QAAyB,oBAAzB;AACA,SAASC,SAAT,EAAoBC,MAApB,QAAkC,oBAAlC;AAEA;AACA;AACA;;AAGA,MAAMC,cAAc,GAAG,4CAAvB;AACA,MAAMC,iBAAiB,GAAG,6BAA1B;AACA,MAAMC,YAAY,GAAG,CAArB;AACA,MAAMC,SAAS,GAAG,kCAAlB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,SAAT,OAWa;AAAA,MAXO;AAC1BC,IAAAA,QAD0B;AAE1BC,IAAAA,WAF0B;AAG1BC,IAAAA,UAH0B;AAI1BC,IAAAA,SAJ0B;AAK1BC,IAAAA,qBAAqB,GAAG,KALE;AAM1BC,IAAAA,cAN0B;AAO1BC,IAAAA,SAP0B;AAQ1BC,IAAAA,YAR0B;AAS1BC,IAAAA,8BAA8B,EAAEC,gBAAgB,GAAG,MATzB;AAU1BC,IAAAA,2BAA2B,EAAEC;AAVH,GAWP;AACnB,QAAMC,gBAAgB,GAAGlB,MAAM,CAAoB,IAApB,CAA/B;AACA,QAAMmB,OAAO,GAAGnB,MAAM,CAAE,MAAM,CAAE,CAAV,CAAtB;AAEA;AACD;AACA;AACA;AACA;;AACC,WAASoB,GAAT,CAAcC,KAAd,EAAiC;AAChCA,IAAAA,KAAK,CAACC,cAAN;AACAH,IAAAA,OAAO,CAACI,OAAR;;AAEA,QAAKd,SAAL,EAAiB;AAChBA,MAAAA,SAAS,CAAEY,KAAF,CAAT;AACA;AACD;AAED;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACC,WAASG,KAAT,CAAgBH,KAAhB,EAAmC;AAClC,UAAM;AAAEI,MAAAA;AAAF,QAAoBJ,KAAK,CAACK,MAAhC;AAEAL,IAAAA,KAAK,CAACM,YAAN,CAAmBC,OAAnB,CACCb,gBADD,EAECc,IAAI,CAACC,SAAL,CAAgBjB,YAAhB,CAFD;AAKA,UAAMkB,YAAY,GAAGN,aAAa,CAACO,aAAd,CAA6B,KAA7B,CAArB,CARkC,CASlC;;AACAD,IAAAA,YAAY,CAACE,KAAb,CAAmBC,GAAnB,GAAyB,GAAzB;AACAH,IAAAA,YAAY,CAACE,KAAb,CAAmBE,IAAnB,GAA0B,GAA1B;AAEA,UAAMC,SAAS,GAAGX,aAAa,CAACO,aAAd,CAA6B,KAA7B,CAAlB,CAbkC,CAelC;AACA;AACA;;AACA,QAAK,eAAe,OAAOX,KAAK,CAACM,YAAN,CAAmBU,YAA9C,EAA6D;AAC5DD,MAAAA,SAAS,CAACE,SAAV,CAAoBC,GAApB,CAAyBtC,cAAzB;AACAwB,MAAAA,aAAa,CAACe,IAAd,CAAmBC,WAAnB,CAAgCL,SAAhC;AACAf,MAAAA,KAAK,CAACM,YAAN,CAAmBU,YAAnB,CAAiCD,SAAjC,EAA4C,CAA5C,EAA+C,CAA/C;AACA;;AAEDL,IAAAA,YAAY,CAACO,SAAb,CAAuBC,GAAvB,CAA4BrC,iBAA5B;;AAEA,QAAKS,cAAL,EAAsB;AACrBoB,MAAAA,YAAY,CAACO,SAAb,CAAuBC,GAAvB,CAA4B5B,cAA5B;AACA;;AAED,QAAI+B,CAAC,GAAG,CAAR;AACA,QAAIC,CAAC,GAAG,CAAR,CA/BkC,CAgClC;AACA;;AACA,QAAKzB,gBAAgB,CAACK,OAAtB,EAAgC;AAC/B;AACAmB,MAAAA,CAAC,GAAGrB,KAAK,CAACuB,OAAV;AACAD,MAAAA,CAAC,GAAGtB,KAAK,CAACwB,OAAV;AACAd,MAAAA,YAAY,CAACE,KAAb,CAAmBa,SAAnB,GAAgC,cAAcJ,CAAG,OAAOC,CAAG,MAA3D;AAEA,YAAMI,mBAAmB,GAAGtB,aAAa,CAACO,aAAd,CAA6B,KAA7B,CAA5B;AACAe,MAAAA,mBAAmB,CAACC,SAApB,GAAgC9B,gBAAgB,CAACK,OAAjB,CAAyByB,SAAzD;AACAjB,MAAAA,YAAY,CAACU,WAAb,CAA0BM,mBAA1B,EAR+B,CAU/B;;AACAtB,MAAAA,aAAa,CAACe,IAAd,CAAmBC,WAAnB,CAAgCV,YAAhC;AACA,KAZD,MAYO;AACN,YAAMkB,OAAO,GAAGxB,aAAa,CAACyB,cAAd,CACftC,SADe,CAAhB,CADM,CAKN;;AACA,YAAMuC,WAAW,GAAGF,OAAO,CAACG,qBAAR,EAApB;AACA,YAAMC,cAAc,GAAGJ,OAAO,CAACK,UAA/B;AACA,YAAMC,gBAAgB,GAAGJ,WAAW,CAACjB,GAArC;AACA,YAAMsB,iBAAiB,GAAGL,WAAW,CAAChB,IAAtC;AAEAJ,MAAAA,YAAY,CAACE,KAAb,CAAmBwB,KAAnB,GAA4B,GAC3BN,WAAW,CAACM,KAAZ,GAAoBtD,YAAY,GAAG,CACnC,IAFD;AAIA,YAAMuD,KAAK,GAAGT,OAAO,CAACU,SAAR,CAAmB,IAAnB,CAAd;AACAD,MAAAA,KAAK,CAACE,EAAN,GAAY,SAAShD,SAAW,EAAhC,CAhBM,CAkBN;;AACA8B,MAAAA,CAAC,GAAGc,iBAAiB,GAAGrD,YAAxB;AACAwC,MAAAA,CAAC,GAAGY,gBAAgB,GAAGpD,YAAvB;AACA4B,MAAAA,YAAY,CAACE,KAAb,CAAmBa,SAAnB,GAAgC,cAAcJ,CAAG,OAAOC,CAAG,MAA3D,CArBM,CAuBN;;AACAkB,MAAAA,KAAK,CAACC,IAAN,CACCJ,KAAK,CAACK,gBAAN,CAAwB,QAAxB,CADD,EAEEC,OAFF,CAEaC,KAAF;AAAA;;AAAA,oCAAaA,KAAK,CAACX,UAAnB,sDAAa,kBAAkBY,WAAlB,CAA+BD,KAA/B,CAAb;AAAA,OAFX;AAIAlC,MAAAA,YAAY,CAACU,WAAb,CAA0BiB,KAA1B,EA5BM,CA8BN;;AACA,UAAKhD,qBAAL,EAA6B;AAC5Be,QAAAA,aAAa,CAACe,IAAd,CAAmBC,WAAnB,CAAgCV,YAAhC;AACA,OAFD,MAEO;AACNsB,QAAAA,cAAc,SAAd,IAAAA,cAAc,WAAd,YAAAA,cAAc,CAAEZ,WAAhB,CAA6BV,YAA7B;AACA;AACD,KAlFiC,CAoFlC;;;AACA,QAAIoC,UAAU,GAAG9C,KAAK,CAACuB,OAAvB;AACA,QAAIwB,SAAS,GAAG/C,KAAK,CAACwB,OAAtB;;AAEA,aAASwB,IAAT,CAAeC,CAAf,EAA8B;AAC7B;AACA,UAAKH,UAAU,KAAKG,CAAC,CAAC1B,OAAjB,IAA4BwB,SAAS,KAAKE,CAAC,CAACzB,OAAjD,EAA2D;AAC1D;AACA;;AACD,YAAM0B,KAAK,GAAG7B,CAAC,GAAG4B,CAAC,CAAC1B,OAAN,GAAgBuB,UAA9B;AACA,YAAMK,KAAK,GAAG7B,CAAC,GAAG2B,CAAC,CAACzB,OAAN,GAAgBuB,SAA9B;AACArC,MAAAA,YAAY,CAACE,KAAb,CAAmBa,SAAnB,GAAgC,cAAcyB,KAAO,OAAOC,KAAO,MAAnE;AACAL,MAAAA,UAAU,GAAGG,CAAC,CAAC1B,OAAf;AACAwB,MAAAA,SAAS,GAAGE,CAAC,CAACzB,OAAd;AACAH,MAAAA,CAAC,GAAG6B,KAAJ;AACA5B,MAAAA,CAAC,GAAG6B,KAAJ;;AACA,UAAKhE,UAAL,EAAkB;AACjBA,QAAAA,UAAU,CAAE8D,CAAF,CAAV;AACA;AACD,KAvGiC,CAyGlC;AACA;AACA;;;AACA,UAAMG,iBAAiB,GAAG3E,QAAQ,CAAEuE,IAAF,EAAQ,EAAR,CAAlC;AAEA5C,IAAAA,aAAa,CAACiD,gBAAd,CAAgC,UAAhC,EAA4CD,iBAA5C,EA9GkC,CAgHlC;;AACAhD,IAAAA,aAAa,CAACe,IAAd,CAAmBF,SAAnB,CAA6BC,GAA7B,CAAkCnC,SAAlC,EAjHkC,CAmHlC;AACA;;AACAiB,IAAAA,KAAK,CAACsD,OAAN;AAEA,QAAIC,OAAJ;;AAEA,QAAKrE,WAAL,EAAmB;AAClBqE,MAAAA,OAAO,GAAGC,UAAU,CAAE,MAAMtE,WAAW,CAAEc,KAAF,CAAnB,CAApB;AACA;;AAEDF,IAAAA,OAAO,CAACI,OAAR,GAAkB,MAAM;AACvB;AACA,UAAKQ,YAAY,IAAIA,YAAY,CAACuB,UAAlC,EAA+C;AAC9CvB,QAAAA,YAAY,CAACuB,UAAb,CAAwBY,WAAxB,CAAqCnC,YAArC;AACA;;AAED,UAAKK,SAAS,IAAIA,SAAS,CAACkB,UAA5B,EAAyC;AACxClB,QAAAA,SAAS,CAACkB,UAAV,CAAqBY,WAArB,CAAkC9B,SAAlC;AACA,OARsB,CAUvB;;;AACAX,MAAAA,aAAa,CAACe,IAAd,CAAmBF,SAAnB,CAA6BwC,MAA7B,CAAqC1E,SAArC;AAEAqB,MAAAA,aAAa,CAACsD,mBAAd,CAAmC,UAAnC,EAA+CN,iBAA/C;AAEAO,MAAAA,YAAY,CAAEJ,OAAF,CAAZ;AACA,KAhBD;AAiBA;;AAED7E,EAAAA,SAAS,CACR,MAAM,MAAM;AACXoB,IAAAA,OAAO,CAACI,OAAR;AACA,GAHO,EAIR,EAJQ,CAAT;AAOA,SACC,8BACGjB,QAAQ,CAAE;AACX2E,IAAAA,gBAAgB,EAAEzD,KADP;AAEX0D,IAAAA,cAAc,EAAE9D;AAFL,GAAF,CADX,EAKGH,aAAa,IACd;AACC,IAAA,SAAS,EAAC,0CADX;AAEC,IAAA,KAAK,EAAG;AAAEkE,MAAAA,OAAO,EAAE;AAAX,KAFT;AAGC,IAAA,GAAG,EAAGjE;AAHP,KAKGD,aALH,CANF,CADD;AAiBA;AAED,eAAeZ,SAAf","sourcesContent":["/**\n * External dependencies\n */\nimport type { DragEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { throttle } from '@wordpress/compose';\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DraggableProps } from './types';\n\nconst dragImageClass = 'components-draggable__invisible-drag-image';\nconst cloneWrapperClass = 'components-draggable__clone';\nconst clonePadding = 0;\nconst bodyClass = 'is-dragging-components-draggable';\n\n/**\n * `Draggable` is a Component that provides a way to set up a cross-browser\n * (including IE) customizable drag image and the transfer data for the drag\n * event. It decouples the drag handle and the element to drag: use it by\n * wrapping the component that will become the drag handle and providing the DOM\n * ID of the element to drag.\n *\n * Note that the drag handle needs to declare the `draggable=\"true\"` property\n * and bind the `Draggable`s `onDraggableStart` and `onDraggableEnd` event\n * handlers to its own `onDragStart` and `onDragEnd` respectively. `Draggable`\n * takes care of the logic to setup the drag image and the transfer data, but is\n * not concerned with creating an actual DOM element that is draggable.\n *\n * ```jsx\n * import { Draggable, Panel, PanelBody } from '@wordpress/components';\n * import { Icon, more } from '@wordpress/icons';\n *\n * const MyDraggable = () => (\n *   <div id=\"draggable-panel\">\n *     <Panel header=\"Draggable panel\">\n *       <PanelBody>\n *         <Draggable elementId=\"draggable-panel\" transferData={ {} }>\n *           { ( { onDraggableStart, onDraggableEnd } ) => (\n *             <div\n *               className=\"example-drag-handle\"\n *               draggable\n *               onDragStart={ onDraggableStart }\n *               onDragEnd={ onDraggableEnd }\n *             >\n *               <Icon icon={ more } />\n *             </div>\n *           ) }\n *         </Draggable>\n *       </PanelBody>\n *     </Panel>\n *   </div>\n * );\n * ```\n */\nexport function Draggable( {\n\tchildren,\n\tonDragStart,\n\tonDragOver,\n\tonDragEnd,\n\tappendToOwnerDocument = false,\n\tcloneClassname,\n\telementId,\n\ttransferData,\n\t__experimentalTransferDataType: transferDataType = 'text',\n\t__experimentalDragComponent: dragComponent,\n}: DraggableProps ) {\n\tconst dragComponentRef = useRef< HTMLDivElement >( null );\n\tconst cleanup = useRef( () => {} );\n\n\t/**\n\t * Removes the element clone, resets cursor, and removes drag listener.\n\t *\n\t * @param event The non-custom DragEvent.\n\t */\n\tfunction end( event: DragEvent ) {\n\t\tevent.preventDefault();\n\t\tcleanup.current();\n\n\t\tif ( onDragEnd ) {\n\t\t\tonDragEnd( event );\n\t\t}\n\t}\n\n\t/**\n\t * This method does a couple of things:\n\t *\n\t * - Clones the current element and spawns clone over original element.\n\t * - Adds a fake temporary drag image to avoid browser defaults.\n\t * - Sets transfer data.\n\t * - Adds dragover listener.\n\t *\n\t * @param event The non-custom DragEvent.\n\t */\n\tfunction start( event: DragEvent ) {\n\t\tconst { ownerDocument } = event.target as HTMLElement;\n\n\t\tevent.dataTransfer.setData(\n\t\t\ttransferDataType,\n\t\t\tJSON.stringify( transferData )\n\t\t);\n\n\t\tconst cloneWrapper = ownerDocument.createElement( 'div' );\n\t\t// Reset position to 0,0. Natural stacking order will position this lower, even with a transform otherwise.\n\t\tcloneWrapper.style.top = '0';\n\t\tcloneWrapper.style.left = '0';\n\n\t\tconst dragImage = ownerDocument.createElement( 'div' );\n\n\t\t// Set a fake drag image to avoid browser defaults. Remove from DOM\n\t\t// right after. event.dataTransfer.setDragImage is not supported yet in\n\t\t// IE, we need to check for its existence first.\n\t\tif ( 'function' === typeof event.dataTransfer.setDragImage ) {\n\t\t\tdragImage.classList.add( dragImageClass );\n\t\t\townerDocument.body.appendChild( dragImage );\n\t\t\tevent.dataTransfer.setDragImage( dragImage, 0, 0 );\n\t\t}\n\n\t\tcloneWrapper.classList.add( cloneWrapperClass );\n\n\t\tif ( cloneClassname ) {\n\t\t\tcloneWrapper.classList.add( cloneClassname );\n\t\t}\n\n\t\tlet x = 0;\n\t\tlet y = 0;\n\t\t// If a dragComponent is defined, the following logic will clone the\n\t\t// HTML node and inject it into the cloneWrapper.\n\t\tif ( dragComponentRef.current ) {\n\t\t\t// Position dragComponent at the same position as the cursor.\n\t\t\tx = event.clientX;\n\t\t\ty = event.clientY;\n\t\t\tcloneWrapper.style.transform = `translate( ${ x }px, ${ y }px )`;\n\n\t\t\tconst clonedDragComponent = ownerDocument.createElement( 'div' );\n\t\t\tclonedDragComponent.innerHTML = dragComponentRef.current.innerHTML;\n\t\t\tcloneWrapper.appendChild( clonedDragComponent );\n\n\t\t\t// Inject the cloneWrapper into the DOM.\n\t\t\townerDocument.body.appendChild( cloneWrapper );\n\t\t} else {\n\t\t\tconst element = ownerDocument.getElementById(\n\t\t\t\telementId\n\t\t\t) as HTMLElement;\n\n\t\t\t// Prepare element clone and append to element wrapper.\n\t\t\tconst elementRect = element.getBoundingClientRect();\n\t\t\tconst elementWrapper = element.parentNode;\n\t\t\tconst elementTopOffset = elementRect.top;\n\t\t\tconst elementLeftOffset = elementRect.left;\n\n\t\t\tcloneWrapper.style.width = `${\n\t\t\t\telementRect.width + clonePadding * 2\n\t\t\t}px`;\n\n\t\t\tconst clone = element.cloneNode( true ) as HTMLElement;\n\t\t\tclone.id = `clone-${ elementId }`;\n\n\t\t\t// Position clone right over the original element (20px padding).\n\t\t\tx = elementLeftOffset - clonePadding;\n\t\t\ty = elementTopOffset - clonePadding;\n\t\t\tcloneWrapper.style.transform = `translate( ${ x }px, ${ y }px )`;\n\n\t\t\t// Hack: Remove iFrames as it's causing the embeds drag clone to freeze.\n\t\t\tArray.from< HTMLIFrameElement >(\n\t\t\t\tclone.querySelectorAll( 'iframe' )\n\t\t\t).forEach( ( child ) => child.parentNode?.removeChild( child ) );\n\n\t\t\tcloneWrapper.appendChild( clone );\n\n\t\t\t// Inject the cloneWrapper into the DOM.\n\t\t\tif ( appendToOwnerDocument ) {\n\t\t\t\townerDocument.body.appendChild( cloneWrapper );\n\t\t\t} else {\n\t\t\t\telementWrapper?.appendChild( cloneWrapper );\n\t\t\t}\n\t\t}\n\n\t\t// Mark the current cursor coordinates.\n\t\tlet cursorLeft = event.clientX;\n\t\tlet cursorTop = event.clientY;\n\n\t\tfunction over( e: DragEvent ) {\n\t\t\t// Skip doing any work if mouse has not moved.\n\t\t\tif ( cursorLeft === e.clientX && cursorTop === e.clientY ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst nextX = x + e.clientX - cursorLeft;\n\t\t\tconst nextY = y + e.clientY - cursorTop;\n\t\t\tcloneWrapper.style.transform = `translate( ${ nextX }px, ${ nextY }px )`;\n\t\t\tcursorLeft = e.clientX;\n\t\t\tcursorTop = e.clientY;\n\t\t\tx = nextX;\n\t\t\ty = nextY;\n\t\t\tif ( onDragOver ) {\n\t\t\t\tonDragOver( e );\n\t\t\t}\n\t\t}\n\n\t\t// Aim for 60fps (16 ms per frame) for now. We can potentially use requestAnimationFrame (raf) instead,\n\t\t// note that browsers may throttle raf below 60fps in certain conditions.\n\t\t// @ts-ignore\n\t\tconst throttledDragOver = throttle( over, 16 );\n\n\t\townerDocument.addEventListener( 'dragover', throttledDragOver );\n\n\t\t// Update cursor to 'grabbing', document wide.\n\t\townerDocument.body.classList.add( bodyClass );\n\n\t\t// Allow the Synthetic Event to be accessed from asynchronous code.\n\t\t// https://reactjs.org/docs/events.html#event-pooling\n\t\tevent.persist();\n\n\t\tlet timerId: number | undefined;\n\n\t\tif ( onDragStart ) {\n\t\t\ttimerId = setTimeout( () => onDragStart( event ) );\n\t\t}\n\n\t\tcleanup.current = () => {\n\t\t\t// Remove drag clone.\n\t\t\tif ( cloneWrapper && cloneWrapper.parentNode ) {\n\t\t\t\tcloneWrapper.parentNode.removeChild( cloneWrapper );\n\t\t\t}\n\n\t\t\tif ( dragImage && dragImage.parentNode ) {\n\t\t\t\tdragImage.parentNode.removeChild( dragImage );\n\t\t\t}\n\n\t\t\t// Reset cursor.\n\t\t\townerDocument.body.classList.remove( bodyClass );\n\n\t\t\townerDocument.removeEventListener( 'dragover', throttledDragOver );\n\n\t\t\tclearTimeout( timerId );\n\t\t};\n\t}\n\n\tuseEffect(\n\t\t() => () => {\n\t\t\tcleanup.current();\n\t\t},\n\t\t[]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ children( {\n\t\t\t\tonDraggableStart: start,\n\t\t\t\tonDraggableEnd: end,\n\t\t\t} ) }\n\t\t\t{ dragComponent && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"components-draggable-drag-component-root\"\n\t\t\t\t\tstyle={ { display: 'none' } }\n\t\t\t\t\tref={ dragComponentRef }\n\t\t\t\t>\n\t\t\t\t\t{ dragComponent }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default Draggable;\n"]}
+{"version":3,"sources":["@wordpress/components/src/draggable/index.tsx"],"names":["throttle","useEffect","useRef","dragImageClass","cloneWrapperClass","clonePadding","bodyClass","Draggable","children","onDragStart","onDragOver","onDragEnd","appendToOwnerDocument","cloneClassname","elementId","transferData","__experimentalTransferDataType","transferDataType","__experimentalDragComponent","dragComponent","dragComponentRef","cleanup","end","event","preventDefault","current","start","ownerDocument","target","dataTransfer","setData","JSON","stringify","cloneWrapper","createElement","style","top","left","dragImage","setDragImage","classList","add","body","appendChild","x","y","clientX","clientY","transform","clonedDragComponent","innerHTML","element","getElementById","elementRect","getBoundingClientRect","elementWrapper","parentNode","elementTopOffset","elementLeftOffset","width","clone","cloneNode","id","Array","from","querySelectorAll","forEach","child","removeChild","cursorLeft","cursorTop","over","e","nextX","nextY","throttledDragOver","addEventListener","remove","removeEventListener","onDraggableStart","onDraggableEnd","display"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { DragEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { throttle } from '@wordpress/compose';\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DraggableProps } from './types';\n\nconst dragImageClass = 'components-draggable__invisible-drag-image';\nconst cloneWrapperClass = 'components-draggable__clone';\nconst clonePadding = 0;\nconst bodyClass = 'is-dragging-components-draggable';\n\n/**\n * `Draggable` is a Component that provides a way to set up a cross-browser\n * (including IE) customizable drag image and the transfer data for the drag\n * event. It decouples the drag handle and the element to drag: use it by\n * wrapping the component that will become the drag handle and providing the DOM\n * ID of the element to drag.\n *\n * Note that the drag handle needs to declare the `draggable=\"true\"` property\n * and bind the `Draggable`s `onDraggableStart` and `onDraggableEnd` event\n * handlers to its own `onDragStart` and `onDragEnd` respectively. `Draggable`\n * takes care of the logic to setup the drag image and the transfer data, but is\n * not concerned with creating an actual DOM element that is draggable.\n *\n * ```jsx\n * import { Draggable, Panel, PanelBody } from '@wordpress/components';\n * import { Icon, more } from '@wordpress/icons';\n *\n * const MyDraggable = () => (\n *   <div id=\"draggable-panel\">\n *     <Panel header=\"Draggable panel\">\n *       <PanelBody>\n *         <Draggable elementId=\"draggable-panel\" transferData={ {} }>\n *           { ( { onDraggableStart, onDraggableEnd } ) => (\n *             <div\n *               className=\"example-drag-handle\"\n *               draggable\n *               onDragStart={ onDraggableStart }\n *               onDragEnd={ onDraggableEnd }\n *             >\n *               <Icon icon={ more } />\n *             </div>\n *           ) }\n *         </Draggable>\n *       </PanelBody>\n *     </Panel>\n *   </div>\n * );\n * ```\n */\nexport function Draggable( {\n\tchildren,\n\tonDragStart,\n\tonDragOver,\n\tonDragEnd,\n\tappendToOwnerDocument = false,\n\tcloneClassname,\n\telementId,\n\ttransferData,\n\t__experimentalTransferDataType: transferDataType = 'text',\n\t__experimentalDragComponent: dragComponent,\n}: DraggableProps ) {\n\tconst dragComponentRef = useRef< HTMLDivElement >( null );\n\tconst cleanup = useRef( () => {} );\n\n\t/**\n\t * Removes the element clone, resets cursor, and removes drag listener.\n\t *\n\t * @param event The non-custom DragEvent.\n\t */\n\tfunction end( event: DragEvent ) {\n\t\tevent.preventDefault();\n\t\tcleanup.current();\n\n\t\tif ( onDragEnd ) {\n\t\t\tonDragEnd( event );\n\t\t}\n\t}\n\n\t/**\n\t * This method does a couple of things:\n\t *\n\t * - Clones the current element and spawns clone over original element.\n\t * - Adds a fake temporary drag image to avoid browser defaults.\n\t * - Sets transfer data.\n\t * - Adds dragover listener.\n\t *\n\t * @param event The non-custom DragEvent.\n\t */\n\tfunction start( event: DragEvent ) {\n\t\tconst { ownerDocument } = event.target as HTMLElement;\n\n\t\tevent.dataTransfer.setData(\n\t\t\ttransferDataType,\n\t\t\tJSON.stringify( transferData )\n\t\t);\n\n\t\tconst cloneWrapper = ownerDocument.createElement( 'div' );\n\t\t// Reset position to 0,0. Natural stacking order will position this lower, even with a transform otherwise.\n\t\tcloneWrapper.style.top = '0';\n\t\tcloneWrapper.style.left = '0';\n\n\t\tconst dragImage = ownerDocument.createElement( 'div' );\n\n\t\t// Set a fake drag image to avoid browser defaults. Remove from DOM\n\t\t// right after. event.dataTransfer.setDragImage is not supported yet in\n\t\t// IE, we need to check for its existence first.\n\t\tif ( 'function' === typeof event.dataTransfer.setDragImage ) {\n\t\t\tdragImage.classList.add( dragImageClass );\n\t\t\townerDocument.body.appendChild( dragImage );\n\t\t\tevent.dataTransfer.setDragImage( dragImage, 0, 0 );\n\t\t}\n\n\t\tcloneWrapper.classList.add( cloneWrapperClass );\n\n\t\tif ( cloneClassname ) {\n\t\t\tcloneWrapper.classList.add( cloneClassname );\n\t\t}\n\n\t\tlet x = 0;\n\t\tlet y = 0;\n\t\t// If a dragComponent is defined, the following logic will clone the\n\t\t// HTML node and inject it into the cloneWrapper.\n\t\tif ( dragComponentRef.current ) {\n\t\t\t// Position dragComponent at the same position as the cursor.\n\t\t\tx = event.clientX;\n\t\t\ty = event.clientY;\n\t\t\tcloneWrapper.style.transform = `translate( ${ x }px, ${ y }px )`;\n\n\t\t\tconst clonedDragComponent = ownerDocument.createElement( 'div' );\n\t\t\tclonedDragComponent.innerHTML = dragComponentRef.current.innerHTML;\n\t\t\tcloneWrapper.appendChild( clonedDragComponent );\n\n\t\t\t// Inject the cloneWrapper into the DOM.\n\t\t\townerDocument.body.appendChild( cloneWrapper );\n\t\t} else {\n\t\t\tconst element = ownerDocument.getElementById(\n\t\t\t\telementId\n\t\t\t) as HTMLElement;\n\n\t\t\t// Prepare element clone and append to element wrapper.\n\t\t\tconst elementRect = element.getBoundingClientRect();\n\t\t\tconst elementWrapper = element.parentNode;\n\t\t\tconst elementTopOffset = elementRect.top;\n\t\t\tconst elementLeftOffset = elementRect.left;\n\n\t\t\tcloneWrapper.style.width = `${\n\t\t\t\telementRect.width + clonePadding * 2\n\t\t\t}px`;\n\n\t\t\tconst clone = element.cloneNode( true ) as HTMLElement;\n\t\t\tclone.id = `clone-${ elementId }`;\n\n\t\t\t// Position clone right over the original element (20px padding).\n\t\t\tx = elementLeftOffset - clonePadding;\n\t\t\ty = elementTopOffset - clonePadding;\n\t\t\tcloneWrapper.style.transform = `translate( ${ x }px, ${ y }px )`;\n\n\t\t\t// Hack: Remove iFrames as it's causing the embeds drag clone to freeze.\n\t\t\tArray.from< HTMLIFrameElement >(\n\t\t\t\tclone.querySelectorAll( 'iframe' )\n\t\t\t).forEach( ( child ) => child.parentNode?.removeChild( child ) );\n\n\t\t\tcloneWrapper.appendChild( clone );\n\n\t\t\t// Inject the cloneWrapper into the DOM.\n\t\t\tif ( appendToOwnerDocument ) {\n\t\t\t\townerDocument.body.appendChild( cloneWrapper );\n\t\t\t} else {\n\t\t\t\telementWrapper?.appendChild( cloneWrapper );\n\t\t\t}\n\t\t}\n\n\t\t// Mark the current cursor coordinates.\n\t\tlet cursorLeft = event.clientX;\n\t\tlet cursorTop = event.clientY;\n\n\t\tfunction over( e: DragEvent ) {\n\t\t\t// Skip doing any work if mouse has not moved.\n\t\t\tif ( cursorLeft === e.clientX && cursorTop === e.clientY ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst nextX = x + e.clientX - cursorLeft;\n\t\t\tconst nextY = y + e.clientY - cursorTop;\n\t\t\tcloneWrapper.style.transform = `translate( ${ nextX }px, ${ nextY }px )`;\n\t\t\tcursorLeft = e.clientX;\n\t\t\tcursorTop = e.clientY;\n\t\t\tx = nextX;\n\t\t\ty = nextY;\n\t\t\tif ( onDragOver ) {\n\t\t\t\tonDragOver( e );\n\t\t\t}\n\t\t}\n\n\t\t// Aim for 60fps (16 ms per frame) for now. We can potentially use requestAnimationFrame (raf) instead,\n\t\t// note that browsers may throttle raf below 60fps in certain conditions.\n\t\t// @ts-ignore\n\t\tconst throttledDragOver = throttle( over, 16 );\n\n\t\townerDocument.addEventListener( 'dragover', throttledDragOver );\n\n\t\t// Update cursor to 'grabbing', document wide.\n\t\townerDocument.body.classList.add( bodyClass );\n\n\t\tif ( onDragStart ) {\n\t\t\tonDragStart( event );\n\t\t}\n\n\t\tcleanup.current = () => {\n\t\t\t// Remove drag clone.\n\t\t\tif ( cloneWrapper && cloneWrapper.parentNode ) {\n\t\t\t\tcloneWrapper.parentNode.removeChild( cloneWrapper );\n\t\t\t}\n\n\t\t\tif ( dragImage && dragImage.parentNode ) {\n\t\t\t\tdragImage.parentNode.removeChild( dragImage );\n\t\t\t}\n\n\t\t\t// Reset cursor.\n\t\t\townerDocument.body.classList.remove( bodyClass );\n\n\t\t\townerDocument.removeEventListener( 'dragover', throttledDragOver );\n\t\t};\n\t}\n\n\tuseEffect(\n\t\t() => () => {\n\t\t\tcleanup.current();\n\t\t},\n\t\t[]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ children( {\n\t\t\t\tonDraggableStart: start,\n\t\t\t\tonDraggableEnd: end,\n\t\t\t} ) }\n\t\t\t{ dragComponent && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"components-draggable-drag-component-root\"\n\t\t\t\t\tstyle={ { display: 'none' } }\n\t\t\t\t\tref={ dragComponentRef }\n\t\t\t\t>\n\t\t\t\t\t{ dragComponent }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default Draggable;\n"]}

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

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
-// @ts-nocheck
 
 /**
  * External dependencies
@@ -32,17 +31,91 @@ function mergeProps() {
 
   return mergedProps;
 }
-/**
- * Whether the argument is a function.
- *
- * @param {*} maybeFunc The argument to check.
- * @return {boolean} True if the argument is a function, false otherwise.
- */
-
 
 function isFunction(maybeFunc) {
   return typeof maybeFunc === 'function';
 }
+/**
+ *
+ * The DropdownMenu displays a list of actions (each contained in a MenuItem,
+ * MenuItemsChoice, or MenuGroup) in a compact way. It appears in a Popover
+ * after the user has interacted with an element (a button or icon) or when
+ * they perform a specific action.
+ *
+ * Render a Dropdown Menu with a set of controls:
+ *
+ * ```jsx
+ * import { DropdownMenu } from '@wordpress/components';
+ * import {
+ * 	more,
+ * 	arrowLeft,
+ * 	arrowRight,
+ * 	arrowUp,
+ * 	arrowDown,
+ * } from '@wordpress/icons';
+ *
+ * const MyDropdownMenu = () => (
+ * 	<DropdownMenu
+ * 		icon={ more }
+ * 		label="Select a direction"
+ * 		controls={ [
+ * 			{
+ * 				title: 'Up',
+ * 				icon: arrowUp,
+ * 				onClick: () => console.log( 'up' ),
+ * 			},
+ * 			{
+ * 				title: 'Right',
+ * 				icon: arrowRight,
+ * 				onClick: () => console.log( 'right' ),
+ * 			},
+ * 			{
+ * 				title: 'Down',
+ * 				icon: arrowDown,
+ * 				onClick: () => console.log( 'down' ),
+ * 			},
+ * 			{
+ * 				title: 'Left',
+ * 				icon: arrowLeft,
+ * 				onClick: () => console.log( 'left' ),
+ * 			},
+ * 		] }
+ * 	/>
+ * );
+ * ```
+ *
+ * Alternatively, specify a `children` function which returns elements valid for
+ * use in a DropdownMenu: `MenuItem`, `MenuItemsChoice`, or `MenuGroup`.
+ *
+ * ```jsx
+ * import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+ * import { more, arrowUp, arrowDown, trash } from '@wordpress/icons';
+ *
+ * const MyDropdownMenu = () => (
+ * 	<DropdownMenu icon={ more } label="Select a direction">
+ * 		{ ( { onClose } ) => (
+ * 			<>
+ * 				<MenuGroup>
+ * 					<MenuItem icon={ arrowUp } onClick={ onClose }>
+ * 						Move Up
+ * 					</MenuItem>
+ * 					<MenuItem icon={ arrowDown } onClick={ onClose }>
+ * 						Move Down
+ * 					</MenuItem>
+ * 				</MenuGroup>
+ * 				<MenuGroup>
+ * 					<MenuItem icon={ trash } onClick={ onClose }>
+ * 						Remove
+ * 					</MenuItem>
+ * 				</MenuGroup>
+ * 			</>
+ * 		) }
+ * 	</DropdownMenu>
+ * );
+ * ```
+ *
+ */
+
 
 function DropdownMenu(dropdownMenuProps) {
   const {
@@ -67,10 +140,14 @@ function DropdownMenu(dropdownMenuProps) {
   let controlSets;
 
   if (controls !== null && controls !== void 0 && controls.length) {
+    // @ts-expect-error The check below is needed because `DropdownMenus`
+    // rendered by `ToolBarGroup` receive controls as a nested array.
     controlSets = controls;
 
     if (!Array.isArray(controlSets[0])) {
-      controlSets = [controlSets];
+      // This is not ideal, but at this point we know that `controls` is
+      // not a nested array, even if TypeScript doesn't.
+      controlSets = [controls];
     }
   }
 
@@ -111,7 +188,7 @@ function DropdownMenu(dropdownMenuProps) {
       return createElement(Toggle, _extends({}, mergedToggleProps, {
         icon: icon,
         onClick: event => {
-          onToggle(event);
+          onToggle();
 
           if (mergedToggleProps.onClick) {
             mergedToggleProps.onClick(event);

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/dropdown-menu/index.js"],"names":["classnames","menu","Button","Dropdown","NavigableMenu","mergeProps","defaultProps","props","mergedProps","className","isFunction","maybeFunc","DropdownMenu","dropdownMenuProps","children","controls","icon","label","popoverProps","toggleProps","menuProps","disableOpenOnArrowDown","text","noIcons","length","controlSets","Array","isArray","mergedPopoverProps","isOpen","onToggle","openOnArrowDown","event","code","preventDefault","as","Toggle","restToggleProps","mergedToggleProps","onClick","onKeyDown","showTooltip","mergedMenuProps","flatMap","controlSet","indexOfSet","map","control","indexOfControl","join","stopPropagation","onClose","isActive","title","role","undefined","isDisabled"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { menu } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport { NavigableMenu } from '../navigable-container';\n\nfunction mergeProps( defaultProps = {}, props = {} ) {\n\tconst mergedProps = {\n\t\t...defaultProps,\n\t\t...props,\n\t};\n\n\tif ( props.className && defaultProps.className ) {\n\t\tmergedProps.className = classnames(\n\t\t\tprops.className,\n\t\t\tdefaultProps.className\n\t\t);\n\t}\n\n\treturn mergedProps;\n}\n\n/**\n * Whether the argument is a function.\n *\n * @param {*} maybeFunc The argument to check.\n * @return {boolean} True if the argument is a function, false otherwise.\n */\nfunction isFunction( maybeFunc ) {\n\treturn typeof maybeFunc === 'function';\n}\n\nfunction DropdownMenu( dropdownMenuProps ) {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tcontrols,\n\t\ticon = menu,\n\t\tlabel,\n\t\tpopoverProps,\n\t\ttoggleProps,\n\t\tmenuProps,\n\t\tdisableOpenOnArrowDown = false,\n\t\ttext,\n\t\tnoIcons,\n\t} = dropdownMenuProps;\n\n\tif ( ! controls?.length && ! isFunction( children ) ) {\n\t\treturn null;\n\t}\n\n\t// Normalize controls to nested array of objects (sets of controls)\n\tlet controlSets;\n\tif ( controls?.length ) {\n\t\tcontrolSets = controls;\n\t\tif ( ! Array.isArray( controlSets[ 0 ] ) ) {\n\t\t\tcontrolSets = [ controlSets ];\n\t\t}\n\t}\n\tconst mergedPopoverProps = mergeProps(\n\t\t{\n\t\t\tclassName: 'components-dropdown-menu__popover',\n\t\t},\n\t\tpopoverProps\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName={ classnames( 'components-dropdown-menu', className ) }\n\t\t\tpopoverProps={ mergedPopoverProps }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => {\n\t\t\t\tconst openOnArrowDown = ( event ) => {\n\t\t\t\t\tif ( disableOpenOnArrowDown ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tif ( ! isOpen && event.code === 'ArrowDown' ) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t\tconst { as: Toggle = Button, ...restToggleProps } =\n\t\t\t\t\ttoggleProps ?? {};\n\n\t\t\t\tconst mergedToggleProps = mergeProps(\n\t\t\t\t\t{\n\t\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t\t'components-dropdown-menu__toggle',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'is-opened': isOpen,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t),\n\t\t\t\t\t},\n\t\t\t\t\trestToggleProps\n\t\t\t\t);\n\n\t\t\t\treturn (\n\t\t\t\t\t<Toggle\n\t\t\t\t\t\t{ ...mergedToggleProps }\n\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\tonClick={ ( event ) => {\n\t\t\t\t\t\t\tonToggle( event );\n\t\t\t\t\t\t\tif ( mergedToggleProps.onClick ) {\n\t\t\t\t\t\t\t\tmergedToggleProps.onClick( event );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\topenOnArrowDown( event );\n\t\t\t\t\t\t\tif ( mergedToggleProps.onKeyDown ) {\n\t\t\t\t\t\t\t\tmergedToggleProps.onKeyDown( event );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} }\n\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\ttext={ text }\n\t\t\t\t\t\tshowTooltip={ toggleProps?.showTooltip ?? true }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ mergedToggleProps.children }\n\t\t\t\t\t</Toggle>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ ( props ) => {\n\t\t\t\tconst mergedMenuProps = mergeProps(\n\t\t\t\t\t{\n\t\t\t\t\t\t'aria-label': label,\n\t\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t\t'components-dropdown-menu__menu',\n\t\t\t\t\t\t\t{ 'no-icons': noIcons }\n\t\t\t\t\t\t),\n\t\t\t\t\t},\n\t\t\t\t\tmenuProps\n\t\t\t\t);\n\n\t\t\t\treturn (\n\t\t\t\t\t<NavigableMenu { ...mergedMenuProps } role=\"menu\">\n\t\t\t\t\t\t{ isFunction( children ) ? children( props ) : null }\n\t\t\t\t\t\t{ controlSets?.flatMap( ( controlSet, indexOfSet ) =>\n\t\t\t\t\t\t\tcontrolSet.map( ( control, indexOfControl ) => (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tkey={ [\n\t\t\t\t\t\t\t\t\t\tindexOfSet,\n\t\t\t\t\t\t\t\t\t\tindexOfControl,\n\t\t\t\t\t\t\t\t\t].join() }\n\t\t\t\t\t\t\t\t\tonClick={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\tprops.onClose();\n\t\t\t\t\t\t\t\t\t\tif ( control.onClick ) {\n\t\t\t\t\t\t\t\t\t\t\tcontrol.onClick();\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t\t'components-dropdown-menu__menu-item',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'has-separator':\n\t\t\t\t\t\t\t\t\t\t\t\tindexOfSet > 0 &&\n\t\t\t\t\t\t\t\t\t\t\t\tindexOfControl === 0,\n\t\t\t\t\t\t\t\t\t\t\t'is-active': control.isActive,\n\t\t\t\t\t\t\t\t\t\t\t'is-icon-only': ! control.title,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\ticon={ control.icon }\n\t\t\t\t\t\t\t\t\tlabel={ control.label }\n\t\t\t\t\t\t\t\t\taria-checked={\n\t\t\t\t\t\t\t\t\t\tcontrol.role === 'menuitemcheckbox' ||\n\t\t\t\t\t\t\t\t\t\tcontrol.role === 'menuitemradio'\n\t\t\t\t\t\t\t\t\t\t\t? control.isActive\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\trole={\n\t\t\t\t\t\t\t\t\t\tcontrol.role === 'menuitemcheckbox' ||\n\t\t\t\t\t\t\t\t\t\tcontrol.role === 'menuitemradio'\n\t\t\t\t\t\t\t\t\t\t\t? control.role\n\t\t\t\t\t\t\t\t\t\t\t: 'menuitem'\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tdisabled={ control.isDisabled }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ control.title }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t) )\n\t\t\t\t\t\t) }\n\t\t\t\t\t</NavigableMenu>\n\t\t\t\t);\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nexport default DropdownMenu;\n"]}
+{"version":3,"sources":["@wordpress/components/src/dropdown-menu/index.tsx"],"names":["classnames","menu","Button","Dropdown","NavigableMenu","mergeProps","defaultProps","props","mergedProps","className","isFunction","maybeFunc","DropdownMenu","dropdownMenuProps","children","controls","icon","label","popoverProps","toggleProps","menuProps","disableOpenOnArrowDown","text","noIcons","length","controlSets","Array","isArray","mergedPopoverProps","isOpen","onToggle","openOnArrowDown","event","code","preventDefault","as","Toggle","restToggleProps","mergedToggleProps","onClick","onKeyDown","showTooltip","mergedMenuProps","flatMap","controlSet","indexOfSet","map","control","indexOfControl","join","stopPropagation","onClose","isActive","title","role","undefined","isDisabled"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,IAAT,QAAqB,kBAArB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,QAAP,MAAqB,aAArB;AACA,SAASC,aAAT,QAA8B,wBAA9B;;AAGA,SAASC,UAAT,GAEyD;AAAA,MAAtDC,YAAsD,uEAAzB,EAAyB;AAAA,MAArBC,KAAqB,uEAAV,EAAU;AACxD,QAAMC,WAAc,GAAG,EACtB,GAAGF,YADmB;AAEtB,OAAGC;AAFmB,GAAvB;;AAKA,MAAKA,KAAK,CAACE,SAAN,IAAmBH,YAAY,CAACG,SAArC,EAAiD;AAChDD,IAAAA,WAAW,CAACC,SAAZ,GAAwBT,UAAU,CACjCO,KAAK,CAACE,SAD2B,EAEjCH,YAAY,CAACG,SAFoB,CAAlC;AAIA;;AAED,SAAOD,WAAP;AACA;;AAED,SAASE,UAAT,CAAqBC,SAArB,EAAmE;AAClE,SAAO,OAAOA,SAAP,KAAqB,UAA5B;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAEA,SAASC,YAAT,CAAuBC,iBAAvB,EAA8D;AAC7D,QAAM;AACLC,IAAAA,QADK;AAELL,IAAAA,SAFK;AAGLM,IAAAA,QAHK;AAILC,IAAAA,IAAI,GAAGf,IAJF;AAKLgB,IAAAA,KALK;AAMLC,IAAAA,YANK;AAOLC,IAAAA,WAPK;AAQLC,IAAAA,SARK;AASLC,IAA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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { menu } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport Dropdown from '../dropdown';\nimport { NavigableMenu } from '../navigable-container';\nimport type { DropdownMenuProps, DropdownOption } from './types';\n\nfunction mergeProps<\n\tT extends { className?: string; [ key: string ]: unknown }\n>( defaultProps: Partial< T > = {}, props: T = {} as T ) {\n\tconst mergedProps: T = {\n\t\t...defaultProps,\n\t\t...props,\n\t};\n\n\tif ( props.className && defaultProps.className ) {\n\t\tmergedProps.className = classnames(\n\t\t\tprops.className,\n\t\t\tdefaultProps.className\n\t\t);\n\t}\n\n\treturn mergedProps;\n}\n\nfunction isFunction( maybeFunc: unknown ): maybeFunc is () => void {\n\treturn typeof maybeFunc === 'function';\n}\n\n/**\n *\n * The DropdownMenu displays a list of actions (each contained in a MenuItem,\n * MenuItemsChoice, or MenuGroup) in a compact way. It appears in a Popover\n * after the user has interacted with an element (a button or icon) or when\n * they perform a specific action.\n *\n * Render a Dropdown Menu with a set of controls:\n *\n * ```jsx\n * import { DropdownMenu } from '@wordpress/components';\n * import {\n * \tmore,\n * \tarrowLeft,\n * \tarrowRight,\n * \tarrowUp,\n * \tarrowDown,\n * } from '@wordpress/icons';\n *\n * const MyDropdownMenu = () => (\n * \t<DropdownMenu\n * \t\ticon={ more }\n * \t\tlabel=\"Select a direction\"\n * \t\tcontrols={ [\n * \t\t\t{\n * \t\t\t\ttitle: 'Up',\n * \t\t\t\ticon: arrowUp,\n * \t\t\t\tonClick: () => console.log( 'up' ),\n * \t\t\t},\n * \t\t\t{\n * \t\t\t\ttitle: 'Right',\n * \t\t\t\ticon: arrowRight,\n * \t\t\t\tonClick: () => console.log( 'right' ),\n * \t\t\t},\n * \t\t\t{\n * \t\t\t\ttitle: 'Down',\n * \t\t\t\ticon: arrowDown,\n * \t\t\t\tonClick: () => console.log( 'down' ),\n * \t\t\t},\n * \t\t\t{\n * \t\t\t\ttitle: 'Left',\n * \t\t\t\ticon: arrowLeft,\n * \t\t\t\tonClick: () => console.log( 'left' ),\n * \t\t\t},\n * \t\t] }\n * \t/>\n * );\n * ```\n *\n * Alternatively, specify a `children` function which returns elements valid for\n * use in a DropdownMenu: `MenuItem`, `MenuItemsChoice`, or `MenuGroup`.\n *\n * ```jsx\n * import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';\n * import { more, arrowUp, arrowDown, trash } from '@wordpress/icons';\n *\n * const MyDropdownMenu = () => (\n * \t<DropdownMenu icon={ more } label=\"Select a direction\">\n * \t\t{ ( { onClose } ) => (\n * \t\t\t<>\n * \t\t\t\t<MenuGroup>\n * \t\t\t\t\t<MenuItem icon={ arrowUp } onClick={ onClose }>\n * \t\t\t\t\t\tMove Up\n * \t\t\t\t\t</MenuItem>\n * \t\t\t\t\t<MenuItem icon={ arrowDown } onClick={ onClose }>\n * \t\t\t\t\t\tMove Down\n * \t\t\t\t\t</MenuItem>\n * \t\t\t\t</MenuGroup>\n * \t\t\t\t<MenuGroup>\n * \t\t\t\t\t<MenuItem icon={ trash } onClick={ onClose }>\n * \t\t\t\t\t\tRemove\n * \t\t\t\t\t</MenuItem>\n * \t\t\t\t</MenuGroup>\n * \t\t\t</>\n * \t\t) }\n * \t</DropdownMenu>\n * );\n * ```\n *\n */\n\nfunction DropdownMenu( dropdownMenuProps: DropdownMenuProps ) {\n\tconst {\n\t\tchildren,\n\t\tclassName,\n\t\tcontrols,\n\t\ticon = menu,\n\t\tlabel,\n\t\tpopoverProps,\n\t\ttoggleProps,\n\t\tmenuProps,\n\t\tdisableOpenOnArrowDown = false,\n\t\ttext,\n\t\tnoIcons,\n\t} = dropdownMenuProps;\n\n\tif ( ! controls?.length && ! isFunction( children ) ) {\n\t\treturn null;\n\t}\n\n\t// Normalize controls to nested array of objects (sets of controls)\n\tlet controlSets: DropdownOption[][];\n\tif ( controls?.length ) {\n\t\t// @ts-expect-error The check below is needed because `DropdownMenus`\n\t\t// rendered by `ToolBarGroup` receive controls as a nested array.\n\t\tcontrolSets = controls;\n\t\tif ( ! Array.isArray( controlSets[ 0 ] ) ) {\n\t\t\t// This is not ideal, but at this point we know that `controls` is\n\t\t\t// not a nested array, even if TypeScript doesn't.\n\t\t\tcontrolSets = [ controls as DropdownOption[] ];\n\t\t}\n\t}\n\n\tconst mergedPopoverProps = mergeProps(\n\t\t{\n\t\t\tclassName: 'components-dropdown-menu__popover',\n\t\t},\n\t\tpopoverProps\n\t);\n\n\treturn (\n\t\t<Dropdown\n\t\t\tclassName={ classnames( 'components-dropdown-menu', className ) }\n\t\t\tpopoverProps={ mergedPopoverProps }\n\t\t\trenderToggle={ ( { isOpen, onToggle } ) => {\n\t\t\t\tconst openOnArrowDown = ( event: React.KeyboardEvent ) => {\n\t\t\t\t\tif ( disableOpenOnArrowDown ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\tif ( ! isOpen && event.code === 'ArrowDown' ) {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tonToggle();\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t\tconst { as: Toggle = Button, ...restToggleProps } =\n\t\t\t\t\ttoggleProps ?? {};\n\n\t\t\t\tconst mergedToggleProps = mergeProps(\n\t\t\t\t\t{\n\t\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t\t'components-dropdown-menu__toggle',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'is-opened': isOpen,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t),\n\t\t\t\t\t},\n\t\t\t\t\trestToggleProps\n\t\t\t\t);\n\n\t\t\t\treturn (\n\t\t\t\t\t<Toggle\n\t\t\t\t\t\t{ ...mergedToggleProps }\n\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\t( ( event ) => {\n\t\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t\t\tif ( mergedToggleProps.onClick ) {\n\t\t\t\t\t\t\t\t\tmergedToggleProps.onClick( event );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} ) as React.MouseEventHandler< HTMLButtonElement >\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonKeyDown={\n\t\t\t\t\t\t\t( ( event ) => {\n\t\t\t\t\t\t\t\topenOnArrowDown( event );\n\t\t\t\t\t\t\t\tif ( mergedToggleProps.onKeyDown ) {\n\t\t\t\t\t\t\t\t\tmergedToggleProps.onKeyDown( event );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t} ) as React.KeyboardEventHandler< HTMLButtonElement >\n\t\t\t\t\t\t}\n\t\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\t\tlabel={ label }\n\t\t\t\t\t\ttext={ text }\n\t\t\t\t\t\tshowTooltip={ toggleProps?.showTooltip ?? true }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ mergedToggleProps.children }\n\t\t\t\t\t</Toggle>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ ( props ) => {\n\t\t\t\tconst mergedMenuProps = mergeProps(\n\t\t\t\t\t{\n\t\t\t\t\t\t'aria-label': label,\n\t\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t\t'components-dropdown-menu__menu',\n\t\t\t\t\t\t\t{ 'no-icons': noIcons }\n\t\t\t\t\t\t),\n\t\t\t\t\t},\n\t\t\t\t\tmenuProps\n\t\t\t\t);\n\n\t\t\t\treturn (\n\t\t\t\t\t<NavigableMenu { ...mergedMenuProps } role=\"menu\">\n\t\t\t\t\t\t{ isFunction( children ) ? children( props ) : null }\n\t\t\t\t\t\t{ controlSets?.flatMap( ( controlSet, indexOfSet ) =>\n\t\t\t\t\t\t\tcontrolSet.map( ( control, indexOfControl ) => (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tkey={ [\n\t\t\t\t\t\t\t\t\t\tindexOfSet,\n\t\t\t\t\t\t\t\t\t\tindexOfControl,\n\t\t\t\t\t\t\t\t\t].join() }\n\t\t\t\t\t\t\t\t\tonClick={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\tprops.onClose();\n\t\t\t\t\t\t\t\t\t\tif ( control.onClick ) {\n\t\t\t\t\t\t\t\t\t\t\tcontrol.onClick();\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t\t'components-dropdown-menu__menu-item',\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t'has-separator':\n\t\t\t\t\t\t\t\t\t\t\t\tindexOfSet > 0 &&\n\t\t\t\t\t\t\t\t\t\t\t\tindexOfControl === 0,\n\t\t\t\t\t\t\t\t\t\t\t'is-active': control.isActive,\n\t\t\t\t\t\t\t\t\t\t\t'is-icon-only': ! control.title,\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\ticon={ control.icon }\n\t\t\t\t\t\t\t\t\tlabel={ control.label }\n\t\t\t\t\t\t\t\t\taria-checked={\n\t\t\t\t\t\t\t\t\t\tcontrol.role === 'menuitemcheckbox' ||\n\t\t\t\t\t\t\t\t\t\tcontrol.role === 'menuitemradio'\n\t\t\t\t\t\t\t\t\t\t\t? control.isActive\n\t\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\trole={\n\t\t\t\t\t\t\t\t\t\tcontrol.role === 'menuitemcheckbox' ||\n\t\t\t\t\t\t\t\t\t\tcontrol.role === 'menuitemradio'\n\t\t\t\t\t\t\t\t\t\t\t? control.role\n\t\t\t\t\t\t\t\t\t\t\t: 'menuitem'\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tdisabled={ control.isDisabled }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ control.title }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t) )\n\t\t\t\t\t\t) }\n\t\t\t\t\t</NavigableMenu>\n\t\t\t\t);\n\t\t\t} }\n\t\t/>\n\t);\n}\n\nexport default DropdownMenu;\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}