@wordpress/components 26.0.1-next.5a1d1283.0 → 26.0.1

package/build/palette-edit/styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["_button","_interopRequireDefault","require","_heading","_hStack","_space","_utils","_view","_inputControl","_inputControlStyles","_circularOptionPicker","_EMOTION_STRINGIFIED_CSS_ERROR__","IndicatorStyled","_base","default","CircularOptionPicker","Option","process","env","NODE_ENV","target","label","space","exports","NameInputControl","InputControl","InputControlContainer","COLORS","gray","CONFIG","controlBorderRadius","Input","InputBackdropUI","PaletteItem","View","surfaceBorderColor","theme","accent","NameContainer","PaletteHeading","Heading","PaletteActionsContainer","PaletteHStackHeader","HStack","PaletteEditStyles","name","styles","map","toString","DoneButton","Button","RemoveButton"],"sources":["@wordpress/components/src/palette-edit/styles.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { Heading } from '../heading';\nimport { HStack } from '../h-stack';\nimport { space } from '../ui/utils/space';\nimport { COLORS, CONFIG } from '../utils';\nimport { View } from '../view';\nimport InputControl from '../input-control';\nimport {\n\tContainer as InputControlContainer,\n\tInput,\n\tBackdropUI as InputBackdropUI,\n} from '../input-control/styles/input-control-styles';\nimport CircularOptionPicker from '../circular-option-picker';\n\nexport const IndicatorStyled = styled( CircularOptionPicker.Option )`\n\twidth: ${ space( 6 ) };\n\theight: ${ space( 6 ) };\n\tpointer-events: none;\n`;\n\nexport const NameInputControl = styled( InputControl )`\n\t${ InputControlContainer } {\n\t\tbackground: ${ COLORS.gray[ 100 ] };\n\t\tborder-radius: ${ CONFIG.controlBorderRadius };\n\t\t${ Input }${ Input }${ Input }${ Input } {\n\t\t\theight: ${ space( 8 ) };\n\t\t}\n\t\t${ InputBackdropUI }${ InputBackdropUI }${ InputBackdropUI } {\n\t\t\tborder-color: transparent;\n\t\t\tbox-shadow: none;\n\t\t}\n\t}\n`;\n\nexport const PaletteItem = styled( View )`\n\tpadding: 3px 0 3px ${ space( 3 ) };\n\tborder: 1px solid ${ CONFIG.surfaceBorderColor };\n\tborder-bottom-color: transparent;\n\t&:first-of-type {\n\t\tborder-top-left-radius: ${ CONFIG.controlBorderRadius };\n\t\tborder-top-right-radius: ${ CONFIG.controlBorderRadius };\n\t}\n\t&:last-of-type {\n\t\tborder-bottom-left-radius: ${ CONFIG.controlBorderRadius };\n\t\tborder-bottom-right-radius: ${ CONFIG.controlBorderRadius };\n\t\tborder-bottom-color: ${ CONFIG.surfaceBorderColor };\n\t}\n\t&.is-selected + & {\n\t\tborder-top-color: transparent;\n\t}\n\t&.is-selected {\n\t\tborder-color: ${ COLORS.theme.accent };\n\t}\n`;\n\nexport const NameContainer = styled.div`\n\tline-height: ${ space( 8 ) };\n\tmargin-left: ${ space( 2 ) };\n\tmargin-right: ${ space( 2 ) };\n\twhite-space: nowrap;\n\toverflow: hidden;\n\t${ PaletteItem }:hover & {\n\t\tcolor: ${ COLORS.theme.accent };\n\t}\n`;\n\nexport const PaletteHeading = styled( Heading )`\n\ttext-transform: uppercase;\n\tline-height: ${ space( 6 ) };\n\tfont-weight: 500;\n\t&&& {\n\t\tfont-size: 11px;\n\t\tmargin-bottom: 0;\n\t}\n`;\n\nexport const PaletteActionsContainer = styled( View )`\n\theight: ${ space( 6 ) };\n\tdisplay: flex;\n`;\n\nexport const PaletteHStackHeader = styled( HStack )`\n\tmargin-bottom: ${ space( 2 ) };\n`;\n\nexport const PaletteEditStyles = styled( View )`\n\t&&& {\n\t\t.components-button.has-icon {\n\t\t\tmin-width: 0;\n\t\t\tpadding: 0;\n\t\t}\n\t}\n`;\n\nexport const DoneButton = styled( Button )`\n\t&& {\n\t\tcolor: ${ COLORS.theme.accent };\n\t}\n`;\n\nexport const RemoveButton = styled( Button )`\n\t&& {\n\t\tmargin-top: ${ space( 1 ) };\n\t}\n`;\n"],"mappings":"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"}
+{"version":3,"names":["_react","require","_button","_interopRequireDefault","_heading","_hStack","_space","_utils","_view","_inputControl","_inputControlStyles","_colorIndicator","_EMOTION_STRINGIFIED_CSS_ERROR__","IndicatorStyled","exports","_base","default","ColorIndicator","process","env","NODE_ENV","target","label","space","NameInputControl","InputControl","InputControlContainer","COLORS","gray","CONFIG","controlBorderRadius","Input","InputBackdropUI","buttonStyleReset","as","css","theme","accent","PaletteItem","View","surfaceBorderColor","font","NameContainer","PaletteHeading","Heading","PaletteActionsContainer","PaletteHStackHeader","HStack","PaletteEditStyles","name","styles","map","toString","DoneButton","Button","RemoveButton"],"sources":["@wordpress/components/src/palette-edit/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport { Heading } from '../heading';\nimport { HStack } from '../h-stack';\nimport { space } from '../utils/space';\nimport { COLORS, CONFIG, font } from '../utils';\nimport { View } from '../view';\nimport InputControl from '../input-control';\nimport {\n\tContainer as InputControlContainer,\n\tInput,\n\tBackdropUI as InputBackdropUI,\n} from '../input-control/styles/input-control-styles';\nimport ColorIndicator from '../color-indicator';\n\nexport const IndicatorStyled = styled( ColorIndicator )`\n\t&& {\n\t\tflex-shrink: 0;\n\t\twidth: ${ space( 6 ) };\n\t\theight: ${ space( 6 ) };\n\t}\n`;\n\nexport const NameInputControl = styled( InputControl )`\n\t${ InputControlContainer } {\n\t\tbackground: ${ COLORS.gray[ 100 ] };\n\t\tborder-radius: ${ CONFIG.controlBorderRadius };\n\t\t${ Input }${ Input }${ Input }${ Input } {\n\t\t\theight: ${ space( 8 ) };\n\t\t}\n\t\t${ InputBackdropUI }${ InputBackdropUI }${ InputBackdropUI } {\n\t\t\tborder-color: transparent;\n\t\t\tbox-shadow: none;\n\t\t}\n\t}\n`;\n\nconst buttonStyleReset = ( {\n\tas,\n}: {\n\tas: React.ComponentProps< typeof View >[ 'as' ];\n} ) => {\n\tif ( as === 'button' ) {\n\t\treturn css`\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\twidth: 100%;\n\t\t\tappearance: none;\n\t\t\tbackground: transparent;\n\t\t\tborder: none;\n\t\t\tborder-radius: 0;\n\t\t\tpadding: 0;\n\t\t\tcursor: pointer;\n\n\t\t\t&:hover {\n\t\t\t\tcolor: ${ COLORS.theme.accent };\n\t\t\t}\n\t\t`;\n\t}\n\treturn null;\n};\n\nexport const PaletteItem = styled( View )`\n\t${ buttonStyleReset }\n\n\tpadding-block: 3px;\n\tpadding-inline-start: ${ space( 3 ) };\n\tborder: 1px solid ${ CONFIG.surfaceBorderColor };\n\tborder-bottom-color: transparent;\n\tfont-size: ${ font( 'default.fontSize' ) };\n\n\t&:focus-visible {\n\t\tborder-color: transparent;\n\t\tbox-shadow: 0 0 0 var( --wp-admin-border-width-focus )\n\t\t\t${ COLORS.theme.accent };\n\t\t// Windows high contrast mode.\n\t\toutline: 2px solid transparent;\n\t\toutline-offset: 0;\n\t}\n\n\tborder-top-left-radius: ${ CONFIG.controlBorderRadius };\n\tborder-top-right-radius: ${ CONFIG.controlBorderRadius };\n\n\t& + & {\n\t\tborder-top-left-radius: 0;\n\t\tborder-top-right-radius: 0;\n\t}\n\n\t&:last-child {\n\t\tborder-bottom-left-radius: ${ CONFIG.controlBorderRadius };\n\t\tborder-bottom-right-radius: ${ CONFIG.controlBorderRadius };\n\t\tborder-bottom-color: ${ CONFIG.surfaceBorderColor };\n\t}\n\n\t&.is-selected + & {\n\t\tborder-top-color: transparent;\n\t}\n\t&.is-selected {\n\t\tborder-color: ${ COLORS.theme.accent };\n\t}\n`;\n\nexport const NameContainer = styled.div`\n\tline-height: ${ space( 8 ) };\n\tmargin-left: ${ space( 2 ) };\n\tmargin-right: ${ space( 2 ) };\n\twhite-space: nowrap;\n\toverflow: hidden;\n`;\n\nexport const PaletteHeading = styled( Heading )`\n\ttext-transform: uppercase;\n\tline-height: ${ space( 6 ) };\n\tfont-weight: 500;\n\t&&& {\n\t\tfont-size: 11px;\n\t\tmargin-bottom: 0;\n\t}\n`;\n\nexport const PaletteActionsContainer = styled( View )`\n\theight: ${ space( 6 ) };\n\tdisplay: flex;\n`;\n\nexport const PaletteHStackHeader = styled( HStack )`\n\tmargin-bottom: ${ space( 2 ) };\n`;\n\nexport const PaletteEditStyles = styled( View )`\n\t&&& {\n\t\t.components-button.has-icon {\n\t\t\tmin-width: 0;\n\t\t\tpadding: 0;\n\t\t}\n\t}\n`;\n\nexport const DoneButton = styled( Button )`\n\t&& {\n\t\tcolor: ${ COLORS.theme.accent };\n\t}\n`;\n\nexport const RemoveButton = styled( Button )`\n\t&& {\n\t\tmargin-top: ${ space( 1 ) };\n\t}\n`;\n"],"mappings":"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"}

package/build/panel/actions.native.js

@@ -5,10 +5,11 @@ 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 _components = require("@wordpress/components");
 var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
 var _actions = _interopRequireDefault(require("./actions.scss"));
 var _bottomSeparatorCover = _interopRequireDefault(require("./bottom-separator-cover"));
 /**
@@ -32,7 +33,7 @@ function PanelActions({
       label,
       onPress
     }) => {
-      return (0, _element.createElement)(_components.TextControl, {
+      return (0, _react.createElement)(_components.TextControl, {
         label: label,
         onPress: onPress,
         labelStyle: _actions.default.defaultLabelStyle,
@@ -40,10 +41,9 @@ function PanelActions({
       });
     });
   }, [actions]);
-  return (0, _element.createElement)(_reactNative.View, {
+  return (0, _react.createElement)(_reactNative.View, {
     style: getStylesFromColorScheme(_actions.default.panelActionsContainer, _actions.default.panelActionsContainerDark)
-  }, mappedActions, (0, _element.createElement)(_bottomSeparatorCover.default, null));
+  }, mappedActions, (0, _react.createElement)(_bottomSeparatorCover.default, null));
 }
-var _default = (0, _compose.withPreferredColorScheme)(PanelActions);
-exports.default = _default;
+var _default = exports.default = (0, _compose.withPreferredColorScheme)(PanelActions);
 //# sourceMappingURL=actions.native.js.map

package/build/panel/actions.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_reactNative","_components","_compose","_actions","_interopRequireDefault","_bottomSeparatorCover","PanelActions","actions","getStylesFromColorScheme","mappedActions","useMemo","map","label","onPress","createElement","TextControl","labelStyle","styles","defaultLabelStyle","key","View","style","panelActionsContainer","panelActionsContainerDark","default","_default","withPreferredColorScheme","exports"],"sources":["@wordpress/components/src/panel/actions.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { TextControl } from '@wordpress/components';\nimport { withPreferredColorScheme } from '@wordpress/compose';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from './actions.scss';\nimport BottomSeparatorCover from './bottom-separator-cover';\n\nfunction PanelActions( { actions, getStylesFromColorScheme } ) {\n\tconst mappedActions = useMemo( () => {\n\t\treturn actions.map( ( { label, onPress } ) => {\n\t\t\treturn (\n\t\t\t\t<TextControl\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tonPress={ onPress }\n\t\t\t\t\tlabelStyle={ styles.defaultLabelStyle }\n\t\t\t\t\tkey={ label }\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ actions ] );\n\n\treturn (\n\t\t<View\n\t\t\tstyle={ getStylesFromColorScheme(\n\t\t\t\tstyles.panelActionsContainer,\n\t\t\t\tstyles.panelActionsContainerDark\n\t\t\t) }\n\t\t>\n\t\t\t{ mappedActions }\n\t\t\t<BottomSeparatorCover />\n\t\t</View>\n\t);\n}\n\nexport default withPreferredColorScheme( PanelActions );\n"],"mappings":";;;;;;;AAUA,IAAAA,QAAA,GAAAC,OAAA;AAPA,IAAAC,YAAA,GAAAD,OAAA;AAKA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAMA,IAAAI,QAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,qBAAA,GAAAD,sBAAA,CAAAL,OAAA;AAhBA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;;AAIA,SAASO,YAAYA,CAAE;EAAEC,OAAO;EAAEC;AAAyB,CAAC,EAAG;EAC9D,MAAMC,aAAa,GAAG,IAAAC,gBAAO,EAAE,MAAM;IACpC,OAAOH,OAAO,CAACI,GAAG,CAAE,CAAE;MAAEC,KAAK;MAAEC;IAAQ,CAAC,KAAM;MAC7C,OACC,IAAAf,QAAA,CAAAgB,aAAA,EAACb,WAAA,CAAAc,WAAW;QACXH,KAAK,EAAGA,KAAO;QACfC,OAAO,EAAGA,OAAS;QACnBG,UAAU,EAAGC,gBAAM,CAACC,iBAAmB;QACvCC,GAAG,EAAGP;MAAO,CACb,CAAC;IAEJ,CAAE,CAAC;EACJ,CAAC,EAAE,CAAEL,OAAO,CAAG,CAAC;EAEhB,OACC,IAAAT,QAAA,CAAAgB,aAAA,EAACd,YAAA,CAAAoB,IAAI;IACJC,KAAK,EAAGb,wBAAwB,CAC/BS,gBAAM,CAACK,qBAAqB,EAC5BL,gBAAM,CAACM,yBACR;EAAG,GAEDd,aAAa,EACf,IAAAX,QAAA,CAAAgB,aAAA,EAACT,qBAAA,CAAAmB,OAAoB,MAAE,CAClB,CAAC;AAET;AAAC,IAAAC,QAAA,GAEc,IAAAC,iCAAwB,EAAEpB,YAAa,CAAC;AAAAqB,OAAA,CAAAH,OAAA,GAAAC,QAAA"}
+{"version":3,"names":["_reactNative","require","_components","_compose","_element","_actions","_interopRequireDefault","_bottomSeparatorCover","PanelActions","actions","getStylesFromColorScheme","mappedActions","useMemo","map","label","onPress","_react","createElement","TextControl","labelStyle","styles","defaultLabelStyle","key","View","style","panelActionsContainer","panelActionsContainerDark","default","_default","exports","withPreferredColorScheme"],"sources":["@wordpress/components/src/panel/actions.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { TextControl } from '@wordpress/components';\nimport { withPreferredColorScheme } from '@wordpress/compose';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from './actions.scss';\nimport BottomSeparatorCover from './bottom-separator-cover';\n\nfunction PanelActions( { actions, getStylesFromColorScheme } ) {\n\tconst mappedActions = useMemo( () => {\n\t\treturn actions.map( ( { label, onPress } ) => {\n\t\t\treturn (\n\t\t\t\t<TextControl\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\tonPress={ onPress }\n\t\t\t\t\tlabelStyle={ styles.defaultLabelStyle }\n\t\t\t\t\tkey={ label }\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\t}, [ actions ] );\n\n\treturn (\n\t\t<View\n\t\t\tstyle={ getStylesFromColorScheme(\n\t\t\t\tstyles.panelActionsContainer,\n\t\t\t\tstyles.panelActionsContainerDark\n\t\t\t) }\n\t\t>\n\t\t\t{ mappedActions }\n\t\t\t<BottomSeparatorCover />\n\t\t</View>\n\t);\n}\n\nexport default withPreferredColorScheme( PanelActions );\n"],"mappings":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAKA,IAAAI,QAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,qBAAA,GAAAD,sBAAA,CAAAL,OAAA;AAhBA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;;AAIA,SAASO,YAAYA,CAAE;EAAEC,OAAO;EAAEC;AAAyB,CAAC,EAAG;EAC9D,MAAMC,aAAa,GAAG,IAAAC,gBAAO,EAAE,MAAM;IACpC,OAAOH,OAAO,CAACI,GAAG,CAAE,CAAE;MAAEC,KAAK;MAAEC;IAAQ,CAAC,KAAM;MAC7C,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACf,WAAA,CAAAgB,WAAW;QACXJ,KAAK,EAAGA,KAAO;QACfC,OAAO,EAAGA,OAAS;QACnBI,UAAU,EAAGC,gBAAM,CAACC,iBAAmB;QACvCC,GAAG,EAAGR;MAAO,CACb,CAAC;IAEJ,CAAE,CAAC;EACJ,CAAC,EAAE,CAAEL,OAAO,CAAG,CAAC;EAEhB,OACC,IAAAO,MAAA,CAAAC,aAAA,EAACjB,YAAA,CAAAuB,IAAI;IACJC,KAAK,EAAGd,wBAAwB,CAC/BU,gBAAM,CAACK,qBAAqB,EAC5BL,gBAAM,CAACM,yBACR;EAAG,GAEDf,aAAa,EACf,IAAAK,MAAA,CAAAC,aAAA,EAACV,qBAAA,CAAAoB,OAAoB,MAAE,CAClB,CAAC;AAET;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAEc,IAAAG,iCAAwB,EAAEtB,YAAa,CAAC"}

package/build/panel/body.js

@@ -7,9 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.PanelBody = void 0;
 exports.UnforwardedPanelBody = UnforwardedPanelBody;
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
 var _icons = require("@wordpress/icons");
 var _button = _interopRequireDefault(require("../button"));
 var _icon = _interopRequireDefault(require("../icon"));
@@ -72,10 +73,10 @@ function UnforwardedPanelBody(props, ref) {
   const classes = (0, _classnames.default)('components-panel__body', className, {
     'is-opened': isOpened
   });
-  return (0, _element.createElement)("div", {
+  return (0, _react.createElement)("div", {
     className: classes,
     ref: (0, _compose.useMergeRefs)([nodeRef, ref])
-  }, (0, _element.createElement)(PanelBodyTitle, {
+  }, (0, _react.createElement)(PanelBodyTitle, {
     icon: icon,
     isOpened: Boolean(isOpened),
     onClick: handleOnToggle,
@@ -92,26 +93,24 @@ const PanelBodyTitle = (0, _element.forwardRef)(({
   ...props
 }, ref) => {
   if (!title) return null;
-  return (0, _element.createElement)("h2", {
+  return (0, _react.createElement)("h2", {
     className: "components-panel__body-title"
-  }, (0, _element.createElement)(_button.default, {
+  }, (0, _react.createElement)(_button.default, {
     className: "components-panel__body-toggle",
     "aria-expanded": isOpened,
     ref: ref,
     ...props
-  }, (0, _element.createElement)("span", {
+  }, (0, _react.createElement)("span", {
     "aria-hidden": "true"
-  }, (0, _element.createElement)(_icon.default, {
+  }, (0, _react.createElement)(_icon.default, {
     className: "components-panel__arrow",
     icon: isOpened ? _icons.chevronUp : _icons.chevronDown
-  })), title, icon && (0, _element.createElement)(_icon.default, {
+  })), title, icon && (0, _react.createElement)(_icon.default, {
     icon: icon,
     className: "components-panel__icon",
     size: 20
   })));
 });
-const PanelBody = (0, _element.forwardRef)(UnforwardedPanelBody);
-exports.PanelBody = PanelBody;
-var _default = PanelBody;
-exports.default = _default;
+const PanelBody = exports.PanelBody = (0, _element.forwardRef)(UnforwardedPanelBody);
+var _default = exports.default = PanelBody;
 //# sourceMappingURL=body.js.map

package/build/panel/body.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_classnames","_interopRequireDefault","_compose","_icons","_button","_icon","_utils","noop","UnforwardedPanelBody","props","ref","buttonProps","children","className","icon","initialOpen","onToggle","opened","title","scrollAfterOpen","isOpened","setIsOpened","useControlledState","initial","undefined","fallback","nodeRef","useRef","scrollBehavior","useReducedMotion","handleOnToggle","event","preventDefault","next","scrollAfterOpenRef","current","useUpdateEffect","scrollIntoView","inline","block","behavior","classes","classnames","createElement","useMergeRefs","PanelBodyTitle","Boolean","onClick","forwardRef","default","chevronUp","chevronDown","size","PanelBody","exports","_default"],"sources":["@wordpress/components/src/panel/body.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useReducedMotion, useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { chevronUp, chevronDown } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { PanelBodyProps, PanelBodyTitleProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\nimport Button from '../button';\nimport Icon from '../icon';\nimport { useControlledState, useUpdateEffect } from '../utils';\n\nconst noop = () => {};\n\nexport function UnforwardedPanelBody(\n\tprops: PanelBodyProps,\n\tref: React.ForwardedRef< HTMLDivElement >\n) {\n\tconst {\n\t\tbuttonProps = {},\n\t\tchildren,\n\t\tclassName,\n\t\ticon,\n\t\tinitialOpen,\n\t\tonToggle = noop,\n\t\topened,\n\t\ttitle,\n\t\tscrollAfterOpen = true,\n\t} = props;\n\tconst [ isOpened, setIsOpened ] = useControlledState< boolean | undefined >(\n\t\topened,\n\t\t{\n\t\t\tinitial: initialOpen === undefined ? true : initialOpen,\n\t\t\tfallback: false,\n\t\t}\n\t);\n\tconst nodeRef = useRef< HTMLElement >( null );\n\n\t// Defaults to 'smooth' scrolling\n\t// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView\n\tconst scrollBehavior = useReducedMotion() ? 'auto' : 'smooth';\n\n\tconst handleOnToggle = ( event: React.MouseEvent ) => {\n\t\tevent.preventDefault();\n\t\tconst next = ! isOpened;\n\t\tsetIsOpened( next );\n\t\tonToggle( next );\n\t};\n\n\t// Ref is used so that the effect does not re-run upon scrollAfterOpen changing value.\n\tconst scrollAfterOpenRef = useRef< boolean | undefined >();\n\tscrollAfterOpenRef.current = scrollAfterOpen;\n\t// Runs after initial render.\n\tuseUpdateEffect( () => {\n\t\tif (\n\t\t\tisOpened &&\n\t\t\tscrollAfterOpenRef.current &&\n\t\t\tnodeRef.current?.scrollIntoView\n\t\t) {\n\t\t\t/*\n\t\t\t * Scrolls the content into view when visible.\n\t\t\t * This improves the UX when there are multiple stacking <PanelBody />\n\t\t\t * components in a scrollable container.\n\t\t\t */\n\t\t\tnodeRef.current.scrollIntoView( {\n\t\t\t\tinline: 'nearest',\n\t\t\t\tblock: 'nearest',\n\t\t\t\tbehavior: scrollBehavior,\n\t\t\t} );\n\t\t}\n\t}, [ isOpened, scrollBehavior ] );\n\n\tconst classes = classnames( 'components-panel__body', className, {\n\t\t'is-opened': isOpened,\n\t} );\n\n\treturn (\n\t\t<div className={ classes } ref={ useMergeRefs( [ nodeRef, ref ] ) }>\n\t\t\t<PanelBodyTitle\n\t\t\t\ticon={ icon }\n\t\t\t\tisOpened={ Boolean( isOpened ) }\n\t\t\t\tonClick={ handleOnToggle }\n\t\t\t\ttitle={ title }\n\t\t\t\t{ ...buttonProps }\n\t\t\t/>\n\t\t\t{ typeof children === 'function'\n\t\t\t\t? children( { opened: Boolean( isOpened ) } )\n\t\t\t\t: isOpened && children }\n\t\t</div>\n\t);\n}\n\nconst PanelBodyTitle = forwardRef(\n\t(\n\t\t{\n\t\t\tisOpened,\n\t\t\ticon,\n\t\t\ttitle,\n\t\t\t...props\n\t\t}: WordPressComponentProps< PanelBodyTitleProps, 'button' >,\n\t\tref: React.ForwardedRef< any >\n\t) => {\n\t\tif ( ! title ) return null;\n\n\t\treturn (\n\t\t\t<h2 className=\"components-panel__body-title\">\n\t\t\t\t<Button\n\t\t\t\t\tclassName=\"components-panel__body-toggle\"\n\t\t\t\t\taria-expanded={ isOpened }\n\t\t\t\t\tref={ ref }\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t{ /*\n\t\t\t\t\tFirefox + NVDA don't announce aria-expanded because the browser\n\t\t\t\t\trepaints the whole element, so this wrapping span hides that.\n\t\t\t\t*/ }\n\t\t\t\t\t<span aria-hidden=\"true\">\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclassName=\"components-panel__arrow\"\n\t\t\t\t\t\t\ticon={ isOpened ? chevronUp : chevronDown }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</span>\n\t\t\t\t\t{ title }\n\t\t\t\t\t{ icon && (\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\tclassName=\"components-panel__icon\"\n\t\t\t\t\t\t\tsize={ 20 }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Button>\n\t\t\t</h2>\n\t\t);\n\t}\n);\n\nexport const PanelBody = forwardRef( UnforwardedPanelBody );\n\nexport default PanelBody;\n"],"mappings":"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"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_compose","_element","_icons","_button","_icon","_utils","noop","UnforwardedPanelBody","props","ref","buttonProps","children","className","icon","initialOpen","onToggle","opened","title","scrollAfterOpen","isOpened","setIsOpened","useControlledState","initial","undefined","fallback","nodeRef","useRef","scrollBehavior","useReducedMotion","handleOnToggle","event","preventDefault","next","scrollAfterOpenRef","current","useUpdateEffect","scrollIntoView","inline","block","behavior","classes","classnames","_react","createElement","useMergeRefs","PanelBodyTitle","Boolean","onClick","forwardRef","default","chevronUp","chevronDown","size","PanelBody","exports","_default"],"sources":["@wordpress/components/src/panel/body.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useReducedMotion, useMergeRefs } from '@wordpress/compose';\nimport { forwardRef, useRef } from '@wordpress/element';\nimport { chevronUp, chevronDown } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport type { PanelBodyProps, PanelBodyTitleProps } from './types';\nimport type { WordPressComponentProps } from '../context';\nimport Button from '../button';\nimport Icon from '../icon';\nimport { useControlledState, useUpdateEffect } from '../utils';\n\nconst noop = () => {};\n\nexport function UnforwardedPanelBody(\n\tprops: PanelBodyProps,\n\tref: React.ForwardedRef< HTMLDivElement >\n) {\n\tconst {\n\t\tbuttonProps = {},\n\t\tchildren,\n\t\tclassName,\n\t\ticon,\n\t\tinitialOpen,\n\t\tonToggle = noop,\n\t\topened,\n\t\ttitle,\n\t\tscrollAfterOpen = true,\n\t} = props;\n\tconst [ isOpened, setIsOpened ] = useControlledState< boolean | undefined >(\n\t\topened,\n\t\t{\n\t\t\tinitial: initialOpen === undefined ? true : initialOpen,\n\t\t\tfallback: false,\n\t\t}\n\t);\n\tconst nodeRef = useRef< HTMLElement >( null );\n\n\t// Defaults to 'smooth' scrolling\n\t// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView\n\tconst scrollBehavior = useReducedMotion() ? 'auto' : 'smooth';\n\n\tconst handleOnToggle = ( event: React.MouseEvent ) => {\n\t\tevent.preventDefault();\n\t\tconst next = ! isOpened;\n\t\tsetIsOpened( next );\n\t\tonToggle( next );\n\t};\n\n\t// Ref is used so that the effect does not re-run upon scrollAfterOpen changing value.\n\tconst scrollAfterOpenRef = useRef< boolean | undefined >();\n\tscrollAfterOpenRef.current = scrollAfterOpen;\n\t// Runs after initial render.\n\tuseUpdateEffect( () => {\n\t\tif (\n\t\t\tisOpened &&\n\t\t\tscrollAfterOpenRef.current &&\n\t\t\tnodeRef.current?.scrollIntoView\n\t\t) {\n\t\t\t/*\n\t\t\t * Scrolls the content into view when visible.\n\t\t\t * This improves the UX when there are multiple stacking <PanelBody />\n\t\t\t * components in a scrollable container.\n\t\t\t */\n\t\t\tnodeRef.current.scrollIntoView( {\n\t\t\t\tinline: 'nearest',\n\t\t\t\tblock: 'nearest',\n\t\t\t\tbehavior: scrollBehavior,\n\t\t\t} );\n\t\t}\n\t}, [ isOpened, scrollBehavior ] );\n\n\tconst classes = classnames( 'components-panel__body', className, {\n\t\t'is-opened': isOpened,\n\t} );\n\n\treturn (\n\t\t<div className={ classes } ref={ useMergeRefs( [ nodeRef, ref ] ) }>\n\t\t\t<PanelBodyTitle\n\t\t\t\ticon={ icon }\n\t\t\t\tisOpened={ Boolean( isOpened ) }\n\t\t\t\tonClick={ handleOnToggle }\n\t\t\t\ttitle={ title }\n\t\t\t\t{ ...buttonProps }\n\t\t\t/>\n\t\t\t{ typeof children === 'function'\n\t\t\t\t? children( { opened: Boolean( isOpened ) } )\n\t\t\t\t: isOpened && children }\n\t\t</div>\n\t);\n}\n\nconst PanelBodyTitle = forwardRef(\n\t(\n\t\t{\n\t\t\tisOpened,\n\t\t\ticon,\n\t\t\ttitle,\n\t\t\t...props\n\t\t}: WordPressComponentProps< PanelBodyTitleProps, 'button' >,\n\t\tref: React.ForwardedRef< any >\n\t) => {\n\t\tif ( ! title ) return null;\n\n\t\treturn (\n\t\t\t<h2 className=\"components-panel__body-title\">\n\t\t\t\t<Button\n\t\t\t\t\tclassName=\"components-panel__body-toggle\"\n\t\t\t\t\taria-expanded={ isOpened }\n\t\t\t\t\tref={ ref }\n\t\t\t\t\t{ ...props }\n\t\t\t\t>\n\t\t\t\t\t{ /*\n\t\t\t\t\tFirefox + NVDA don't announce aria-expanded because the browser\n\t\t\t\t\trepaints the whole element, so this wrapping span hides that.\n\t\t\t\t*/ }\n\t\t\t\t\t<span aria-hidden=\"true\">\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclassName=\"components-panel__arrow\"\n\t\t\t\t\t\t\ticon={ isOpened ? chevronUp : chevronDown }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</span>\n\t\t\t\t\t{ title }\n\t\t\t\t\t{ icon && (\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\tclassName=\"components-panel__icon\"\n\t\t\t\t\t\t\tsize={ 20 }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</Button>\n\t\t\t</h2>\n\t\t);\n\t}\n);\n\nexport const PanelBody = forwardRef( UnforwardedPanelBody );\n\nexport default PanelBody;\n"],"mappings":"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"}

package/build/panel/body.native.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PanelBody = PanelBody;
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _reactNative = require("react-native");
 var _body = _interopRequireDefault(require("./body.scss"));
 var _bottomSeparatorCover = _interopRequireDefault(require("./bottom-separator-cover"));
@@ -24,13 +24,12 @@ function PanelBody({
   style,
   titleStyle = {}
 }) {
-  return (0, _element.createElement)(_reactNative.View, {
+  return (0, _react.createElement)(_reactNative.View, {
     style: [_body.default.panelContainer, style]
-  }, title && (0, _element.createElement)(_reactNative.Text, {
+  }, title && (0, _react.createElement)(_reactNative.Text, {
     accessibilityRole: "header",
     style: [_body.default.sectionHeaderText, titleStyle]
-  }, title), children, (0, _element.createElement)(_bottomSeparatorCover.default, null));
+  }, title), children, (0, _react.createElement)(_bottomSeparatorCover.default, null));
 }
-var _default = PanelBody;
-exports.default = _default;
+var _default = exports.default = PanelBody;
 //# sourceMappingURL=body.native.js.map

package/build/panel/body.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_body","_interopRequireDefault","_bottomSeparatorCover","PanelBody","children","title","style","titleStyle","_element","createElement","View","styles","panelContainer","Text","accessibilityRole","sectionHeaderText","default","_default","exports"],"sources":["@wordpress/components/src/panel/body.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Text, View } from 'react-native';\n\n/**\n * Internal dependencies\n */\nimport styles from './body.scss';\nimport BottomSeparatorCover from './bottom-separator-cover';\n\nexport function PanelBody( { children, title, style, titleStyle = {} } ) {\n\treturn (\n\t\t<View style={ [ styles.panelContainer, style ] }>\n\t\t\t{ title && (\n\t\t\t\t<Text\n\t\t\t\t\taccessibilityRole=\"header\"\n\t\t\t\t\tstyle={ [ styles.sectionHeaderText, titleStyle ] }\n\t\t\t\t>\n\t\t\t\t\t{ title }\n\t\t\t\t</Text>\n\t\t\t) }\n\t\t\t{ children }\n\t\t\t<BottomSeparatorCover />\n\t\t</View>\n\t);\n}\n\nexport default PanelBody;\n"],"mappings":";;;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,qBAAA,GAAAD,sBAAA,CAAAF,OAAA;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAIO,SAASI,SAASA,CAAE;EAAEC,QAAQ;EAAEC,KAAK;EAAEC,KAAK;EAAEC,UAAU,GAAG,CAAC;AAAE,CAAC,EAAG;EACxE,OACC,IAAAC,QAAA,CAAAC,aAAA,EAACX,YAAA,CAAAY,IAAI;IAACJ,KAAK,EAAG,CAAEK,aAAM,CAACC,cAAc,EAAEN,KAAK;EAAI,GAC7CD,KAAK,IACN,IAAAG,QAAA,CAAAC,aAAA,EAACX,YAAA,CAAAe,IAAI;IACJC,iBAAiB,EAAC,QAAQ;IAC1BR,KAAK,EAAG,CAAEK,aAAM,CAACI,iBAAiB,EAAER,UAAU;EAAI,GAEhDF,KACG,CACN,EACCD,QAAQ,EACV,IAAAI,QAAA,CAAAC,aAAA,EAACP,qBAAA,CAAAc,OAAoB,MAAE,CAClB,CAAC;AAET;AAAC,IAAAC,QAAA,GAEcd,SAAS;AAAAe,OAAA,CAAAF,OAAA,GAAAC,QAAA"}
+{"version":3,"names":["_reactNative","require","_body","_interopRequireDefault","_bottomSeparatorCover","PanelBody","children","title","style","titleStyle","_react","createElement","View","styles","panelContainer","Text","accessibilityRole","sectionHeaderText","default","_default","exports"],"sources":["@wordpress/components/src/panel/body.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { Text, View } from 'react-native';\n\n/**\n * Internal dependencies\n */\nimport styles from './body.scss';\nimport BottomSeparatorCover from './bottom-separator-cover';\n\nexport function PanelBody( { children, title, style, titleStyle = {} } ) {\n\treturn (\n\t\t<View style={ [ styles.panelContainer, style ] }>\n\t\t\t{ title && (\n\t\t\t\t<Text\n\t\t\t\t\taccessibilityRole=\"header\"\n\t\t\t\t\tstyle={ [ styles.sectionHeaderText, titleStyle ] }\n\t\t\t\t>\n\t\t\t\t\t{ title }\n\t\t\t\t</Text>\n\t\t\t) }\n\t\t\t{ children }\n\t\t\t<BottomSeparatorCover />\n\t\t</View>\n\t);\n}\n\nexport default PanelBody;\n"],"mappings":";;;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,qBAAA,GAAAD,sBAAA,CAAAF,OAAA;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAIO,SAASI,SAASA,CAAE;EAAEC,QAAQ;EAAEC,KAAK;EAAEC,KAAK;EAAEC,UAAU,GAAG,CAAC;AAAE,CAAC,EAAG;EACxE,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACX,YAAA,CAAAY,IAAI;IAACJ,KAAK,EAAG,CAAEK,aAAM,CAACC,cAAc,EAAEN,KAAK;EAAI,GAC7CD,KAAK,IACN,IAAAG,MAAA,CAAAC,aAAA,EAACX,YAAA,CAAAe,IAAI;IACJC,iBAAiB,EAAC,QAAQ;IAC1BR,KAAK,EAAG,CAAEK,aAAM,CAACI,iBAAiB,EAAER,UAAU;EAAI,GAEhDF,KACG,CACN,EACCD,QAAQ,EACV,IAAAI,MAAA,CAAAC,aAAA,EAACP,qBAAA,CAAAc,OAAoB,MAAE,CAClB,CAAC;AAET;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAEcb,SAAS"}

package/build/panel/bottom-separator-cover.native.js

@@ -5,7 +5,7 @@ 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 _compose = require("@wordpress/compose");
 var _bottomSeparatorCover = _interopRequireDefault(require("./bottom-separator-cover.scss"));
@@ -24,10 +24,9 @@ var _bottomSeparatorCover = _interopRequireDefault(require("./bottom-separator-c
 function BottomSeparatorCover({
   getStylesFromColorScheme
 }) {
-  return (0, _element.createElement)(_reactNative.View, {
+  return (0, _react.createElement)(_reactNative.View, {
     style: getStylesFromColorScheme(_bottomSeparatorCover.default.coverSeparator, _bottomSeparatorCover.default.coverSeparatorDark)
   });
 }
-var _default = (0, _compose.withPreferredColorScheme)(BottomSeparatorCover);
-exports.default = _default;
+var _default = exports.default = (0, _compose.withPreferredColorScheme)(BottomSeparatorCover);
 //# sourceMappingURL=bottom-separator-cover.native.js.map

package/build/panel/bottom-separator-cover.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["_reactNative","require","_compose","_bottomSeparatorCover","_interopRequireDefault","BottomSeparatorCover","getStylesFromColorScheme","_element","createElement","View","style","styles","coverSeparator","coverSeparatorDark","_default","withPreferredColorScheme","exports","default"],"sources":["@wordpress/components/src/panel/bottom-separator-cover.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { withPreferredColorScheme } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './bottom-separator-cover.scss';\n\nfunction BottomSeparatorCover( { getStylesFromColorScheme } ) {\n\treturn (\n\t\t<View\n\t\t\tstyle={ getStylesFromColorScheme(\n\t\t\t\tstyles.coverSeparator,\n\t\t\t\tstyles.coverSeparatorDark\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nexport default withPreferredColorScheme( BottomSeparatorCover );\n"],"mappings":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,qBAAA,GAAAC,sBAAA,CAAAH,OAAA;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA,SAASI,oBAAoBA,CAAE;EAAEC;AAAyB,CAAC,EAAG;EAC7D,OACC,IAAAC,QAAA,CAAAC,aAAA,EAACR,YAAA,CAAAS,IAAI;IACJC,KAAK,EAAGJ,wBAAwB,CAC/BK,6BAAM,CAACC,cAAc,EACrBD,6BAAM,CAACE,kBACR;EAAG,CACH,CAAC;AAEJ;AAAC,IAAAC,QAAA,GAEc,IAAAC,iCAAwB,EAAEV,oBAAqB,CAAC;AAAAW,OAAA,CAAAC,OAAA,GAAAH,QAAA"}
+{"version":3,"names":["_reactNative","require","_compose","_bottomSeparatorCover","_interopRequireDefault","BottomSeparatorCover","getStylesFromColorScheme","_react","createElement","View","style","styles","coverSeparator","coverSeparatorDark","_default","exports","default","withPreferredColorScheme"],"sources":["@wordpress/components/src/panel/bottom-separator-cover.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { withPreferredColorScheme } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './bottom-separator-cover.scss';\n\nfunction BottomSeparatorCover( { getStylesFromColorScheme } ) {\n\treturn (\n\t\t<View\n\t\t\tstyle={ getStylesFromColorScheme(\n\t\t\t\tstyles.coverSeparator,\n\t\t\t\tstyles.coverSeparatorDark\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nexport default withPreferredColorScheme( BottomSeparatorCover );\n"],"mappings":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,qBAAA,GAAAC,sBAAA,CAAAH,OAAA;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA,SAASI,oBAAoBA,CAAE;EAAEC;AAAyB,CAAC,EAAG;EAC7D,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACR,YAAA,CAAAS,IAAI;IACJC,KAAK,EAAGJ,wBAAwB,CAC/BK,6BAAM,CAACC,cAAc,EACrBD,6BAAM,CAACE,kBACR;EAAG,CACH,CAAC;AAEJ;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc,IAAAC,iCAAwB,EAAEZ,oBAAqB,CAAC"}

package/build/panel/header.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 /**
  * Internal dependencies
  */
@@ -18,10 +18,9 @@ function PanelHeader({
   label,
   children
 }) {
-  return (0, _element.createElement)("div", {
+  return (0, _react.createElement)("div", {
     className: "components-panel__header"
-  }, label && (0, _element.createElement)("h2", null, label), children);
+  }, label && (0, _react.createElement)("h2", null, label), children);
 }
-var _default = PanelHeader;
-exports.default = _default;
+var _default = exports.default = PanelHeader;
 //# sourceMappingURL=header.js.map

package/build/panel/header.js.map

@@ -1 +1 @@
-{"version":3,"names":["PanelHeader","label","children","_element","createElement","className","_default","exports","default"],"sources":["@wordpress/components/src/panel/header.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { PanelHeaderProps } from './types';\n\n/**\n * `PanelHeader` renders the header for the `Panel`.\n * This is used by the `Panel` component under the hood,\n * so it does not typically need to be used.\n */\nfunction PanelHeader( { label, children }: PanelHeaderProps ) {\n\treturn (\n\t\t<div className=\"components-panel__header\">\n\t\t\t{ label && <h2>{ label }</h2> }\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\nexport default PanelHeader;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA,SAASA,WAAWA,CAAE;EAAEC,KAAK;EAAEC;AAA2B,CAAC,EAAG;EAC7D,OACC,IAAAC,QAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAA0B,GACtCJ,KAAK,IAAI,IAAAE,QAAA,CAAAC,aAAA,cAAMH,KAAW,CAAC,EAC3BC,QACE,CAAC;AAER;AAAC,IAAAI,QAAA,GAEcN,WAAW;AAAAO,OAAA,CAAAC,OAAA,GAAAF,QAAA"}
+{"version":3,"names":["PanelHeader","label","children","_react","createElement","className","_default","exports","default"],"sources":["@wordpress/components/src/panel/header.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { PanelHeaderProps } from './types';\n\n/**\n * `PanelHeader` renders the header for the `Panel`.\n * This is used by the `Panel` component under the hood,\n * so it does not typically need to be used.\n */\nfunction PanelHeader( { label, children }: PanelHeaderProps ) {\n\treturn (\n\t\t<div className=\"components-panel__header\">\n\t\t\t{ label && <h2>{ label }</h2> }\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\nexport default PanelHeader;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA,SAASA,WAAWA,CAAE;EAAEC,KAAK;EAAEC;AAA2B,CAAC,EAAG;EAC7D,OACC,IAAAC,MAAA,CAAAC,aAAA;IAAKC,SAAS,EAAC;EAA0B,GACtCJ,KAAK,IAAI,IAAAE,MAAA,CAAAC,aAAA,cAAMH,KAAW,CAAC,EAC3BC,QACE,CAAC;AAER;AAAC,IAAAI,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcR,WAAW"}

package/build/panel/index.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Panel = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _element = require("@wordpress/element");
 var _header = _interopRequireDefault(require("./header"));
 /**
  * External dependencies
@@ -26,10 +27,10 @@ function UnforwardedPanel({
   children
 }, ref) {
   const classNames = (0, _classnames.default)(className, 'components-panel');
-  return (0, _element.createElement)("div", {
+  return (0, _react.createElement)("div", {
     className: classNames,
     ref: ref
-  }, header && (0, _element.createElement)(_header.default, {
+  }, header && (0, _react.createElement)(_header.default, {
     label: header
   }), children);
 }
@@ -50,8 +51,6 @@ function UnforwardedPanel({
  * );
  * ```
  */
-const Panel = (0, _element.forwardRef)(UnforwardedPanel);
-exports.Panel = Panel;
-var _default = Panel;
-exports.default = _default;
+const Panel = exports.Panel = (0, _element.forwardRef)(UnforwardedPanel);
+var _default = exports.default = Panel;
 //# sourceMappingURL=index.js.map

package/build/panel/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_classnames","_interopRequireDefault","_header","UnforwardedPanel","header","className","children","ref","classNames","classnames","createElement","default","label","Panel","forwardRef","exports","_default"],"sources":["@wordpress/components/src/panel/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport PanelHeader from './header';\nimport type { PanelProps } from './types';\n\nfunction UnforwardedPanel(\n\t{ header, className, children }: PanelProps,\n\tref: React.ForwardedRef< HTMLDivElement >\n) {\n\tconst classNames = classnames( className, 'components-panel' );\n\treturn (\n\t\t<div className={ classNames } ref={ ref }>\n\t\t\t{ header && <PanelHeader label={ header } /> }\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\n/**\n * `Panel` expands and collapses multiple sections of content.\n *\n * ```jsx\n * import { Panel, PanelBody, PanelRow } from '@wordpress/components';\n * import { more } from '@wordpress/icons';\n *\n * const MyPanel = () => (\n * \t<Panel header=\"My Panel\">\n * \t\t<PanelBody title=\"My Block Settings\" icon={ more } initialOpen={ true }>\n * \t\t\t<PanelRow>My Panel Inputs and Labels</PanelRow>\n * \t\t</PanelBody>\n * \t</Panel>\n * );\n * ```\n */\nexport const Panel = forwardRef( UnforwardedPanel );\n\nexport default Panel;\n"],"mappings":";;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AALA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AAUA,IAAAG,OAAA,GAAAD,sBAAA,CAAAF,OAAA;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAIA,SAASI,gBAAgBA,CACxB;EAAEC,MAAM;EAAEC,SAAS;EAAEC;AAAqB,CAAC,EAC3CC,GAAyC,EACxC;EACD,MAAMC,UAAU,GAAG,IAAAC,mBAAU,EAAEJ,SAAS,EAAE,kBAAmB,CAAC;EAC9D,OACC,IAAAP,QAAA,CAAAY,aAAA;IAAKL,SAAS,EAAGG,UAAY;IAACD,GAAG,EAAGA;EAAK,GACtCH,MAAM,IAAI,IAAAN,QAAA,CAAAY,aAAA,EAACR,OAAA,CAAAS,OAAW;IAACC,KAAK,EAAGR;EAAQ,CAAE,CAAC,EAC1CE,QACE,CAAC;AAER;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMO,KAAK,GAAG,IAAAC,mBAAU,EAAEX,gBAAiB,CAAC;AAACY,OAAA,CAAAF,KAAA,GAAAA,KAAA;AAAA,IAAAG,QAAA,GAErCH,KAAK;AAAAE,OAAA,CAAAJ,OAAA,GAAAK,QAAA"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_element","_header","UnforwardedPanel","header","className","children","ref","classNames","classnames","_react","createElement","default","label","Panel","exports","forwardRef","_default"],"sources":["@wordpress/components/src/panel/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport PanelHeader from './header';\nimport type { PanelProps } from './types';\n\nfunction UnforwardedPanel(\n\t{ header, className, children }: PanelProps,\n\tref: React.ForwardedRef< HTMLDivElement >\n) {\n\tconst classNames = classnames( className, 'components-panel' );\n\treturn (\n\t\t<div className={ classNames } ref={ ref }>\n\t\t\t{ header && <PanelHeader label={ header } /> }\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\n/**\n * `Panel` expands and collapses multiple sections of content.\n *\n * ```jsx\n * import { Panel, PanelBody, PanelRow } from '@wordpress/components';\n * import { more } from '@wordpress/icons';\n *\n * const MyPanel = () => (\n * \t<Panel header=\"My Panel\">\n * \t\t<PanelBody title=\"My Block Settings\" icon={ more } initialOpen={ true }>\n * \t\t\t<PanelRow>My Panel Inputs and Labels</PanelRow>\n * \t\t</PanelBody>\n * \t</Panel>\n * );\n * ```\n */\nexport const Panel = forwardRef( UnforwardedPanel );\n\nexport default Panel;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,OAAA,GAAAH,sBAAA,CAAAC,OAAA;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAIA,SAASG,gBAAgBA,CACxB;EAAEC,MAAM;EAAEC,SAAS;EAAEC;AAAqB,CAAC,EAC3CC,GAAyC,EACxC;EACD,MAAMC,UAAU,GAAG,IAAAC,mBAAU,EAAEJ,SAAS,EAAE,kBAAmB,CAAC;EAC9D,OACC,IAAAK,MAAA,CAAAC,aAAA;IAAKN,SAAS,EAAGG,UAAY;IAACD,GAAG,EAAGA;EAAK,GACtCH,MAAM,IAAI,IAAAM,MAAA,CAAAC,aAAA,EAACT,OAAA,CAAAU,OAAW;IAACC,KAAK,EAAGT;EAAQ,CAAE,CAAC,EAC1CE,QACE,CAAC;AAER;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMQ,KAAK,GAAAC,OAAA,CAAAD,KAAA,GAAG,IAAAE,mBAAU,EAAEb,gBAAiB,CAAC;AAAC,IAAAc,QAAA,GAAAF,OAAA,CAAAH,OAAA,GAErCE,KAAK"}

package/build/panel/row.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.PanelRow = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _element = require("@wordpress/element");
 /**
  * External dependencies
  */
@@ -19,7 +20,7 @@ function UnforwardedPanelRow({
   className,
   children
 }, ref) {
-  return (0, _element.createElement)("div", {
+  return (0, _react.createElement)("div", {
     className: (0, _classnames.default)('components-panel__row', className),
     ref: ref
   }, children);
@@ -29,8 +30,6 @@ function UnforwardedPanelRow({
  * `PanelRow` is a generic container for rows within a `PanelBody`.
  * It is a flex container with a top margin for spacing.
  */
-const PanelRow = (0, _element.forwardRef)(UnforwardedPanelRow);
-exports.PanelRow = PanelRow;
-var _default = PanelRow;
-exports.default = _default;
+const PanelRow = exports.PanelRow = (0, _element.forwardRef)(UnforwardedPanelRow);
+var _default = exports.default = PanelRow;
 //# sourceMappingURL=row.js.map

package/build/panel/row.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_classnames","_interopRequireDefault","UnforwardedPanelRow","className","children","ref","createElement","classnames","PanelRow","forwardRef","exports","_default","default"],"sources":["@wordpress/components/src/panel/row.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { PanelRowProps } from './types';\n\nfunction UnforwardedPanelRow(\n\t{ className, children }: PanelRowProps,\n\tref: ForwardedRef< HTMLDivElement >\n) {\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames( 'components-panel__row', className ) }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\n/**\n * `PanelRow` is a generic container for rows within a `PanelBody`.\n * It is a flex container with a top margin for spacing.\n */\nexport const PanelRow = forwardRef( UnforwardedPanelRow );\n\nexport default PanelRow;\n"],"mappings":";;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AALA,IAAAC,WAAA,GAAAC,sBAAA,CAAAF,OAAA;AAHA;AACA;AACA;;AAGA;AACA;AACA;;AASA,SAASG,mBAAmBA,CAC3B;EAAEC,SAAS;EAAEC;AAAwB,CAAC,EACtCC,GAAmC,EAClC;EACD,OACC,IAAAP,QAAA,CAAAQ,aAAA;IACCH,SAAS,EAAG,IAAAI,mBAAU,EAAE,uBAAuB,EAAEJ,SAAU,CAAG;IAC9DE,GAAG,EAAGA;EAAK,GAETD,QACE,CAAC;AAER;;AAEA;AACA;AACA;AACA;AACO,MAAMI,QAAQ,GAAG,IAAAC,mBAAU,EAAEP,mBAAoB,CAAC;AAACQ,OAAA,CAAAF,QAAA,GAAAA,QAAA;AAAA,IAAAG,QAAA,GAE3CH,QAAQ;AAAAE,OAAA,CAAAE,OAAA,GAAAD,QAAA"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_element","UnforwardedPanelRow","className","children","ref","_react","createElement","classnames","PanelRow","exports","forwardRef","_default","default"],"sources":["@wordpress/components/src/panel/row.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { PanelRowProps } from './types';\n\nfunction UnforwardedPanelRow(\n\t{ className, children }: PanelRowProps,\n\tref: ForwardedRef< HTMLDivElement >\n) {\n\treturn (\n\t\t<div\n\t\t\tclassName={ classnames( 'components-panel__row', className ) }\n\t\t\tref={ ref }\n\t\t>\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\n/**\n * `PanelRow` is a generic container for rows within a `PanelBody`.\n * It is a flex container with a top margin for spacing.\n */\nexport const PanelRow = forwardRef( UnforwardedPanelRow );\n\nexport default PanelRow;\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AASA,SAASE,mBAAmBA,CAC3B;EAAEC,SAAS;EAAEC;AAAwB,CAAC,EACtCC,GAAmC,EAClC;EACD,OACC,IAAAC,MAAA,CAAAC,aAAA;IACCJ,SAAS,EAAG,IAAAK,mBAAU,EAAE,uBAAuB,EAAEL,SAAU,CAAG;IAC9DE,GAAG,EAAGA;EAAK,GAETD,QACE,CAAC;AAER;;AAEA;AACA;AACA;AACA;AACO,MAAMK,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAG,IAAAE,mBAAU,EAAET,mBAAoB,CAAC;AAAC,IAAAU,QAAA,GAAAF,OAAA,CAAAG,OAAA,GAE3CJ,QAAQ"}

package/build/panel/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/panel/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { ButtonAsButtonProps } from '../button/types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nexport type PanelProps = {\n\t/**\n\t * The text that will be rendered as the title of the panel.\n\t * Text will be rendered inside an `<h2>` tag.\n\t */\n\theader?: PanelHeaderProps[ 'label' ];\n\t/**\n\t * The CSS class to apply to the wrapper element.\n\t */\n\tclassName?: string;\n\t/**\n\t * The content to display within the panel.\n\t */\n\tchildren: React.ReactNode;\n};\n\nexport type PanelHeaderProps = {\n\t/**\n\t * The text that will be rendered as the title of the panel.\n\t * Will be rendered in an `<h2>` tag.\n\t */\n\tlabel?: string;\n\t/**\n\t * The content to display within the panel header.\n\t */\n\tchildren?: React.ReactNode;\n};\n\nexport type PanelRowProps = {\n\t/**\n\t * The CSS class to apply to the wrapper element.\n\t */\n\tclassName?: string;\n\t/**\n\t * The content to display within the panel row.\n\t */\n\tchildren: React.ReactNode;\n};\n\nexport type PanelBodyProps = {\n\t/**\n\t * Props that are passed to the `Button` component in title within the\n\t * `PanelBody`.\n\t *\n\t * @default {}\n\t */\n\tbuttonProps?: WordPressComponentProps<\n\t\tOmit< ButtonAsButtonProps, 'icon' >,\n\t\t'button',\n\t\tfalse\n\t>;\n\t/**\n\t * The content to display in the `PanelBody`.If a function is provided for\n\t * this prop, it will receive an object with the `opened` prop as an argument.\n\t */\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ( ( props: { opened: boolean } ) => React.ReactNode );\n\n\t/**\n\t * The CSS class to apply to the wrapper element.\n\t */\n\tclassName?: string;\n\t/**\n\t * An icon to be shown next to the title.\n\t */\n\ticon?: JSX.Element;\n\t/**\n\t * Whether or not the panel will start open.\n\t */\n\tinitialOpen?: boolean;\n\t/**\n\t * A function that is called any time the component is toggled from its closed\n\t * state to its opened state, or vice versa.\n\t *\n\t * @default noop\n\t */\n\tonToggle?: ( next: boolean ) => void;\n\t/**\n\t * When set to `true`, the component will remain open regardless of the\n\t * `initialOpen` prop and the panel will be prevented from being closed.\n\t */\n\topened?: boolean;\n\t/**\n\t * Title text. It shows even when it is closed.\n\t */\n\ttitle?: string;\n\t/**\n\t * Scrolls the content into view when visible. This improves the UX when\n\t * multiple `PanelBody` components are stacked in a scrollable container.\n\t *\n\t * @default true\n\t */\n\tscrollAfterOpen?: boolean;\n};\n\nexport type PanelBodyTitleProps = Omit< ButtonAsButtonProps, 'icon' > & {\n\t/**\n\t * An icon to be shown next to the title.\n\t */\n\ticon?: JSX.Element;\n\t/**\n\t * Whether or not the `PanelBody` is currently opened or not.\n\t */\n\tisOpened?: boolean;\n\t/**\n\t * The title text.\n\t */\n\ttitle?: string;\n};\n"],"mappings":""}
+{"version":3,"names":[],"sources":["@wordpress/components/src/panel/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { ButtonAsButtonProps } from '../button/types';\nimport type { WordPressComponentProps } from '../context';\n\nexport type PanelProps = {\n\t/**\n\t * The text that will be rendered as the title of the panel.\n\t * Text will be rendered inside an `<h2>` tag.\n\t */\n\theader?: PanelHeaderProps[ 'label' ];\n\t/**\n\t * The CSS class to apply to the wrapper element.\n\t */\n\tclassName?: string;\n\t/**\n\t * The content to display within the panel.\n\t */\n\tchildren: React.ReactNode;\n};\n\nexport type PanelHeaderProps = {\n\t/**\n\t * The text that will be rendered as the title of the panel.\n\t * Will be rendered in an `<h2>` tag.\n\t */\n\tlabel?: string;\n\t/**\n\t * The content to display within the panel header.\n\t */\n\tchildren?: React.ReactNode;\n};\n\nexport type PanelRowProps = {\n\t/**\n\t * The CSS class to apply to the wrapper element.\n\t */\n\tclassName?: string;\n\t/**\n\t * The content to display within the panel row.\n\t */\n\tchildren: React.ReactNode;\n};\n\nexport type PanelBodyProps = {\n\t/**\n\t * Props that are passed to the `Button` component in title within the\n\t * `PanelBody`.\n\t *\n\t * @default {}\n\t */\n\tbuttonProps?: WordPressComponentProps<\n\t\tOmit< ButtonAsButtonProps, 'icon' >,\n\t\t'button',\n\t\tfalse\n\t>;\n\t/**\n\t * The content to display in the `PanelBody`.If a function is provided for\n\t * this prop, it will receive an object with the `opened` prop as an argument.\n\t */\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ( ( props: { opened: boolean } ) => React.ReactNode );\n\n\t/**\n\t * The CSS class to apply to the wrapper element.\n\t */\n\tclassName?: string;\n\t/**\n\t * An icon to be shown next to the title.\n\t */\n\ticon?: JSX.Element;\n\t/**\n\t * Whether or not the panel will start open.\n\t */\n\tinitialOpen?: boolean;\n\t/**\n\t * A function that is called any time the component is toggled from its closed\n\t * state to its opened state, or vice versa.\n\t *\n\t * @default noop\n\t */\n\tonToggle?: ( next: boolean ) => void;\n\t/**\n\t * When set to `true`, the component will remain open regardless of the\n\t * `initialOpen` prop and the panel will be prevented from being closed.\n\t */\n\topened?: boolean;\n\t/**\n\t * Title text. It shows even when it is closed.\n\t */\n\ttitle?: string;\n\t/**\n\t * Scrolls the content into view when visible. This improves the UX when\n\t * multiple `PanelBody` components are stacked in a scrollable container.\n\t *\n\t * @default true\n\t */\n\tscrollAfterOpen?: boolean;\n};\n\nexport type PanelBodyTitleProps = Omit< ButtonAsButtonProps, 'icon' > & {\n\t/**\n\t * An icon to be shown next to the title.\n\t */\n\ticon?: JSX.Element;\n\t/**\n\t * Whether or not the `PanelBody` is currently opened or not.\n\t */\n\tisOpened?: boolean;\n\t/**\n\t * The title text.\n\t */\n\ttitle?: string;\n};\n"],"mappings":""}

package/build/placeholder/index.js

@@ -6,10 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Placeholder = Placeholder;
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _compose = require("@wordpress/compose");
 var _primitives = require("@wordpress/primitives");
+var _element = require("@wordpress/element");
+var _a11y = require("@wordpress/a11y");
 var _icon = _interopRequireDefault(require("../icon"));
 /**
  * External dependencies
@@ -23,13 +25,13 @@ var _icon = _interopRequireDefault(require("../icon"));
  * Internal dependencies
  */
 
-const PlaceholderIllustration = (0, _element.createElement)(_primitives.SVG, {
+const PlaceholderIllustration = (0, _react.createElement)(_primitives.SVG, {
   className: "components-placeholder__illustration",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 60 60",
   preserveAspectRatio: "none"
-}, (0, _element.createElement)(_primitives.Path, {
+}, (0, _react.createElement)(_primitives.Path, {
   vectorEffect: "non-scaling-stroke",
   d: "M60 60 0 0"
 }));
@@ -75,21 +77,25 @@ function Placeholder(props) {
   const fieldsetClasses = (0, _classnames.default)('components-placeholder__fieldset', {
     'is-column-layout': isColumnLayout
   });
-  return (0, _element.createElement)("div", {
+  (0, _element.useEffect)(() => {
+    if (instructions) {
+      (0, _a11y.speak)(instructions);
+    }
+  }, [instructions]);
+  return (0, _react.createElement)("div", {
     ...additionalProps,
     className: classes
-  }, withIllustration ? PlaceholderIllustration : null, resizeListener, notices, preview && (0, _element.createElement)("div", {
+  }, withIllustration ? PlaceholderIllustration : null, resizeListener, notices, preview && (0, _react.createElement)("div", {
     className: "components-placeholder__preview"
-  }, preview), (0, _element.createElement)("div", {
+  }, preview), (0, _react.createElement)("div", {
     className: "components-placeholder__label"
-  }, (0, _element.createElement)(_icon.default, {
+  }, (0, _react.createElement)(_icon.default, {
     icon: icon
-  }), label), (0, _element.createElement)("fieldset", {
-    className: fieldsetClasses
-  }, !!instructions && (0, _element.createElement)("legend", {
+  }), label), !!instructions && (0, _react.createElement)("div", {
     className: "components-placeholder__instructions"
-  }, instructions), children));
+  }, instructions), (0, _react.createElement)("div", {
+    className: fieldsetClasses
+  }, children));
 }
-var _default = Placeholder;
-exports.default = _default;
+var _default = exports.default = Placeholder;
 //# sourceMappingURL=index.js.map

package/build/placeholder/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_interopRequireDefault","require","_compose","_primitives","_icon","PlaceholderIllustration","_element","createElement","SVG","className","fill","xmlns","viewBox","preserveAspectRatio","Path","vectorEffect","d","Placeholder","props","icon","children","label","instructions","notices","preview","isColumnLayout","withIllustration","additionalProps","resizeListener","width","useResizeObserver","modifierClassNames","classes","classnames","fieldsetClasses","default","_default","exports"],"sources":["@wordpress/components/src/placeholder/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useResizeObserver } from '@wordpress/compose';\nimport { SVG, Path } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport Icon from '../icon';\nimport type { PlaceholderProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst PlaceholderIllustration = (\n\t<SVG\n\t\tclassName=\"components-placeholder__illustration\"\n\t\tfill=\"none\"\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\tviewBox=\"0 0 60 60\"\n\t\tpreserveAspectRatio=\"none\"\n\t>\n\t\t<Path vectorEffect=\"non-scaling-stroke\" d=\"M60 60 0 0\" />\n\t</SVG>\n);\n\n/**\n * Renders a placeholder. Normally used by blocks to render their empty state.\n *\n * ```jsx\n * import { Placeholder } from '@wordpress/components';\n * import { more } from '@wordpress/icons';\n *\n * const MyPlaceholder = () => <Placeholder icon={ more } label=\"Placeholder\" />;\n * ```\n */\nexport function Placeholder(\n\tprops: WordPressComponentProps< PlaceholderProps, 'div', false >\n) {\n\tconst {\n\t\ticon,\n\t\tchildren,\n\t\tlabel,\n\t\tinstructions,\n\t\tclassName,\n\t\tnotices,\n\t\tpreview,\n\t\tisColumnLayout,\n\t\twithIllustration,\n\t\t...additionalProps\n\t} = props;\n\tconst [ resizeListener, { width } ] = useResizeObserver();\n\n\t// Since `useResizeObserver` will report a width of `null` until after the\n\t// first render, avoid applying any modifier classes until width is known.\n\tlet modifierClassNames;\n\tif ( typeof width === 'number' ) {\n\t\tmodifierClassNames = {\n\t\t\t'is-large': width >= 480,\n\t\t\t'is-medium': width >= 160 && width < 480,\n\t\t\t'is-small': width < 160,\n\t\t};\n\t}\n\n\tconst classes = classnames(\n\t\t'components-placeholder',\n\t\tclassName,\n\t\tmodifierClassNames,\n\t\twithIllustration ? 'has-illustration' : null\n\t);\n\tconst fieldsetClasses = classnames( 'components-placeholder__fieldset', {\n\t\t'is-column-layout': isColumnLayout,\n\t} );\n\treturn (\n\t\t<div { ...additionalProps } className={ classes }>\n\t\t\t{ withIllustration ? PlaceholderIllustration : null }\n\t\t\t{ resizeListener }\n\t\t\t{ notices }\n\t\t\t{ preview && (\n\t\t\t\t<div className=\"components-placeholder__preview\">\n\t\t\t\t\t{ preview }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<div className=\"components-placeholder__label\">\n\t\t\t\t<Icon icon={ icon } />\n\t\t\t\t{ label }\n\t\t\t</div>\n\t\t\t<fieldset className={ fieldsetClasses }>\n\t\t\t\t{ !! instructions && (\n\t\t\t\t\t<legend className=\"components-placeholder__instructions\">\n\t\t\t\t\t\t{ instructions }\n\t\t\t\t\t</legend>\n\t\t\t\t) }\n\t\t\t\t{ children }\n\t\t\t</fieldset>\n\t\t</div>\n\t);\n}\n\nexport default Placeholder;\n"],"mappings":";;;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AAKA,IAAAG,KAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AAKA,MAAMI,uBAAuB,GAC5B,IAAAC,QAAA,CAAAC,aAAA,EAACJ,WAAA,CAAAK,GAAG;EACHC,SAAS,EAAC,sCAAsC;EAChDC,IAAI,EAAC,MAAM;EACXC,KAAK,EAAC,4BAA4B;EAClCC,OAAO,EAAC,WAAW;EACnBC,mBAAmB,EAAC;AAAM,GAE1B,IAAAP,QAAA,CAAAC,aAAA,EAACJ,WAAA,CAAAW,IAAI;EAACC,YAAY,EAAC,oBAAoB;EAACC,CAAC,EAAC;AAAY,CAAE,CACpD,CACL;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,WAAWA,CAC1BC,KAAgE,EAC/D;EACD,MAAM;IACLC,IAAI;IACJC,QAAQ;IACRC,KAAK;IACLC,YAAY;IACZb,SAAS;IACTc,OAAO;IACPC,OAAO;IACPC,cAAc;IACdC,gBAAgB;IAChB,GAAGC;EACJ,CAAC,GAAGT,KAAK;EACT,MAAM,CAAEU,cAAc,EAAE;IAAEC;EAAM,CAAC,CAAE,GAAG,IAAAC,0BAAiB,EAAC,CAAC;;EAEzD;EACA;EACA,IAAIC,kBAAkB;EACtB,IAAK,OAAOF,KAAK,KAAK,QAAQ,EAAG;IAChCE,kBAAkB,GAAG;MACpB,UAAU,EAAEF,KAAK,IAAI,GAAG;MACxB,WAAW,EAAEA,KAAK,IAAI,GAAG,IAAIA,KAAK,GAAG,GAAG;MACxC,UAAU,EAAEA,KAAK,GAAG;IACrB,CAAC;EACF;EAEA,MAAMG,OAAO,GAAG,IAAAC,mBAAU,EACzB,wBAAwB,EACxBxB,SAAS,EACTsB,kBAAkB,EAClBL,gBAAgB,GAAG,kBAAkB,GAAG,IACzC,CAAC;EACD,MAAMQ,eAAe,GAAG,IAAAD,mBAAU,EAAE,kCAAkC,EAAE;IACvE,kBAAkB,EAAER;EACrB,CAAE,CAAC;EACH,OACC,IAAAnB,QAAA,CAAAC,aAAA;IAAA,GAAUoB,eAAe;IAAGlB,SAAS,EAAGuB;EAAS,GAC9CN,gBAAgB,GAAGrB,uBAAuB,GAAG,IAAI,EACjDuB,cAAc,EACdL,OAAO,EACPC,OAAO,IACR,IAAAlB,QAAA,CAAAC,aAAA;IAAKE,SAAS,EAAC;EAAiC,GAC7Ce,OACE,CACL,EACD,IAAAlB,QAAA,CAAAC,aAAA;IAAKE,SAAS,EAAC;EAA+B,GAC7C,IAAAH,QAAA,CAAAC,aAAA,EAACH,KAAA,CAAA+B,OAAI;IAAChB,IAAI,EAAGA;EAAM,CAAE,CAAC,EACpBE,KACE,CAAC,EACN,IAAAf,QAAA,CAAAC,aAAA;IAAUE,SAAS,EAAGyB;EAAiB,GACpC,CAAC,CAAEZ,YAAY,IAChB,IAAAhB,QAAA,CAAAC,aAAA;IAAQE,SAAS,EAAC;EAAsC,GACrDa,YACK,CACR,EACCF,QACO,CACN,CAAC;AAER;AAAC,IAAAgB,QAAA,GAEcnB,WAAW;AAAAoB,OAAA,CAAAF,OAAA,GAAAC,QAAA"}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_compose","_primitives","_element","_a11y","_icon","PlaceholderIllustration","_react","createElement","SVG","className","fill","xmlns","viewBox","preserveAspectRatio","Path","vectorEffect","d","Placeholder","props","icon","children","label","instructions","notices","preview","isColumnLayout","withIllustration","additionalProps","resizeListener","width","useResizeObserver","modifierClassNames","classes","classnames","fieldsetClasses","useEffect","speak","default","_default","exports"],"sources":["@wordpress/components/src/placeholder/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useResizeObserver } from '@wordpress/compose';\nimport { SVG, Path } from '@wordpress/primitives';\nimport { useEffect } from '@wordpress/element';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport Icon from '../icon';\nimport type { PlaceholderProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nconst PlaceholderIllustration = (\n\t<SVG\n\t\tclassName=\"components-placeholder__illustration\"\n\t\tfill=\"none\"\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\tviewBox=\"0 0 60 60\"\n\t\tpreserveAspectRatio=\"none\"\n\t>\n\t\t<Path vectorEffect=\"non-scaling-stroke\" d=\"M60 60 0 0\" />\n\t</SVG>\n);\n\n/**\n * Renders a placeholder. Normally used by blocks to render their empty state.\n *\n * ```jsx\n * import { Placeholder } from '@wordpress/components';\n * import { more } from '@wordpress/icons';\n *\n * const MyPlaceholder = () => <Placeholder icon={ more } label=\"Placeholder\" />;\n * ```\n */\nexport function Placeholder(\n\tprops: WordPressComponentProps< PlaceholderProps, 'div', false >\n) {\n\tconst {\n\t\ticon,\n\t\tchildren,\n\t\tlabel,\n\t\tinstructions,\n\t\tclassName,\n\t\tnotices,\n\t\tpreview,\n\t\tisColumnLayout,\n\t\twithIllustration,\n\t\t...additionalProps\n\t} = props;\n\tconst [ resizeListener, { width } ] = useResizeObserver();\n\n\t// Since `useResizeObserver` will report a width of `null` until after the\n\t// first render, avoid applying any modifier classes until width is known.\n\tlet modifierClassNames;\n\tif ( typeof width === 'number' ) {\n\t\tmodifierClassNames = {\n\t\t\t'is-large': width >= 480,\n\t\t\t'is-medium': width >= 160 && width < 480,\n\t\t\t'is-small': width < 160,\n\t\t};\n\t}\n\n\tconst classes = classnames(\n\t\t'components-placeholder',\n\t\tclassName,\n\t\tmodifierClassNames,\n\t\twithIllustration ? 'has-illustration' : null\n\t);\n\n\tconst fieldsetClasses = classnames( 'components-placeholder__fieldset', {\n\t\t'is-column-layout': isColumnLayout,\n\t} );\n\n\tuseEffect( () => {\n\t\tif ( instructions ) {\n\t\t\tspeak( instructions );\n\t\t}\n\t}, [ instructions ] );\n\n\treturn (\n\t\t<div { ...additionalProps } className={ classes }>\n\t\t\t{ withIllustration ? PlaceholderIllustration : null }\n\t\t\t{ resizeListener }\n\t\t\t{ notices }\n\t\t\t{ preview && (\n\t\t\t\t<div className=\"components-placeholder__preview\">\n\t\t\t\t\t{ preview }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<div className=\"components-placeholder__label\">\n\t\t\t\t<Icon icon={ icon } />\n\t\t\t\t{ label }\n\t\t\t</div>\n\t\t\t{ !! instructions && (\n\t\t\t\t<div className=\"components-placeholder__instructions\">\n\t\t\t\t\t{ instructions }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t<div className={ fieldsetClasses }>{ children }</div>\n\t\t</div>\n\t);\n}\n\nexport default Placeholder;\n"],"mappings":";;;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAKA,IAAAK,KAAA,GAAAN,sBAAA,CAAAC,OAAA;AAhBA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;AACA;AACA;;AAKA,MAAMM,uBAAuB,GAC5B,IAAAC,MAAA,CAAAC,aAAA,EAACN,WAAA,CAAAO,GAAG;EACHC,SAAS,EAAC,sCAAsC;EAChDC,IAAI,EAAC,MAAM;EACXC,KAAK,EAAC,4BAA4B;EAClCC,OAAO,EAAC,WAAW;EACnBC,mBAAmB,EAAC;AAAM,GAE1B,IAAAP,MAAA,CAAAC,aAAA,EAACN,WAAA,CAAAa,IAAI;EAACC,YAAY,EAAC,oBAAoB;EAACC,CAAC,EAAC;AAAY,CAAE,CACpD,CACL;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,WAAWA,CAC1BC,KAAgE,EAC/D;EACD,MAAM;IACLC,IAAI;IACJC,QAAQ;IACRC,KAAK;IACLC,YAAY;IACZb,SAAS;IACTc,OAAO;IACPC,OAAO;IACPC,cAAc;IACdC,gBAAgB;IAChB,GAAGC;EACJ,CAAC,GAAGT,KAAK;EACT,MAAM,CAAEU,cAAc,EAAE;IAAEC;EAAM,CAAC,CAAE,GAAG,IAAAC,0BAAiB,EAAC,CAAC;;EAEzD;EACA;EACA,IAAIC,kBAAkB;EACtB,IAAK,OAAOF,KAAK,KAAK,QAAQ,EAAG;IAChCE,kBAAkB,GAAG;MACpB,UAAU,EAAEF,KAAK,IAAI,GAAG;MACxB,WAAW,EAAEA,KAAK,IAAI,GAAG,IAAIA,KAAK,GAAG,GAAG;MACxC,UAAU,EAAEA,KAAK,GAAG;IACrB,CAAC;EACF;EAEA,MAAMG,OAAO,GAAG,IAAAC,mBAAU,EACzB,wBAAwB,EACxBxB,SAAS,EACTsB,kBAAkB,EAClBL,gBAAgB,GAAG,kBAAkB,GAAG,IACzC,CAAC;EAED,MAAMQ,eAAe,GAAG,IAAAD,mBAAU,EAAE,kCAAkC,EAAE;IACvE,kBAAkB,EAAER;EACrB,CAAE,CAAC;EAEH,IAAAU,kBAAS,EAAE,MAAM;IAChB,IAAKb,YAAY,EAAG;MACnB,IAAAc,WAAK,EAAEd,YAAa,CAAC;IACtB;EACD,CAAC,EAAE,CAAEA,YAAY,CAAG,CAAC;EAErB,OACC,IAAAhB,MAAA,CAAAC,aAAA;IAAA,GAAUoB,eAAe;IAAGlB,SAAS,EAAGuB;EAAS,GAC9CN,gBAAgB,GAAGrB,uBAAuB,GAAG,IAAI,EACjDuB,cAAc,EACdL,OAAO,EACPC,OAAO,IACR,IAAAlB,MAAA,CAAAC,aAAA;IAAKE,SAAS,EAAC;EAAiC,GAC7Ce,OACE,CACL,EACD,IAAAlB,MAAA,CAAAC,aAAA;IAAKE,SAAS,EAAC;EAA+B,GAC7C,IAAAH,MAAA,CAAAC,aAAA,EAACH,KAAA,CAAAiC,OAAI;IAAClB,IAAI,EAAGA;EAAM,CAAE,CAAC,EACpBE,KACE,CAAC,EACJ,CAAC,CAAEC,YAAY,IAChB,IAAAhB,MAAA,CAAAC,aAAA;IAAKE,SAAS,EAAC;EAAsC,GAClDa,YACE,CACL,EACD,IAAAhB,MAAA,CAAAC,aAAA;IAAKE,SAAS,EAAGyB;EAAiB,GAAGd,QAAe,CAChD,CAAC;AAER;AAAC,IAAAkB,QAAA,GAAAC,OAAA,CAAAF,OAAA,GAEcpB,WAAW"}