@wordpress/components 25.8.6 → 25.9.1

package/build/mobile/link-settings/link-settings-screen.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_native","_","_interopRequireDefault","LinkSettingsScreen","props","navigation","useNavigation","route","useRoute","url","inputValue","params","onLinkCellPressed","navigate","useMemo","createElement","default","hasPicker","undefined","urlValue","_default","exports"],"sources":["@wordpress/components/src/mobile/link-settings/link-settings-screen.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { useNavigation, useRoute } from '@react-navigation/native';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport LinkSettings from './';\n\nconst LinkSettingsScreen = ( props ) => {\n\tconst navigation = useNavigation();\n\tconst route = useRoute();\n\tconst { url = '' } = props;\n\tconst { inputValue = url } = route.params || {};\n\n\tconst onLinkCellPressed = () => {\n\t\tif ( props.onLinkCellPressed ) {\n\t\t\tprops.onLinkCellPressed( { navigation } );\n\t\t} else {\n\t\t\tnavigation.navigate( 'linkPicker', { inputValue } );\n\t\t}\n\t};\n\n\treturn useMemo( () => {\n\t\treturn (\n\t\t\t<LinkSettings\n\t\t\t\t{ ...props }\n\t\t\t\tonLinkCellPressed={\n\t\t\t\t\tprops.hasPicker ? onLinkCellPressed : undefined\n\t\t\t\t}\n\t\t\t\turlValue={ inputValue }\n\t\t\t/>\n\t\t);\n\t\t// Disable reason: deferring this refactor to the native team.\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ props, inputValue, navigation, route ] );\n};\n\nexport default LinkSettingsScreen;\n"],"mappings":";;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AALA,IAAAC,OAAA,GAAAD,OAAA;AAUA,IAAAE,CAAA,GAAAC,sBAAA,CAAAH,OAAA;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA,MAAMI,kBAAkB,GAAKC,KAAK,IAAM;EACvC,MAAMC,UAAU,GAAG,IAAAC,qBAAa,EAAC,CAAC;EAClC,MAAMC,KAAK,GAAG,IAAAC,gBAAQ,EAAC,CAAC;EACxB,MAAM;IAAEC,GAAG,GAAG;EAAG,CAAC,GAAGL,KAAK;EAC1B,MAAM;IAAEM,UAAU,GAAGD;EAAI,CAAC,GAAGF,KAAK,CAACI,MAAM,IAAI,CAAC,CAAC;EAE/C,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;IAC/B,IAAKR,KAAK,CAACQ,iBAAiB,EAAG;MAC9BR,KAAK,CAACQ,iBAAiB,CAAE;QAAEP;MAAW,CAAE,CAAC;IAC1C,CAAC,MAAM;MACNA,UAAU,CAACQ,QAAQ,CAAE,YAAY,EAAE;QAAEH;MAAW,CAAE,CAAC;IACpD;EACD,CAAC;EAED,OAAO,IAAAI,gBAAO,EAAE,MAAM;IACrB,OACC,IAAAhB,QAAA,CAAAiB,aAAA,EAACd,CAAA,CAAAe,OAAY;MAAA,GACPZ,KAAK;MACVQ,iBAAiB,EAChBR,KAAK,CAACa,SAAS,GAAGL,iBAAiB,GAAGM,SACtC;MACDC,QAAQ,EAAGT;IAAY,CACvB,CAAC;IAEH;IACA;IACA;EACD,CAAC,EAAE,CAAEN,KAAK,EAAEM,UAAU,EAAEL,UAAU,EAAEE,KAAK,CAAG,CAAC;AAC9C,CAAC;AAAC,IAAAa,QAAA,GAEajB,kBAAkB;AAAAkB,OAAA,CAAAL,OAAA,GAAAI,QAAA"}
+{"version":3,"names":["_native","require","_element","_","_interopRequireDefault","LinkSettingsScreen","props","navigation","useNavigation","route","useRoute","url","inputValue","params","onLinkCellPressed","navigate","useMemo","_react","createElement","default","hasPicker","undefined","urlValue","_default","exports"],"sources":["@wordpress/components/src/mobile/link-settings/link-settings-screen.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { useNavigation, useRoute } from '@react-navigation/native';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport LinkSettings from './';\n\nconst LinkSettingsScreen = ( props ) => {\n\tconst navigation = useNavigation();\n\tconst route = useRoute();\n\tconst { url = '' } = props;\n\tconst { inputValue = url } = route.params || {};\n\n\tconst onLinkCellPressed = () => {\n\t\tif ( props.onLinkCellPressed ) {\n\t\t\tprops.onLinkCellPressed( { navigation } );\n\t\t} else {\n\t\t\tnavigation.navigate( 'linkPicker', { inputValue } );\n\t\t}\n\t};\n\n\treturn useMemo( () => {\n\t\treturn (\n\t\t\t<LinkSettings\n\t\t\t\t{ ...props }\n\t\t\t\tonLinkCellPressed={\n\t\t\t\t\tprops.hasPicker ? onLinkCellPressed : undefined\n\t\t\t\t}\n\t\t\t\turlValue={ inputValue }\n\t\t\t/>\n\t\t);\n\t\t// Disable reason: deferring this refactor to the native team.\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ props, inputValue, navigation, route ] );\n};\n\nexport default LinkSettingsScreen;\n"],"mappings":";;;;;;;;AAGA,IAAAA,OAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,CAAA,GAAAC,sBAAA,CAAAH,OAAA;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA,MAAMI,kBAAkB,GAAKC,KAAK,IAAM;EACvC,MAAMC,UAAU,GAAG,IAAAC,qBAAa,EAAC,CAAC;EAClC,MAAMC,KAAK,GAAG,IAAAC,gBAAQ,EAAC,CAAC;EACxB,MAAM;IAAEC,GAAG,GAAG;EAAG,CAAC,GAAGL,KAAK;EAC1B,MAAM;IAAEM,UAAU,GAAGD;EAAI,CAAC,GAAGF,KAAK,CAACI,MAAM,IAAI,CAAC,CAAC;EAE/C,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;IAC/B,IAAKR,KAAK,CAACQ,iBAAiB,EAAG;MAC9BR,KAAK,CAACQ,iBAAiB,CAAE;QAAEP;MAAW,CAAE,CAAC;IAC1C,CAAC,MAAM;MACNA,UAAU,CAACQ,QAAQ,CAAE,YAAY,EAAE;QAAEH;MAAW,CAAE,CAAC;IACpD;EACD,CAAC;EAED,OAAO,IAAAI,gBAAO,EAAE,MAAM;IACrB,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACf,CAAA,CAAAgB,OAAY;MAAA,GACPb,KAAK;MACVQ,iBAAiB,EAChBR,KAAK,CAACc,SAAS,GAAGN,iBAAiB,GAAGO,SACtC;MACDC,QAAQ,EAAGV;IAAY,CACvB,CAAC;IAEH;IACA;IACA;EACD,CAAC,EAAE,CAAEN,KAAK,EAAEM,UAAU,EAAEL,UAAU,EAAEE,KAAK,CAAG,CAAC;AAC9C,CAAC;AAAC,IAAAc,QAAA,GAEalB,kBAAkB;AAAAmB,OAAA,CAAAL,OAAA,GAAAI,QAAA"}

package/build/mobile/media-edit/index.native.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.MediaEdit = exports.MEDIA_TYPE_IMAGE = exports.MEDIA_EDITOR = void 0;
+var _react = require("react");
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _components = require("@wordpress/components");
@@ -82,7 +83,7 @@ class MediaEdit extends _element.Component {
     }
   }
   render() {
-    const mediaOptions = () => (0, _element.createElement)(_components.Picker, {
+    const mediaOptions = () => (0, _react.createElement)(_components.Picker, {
       hideCancelButton: true,
       ref: instance => this.picker = instance,
       options: this.getMediaOptionsItems(),

package/build/mobile/media-edit/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_i18n","_components","_reactNativeBridge","MEDIA_TYPE_IMAGE","exports","MEDIA_EDITOR","editOption","id","value","label","__","requiresModal","types","replaceOption","mediaSources","deviceLibrary","MediaEdit","Component","constructor","props","onPickerPresent","bind","onPickerSelect","getMediaOptionsItems","getDestructiveButtonIndex","pickerOptions","openReplaceMediaOptions","source","uri","filter","Boolean","options","destructiveButtonIndex","findIndex","option","destructiveButton","undefined","picker","presentPicker","onSelect","multiple","requestMediaEditor","media","optionSelected","find","onPress","render","mediaOptions","createElement","Picker","hideCancelButton","ref","instance","leftAlign","onChange","title","open","_default","default"],"sources":["@wordpress/components/src/mobile/media-edit/index.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { Picker } from '@wordpress/components';\nimport {\n\trequestMediaEditor,\n\tmediaSources,\n} from '@wordpress/react-native-bridge';\n\nexport const MEDIA_TYPE_IMAGE = 'image';\n\nexport const MEDIA_EDITOR = 'MEDIA_EDITOR';\n\nconst editOption = {\n\tid: MEDIA_EDITOR,\n\tvalue: MEDIA_EDITOR,\n\tlabel: __( 'Edit' ),\n\trequiresModal: true,\n\ttypes: [ MEDIA_TYPE_IMAGE ],\n};\n\nconst replaceOption = {\n\tid: mediaSources.deviceLibrary,\n\tvalue: mediaSources.deviceLibrary,\n\tlabel: __( 'Replace' ),\n\ttypes: [ MEDIA_TYPE_IMAGE ],\n};\n\nexport class MediaEdit extends Component {\n\tconstructor( props ) {\n\t\tsuper( props );\n\t\tthis.onPickerPresent = this.onPickerPresent.bind( this );\n\t\tthis.onPickerSelect = this.onPickerSelect.bind( this );\n\t\tthis.getMediaOptionsItems = this.getMediaOptionsItems.bind( this );\n\t\tthis.getDestructiveButtonIndex =\n\t\t\tthis.getDestructiveButtonIndex.bind( this );\n\t}\n\n\tgetMediaOptionsItems() {\n\t\tconst { pickerOptions, openReplaceMediaOptions, source } = this.props;\n\n\t\treturn [\n\t\t\tsource?.uri && editOption,\n\t\t\topenReplaceMediaOptions && replaceOption,\n\t\t\t...( pickerOptions ? pickerOptions : [] ),\n\t\t].filter( Boolean );\n\t}\n\n\tgetDestructiveButtonIndex() {\n\t\tconst options = this.getMediaOptionsItems();\n\t\tconst destructiveButtonIndex = options.findIndex(\n\t\t\t( option ) => option?.destructiveButton\n\t\t);\n\n\t\treturn destructiveButtonIndex !== -1\n\t\t\t? destructiveButtonIndex + 1\n\t\t\t: undefined;\n\t}\n\n\tonPickerPresent() {\n\t\tif ( this.picker ) {\n\t\t\tthis.picker.presentPicker();\n\t\t}\n\t}\n\n\tonPickerSelect( value ) {\n\t\tconst {\n\t\t\tonSelect,\n\t\t\tpickerOptions,\n\t\t\tmultiple = false,\n\t\t\topenReplaceMediaOptions,\n\t\t} = this.props;\n\n\t\tswitch ( value ) {\n\t\t\tcase MEDIA_EDITOR:\n\t\t\t\trequestMediaEditor( this.props.source.uri, ( media ) => {\n\t\t\t\t\tif ( ( multiple && media ) || ( media && media.id ) ) {\n\t\t\t\t\t\tonSelect( media );\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tconst optionSelected =\n\t\t\t\t\tpickerOptions &&\n\t\t\t\t\tpickerOptions.find( ( option ) => option.id === value );\n\n\t\t\t\tif ( optionSelected && optionSelected.onPress ) {\n\t\t\t\t\toptionSelected.onPress();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif ( openReplaceMediaOptions ) {\n\t\t\t\t\topenReplaceMediaOptions();\n\t\t\t\t}\n\t\t}\n\t}\n\n\trender() {\n\t\tconst mediaOptions = () => (\n\t\t\t<Picker\n\t\t\t\thideCancelButton\n\t\t\t\tref={ ( instance ) => ( this.picker = instance ) }\n\t\t\t\toptions={ this.getMediaOptionsItems() }\n\t\t\t\tleftAlign={ true }\n\t\t\t\tonChange={ this.onPickerSelect }\n\t\t\t\t// translators: %s: block title e.g: \"Paragraph\".\n\t\t\t\ttitle={ __( 'Media options' ) }\n\t\t\t\tdestructiveButtonIndex={ this.getDestructiveButtonIndex() }\n\t\t\t/>\n\t\t);\n\n\t\treturn this.props.render( {\n\t\t\topen: this.onPickerPresent,\n\t\t\tmediaOptions,\n\t\t} );\n\t}\n}\n\nexport default MediaEdit;\n"],"mappings":"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"}
+{"version":3,"names":["_element","require","_i18n","_components","_reactNativeBridge","MEDIA_TYPE_IMAGE","exports","MEDIA_EDITOR","editOption","id","value","label","__","requiresModal","types","replaceOption","mediaSources","deviceLibrary","MediaEdit","Component","constructor","props","onPickerPresent","bind","onPickerSelect","getMediaOptionsItems","getDestructiveButtonIndex","pickerOptions","openReplaceMediaOptions","source","uri","filter","Boolean","options","destructiveButtonIndex","findIndex","option","destructiveButton","undefined","picker","presentPicker","onSelect","multiple","requestMediaEditor","media","optionSelected","find","onPress","render","mediaOptions","_react","createElement","Picker","hideCancelButton","ref","instance","leftAlign","onChange","title","open","_default","default"],"sources":["@wordpress/components/src/mobile/media-edit/index.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { Picker } from '@wordpress/components';\nimport {\n\trequestMediaEditor,\n\tmediaSources,\n} from '@wordpress/react-native-bridge';\n\nexport const MEDIA_TYPE_IMAGE = 'image';\n\nexport const MEDIA_EDITOR = 'MEDIA_EDITOR';\n\nconst editOption = {\n\tid: MEDIA_EDITOR,\n\tvalue: MEDIA_EDITOR,\n\tlabel: __( 'Edit' ),\n\trequiresModal: true,\n\ttypes: [ MEDIA_TYPE_IMAGE ],\n};\n\nconst replaceOption = {\n\tid: mediaSources.deviceLibrary,\n\tvalue: mediaSources.deviceLibrary,\n\tlabel: __( 'Replace' ),\n\ttypes: [ MEDIA_TYPE_IMAGE ],\n};\n\nexport class MediaEdit extends Component {\n\tconstructor( props ) {\n\t\tsuper( props );\n\t\tthis.onPickerPresent = this.onPickerPresent.bind( this );\n\t\tthis.onPickerSelect = this.onPickerSelect.bind( this );\n\t\tthis.getMediaOptionsItems = this.getMediaOptionsItems.bind( this );\n\t\tthis.getDestructiveButtonIndex =\n\t\t\tthis.getDestructiveButtonIndex.bind( this );\n\t}\n\n\tgetMediaOptionsItems() {\n\t\tconst { pickerOptions, openReplaceMediaOptions, source } = this.props;\n\n\t\treturn [\n\t\t\tsource?.uri && editOption,\n\t\t\topenReplaceMediaOptions && replaceOption,\n\t\t\t...( pickerOptions ? pickerOptions : [] ),\n\t\t].filter( Boolean );\n\t}\n\n\tgetDestructiveButtonIndex() {\n\t\tconst options = this.getMediaOptionsItems();\n\t\tconst destructiveButtonIndex = options.findIndex(\n\t\t\t( option ) => option?.destructiveButton\n\t\t);\n\n\t\treturn destructiveButtonIndex !== -1\n\t\t\t? destructiveButtonIndex + 1\n\t\t\t: undefined;\n\t}\n\n\tonPickerPresent() {\n\t\tif ( this.picker ) {\n\t\t\tthis.picker.presentPicker();\n\t\t}\n\t}\n\n\tonPickerSelect( value ) {\n\t\tconst {\n\t\t\tonSelect,\n\t\t\tpickerOptions,\n\t\t\tmultiple = false,\n\t\t\topenReplaceMediaOptions,\n\t\t} = this.props;\n\n\t\tswitch ( value ) {\n\t\t\tcase MEDIA_EDITOR:\n\t\t\t\trequestMediaEditor( this.props.source.uri, ( media ) => {\n\t\t\t\t\tif ( ( multiple && media ) || ( media && media.id ) ) {\n\t\t\t\t\t\tonSelect( media );\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tconst optionSelected =\n\t\t\t\t\tpickerOptions &&\n\t\t\t\t\tpickerOptions.find( ( option ) => option.id === value );\n\n\t\t\t\tif ( optionSelected && optionSelected.onPress ) {\n\t\t\t\t\toptionSelected.onPress();\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif ( openReplaceMediaOptions ) {\n\t\t\t\t\topenReplaceMediaOptions();\n\t\t\t\t}\n\t\t}\n\t}\n\n\trender() {\n\t\tconst mediaOptions = () => (\n\t\t\t<Picker\n\t\t\t\thideCancelButton\n\t\t\t\tref={ ( instance ) => ( this.picker = instance ) }\n\t\t\t\toptions={ this.getMediaOptionsItems() }\n\t\t\t\tleftAlign={ true }\n\t\t\t\tonChange={ this.onPickerSelect }\n\t\t\t\t// translators: %s: block title e.g: \"Paragraph\".\n\t\t\t\ttitle={ __( 'Media options' ) }\n\t\t\t\tdestructiveButtonIndex={ this.getDestructiveButtonIndex() }\n\t\t\t/>\n\t\t);\n\n\t\treturn this.props.render( {\n\t\t\topen: this.onPickerPresent,\n\t\t\tmediaOptions,\n\t\t} );\n\t}\n}\n\nexport default MediaEdit;\n"],"mappings":"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"}

package/build/mobile/picker/index.android.js

@@ -5,9 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _reactNative = require("react-native");
 var _i18n = require("@wordpress/i18n");
+var _element = require("@wordpress/element");
 var _compose = require("@wordpress/compose");
 var _components = require("@wordpress/components");
 var _bottomSheet = _interopRequireDefault(require("../bottom-sheet"));
@@ -26,7 +27,7 @@ var _styles = _interopRequireDefault(require("./styles.scss"));
 
 function Separator() {
   const separatorStyle = (0, _compose.usePreferredColorSchemeStyle)(_styles.default['components-picker__separator'], _styles.default['components-picker__separator--dark']);
-  return (0, _element.createElement)(_reactNative.View, {
+  return (0, _react.createElement)(_reactNative.View, {
     style: separatorStyle
   });
 }
@@ -61,9 +62,9 @@ class Picker extends _element.Component {
       options,
       leftAlign
     } = this.props;
-    return options.map(option => (0, _element.createElement)(_element.Fragment, {
+    return options.map(option => (0, _react.createElement)(_element.Fragment, {
       key: `${option.label}-${option.value}`
-    }, options.length > 1 && option.separated && (0, _element.createElement)(Separator, null), (0, _element.createElement)(_bottomSheet.default.Cell, {
+    }, options.length > 1 && option.separated && (0, _react.createElement)(Separator, null), (0, _react.createElement)(_bottomSheet.default.Cell, {
       icon: option.icon,
       leftAlign: leftAlign,
       label: option.label,
@@ -82,15 +83,15 @@ class Picker extends _element.Component {
     const {
       isVisible
     } = this.state;
-    return (0, _element.createElement)(_bottomSheet.default, {
+    return (0, _react.createElement)(_bottomSheet.default, {
       isVisible: isVisible,
       onClose: this.onClose,
       hideHeader: true,
       testID: testID
-    }, (0, _element.createElement)(_components.PanelBody, {
+    }, (0, _react.createElement)(_components.PanelBody, {
       title: title,
       style: _styles.default['components-picker__panel']
-    }, this.getOptions(), !hideCancelButton && (0, _element.createElement)(_components.TextControl, {
+    }, this.getOptions(), !hideCancelButton && (0, _react.createElement)(_components.TextControl, {
       label: (0, _i18n.__)('Cancel'),
       onPress: this.onClose,
       separatorType: 'none'

package/build/mobile/picker/index.android.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_reactNative","_i18n","_compose","_components","_bottomSheet","_interopRequireDefault","_styles","Separator","separatorStyle","usePreferredColorSchemeStyle","styles","createElement","View","style","Picker","Component","constructor","arguments","onClose","bind","onCellPress","state","isVisible","presentPicker","setState","value","onChange","props","getOptions","options","leftAlign","map","option","Fragment","key","label","length","separated","default","Cell","icon","separatorType","onPress","disabled","render","hideCancelButton","title","testID","hideHeader","PanelBody","TextControl","__","exports"],"sources":["@wordpress/components/src/mobile/picker/index.android.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Component, Fragment } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { PanelBody, TextControl } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport BottomSheet from '../bottom-sheet';\nimport styles from './styles.scss';\n\nfunction Separator() {\n\tconst separatorStyle = usePreferredColorSchemeStyle(\n\t\tstyles[ 'components-picker__separator' ],\n\t\tstyles[ 'components-picker__separator--dark' ]\n\t);\n\n\treturn <View style={ separatorStyle } />;\n}\n\nexport default class Picker extends Component {\n\tconstructor() {\n\t\tsuper( ...arguments );\n\t\tthis.onClose = this.onClose.bind( this );\n\t\tthis.onCellPress = this.onCellPress.bind( this );\n\n\t\tthis.state = {\n\t\t\tisVisible: false,\n\t\t};\n\t}\n\n\tpresentPicker() {\n\t\tthis.setState( { isVisible: true } );\n\t}\n\n\tonClose() {\n\t\tthis.setState( { isVisible: false } );\n\t}\n\n\tonCellPress( value ) {\n\t\tconst { onChange } = this.props;\n\t\tonChange( value );\n\t\tthis.onClose();\n\t}\n\n\tgetOptions() {\n\t\tconst { options, leftAlign } = this.props;\n\n\t\treturn options.map( ( option ) => (\n\t\t\t<Fragment key={ `${ option.label }-${ option.value }` }>\n\t\t\t\t{ options.length > 1 && option.separated && <Separator /> }\n\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\ticon={ option.icon }\n\t\t\t\t\tleftAlign={ leftAlign }\n\t\t\t\t\tlabel={ option.label }\n\t\t\t\t\tseparatorType={ 'none' }\n\t\t\t\t\tonPress={ () => this.onCellPress( option.value ) }\n\t\t\t\t\tdisabled={ option.disabled }\n\t\t\t\t\tstyle={\n\t\t\t\t\t\toption.disabled &&\n\t\t\t\t\t\tstyles[ 'components-picker__button--disabled' ]\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</Fragment>\n\t\t) );\n\t}\n\n\trender() {\n\t\tconst { hideCancelButton, title, testID } = this.props;\n\t\tconst { isVisible } = this.state;\n\n\t\treturn (\n\t\t\t<BottomSheet\n\t\t\t\tisVisible={ isVisible }\n\t\t\t\tonClose={ this.onClose }\n\t\t\t\thideHeader\n\t\t\t\ttestID={ testID }\n\t\t\t>\n\t\t\t\t<PanelBody\n\t\t\t\t\ttitle={ title }\n\t\t\t\t\tstyle={ styles[ 'components-picker__panel' ] }\n\t\t\t\t>\n\t\t\t\t\t{ this.getOptions() }\n\t\t\t\t\t{ ! hideCancelButton && (\n\t\t\t\t\t\t<TextControl\n\t\t\t\t\t\t\tlabel={ __( 'Cancel' ) }\n\t\t\t\t\t\t\tonPress={ this.onClose }\n\t\t\t\t\t\t\tseparatorType={ 'none' }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</PanelBody>\n\t\t\t</BottomSheet>\n\t\t);\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"names":["_reactNative","require","_i18n","_element","_compose","_components","_bottomSheet","_interopRequireDefault","_styles","Separator","separatorStyle","usePreferredColorSchemeStyle","styles","_react","createElement","View","style","Picker","Component","constructor","arguments","onClose","bind","onCellPress","state","isVisible","presentPicker","setState","value","onChange","props","getOptions","options","leftAlign","map","option","Fragment","key","label","length","separated","default","Cell","icon","separatorType","onPress","disabled","render","hideCancelButton","title","testID","hideHeader","PanelBody","TextControl","__","exports"],"sources":["@wordpress/components/src/mobile/picker/index.android.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Component, Fragment } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { PanelBody, TextControl } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport BottomSheet from '../bottom-sheet';\nimport styles from './styles.scss';\n\nfunction Separator() {\n\tconst separatorStyle = usePreferredColorSchemeStyle(\n\t\tstyles[ 'components-picker__separator' ],\n\t\tstyles[ 'components-picker__separator--dark' ]\n\t);\n\n\treturn <View style={ separatorStyle } />;\n}\n\nexport default class Picker extends Component {\n\tconstructor() {\n\t\tsuper( ...arguments );\n\t\tthis.onClose = this.onClose.bind( this );\n\t\tthis.onCellPress = this.onCellPress.bind( this );\n\n\t\tthis.state = {\n\t\t\tisVisible: false,\n\t\t};\n\t}\n\n\tpresentPicker() {\n\t\tthis.setState( { isVisible: true } );\n\t}\n\n\tonClose() {\n\t\tthis.setState( { isVisible: false } );\n\t}\n\n\tonCellPress( value ) {\n\t\tconst { onChange } = this.props;\n\t\tonChange( value );\n\t\tthis.onClose();\n\t}\n\n\tgetOptions() {\n\t\tconst { options, leftAlign } = this.props;\n\n\t\treturn options.map( ( option ) => (\n\t\t\t<Fragment key={ `${ option.label }-${ option.value }` }>\n\t\t\t\t{ options.length > 1 && option.separated && <Separator /> }\n\t\t\t\t<BottomSheet.Cell\n\t\t\t\t\ticon={ option.icon }\n\t\t\t\t\tleftAlign={ leftAlign }\n\t\t\t\t\tlabel={ option.label }\n\t\t\t\t\tseparatorType={ 'none' }\n\t\t\t\t\tonPress={ () => this.onCellPress( option.value ) }\n\t\t\t\t\tdisabled={ option.disabled }\n\t\t\t\t\tstyle={\n\t\t\t\t\t\toption.disabled &&\n\t\t\t\t\t\tstyles[ 'components-picker__button--disabled' ]\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</Fragment>\n\t\t) );\n\t}\n\n\trender() {\n\t\tconst { hideCancelButton, title, testID } = this.props;\n\t\tconst { isVisible } = this.state;\n\n\t\treturn (\n\t\t\t<BottomSheet\n\t\t\t\tisVisible={ isVisible }\n\t\t\t\tonClose={ this.onClose }\n\t\t\t\thideHeader\n\t\t\t\ttestID={ testID }\n\t\t\t>\n\t\t\t\t<PanelBody\n\t\t\t\t\ttitle={ title }\n\t\t\t\t\tstyle={ styles[ 'components-picker__panel' ] }\n\t\t\t\t>\n\t\t\t\t\t{ this.getOptions() }\n\t\t\t\t\t{ ! hideCancelButton && (\n\t\t\t\t\t\t<TextControl\n\t\t\t\t\t\t\tlabel={ __( 'Cancel' ) }\n\t\t\t\t\t\t\tonPress={ this.onClose }\n\t\t\t\t\t\t\tseparatorType={ 'none' }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</PanelBody>\n\t\t\t</BottomSheet>\n\t\t);\n\t}\n}\n"],"mappings":"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"}

package/build/mobile/picker/index.ios.js

@@ -5,9 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _reactNative = require("react-native");
 var _i18n = require("@wordpress/i18n");
+var _element = require("@wordpress/element");
 var _data = require("@wordpress/data");
 var _components = require("@wordpress/components");
 var _compose = require("@wordpress/compose");
@@ -79,7 +80,7 @@ const PickerComponent = (0, _element.forwardRef)((props, ref) => {
     onHandleClosingBottomSheet
   } = (0, _element.useContext)(_components.BottomSheetContext);
   const colorScheme = (0, _compose.usePreferredColorScheme)();
-  return (0, _element.createElement)(Picker, {
+  return (0, _react.createElement)(Picker, {
     ref: ref,
     ...props,
     isBottomSheetOpened: isBottomSheetOpened,

package/build/mobile/picker/index.ios.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_reactNative","_i18n","_data","_components","_compose","_styles","_interopRequireDefault","Picker","Component","presentPicker","options","onChange","title","destructiveButtonIndex","disabledButtonIndices","getAnchor","isBottomSheetOpened","closeBottomSheet","onHandleClosingBottomSheet","colorScheme","props","labels","map","label","fullOptions","__","concat","buttonTitleColor","styles","color","ActionSheetIOS","showActionSheetWithOptions","cancelButtonIndex","anchor","tintColor","buttonIndex","selected","requiresModal","value","render","PickerComponent","forwardRef","ref","useSelect","select","isEditorSidebarOpened","closeGeneralSidebar","useDispatch","useContext","BottomSheetContext","usePreferredColorScheme","createElement","_default","exports","default"],"sources":["@wordpress/components/src/mobile/picker/index.ios.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { ActionSheetIOS } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Component, forwardRef, useContext } from '@wordpress/element';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { BottomSheetContext } from '@wordpress/components';\nimport { usePreferredColorScheme } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './styles.scss';\n\nclass Picker extends Component {\n\tpresentPicker() {\n\t\tconst {\n\t\t\toptions,\n\t\t\tonChange,\n\t\t\ttitle,\n\t\t\tdestructiveButtonIndex,\n\t\t\tdisabledButtonIndices,\n\t\t\tgetAnchor,\n\t\t\tisBottomSheetOpened,\n\t\t\tcloseBottomSheet,\n\t\t\tonHandleClosingBottomSheet,\n\t\t\tcolorScheme,\n\t\t} = this.props;\n\t\tconst labels = options.map( ( { label } ) => label );\n\t\tconst fullOptions = [ __( 'Cancel' ) ].concat( labels );\n\n\t\tconst buttonTitleColor =\n\t\t\tcolorScheme === 'light'\n\t\t\t\t? styles[ 'components-picker__button-title' ].color\n\t\t\t\t: styles[ 'components-picker__button-title--dark' ].color;\n\n\t\tActionSheetIOS.showActionSheetWithOptions(\n\t\t\t{\n\t\t\t\ttitle,\n\t\t\t\toptions: fullOptions,\n\t\t\t\tcancelButtonIndex: 0,\n\t\t\t\tdestructiveButtonIndex,\n\t\t\t\tdisabledButtonIndices,\n\t\t\t\tanchor: getAnchor && getAnchor(),\n\t\t\t\ttintColor: buttonTitleColor,\n\t\t\t},\n\t\t\t( buttonIndex ) => {\n\t\t\t\tif ( buttonIndex === 0 ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst selected = options[ buttonIndex - 1 ];\n\n\t\t\t\tif ( selected.requiresModal && isBottomSheetOpened ) {\n\t\t\t\t\tonHandleClosingBottomSheet( () => {\n\t\t\t\t\t\tonChange( selected.value );\n\t\t\t\t\t} );\n\t\t\t\t\tcloseBottomSheet();\n\t\t\t\t} else {\n\t\t\t\t\tonChange( selected.value );\n\t\t\t\t}\n\t\t\t}\n\t\t);\n\t}\n\n\trender() {\n\t\treturn null;\n\t}\n}\n\nconst PickerComponent = forwardRef( ( props, ref ) => {\n\tconst isBottomSheetOpened = useSelect( ( select ) =>\n\t\tselect( 'core/edit-post' ).isEditorSidebarOpened()\n\t);\n\tconst { closeGeneralSidebar } = useDispatch( 'core/edit-post' );\n\tconst { onHandleClosingBottomSheet } = useContext( BottomSheetContext );\n\n\tconst colorScheme = usePreferredColorScheme();\n\n\treturn (\n\t\t<Picker\n\t\t\tref={ ref }\n\t\t\t{ ...props }\n\t\t\tisBottomSheetOpened={ isBottomSheetOpened }\n\t\t\tcloseBottomSheet={ closeGeneralSidebar }\n\t\t\tonHandleClosingBottomSheet={ onHandleClosingBottomSheet }\n\t\t\tcolorScheme={ colorScheme }\n\t\t/>\n\t);\n} );\n\nexport default PickerComponent;\n"],"mappings":";;;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AANA,IAAAC,YAAA,GAAAD,OAAA;AAKA,IAAAE,KAAA,GAAAF,OAAA;AAEA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAJ,OAAA;AACA,IAAAK,QAAA,GAAAL,OAAA;AAKA,IAAAM,OAAA,GAAAC,sBAAA,CAAAP,OAAA;AAjBA;AACA;AACA;;AAGA;AACA;AACA;;AAOA;AACA;AACA;;AAGA,MAAMQ,MAAM,SAASC,kBAAS,CAAC;EAC9BC,aAAaA,CAAA,EAAG;IACf,MAAM;MACLC,OAAO;MACPC,QAAQ;MACRC,KAAK;MACLC,sBAAsB;MACtBC,qBAAqB;MACrBC,SAAS;MACTC,mBAAmB;MACnBC,gBAAgB;MAChBC,0BAA0B;MAC1BC;IACD,CAAC,GAAG,IAAI,CAACC,KAAK;IACd,MAAMC,MAAM,GAAGX,OAAO,CAACY,GAAG,CAAE,CAAE;MAAEC;IAAM,CAAC,KAAMA,KAAM,CAAC;IACpD,MAAMC,WAAW,GAAG,CAAE,IAAAC,QAAE,EAAE,QAAS,CAAC,CAAE,CAACC,MAAM,CAAEL,MAAO,CAAC;IAEvD,MAAMM,gBAAgB,GACrBR,WAAW,KAAK,OAAO,GACpBS,eAAM,CAAE,iCAAiC,CAAE,CAACC,KAAK,GACjDD,eAAM,CAAE,uCAAuC,CAAE,CAACC,KAAK;IAE3DC,2BAAc,CAACC,0BAA0B,CACxC;MACCnB,KAAK;MACLF,OAAO,EAAEc,WAAW;MACpBQ,iBAAiB,EAAE,CAAC;MACpBnB,sBAAsB;MACtBC,qBAAqB;MACrBmB,MAAM,EAAElB,SAAS,IAAIA,SAAS,CAAC,CAAC;MAChCmB,SAAS,EAAEP;IACZ,CAAC,EACCQ,WAAW,IAAM;MAClB,IAAKA,WAAW,KAAK,CAAC,EAAG;QACxB;MACD;MACA,MAAMC,QAAQ,GAAG1B,OAAO,CAAEyB,WAAW,GAAG,CAAC,CAAE;MAE3C,IAAKC,QAAQ,CAACC,aAAa,IAAIrB,mBAAmB,EAAG;QACpDE,0BAA0B,CAAE,MAAM;UACjCP,QAAQ,CAAEyB,QAAQ,CAACE,KAAM,CAAC;QAC3B,CAAE,CAAC;QACHrB,gBAAgB,CAAC,CAAC;MACnB,CAAC,MAAM;QACNN,QAAQ,CAAEyB,QAAQ,CAACE,KAAM,CAAC;MAC3B;IACD,CACD,CAAC;EACF;EAEAC,MAAMA,CAAA,EAAG;IACR,OAAO,IAAI;EACZ;AACD;AAEA,MAAMC,eAAe,GAAG,IAAAC,mBAAU,EAAE,CAAErB,KAAK,EAAEsB,GAAG,KAAM;EACrD,MAAM1B,mBAAmB,GAAG,IAAA2B,eAAS,EAAIC,MAAM,IAC9CA,MAAM,CAAE,gBAAiB,CAAC,CAACC,qBAAqB,CAAC,CAClD,CAAC;EACD,MAAM;IAAEC;EAAoB,CAAC,GAAG,IAAAC,iBAAW,EAAE,gBAAiB,CAAC;EAC/D,MAAM;IAAE7B;EAA2B,CAAC,GAAG,IAAA8B,mBAAU,EAAEC,8BAAmB,CAAC;EAEvE,MAAM9B,WAAW,GAAG,IAAA+B,gCAAuB,EAAC,CAAC;EAE7C,OACC,IAAApD,QAAA,CAAAqD,aAAA,EAAC5C,MAAM;IACNmC,GAAG,EAAGA,GAAK;IAAA,GACNtB,KAAK;IACVJ,mBAAmB,EAAGA,mBAAqB;IAC3CC,gBAAgB,EAAG6B,mBAAqB;IACxC5B,0BAA0B,EAAGA,0BAA4B;IACzDC,WAAW,EAAGA;EAAa,CAC3B,CAAC;AAEJ,CAAE,CAAC;AAAC,IAAAiC,QAAA,GAEWZ,eAAe;AAAAa,OAAA,CAAAC,OAAA,GAAAF,QAAA"}
+{"version":3,"names":["_reactNative","require","_i18n","_element","_data","_components","_compose","_styles","_interopRequireDefault","Picker","Component","presentPicker","options","onChange","title","destructiveButtonIndex","disabledButtonIndices","getAnchor","isBottomSheetOpened","closeBottomSheet","onHandleClosingBottomSheet","colorScheme","props","labels","map","label","fullOptions","__","concat","buttonTitleColor","styles","color","ActionSheetIOS","showActionSheetWithOptions","cancelButtonIndex","anchor","tintColor","buttonIndex","selected","requiresModal","value","render","PickerComponent","forwardRef","ref","useSelect","select","isEditorSidebarOpened","closeGeneralSidebar","useDispatch","useContext","BottomSheetContext","usePreferredColorScheme","_react","createElement","_default","exports","default"],"sources":["@wordpress/components/src/mobile/picker/index.ios.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { ActionSheetIOS } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { Component, forwardRef, useContext } from '@wordpress/element';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { BottomSheetContext } from '@wordpress/components';\nimport { usePreferredColorScheme } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './styles.scss';\n\nclass Picker extends Component {\n\tpresentPicker() {\n\t\tconst {\n\t\t\toptions,\n\t\t\tonChange,\n\t\t\ttitle,\n\t\t\tdestructiveButtonIndex,\n\t\t\tdisabledButtonIndices,\n\t\t\tgetAnchor,\n\t\t\tisBottomSheetOpened,\n\t\t\tcloseBottomSheet,\n\t\t\tonHandleClosingBottomSheet,\n\t\t\tcolorScheme,\n\t\t} = this.props;\n\t\tconst labels = options.map( ( { label } ) => label );\n\t\tconst fullOptions = [ __( 'Cancel' ) ].concat( labels );\n\n\t\tconst buttonTitleColor =\n\t\t\tcolorScheme === 'light'\n\t\t\t\t? styles[ 'components-picker__button-title' ].color\n\t\t\t\t: styles[ 'components-picker__button-title--dark' ].color;\n\n\t\tActionSheetIOS.showActionSheetWithOptions(\n\t\t\t{\n\t\t\t\ttitle,\n\t\t\t\toptions: fullOptions,\n\t\t\t\tcancelButtonIndex: 0,\n\t\t\t\tdestructiveButtonIndex,\n\t\t\t\tdisabledButtonIndices,\n\t\t\t\tanchor: getAnchor && getAnchor(),\n\t\t\t\ttintColor: buttonTitleColor,\n\t\t\t},\n\t\t\t( buttonIndex ) => {\n\t\t\t\tif ( buttonIndex === 0 ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst selected = options[ buttonIndex - 1 ];\n\n\t\t\t\tif ( selected.requiresModal && isBottomSheetOpened ) {\n\t\t\t\t\tonHandleClosingBottomSheet( () => {\n\t\t\t\t\t\tonChange( selected.value );\n\t\t\t\t\t} );\n\t\t\t\t\tcloseBottomSheet();\n\t\t\t\t} else {\n\t\t\t\t\tonChange( selected.value );\n\t\t\t\t}\n\t\t\t}\n\t\t);\n\t}\n\n\trender() {\n\t\treturn null;\n\t}\n}\n\nconst PickerComponent = forwardRef( ( props, ref ) => {\n\tconst isBottomSheetOpened = useSelect( ( select ) =>\n\t\tselect( 'core/edit-post' ).isEditorSidebarOpened()\n\t);\n\tconst { closeGeneralSidebar } = useDispatch( 'core/edit-post' );\n\tconst { onHandleClosingBottomSheet } = useContext( BottomSheetContext );\n\n\tconst colorScheme = usePreferredColorScheme();\n\n\treturn (\n\t\t<Picker\n\t\t\tref={ ref }\n\t\t\t{ ...props }\n\t\t\tisBottomSheetOpened={ isBottomSheetOpened }\n\t\t\tcloseBottomSheet={ closeGeneralSidebar }\n\t\t\tonHandleClosingBottomSheet={ onHandleClosingBottomSheet }\n\t\t\tcolorScheme={ colorScheme }\n\t\t/>\n\t);\n} );\n\nexport default PickerComponent;\n"],"mappings":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAJ,OAAA;AACA,IAAAK,QAAA,GAAAL,OAAA;AAKA,IAAAM,OAAA,GAAAC,sBAAA,CAAAP,OAAA;AAjBA;AACA;AACA;;AAGA;AACA;AACA;;AAOA;AACA;AACA;;AAGA,MAAMQ,MAAM,SAASC,kBAAS,CAAC;EAC9BC,aAAaA,CAAA,EAAG;IACf,MAAM;MACLC,OAAO;MACPC,QAAQ;MACRC,KAAK;MACLC,sBAAsB;MACtBC,qBAAqB;MACrBC,SAAS;MACTC,mBAAmB;MACnBC,gBAAgB;MAChBC,0BAA0B;MAC1BC;IACD,CAAC,GAAG,IAAI,CAACC,KAAK;IACd,MAAMC,MAAM,GAAGX,OAAO,CAACY,GAAG,CAAE,CAAE;MAAEC;IAAM,CAAC,KAAMA,KAAM,CAAC;IACpD,MAAMC,WAAW,GAAG,CAAE,IAAAC,QAAE,EAAE,QAAS,CAAC,CAAE,CAACC,MAAM,CAAEL,MAAO,CAAC;IAEvD,MAAMM,gBAAgB,GACrBR,WAAW,KAAK,OAAO,GACpBS,eAAM,CAAE,iCAAiC,CAAE,CAACC,KAAK,GACjDD,eAAM,CAAE,uCAAuC,CAAE,CAACC,KAAK;IAE3DC,2BAAc,CAACC,0BAA0B,CACxC;MACCnB,KAAK;MACLF,OAAO,EAAEc,WAAW;MACpBQ,iBAAiB,EAAE,CAAC;MACpBnB,sBAAsB;MACtBC,qBAAqB;MACrBmB,MAAM,EAAElB,SAAS,IAAIA,SAAS,CAAC,CAAC;MAChCmB,SAAS,EAAEP;IACZ,CAAC,EACCQ,WAAW,IAAM;MAClB,IAAKA,WAAW,KAAK,CAAC,EAAG;QACxB;MACD;MACA,MAAMC,QAAQ,GAAG1B,OAAO,CAAEyB,WAAW,GAAG,CAAC,CAAE;MAE3C,IAAKC,QAAQ,CAACC,aAAa,IAAIrB,mBAAmB,EAAG;QACpDE,0BAA0B,CAAE,MAAM;UACjCP,QAAQ,CAAEyB,QAAQ,CAACE,KAAM,CAAC;QAC3B,CAAE,CAAC;QACHrB,gBAAgB,CAAC,CAAC;MACnB,CAAC,MAAM;QACNN,QAAQ,CAAEyB,QAAQ,CAACE,KAAM,CAAC;MAC3B;IACD,CACD,CAAC;EACF;EAEAC,MAAMA,CAAA,EAAG;IACR,OAAO,IAAI;EACZ;AACD;AAEA,MAAMC,eAAe,GAAG,IAAAC,mBAAU,EAAE,CAAErB,KAAK,EAAEsB,GAAG,KAAM;EACrD,MAAM1B,mBAAmB,GAAG,IAAA2B,eAAS,EAAIC,MAAM,IAC9CA,MAAM,CAAE,gBAAiB,CAAC,CAACC,qBAAqB,CAAC,CAClD,CAAC;EACD,MAAM;IAAEC;EAAoB,CAAC,GAAG,IAAAC,iBAAW,EAAE,gBAAiB,CAAC;EAC/D,MAAM;IAAE7B;EAA2B,CAAC,GAAG,IAAA8B,mBAAU,EAAEC,8BAAmB,CAAC;EAEvE,MAAM9B,WAAW,GAAG,IAAA+B,gCAAuB,EAAC,CAAC;EAE7C,OACC,IAAAC,MAAA,CAAAC,aAAA,EAAC7C,MAAM;IACNmC,GAAG,EAAGA,GAAK;IAAA,GACNtB,KAAK;IACVJ,mBAAmB,EAAGA,mBAAqB;IAC3CC,gBAAgB,EAAG6B,mBAAqB;IACxC5B,0BAA0B,EAAGA,0BAA4B;IACzDC,WAAW,EAAGA;EAAa,CAC3B,CAAC;AAEJ,CAAE,CAAC;AAAC,IAAAkC,QAAA,GAEWb,eAAe;AAAAc,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

package/build/mobile/segmented-control/index.native.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _reactNative = require("react-native");
+var _element = require("@wordpress/element");
 var _compose = require("@wordpress/compose");
 var _layoutAnimation = require("../layout-animation");
 var _style = _interopRequireDefault(require("./style.scss"));
@@ -36,15 +37,15 @@ const Segment = ({
   const textStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.buttonTextDefault, _style.default.buttonTextDefaultDark);
   const selectedTextStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.buttonTextSelected, _style.default.buttonTextSelectedDark);
   const shadowStyle = (0, _compose.usePreferredColorSchemeStyle)(_style.default.shadowIOS, {});
-  return (0, _element.createElement)(_reactNative.View, {
+  return (0, _react.createElement)(_reactNative.View, {
     style: isSelectedIOS && shadowStyle
-  }, (0, _element.createElement)(_reactNative.TouchableWithoutFeedback, {
+  }, (0, _react.createElement)(_reactNative.TouchableWithoutFeedback, {
     onPress: onPress
-  }, (0, _element.createElement)(_reactNative.View, {
+  }, (0, _react.createElement)(_reactNative.View, {
     style: segmentStyle,
     onLayout: onLayout,
     ...props
-  }, (0, _element.createElement)(_reactNative.Text, {
+  }, (0, _react.createElement)(_reactNative.Text, {
     style: [textStyle, isSelected && selectedTextStyle],
     maxFontSizeMultiplier: 2
   }, title))));
@@ -120,20 +121,20 @@ const SegmentedControls = ({
   const width = segmentsDimensions[activeSegmentIndex]?.width;
   const height = segmentsDimensions[activeSegmentIndex]?.height;
   const outlineStyle = [_style.default.outline, isIOS && _style.default.outlineIOS];
-  return (0, _element.createElement)(_reactNative.View, {
+  return (0, _react.createElement)(_reactNative.View, {
     style: _style.default.row
-  }, (0, _element.createElement)(_reactNative.View, {
+  }, (0, _react.createElement)(_reactNative.View, {
     style: _style.default.flex
-  }, addonLeft), (0, _element.createElement)(_reactNative.View, {
+  }, addonLeft), (0, _react.createElement)(_reactNative.View, {
     style: [containerStyle, isIOS && _style.default.containerIOS]
-  }, (0, _element.createElement)(_reactNative.Animated.View, {
+  }, (0, _react.createElement)(_reactNative.Animated.View, {
     style: [{
       width,
       left: positionAnimationValue,
       height
     }, selectedStyle, outlineStyle]
   }), segments.map((segment, index) => {
-    return (0, _element.createElement)(Segment, {
+    return (0, _react.createElement)(Segment, {
       title: segment,
       onPress: () => onHandlePress(segment, index),
       isSelected: activeSegmentIndex === index,
@@ -146,7 +147,7 @@ const SegmentedControls = ({
       accessibilityLabel: segment,
       accessibilityHint: `${index + 1} on ${segments.length}`
     });
-  })), (0, _element.createElement)(_reactNative.View, {
+  })), (0, _react.createElement)(_reactNative.View, {
     style: _style.default.flex
   }, addonRight));
 };

package/build/mobile/segmented-control/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_reactNative","_compose","_layoutAnimation","_style","_interopRequireDefault","ANIMATION_DURATION","isIOS","Platform","OS","Segment","isSelected","title","onPress","onLayout","props","isSelectedIOS","segmentStyle","styles","segment","segmentIOS","textStyle","usePreferredColorSchemeStyle","buttonTextDefault","buttonTextDefaultDark","selectedTextStyle","buttonTextSelected","buttonTextSelectedDark","shadowStyle","shadowIOS","createElement","View","style","TouchableWithoutFeedback","Text","maxFontSizeMultiplier","SegmentedControls","segments","segmentHandler","selectedIndex","addonLeft","addonRight","selectedSegmentIndex","activeSegmentIndex","setActiveSegmentIndex","useState","segmentsDimensions","setSegmentsDimensions","width","height","positionAnimationValue","Animated","Value","useEffect","setValue","calculateEndValue","containerStyle","container","containerDark","performSwatchAnimation","index","timing","toValue","duration","easing","Easing","ease","useNativeDriver","start","paddingLeft","offset","containerIOS","widths","Object","values","map","dimension","widthsDistance","slice","widthsDistanceSum","reduce","sum","n","endValue","onHandlePress","performLayoutAnimation","segmentOnLayout","event","nativeEvent","layout","selectedStyle","selected","selectedDark","outlineStyle","outline","outlineIOS","row","flex","left","key","accessibilityState","accessibilityRole","accessibilityLabel","accessibilityHint","length","_default","exports","default"],"sources":["@wordpress/components/src/mobile/segmented-control/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tView,\n\tTouchableWithoutFeedback,\n\tText,\n\tPlatform,\n\tAnimated,\n\tEasing,\n} from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { performLayoutAnimation } from '../layout-animation';\nimport styles from './style.scss';\n\nconst ANIMATION_DURATION = 200;\n\nconst isIOS = Platform.OS === 'ios';\n\nconst Segment = ( { isSelected, title, onPress, onLayout, ...props } ) => {\n\tconst isSelectedIOS = isIOS && isSelected;\n\n\tconst segmentStyle = [ styles.segment, isIOS && styles.segmentIOS ];\n\n\tconst textStyle = usePreferredColorSchemeStyle(\n\t\tstyles.buttonTextDefault,\n\t\tstyles.buttonTextDefaultDark\n\t);\n\tconst selectedTextStyle = usePreferredColorSchemeStyle(\n\t\tstyles.buttonTextSelected,\n\t\tstyles.buttonTextSelectedDark\n\t);\n\tconst shadowStyle = usePreferredColorSchemeStyle( styles.shadowIOS, {} );\n\n\treturn (\n\t\t<View style={ isSelectedIOS && shadowStyle }>\n\t\t\t<TouchableWithoutFeedback onPress={ onPress }>\n\t\t\t\t<View style={ segmentStyle } onLayout={ onLayout } { ...props }>\n\t\t\t\t\t<Text\n\t\t\t\t\t\tstyle={ [ textStyle, isSelected && selectedTextStyle ] }\n\t\t\t\t\t\tmaxFontSizeMultiplier={ 2 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ title }\n\t\t\t\t\t</Text>\n\t\t\t\t</View>\n\t\t\t</TouchableWithoutFeedback>\n\t\t</View>\n\t);\n};\n\nconst SegmentedControls = ( {\n\tsegments,\n\tsegmentHandler,\n\tselectedIndex,\n\taddonLeft,\n\taddonRight,\n} ) => {\n\tconst selectedSegmentIndex = selectedIndex || 0;\n\tconst [ activeSegmentIndex, setActiveSegmentIndex ] =\n\t\tuseState( selectedSegmentIndex );\n\tconst [ segmentsDimensions, setSegmentsDimensions ] = useState( {\n\t\t[ activeSegmentIndex ]: { width: 0, height: 0 },\n\t} );\n\tconst [ positionAnimationValue ] = useState( new Animated.Value( 0 ) );\n\n\tuseEffect( () => {\n\t\tsetActiveSegmentIndex( selectedSegmentIndex );\n\t\tsegmentHandler( segments[ selectedSegmentIndex ] );\n\t\t// Disable reason: deferring this refactor to the native team.\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tpositionAnimationValue.setValue(\n\t\t\tcalculateEndValue( activeSegmentIndex )\n\t\t);\n\t\t// Disable reason: deferring this refactor to the native team.\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ segmentsDimensions ] );\n\n\tconst containerStyle = usePreferredColorSchemeStyle(\n\t\tstyles.container,\n\t\tstyles.containerDark\n\t);\n\n\tfunction performSwatchAnimation( index ) {\n\t\tAnimated.timing( positionAnimationValue, {\n\t\t\ttoValue: calculateEndValue( index ),\n\t\t\tduration: ANIMATION_DURATION,\n\t\t\teasing: Easing.ease,\n\t\t\tuseNativeDriver: false,\n\t\t} ).start();\n\t}\n\n\tfunction calculateEndValue( index ) {\n\t\tconst { paddingLeft: offset } = isIOS\n\t\t\t? styles.containerIOS\n\t\t\t: styles.container;\n\t\tconst widths = Object.values( segmentsDimensions ).map(\n\t\t\t( dimension ) => dimension.width\n\t\t);\n\t\tconst widthsDistance = widths.slice( 0, index );\n\t\tconst widthsDistanceSum = widthsDistance.reduce(\n\t\t\t( sum, n ) => sum + n,\n\t\t\t0\n\t\t);\n\n\t\tconst endValue = index === 0 ? 0 : widthsDistanceSum;\n\t\treturn endValue + offset;\n\t}\n\n\tfunction onHandlePress( segment, index ) {\n\t\tperformLayoutAnimation( ANIMATION_DURATION );\n\t\tsetActiveSegmentIndex( index );\n\t\tsegmentHandler( segment );\n\t\tperformSwatchAnimation( index );\n\t}\n\n\tfunction segmentOnLayout( event, index ) {\n\t\tconst { width, height } = event.nativeEvent.layout;\n\n\t\tsetSegmentsDimensions( {\n\t\t\t...segmentsDimensions,\n\t\t\t[ index ]: { width, height },\n\t\t} );\n\t}\n\n\tconst selectedStyle = usePreferredColorSchemeStyle(\n\t\tstyles.selected,\n\t\tstyles.selectedDark\n\t);\n\n\tconst width = segmentsDimensions[ activeSegmentIndex ]?.width;\n\tconst height = segmentsDimensions[ activeSegmentIndex ]?.height;\n\n\tconst outlineStyle = [ styles.outline, isIOS && styles.outlineIOS ];\n\n\treturn (\n\t\t<View style={ styles.row }>\n\t\t\t<View style={ styles.flex }>{ addonLeft }</View>\n\t\t\t<View style={ [ containerStyle, isIOS && styles.containerIOS ] }>\n\t\t\t\t<Animated.View\n\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\twidth,\n\t\t\t\t\t\t\tleft: positionAnimationValue,\n\t\t\t\t\t\t\theight,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tselectedStyle,\n\t\t\t\t\t\toutlineStyle,\n\t\t\t\t\t] }\n\t\t\t\t/>\n\t\t\t\t{ segments.map( ( segment, index ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Segment\n\t\t\t\t\t\t\ttitle={ segment }\n\t\t\t\t\t\t\tonPress={ () => onHandlePress( segment, index ) }\n\t\t\t\t\t\t\tisSelected={ activeSegmentIndex === index }\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tonLayout={ ( event ) =>\n\t\t\t\t\t\t\t\tsegmentOnLayout( event, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\taccessibilityState={ {\n\t\t\t\t\t\t\t\tselected: activeSegmentIndex === index,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\taccessibilityLabel={ segment }\n\t\t\t\t\t\t\taccessibilityHint={ `${ index + 1 } on ${\n\t\t\t\t\t\t\t\tsegments.length\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} ) }\n\t\t\t</View>\n\t\t\t<View style={ styles.flex }>{ addonRight }</View>\n\t\t</View>\n\t);\n};\n\nexport default SegmentedControls;\n"],"mappings":";;;;;;;AAcA,IAAAA,QAAA,GAAAC,OAAA;AAXA,IAAAC,YAAA,GAAAD,OAAA;AAYA,IAAAE,QAAA,GAAAF,OAAA;AAKA,IAAAG,gBAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAC,sBAAA,CAAAL,OAAA;AArBA;AACA;AACA;;AASA;AACA;AACA;;AAIA;AACA;AACA;;AAIA,MAAMM,kBAAkB,GAAG,GAAG;AAE9B,MAAMC,KAAK,GAAGC,qBAAQ,CAACC,EAAE,KAAK,KAAK;AAEnC,MAAMC,OAAO,GAAGA,CAAE;EAAEC,UAAU;EAAEC,KAAK;EAAEC,OAAO;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,KAAM;EACzE,MAAMC,aAAa,GAAGT,KAAK,IAAII,UAAU;EAEzC,MAAMM,YAAY,GAAG,CAAEC,cAAM,CAACC,OAAO,EAAEZ,KAAK,IAAIW,cAAM,CAACE,UAAU,CAAE;EAEnE,MAAMC,SAAS,GAAG,IAAAC,qCAA4B,EAC7CJ,cAAM,CAACK,iBAAiB,EACxBL,cAAM,CAACM,qBACR,CAAC;EACD,MAAMC,iBAAiB,GAAG,IAAAH,qCAA4B,EACrDJ,cAAM,CAACQ,kBAAkB,EACzBR,cAAM,CAACS,sBACR,CAAC;EACD,MAAMC,WAAW,GAAG,IAAAN,qCAA4B,EAAEJ,cAAM,CAACW,SAAS,EAAE,CAAC,CAAE,CAAC;EAExE,OACC,IAAA9B,QAAA,CAAA+B,aAAA,EAAC7B,YAAA,CAAA8B,IAAI;IAACC,KAAK,EAAGhB,aAAa,IAAIY;EAAa,GAC3C,IAAA7B,QAAA,CAAA+B,aAAA,EAAC7B,YAAA,CAAAgC,wBAAwB;IAACpB,OAAO,EAAGA;EAAS,GAC5C,IAAAd,QAAA,CAAA+B,aAAA,EAAC7B,YAAA,CAAA8B,IAAI;IAACC,KAAK,EAAGf,YAAc;IAACH,QAAQ,EAAGA,QAAU;IAAA,GAAMC;EAAK,GAC5D,IAAAhB,QAAA,CAAA+B,aAAA,EAAC7B,YAAA,CAAAiC,IAAI;IACJF,KAAK,EAAG,CAAEX,SAAS,EAAEV,UAAU,IAAIc,iBAAiB,CAAI;IACxDU,qBAAqB,EAAG;EAAG,GAEzBvB,KACG,CACD,CACmB,CACrB,CAAC;AAET,CAAC;AAED,MAAMwB,iBAAiB,GAAGA,CAAE;EAC3BC,QAAQ;EACRC,cAAc;EACdC,aAAa;EACbC,SAAS;EACTC;AACD,CAAC,KAAM;EACN,MAAMC,oBAAoB,GAAGH,aAAa,IAAI,CAAC;EAC/C,MAAM,CAAEI,kBAAkB,EAAEC,qBAAqB,CAAE,GAClD,IAAAC,iBAAQ,EAAEH,oBAAqB,CAAC;EACjC,MAAM,CAAEI,kBAAkB,EAAEC,qBAAqB,CAAE,GAAG,IAAAF,iBAAQ,EAAE;IAC/D,CAAEF,kBAAkB,GAAI;MAAEK,KAAK,EAAE,CAAC;MAAEC,MAAM,EAAE;IAAE;EAC/C,CAAE,CAAC;EACH,MAAM,CAAEC,sBAAsB,CAAE,GAAG,IAAAL,iBAAQ,EAAE,IAAIM,qBAAQ,CAACC,KAAK,CAAE,CAAE,CAAE,CAAC;EAEtE,IAAAC,kBAAS,EAAE,MAAM;IAChBT,qBAAqB,CAAEF,oBAAqB,CAAC;IAC7CJ,cAAc,CAAED,QAAQ,CAAEK,oBAAoB,CAAG,CAAC;IAClD;IACA;IACA;EACD,CAAC,EAAE,EAAG,CAAC;EAEP,IAAAW,kBAAS,EAAE,MAAM;IAChBH,sBAAsB,CAACI,QAAQ,CAC9BC,iBAAiB,CAAEZ,kBAAmB,CACvC,CAAC;IACD;IACA;IACA;EACD,CAAC,EAAE,CAAEG,kBAAkB,CAAG,CAAC;EAE3B,MAAMU,cAAc,GAAG,IAAAlC,qCAA4B,EAClDJ,cAAM,CAACuC,SAAS,EAChBvC,cAAM,CAACwC,aACR,CAAC;EAED,SAASC,sBAAsBA,CAAEC,KAAK,EAAG;IACxCT,qBAAQ,CAACU,MAAM,CAAEX,sBAAsB,EAAE;MACxCY,OAAO,EAAEP,iBAAiB,CAAEK,KAAM,CAAC;MACnCG,QAAQ,EAAEzD,kBAAkB;MAC5B0D,MAAM,EAAEC,mBAAM,CAACC,IAAI;MACnBC,eAAe,EAAE;IAClB,CAAE,CAAC,CAACC,KAAK,CAAC,CAAC;EACZ;EAEA,SAASb,iBAAiBA,CAAEK,KAAK,EAAG;IACnC,MAAM;MAAES,WAAW,EAAEC;IAAO,CAAC,GAAG/D,KAAK,GAClCW,cAAM,CAACqD,YAAY,GACnBrD,cAAM,CAACuC,SAAS;IACnB,MAAMe,MAAM,GAAGC,MAAM,CAACC,MAAM,CAAE5B,kBAAmB,CAAC,CAAC6B,GAAG,CACnDC,SAAS,IAAMA,SAAS,CAAC5B,KAC5B,CAAC;IACD,MAAM6B,cAAc,GAAGL,MAAM,CAACM,KAAK,CAAE,CAAC,EAAElB,KAAM,CAAC;IAC/C,MAAMmB,iBAAiB,GAAGF,cAAc,CAACG,MAAM,CAC9C,CAAEC,GAAG,EAAEC,CAAC,KAAMD,GAAG,GAAGC,CAAC,EACrB,CACD,CAAC;IAED,MAAMC,QAAQ,GAAGvB,KAAK,KAAK,CAAC,GAAG,CAAC,GAAGmB,iBAAiB;IACpD,OAAOI,QAAQ,GAAGb,MAAM;EACzB;EAEA,SAASc,aAAaA,CAAEjE,OAAO,EAAEyC,KAAK,EAAG;IACxC,IAAAyB,uCAAsB,EAAE/E,kBAAmB,CAAC;IAC5CsC,qBAAqB,CAAEgB,KAAM,CAAC;IAC9BtB,cAAc,CAAEnB,OAAQ,CAAC;IACzBwC,sBAAsB,CAAEC,KAAM,CAAC;EAChC;EAEA,SAAS0B,eAAeA,CAAEC,KAAK,EAAE3B,KAAK,EAAG;IACxC,MAAM;MAAEZ,KAAK;MAAEC;IAAO,CAAC,GAAGsC,KAAK,CAACC,WAAW,CAACC,MAAM;IAElD1C,qBAAqB,CAAE;MACtB,GAAGD,kBAAkB;MACrB,CAAEc,KAAK,GAAI;QAAEZ,KAAK;QAAEC;MAAO;IAC5B,CAAE,CAAC;EACJ;EAEA,MAAMyC,aAAa,GAAG,IAAApE,qCAA4B,EACjDJ,cAAM,CAACyE,QAAQ,EACfzE,cAAM,CAAC0E,YACR,CAAC;EAED,MAAM5C,KAAK,GAAGF,kBAAkB,CAAEH,kBAAkB,CAAE,EAAEK,KAAK;EAC7D,MAAMC,MAAM,GAAGH,kBAAkB,CAAEH,kBAAkB,CAAE,EAAEM,MAAM;EAE/D,MAAM4C,YAAY,GAAG,CAAE3E,cAAM,CAAC4E,OAAO,EAAEvF,KAAK,IAAIW,cAAM,CAAC6E,UAAU,CAAE;EAEnE,OACC,IAAAhG,QAAA,CAAA+B,aAAA,EAAC7B,YAAA,CAAA8B,IAAI;IAACC,KAAK,EAAGd,cAAM,CAAC8E;EAAK,GACzB,IAAAjG,QAAA,CAAA+B,aAAA,EAAC7B,YAAA,CAAA8B,IAAI;IAACC,KAAK,EAAGd,cAAM,CAAC+E;EAAM,GAAGzD,SAAiB,CAAC,EAChD,IAAAzC,QAAA,CAAA+B,aAAA,EAAC7B,YAAA,CAAA8B,IAAI;IAACC,KAAK,EAAG,CAAEwB,cAAc,EAAEjD,KAAK,IAAIW,cAAM,CAACqD,YAAY;EAAI,GAC/D,IAAAxE,QAAA,CAAA+B,aAAA,EAAC7B,YAAA,CAAAkD,QAAQ,CAACpB,IAAI;IACbC,KAAK,EAAG,CACP;MACCgB,KAAK;MACLkD,IAAI,EAAEhD,sBAAsB;MAC5BD;IACD,CAAC,EACDyC,aAAa,EACbG,YAAY;EACV,CACH,CAAC,EACAxD,QAAQ,CAACsC,GAAG,CAAE,CAAExD,OAAO,EAAEyC,KAAK,KAAM;IACrC,OACC,IAAA7D,QAAA,CAAA+B,aAAA,EAACpB,OAAO;MACPE,KAAK,EAAGO,OAAS;MACjBN,OAAO,EAAGA,CAAA,KAAMuE,aAAa,CAAEjE,OAAO,EAAEyC,KAAM,CAAG;MACjDjD,UAAU,EAAGgC,kBAAkB,KAAKiB,KAAO;MAC3CuC,GAAG,EAAGvC,KAAO;MACb9C,QAAQ,EAAKyE,KAAK,IACjBD,eAAe,CAAEC,KAAK,EAAE3B,KAAM,CAC9B;MACDwC,kBAAkB,EAAG;QACpBT,QAAQ,EAAEhD,kBAAkB,KAAKiB;MAClC,CAAG;MACHyC,iBAAiB,EAAG,QAAU;MAC9BC,kBAAkB,EAAGnF,OAAS;MAC9BoF,iBAAiB,EAAI,GAAG3C,KAAK,GAAG,CAAG,OAClCvB,QAAQ,CAACmE,MACT;IAAG,CACJ,CAAC;EAEJ,CAAE,CACG,CAAC,EACP,IAAAzG,QAAA,CAAA+B,aAAA,EAAC7B,YAAA,CAAA8B,IAAI;IAACC,KAAK,EAAGd,cAAM,CAAC+E;EAAM,GAAGxD,UAAkB,CAC3C,CAAC;AAET,CAAC;AAAC,IAAAgE,QAAA,GAEarE,iBAAiB;AAAAsE,OAAA,CAAAC,OAAA,GAAAF,QAAA"}
+{"version":3,"names":["_reactNative","require","_element","_compose","_layoutAnimation","_style","_interopRequireDefault","ANIMATION_DURATION","isIOS","Platform","OS","Segment","isSelected","title","onPress","onLayout","props","isSelectedIOS","segmentStyle","styles","segment","segmentIOS","textStyle","usePreferredColorSchemeStyle","buttonTextDefault","buttonTextDefaultDark","selectedTextStyle","buttonTextSelected","buttonTextSelectedDark","shadowStyle","shadowIOS","_react","createElement","View","style","TouchableWithoutFeedback","Text","maxFontSizeMultiplier","SegmentedControls","segments","segmentHandler","selectedIndex","addonLeft","addonRight","selectedSegmentIndex","activeSegmentIndex","setActiveSegmentIndex","useState","segmentsDimensions","setSegmentsDimensions","width","height","positionAnimationValue","Animated","Value","useEffect","setValue","calculateEndValue","containerStyle","container","containerDark","performSwatchAnimation","index","timing","toValue","duration","easing","Easing","ease","useNativeDriver","start","paddingLeft","offset","containerIOS","widths","Object","values","map","dimension","widthsDistance","slice","widthsDistanceSum","reduce","sum","n","endValue","onHandlePress","performLayoutAnimation","segmentOnLayout","event","nativeEvent","layout","selectedStyle","selected","selectedDark","outlineStyle","outline","outlineIOS","row","flex","left","key","accessibilityState","accessibilityRole","accessibilityLabel","accessibilityHint","length","_default","exports","default"],"sources":["@wordpress/components/src/mobile/segmented-control/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tView,\n\tTouchableWithoutFeedback,\n\tText,\n\tPlatform,\n\tAnimated,\n\tEasing,\n} from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { performLayoutAnimation } from '../layout-animation';\nimport styles from './style.scss';\n\nconst ANIMATION_DURATION = 200;\n\nconst isIOS = Platform.OS === 'ios';\n\nconst Segment = ( { isSelected, title, onPress, onLayout, ...props } ) => {\n\tconst isSelectedIOS = isIOS && isSelected;\n\n\tconst segmentStyle = [ styles.segment, isIOS && styles.segmentIOS ];\n\n\tconst textStyle = usePreferredColorSchemeStyle(\n\t\tstyles.buttonTextDefault,\n\t\tstyles.buttonTextDefaultDark\n\t);\n\tconst selectedTextStyle = usePreferredColorSchemeStyle(\n\t\tstyles.buttonTextSelected,\n\t\tstyles.buttonTextSelectedDark\n\t);\n\tconst shadowStyle = usePreferredColorSchemeStyle( styles.shadowIOS, {} );\n\n\treturn (\n\t\t<View style={ isSelectedIOS && shadowStyle }>\n\t\t\t<TouchableWithoutFeedback onPress={ onPress }>\n\t\t\t\t<View style={ segmentStyle } onLayout={ onLayout } { ...props }>\n\t\t\t\t\t<Text\n\t\t\t\t\t\tstyle={ [ textStyle, isSelected && selectedTextStyle ] }\n\t\t\t\t\t\tmaxFontSizeMultiplier={ 2 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ title }\n\t\t\t\t\t</Text>\n\t\t\t\t</View>\n\t\t\t</TouchableWithoutFeedback>\n\t\t</View>\n\t);\n};\n\nconst SegmentedControls = ( {\n\tsegments,\n\tsegmentHandler,\n\tselectedIndex,\n\taddonLeft,\n\taddonRight,\n} ) => {\n\tconst selectedSegmentIndex = selectedIndex || 0;\n\tconst [ activeSegmentIndex, setActiveSegmentIndex ] =\n\t\tuseState( selectedSegmentIndex );\n\tconst [ segmentsDimensions, setSegmentsDimensions ] = useState( {\n\t\t[ activeSegmentIndex ]: { width: 0, height: 0 },\n\t} );\n\tconst [ positionAnimationValue ] = useState( new Animated.Value( 0 ) );\n\n\tuseEffect( () => {\n\t\tsetActiveSegmentIndex( selectedSegmentIndex );\n\t\tsegmentHandler( segments[ selectedSegmentIndex ] );\n\t\t// Disable reason: deferring this refactor to the native team.\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tpositionAnimationValue.setValue(\n\t\t\tcalculateEndValue( activeSegmentIndex )\n\t\t);\n\t\t// Disable reason: deferring this refactor to the native team.\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ segmentsDimensions ] );\n\n\tconst containerStyle = usePreferredColorSchemeStyle(\n\t\tstyles.container,\n\t\tstyles.containerDark\n\t);\n\n\tfunction performSwatchAnimation( index ) {\n\t\tAnimated.timing( positionAnimationValue, {\n\t\t\ttoValue: calculateEndValue( index ),\n\t\t\tduration: ANIMATION_DURATION,\n\t\t\teasing: Easing.ease,\n\t\t\tuseNativeDriver: false,\n\t\t} ).start();\n\t}\n\n\tfunction calculateEndValue( index ) {\n\t\tconst { paddingLeft: offset } = isIOS\n\t\t\t? styles.containerIOS\n\t\t\t: styles.container;\n\t\tconst widths = Object.values( segmentsDimensions ).map(\n\t\t\t( dimension ) => dimension.width\n\t\t);\n\t\tconst widthsDistance = widths.slice( 0, index );\n\t\tconst widthsDistanceSum = widthsDistance.reduce(\n\t\t\t( sum, n ) => sum + n,\n\t\t\t0\n\t\t);\n\n\t\tconst endValue = index === 0 ? 0 : widthsDistanceSum;\n\t\treturn endValue + offset;\n\t}\n\n\tfunction onHandlePress( segment, index ) {\n\t\tperformLayoutAnimation( ANIMATION_DURATION );\n\t\tsetActiveSegmentIndex( index );\n\t\tsegmentHandler( segment );\n\t\tperformSwatchAnimation( index );\n\t}\n\n\tfunction segmentOnLayout( event, index ) {\n\t\tconst { width, height } = event.nativeEvent.layout;\n\n\t\tsetSegmentsDimensions( {\n\t\t\t...segmentsDimensions,\n\t\t\t[ index ]: { width, height },\n\t\t} );\n\t}\n\n\tconst selectedStyle = usePreferredColorSchemeStyle(\n\t\tstyles.selected,\n\t\tstyles.selectedDark\n\t);\n\n\tconst width = segmentsDimensions[ activeSegmentIndex ]?.width;\n\tconst height = segmentsDimensions[ activeSegmentIndex ]?.height;\n\n\tconst outlineStyle = [ styles.outline, isIOS && styles.outlineIOS ];\n\n\treturn (\n\t\t<View style={ styles.row }>\n\t\t\t<View style={ styles.flex }>{ addonLeft }</View>\n\t\t\t<View style={ [ containerStyle, isIOS && styles.containerIOS ] }>\n\t\t\t\t<Animated.View\n\t\t\t\t\tstyle={ [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\twidth,\n\t\t\t\t\t\t\tleft: positionAnimationValue,\n\t\t\t\t\t\t\theight,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tselectedStyle,\n\t\t\t\t\t\toutlineStyle,\n\t\t\t\t\t] }\n\t\t\t\t/>\n\t\t\t\t{ segments.map( ( segment, index ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Segment\n\t\t\t\t\t\t\ttitle={ segment }\n\t\t\t\t\t\t\tonPress={ () => onHandlePress( segment, index ) }\n\t\t\t\t\t\t\tisSelected={ activeSegmentIndex === index }\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\tonLayout={ ( event ) =>\n\t\t\t\t\t\t\t\tsegmentOnLayout( event, index )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\taccessibilityState={ {\n\t\t\t\t\t\t\t\tselected: activeSegmentIndex === index,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\taccessibilityRole={ 'button' }\n\t\t\t\t\t\t\taccessibilityLabel={ segment }\n\t\t\t\t\t\t\taccessibilityHint={ `${ index + 1 } on ${\n\t\t\t\t\t\t\t\tsegments.length\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} ) }\n\t\t\t</View>\n\t\t\t<View style={ styles.flex }>{ addonRight }</View>\n\t\t</View>\n\t);\n};\n\nexport default SegmentedControls;\n"],"mappings":"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"}

package/build/modal/aria-helper.js

@@ -4,11 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.elementShouldBeHidden = elementShouldBeHidden;
-exports.hideApp = hideApp;
-exports.showApp = showApp;
+exports.modalize = modalize;
+exports.unmodalize = unmodalize;
 const LIVE_REGION_ARIA_ROLES = new Set(['alert', 'status', 'log', 'marquee', 'timer']);
-let hiddenElements = [],
-  isHidden = false;
+const hiddenElementsByDepth = [];
 
 /**
  * Hides all elements in the body element from screen-readers except
@@ -20,31 +19,27 @@ let hiddenElements = [],
  * we should consider removing these helper functions in favor of
  * `aria-modal="true"`.
  *
- * @param {HTMLDivElement} unhiddenElement The element that should not be hidden.
+ * @param modalElement The element that should not be hidden.
  */
-function hideApp(unhiddenElement) {
-  if (isHidden) {
-    return;
-  }
+function modalize(modalElement) {
   const elements = Array.from(document.body.children);
-  elements.forEach(element => {
-    if (element === unhiddenElement) {
-      return;
-    }
+  const hiddenElements = [];
+  hiddenElementsByDepth.push(hiddenElements);
+  for (const element of elements) {
+    if (element === modalElement) continue;
     if (elementShouldBeHidden(element)) {
       element.setAttribute('aria-hidden', 'true');
       hiddenElements.push(element);
     }
-  });
-  isHidden = true;
+  }
 }
 
 /**
  * Determines if the passed element should not be hidden from screen readers.
  *
- * @param {HTMLElement} element The element that should be checked.
+ * @param element The element that should be checked.
  *
- * @return {boolean} Whether the element should not be hidden from screen-readers.
+ * @return Whether the element should not be hidden from screen-readers.
  */
 function elementShouldBeHidden(element) {
   const role = element.getAttribute('role');
@@ -52,17 +47,11 @@ function elementShouldBeHidden(element) {
 }
 
 /**
- * Makes all elements in the body that have been hidden by `hideApp`
- * visible again to screen-readers.
+ * Accessibly reveals the elements hidden by the latest modal.
  */
-function showApp() {
-  if (!isHidden) {
-    return;
-  }
-  hiddenElements.forEach(element => {
-    element.removeAttribute('aria-hidden');
-  });
-  hiddenElements = [];
-  isHidden = false;
+function unmodalize() {
+  const hiddenElements = hiddenElementsByDepth.pop();
+  if (!hiddenElements) return;
+  for (const element of hiddenElements) element.removeAttribute('aria-hidden');
 }
 //# sourceMappingURL=aria-helper.js.map

package/build/modal/aria-helper.js.map

@@ -1 +1 @@
-{"version":3,"names":["LIVE_REGION_ARIA_ROLES","Set","hiddenElements","isHidden","hideApp","unhiddenElement","elements","Array","from","document","body","children","forEach","element","elementShouldBeHidden","setAttribute","push","role","getAttribute","tagName","hasAttribute","has","showApp","removeAttribute"],"sources":["@wordpress/components/src/modal/aria-helper.ts"],"sourcesContent":["const LIVE_REGION_ARIA_ROLES = new Set( [\n\t'alert',\n\t'status',\n\t'log',\n\t'marquee',\n\t'timer',\n] );\n\nlet hiddenElements: Element[] = [],\n\tisHidden = false;\n\n/**\n * Hides all elements in the body element from screen-readers except\n * the provided element and elements that should not be hidden from\n * screen-readers.\n *\n * The reason we do this is because `aria-modal=\"true\"` currently is bugged\n * in Safari, and support is spotty in other browsers overall. In the future\n * we should consider removing these helper functions in favor of\n * `aria-modal=\"true\"`.\n *\n * @param {HTMLDivElement} unhiddenElement The element that should not be hidden.\n */\nexport function hideApp( unhiddenElement?: HTMLDivElement ) {\n\tif ( isHidden ) {\n\t\treturn;\n\t}\n\tconst elements = Array.from( document.body.children );\n\telements.forEach( ( element ) => {\n\t\tif ( element === unhiddenElement ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( elementShouldBeHidden( element ) ) {\n\t\t\telement.setAttribute( 'aria-hidden', 'true' );\n\t\t\thiddenElements.push( element );\n\t\t}\n\t} );\n\tisHidden = true;\n}\n\n/**\n * Determines if the passed element should not be hidden from screen readers.\n *\n * @param {HTMLElement} element The element that should be checked.\n *\n * @return {boolean} Whether the element should not be hidden from screen-readers.\n */\nexport function elementShouldBeHidden( element: Element ) {\n\tconst role = element.getAttribute( 'role' );\n\treturn ! (\n\t\telement.tagName === 'SCRIPT' ||\n\t\telement.hasAttribute( 'aria-hidden' ) ||\n\t\telement.hasAttribute( 'aria-live' ) ||\n\t\t( role && LIVE_REGION_ARIA_ROLES.has( role ) )\n\t);\n}\n\n/**\n * Makes all elements in the body that have been hidden by `hideApp`\n * visible again to screen-readers.\n */\nexport function showApp() {\n\tif ( ! isHidden ) {\n\t\treturn;\n\t}\n\thiddenElements.forEach( ( element ) => {\n\t\telement.removeAttribute( 'aria-hidden' );\n\t} );\n\thiddenElements = [];\n\tisHidden = false;\n}\n"],"mappings":";;;;;;;;AAAA,MAAMA,sBAAsB,GAAG,IAAIC,GAAG,CAAE,CACvC,OAAO,EACP,QAAQ,EACR,KAAK,EACL,SAAS,EACT,OAAO,CACN,CAAC;AAEH,IAAIC,cAAyB,GAAG,EAAE;EACjCC,QAAQ,GAAG,KAAK;;AAEjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,OAAOA,CAAEC,eAAgC,EAAG;EAC3D,IAAKF,QAAQ,EAAG;IACf;EACD;EACA,MAAMG,QAAQ,GAAGC,KAAK,CAACC,IAAI,CAAEC,QAAQ,CAACC,IAAI,CAACC,QAAS,CAAC;EACrDL,QAAQ,CAACM,OAAO,CAAIC,OAAO,IAAM;IAChC,IAAKA,OAAO,KAAKR,eAAe,EAAG;MAClC;IACD;IACA,IAAKS,qBAAqB,CAAED,OAAQ,CAAC,EAAG;MACvCA,OAAO,CAACE,YAAY,CAAE,aAAa,EAAE,MAAO,CAAC;MAC7Cb,cAAc,CAACc,IAAI,CAAEH,OAAQ,CAAC;IAC/B;EACD,CAAE,CAAC;EACHV,QAAQ,GAAG,IAAI;AAChB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASW,qBAAqBA,CAAED,OAAgB,EAAG;EACzD,MAAMI,IAAI,GAAGJ,OAAO,CAACK,YAAY,CAAE,MAAO,CAAC;EAC3C,OAAO,EACNL,OAAO,CAACM,OAAO,KAAK,QAAQ,IAC5BN,OAAO,CAACO,YAAY,CAAE,aAAc,CAAC,IACrCP,OAAO,CAACO,YAAY,CAAE,WAAY,CAAC,IACjCH,IAAI,IAAIjB,sBAAsB,CAACqB,GAAG,CAAEJ,IAAK,CAAG,CAC9C;AACF;;AAEA;AACA;AACA;AACA;AACO,SAASK,OAAOA,CAAA,EAAG;EACzB,IAAK,CAAEnB,QAAQ,EAAG;IACjB;EACD;EACAD,cAAc,CAACU,OAAO,CAAIC,OAAO,IAAM;IACtCA,OAAO,CAACU,eAAe,CAAE,aAAc,CAAC;EACzC,CAAE,CAAC;EACHrB,cAAc,GAAG,EAAE;EACnBC,QAAQ,GAAG,KAAK;AACjB"}
+{"version":3,"names":["LIVE_REGION_ARIA_ROLES","Set","hiddenElementsByDepth","modalize","modalElement","elements","Array","from","document","body","children","hiddenElements","push","element","elementShouldBeHidden","setAttribute","role","getAttribute","tagName","hasAttribute","has","unmodalize","pop","removeAttribute"],"sources":["@wordpress/components/src/modal/aria-helper.ts"],"sourcesContent":["const LIVE_REGION_ARIA_ROLES = new Set( [\n\t'alert',\n\t'status',\n\t'log',\n\t'marquee',\n\t'timer',\n] );\n\nconst hiddenElementsByDepth: Element[][] = [];\n\n/**\n * Hides all elements in the body element from screen-readers except\n * the provided element and elements that should not be hidden from\n * screen-readers.\n *\n * The reason we do this is because `aria-modal=\"true\"` currently is bugged\n * in Safari, and support is spotty in other browsers overall. In the future\n * we should consider removing these helper functions in favor of\n * `aria-modal=\"true\"`.\n *\n * @param modalElement The element that should not be hidden.\n */\nexport function modalize( modalElement?: HTMLDivElement ) {\n\tconst elements = Array.from( document.body.children );\n\tconst hiddenElements: Element[] = [];\n\thiddenElementsByDepth.push( hiddenElements );\n\tfor ( const element of elements ) {\n\t\tif ( element === modalElement ) continue;\n\n\t\tif ( elementShouldBeHidden( element ) ) {\n\t\t\telement.setAttribute( 'aria-hidden', 'true' );\n\t\t\thiddenElements.push( element );\n\t\t}\n\t}\n}\n\n/**\n * Determines if the passed element should not be hidden from screen readers.\n *\n * @param element The element that should be checked.\n *\n * @return Whether the element should not be hidden from screen-readers.\n */\nexport function elementShouldBeHidden( element: Element ) {\n\tconst role = element.getAttribute( 'role' );\n\treturn ! (\n\t\telement.tagName === 'SCRIPT' ||\n\t\telement.hasAttribute( 'aria-hidden' ) ||\n\t\telement.hasAttribute( 'aria-live' ) ||\n\t\t( role && LIVE_REGION_ARIA_ROLES.has( role ) )\n\t);\n}\n\n/**\n * Accessibly reveals the elements hidden by the latest modal.\n */\nexport function unmodalize() {\n\tconst hiddenElements = hiddenElementsByDepth.pop();\n\tif ( ! hiddenElements ) return;\n\n\tfor ( const element of hiddenElements )\n\t\telement.removeAttribute( 'aria-hidden' );\n}\n"],"mappings":";;;;;;;;AAAA,MAAMA,sBAAsB,GAAG,IAAIC,GAAG,CAAE,CACvC,OAAO,EACP,QAAQ,EACR,KAAK,EACL,SAAS,EACT,OAAO,CACN,CAAC;AAEH,MAAMC,qBAAkC,GAAG,EAAE;;AAE7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,QAAQA,CAAEC,YAA6B,EAAG;EACzD,MAAMC,QAAQ,GAAGC,KAAK,CAACC,IAAI,CAAEC,QAAQ,CAACC,IAAI,CAACC,QAAS,CAAC;EACrD,MAAMC,cAAyB,GAAG,EAAE;EACpCT,qBAAqB,CAACU,IAAI,CAAED,cAAe,CAAC;EAC5C,KAAM,MAAME,OAAO,IAAIR,QAAQ,EAAG;IACjC,IAAKQ,OAAO,KAAKT,YAAY,EAAG;IAEhC,IAAKU,qBAAqB,CAAED,OAAQ,CAAC,EAAG;MACvCA,OAAO,CAACE,YAAY,CAAE,aAAa,EAAE,MAAO,CAAC;MAC7CJ,cAAc,CAACC,IAAI,CAAEC,OAAQ,CAAC;IAC/B;EACD;AACD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,qBAAqBA,CAAED,OAAgB,EAAG;EACzD,MAAMG,IAAI,GAAGH,OAAO,CAACI,YAAY,CAAE,MAAO,CAAC;EAC3C,OAAO,EACNJ,OAAO,CAACK,OAAO,KAAK,QAAQ,IAC5BL,OAAO,CAACM,YAAY,CAAE,aAAc,CAAC,IACrCN,OAAO,CAACM,YAAY,CAAE,WAAY,CAAC,IACjCH,IAAI,IAAIhB,sBAAsB,CAACoB,GAAG,CAAEJ,IAAK,CAAG,CAC9C;AACF;;AAEA;AACA;AACA;AACO,SAASK,UAAUA,CAAA,EAAG;EAC5B,MAAMV,cAAc,GAAGT,qBAAqB,CAACoB,GAAG,CAAC,CAAC;EAClD,IAAK,CAAEX,cAAc,EAAG;EAExB,KAAM,MAAME,OAAO,IAAIF,cAAc,EACpCE,OAAO,CAACU,eAAe,CAAE,aAAc,CAAC;AAC1C"}

package/build/modal/index.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Modal = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _element = require("@wordpress/element");
 var _compose = require("@wordpress/compose");
 var _i18n = require("@wordpress/i18n");
 var _icons = require("@wordpress/icons");
@@ -54,6 +55,7 @@ function UnforwardedModal(props, forwardedRef) {
     contentLabel,
     onKeyDown,
     isFullScreen = false,
+    size,
     headerActions = null,
     __experimentalHideHeader = false
   } = props;
@@ -77,6 +79,12 @@ function UnforwardedModal(props, forwardedRef) {
   const childrenContainerRef = (0, _element.useRef)(null);
   const [hasScrolledContent, setHasScrolledContent] = (0, _element.useState)(false);
   const [hasScrollableContent, setHasScrollableContent] = (0, _element.useState)(false);
+  let sizeClass;
+  if (isFullScreen || size === 'fill') {
+    sizeClass = 'is-full-screen';
+  } else if (size) {
+    sizeClass = `has-size-${size}`;
+  }
 
   // Determines whether the Modal content is scrollable and updates the state.
   const isContentScrollable = (0, _element.useCallback)(() => {
@@ -90,17 +98,19 @@ function UnforwardedModal(props, forwardedRef) {
       setHasScrollableContent(false);
     }
   }, [contentRef]);
+  (0, _element.useEffect)(() => {
+    ariaHelper.modalize(ref.current);
+    return () => ariaHelper.unmodalize();
+  }, []);
   (0, _element.useEffect)(() => {
     openModalCount++;
     if (openModalCount === 1) {
-      ariaHelper.hideApp(ref.current);
       document.body.classList.add(bodyOpenClassName);
     }
     return () => {
       openModalCount--;
       if (openModalCount === 0) {
         document.body.classList.remove(bodyOpenClassName);
-        ariaHelper.showApp();
       }
     };
   }, [bodyOpenClassName]);
@@ -172,17 +182,15 @@ function UnforwardedModal(props, forwardedRef) {
   };
   return (0, _element.createPortal)(
   // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-  (0, _element.createElement)("div", {
+  (0, _react.createElement)("div", {
     ref: (0, _compose.useMergeRefs)([ref, forwardedRef]),
     className: (0, _classnames.default)('components-modal__screen-overlay', overlayClassName),
     onKeyDown: handleEscapeKeyDown,
     ...(shouldCloseOnClickOutside ? overlayPressHandlers : {})
-  }, (0, _element.createElement)(_styleProvider.default, {
+  }, (0, _react.createElement)(_styleProvider.default, {
     document: document
-  }, (0, _element.createElement)("div", {
-    className: (0, _classnames.default)('components-modal__frame', className, {
-      'is-full-screen': isFullScreen
-    }),
+  }, (0, _react.createElement)("div", {
+    className: (0, _classnames.default)('components-modal__frame', sizeClass, className),
     style: style,
     ref: (0, _compose.useMergeRefs)([constrainedTabbingRef, focusReturnRef, focusOnMount !== 'firstContentElement' ? focusOnMountRef : null]),
     role: role,
@@ -192,7 +200,7 @@ function UnforwardedModal(props, forwardedRef) {
     tabIndex: -1,
     ...(shouldCloseOnClickOutside ? focusOutsideProps : {}),
     onKeyDown: onKeyDown
-  }, (0, _element.createElement)("div", {
+  }, (0, _react.createElement)("div", {
     className: (0, _classnames.default)('components-modal__content', {
       'hide-header': __experimentalHideHeader,
       'is-scrollable': hasScrollableContent,
@@ -203,21 +211,21 @@ function UnforwardedModal(props, forwardedRef) {
     ref: contentRef,
     "aria-label": hasScrollableContent ? (0, _i18n.__)('Scrollable section') : undefined,
     tabIndex: hasScrollableContent ? 0 : undefined
-  }, !__experimentalHideHeader && (0, _element.createElement)("div", {
+  }, !__experimentalHideHeader && (0, _react.createElement)("div", {
     className: "components-modal__header"
-  }, (0, _element.createElement)("div", {
+  }, (0, _react.createElement)("div", {
     className: "components-modal__header-heading-container"
-  }, icon && (0, _element.createElement)("span", {
+  }, icon && (0, _react.createElement)("span", {
     className: "components-modal__icon-container",
     "aria-hidden": true
-  }, icon), title && (0, _element.createElement)("h1", {
+  }, icon), title && (0, _react.createElement)("h1", {
     id: headingId,
     className: "components-modal__header-heading"
-  }, title)), headerActions, isDismissible && (0, _element.createElement)(_button.default, {
+  }, title)), headerActions, isDismissible && (0, _react.createElement)(_button.default, {
     onClick: onRequestClose,
     icon: _icons.close,
     label: closeButtonLabel || (0, _i18n.__)('Close')
-  })), (0, _element.createElement)("div", {
+  })), (0, _react.createElement)("div", {
     ref: (0, _compose.useMergeRefs)([childrenContainerRef, focusOnMount === 'firstContentElement' ? focusOnMountRef : null])
   }, children))))), document.body);
 }