@wordpress/components 19.8.4 → 19.11.0

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/date-time/time.js"],"names":["TIMEZONELESS_FORMAT","from12hTo24h","hours","isPm","UpdateOnBlurAsIntegerField","as","value","onUpdate","className","props","handleBlur","event","target","parsedValue","parseInt","max","min","name","key","defaultValue","onBlur","TimePicker","is12Hour","currentTime","onChange","date","setDate","startOf","day","month","year","minutes","am","format","changeDate","newDate","update","adjustedValue","clone","updateAmPm","parsedHours","dayFormat","monthFormat","dayMonthFormat"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { isInteger } from 'lodash';\nimport moment from 'moment';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreateElement,\n\tuseState,\n\tuseMemo,\n\tuseEffect,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport ButtonGroup from '../button-group';\nimport TimeZone from './timezone';\n\n/**\n * Module Constants\n */\nconst TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';\n\nfunction from12hTo24h( hours, isPm ) {\n\treturn isPm ? ( ( hours % 12 ) + 12 ) % 24 : hours % 12;\n}\n\n/**\n * <UpdateOnBlurAsIntegerField>\n * A shared component to parse, validate, and handle remounting of the underlying form field element like <input> and <select>.\n *\n * @param {Object}        props             Component props.\n * @param {string}        props.as          Render the component as specific element tag, defaults to \"input\".\n * @param {number|string} props.value       The default value of the component which will be parsed to integer.\n * @param {Function}      props.onUpdate    Call back when blurred and validated.\n * @param {string}        [props.className]\n */\nfunction UpdateOnBlurAsIntegerField( {\n\tas,\n\tvalue,\n\tonUpdate,\n\tclassName,\n\t...props\n} ) {\n\tfunction handleBlur( event ) {\n\t\tconst { target } = event;\n\n\t\tif ( value === target.value ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst parsedValue = parseInt( target.value, 10 );\n\n\t\t// Run basic number validation on the input.\n\t\tif (\n\t\t\t! isInteger( parsedValue ) ||\n\t\t\t( typeof props.max !== 'undefined' && parsedValue > props.max ) ||\n\t\t\t( typeof props.min !== 'undefined' && parsedValue < props.min )\n\t\t) {\n\t\t\t// If validation failed, reset the value to the previous valid value.\n\t\t\ttarget.value = value;\n\t\t} else {\n\t\t\t// Otherwise, it's valid, call onUpdate.\n\t\t\tonUpdate( target.name, parsedValue );\n\t\t}\n\t}\n\n\treturn createElement( as || 'input', {\n\t\t// Re-mount the input value to accept the latest value as the defaultValue.\n\t\tkey: value,\n\t\tdefaultValue: value,\n\t\tonBlur: handleBlur,\n\t\tclassName: classnames(\n\t\t\t'components-datetime__time-field-integer-field',\n\t\t\tclassName\n\t\t),\n\t\t...props,\n\t} );\n}\n\n/**\n * <TimePicker>\n *\n * @typedef {Date|string|number} WPValidDateTimeFormat\n *\n * @param {Object}                props             Component props.\n * @param {boolean}               props.is12Hour    Should the time picker showed in 12 hour format or 24 hour format.\n * @param {WPValidDateTimeFormat} props.currentTime The initial current time the time picker should render.\n * @param {Function}              props.onChange    Callback function when the date changed.\n */\nexport function TimePicker( { is12Hour, currentTime, onChange } ) {\n\tconst [ date, setDate ] = useState( () =>\n\t\t// Truncate the date at the minutes, see: #15495.\n\t\tmoment( currentTime ).startOf( 'minutes' )\n\t);\n\n\t// Reset the state when currentTime changed.\n\tuseEffect( () => {\n\t\tsetDate(\n\t\t\tcurrentTime ? moment( currentTime ).startOf( 'minutes' ) : moment()\n\t\t);\n\t}, [ currentTime ] );\n\n\tconst { day, month, year, minutes, hours, am } = useMemo(\n\t\t() => ( {\n\t\t\tday: date.format( 'DD' ),\n\t\t\tmonth: date.format( 'MM' ),\n\t\t\tyear: date.format( 'YYYY' ),\n\t\t\tminutes: date.format( 'mm' ),\n\t\t\thours: date.format( is12Hour ? 'hh' : 'HH' ),\n\t\t\tam: date.format( 'H' ) <= 11 ? 'AM' : 'PM',\n\t\t} ),\n\t\t[ date, is12Hour ]\n\t);\n\n\t/**\n\t * Function that sets the date state and calls the onChange with a new date.\n\t * The date is truncated at the minutes.\n\t *\n\t * @param {Object} newDate The date object.\n\t */\n\tfunction changeDate( newDate ) {\n\t\tsetDate( newDate );\n\t\tonChange( newDate.format( TIMEZONELESS_FORMAT ) );\n\t}\n\n\tfunction update( name, value ) {\n\t\t// If the 12-hour format is being used and the 'PM' period is selected, then\n\t\t// the incoming value (which ranges 1-12) should be increased by 12 to match\n\t\t// the expected 24-hour format.\n\t\tlet adjustedValue = value;\n\t\tif ( name === 'hours' && is12Hour ) {\n\t\t\tadjustedValue = from12hTo24h( value, am === 'PM' );\n\t\t}\n\n\t\t// Clone the date and call the specific setter function according to `name`.\n\t\tconst newDate = date.clone()[ name ]( adjustedValue );\n\t\tchangeDate( newDate );\n\t}\n\n\tfunction updateAmPm( value ) {\n\t\treturn () => {\n\t\t\tif ( am === value ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst parsedHours = parseInt( hours, 10 );\n\n\t\t\tconst newDate = date\n\t\t\t\t.clone()\n\t\t\t\t.hours( from12hTo24h( parsedHours, value === 'PM' ) );\n\n\t\t\tchangeDate( newDate );\n\t\t};\n\t}\n\n\tconst dayFormat = (\n\t\t<div className=\"components-datetime__time-field components-datetime__time-field-day\">\n\t\t\t<UpdateOnBlurAsIntegerField\n\t\t\t\taria-label={ __( 'Day' ) }\n\t\t\t\tclassName=\"components-datetime__time-field-day-input\"\n\t\t\t\ttype=\"number\"\n\t\t\t\t// The correct function to call in moment.js is \"date\" not \"day\".\n\t\t\t\tname=\"date\"\n\t\t\t\tvalue={ day }\n\t\t\t\tstep={ 1 }\n\t\t\t\tmin={ 1 }\n\t\t\t\tmax={ 31 }\n\t\t\t\tonUpdate={ update }\n\t\t\t/>\n\t\t</div>\n\t);\n\n\tconst monthFormat = (\n\t\t<div className=\"components-datetime__time-field components-datetime__time-field-month\">\n\t\t\t<UpdateOnBlurAsIntegerField\n\t\t\t\tas=\"select\"\n\t\t\t\taria-label={ __( 'Month' ) }\n\t\t\t\tclassName=\"components-datetime__time-field-month-select\"\n\t\t\t\tname=\"month\"\n\t\t\t\tvalue={ month }\n\t\t\t\t// The value starts from 0, so we have to -1 when setting month.\n\t\t\t\tonUpdate={ ( key, value ) => update( key, value - 1 ) }\n\t\t\t>\n\t\t\t\t<option value=\"01\">{ __( 'January' ) }</option>\n\t\t\t\t<option value=\"02\">{ __( 'February' ) }</option>\n\t\t\t\t<option value=\"03\">{ __( 'March' ) }</option>\n\t\t\t\t<option value=\"04\">{ __( 'April' ) }</option>\n\t\t\t\t<option value=\"05\">{ __( 'May' ) }</option>\n\t\t\t\t<option value=\"06\">{ __( 'June' ) }</option>\n\t\t\t\t<option value=\"07\">{ __( 'July' ) }</option>\n\t\t\t\t<option value=\"08\">{ __( 'August' ) }</option>\n\t\t\t\t<option value=\"09\">{ __( 'September' ) }</option>\n\t\t\t\t<option value=\"10\">{ __( 'October' ) }</option>\n\t\t\t\t<option value=\"11\">{ __( 'November' ) }</option>\n\t\t\t\t<option value=\"12\">{ __( 'December' ) }</option>\n\t\t\t</UpdateOnBlurAsIntegerField>\n\t\t</div>\n\t);\n\n\tconst dayMonthFormat = is12Hour ? (\n\t\t<>\n\t\t\t{ monthFormat }\n\t\t\t{ dayFormat }\n\t\t</>\n\t) : (\n\t\t<>\n\t\t\t{ dayFormat }\n\t\t\t{ monthFormat }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<div className={ classnames( 'components-datetime__time' ) }>\n\t\t\t<fieldset>\n\t\t\t\t<legend className=\"components-datetime__time-legend invisible\">\n\t\t\t\t\t{ __( 'Date' ) }\n\t\t\t\t</legend>\n\t\t\t\t<div className=\"components-datetime__time-wrapper\">\n\t\t\t\t\t{ dayMonthFormat }\n\n\t\t\t\t\t<div className=\"components-datetime__time-field components-datetime__time-field-year\">\n\t\t\t\t\t\t<UpdateOnBlurAsIntegerField\n\t\t\t\t\t\t\taria-label={ __( 'Year' ) }\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-field-year-input\"\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tname=\"year\"\n\t\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={ 9999 }\n\t\t\t\t\t\t\tvalue={ year }\n\t\t\t\t\t\t\tonUpdate={ update }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\n\t\t\t<fieldset>\n\t\t\t\t<legend className=\"components-datetime__time-legend invisible\">\n\t\t\t\t\t{ __( 'Time' ) }\n\t\t\t\t</legend>\n\t\t\t\t<div className=\"components-datetime__time-wrapper\">\n\t\t\t\t\t<div className=\"components-datetime__time-field components-datetime__time-field-time\">\n\t\t\t\t\t\t<UpdateOnBlurAsIntegerField\n\t\t\t\t\t\t\taria-label={ __( 'Hours' ) }\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-field-hours-input\"\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tname=\"hours\"\n\t\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\t\tmin={ is12Hour ? 1 : 0 }\n\t\t\t\t\t\t\tmax={ is12Hour ? 12 : 23 }\n\t\t\t\t\t\t\tvalue={ hours }\n\t\t\t\t\t\t\tonUpdate={ update }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-separator\"\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t:\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<UpdateOnBlurAsIntegerField\n\t\t\t\t\t\t\taria-label={ __( 'Minutes' ) }\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-field-minutes-input\"\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tname=\"minutes\"\n\t\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={ 59 }\n\t\t\t\t\t\t\tvalue={ minutes }\n\t\t\t\t\t\t\tonUpdate={ update }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t{ is12Hour && (\n\t\t\t\t\t\t<ButtonGroup className=\"components-datetime__time-field components-datetime__time-field-am-pm\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\t\tam === 'AM' ? 'primary' : 'secondary'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonClick={ updateAmPm( 'AM' ) }\n\t\t\t\t\t\t\t\tclassName=\"components-datetime__time-am-button\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'AM' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\t\tam === 'PM' ? 'primary' : 'secondary'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonClick={ updateAmPm( 'PM' ) }\n\t\t\t\t\t\t\t\tclassName=\"components-datetime__time-pm-button\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'PM' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</ButtonGroup>\n\t\t\t\t\t) }\n\n\t\t\t\t\t<TimeZone />\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\t\t</div>\n\t);\n}\n\nexport default TimePicker;\n"]}
+{"version":3,"sources":["@wordpress/components/src/date-time/time.tsx"],"names":["TIMEZONELESS_FORMAT","from12hTo24h","hours","isPm","UpdateOnBlurAsIntegerField","as","value","onUpdate","className","props","handleBlur","event","target","String","parsedValue","parseInt","max","min","key","defaultValue","onBlur","TimePicker","is12Hour","currentTime","onChange","date","setDate","startOf","day","month","year","minutes","am","format","Number","changeDate","newDate","update","name","adjustedValue","clone","updateAmPm","parsedHours","dayFormat","monthFormat","dayMonthFormat"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { isInteger } from 'lodash';\nimport moment from 'moment';\nimport type { FocusEvent } from 'react';\nimport type { Moment } from 'moment';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreateElement,\n\tuseState,\n\tuseMemo,\n\tuseEffect,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport ButtonGroup from '../button-group';\nimport TimeZone from './timezone';\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { UpdateOnBlurAsIntegerFieldProps, TimePickerProps } from './types';\n\nconst TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';\n\nfunction from12hTo24h( hours: number, isPm: boolean ) {\n\treturn isPm ? ( ( hours % 12 ) + 12 ) % 24 : hours % 12;\n}\n\n/**\n * A shared component to parse, validate, and handle remounting of the\n * underlying form field element like <input> and <select>.\n */\nfunction UpdateOnBlurAsIntegerField( {\n\tas,\n\tvalue,\n\tonUpdate,\n\tclassName,\n\t...props\n}: WordPressComponentProps< UpdateOnBlurAsIntegerFieldProps, 'input', true > ) {\n\tfunction handleBlur( event: FocusEvent< HTMLInputElement > ) {\n\t\tconst { target } = event;\n\n\t\tif ( String( value ) === target.value ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst parsedValue = parseInt( target.value, 10 );\n\n\t\t// Run basic number validation on the input.\n\t\tif (\n\t\t\t! isInteger( parsedValue ) ||\n\t\t\t( typeof props.max !== 'undefined' && parsedValue > props.max ) ||\n\t\t\t( typeof props.min !== 'undefined' && parsedValue < props.min )\n\t\t) {\n\t\t\t// If validation failed, reset the value to the previous valid value.\n\t\t\ttarget.value = String( value );\n\t\t} else {\n\t\t\t// Otherwise, it's valid, call onUpdate.\n\t\t\tonUpdate( parsedValue );\n\t\t}\n\t}\n\n\treturn createElement( as || 'input', {\n\t\t// Re-mount the input value to accept the latest value as the defaultValue.\n\t\tkey: value,\n\t\tdefaultValue: value,\n\t\tonBlur: handleBlur,\n\t\tclassName: classnames(\n\t\t\t'components-datetime__time-field-integer-field',\n\t\t\tclassName\n\t\t),\n\t\t...props,\n\t} );\n}\n\n/**\n * TimePicker is a React component that renders a clock for time selection.\n *\n * ```jsx\n * import { TimePicker } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyTimePicker = () => {\n *   const [ time, setTime ] = useState( new Date() );\n *\n *   return (\n *     <TimePicker\n *       currentTime={ date }\n *       onChange={ ( newTime ) => setTime( newTime ) }\n *       is12Hour\n *     />\n *   );\n * };\n * ```\n */\nexport function TimePicker( {\n\tis12Hour,\n\tcurrentTime,\n\tonChange,\n}: TimePickerProps ) {\n\tconst [ date, setDate ] = useState( () =>\n\t\t// Truncate the date at the minutes, see: #15495.\n\t\tcurrentTime ? moment( currentTime ).startOf( 'minutes' ) : moment()\n\t);\n\n\t// Reset the state when currentTime changed.\n\tuseEffect( () => {\n\t\tsetDate(\n\t\t\tcurrentTime ? moment( currentTime ).startOf( 'minutes' ) : moment()\n\t\t);\n\t}, [ currentTime ] );\n\n\tconst { day, month, year, minutes, hours, am } = useMemo(\n\t\t() => ( {\n\t\t\tday: date.format( 'DD' ),\n\t\t\tmonth: date.format( 'MM' ),\n\t\t\tyear: date.format( 'YYYY' ),\n\t\t\tminutes: date.format( 'mm' ),\n\t\t\thours: date.format( is12Hour ? 'hh' : 'HH' ),\n\t\t\tam: Number( date.format( 'H' ) ) <= 11 ? 'AM' : 'PM',\n\t\t} ),\n\t\t[ date, is12Hour ]\n\t);\n\n\t/**\n\t * Function that sets the date state and calls the onChange with a new date.\n\t * The date is truncated at the minutes.\n\t *\n\t * @param {Moment} newDate The date object.\n\t */\n\tfunction changeDate( newDate: Moment ) {\n\t\tsetDate( newDate );\n\t\tonChange?.( newDate.format( TIMEZONELESS_FORMAT ) );\n\t}\n\n\tfunction update( name: 'date' | 'month' | 'year' | 'hours' | 'minutes' ) {\n\t\treturn ( value: number ) => {\n\t\t\t// If the 12-hour format is being used and the 'PM' period is selected, then\n\t\t\t// the incoming value (which ranges 1-12) should be increased by 12 to match\n\t\t\t// the expected 24-hour format.\n\t\t\tlet adjustedValue = value;\n\t\t\tif ( name === 'hours' && is12Hour ) {\n\t\t\t\tadjustedValue = from12hTo24h( value, am === 'PM' );\n\t\t\t}\n\n\t\t\t// Clone the date and call the specific setter function according to `name`.\n\t\t\tconst newDate = date.clone()[ name ]( adjustedValue );\n\t\t\tchangeDate( newDate );\n\t\t};\n\t}\n\n\tfunction updateAmPm( value: 'AM' | 'PM' ) {\n\t\treturn () => {\n\t\t\tif ( am === value ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst parsedHours = parseInt( hours, 10 );\n\n\t\t\tconst newDate = date\n\t\t\t\t.clone()\n\t\t\t\t.hours( from12hTo24h( parsedHours, value === 'PM' ) );\n\n\t\t\tchangeDate( newDate );\n\t\t};\n\t}\n\n\tconst dayFormat = (\n\t\t<div className=\"components-datetime__time-field components-datetime__time-field-day\">\n\t\t\t<UpdateOnBlurAsIntegerField\n\t\t\t\taria-label={ __( 'Day' ) }\n\t\t\t\tclassName=\"components-datetime__time-field-day-input\"\n\t\t\t\ttype=\"number\"\n\t\t\t\t// The correct function to call in moment.js is \"date\" not \"day\".\n\t\t\t\tname=\"date\"\n\t\t\t\tvalue={ day }\n\t\t\t\tstep={ 1 }\n\t\t\t\tmin={ 1 }\n\t\t\t\tmax={ 31 }\n\t\t\t\tonUpdate={ update( 'date' ) }\n\t\t\t/>\n\t\t</div>\n\t);\n\n\tconst monthFormat = (\n\t\t<div className=\"components-datetime__time-field components-datetime__time-field-month\">\n\t\t\t<UpdateOnBlurAsIntegerField\n\t\t\t\tas=\"select\"\n\t\t\t\taria-label={ __( 'Month' ) }\n\t\t\t\tclassName=\"components-datetime__time-field-month-select\"\n\t\t\t\tname=\"month\"\n\t\t\t\tvalue={ month }\n\t\t\t\t// The value starts from 0, so we have to -1 when setting month.\n\t\t\t\tonUpdate={ ( value ) => update( 'month' )( value - 1 ) }\n\t\t\t>\n\t\t\t\t<option value=\"01\">{ __( 'January' ) }</option>\n\t\t\t\t<option value=\"02\">{ __( 'February' ) }</option>\n\t\t\t\t<option value=\"03\">{ __( 'March' ) }</option>\n\t\t\t\t<option value=\"04\">{ __( 'April' ) }</option>\n\t\t\t\t<option value=\"05\">{ __( 'May' ) }</option>\n\t\t\t\t<option value=\"06\">{ __( 'June' ) }</option>\n\t\t\t\t<option value=\"07\">{ __( 'July' ) }</option>\n\t\t\t\t<option value=\"08\">{ __( 'August' ) }</option>\n\t\t\t\t<option value=\"09\">{ __( 'September' ) }</option>\n\t\t\t\t<option value=\"10\">{ __( 'October' ) }</option>\n\t\t\t\t<option value=\"11\">{ __( 'November' ) }</option>\n\t\t\t\t<option value=\"12\">{ __( 'December' ) }</option>\n\t\t\t</UpdateOnBlurAsIntegerField>\n\t\t</div>\n\t);\n\n\tconst dayMonthFormat = is12Hour ? (\n\t\t<>\n\t\t\t{ monthFormat }\n\t\t\t{ dayFormat }\n\t\t</>\n\t) : (\n\t\t<>\n\t\t\t{ dayFormat }\n\t\t\t{ monthFormat }\n\t\t</>\n\t);\n\n\treturn (\n\t\t<div className={ classnames( 'components-datetime__time' ) }>\n\t\t\t<fieldset>\n\t\t\t\t<legend className=\"components-datetime__time-legend invisible\">\n\t\t\t\t\t{ __( 'Date' ) }\n\t\t\t\t</legend>\n\t\t\t\t<div className=\"components-datetime__time-wrapper\">\n\t\t\t\t\t{ dayMonthFormat }\n\n\t\t\t\t\t<div className=\"components-datetime__time-field components-datetime__time-field-year\">\n\t\t\t\t\t\t<UpdateOnBlurAsIntegerField\n\t\t\t\t\t\t\taria-label={ __( 'Year' ) }\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-field-year-input\"\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tname=\"year\"\n\t\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={ 9999 }\n\t\t\t\t\t\t\tvalue={ year }\n\t\t\t\t\t\t\tonUpdate={ update( 'year' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\n\t\t\t<fieldset>\n\t\t\t\t<legend className=\"components-datetime__time-legend invisible\">\n\t\t\t\t\t{ __( 'Time' ) }\n\t\t\t\t</legend>\n\t\t\t\t<div className=\"components-datetime__time-wrapper\">\n\t\t\t\t\t<div className=\"components-datetime__time-field components-datetime__time-field-time\">\n\t\t\t\t\t\t<UpdateOnBlurAsIntegerField\n\t\t\t\t\t\t\taria-label={ __( 'Hours' ) }\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-field-hours-input\"\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tname=\"hours\"\n\t\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\t\tmin={ is12Hour ? 1 : 0 }\n\t\t\t\t\t\t\tmax={ is12Hour ? 12 : 23 }\n\t\t\t\t\t\t\tvalue={ hours }\n\t\t\t\t\t\t\tonUpdate={ update( 'hours' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-separator\"\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t:\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<UpdateOnBlurAsIntegerField\n\t\t\t\t\t\t\taria-label={ __( 'Minutes' ) }\n\t\t\t\t\t\t\tclassName=\"components-datetime__time-field-minutes-input\"\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tname=\"minutes\"\n\t\t\t\t\t\t\tstep={ 1 }\n\t\t\t\t\t\t\tmin={ 0 }\n\t\t\t\t\t\t\tmax={ 59 }\n\t\t\t\t\t\t\tvalue={ minutes }\n\t\t\t\t\t\t\tonUpdate={ update( 'minutes' ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t{ is12Hour && (\n\t\t\t\t\t\t<ButtonGroup className=\"components-datetime__time-field components-datetime__time-field-am-pm\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\t\tam === 'AM' ? 'primary' : 'secondary'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonClick={ updateAmPm( 'AM' ) }\n\t\t\t\t\t\t\t\tclassName=\"components-datetime__time-am-button\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'AM' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\t\tam === 'PM' ? 'primary' : 'secondary'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonClick={ updateAmPm( 'PM' ) }\n\t\t\t\t\t\t\t\tclassName=\"components-datetime__time-pm-button\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'PM' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</ButtonGroup>\n\t\t\t\t\t) }\n\n\t\t\t\t\t<TimeZone />\n\t\t\t\t</div>\n\t\t\t</fieldset>\n\t\t</div>\n\t);\n}\n\nexport default TimePicker;\n"]}

package/build/date-time/timezone.js

@@ -24,7 +24,8 @@ var _tooltip = _interopRequireDefault(require("../tooltip"));
  */
 
 /**
- * Displays timezone information when user timezone is different from site timezone.
+ * Displays timezone information when user timezone is different from site
+ * timezone.
  */
 const TimeZone = () => {
   const {
@@ -38,8 +39,8 @@ const TimeZone = () => {
     return null;
   }
 
-  const offsetSymbol = timezone.offset >= 0 ? '+' : '';
-  const zoneAbbr = '' !== timezone.abbr && isNaN(timezone.abbr) ? timezone.abbr : `UTC${offsetSymbol}${timezone.offset}`;
+  const offsetSymbol = Number(timezone.offset) >= 0 ? '+' : '';
+  const zoneAbbr = '' !== timezone.abbr && isNaN(Number(timezone.abbr)) ? timezone.abbr : `UTC${offsetSymbol}${timezone.offset}`;
   const timezoneDetail = 'UTC' === timezone.string ? (0, _i18n.__)('Coordinated Universal Time') : `(${zoneAbbr}) ${timezone.string.replace('_', ' ')}`;
   return (0, _element.createElement)(_tooltip.default, {
     position: "top center",

package/build/date-time/timezone.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/date-time/timezone.js"],"names":["TimeZone","timezone","userTimezoneOffset","Date","getTimezoneOffset","Number","offset","offsetSymbol","zoneAbbr","abbr","isNaN","timezoneDetail","string","replace"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AACA,MAAMA,QAAQ,GAAG,MAAM;AACtB,QAAM;AAAEC,IAAAA;AAAF,MAAe,sCAArB,CADsB,CAGtB;;AACA,QAAMC,kBAAkB,GAAG,CAAC,CAAD,IAAO,IAAIC,IAAJ,GAAWC,iBAAX,KAAiC,EAAxC,CAA3B,CAJsB,CAMtB;AACA;;AACA,MAAKC,MAAM,CAAEJ,QAAQ,CAACK,MAAX,CAAN,KAA8BJ,kBAAnC,EAAwD;AACvD,WAAO,IAAP;AACA;;AAED,QAAMK,YAAY,GAAGN,QAAQ,CAACK,MAAT,IAAmB,CAAnB,GAAuB,GAAvB,GAA6B,EAAlD;AACA,QAAME,QAAQ,GACb,OAAOP,QAAQ,CAACQ,IAAhB,IAAwBC,KAAK,CAAET,QAAQ,CAACQ,IAAX,CAA7B,GACGR,QAAQ,CAACQ,IADZ,GAEI,MAAMF,YAAc,GAAGN,QAAQ,CAACK,MAAQ,EAH7C;AAKA,QAAMK,cAAc,GACnB,UAAUV,QAAQ,CAACW,MAAnB,GACG,cAAI,4BAAJ,CADH,GAEI,IAAIJ,QAAU,KAAKP,QAAQ,CAACW,MAAT,CAAgBC,OAAhB,CAAyB,GAAzB,EAA8B,GAA9B,CAAqC,EAH7D;AAKA,SACC,4BAAC,gBAAD;AAAS,IAAA,QAAQ,EAAC,YAAlB;AAA+B,IAAA,IAAI,EAAGF;AAAtC,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAAiDH,QAAjD,CADD,CADD;AAKA,CA5BD;;eA8BeR,Q","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalGetSettings as getDateSettings } from '@wordpress/date';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\n\n/**\n * Displays timezone information when user timezone is different from site timezone.\n */\nconst TimeZone = () => {\n\tconst { timezone } = getDateSettings();\n\n\t// Convert timezone offset to hours.\n\tconst userTimezoneOffset = -1 * ( new Date().getTimezoneOffset() / 60 );\n\n\t// System timezone and user timezone match, nothing needed.\n\t// Compare as numbers because it comes over as string.\n\tif ( Number( timezone.offset ) === userTimezoneOffset ) {\n\t\treturn null;\n\t}\n\n\tconst offsetSymbol = timezone.offset >= 0 ? '+' : '';\n\tconst zoneAbbr =\n\t\t'' !== timezone.abbr && isNaN( timezone.abbr )\n\t\t\t? timezone.abbr\n\t\t\t: `UTC${ offsetSymbol }${ timezone.offset }`;\n\n\tconst timezoneDetail =\n\t\t'UTC' === timezone.string\n\t\t\t? __( 'Coordinated Universal Time' )\n\t\t\t: `(${ zoneAbbr }) ${ timezone.string.replace( '_', ' ' ) }`;\n\n\treturn (\n\t\t<Tooltip position=\"top center\" text={ timezoneDetail }>\n\t\t\t<div className=\"components-datetime__timezone\">{ zoneAbbr }</div>\n\t\t</Tooltip>\n\t);\n};\n\nexport default TimeZone;\n"]}
+{"version":3,"sources":["@wordpress/components/src/date-time/timezone.tsx"],"names":["TimeZone","timezone","userTimezoneOffset","Date","getTimezoneOffset","Number","offset","offsetSymbol","zoneAbbr","abbr","isNaN","timezoneDetail","string","replace"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA,MAAMA,QAAQ,GAAG,MAAM;AACtB,QAAM;AAAEC,IAAAA;AAAF,MAAe,sCAArB,CADsB,CAGtB;;AACA,QAAMC,kBAAkB,GAAG,CAAC,CAAD,IAAO,IAAIC,IAAJ,GAAWC,iBAAX,KAAiC,EAAxC,CAA3B,CAJsB,CAMtB;AACA;;AACA,MAAKC,MAAM,CAAEJ,QAAQ,CAACK,MAAX,CAAN,KAA8BJ,kBAAnC,EAAwD;AACvD,WAAO,IAAP;AACA;;AAED,QAAMK,YAAY,GAAGF,MAAM,CAAEJ,QAAQ,CAACK,MAAX,CAAN,IAA6B,CAA7B,GAAiC,GAAjC,GAAuC,EAA5D;AACA,QAAME,QAAQ,GACb,OAAOP,QAAQ,CAACQ,IAAhB,IAAwBC,KAAK,CAAEL,MAAM,CAAEJ,QAAQ,CAACQ,IAAX,CAAR,CAA7B,GACGR,QAAQ,CAACQ,IADZ,GAEI,MAAMF,YAAc,GAAGN,QAAQ,CAACK,MAAQ,EAH7C;AAKA,QAAMK,cAAc,GACnB,UAAUV,QAAQ,CAACW,MAAnB,GACG,cAAI,4BAAJ,CADH,GAEI,IAAIJ,QAAU,KAAKP,QAAQ,CAACW,MAAT,CAAgBC,OAAhB,CAAyB,GAAzB,EAA8B,GAA9B,CAAqC,EAH7D;AAKA,SACC,4BAAC,gBAAD;AAAS,IAAA,QAAQ,EAAC,YAAlB;AAA+B,IAAA,IAAI,EAAGF;AAAtC,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KAAiDH,QAAjD,CADD,CADD;AAKA,CA5BD;;eA8BeR,Q","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalGetSettings as getDateSettings } from '@wordpress/date';\n\n/**\n * Internal dependencies\n */\nimport Tooltip from '../tooltip';\n\n/**\n * Displays timezone information when user timezone is different from site\n * timezone.\n */\nconst TimeZone = () => {\n\tconst { timezone } = getDateSettings();\n\n\t// Convert timezone offset to hours.\n\tconst userTimezoneOffset = -1 * ( new Date().getTimezoneOffset() / 60 );\n\n\t// System timezone and user timezone match, nothing needed.\n\t// Compare as numbers because it comes over as string.\n\tif ( Number( timezone.offset ) === userTimezoneOffset ) {\n\t\treturn null;\n\t}\n\n\tconst offsetSymbol = Number( timezone.offset ) >= 0 ? '+' : '';\n\tconst zoneAbbr =\n\t\t'' !== timezone.abbr && isNaN( Number( timezone.abbr ) )\n\t\t\t? timezone.abbr\n\t\t\t: `UTC${ offsetSymbol }${ timezone.offset }`;\n\n\tconst timezoneDetail =\n\t\t'UTC' === timezone.string\n\t\t\t? __( 'Coordinated Universal Time' )\n\t\t\t: `(${ zoneAbbr }) ${ timezone.string.replace( '_', ' ' ) }`;\n\n\treturn (\n\t\t<Tooltip position=\"top center\" text={ timezoneDetail }>\n\t\t\t<div className=\"components-datetime__timezone\">{ zoneAbbr }</div>\n\t\t</Tooltip>\n\t);\n};\n\nexport default TimeZone;\n"]}

package/build/date-time/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/build/date-time/types.js.map

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

package/build/date-time/utils.js

@@ -14,11 +14,13 @@ var _moment = _interopRequireDefault(require("moment"));
  */
 
 /**
- * Create a Moment object from a date string. With no date supplied, default to a Moment
- * object representing now. If a null value is passed, return a null value.
+ * Create a Moment object from a date string. With no date supplied, default to
+ * a Moment object representing now. If a null value is passed, return a null
+ * value.
  *
- * @param {?string} date Date representing the currently selected date or null to signify no selection.
- * @return {?moment.Moment} Moment object for selected date or null.
+ * @param  [date] Date representing the currently selected
+ *                date or null to signify no selection.
+ * @return Moment object for selected date or null.
  */
 const getMomentDate = date => {
   if (null === date) {

package/build/date-time/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/date-time/utils.js"],"names":["getMomentDate","date"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,aAAa,GAAKC,IAAF,IAAY;AACxC,MAAK,SAASA,IAAd,EAAqB;AACpB,WAAO,IAAP;AACA;;AACD,SAAOA,IAAI,GAAG,qBAAQA,IAAR,CAAH,GAAoB,sBAA/B;AACA,CALM","sourcesContent":["/**\n * External dependencies\n */\nimport moment from 'moment';\n\n/**\n * Create a Moment object from a date string. With no date supplied, default to a Moment\n * object representing now. If a null value is passed, return a null value.\n *\n * @param {?string} date Date representing the currently selected date or null to signify no selection.\n * @return {?moment.Moment} Moment object for selected date or null.\n */\nexport const getMomentDate = ( date ) => {\n\tif ( null === date ) {\n\t\treturn null;\n\t}\n\treturn date ? moment( date ) : moment();\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/date-time/utils.ts"],"names":["getMomentDate","date"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,aAAa,GAAKC,IAAF,IAA4C;AACxE,MAAK,SAASA,IAAd,EAAqB;AACpB,WAAO,IAAP;AACA;;AACD,SAAOA,IAAI,GAAG,qBAAQA,IAAR,CAAH,GAAoB,sBAA/B;AACA,CALM","sourcesContent":["/**\n * External dependencies\n */\nimport moment from 'moment';\n\n/**\n * Create a Moment object from a date string. With no date supplied, default to\n * a Moment object representing now. If a null value is passed, return a null\n * value.\n *\n * @param  [date] Date representing the currently selected\n *                date or null to signify no selection.\n * @return Moment object for selected date or null.\n */\nexport const getMomentDate = ( date?: Date | string | number | null ) => {\n\tif ( null === date ) {\n\t\treturn null;\n\t}\n\treturn date ? moment( date ) : moment();\n};\n"]}

package/build/disabled/index.js

@@ -11,11 +11,9 @@ var _element = require("@wordpress/element");
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _lodash = require("lodash");
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _dom = require("@wordpress/dom");
+var _compose = require("@wordpress/compose");
 
 var _disabledStyles = require("./styles/disabled-styles");
 
@@ -35,17 +33,6 @@ const {
   Consumer,
   Provider
 } = Context;
-/**
- * Names of control nodes which qualify for disabled behavior.
- *
- * See WHATWG HTML Standard: 4.10.18.5: "Enabling and disabling form controls: the disabled attribute".
- *
- * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#enabling-and-disabling-form-controls:-the-disabled-attribute
- *
- * @type {string[]}
- */
-
-const DISABLED_ELIGIBLE_NODE_NAMES = ['BUTTON', 'FIELDSET', 'INPUT', 'OPTGROUP', 'OPTION', 'SELECT', 'TEXTAREA'];
 /**
  * @typedef OwnProps
  * @property {string}                    [className]       Classname for the disabled element.
@@ -66,67 +53,8 @@ function Disabled(_ref) {
     ...props
   } = _ref;
 
-  /** @type {import('react').RefObject<HTMLDivElement>} */
-  const node = (0, _element.useRef)(null);
-
-  const disable = () => {
-    if (!node.current) {
-      return;
-    }
-
-    _dom.focus.focusable.find(node.current).forEach(focusable => {
-      if ((0, _lodash.includes)(DISABLED_ELIGIBLE_NODE_NAMES, focusable.nodeName)) {
-        focusable.setAttribute('disabled', '');
-      }
-
-      if (focusable.nodeName === 'A') {
-        focusable.setAttribute('tabindex', '-1');
-      }
-
-      const tabIndex = focusable.getAttribute('tabindex');
-
-      if (tabIndex !== null && tabIndex !== '-1') {
-        focusable.removeAttribute('tabindex');
-      }
-
-      if (focusable.hasAttribute('contenteditable')) {
-        focusable.setAttribute('contenteditable', 'false');
-      }
-    });
-  }; // Debounce re-disable since disabling process itself will incur
-  // additional mutations which should be ignored.
-
-
-  const debouncedDisable = (0, _element.useCallback)((0, _lodash.debounce)(disable, undefined, {
-    leading: true
-  }), []);
-  (0, _element.useLayoutEffect)(() => {
-    if (!isDisabled) {
-      return;
-    }
-
-    disable();
-    /** @type {MutationObserver | undefined} */
-
-    let observer;
-
-    if (node.current) {
-      observer = new window.MutationObserver(debouncedDisable);
-      observer.observe(node.current, {
-        childList: true,
-        attributes: true,
-        subtree: true
-      });
-    }
-
-    return () => {
-      if (observer) {
-        observer.disconnect();
-      }
-
-      debouncedDisable.cancel();
-    };
-  }, []);
+  /** @type {import('react').RefCallback<HTMLDivElement>} */
+  const ref = (0, _compose.useDisabled)();
 
   if (!isDisabled) {
     return (0, _element.createElement)(Provider, {
@@ -137,7 +65,7 @@ function Disabled(_ref) {
   return (0, _element.createElement)(Provider, {
     value: true
   }, (0, _element.createElement)(_disabledStyles.StyledWrapper, (0, _extends2.default)({
-    ref: node,
+    ref: ref,
     className: (0, _classnames.default)(className, 'components-disabled')
   }, props), children));
 }

package/build/disabled/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/disabled/index.js"],"names":["Context","Consumer","Provider","DISABLED_ELIGIBLE_NODE_NAMES","Disabled","className","children","isDisabled","props","node","disable","current","focus","focusable","find","forEach","nodeName","setAttribute","tabIndex","getAttribute","removeAttribute","hasAttribute","debouncedDisable","undefined","leading","observer","window","MutationObserver","observe","childList","attributes","subtree","disconnect","cancel"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { includes, debounce } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreateContext,\n\tuseCallback,\n\tuseLayoutEffect,\n\tuseRef,\n} from '@wordpress/element';\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport { StyledWrapper } from './styles/disabled-styles';\n\nconst Context = createContext( false );\nconst { Consumer, Provider } = Context;\n\n/**\n * Names of control nodes which qualify for disabled behavior.\n *\n * See WHATWG HTML Standard: 4.10.18.5: \"Enabling and disabling form controls: the disabled attribute\".\n *\n * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#enabling-and-disabling-form-controls:-the-disabled-attribute\n *\n * @type {string[]}\n */\nconst DISABLED_ELIGIBLE_NODE_NAMES = [\n\t'BUTTON',\n\t'FIELDSET',\n\t'INPUT',\n\t'OPTGROUP',\n\t'OPTION',\n\t'SELECT',\n\t'TEXTAREA',\n];\n\n/**\n * @typedef OwnProps\n * @property {string}                    [className]       Classname for the disabled element.\n * @property {import('react').ReactNode} children          Children to disable.\n * @property {boolean}                   [isDisabled=true] Whether to disable the children.\n */\n\n/**\n * @param {OwnProps & import('react').HTMLAttributes<HTMLDivElement>} props\n * @return {JSX.Element} Element wrapping the children to disable them when isDisabled is true.\n */\nfunction Disabled( { className, children, isDisabled = true, ...props } ) {\n\t/** @type {import('react').RefObject<HTMLDivElement>} */\n\tconst node = useRef( null );\n\n\tconst disable = () => {\n\t\tif ( ! node.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tfocus.focusable.find( node.current ).forEach( ( focusable ) => {\n\t\t\tif (\n\t\t\t\tincludes( DISABLED_ELIGIBLE_NODE_NAMES, focusable.nodeName )\n\t\t\t) {\n\t\t\t\tfocusable.setAttribute( 'disabled', '' );\n\t\t\t}\n\n\t\t\tif ( focusable.nodeName === 'A' ) {\n\t\t\t\tfocusable.setAttribute( 'tabindex', '-1' );\n\t\t\t}\n\n\t\t\tconst tabIndex = focusable.getAttribute( 'tabindex' );\n\t\t\tif ( tabIndex !== null && tabIndex !== '-1' ) {\n\t\t\t\tfocusable.removeAttribute( 'tabindex' );\n\t\t\t}\n\n\t\t\tif ( focusable.hasAttribute( 'contenteditable' ) ) {\n\t\t\t\tfocusable.setAttribute( 'contenteditable', 'false' );\n\t\t\t}\n\t\t} );\n\t};\n\n\t// Debounce re-disable since disabling process itself will incur\n\t// additional mutations which should be ignored.\n\tconst debouncedDisable = useCallback(\n\t\tdebounce( disable, undefined, { leading: true } ),\n\t\t[]\n\t);\n\n\tuseLayoutEffect( () => {\n\t\tif ( ! isDisabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tdisable();\n\n\t\t/** @type {MutationObserver | undefined} */\n\t\tlet observer;\n\t\tif ( node.current ) {\n\t\t\tobserver = new window.MutationObserver( debouncedDisable );\n\t\t\tobserver.observe( node.current, {\n\t\t\t\tchildList: true,\n\t\t\t\tattributes: true,\n\t\t\t\tsubtree: true,\n\t\t\t} );\n\t\t}\n\n\t\treturn () => {\n\t\t\tif ( observer ) {\n\t\t\t\tobserver.disconnect();\n\t\t\t}\n\t\t\tdebouncedDisable.cancel();\n\t\t};\n\t}, [] );\n\n\tif ( ! isDisabled ) {\n\t\treturn <Provider value={ false }>{ children }</Provider>;\n\t}\n\n\treturn (\n\t\t<Provider value={ true }>\n\t\t\t<StyledWrapper\n\t\t\t\tref={ node }\n\t\t\t\tclassName={ classnames( className, 'components-disabled' ) }\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</StyledWrapper>\n\t\t</Provider>\n\t);\n}\n\nDisabled.Context = Context;\nDisabled.Consumer = Consumer;\n\nexport default Disabled;\n"]}
+{"version":3,"sources":["@wordpress/components/src/disabled/index.js"],"names":["Context","Consumer","Provider","Disabled","className","children","isDisabled","props","ref"],"mappings":";;;;;;;;;AASA;;;;AANA;;AAKA;;AAMA;;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAGA,MAAMA,OAAO,GAAG,4BAAe,KAAf,CAAhB;AACA,MAAM;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,IAAyBF,OAA/B;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AACA,SAASG,QAAT,OAA0E;AAAA,MAAvD;AAAEC,IAAAA,SAAF;AAAaC,IAAAA,QAAb;AAAuBC,IAAAA,UAAU,GAAG,IAApC;AAA0C,OAAGC;AAA7C,GAAuD;;AACzE;AACA,QAAMC,GAAG,GAAG,2BAAZ;;AAEA,MAAK,CAAEF,UAAP,EAAoB;AACnB,WAAO,4BAAC,QAAD;AAAU,MAAA,KAAK,EAAG;AAAlB,OAA4BD,QAA5B,CAAP;AACA;;AAED,SACC,4BAAC,QAAD;AAAU,IAAA,KAAK,EAAG;AAAlB,KACC,4BAAC,6BAAD;AACC,IAAA,GAAG,EAAGG,GADP;AAEC,IAAA,SAAS,EAAG,yBAAYJ,SAAZ,EAAuB,qBAAvB;AAFb,KAGMG,KAHN,GAKGF,QALH,CADD,CADD;AAWA;;AAEDF,QAAQ,CAACH,OAAT,GAAmBA,OAAnB;AACAG,QAAQ,CAACF,QAAT,GAAoBA,QAApB;eAEeE,Q","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useDisabled } from '@wordpress/compose';\nimport { createContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { StyledWrapper } from './styles/disabled-styles';\n\nconst Context = createContext( false );\nconst { Consumer, Provider } = Context;\n\n/**\n * @typedef OwnProps\n * @property {string}                    [className]       Classname for the disabled element.\n * @property {import('react').ReactNode} children          Children to disable.\n * @property {boolean}                   [isDisabled=true] Whether to disable the children.\n */\n\n/**\n * @param {OwnProps & import('react').HTMLAttributes<HTMLDivElement>} props\n * @return {JSX.Element} Element wrapping the children to disable them when isDisabled is true.\n */\nfunction Disabled( { className, children, isDisabled = true, ...props } ) {\n\t/** @type {import('react').RefCallback<HTMLDivElement>} */\n\tconst ref = useDisabled();\n\n\tif ( ! isDisabled ) {\n\t\treturn <Provider value={ false }>{ children }</Provider>;\n\t}\n\n\treturn (\n\t\t<Provider value={ true }>\n\t\t\t<StyledWrapper\n\t\t\t\tref={ ref }\n\t\t\t\tclassName={ classnames( className, 'components-disabled' ) }\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</StyledWrapper>\n\t\t</Provider>\n\t);\n}\n\nDisabled.Context = Context;\nDisabled.Consumer = Consumer;\n\nexport default Disabled;\n"]}

package/build/draggable/index.native.js

@@ -0,0 +1,223 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DraggableTrigger = void 0;
+
+var _element = require("@wordpress/element");
+
+var _reactNativeGestureHandler = require("react-native-gesture-handler");
+
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+
+var _style = _interopRequireDefault(require("./style.scss"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const Context = (0, _element.createContext)({});
+const {
+  Provider
+} = Context;
+/**
+ * Draggable component.
+ *
+ * @param {Object}      props               Component props.
+ * @param {JSX.Element} props.children      Children to be rendered.
+ * @param {Function}    [props.onDragEnd]   Callback when dragging ends.
+ * @param {Function}    [props.onDragOver]  Callback when dragging happens over an element.
+ * @param {Function}    [props.onDragStart] Callback when dragging starts.
+ *
+ * @return {JSX.Element} The component to be rendered.
+ */
+
+const Draggable = _ref => {
+  let {
+    children,
+    onDragEnd,
+    onDragOver,
+    onDragStart
+  } = _ref;
+  const isDragging = (0, _reactNativeReanimated.useSharedValue)(false);
+  const isPanActive = (0, _reactNativeReanimated.useSharedValue)(false);
+  const draggingId = (0, _reactNativeReanimated.useSharedValue)('');
+  const panGestureRef = (0, _element.useRef)();
+  const currentFirstTouchId = (0, _reactNativeReanimated.useSharedValue)(null);
+  const initialPosition = {
+    x: (0, _reactNativeReanimated.useSharedValue)(0),
+    y: (0, _reactNativeReanimated.useSharedValue)(0)
+  };
+  const lastPosition = {
+    x: (0, _reactNativeReanimated.useSharedValue)(0),
+    y: (0, _reactNativeReanimated.useSharedValue)(0)
+  };
+  (0, _reactNativeReanimated.useAnimatedReaction)(() => isDragging.value, (result, previous) => {
+    if (result === previous || previous === null) {
+      return;
+    }
+
+    if (result) {
+      if (onDragStart) {
+        onDragStart({
+          x: initialPosition.x.value,
+          y: initialPosition.y.value,
+          id: draggingId.value
+        });
+      }
+    } else if (onDragEnd) {
+      onDragEnd({
+        x: lastPosition.x.value,
+        y: lastPosition.y.value,
+        id: draggingId.value
+      });
+    }
+  });
+
+  function getFirstTouchEvent(event) {
+    'worklet';
+
+    return event.allTouches.find(touch => touch.id === currentFirstTouchId.value);
+  }
+
+  const panGesture = _reactNativeGestureHandler.Gesture.Pan().manualActivation(true).onTouchesDown(event => {
+    if (!currentFirstTouchId.value) {
+      const firstEvent = event.allTouches[0];
+      const {
+        x = 0,
+        y = 0
+      } = firstEvent;
+      currentFirstTouchId.value = firstEvent.id;
+      initialPosition.x.value = x;
+      initialPosition.y.value = y;
+    }
+  }).onTouchesMove((event, state) => {
+    if (!isPanActive.value && isDragging.value) {
+      isPanActive.value = true;
+      state.activate();
+    }
+
+    if (isPanActive.value && isDragging.value) {
+      const firstEvent = getFirstTouchEvent(event);
+
+      if (!firstEvent) {
+        state.end();
+        return;
+      }
+
+      lastPosition.x.value = firstEvent.x;
+      lastPosition.y.value = firstEvent.y;
+
+      if (onDragOver) {
+        onDragOver(firstEvent);
+      }
+    }
+  }).onTouchesCancelled((_event, state) => {
+    state.end();
+  }).onEnd(() => {
+    currentFirstTouchId.value = null;
+    isPanActive.value = false;
+    isDragging.value = false;
+  }).withRef(panGestureRef).shouldCancelWhenOutside(false);
+
+  const providerValue = (0, _element.useMemo)(() => {
+    return {
+      panGestureRef,
+      isDragging,
+      isPanActive,
+      draggingId
+    };
+  }, []);
+  return (0, _element.createElement)(_reactNativeGestureHandler.GestureDetector, {
+    gesture: panGesture
+  }, (0, _element.createElement)(_reactNativeReanimated.default.View, {
+    style: _style.default.draggable__container
+  }, (0, _element.createElement)(Provider, {
+    value: providerValue
+  }, children)));
+};
+/**
+ * Draggable trigger component.
+ *
+ * This component acts as the trigger for the dragging functionality.
+ *
+ * @param {Object}      props                  Component props.
+ * @param {JSX.Element} props.children         Children to be rendered.
+ * @param {*}           props.id               Identifier passed within the event callbacks.
+ * @param {boolean}     [props.enabled]        Enables the long-press gesture.
+ * @param {number}      [props.maxDistance]    Maximum distance, that defines how far the finger is allowed to travel during a long press gesture.
+ * @param {number}      [props.minDuration]    Minimum time, that a finger must remain pressed on the corresponding view.
+ * @param {Function}    [props.onLongPress]    Callback when long-press gesture is triggered over an element.
+ * @param {Function}    [props.onLongPressEnd] Callback when long-press gesture ends.
+ *
+ * @return {JSX.Element} The component to be rendered.
+ */
+
+
+const DraggableTrigger = _ref2 => {
+  let {
+    children,
+    enabled = true,
+    id,
+    maxDistance = 1000,
+    minDuration = 500,
+    onLongPress,
+    onLongPressEnd
+  } = _ref2;
+  const {
+    panGestureRef,
+    isDragging,
+    isPanActive,
+    draggingId
+  } = (0, _element.useContext)(Context);
+  const gestureHandler = (0, _reactNativeReanimated.useAnimatedGestureHandler)({
+    onActive: () => {
+      if (isDragging.value) {
+        return;
+      }
+
+      isDragging.value = true;
+      draggingId.value = id;
+
+      if (onLongPress) {
+        (0, _reactNativeReanimated.runOnJS)(onLongPress)(id);
+      }
+    },
+    onEnd: () => {
+      if (!isPanActive.value) {
+        isDragging.value = false;
+      }
+
+      if (onLongPressEnd) {
+        (0, _reactNativeReanimated.runOnJS)(onLongPressEnd)(id);
+      }
+    }
+  });
+  return (0, _element.createElement)(_reactNativeGestureHandler.LongPressGestureHandler, {
+    enabled: enabled,
+    minDurationMs: minDuration,
+    maxDist: maxDistance,
+    simultaneousHandlers: panGestureRef,
+    shouldCancelWhenOutside: false,
+    onGestureEvent: gestureHandler
+  }, children);
+};
+
+exports.DraggableTrigger = DraggableTrigger;
+var _default = Draggable;
+exports.default = _default;
+//# sourceMappingURL=index.native.js.map

package/build/draggable/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/components/src/draggable/index.native.js"],"names":["Context","Provider","Draggable","children","onDragEnd","onDragOver","onDragStart","isDragging","isPanActive","draggingId","panGestureRef","currentFirstTouchId","initialPosition","x","y","lastPosition","value","result","previous","id","getFirstTouchEvent","event","allTouches","find","touch","panGesture","Gesture","Pan","manualActivation","onTouchesDown","firstEvent","onTouchesMove","state","activate","end","onTouchesCancelled","_event","onEnd","withRef","shouldCancelWhenOutside","providerValue","styles","draggable__container","DraggableTrigger","enabled","maxDistance","minDuration","onLongPress","onLongPressEnd","gestureHandler","onActive"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tGesture,\n\tGestureDetector,\n\tLongPressGestureHandler,\n} from 'react-native-gesture-handler';\nimport Animated, {\n\tuseSharedValue,\n\trunOnJS,\n\tuseAnimatedReaction,\n\tuseAnimatedGestureHandler,\n} from 'react-native-reanimated';\n\n/**\n * WordPress dependencies\n */\nimport { createContext, useContext, useRef, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst Context = createContext( {} );\nconst { Provider } = Context;\n\n/**\n * Draggable component.\n *\n * @param {Object}      props               Component props.\n * @param {JSX.Element} props.children      Children to be rendered.\n * @param {Function}    [props.onDragEnd]   Callback when dragging ends.\n * @param {Function}    [props.onDragOver]  Callback when dragging happens over an element.\n * @param {Function}    [props.onDragStart] Callback when dragging starts.\n *\n * @return {JSX.Element} The component to be rendered.\n */\nconst Draggable = ( { children, onDragEnd, onDragOver, onDragStart } ) => {\n\tconst isDragging = useSharedValue( false );\n\tconst isPanActive = useSharedValue( false );\n\tconst draggingId = useSharedValue( '' );\n\tconst panGestureRef = useRef();\n\tconst currentFirstTouchId = useSharedValue( null );\n\n\tconst initialPosition = {\n\t\tx: useSharedValue( 0 ),\n\t\ty: useSharedValue( 0 ),\n\t};\n\tconst lastPosition = {\n\t\tx: useSharedValue( 0 ),\n\t\ty: useSharedValue( 0 ),\n\t};\n\n\tuseAnimatedReaction(\n\t\t() => isDragging.value,\n\t\t( result, previous ) => {\n\t\t\tif ( result === previous || previous === null ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( result ) {\n\t\t\t\tif ( onDragStart ) {\n\t\t\t\t\tonDragStart( {\n\t\t\t\t\t\tx: initialPosition.x.value,\n\t\t\t\t\t\ty: initialPosition.y.value,\n\t\t\t\t\t\tid: draggingId.value,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t} else if ( onDragEnd ) {\n\t\t\t\tonDragEnd( {\n\t\t\t\t\tx: lastPosition.x.value,\n\t\t\t\t\ty: lastPosition.y.value,\n\t\t\t\t\tid: draggingId.value,\n\t\t\t\t} );\n\t\t\t}\n\t\t}\n\t);\n\n\tfunction getFirstTouchEvent( event ) {\n\t\t'worklet';\n\n\t\treturn event.allTouches.find(\n\t\t\t( touch ) => touch.id === currentFirstTouchId.value\n\t\t);\n\t}\n\n\tconst panGesture = Gesture.Pan()\n\t\t.manualActivation( true )\n\t\t.onTouchesDown( ( event ) => {\n\t\t\tif ( ! currentFirstTouchId.value ) {\n\t\t\t\tconst firstEvent = event.allTouches[ 0 ];\n\t\t\t\tconst { x = 0, y = 0 } = firstEvent;\n\n\t\t\t\tcurrentFirstTouchId.value = firstEvent.id;\n\n\t\t\t\tinitialPosition.x.value = x;\n\t\t\t\tinitialPosition.y.value = y;\n\t\t\t}\n\t\t} )\n\t\t.onTouchesMove( ( event, state ) => {\n\t\t\tif ( ! isPanActive.value && isDragging.value ) {\n\t\t\t\tisPanActive.value = true;\n\t\t\t\tstate.activate();\n\t\t\t}\n\n\t\t\tif ( isPanActive.value && isDragging.value ) {\n\t\t\t\tconst firstEvent = getFirstTouchEvent( event );\n\n\t\t\t\tif ( ! firstEvent ) {\n\t\t\t\t\tstate.end();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tlastPosition.x.value = firstEvent.x;\n\t\t\t\tlastPosition.y.value = firstEvent.y;\n\n\t\t\t\tif ( onDragOver ) {\n\t\t\t\t\tonDragOver( firstEvent );\n\t\t\t\t}\n\t\t\t}\n\t\t} )\n\t\t.onTouchesCancelled( ( _event, state ) => {\n\t\t\tstate.end();\n\t\t} )\n\t\t.onEnd( () => {\n\t\t\tcurrentFirstTouchId.value = null;\n\t\t\tisPanActive.value = false;\n\t\t\tisDragging.value = false;\n\t\t} )\n\t\t.withRef( panGestureRef )\n\t\t.shouldCancelWhenOutside( false );\n\n\tconst providerValue = useMemo( () => {\n\t\treturn { panGestureRef, isDragging, isPanActive, draggingId };\n\t}, [] );\n\n\treturn (\n\t\t<GestureDetector gesture={ panGesture }>\n\t\t\t<Animated.View style={ styles.draggable__container }>\n\t\t\t\t<Provider value={ providerValue }>{ children }</Provider>\n\t\t\t</Animated.View>\n\t\t</GestureDetector>\n\t);\n};\n\n/**\n * Draggable trigger component.\n *\n * This component acts as the trigger for the dragging functionality.\n *\n * @param {Object}      props                  Component props.\n * @param {JSX.Element} props.children         Children to be rendered.\n * @param {*}           props.id               Identifier passed within the event callbacks.\n * @param {boolean}     [props.enabled]        Enables the long-press gesture.\n * @param {number}      [props.maxDistance]    Maximum distance, that defines how far the finger is allowed to travel during a long press gesture.\n * @param {number}      [props.minDuration]    Minimum time, that a finger must remain pressed on the corresponding view.\n * @param {Function}    [props.onLongPress]    Callback when long-press gesture is triggered over an element.\n * @param {Function}    [props.onLongPressEnd] Callback when long-press gesture ends.\n *\n * @return {JSX.Element} The component to be rendered.\n */\nconst DraggableTrigger = ( {\n\tchildren,\n\tenabled = true,\n\tid,\n\tmaxDistance = 1000,\n\tminDuration = 500,\n\tonLongPress,\n\tonLongPressEnd,\n} ) => {\n\tconst { panGestureRef, isDragging, isPanActive, draggingId } = useContext(\n\t\tContext\n\t);\n\n\tconst gestureHandler = useAnimatedGestureHandler( {\n\t\tonActive: () => {\n\t\t\tif ( isDragging.value ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tisDragging.value = true;\n\t\t\tdraggingId.value = id;\n\t\t\tif ( onLongPress ) {\n\t\t\t\trunOnJS( onLongPress )( id );\n\t\t\t}\n\t\t},\n\t\tonEnd: () => {\n\t\t\tif ( ! isPanActive.value ) {\n\t\t\t\tisDragging.value = false;\n\t\t\t}\n\n\t\t\tif ( onLongPressEnd ) {\n\t\t\t\trunOnJS( onLongPressEnd )( id );\n\t\t\t}\n\t\t},\n\t} );\n\n\treturn (\n\t\t<LongPressGestureHandler\n\t\t\tenabled={ enabled }\n\t\t\tminDurationMs={ minDuration }\n\t\t\tmaxDist={ maxDistance }\n\t\t\tsimultaneousHandlers={ panGestureRef }\n\t\t\tshouldCancelWhenOutside={ false }\n\t\t\tonGestureEvent={ gestureHandler }\n\t\t>\n\t\t\t{ children }\n\t\t</LongPressGestureHandler>\n\t);\n};\n\nexport { DraggableTrigger };\nexport default Draggable;\n"]}

package/build/dropdown/index.js

@@ -40,17 +40,15 @@ function useObservableState(initialState, onStateChange) {
 }
 
 function Dropdown(props) {
-  var _popoverProps$anchorR;
-
   const {
     renderContent,
     renderToggle,
-    position = 'bottom right',
     className,
     contentClassName,
     expandOnMobile,
     headerTitle,
     focusOnMount,
+    position,
     popoverProps,
     onClose,
     onToggle
@@ -98,6 +96,7 @@ function Dropdown(props) {
     onToggle: toggle,
     onClose: close
   };
+  const hasAnchorRef = !!(popoverProps !== null && popoverProps !== void 0 && popoverProps.anchorRef) || !!(popoverProps !== null && popoverProps !== void 0 && popoverProps.getAnchorRect) || !!(popoverProps !== null && popoverProps !== void 0 && popoverProps.anchorRect);
   return (0, _element.createElement)("div", {
     className: (0, _classnames.default)('components-dropdown', className),
     ref: containerRef // Some UAs focus the closest focusable parent when the toggle is
@@ -111,9 +110,12 @@ function Dropdown(props) {
     onFocusOutside: closeIfFocusOutside,
     expandOnMobile: expandOnMobile,
     headerTitle: headerTitle,
-    focusOnMount: focusOnMount
+    focusOnMount: focusOnMount // This value is used to ensure that the dropdowns
+    // align with the editor header by default.
+    ,
+    offset: 13,
+    anchorRef: !hasAnchorRef ? containerRef : undefined
   }, popoverProps, {
-    anchorRef: (_popoverProps$anchorR = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.anchorRef) !== null && _popoverProps$anchorR !== void 0 ? _popoverProps$anchorR : containerRef.current,
     className: (0, _classnames.default)('components-dropdown__content', popoverProps ? popoverProps.className : undefined, contentClassName)
   }), renderContent(args)));
 }

package/build/dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/dropdown/index.js"],"names":["useObservableState","initialState","onStateChange","state","setState","value","Dropdown","props","renderContent","renderToggle","position","className","contentClassName","expandOnMobile","headerTitle","focusOnMount","popoverProps","onClose","onToggle","containerRef","isOpen","setIsOpen","toggle","closeIfFocusOutside","ownerDocument","current","dialog","activeElement","closest","contains","close","args","anchorRef","undefined"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Popover from '../popover';\n\nfunction useObservableState( initialState, onStateChange ) {\n\tconst [ state, setState ] = useState( initialState );\n\treturn [\n\t\tstate,\n\t\t( value ) => {\n\t\t\tsetState( value );\n\t\t\tif ( onStateChange ) {\n\t\t\t\tonStateChange( value );\n\t\t\t}\n\t\t},\n\t];\n}\n\nexport default function Dropdown( props ) {\n\tconst {\n\t\trenderContent,\n\t\trenderToggle,\n\t\tposition = 'bottom right',\n\t\tclassName,\n\t\tcontentClassName,\n\t\texpandOnMobile,\n\t\theaderTitle,\n\t\tfocusOnMount,\n\t\tpopoverProps,\n\t\tonClose,\n\t\tonToggle,\n\t} = props;\n\tconst containerRef = useRef();\n\tconst [ isOpen, setIsOpen ] = useObservableState( false, onToggle );\n\n\tuseEffect(\n\t\t() => () => {\n\t\t\tif ( onToggle ) {\n\t\t\t\tonToggle( false );\n\t\t\t}\n\t\t},\n\t\t[]\n\t);\n\n\tfunction toggle() {\n\t\tsetIsOpen( ! isOpen );\n\t}\n\n\t/**\n\t * Closes the popover when focus leaves it unless the toggle was pressed or\n\t * focus has moved to a separate dialog. The former is to let the toggle\n\t * handle closing the popover and the latter is to preserve presence in\n\t * case a dialog has opened, allowing focus to return when it's dismissed.\n\t */\n\tfunction closeIfFocusOutside() {\n\t\tconst { ownerDocument } = containerRef.current;\n\t\tconst dialog = ownerDocument.activeElement.closest( '[role=\"dialog\"]' );\n\t\tif (\n\t\t\t! containerRef.current.contains( ownerDocument.activeElement ) &&\n\t\t\t( ! dialog || dialog.contains( containerRef.current ) )\n\t\t) {\n\t\t\tclose();\n\t\t}\n\t}\n\n\tfunction close() {\n\t\tif ( onClose ) {\n\t\t\tonClose();\n\t\t}\n\t\tsetIsOpen( false );\n\t}\n\n\tconst args = { isOpen, onToggle: toggle, onClose: close };\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames( 'components-dropdown', className ) }\n\t\t\tref={ containerRef }\n\t\t\t// Some UAs focus the closest focusable parent when the toggle is\n\t\t\t// clicked. Making this div focusable ensures such UAs will focus\n\t\t\t// it and `closeIfFocusOutside` can tell if the toggle was clicked.\n\t\t\ttabIndex=\"-1\"\n\t\t>\n\t\t\t{ renderToggle( args ) }\n\t\t\t{ isOpen && (\n\t\t\t\t<Popover\n\t\t\t\t\tposition={ position }\n\t\t\t\t\tonClose={ close }\n\t\t\t\t\tonFocusOutside={ closeIfFocusOutside }\n\t\t\t\t\texpandOnMobile={ expandOnMobile }\n\t\t\t\t\theaderTitle={ headerTitle }\n\t\t\t\t\tfocusOnMount={ focusOnMount }\n\t\t\t\t\t{ ...popoverProps }\n\t\t\t\t\tanchorRef={\n\t\t\t\t\t\tpopoverProps?.anchorRef ?? containerRef.current\n\t\t\t\t\t}\n\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t'components-dropdown__content',\n\t\t\t\t\t\tpopoverProps ? popoverProps.className : undefined,\n\t\t\t\t\t\tcontentClassName\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t{ renderContent( args ) }\n\t\t\t\t</Popover>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/dropdown/index.js"],"names":["useObservableState","initialState","onStateChange","state","setState","value","Dropdown","props","renderContent","renderToggle","className","contentClassName","expandOnMobile","headerTitle","focusOnMount","position","popoverProps","onClose","onToggle","containerRef","isOpen","setIsOpen","toggle","closeIfFocusOutside","ownerDocument","current","dialog","activeElement","closest","contains","close","args","hasAnchorRef","anchorRef","getAnchorRect","anchorRect","undefined"],"mappings":";;;;;;;;;AASA;;;;AALA;;AAUA;;AAdA;;AACA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAGA,SAASA,kBAAT,CAA6BC,YAA7B,EAA2CC,aAA3C,EAA2D;AAC1D,QAAM,CAAEC,KAAF,EAASC,QAAT,IAAsB,uBAAUH,YAAV,CAA5B;AACA,SAAO,CACNE,KADM,EAEJE,KAAF,IAAa;AACZD,IAAAA,QAAQ,CAAEC,KAAF,CAAR;;AACA,QAAKH,aAAL,EAAqB;AACpBA,MAAAA,aAAa,CAAEG,KAAF,CAAb;AACA;AACD,GAPK,CAAP;AASA;;AAEc,SAASC,QAAT,CAAmBC,KAAnB,EAA2B;AACzC,QAAM;AACLC,IAAAA,aADK;AAELC,IAAAA,YAFK;AAGLC,IAAAA,SAHK;AAILC,IAAAA,gBAJK;AAKLC,IAAAA,cALK;AAMLC,IAAAA,WANK;AAOLC,IAAAA,YAPK;AAQLC,IAAAA,QARK;AASLC,IAAAA,YATK;AAULC,IAAAA,OAVK;AAWLC,IAAAA;AAXK,MAYFX,KAZJ;AAaA,QAAMY,YAAY,GAAG,sBAArB;AACA,QAAM,CAAEC,MAAF,EAAUC,SAAV,IAAwBrB,kBAAkB,CAAE,KAAF,EAASkB,QAAT,CAAhD;AAEA,0BACC,MAAM,MAAM;AACX,QAAKA,QAAL,EAAgB;AACfA,MAAAA,QAAQ,CAAE,KAAF,CAAR;AACA;AACD,GALF,EAMC,EAND;;AASA,WAASI,MAAT,GAAkB;AACjBD,IAAAA,SAAS,CAAE,CAAED,MAAJ,CAAT;AACA;AAED;AACD;AACA;AACA;AACA;AACA;;;AACC,WAASG,mBAAT,GAA+B;AAC9B,UAAM;AAAEC,MAAAA;AAAF,QAAoBL,YAAY,CAACM,OAAvC;AACA,UAAMC,MAAM,GAAGF,aAAa,CAACG,aAAd,CAA4BC,OAA5B,CAAqC,iBAArC,CAAf;;AACA,QACC,CAAET,YAAY,CAACM,OAAb,CAAqBI,QAArB,CAA+BL,aAAa,CAACG,aAA7C,CAAF,KACE,CAAED,MAAF,IAAYA,MAAM,CAACG,QAAP,CAAiBV,YAAY,CAACM,OAA9B,CADd,CADD,EAGE;AACDK,MAAAA,KAAK;AACL;AACD;;AAED,WAASA,KAAT,GAAiB;AAChB,QAAKb,OAAL,EAAe;AACdA,MAAAA,OAAO;AACP;;AACDI,IAAAA,SAAS,CAAE,KAAF,CAAT;AACA;;AAED,QAAMU,IAAI,GAAG;AAAEX,IAAAA,MAAF;AAAUF,IAAAA,QAAQ,EAAEI,MAApB;AAA4BL,IAAAA,OAAO,EAAEa;AAArC,GAAb;AACA,QAAME,YAAY,GACjB,CAAC,EAAEhB,YAAF,aAAEA,YAAF,eAAEA,YAAY,CAAEiB,SAAhB,CAAD,IACA,CAAC,EAAEjB,YAAF,aAAEA,YAAF,eAAEA,YAAY,CAAEkB,aAAhB,CADD,IAEA,CAAC,EAAElB,YAAF,aAAEA,YAAF,eAAEA,YAAY,CAAEmB,UAAhB,CAHF;AAKA,SACC;AACC,IAAA,SAAS,EAAG,yBAAY,qBAAZ,EAAmCzB,SAAnC,CADb;AAEC,IAAA,GAAG,EAAGS,YAFP,CAGC;AACA;AACA;AALD;AAMC,IAAA,QAAQ,EAAC;AANV,KAQGV,YAAY,CAAEsB,IAAF,CARf,EASGX,MAAM,IACP,4BAAC,gBAAD;AACC,IAAA,QAAQ,EAAGL,QADZ;AAEC,IAAA,OAAO,EAAGe,KAFX;AAGC,IAAA,cAAc,EAAGP,mBAHlB;AAIC,IAAA,cAAc,EAAGX,cAJlB;AAKC,IAAA,WAAW,EAAGC,WALf;AAMC,IAAA,YAAY,EAAGC,YANhB,CAOC;AACA;AARD;AASC,IAAA,MAAM,EAAG,EATV;AAUC,IAAA,SAAS,EAAG,CAAEkB,YAAF,GAAiBb,YAAjB,GAAgCiB;AAV7C,KAWMpB,YAXN;AAYC,IAAA,SAAS,EAAG,yBACX,8BADW,EAEXA,YAAY,GAAGA,YAAY,CAACN,SAAhB,GAA4B0B,SAF7B,EAGXzB,gBAHW;AAZb,MAkBGH,aAAa,CAAEuB,IAAF,CAlBhB,CAVF,CADD;AAkCA","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Popover from '../popover';\n\nfunction useObservableState( initialState, onStateChange ) {\n\tconst [ state, setState ] = useState( initialState );\n\treturn [\n\t\tstate,\n\t\t( value ) => {\n\t\t\tsetState( value );\n\t\t\tif ( onStateChange ) {\n\t\t\t\tonStateChange( value );\n\t\t\t}\n\t\t},\n\t];\n}\n\nexport default function Dropdown( props ) {\n\tconst {\n\t\trenderContent,\n\t\trenderToggle,\n\t\tclassName,\n\t\tcontentClassName,\n\t\texpandOnMobile,\n\t\theaderTitle,\n\t\tfocusOnMount,\n\t\tposition,\n\t\tpopoverProps,\n\t\tonClose,\n\t\tonToggle,\n\t} = props;\n\tconst containerRef = useRef();\n\tconst [ isOpen, setIsOpen ] = useObservableState( false, onToggle );\n\n\tuseEffect(\n\t\t() => () => {\n\t\t\tif ( onToggle ) {\n\t\t\t\tonToggle( false );\n\t\t\t}\n\t\t},\n\t\t[]\n\t);\n\n\tfunction toggle() {\n\t\tsetIsOpen( ! isOpen );\n\t}\n\n\t/**\n\t * Closes the popover when focus leaves it unless the toggle was pressed or\n\t * focus has moved to a separate dialog. The former is to let the toggle\n\t * handle closing the popover and the latter is to preserve presence in\n\t * case a dialog has opened, allowing focus to return when it's dismissed.\n\t */\n\tfunction closeIfFocusOutside() {\n\t\tconst { ownerDocument } = containerRef.current;\n\t\tconst dialog = ownerDocument.activeElement.closest( '[role=\"dialog\"]' );\n\t\tif (\n\t\t\t! containerRef.current.contains( ownerDocument.activeElement ) &&\n\t\t\t( ! dialog || dialog.contains( containerRef.current ) )\n\t\t) {\n\t\t\tclose();\n\t\t}\n\t}\n\n\tfunction close() {\n\t\tif ( onClose ) {\n\t\t\tonClose();\n\t\t}\n\t\tsetIsOpen( false );\n\t}\n\n\tconst args = { isOpen, onToggle: toggle, onClose: close };\n\tconst hasAnchorRef =\n\t\t!! popoverProps?.anchorRef ||\n\t\t!! popoverProps?.getAnchorRect ||\n\t\t!! popoverProps?.anchorRect;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames( 'components-dropdown', className ) }\n\t\t\tref={ containerRef }\n\t\t\t// Some UAs focus the closest focusable parent when the toggle is\n\t\t\t// clicked. Making this div focusable ensures such UAs will focus\n\t\t\t// it and `closeIfFocusOutside` can tell if the toggle was clicked.\n\t\t\ttabIndex=\"-1\"\n\t\t>\n\t\t\t{ renderToggle( args ) }\n\t\t\t{ isOpen && (\n\t\t\t\t<Popover\n\t\t\t\t\tposition={ position }\n\t\t\t\t\tonClose={ close }\n\t\t\t\t\tonFocusOutside={ closeIfFocusOutside }\n\t\t\t\t\texpandOnMobile={ expandOnMobile }\n\t\t\t\t\theaderTitle={ headerTitle }\n\t\t\t\t\tfocusOnMount={ focusOnMount }\n\t\t\t\t\t// This value is used to ensure that the dropdowns\n\t\t\t\t\t// align with the editor header by default.\n\t\t\t\t\toffset={ 13 }\n\t\t\t\t\tanchorRef={ ! hasAnchorRef ? containerRef : undefined }\n\t\t\t\t\t{ ...popoverProps }\n\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t'components-dropdown__content',\n\t\t\t\t\t\tpopoverProps ? popoverProps.className : undefined,\n\t\t\t\t\t\tcontentClassName\n\t\t\t\t\t) }\n\t\t\t\t>\n\t\t\t\t\t{ renderContent( args ) }\n\t\t\t\t</Popover>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"]}