@wordpress/components 25.5.0 → 25.6.1

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/panel/index.tsx"],"names":["classnames","forwardRef","PanelHeader","UnforwardedPanel","header","className","children","ref","classNames","Panel"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,UAAT,QAA2B,oBAA3B;AAEA;AACA;AACA;;AACA,OAAOC,WAAP,MAAwB,UAAxB;;AAGA,SAASC,gBAAT,CACC;AAAEC,EAAAA,MAAF;AAAUC,EAAAA,SAAV;AAAqBC,EAAAA;AAArB,CADD,EAECC,GAFD,EAGE;AACD,QAAMC,UAAU,GAAGR,UAAU,CAAEK,SAAF,EAAa,kBAAb,CAA7B;AACA,SACC;AAAK,IAAA,SAAS,EAAGG,UAAjB;AAA8B,IAAA,GAAG,EAAGD;AAApC,KACGH,MAAM,IAAI,cAAC,WAAD;AAAa,IAAA,KAAK,EAAGA;AAArB,IADb,EAEGE,QAFH,CADD;AAMA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,MAAMG,KAAK,GAAGR,UAAU,CAAEE,gBAAF,CAAxB;AAEP,eAAeM,KAAf","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"]}
+{"version":3,"names":["classnames","forwardRef","PanelHeader","UnforwardedPanel","header","className","children","ref","classNames","createElement","label","Panel"],"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":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;;AAE/C;AACA;AACA;AACA,OAAOC,WAAW,MAAM,UAAU;AAGlC,SAASC,gBAAgBA,CACxB;EAAEC,MAAM;EAAEC,SAAS;EAAEC;AAAqB,CAAC,EAC3CC,GAAyC,EACxC;EACD,MAAMC,UAAU,GAAGR,UAAU,CAAEK,SAAS,EAAE,kBAAmB,CAAC;EAC9D,OACCI,aAAA;IAAKJ,SAAS,EAAGG,UAAY;IAACD,GAAG,EAAGA;EAAK,GACtCH,MAAM,IAAIK,aAAA,CAACP,WAAW;IAACQ,KAAK,EAAGN;EAAQ,CAAE,CAAC,EAC1CE,QACE,CAAC;AAER;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMK,KAAK,GAAGV,UAAU,CAAEE,gBAAiB,CAAC;AAEnD,eAAeQ,KAAK"}

package/build-module/panel/row.js

@@ -1,15 +1,13 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * External dependencies
  */
 import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-
 import { forwardRef } from '@wordpress/element';
-
 function UnforwardedPanelRow({
   className,
   children
@@ -19,12 +17,11 @@ function UnforwardedPanelRow({
     ref: ref
   }, children);
 }
+
 /**
  * `PanelRow` is a generic container for rows within a `PanelBody`.
  * It is a flex container with a top margin for spacing.
  */
-
-
 export const PanelRow = forwardRef(UnforwardedPanelRow);
 export default PanelRow;
 //# sourceMappingURL=row.js.map

package/build-module/panel/row.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/panel/row.tsx"],"names":["classnames","forwardRef","UnforwardedPanelRow","className","children","ref","PanelRow"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,UAAT,QAA2B,oBAA3B;;AAQA,SAASC,mBAAT,CACC;AAAEC,EAAAA,SAAF;AAAaC,EAAAA;AAAb,CADD,EAECC,GAFD,EAGE;AACD,SACC;AACC,IAAA,SAAS,EAAGL,UAAU,CAAE,uBAAF,EAA2BG,SAA3B,CADvB;AAEC,IAAA,GAAG,EAAGE;AAFP,KAIGD,QAJH,CADD;AAQA;AAED;AACA;AACA;AACA;;;AACA,OAAO,MAAME,QAAQ,GAAGL,UAAU,CAAEC,mBAAF,CAA3B;AAEP,eAAeI,QAAf","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"]}
+{"version":3,"names":["classnames","forwardRef","UnforwardedPanelRow","className","children","ref","createElement","PanelRow"],"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":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,UAAU,QAAQ,oBAAoB;AAQ/C,SAASC,mBAAmBA,CAC3B;EAAEC,SAAS;EAAEC;AAAwB,CAAC,EACtCC,GAAmC,EAClC;EACD,OACCC,aAAA;IACCH,SAAS,EAAGH,UAAU,CAAE,uBAAuB,EAAEG,SAAU,CAAG;IAC9DE,GAAG,EAAGA;EAAK,GAETD,QACE,CAAC;AAER;;AAEA;AACA;AACA;AACA;AACA,OAAO,MAAMG,QAAQ,GAAGN,UAAU,CAAEC,mBAAoB,CAAC;AAEzD,eAAeK,QAAQ"}

package/build-module/panel/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
+{"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":""}

package/build-module/placeholder/index.js

@@ -1,19 +1,18 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * External dependencies
  */
 import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-
 import { useResizeObserver } from '@wordpress/compose';
 import { SVG, Path } from '@wordpress/primitives';
+
 /**
  * Internal dependencies
  */
-
 import Icon from '../icon';
 const PlaceholderIllustration = createElement(SVG, {
   className: "components-placeholder__illustration",
@@ -25,6 +24,7 @@ const PlaceholderIllustration = createElement(SVG, {
   vectorEffect: "non-scaling-stroke",
   d: "M60 60 0 0"
 }));
+
 /**
  * Renders a placeholder. Normally used by blocks to render their empty state.
  *
@@ -35,7 +35,6 @@ const PlaceholderIllustration = createElement(SVG, {
  * const MyPlaceholder = () => <Placeholder icon={ more } label="Placeholder" />;
  * ```
  */
-
 export function Placeholder(props) {
   const {
     icon,
@@ -51,11 +50,11 @@ export function Placeholder(props) {
   } = props;
   const [resizeListener, {
     width
-  }] = useResizeObserver(); // Since `useResizeObserver` will report a width of `null` until after the
-  // first render, avoid applying any modifier classes until width is known.
+  }] = useResizeObserver();
 
+  // Since `useResizeObserver` will report a width of `null` until after the
+  // first render, avoid applying any modifier classes until width is known.
   let modifierClassNames;
-
   if (typeof width === 'number') {
     modifierClassNames = {
       'is-large': width >= 480,
@@ -63,12 +62,12 @@ export function Placeholder(props) {
       'is-small': width < 160
     };
   }
-
   const classes = classnames('components-placeholder', className, modifierClassNames, withIllustration ? 'has-illustration' : null);
   const fieldsetClasses = classnames('components-placeholder__fieldset', {
     'is-column-layout': isColumnLayout
   });
-  return createElement("div", { ...additionalProps,
+  return createElement("div", {
+    ...additionalProps,
     className: classes
   }, withIllustration ? PlaceholderIllustration : null, resizeListener, notices, preview && createElement("div", {
     className: "components-placeholder__preview"

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/placeholder/index.tsx"],"names":["classnames","useResizeObserver","SVG","Path","Icon","PlaceholderIllustration","Placeholder","props","icon","children","label","instructions","className","notices","preview","isColumnLayout","withIllustration","additionalProps","resizeListener","width","modifierClassNames","classes","fieldsetClasses"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,iBAAT,QAAkC,oBAAlC;AACA,SAASC,GAAT,EAAcC,IAAd,QAA0B,uBAA1B;AAEA;AACA;AACA;;AACA,OAAOC,IAAP,MAAiB,SAAjB;AAIA,MAAMC,uBAAuB,GAC5B,cAAC,GAAD;AACC,EAAA,SAAS,EAAC,sCADX;AAEC,EAAA,IAAI,EAAC,MAFN;AAGC,EAAA,KAAK,EAAC,4BAHP;AAIC,EAAA,OAAO,EAAC,WAJT;AAKC,EAAA,mBAAmB,EAAC;AALrB,GAOC,cAAC,IAAD;AAAM,EAAA,YAAY,EAAC,oBAAnB;AAAwC,EAAA,CAAC,EAAC;AAA1C,EAPD,CADD;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,WAAT,CACNC,KADM,EAEL;AACD,QAAM;AACLC,IAAAA,IADK;AAELC,IAAAA,QAFK;AAGLC,IAAAA,KAHK;AAILC,IAAAA,YAJK;AAKLC,IAAAA,SALK;AAMLC,IAAAA,OANK;AAOLC,IAAAA,OAPK;AAQLC,IAAAA,cARK;AASLC,IAAAA,gBATK;AAUL,OAAGC;AAVE,MAWFV,KAXJ;AAYA,QAAM,CAAEW,cAAF,EAAkB;AAAEC,IAAAA;AAAF,GAAlB,IAAgClB,iBAAiB,EAAvD,CAbC,CAeD;AACA;;AACA,MAAImB,kBAAJ;;AACA,MAAK,OAAOD,KAAP,KAAiB,QAAtB,EAAiC;AAChCC,IAAAA,kBAAkB,GAAG;AACpB,kBAAYD,KAAK,IAAI,GADD;AAEpB,mBAAaA,KAAK,IAAI,GAAT,IAAgBA,KAAK,GAAG,GAFjB;AAGpB,kBAAYA,KAAK,GAAG;AAHA,KAArB;AAKA;;AAED,QAAME,OAAO,GAAGrB,UAAU,CACzB,wBADyB,EAEzBY,SAFyB,EAGzBQ,kBAHyB,EAIzBJ,gBAAgB,GAAG,kBAAH,GAAwB,IAJf,CAA1B;AAMA,QAAMM,eAAe,GAAGtB,UAAU,CAAE,kCAAF,EAAsC;AACvE,wBAAoBe;AADmD,GAAtC,CAAlC;AAGA,SACC,0BAAUE,eAAV;AAA4B,IAAA,SAAS,EAAGI;AAAxC,KACGL,gBAAgB,GAAGX,uBAAH,GAA6B,IADhD,EAEGa,cAFH,EAGGL,OAHH,EAIGC,OAAO,IACR;AAAK,IAAA,SAAS,EAAC;AAAf,KACGA,OADH,CALF,EASC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,IAAD;AAAM,IAAA,IAAI,EAAGN;AAAb,IADD,EAEGE,KAFH,CATD,EAaC;AAAU,IAAA,SAAS,EAAGY;AAAtB,KACG,CAAC,CAAEX,YAAH,IACD;AAAQ,IAAA,SAAS,EAAC;AAAlB,KACGA,YADH,CAFF,EAMGF,QANH,CAbD,CADD;AAwBA;AAED,eAAeH,WAAf","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"]}
+{"version":3,"names":["classnames","useResizeObserver","SVG","Path","Icon","PlaceholderIllustration","createElement","className","fill","xmlns","viewBox","preserveAspectRatio","vectorEffect","d","Placeholder","props","icon","children","label","instructions","notices","preview","isColumnLayout","withIllustration","additionalProps","resizeListener","width","modifierClassNames","classes","fieldsetClasses"],"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":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,iBAAiB,QAAQ,oBAAoB;AACtD,SAASC,GAAG,EAAEC,IAAI,QAAQ,uBAAuB;;AAEjD;AACA;AACA;AACA,OAAOC,IAAI,MAAM,SAAS;AAI1B,MAAMC,uBAAuB,GAC5BC,aAAA,CAACJ,GAAG;EACHK,SAAS,EAAC,sCAAsC;EAChDC,IAAI,EAAC,MAAM;EACXC,KAAK,EAAC,4BAA4B;EAClCC,OAAO,EAAC,WAAW;EACnBC,mBAAmB,EAAC;AAAM,GAE1BL,aAAA,CAACH,IAAI;EAACS,YAAY,EAAC,oBAAoB;EAACC,CAAC,EAAC;AAAY,CAAE,CACpD,CACL;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,WAAWA,CAC1BC,KAAgE,EAC/D;EACD,MAAM;IACLC,IAAI;IACJC,QAAQ;IACRC,KAAK;IACLC,YAAY;IACZZ,SAAS;IACTa,OAAO;IACPC,OAAO;IACPC,cAAc;IACdC,gBAAgB;IAChB,GAAGC;EACJ,CAAC,GAAGT,KAAK;EACT,MAAM,CAAEU,cAAc,EAAE;IAAEC;EAAM,CAAC,CAAE,GAAGzB,iBAAiB,CAAC,CAAC;;EAEzD;EACA;EACA,IAAI0B,kBAAkB;EACtB,IAAK,OAAOD,KAAK,KAAK,QAAQ,EAAG;IAChCC,kBAAkB,GAAG;MACpB,UAAU,EAAED,KAAK,IAAI,GAAG;MACxB,WAAW,EAAEA,KAAK,IAAI,GAAG,IAAIA,KAAK,GAAG,GAAG;MACxC,UAAU,EAAEA,KAAK,GAAG;IACrB,CAAC;EACF;EAEA,MAAME,OAAO,GAAG5B,UAAU,CACzB,wBAAwB,EACxBO,SAAS,EACToB,kBAAkB,EAClBJ,gBAAgB,GAAG,kBAAkB,GAAG,IACzC,CAAC;EACD,MAAMM,eAAe,GAAG7B,UAAU,CAAE,kCAAkC,EAAE;IACvE,kBAAkB,EAAEsB;EACrB,CAAE,CAAC;EACH,OACChB,aAAA;IAAA,GAAUkB,eAAe;IAAGjB,SAAS,EAAGqB;EAAS,GAC9CL,gBAAgB,GAAGlB,uBAAuB,GAAG,IAAI,EACjDoB,cAAc,EACdL,OAAO,EACPC,OAAO,IACRf,aAAA;IAAKC,SAAS,EAAC;EAAiC,GAC7Cc,OACE,CACL,EACDf,aAAA;IAAKC,SAAS,EAAC;EAA+B,GAC7CD,aAAA,CAACF,IAAI;IAACY,IAAI,EAAGA;EAAM,CAAE,CAAC,EACpBE,KACE,CAAC,EACNZ,aAAA;IAAUC,SAAS,EAAGsB;EAAiB,GACpC,CAAC,CAAEV,YAAY,IAChBb,aAAA;IAAQC,SAAS,EAAC;EAAsC,GACrDY,YACK,CACR,EACCF,QACO,CACN,CAAC;AAER;AAEA,eAAeH,WAAW"}

package/build-module/placeholder/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/placeholder/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { IconType } from '../icon';\n\nexport type PlaceholderProps = {\n\t/**\n\t * The children elements.\n\t */\n\tchildren?: ReactNode;\n\t/**\n\t * Class to set on the container div.\n\t */\n\tclassName?: string;\n\t/**\n\t * If provided, renders an icon next to the label.\n\t */\n\ticon?: IconType;\n\t/**\n\t * Instructions of the placeholder.\n\t */\n\tinstructions?: string;\n\t/**\n\t * Changes placeholder children layout from flex-row to flex-column.\n\t */\n\tisColumnLayout?: boolean;\n\t/**\n\t * Title of the placeholder.\n\t */\n\tlabel?: string;\n\t/**\n\t * A rendered notices list\n\t */\n\tnotices?: ReactNode;\n\t/**\n\t * Preview to be rendered in the placeholder.\n\t */\n\tpreview?: ReactNode;\n\t/**\n\t * Outputs a placeholder illustration.\n\t */\n\twithIllustration?: boolean;\n};\n"],"mappings":""}

package/build-module/popover/index.js

@@ -1,43 +1,46 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * External dependencies
  */
+
 import classnames from 'classnames';
-import { useFloating, flip as flipMiddleware, shift as shiftMiddleware, autoUpdate, arrow, offset as offsetMiddleware, size } from '@floating-ui/react-dom'; // eslint-disable-next-line no-restricted-imports
+import { useFloating, flip as flipMiddleware, shift as shiftMiddleware, autoUpdate, arrow, offset as offsetMiddleware, size } from '@floating-ui/react-dom';
+// eslint-disable-next-line no-restricted-imports
 
+// eslint-disable-next-line no-restricted-imports
 import { motion, useReducedMotion } from 'framer-motion';
+
 /**
  * WordPress dependencies
  */
-
 import { useRef, useLayoutEffect, forwardRef, createContext, useContext, useMemo, useState, useCallback } from '@wordpress/element';
 import { useViewportMatch, useMergeRefs, __experimentalUseDialog as useDialog } from '@wordpress/compose';
 import { close } from '@wordpress/icons';
 import deprecated from '@wordpress/deprecated';
 import { Path, SVG } from '@wordpress/primitives';
 import { getScrollContainer } from '@wordpress/dom';
+
 /**
  * Internal dependencies
  */
-
 import Button from '../button';
 import ScrollLock from '../scroll-lock';
 import { Slot, Fill, useSlot } from '../slot-fill';
 import { computePopoverPosition, getFrameOffset, getFrameScale, positionToPlacement, placementToMotionAnimationProps, getReferenceOwnerDocument, getReferenceElement } from './utils';
 import { limitShift as customLimitShift } from './limit-shift';
 import { overlayMiddlewares } from './overlay-middlewares';
+
 /**
  * Name of slot in which popover should fill.
  *
  * @type {string}
  */
+export const SLOT_NAME = 'Popover';
 
-export const SLOT_NAME = 'Popover'; // An SVG displaying a triangle facing down, filled with a solid
+// An SVG displaying a triangle facing down, filled with a solid
 // color and bordered in such a way to create an arrow-like effect.
 // Keeping the SVG's viewbox squared simplify the arrow positioning
 // calculations.
-
 const ArrowTriangle = () => createElement(SVG, {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: `0 0 100 100`,
@@ -51,7 +54,6 @@ const ArrowTriangle = () => createElement(SVG, {
   d: "M 0 0 L 50 50 L 100 0",
   vectorEffect: "non-scaling-stroke"
 }));
-
 const AnimatedWrapper = forwardRef(({
   style: receivedInlineStyles,
   placement,
@@ -64,7 +66,8 @@ const AnimatedWrapper = forwardRef(({
     ...otherMotionProps
   } = useMemo(() => placementToMotionAnimationProps(placement), [placement]);
   const computedAnimationProps = shouldAnimate && !shouldReduceMotion ? {
-    style: { ...motionInlineStyles,
+    style: {
+      ...motionInlineStyles,
       ...receivedInlineStyles
     },
     ...otherMotionProps
@@ -72,16 +75,15 @@ const AnimatedWrapper = forwardRef(({
     animate: false,
     style: receivedInlineStyles
   };
-  return createElement(motion.div, { ...computedAnimationProps,
+  return createElement(motion.div, {
+    ...computedAnimationProps,
     ...props,
     ref: forwardedRef
   });
 });
 const slotNameContext = createContext(undefined);
-
 const UnforwardedPopover = (props, forwardedRef) => {
   var _frameOffsetRef$curre, _frameOffsetRef$curre2;
-
   const {
     animate = true,
     headerTitle,
@@ -112,49 +114,43 @@ const UnforwardedPopover = (props, forwardedRef) => {
   } = props;
   let computedFlipProp = flip;
   let computedResizeProp = resize;
-
   if (__unstableForcePosition !== undefined) {
     deprecated('`__unstableForcePosition` prop in wp.components.Popover', {
       since: '6.1',
       version: '6.3',
       alternative: '`flip={ false }` and  `resize={ false }`'
-    }); // Back-compat, set the `flip` and `resize` props
-    // to `false` to replicate `__unstableForcePosition`.
+    });
 
+    // Back-compat, set the `flip` and `resize` props
+    // to `false` to replicate `__unstableForcePosition`.
     computedFlipProp = !__unstableForcePosition;
     computedResizeProp = !__unstableForcePosition;
   }
-
   if (anchorRef !== undefined) {
     deprecated('`anchorRef` prop in wp.components.Popover', {
       since: '6.1',
       alternative: '`anchor` prop'
     });
   }
-
   if (anchorRect !== undefined) {
     deprecated('`anchorRect` prop in wp.components.Popover', {
       since: '6.1',
       alternative: '`anchor` prop'
     });
   }
-
   if (getAnchorRect !== undefined) {
     deprecated('`getAnchorRect` prop in wp.components.Popover', {
       since: '6.1',
       alternative: '`anchor` prop'
     });
   }
-
   const computedVariant = isAlternate ? 'toolbar' : variant;
-
   if (isAlternate !== undefined) {
     deprecated('`isAlternate` prop in wp.components.Popover', {
       since: '6.2',
       alternative: "`variant` prop with the `'toolbar'` value"
     });
   }
-
   const arrowRef = useRef(null);
   const [fallbackReferenceElement, setFallbackReferenceElement] = useState(null);
   const [referenceOwnerDocument, setReferenceOwnerDocument] = useState();
@@ -165,19 +161,19 @@ const UnforwardedPopover = (props, forwardedRef) => {
   const isExpanded = expandOnMobile && isMobileViewport;
   const hasArrow = !isExpanded && !noArrow;
   const normalizedPlacementFromProps = position ? positionToPlacement(position) : placementProp;
+
   /**
    * Offsets the position of the popover when the anchor is inside an iframe.
    *
    * Store the offset in a ref, due to constraints with floating-ui:
    * https://floating-ui.com/docs/react-dom#variables-inside-middleware-functions.
    */
-
   const frameOffsetRef = useRef(getFrameOffset(referenceOwnerDocument));
-  const middleware = [...(placementProp === 'overlay' ? overlayMiddlewares() : []), // Custom middleware which adjusts the popover's position by taking into
+  const middleware = [...(placementProp === 'overlay' ? overlayMiddlewares() : []),
+  // Custom middleware which adjusts the popover's position by taking into
   // account the offset of the anchor's iframe (if any) compared to the page.
   {
     name: 'frameOffset',
-
     fn({
       x,
       y
@@ -188,7 +184,6 @@ const UnforwardedPopover = (props, forwardedRef) => {
           y
         };
       }
-
       return {
         x: x + frameOffsetRef.current.x,
         y: y + frameOffsetRef.current.y,
@@ -198,37 +193,32 @@ const UnforwardedPopover = (props, forwardedRef) => {
         }
       };
     }
-
   }, offsetMiddleware(offsetProp), computedFlipProp ? flipMiddleware() : undefined, computedResizeProp ? size({
     apply(sizeProps) {
       var _refs$floating$curren;
-
       const {
         firstElementChild
-      } = (_refs$floating$curren = refs.floating.current) !== null && _refs$floating$curren !== void 0 ? _refs$floating$curren : {}; // Only HTMLElement instances have the `style` property.
+      } = (_refs$floating$curren = refs.floating.current) !== null && _refs$floating$curren !== void 0 ? _refs$floating$curren : {};
 
-      if (!(firstElementChild instanceof HTMLElement)) return; // Reduce the height of the popover to the available space.
+      // Only HTMLElement instances have the `style` property.
+      if (!(firstElementChild instanceof HTMLElement)) return;
 
+      // Reduce the height of the popover to the available space.
       Object.assign(firstElementChild.style, {
         maxHeight: `${sizeProps.availableHeight}px`,
         overflow: 'auto'
       });
     }
-
   }) : undefined, shift ? shiftMiddleware({
     crossAxis: true,
     limiter: customLimitShift(),
     padding: 1 // Necessary to avoid flickering at the edge of the viewport.
-
   }) : undefined, arrow({
     element: arrowRef
   })].filter(m => m !== undefined);
-
   const slotName = useContext(slotNameContext) || __unstableSlotName;
-
   const slot = useSlot(slotName);
   let onDialogClose;
-
   if (onClose || onFocusOutside) {
     onDialogClose = (type, event) => {
       // Ideally the popover should have just a single onClose prop and
@@ -240,7 +230,6 @@ const UnforwardedPopover = (props, forwardedRef) => {
       }
     };
   }
-
   const [dialogRef, dialogProps] = useDialog({
     focusOnMount,
     __unstableOnClose: onDialogClose,
@@ -274,7 +263,9 @@ const UnforwardedPopover = (props, forwardedRef) => {
   const arrowCallbackRef = useCallback(node => {
     arrowRef.current = node;
     update();
-  }, [update]); // When any of the possible anchor "sources" change,
+  }, [update]);
+
+  // When any of the possible anchor "sources" change,
   // recompute the reference element (real or virtual) and its owner document.
 
   const anchorRefTop = anchorRef?.top;
@@ -301,20 +292,23 @@ const UnforwardedPopover = (props, forwardedRef) => {
     });
     referenceCallbackRef(resultingReferenceElement);
     setReferenceOwnerDocument(resultingReferenceOwnerDoc);
-  }, [anchor, anchorRef, anchorRefTop, anchorRefBottom, anchorRefStartContainer, anchorRefCurrent, anchorRect, getAnchorRect, fallbackReferenceElement, referenceCallbackRef]); // If the reference element is in a different ownerDocument (e.g. iFrame),
+  }, [anchor, anchorRef, anchorRefTop, anchorRefBottom, anchorRefStartContainer, anchorRefCurrent, anchorRect, getAnchorRect, fallbackReferenceElement, referenceCallbackRef]);
+
+  // If the reference element is in a different ownerDocument (e.g. iFrame),
   // we need to manually update the floating's position as the reference's owner
   // document scrolls. Also update the frame offset if the view resizes.
-
   useLayoutEffect(() => {
-    if ( // Reference and root documents are the same.
-    referenceOwnerDocument === document || // Reference and floating are in the same document.
-    referenceOwnerDocument === refs.floating.current?.ownerDocument || // The reference's document has no view (i.e. window)
+    if (
+    // Reference and root documents are the same.
+    referenceOwnerDocument === document ||
+    // Reference and floating are in the same document.
+    referenceOwnerDocument === refs.floating.current?.ownerDocument ||
+    // The reference's document has no view (i.e. window)
     // or frame element (ie. it's not an iframe).
     !referenceOwnerDocument?.defaultView?.frameElement) {
       frameOffsetRef.current = undefined;
       return;
     }
-
     const {
       defaultView
     } = referenceOwnerDocument;
@@ -322,12 +316,10 @@ const UnforwardedPopover = (props, forwardedRef) => {
       frameElement
     } = defaultView;
     const scrollContainer = frameElement ? getScrollContainer(frameElement) : null;
-
     const updateFrameOffset = () => {
       frameOffsetRef.current = getFrameOffset(referenceOwnerDocument);
       update();
     };
-
     defaultView.addEventListener('resize', updateFrameOffset);
     scrollContainer?.addEventListener('scroll', updateFrameOffset);
     updateFrameOffset();
@@ -336,10 +328,13 @@ const UnforwardedPopover = (props, forwardedRef) => {
       scrollContainer?.removeEventListener('scroll', updateFrameOffset);
     };
   }, [referenceOwnerDocument, update, refs.floating]);
-  const mergedFloatingRef = useMergeRefs([floating, dialogRef, forwardedRef]); // Disable reason: We care to capture the _bubbled_ events from inputs
+  const mergedFloatingRef = useMergeRefs([floating, dialogRef, forwardedRef]);
+
+  // Disable reason: We care to capture the _bubbled_ events from inputs
   // within popover as inferring close intent.
 
-  let content = // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+  let content =
+  // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
   // eslint-disable-next-line jsx-a11y/no-static-element-interactions
   createElement(AnimatedWrapper, {
     shouldAnimate: animate && !isExpanded,
@@ -384,21 +379,19 @@ const UnforwardedPopover = (props, forwardedRef) => {
       top: typeof arrowData?.y !== 'undefined' && Number.isFinite(arrowData.y) ? `${arrowData.y + ((_frameOffsetRef$curre2 = frameOffsetRef.current?.y) !== null && _frameOffsetRef$curre2 !== void 0 ? _frameOffsetRef$curre2 : 0)}px` : ''
     }
   }, createElement(ArrowTriangle, null)));
-
   if (slot.ref) {
     content = createElement(Fill, {
       name: slotName
     }, content);
   }
-
   if (anchorRef || anchorRect || anchor) {
     return content;
   }
-
   return createElement("span", {
     ref: anchorRefFallback
   }, content);
 };
+
 /**
  * `Popover` renders its content in a floating modal. If no explicit anchor is passed via props, it anchors to its parent element by default.
  *
@@ -422,25 +415,23 @@ const UnforwardedPopover = (props, forwardedRef) => {
  * ```
  *
  */
-
-
 export const Popover = forwardRef(UnforwardedPopover);
-
 function PopoverSlot({
   name = SLOT_NAME
 }, ref) {
-  return createElement(Slot // @ts-expect-error Need to type `SlotFill`
+  return createElement(Slot
+  // @ts-expect-error Need to type `SlotFill`
   , {
     bubblesVirtually: true,
     name: name,
     className: "popover-slot",
     ref: ref
   });
-} // @ts-expect-error For Legacy Reasons
-
-
-Popover.Slot = forwardRef(PopoverSlot); // @ts-expect-error For Legacy Reasons
+}
 
+// @ts-expect-error For Legacy Reasons
+Popover.Slot = forwardRef(PopoverSlot);
+// @ts-expect-error For Legacy Reasons
 Popover.__unstableSlotNameProvider = slotNameContext.Provider;
 export default Popover;
 //# sourceMappingURL=index.js.map