@wordpress/components 22.0.0 → 23.0.0

package/build-module/range-control/styles/range-control-styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/range-control/styles/range-control-styles.ts"],"names":["css","NumberControl","COLORS","reduceMotion","rtl","space","rangeHeightValue","railHeight","rangeHeight","height","minHeight","thumbSize","Root","wrapperColor","color","ui","borderFocus","wrapperMargin","marks","__nextHasNoMarginBottom","marginBottom","undefined","Wrapper","BeforeIconWrapper","marginRight","AfterIconWrapper","marginLeft","railBackgroundColor","disabled","railColor","background","backgroundDisabled","Rail","gray","trackBackgroundColor","trackColor","Track","MarksWrapper","markFill","isFilled","backgroundColor","Mark","markLabelFill","MarkLabel","thumbColor","ThumbWrapper","transform","thumbFocus","isFocused","Thumb","InputRange","tooltipShow","show","opacity","tooltipPosition","position","isBottom","Tooltip","InputNumber","ActionRightWrapper"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport NumberControl from '../../number-control';\nimport { COLORS, reduceMotion, rtl } from '../../utils';\nimport { space } from '../../ui/utils/space';\n\nimport type {\n\tRangeMarkProps,\n\tRailProps,\n\tThumbProps,\n\tTooltipProps,\n\tTrackProps,\n\tWrapperProps,\n} from '../types';\n\nconst rangeHeightValue = 30;\nconst railHeight = 4;\nconst rangeHeight = () =>\n\tcss( { height: rangeHeightValue, minHeight: rangeHeightValue } );\nconst thumbSize = 12;\n\nexport const Root = styled.div`\n\t-webkit-tap-highlight-color: transparent;\n\talign-items: flex-start;\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\tpadding: 0;\n\tposition: relative;\n\ttouch-action: none;\n\twidth: 100%;\n`;\n\nconst wrapperColor = ( { color = COLORS.ui.borderFocus }: WrapperProps ) =>\n\tcss( { color } );\n\nconst wrapperMargin = ( { marks, __nextHasNoMarginBottom }: WrapperProps ) => {\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\treturn css( { marginBottom: marks ? 16 : undefined } );\n\t}\n\treturn '';\n};\n\nexport const Wrapper = styled.div< WrapperProps >`\n\tdisplay: block;\n\tflex: 1;\n\tposition: relative;\n\twidth: 100%;\n\n\t${ wrapperColor };\n\t${ rangeHeight };\n\t${ wrapperMargin };\n`;\n\nexport const BeforeIconWrapper = styled.span`\n\tdisplay: flex; // ensures the height isn't affected by line-height\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginRight: 6 } ) }\n`;\n\nexport const AfterIconWrapper = styled.span`\n\tdisplay: flex; // ensures the height isn't affected by line-height\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginLeft: 6 } ) }\n`;\n\nconst railBackgroundColor = ( { disabled, railColor }: RailProps ) => {\n\tlet background = railColor || '';\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.ui.backgroundDisabled;\n\t}\n\n\treturn css( { background } );\n};\n\nexport const Rail = styled.span`\n\tbackground-color: ${ COLORS.gray[ 300 ] };\n\tleft: 0;\n\tpointer-events: none;\n\tright: 0;\n\tdisplay: block;\n\theight: ${ railHeight }px;\n\tposition: absolute;\n\tmargin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;\n\ttop: 0;\n\tborder-radius: ${ railHeight }px;\n\n\t${ railBackgroundColor };\n`;\n\nconst trackBackgroundColor = ( { disabled, trackColor }: TrackProps ) => {\n\tlet background = trackColor || 'currentColor';\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.gray[ 400 ];\n\t}\n\n\treturn css( { background } );\n};\n\nexport const Track = styled.span`\n\tbackground-color: currentColor;\n\tborder-radius: ${ railHeight }px;\n\theight: ${ railHeight }px;\n\tpointer-events: none;\n\tdisplay: block;\n\tposition: absolute;\n\tmargin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;\n\ttop: 0;\n\n\t${ trackBackgroundColor };\n`;\n\nexport const MarksWrapper = styled.span`\n\tdisplay: block;\n\tpointer-events: none;\n\tposition: relative;\n\twidth: 100%;\n\tuser-select: none;\n`;\n\nconst markFill = ( { disabled, isFilled }: RangeMarkProps ) => {\n\tlet backgroundColor = isFilled ? 'currentColor' : COLORS.gray[ 300 ];\n\n\tif ( disabled ) {\n\t\tbackgroundColor = COLORS.gray[ 400 ];\n\t}\n\n\treturn css( {\n\t\tbackgroundColor,\n\t} );\n};\n\nexport const Mark = styled.span`\n\theight: ${ thumbSize }px;\n\tleft: 0;\n\tposition: absolute;\n\ttop: -4px;\n\twidth: 1px;\n\n\t${ markFill };\n`;\n\nconst markLabelFill = ( { isFilled }: RangeMarkProps ) => {\n\treturn css( {\n\t\tcolor: isFilled ? COLORS.gray[ 700 ] : COLORS.gray[ 300 ],\n\t} );\n};\n\nexport const MarkLabel = styled.span`\n\tcolor: ${ COLORS.gray[ 300 ] };\n\tleft: 0;\n\tfont-size: 11px;\n\tposition: absolute;\n\ttop: 12px;\n\ttransform: translateX( -50% );\n\twhite-space: nowrap;\n\n\t${ markLabelFill };\n`;\n\nconst thumbColor = ( { disabled }: ThumbProps ) =>\n\tdisabled\n\t\t? css`\n\t\t\t\tbackground-color: ${ COLORS.gray[ 400 ] };\n\t\t  `\n\t\t: css`\n\t\t\t\tbackground-color: var( --wp-admin-theme-color );\n\t\t  `;\n\nexport const ThumbWrapper = styled.span`\n\talign-items: center;\n\tdisplay: flex;\n\theight: ${ thumbSize }px;\n\tjustify-content: center;\n\tmargin-top: ${ ( rangeHeightValue - thumbSize ) / 2 }px;\n\toutline: 0;\n\tpointer-events: none;\n\tposition: absolute;\n\ttop: 0;\n\tuser-select: none;\n\twidth: ${ thumbSize }px;\n\tborder-radius: 50%;\n\n\t${ thumbColor };\n\t${ rtl( { marginLeft: -10 } ) };\n\t${ rtl(\n\t\t{ transform: 'translateX( 4.5px )' },\n\t\t{ transform: 'translateX( -4.5px )' }\n\t) };\n`;\n\nconst thumbFocus = ( { isFocused }: ThumbProps ) => {\n\treturn isFocused\n\t\t? css`\n\t\t\t\t&::before {\n\t\t\t\t\tcontent: ' ';\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tbackground-color: var( --wp-admin-theme-color );\n\t\t\t\t\topacity: 0.4;\n\t\t\t\t\tborder-radius: 50%;\n\t\t\t\t\theight: ${ thumbSize + 8 }px;\n\t\t\t\t\twidth: ${ thumbSize + 8 }px;\n\t\t\t\t\ttop: -4px;\n\t\t\t\t\tleft: -4px;\n\t\t\t\t}\n\t\t  `\n\t\t: '';\n};\n\nexport const Thumb = styled.span< ThumbProps >`\n\talign-items: center;\n\tborder-radius: 50%;\n\theight: 100%;\n\toutline: 0;\n\tposition: absolute;\n\tuser-select: none;\n\twidth: 100%;\n\n\t${ thumbColor };\n\t${ thumbFocus };\n`;\n\nexport const InputRange = styled.input`\n\tbox-sizing: border-box;\n\tcursor: pointer;\n\tdisplay: block;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0 -${ thumbSize / 2 }px;\n\topacity: 0;\n\toutline: none;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\twidth: calc( 100% + ${ thumbSize }px );\n`;\n\nconst tooltipShow = ( { show }: TooltipProps ) => {\n\treturn css( {\n\t\topacity: show ? 1 : 0,\n\t} );\n};\n\nconst tooltipPosition = ( { position }: TooltipProps ) => {\n\tconst isBottom = position === 'bottom';\n\n\tif ( isBottom ) {\n\t\treturn css`\n\t\t\tbottom: -80%;\n\t\t`;\n\t}\n\n\treturn css`\n\t\ttop: -80%;\n\t`;\n};\n\nexport const Tooltip = styled.span< TooltipProps >`\n\tbackground: rgba( 0, 0, 0, 0.8 );\n\tborder-radius: 2px;\n\tcolor: white;\n\tdisplay: inline-block;\n\tfont-size: 12px;\n\tmin-width: 32px;\n\topacity: 0;\n\tpadding: 4px 8px;\n\tpointer-events: none;\n\tposition: absolute;\n\ttext-align: center;\n\ttransition: opacity 120ms ease;\n\tuser-select: none;\n\tline-height: 1.4;\n\n\t${ tooltipShow };\n\t${ tooltipPosition };\n\t${ reduceMotion( 'transition' ) };\n\t${ rtl(\n\t\t{ transform: 'translateX(-50%)' },\n\t\t{ transform: 'translateX(50%)' }\n\t) }\n`;\n\n// @todo: Refactor RangeControl with latest HStack configuration\n// @wordpress/components/ui/hstack.\nexport const InputNumber = styled( NumberControl )`\n\tdisplay: inline-block;\n\tfont-size: 13px;\n\tmargin-top: 0;\n\twidth: ${ space( 16 ) } !important;\n\n\tinput[type='number']& {\n\t\t${ rangeHeight };\n\t}\n\n\t${ rtl( { marginLeft: `${ space( 4 ) } !important` } ) }\n`;\n\nexport const ActionRightWrapper = styled.span`\n\tdisplay: block;\n\tmargin-top: 0;\n\n\tbutton,\n\tbutton.is-small {\n\t\tmargin-left: 0;\n\t\t${ rangeHeight };\n\t}\n\n\t${ rtl( { marginLeft: 8 } ) }\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/range-control/styles/range-control-styles.ts"],"names":["css","NumberControl","COLORS","reduceMotion","rtl","space","rangeHeightValue","railHeight","rangeHeight","height","minHeight","thumbSize","Root","wrapperColor","color","ui","borderFocus","wrapperMargin","marks","__nextHasNoMarginBottom","marginBottom","undefined","Wrapper","BeforeIconWrapper","marginRight","AfterIconWrapper","marginLeft","railBackgroundColor","disabled","railColor","background","backgroundDisabled","Rail","gray","trackBackgroundColor","trackColor","Track","MarksWrapper","markFill","isFilled","backgroundColor","Mark","markLabelFill","MarkLabel","thumbColor","theme","ThumbWrapper","transform","thumbFocus","isFocused","Thumb","InputRange","tooltipShow","show","opacity","tooltipPosition","position","isBottom","Tooltip","InputNumber","ActionRightWrapper"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\n\n/**\n * Internal dependencies\n */\nimport NumberControl from '../../number-control';\nimport { COLORS, reduceMotion, rtl } from '../../utils';\nimport { space } from '../../ui/utils/space';\n\nimport type {\n\tRangeMarkProps,\n\tRailProps,\n\tThumbProps,\n\tTooltipProps,\n\tTrackProps,\n\tWrapperProps,\n} from '../types';\n\nconst rangeHeightValue = 30;\nconst railHeight = 4;\nconst rangeHeight = () =>\n\tcss( { height: rangeHeightValue, minHeight: rangeHeightValue } );\nconst thumbSize = 12;\n\nexport const Root = styled.div`\n\t-webkit-tap-highlight-color: transparent;\n\talign-items: flex-start;\n\tdisplay: flex;\n\tjustify-content: flex-start;\n\tpadding: 0;\n\tposition: relative;\n\ttouch-action: none;\n\twidth: 100%;\n`;\n\nconst wrapperColor = ( { color = COLORS.ui.borderFocus }: WrapperProps ) =>\n\tcss( { color } );\n\nconst wrapperMargin = ( { marks, __nextHasNoMarginBottom }: WrapperProps ) => {\n\tif ( ! __nextHasNoMarginBottom ) {\n\t\treturn css( { marginBottom: marks ? 16 : undefined } );\n\t}\n\treturn '';\n};\n\nexport const Wrapper = styled.div< WrapperProps >`\n\tdisplay: block;\n\tflex: 1;\n\tposition: relative;\n\twidth: 100%;\n\n\t${ wrapperColor };\n\t${ rangeHeight };\n\t${ wrapperMargin };\n`;\n\nexport const BeforeIconWrapper = styled.span`\n\tdisplay: flex; // ensures the height isn't affected by line-height\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginRight: 6 } ) }\n`;\n\nexport const AfterIconWrapper = styled.span`\n\tdisplay: flex; // ensures the height isn't affected by line-height\n\tmargin-top: ${ railHeight }px;\n\n\t${ rtl( { marginLeft: 6 } ) }\n`;\n\nconst railBackgroundColor = ( { disabled, railColor }: RailProps ) => {\n\tlet background = railColor || '';\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.ui.backgroundDisabled;\n\t}\n\n\treturn css( { background } );\n};\n\nexport const Rail = styled.span`\n\tbackground-color: ${ COLORS.gray[ 300 ] };\n\tleft: 0;\n\tpointer-events: none;\n\tright: 0;\n\tdisplay: block;\n\theight: ${ railHeight }px;\n\tposition: absolute;\n\tmargin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;\n\ttop: 0;\n\tborder-radius: ${ railHeight }px;\n\n\t${ railBackgroundColor };\n`;\n\nconst trackBackgroundColor = ( { disabled, trackColor }: TrackProps ) => {\n\tlet background = trackColor || 'currentColor';\n\n\tif ( disabled ) {\n\t\tbackground = COLORS.gray[ 400 ];\n\t}\n\n\treturn css( { background } );\n};\n\nexport const Track = styled.span`\n\tbackground-color: currentColor;\n\tborder-radius: ${ railHeight }px;\n\theight: ${ railHeight }px;\n\tpointer-events: none;\n\tdisplay: block;\n\tposition: absolute;\n\tmargin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;\n\ttop: 0;\n\n\t${ trackBackgroundColor };\n`;\n\nexport const MarksWrapper = styled.span`\n\tdisplay: block;\n\tpointer-events: none;\n\tposition: relative;\n\twidth: 100%;\n\tuser-select: none;\n`;\n\nconst markFill = ( { disabled, isFilled }: RangeMarkProps ) => {\n\tlet backgroundColor = isFilled ? 'currentColor' : COLORS.gray[ 300 ];\n\n\tif ( disabled ) {\n\t\tbackgroundColor = COLORS.gray[ 400 ];\n\t}\n\n\treturn css( {\n\t\tbackgroundColor,\n\t} );\n};\n\nexport const Mark = styled.span`\n\theight: ${ thumbSize }px;\n\tleft: 0;\n\tposition: absolute;\n\ttop: -4px;\n\twidth: 1px;\n\n\t${ markFill };\n`;\n\nconst markLabelFill = ( { isFilled }: RangeMarkProps ) => {\n\treturn css( {\n\t\tcolor: isFilled ? COLORS.gray[ 700 ] : COLORS.gray[ 300 ],\n\t} );\n};\n\nexport const MarkLabel = styled.span`\n\tcolor: ${ COLORS.gray[ 300 ] };\n\tleft: 0;\n\tfont-size: 11px;\n\tposition: absolute;\n\ttop: 12px;\n\ttransform: translateX( -50% );\n\twhite-space: nowrap;\n\n\t${ markLabelFill };\n`;\n\nconst thumbColor = ( { disabled }: ThumbProps ) =>\n\tdisabled\n\t\t? css`\n\t\t\t\tbackground-color: ${ COLORS.gray[ 400 ] };\n\t\t  `\n\t\t: css`\n\t\t\t\tbackground-color: ${ COLORS.ui.theme };\n\t\t  `;\n\nexport const ThumbWrapper = styled.span`\n\talign-items: center;\n\tdisplay: flex;\n\theight: ${ thumbSize }px;\n\tjustify-content: center;\n\tmargin-top: ${ ( rangeHeightValue - thumbSize ) / 2 }px;\n\toutline: 0;\n\tpointer-events: none;\n\tposition: absolute;\n\ttop: 0;\n\tuser-select: none;\n\twidth: ${ thumbSize }px;\n\tborder-radius: 50%;\n\n\t${ thumbColor };\n\t${ rtl( { marginLeft: -10 } ) };\n\t${ rtl(\n\t\t{ transform: 'translateX( 4.5px )' },\n\t\t{ transform: 'translateX( -4.5px )' }\n\t) };\n`;\n\nconst thumbFocus = ( { isFocused }: ThumbProps ) => {\n\treturn isFocused\n\t\t? css`\n\t\t\t\t&::before {\n\t\t\t\t\tcontent: ' ';\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tbackground-color: ${ COLORS.ui.theme };\n\t\t\t\t\topacity: 0.4;\n\t\t\t\t\tborder-radius: 50%;\n\t\t\t\t\theight: ${ thumbSize + 8 }px;\n\t\t\t\t\twidth: ${ thumbSize + 8 }px;\n\t\t\t\t\ttop: -4px;\n\t\t\t\t\tleft: -4px;\n\t\t\t\t}\n\t\t  `\n\t\t: '';\n};\n\nexport const Thumb = styled.span< ThumbProps >`\n\talign-items: center;\n\tborder-radius: 50%;\n\theight: 100%;\n\toutline: 0;\n\tposition: absolute;\n\tuser-select: none;\n\twidth: 100%;\n\n\t${ thumbColor };\n\t${ thumbFocus };\n`;\n\nexport const InputRange = styled.input`\n\tbox-sizing: border-box;\n\tcursor: pointer;\n\tdisplay: block;\n\theight: 100%;\n\tleft: 0;\n\tmargin: 0 -${ thumbSize / 2 }px;\n\topacity: 0;\n\toutline: none;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\twidth: calc( 100% + ${ thumbSize }px );\n`;\n\nconst tooltipShow = ( { show }: TooltipProps ) => {\n\treturn css( {\n\t\topacity: show ? 1 : 0,\n\t} );\n};\n\nconst tooltipPosition = ( { position }: TooltipProps ) => {\n\tconst isBottom = position === 'bottom';\n\n\tif ( isBottom ) {\n\t\treturn css`\n\t\t\tbottom: -80%;\n\t\t`;\n\t}\n\n\treturn css`\n\t\ttop: -80%;\n\t`;\n};\n\nexport const Tooltip = styled.span< TooltipProps >`\n\tbackground: rgba( 0, 0, 0, 0.8 );\n\tborder-radius: 2px;\n\tcolor: white;\n\tdisplay: inline-block;\n\tfont-size: 12px;\n\tmin-width: 32px;\n\topacity: 0;\n\tpadding: 4px 8px;\n\tpointer-events: none;\n\tposition: absolute;\n\ttext-align: center;\n\ttransition: opacity 120ms ease;\n\tuser-select: none;\n\tline-height: 1.4;\n\n\t${ tooltipShow };\n\t${ tooltipPosition };\n\t${ reduceMotion( 'transition' ) };\n\t${ rtl(\n\t\t{ transform: 'translateX(-50%)' },\n\t\t{ transform: 'translateX(50%)' }\n\t) }\n`;\n\n// @todo: Refactor RangeControl with latest HStack configuration\n// @wordpress/components/ui/hstack.\nexport const InputNumber = styled( NumberControl )`\n\tdisplay: inline-block;\n\tfont-size: 13px;\n\tmargin-top: 0;\n\twidth: ${ space( 16 ) } !important;\n\n\tinput[type='number']& {\n\t\t${ rangeHeight };\n\t}\n\n\t${ rtl( { marginLeft: `${ space( 4 ) } !important` } ) }\n`;\n\nexport const ActionRightWrapper = styled.span`\n\tdisplay: block;\n\tmargin-top: 0;\n\n\tbutton,\n\tbutton.is-small {\n\t\tmargin-left: 0;\n\t\t${ rangeHeight };\n\t}\n\n\t${ rtl( { marginLeft: 8 } ) }\n`;\n"]}

package/build-module/snackbar/index.js

@@ -16,19 +16,14 @@ import warning from '@wordpress/warning';
  * Internal dependencies
  */
 
-import { Button } from '../';
-
-const noop = () => {};
-
+import Button from '../button';
 const NOTICE_TIMEOUT = 10000;
-/** @typedef {import('@wordpress/element').WPElement} WPElement */
-
 /**
  * Custom hook which announces the message with the given politeness, if a
  * valid message is provided.
  *
- * @param {string|WPElement}     [message]  Message to announce.
- * @param {'polite'|'assertive'} politeness Politeness to announce.
+ * @param  message    Message to announce.
+ * @param  politeness Politeness to announce.
  */
 
 function useSpokenMessage(message, politeness) {
@@ -40,38 +35,39 @@ function useSpokenMessage(message, politeness) {
   }, [spokenMessage, politeness]);
 }
 
-function Snackbar(_ref, ref) {
+function UnforwardedSnackbar(_ref, ref) {
   let {
     className,
     children,
     spokenMessage = children,
     politeness = 'polite',
     actions = [],
-    onRemove = noop,
+    onRemove,
     icon = null,
     explicitDismiss = false,
     // onDismiss is a callback executed when the snackbar is dismissed.
     // It is distinct from onRemove, which _looks_ like a callback but is
     // actually the function to call to remove the snackbar from the UI.
-    onDismiss = noop,
+    onDismiss,
     listRef
   } = _ref;
-  onDismiss = onDismiss || noop;
 
   function dismissMe(event) {
+    var _listRef$current;
+
     if (event && event.preventDefault) {
       event.preventDefault();
     } // Prevent focus loss by moving it to the list element.
 
 
-    listRef.current.focus();
-    onDismiss();
-    onRemove();
+    listRef === null || listRef === void 0 ? void 0 : (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.focus();
+    onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+    onRemove === null || onRemove === void 0 ? void 0 : onRemove();
   }
 
   function onActionClick(event, onClick) {
     event.stopPropagation();
-    onRemove();
+    onRemove === null || onRemove === void 0 ? void 0 : onRemove();
 
     if (onClick) {
       onClick(event);
@@ -83,8 +79,8 @@ function Snackbar(_ref, ref) {
   useEffect(() => {
     const timeoutHandle = setTimeout(() => {
       if (!explicitDismiss) {
-        onDismiss();
-        onRemove();
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+        onRemove === null || onRemove === void 0 ? void 0 : onRemove();
       }
     }, NOTICE_TIMEOUT);
     return () => clearTimeout(timeoutHandle);
@@ -106,10 +102,10 @@ function Snackbar(_ref, ref) {
   return createElement("div", {
     ref: ref,
     className: classes,
-    onClick: !explicitDismiss ? dismissMe : noop,
-    tabIndex: "0",
+    onClick: !explicitDismiss ? dismissMe : undefined,
+    tabIndex: 0,
     role: !explicitDismiss ? 'button' : '',
-    onKeyPress: !explicitDismiss ? dismissMe : noop,
+    onKeyPress: !explicitDismiss ? dismissMe : undefined,
     "aria-label": !explicitDismiss ? __('Dismiss this notice') : ''
   }, createElement("div", {
     className: snackbarContentClassnames
@@ -131,12 +127,26 @@ function Snackbar(_ref, ref) {
   }), explicitDismiss && createElement("span", {
     role: "button",
     "aria-label": "Dismiss this notice",
-    tabIndex: "0",
+    tabIndex: 0,
     className: "components-snackbar__dismiss-button",
     onClick: dismissMe,
     onKeyPress: dismissMe
   }, "\u2715")));
 }
+/**
+ * A Snackbar displays a succinct message that is cleared out after a small delay.
+ *
+ * It can also offer the user options, like viewing a published post.
+ * But these options should also be available elsewhere in the UI.
+ *
+ * ```jsx
+ * const MySnackbarNotice = () => (
+ *   <Snackbar>Post published successfully.</Snackbar>
+ * );
+ * ```
+ */
+
 
-export default forwardRef(Snackbar);
+export const Snackbar = forwardRef(UnforwardedSnackbar);
+export default Snackbar;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/snackbar/index.js"],"names":["classnames","speak","useEffect","forwardRef","renderToString","__","warning","Button","noop","NOTICE_TIMEOUT","useSpokenMessage","message","politeness","spokenMessage","Snackbar","ref","className","children","actions","onRemove","icon","explicitDismiss","onDismiss","listRef","dismissMe","event","preventDefault","current","focus","onActionClick","onClick","stopPropagation","timeoutHandle","setTimeout","clearTimeout","classes","length","snackbarContentClassnames","map","index","label","url"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { speak } from '@wordpress/a11y';\nimport { useEffect, forwardRef, renderToString } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport { Button } from '../';\n\nconst noop = () => {};\nconst NOTICE_TIMEOUT = 10000;\n\n/** @typedef {import('@wordpress/element').WPElement} WPElement */\n\n/**\n * Custom hook which announces the message with the given politeness, if a\n * valid message is provided.\n *\n * @param {string|WPElement}     [message]  Message to announce.\n * @param {'polite'|'assertive'} politeness Politeness to announce.\n */\nfunction useSpokenMessage( message, politeness ) {\n\tconst spokenMessage =\n\t\ttypeof message === 'string' ? message : renderToString( message );\n\n\tuseEffect( () => {\n\t\tif ( spokenMessage ) {\n\t\t\tspeak( spokenMessage, politeness );\n\t\t}\n\t}, [ spokenMessage, politeness ] );\n}\n\nfunction Snackbar(\n\t{\n\t\tclassName,\n\t\tchildren,\n\t\tspokenMessage = children,\n\t\tpoliteness = 'polite',\n\t\tactions = [],\n\t\tonRemove = noop,\n\t\ticon = null,\n\t\texplicitDismiss = false,\n\t\t// onDismiss is a callback executed when the snackbar is dismissed.\n\t\t// It is distinct from onRemove, which _looks_ like a callback but is\n\t\t// actually the function to call to remove the snackbar from the UI.\n\t\tonDismiss = noop,\n\t\tlistRef,\n\t},\n\tref\n) {\n\tonDismiss = onDismiss || noop;\n\n\tfunction dismissMe( event ) {\n\t\tif ( event && event.preventDefault ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\n\t\t// Prevent focus loss by moving it to the list element.\n\t\tlistRef.current.focus();\n\n\t\tonDismiss();\n\t\tonRemove();\n\t}\n\n\tfunction onActionClick( event, onClick ) {\n\t\tevent.stopPropagation();\n\n\t\tonRemove();\n\n\t\tif ( onClick ) {\n\t\t\tonClick( event );\n\t\t}\n\t}\n\n\tuseSpokenMessage( spokenMessage, politeness );\n\n\t// Only set up the timeout dismiss if we're not explicitly dismissing.\n\tuseEffect( () => {\n\t\tconst timeoutHandle = setTimeout( () => {\n\t\t\tif ( ! explicitDismiss ) {\n\t\t\t\tonDismiss();\n\t\t\t\tonRemove();\n\t\t\t}\n\t\t}, NOTICE_TIMEOUT );\n\n\t\treturn () => clearTimeout( timeoutHandle );\n\t}, [ onDismiss, onRemove, explicitDismiss ] );\n\n\tconst classes = classnames( className, 'components-snackbar', {\n\t\t'components-snackbar-explicit-dismiss': !! explicitDismiss,\n\t} );\n\tif ( actions && actions.length > 1 ) {\n\t\t// We need to inform developers that snackbar only accepts 1 action.\n\t\twarning(\n\t\t\t'Snackbar can only have 1 action, use Notice if your message require many messages'\n\t\t);\n\t\t// return first element only while keeping it inside an array\n\t\tactions = [ actions[ 0 ] ];\n\t}\n\n\tconst snackbarContentClassnames = classnames(\n\t\t'components-snackbar__content',\n\t\t{\n\t\t\t'components-snackbar__content-with-icon': !! icon,\n\t\t}\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ classes }\n\t\t\tonClick={ ! explicitDismiss ? dismissMe : noop }\n\t\t\ttabIndex=\"0\"\n\t\t\trole={ ! explicitDismiss ? 'button' : '' }\n\t\t\tonKeyPress={ ! explicitDismiss ? dismissMe : noop }\n\t\t\taria-label={ ! explicitDismiss ? __( 'Dismiss this notice' ) : '' }\n\t\t>\n\t\t\t<div className={ snackbarContentClassnames }>\n\t\t\t\t{ icon && (\n\t\t\t\t\t<div className=\"components-snackbar__icon\">{ icon }</div>\n\t\t\t\t) }\n\t\t\t\t{ children }\n\t\t\t\t{ actions.map( ( { label, onClick, url }, index ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\thref={ url }\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ ( event ) =>\n\t\t\t\t\t\t\t\tonActionClick( event, onClick )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tclassName=\"components-snackbar__action\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ explicitDismiss && (\n\t\t\t\t\t<span\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\taria-label=\"Dismiss this notice\"\n\t\t\t\t\t\ttabIndex=\"0\"\n\t\t\t\t\t\tclassName=\"components-snackbar__dismiss-button\"\n\t\t\t\t\t\tonClick={ dismissMe }\n\t\t\t\t\t\tonKeyPress={ dismissMe }\n\t\t\t\t\t>\n\t\t\t\t\t\t&#x2715;\n\t\t\t\t\t</span>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( Snackbar );\n"]}
+{"version":3,"sources":["@wordpress/components/src/snackbar/index.tsx"],"names":["classnames","speak","useEffect","forwardRef","renderToString","__","warning","Button","NOTICE_TIMEOUT","useSpokenMessage","message","politeness","spokenMessage","UnforwardedSnackbar","ref","className","children","actions","onRemove","icon","explicitDismiss","onDismiss","listRef","dismissMe","event","preventDefault","current","focus","onActionClick","onClick","stopPropagation","timeoutHandle","setTimeout","clearTimeout","classes","length","snackbarContentClassnames","undefined","map","index","label","url","Snackbar"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef, KeyboardEvent, MouseEvent } from 'react';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { speak } from '@wordpress/a11y';\nimport { useEffect, forwardRef, renderToString } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport warning from '@wordpress/warning';\n\n/**\n * Internal dependencies\n */\nimport Button from '../button';\nimport type { NoticeAction, SnackbarProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst NOTICE_TIMEOUT = 10000;\n\n/**\n * Custom hook which announces the message with the given politeness, if a\n * valid message is provided.\n *\n * @param  message    Message to announce.\n * @param  politeness Politeness to announce.\n */\nfunction useSpokenMessage(\n\tmessage: SnackbarProps[ 'spokenMessage' ],\n\tpoliteness: NonNullable< SnackbarProps[ 'politeness' ] >\n) {\n\tconst spokenMessage =\n\t\ttypeof message === 'string' ? message : renderToString( message );\n\n\tuseEffect( () => {\n\t\tif ( spokenMessage ) {\n\t\t\tspeak( spokenMessage, politeness );\n\t\t}\n\t}, [ spokenMessage, politeness ] );\n}\n\nfunction UnforwardedSnackbar(\n\t{\n\t\tclassName,\n\t\tchildren,\n\t\tspokenMessage = children,\n\t\tpoliteness = 'polite',\n\t\tactions = [],\n\t\tonRemove,\n\t\ticon = null,\n\t\texplicitDismiss = false,\n\t\t// onDismiss is a callback executed when the snackbar is dismissed.\n\t\t// It is distinct from onRemove, which _looks_ like a callback but is\n\t\t// actually the function to call to remove the snackbar from the UI.\n\t\tonDismiss,\n\t\tlistRef,\n\t}: WordPressComponentProps< SnackbarProps, 'div' >,\n\tref: ForwardedRef< any >\n) {\n\tfunction dismissMe( event: KeyboardEvent | MouseEvent ) {\n\t\tif ( event && event.preventDefault ) {\n\t\t\tevent.preventDefault();\n\t\t}\n\n\t\t// Prevent focus loss by moving it to the list element.\n\t\tlistRef?.current?.focus();\n\n\t\tonDismiss?.();\n\t\tonRemove?.();\n\t}\n\n\tfunction onActionClick(\n\t\tevent: MouseEvent,\n\t\tonClick: NoticeAction[ 'onClick' ]\n\t) {\n\t\tevent.stopPropagation();\n\n\t\tonRemove?.();\n\n\t\tif ( onClick ) {\n\t\t\tonClick( event );\n\t\t}\n\t}\n\n\tuseSpokenMessage( spokenMessage, politeness );\n\n\t// Only set up the timeout dismiss if we're not explicitly dismissing.\n\tuseEffect( () => {\n\t\tconst timeoutHandle = setTimeout( () => {\n\t\t\tif ( ! explicitDismiss ) {\n\t\t\t\tonDismiss?.();\n\t\t\t\tonRemove?.();\n\t\t\t}\n\t\t}, NOTICE_TIMEOUT );\n\n\t\treturn () => clearTimeout( timeoutHandle );\n\t}, [ onDismiss, onRemove, explicitDismiss ] );\n\n\tconst classes = classnames( className, 'components-snackbar', {\n\t\t'components-snackbar-explicit-dismiss': !! explicitDismiss,\n\t} );\n\tif ( actions && actions.length > 1 ) {\n\t\t// We need to inform developers that snackbar only accepts 1 action.\n\t\twarning(\n\t\t\t'Snackbar can only have 1 action, use Notice if your message require many messages'\n\t\t);\n\t\t// return first element only while keeping it inside an array\n\t\tactions = [ actions[ 0 ] ];\n\t}\n\n\tconst snackbarContentClassnames = classnames(\n\t\t'components-snackbar__content',\n\t\t{\n\t\t\t'components-snackbar__content-with-icon': !! icon,\n\t\t}\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ classes }\n\t\t\tonClick={ ! explicitDismiss ? dismissMe : undefined }\n\t\t\ttabIndex={ 0 }\n\t\t\trole={ ! explicitDismiss ? 'button' : '' }\n\t\t\tonKeyPress={ ! explicitDismiss ? dismissMe : undefined }\n\t\t\taria-label={ ! explicitDismiss ? __( 'Dismiss this notice' ) : '' }\n\t\t>\n\t\t\t<div className={ snackbarContentClassnames }>\n\t\t\t\t{ icon && (\n\t\t\t\t\t<div className=\"components-snackbar__icon\">{ icon }</div>\n\t\t\t\t) }\n\t\t\t\t{ children }\n\t\t\t\t{ actions.map( ( { label, onClick, url }, index ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\thref={ url }\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tonClick={ ( event: MouseEvent ) =>\n\t\t\t\t\t\t\t\tonActionClick( event, onClick )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tclassName=\"components-snackbar__action\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t\t{ explicitDismiss && (\n\t\t\t\t\t<span\n\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\taria-label=\"Dismiss this notice\"\n\t\t\t\t\t\ttabIndex={ 0 }\n\t\t\t\t\t\tclassName=\"components-snackbar__dismiss-button\"\n\t\t\t\t\t\tonClick={ dismissMe }\n\t\t\t\t\t\tonKeyPress={ dismissMe }\n\t\t\t\t\t>\n\t\t\t\t\t\t&#x2715;\n\t\t\t\t\t</span>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\n/**\n * A Snackbar displays a succinct message that is cleared out after a small delay.\n *\n * It can also offer the user options, like viewing a published post.\n * But these options should also be available elsewhere in the UI.\n *\n * ```jsx\n * const MySnackbarNotice = () => (\n *   <Snackbar>Post published successfully.</Snackbar>\n * );\n * ```\n */\nexport const Snackbar = forwardRef( UnforwardedSnackbar );\n\nexport default Snackbar;\n"]}

package/build-module/snackbar/list.js

@@ -15,11 +15,8 @@ import { useRef } from '@wordpress/element';
  * Internal dependencies
  */
 
-import Snackbar from './';
+import Snackbar from '.';
 import { __unstableMotion as motion, __unstableAnimatePresence as AnimatePresence } from '../animation';
-
-const noop = () => {};
-
 const SNACKBAR_VARIANTS = {
   init: {
     height: 0,
@@ -42,35 +39,31 @@ const SNACKBAR_VARIANTS = {
     }
   }
 };
-const SNACKBAR_REDUCE_MOTION_VARIANTS = {
-  init: false,
-  open: false,
-  exit: false
-};
 /**
  * Renders a list of notices.
  *
- * @param {Object}   $0           Props passed to the component.
- * @param {Array}    $0.notices   Array of notices to render.
- * @param {Function} $0.onRemove  Function called when a notice should be removed / dismissed.
- * @param {Object}   $0.className Name of the class used by the component.
- * @param {Object}   $0.children  Array of children to be rendered inside the notice list.
- *
- * @return {Object} The rendered notices list.
+ * ```jsx
+ * const MySnackbarListNotice = () => (
+ *   <SnackbarList
+ *     notices={ notices }
+ *     onRemove={ removeNotice }
+ *   />
+ * );
+ * ```
  */
 
-function SnackbarList(_ref) {
+export function SnackbarList(_ref) {
   let {
     notices,
     className,
     children,
-    onRemove = noop
+    onRemove
   } = _ref;
-  const listRef = useRef();
+  const listRef = useRef(null);
   const isReducedMotion = useReducedMotion();
   className = classnames('components-snackbar-list', className);
 
-  const removeNotice = notice => () => onRemove(notice.id);
+  const removeNotice = notice => () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(notice.id);
 
   return createElement("div", {
     className: className,
@@ -88,7 +81,7 @@ function SnackbarList(_ref) {
       animate: 'open',
       exit: 'exit',
       key: notice.id,
-      variants: isReducedMotion ? SNACKBAR_REDUCE_MOTION_VARIANTS : SNACKBAR_VARIANTS
+      variants: isReducedMotion ? undefined : SNACKBAR_VARIANTS
     }, createElement("div", {
       className: "components-snackbar-list__notice-container"
     }, createElement(Snackbar, _extends({}, restNotice, {
@@ -97,6 +90,5 @@ function SnackbarList(_ref) {
     }), notice.content)));
   })));
 }
-
 export default SnackbarList;
 //# sourceMappingURL=list.js.map

package/build-module/snackbar/list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/snackbar/list.js"],"names":["classnames","useReducedMotion","useRef","Snackbar","__unstableMotion","motion","__unstableAnimatePresence","AnimatePresence","noop","SNACKBAR_VARIANTS","init","height","opacity","open","transition","stiffness","velocity","exit","duration","SNACKBAR_REDUCE_MOTION_VARIANTS","SnackbarList","notices","className","children","onRemove","listRef","isReducedMotion","removeNotice","notice","id","map","content","restNotice"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,gBAAT,QAAiC,oBAAjC;AACA,SAASC,MAAT,QAAuB,oBAAvB;AAEA;AACA;AACA;;AACA,OAAOC,QAAP,MAAqB,IAArB;AACA,SACCC,gBAAgB,IAAIC,MADrB,EAECC,yBAAyB,IAAIC,eAF9B,QAGO,cAHP;;AAKA,MAAMC,IAAI,GAAG,MAAM,CAAE,CAArB;;AACA,MAAMC,iBAAiB,GAAG;AACzBC,EAAAA,IAAI,EAAE;AACLC,IAAAA,MAAM,EAAE,CADH;AAELC,IAAAA,OAAO,EAAE;AAFJ,GADmB;AAKzBC,EAAAA,IAAI,EAAE;AACLF,IAAAA,MAAM,EAAE,MADH;AAELC,IAAAA,OAAO,EAAE,CAFJ;AAGLE,IAAAA,UAAU,EAAE;AACXH,MAAAA,MAAM,EAAE;AAAEI,QAAAA,SAAS,EAAE,IAAb;AAAmBC,QAAAA,QAAQ,EAAE,CAAC;AAA9B;AADG;AAHP,GALmB;AAYzBC,EAAAA,IAAI,EAAE;AACLL,IAAAA,OAAO,EAAE,CADJ;AAELE,IAAAA,UAAU,EAAE;AACXI,MAAAA,QAAQ,EAAE;AADC;AAFP;AAZmB,CAA1B;AAoBA,MAAMC,+BAA+B,GAAG;AACvCT,EAAAA,IAAI,EAAE,KADiC;AAEvCG,EAAAA,IAAI,EAAE,KAFiC;AAGvCI,EAAAA,IAAI,EAAE;AAHiC,CAAxC;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASG,YAAT,OAA2E;AAAA,MAApD;AAAEC,IAAAA,OAAF;AAAWC,IAAAA,SAAX;AAAsBC,IAAAA,QAAtB;AAAgCC,IAAAA,QAAQ,GAAGhB;AAA3C,GAAoD;AAC1E,QAAMiB,OAAO,GAAGvB,MAAM,EAAtB;AACA,QAAMwB,eAAe,GAAGzB,gBAAgB,EAAxC;AACAqB,EAAAA,SAAS,GAAGtB,UAAU,CAAE,0BAAF,EAA8BsB,SAA9B,CAAtB;;AACA,QAAMK,YAAY,GAAKC,MAAF,IAAc,MAAMJ,QAAQ,CAAEI,MAAM,CAACC,EAAT,CAAjD;;AACA,SACC;AAAK,IAAA,SAAS,EAAGP,SAAjB;AAA6B,IAAA,QAAQ,EAAG,CAAC,CAAzC;AAA6C,IAAA,GAAG,EAAGG;AAAnD,KACGF,QADH,EAEC,cAAC,eAAD,QACGF,OAAO,CAACS,GAAR,CAAeF,MAAF,IAAc;AAC5B,UAAM;AAAEG,MAAAA,OAAF;AAAW,SAAGC;AAAd,QAA6BJ,MAAnC;AAEA,WACC,cAAC,MAAD,CAAQ,GAAR;AACC,MAAA,MAAM,EAAG,CAAEF,eADZ,CAC8B;AAD9B;AAEC,MAAA,OAAO,EAAG,MAFX;AAGC,MAAA,OAAO,EAAG,MAHX;AAIC,MAAA,IAAI,EAAG,MAJR;AAKC,MAAA,GAAG,EAAGE,MAAM,CAACC,EALd;AAMC,MAAA,QAAQ,EACPH,eAAe,GACZP,+BADY,GAEZV;AATL,OAYC;AAAK,MAAA,SAAS,EAAC;AAAf,OACC,cAAC,QAAD,eACMuB,UADN;AAEC,MAAA,QAAQ,EAAGL,YAAY,CAAEC,MAAF,CAFxB;AAGC,MAAA,OAAO,EAAGH;AAHX,QAKGG,MAAM,CAACG,OALV,CADD,CAZD,CADD;AAwBA,GA3BC,CADH,CAFD,CADD;AAmCA;;AAED,eAAeX,YAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useReducedMotion } from '@wordpress/compose';\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Snackbar from './';\nimport {\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '../animation';\n\nconst noop = () => {};\nconst SNACKBAR_VARIANTS = {\n\tinit: {\n\t\theight: 0,\n\t\topacity: 0,\n\t},\n\topen: {\n\t\theight: 'auto',\n\t\topacity: 1,\n\t\ttransition: {\n\t\t\theight: { stiffness: 1000, velocity: -100 },\n\t\t},\n\t},\n\texit: {\n\t\topacity: 0,\n\t\ttransition: {\n\t\t\tduration: 0.5,\n\t\t},\n\t},\n};\n\nconst SNACKBAR_REDUCE_MOTION_VARIANTS = {\n\tinit: false,\n\topen: false,\n\texit: false,\n};\n\n/**\n * Renders a list of notices.\n *\n * @param {Object}   $0           Props passed to the component.\n * @param {Array}    $0.notices   Array of notices to render.\n * @param {Function} $0.onRemove  Function called when a notice should be removed / dismissed.\n * @param {Object}   $0.className Name of the class used by the component.\n * @param {Object}   $0.children  Array of children to be rendered inside the notice list.\n *\n * @return {Object} The rendered notices list.\n */\nfunction SnackbarList( { notices, className, children, onRemove = noop } ) {\n\tconst listRef = useRef();\n\tconst isReducedMotion = useReducedMotion();\n\tclassName = classnames( 'components-snackbar-list', className );\n\tconst removeNotice = ( notice ) => () => onRemove( notice.id );\n\treturn (\n\t\t<div className={ className } tabIndex={ -1 } ref={ listRef }>\n\t\t\t{ children }\n\t\t\t<AnimatePresence>\n\t\t\t\t{ notices.map( ( notice ) => {\n\t\t\t\t\tconst { content, ...restNotice } = notice;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tlayout={ ! isReducedMotion } // See https://www.framer.com/docs/animation/#layout-animations\n\t\t\t\t\t\t\tinitial={ 'init' }\n\t\t\t\t\t\t\tanimate={ 'open' }\n\t\t\t\t\t\t\texit={ 'exit' }\n\t\t\t\t\t\t\tkey={ notice.id }\n\t\t\t\t\t\t\tvariants={\n\t\t\t\t\t\t\t\tisReducedMotion\n\t\t\t\t\t\t\t\t\t? SNACKBAR_REDUCE_MOTION_VARIANTS\n\t\t\t\t\t\t\t\t\t: SNACKBAR_VARIANTS\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"components-snackbar-list__notice-container\">\n\t\t\t\t\t\t\t\t<Snackbar\n\t\t\t\t\t\t\t\t\t{ ...restNotice }\n\t\t\t\t\t\t\t\t\tonRemove={ removeNotice( notice ) }\n\t\t\t\t\t\t\t\t\tlistRef={ listRef }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ notice.content }\n\t\t\t\t\t\t\t\t</Snackbar>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</AnimatePresence>\n\t\t</div>\n\t);\n}\n\nexport default SnackbarList;\n"]}
+{"version":3,"sources":["@wordpress/components/src/snackbar/list.tsx"],"names":["classnames","useReducedMotion","useRef","Snackbar","__unstableMotion","motion","__unstableAnimatePresence","AnimatePresence","SNACKBAR_VARIANTS","init","height","opacity","open","transition","stiffness","velocity","exit","duration","SnackbarList","notices","className","children","onRemove","listRef","isReducedMotion","removeNotice","notice","id","map","content","restNotice","undefined"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,gBAAT,QAAiC,oBAAjC;AACA,SAASC,MAAT,QAAuB,oBAAvB;AAEA;AACA;AACA;;AACA,OAAOC,QAAP,MAAqB,GAArB;AACA,SACCC,gBAAgB,IAAIC,MADrB,EAECC,yBAAyB,IAAIC,eAF9B,QAGO,cAHP;AAOA,MAAMC,iBAAiB,GAAG;AACzBC,EAAAA,IAAI,EAAE;AACLC,IAAAA,MAAM,EAAE,CADH;AAELC,IAAAA,OAAO,EAAE;AAFJ,GADmB;AAKzBC,EAAAA,IAAI,EAAE;AACLF,IAAAA,MAAM,EAAE,MADH;AAELC,IAAAA,OAAO,EAAE,CAFJ;AAGLE,IAAAA,UAAU,EAAE;AACXH,MAAAA,MAAM,EAAE;AAAEI,QAAAA,SAAS,EAAE,IAAb;AAAmBC,QAAAA,QAAQ,EAAE,CAAC;AAA9B;AADG;AAHP,GALmB;AAYzBC,EAAAA,IAAI,EAAE;AACLL,IAAAA,OAAO,EAAE,CADJ;AAELE,IAAAA,UAAU,EAAE;AACXI,MAAAA,QAAQ,EAAE;AADC;AAFP;AAZmB,CAA1B;AAoBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,YAAT,OAKkD;AAAA,MAL3B;AAC7BC,IAAAA,OAD6B;AAE7BC,IAAAA,SAF6B;AAG7BC,IAAAA,QAH6B;AAI7BC,IAAAA;AAJ6B,GAK2B;AACxD,QAAMC,OAAO,GAAGrB,MAAM,CAA2B,IAA3B,CAAtB;AACA,QAAMsB,eAAe,GAAGvB,gBAAgB,EAAxC;AACAmB,EAAAA,SAAS,GAAGpB,UAAU,CAAE,0BAAF,EAA8BoB,SAA9B,CAAtB;;AACA,QAAMK,YAAY,GAAKC,MAAF,IAAsB,MAAMJ,QAAN,aAAMA,QAAN,uBAAMA,QAAQ,CAAII,MAAM,CAACC,EAAX,CAAzD;;AACA,SACC;AAAK,IAAA,SAAS,EAAGP,SAAjB;AAA6B,IAAA,QAAQ,EAAG,CAAC,CAAzC;AAA6C,IAAA,GAAG,EAAGG;AAAnD,KACGF,QADH,EAEC,cAAC,eAAD,QACGF,OAAO,CAACS,GAAR,CAAeF,MAAF,IAAc;AAC5B,UAAM;AAAEG,MAAAA,OAAF;AAAW,SAAGC;AAAd,QAA6BJ,MAAnC;AAEA,WACC,cAAC,MAAD,CAAQ,GAAR;AACC,MAAA,MAAM,EAAG,CAAEF,eADZ,CAC8B;AAD9B;AAEC,MAAA,OAAO,EAAG,MAFX;AAGC,MAAA,OAAO,EAAG,MAHX;AAIC,MAAA,IAAI,EAAG,MAJR;AAKC,MAAA,GAAG,EAAGE,MAAM,CAACC,EALd;AAMC,MAAA,QAAQ,EACPH,eAAe,GAAGO,SAAH,GAAevB;AAPhC,OAUC;AAAK,MAAA,SAAS,EAAC;AAAf,OACC,cAAC,QAAD,eACMsB,UADN;AAEC,MAAA,QAAQ,EAAGL,YAAY,CAAEC,MAAF,CAFxB;AAGC,MAAA,OAAO,EAAGH;AAHX,QAKGG,MAAM,CAACG,OALV,CADD,CAVD,CADD;AAsBA,GAzBC,CADH,CAFD,CADD;AAiCA;AAED,eAAeX,YAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useReducedMotion } from '@wordpress/compose';\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Snackbar from '.';\nimport {\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '../animation';\nimport type { Notice, SnackbarListProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst SNACKBAR_VARIANTS = {\n\tinit: {\n\t\theight: 0,\n\t\topacity: 0,\n\t},\n\topen: {\n\t\theight: 'auto',\n\t\topacity: 1,\n\t\ttransition: {\n\t\t\theight: { stiffness: 1000, velocity: -100 },\n\t\t},\n\t},\n\texit: {\n\t\topacity: 0,\n\t\ttransition: {\n\t\t\tduration: 0.5,\n\t\t},\n\t},\n};\n\n/**\n * Renders a list of notices.\n *\n * ```jsx\n * const MySnackbarListNotice = () => (\n *   <SnackbarList\n *     notices={ notices }\n *     onRemove={ removeNotice }\n *   />\n * );\n * ```\n */\nexport function SnackbarList( {\n\tnotices,\n\tclassName,\n\tchildren,\n\tonRemove,\n}: WordPressComponentProps< SnackbarListProps, 'div' > ) {\n\tconst listRef = useRef< HTMLDivElement | null >( null );\n\tconst isReducedMotion = useReducedMotion();\n\tclassName = classnames( 'components-snackbar-list', className );\n\tconst removeNotice = ( notice: Notice ) => () => onRemove?.( notice.id );\n\treturn (\n\t\t<div className={ className } tabIndex={ -1 } ref={ listRef }>\n\t\t\t{ children }\n\t\t\t<AnimatePresence>\n\t\t\t\t{ notices.map( ( notice ) => {\n\t\t\t\t\tconst { content, ...restNotice } = notice;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tlayout={ ! isReducedMotion } // See https://www.framer.com/docs/animation/#layout-animations\n\t\t\t\t\t\t\tinitial={ 'init' }\n\t\t\t\t\t\t\tanimate={ 'open' }\n\t\t\t\t\t\t\texit={ 'exit' }\n\t\t\t\t\t\t\tkey={ notice.id }\n\t\t\t\t\t\t\tvariants={\n\t\t\t\t\t\t\t\tisReducedMotion ? undefined : SNACKBAR_VARIANTS\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"components-snackbar-list__notice-container\">\n\t\t\t\t\t\t\t\t<Snackbar\n\t\t\t\t\t\t\t\t\t{ ...restNotice }\n\t\t\t\t\t\t\t\t\tonRemove={ removeNotice( notice ) }\n\t\t\t\t\t\t\t\t\tlistRef={ listRef }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ notice.content }\n\t\t\t\t\t\t\t\t</Snackbar>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</AnimatePresence>\n\t\t</div>\n\t);\n}\n\nexport default SnackbarList;\n"]}

package/build-module/snackbar/types.js

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

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

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

package/build-module/spinner/styles.js

@@ -24,14 +24,14 @@ export const StyledSpinner = _styled("svg", process.env.NODE_ENV === "production
 } : {
   target: "ea4tfvq2",
   label: "StyledSpinner"
-})("width:", CONFIG.spinnerSize, "px;height:", CONFIG.spinnerSize, "px;display:inline-block;margin:5px 11px 0;position:relative;color:var( --wp-admin-theme-color );overflow:visible;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc3Bpbm5lci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0J1QyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3NwaW5uZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgQ09ORklHIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5jb25zdCBzcGluQW5pbWF0aW9uID0ga2V5ZnJhbWVzYFxuXHRmcm9tIHtcblx0XHR0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcblx0fVxuXHR0byB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcblx0fVxuIGA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTcGlubmVyID0gc3R5bGVkLnN2Z2Bcblx0d2lkdGg6ICR7IENPTkZJRy5zcGlubmVyU2l6ZSB9cHg7XG5cdGhlaWdodDogJHsgQ09ORklHLnNwaW5uZXJTaXplIH1weDtcblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRtYXJnaW46IDVweCAxMXB4IDA7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0Y29sb3I6IHZhciggLS13cC1hZG1pbi10aGVtZS1jb2xvciApO1xuXHRvdmVyZmxvdzogdmlzaWJsZTtcbmA7XG5cbmNvbnN0IGNvbW1vblBhdGhQcm9wcyA9IGNzc2Bcblx0ZmlsbDogdHJhbnNwYXJlbnQ7XG5cdHN0cm9rZS13aWR0aDogMS41cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lclRyYWNrID0gc3R5bGVkLmNpcmNsZWBcblx0JHsgY29tbW9uUGF0aFByb3BzIH07XG5cdHN0cm9rZTogJHsgQ09MT1JTLmdyYXlbIDMwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lckluZGljYXRvciA9IHN0eWxlZC5wYXRoYFxuXHQkeyBjb21tb25QYXRoUHJvcHMgfTtcblx0c3Ryb2tlOiBjdXJyZW50Q29sb3I7XG5cdHN0cm9rZS1saW5lY2FwOiByb3VuZDtcblx0dHJhbnNmb3JtLW9yaWdpbjogNTAlIDUwJTtcblx0YW5pbWF0aW9uOiAxLjRzIGxpbmVhciBpbmZpbml0ZSBib3RoICR7IHNwaW5BbmltYXRpb24gfTtcbmA7XG4iXX0= */"));
+})("width:", CONFIG.spinnerSize, "px;height:", CONFIG.spinnerSize, "px;display:inline-block;margin:5px 11px 0;position:relative;color:", COLORS.ui.theme, ";overflow:visible;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc3Bpbm5lci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBb0J1QyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3NwaW5uZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgQ09ORklHIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5jb25zdCBzcGluQW5pbWF0aW9uID0ga2V5ZnJhbWVzYFxuXHRmcm9tIHtcblx0XHR0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcblx0fVxuXHR0byB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcblx0fVxuIGA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTcGlubmVyID0gc3R5bGVkLnN2Z2Bcblx0d2lkdGg6ICR7IENPTkZJRy5zcGlubmVyU2l6ZSB9cHg7XG5cdGhlaWdodDogJHsgQ09ORklHLnNwaW5uZXJTaXplIH1weDtcblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRtYXJnaW46IDVweCAxMXB4IDA7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRvdmVyZmxvdzogdmlzaWJsZTtcbmA7XG5cbmNvbnN0IGNvbW1vblBhdGhQcm9wcyA9IGNzc2Bcblx0ZmlsbDogdHJhbnNwYXJlbnQ7XG5cdHN0cm9rZS13aWR0aDogMS41cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lclRyYWNrID0gc3R5bGVkLmNpcmNsZWBcblx0JHsgY29tbW9uUGF0aFByb3BzIH07XG5cdHN0cm9rZTogJHsgQ09MT1JTLmdyYXlbIDMwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lckluZGljYXRvciA9IHN0eWxlZC5wYXRoYFxuXHQkeyBjb21tb25QYXRoUHJvcHMgfTtcblx0c3Ryb2tlOiBjdXJyZW50Q29sb3I7XG5cdHN0cm9rZS1saW5lY2FwOiByb3VuZDtcblx0dHJhbnNmb3JtLW9yaWdpbjogNTAlIDUwJTtcblx0YW5pbWF0aW9uOiAxLjRzIGxpbmVhciBpbmZpbml0ZSBib3RoICR7IHNwaW5BbmltYXRpb24gfTtcbmA7XG4iXX0= */"));
 const commonPathProps = process.env.NODE_ENV === "production" ? {
   name: "9s4963",
   styles: "fill:transparent;stroke-width:1.5px"
 } : {
   name: "o2zng0-commonPathProps",
   styles: "fill:transparent;stroke-width:1.5px;label:commonPathProps;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc3Bpbm5lci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEIyQiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3NwaW5uZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgQ09ORklHIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5jb25zdCBzcGluQW5pbWF0aW9uID0ga2V5ZnJhbWVzYFxuXHRmcm9tIHtcblx0XHR0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcblx0fVxuXHR0byB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcblx0fVxuIGA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTcGlubmVyID0gc3R5bGVkLnN2Z2Bcblx0d2lkdGg6ICR7IENPTkZJRy5zcGlubmVyU2l6ZSB9cHg7XG5cdGhlaWdodDogJHsgQ09ORklHLnNwaW5uZXJTaXplIH1weDtcblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRtYXJnaW46IDVweCAxMXB4IDA7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0Y29sb3I6IHZhciggLS13cC1hZG1pbi10aGVtZS1jb2xvciApO1xuXHRvdmVyZmxvdzogdmlzaWJsZTtcbmA7XG5cbmNvbnN0IGNvbW1vblBhdGhQcm9wcyA9IGNzc2Bcblx0ZmlsbDogdHJhbnNwYXJlbnQ7XG5cdHN0cm9rZS13aWR0aDogMS41cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lclRyYWNrID0gc3R5bGVkLmNpcmNsZWBcblx0JHsgY29tbW9uUGF0aFByb3BzIH07XG5cdHN0cm9rZTogJHsgQ09MT1JTLmdyYXlbIDMwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lckluZGljYXRvciA9IHN0eWxlZC5wYXRoYFxuXHQkeyBjb21tb25QYXRoUHJvcHMgfTtcblx0c3Ryb2tlOiBjdXJyZW50Q29sb3I7XG5cdHN0cm9rZS1saW5lY2FwOiByb3VuZDtcblx0dHJhbnNmb3JtLW9yaWdpbjogNTAlIDUwJTtcblx0YW5pbWF0aW9uOiAxLjRzIGxpbmVhciBpbmZpbml0ZSBib3RoICR7IHNwaW5BbmltYXRpb24gfTtcbmA7XG4iXX0= */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc3Bpbm5lci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOEIyQiIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3NwaW5uZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgQ09ORklHIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5jb25zdCBzcGluQW5pbWF0aW9uID0ga2V5ZnJhbWVzYFxuXHRmcm9tIHtcblx0XHR0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcblx0fVxuXHR0byB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcblx0fVxuIGA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTcGlubmVyID0gc3R5bGVkLnN2Z2Bcblx0d2lkdGg6ICR7IENPTkZJRy5zcGlubmVyU2l6ZSB9cHg7XG5cdGhlaWdodDogJHsgQ09ORklHLnNwaW5uZXJTaXplIH1weDtcblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRtYXJnaW46IDVweCAxMXB4IDA7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRvdmVyZmxvdzogdmlzaWJsZTtcbmA7XG5cbmNvbnN0IGNvbW1vblBhdGhQcm9wcyA9IGNzc2Bcblx0ZmlsbDogdHJhbnNwYXJlbnQ7XG5cdHN0cm9rZS13aWR0aDogMS41cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lclRyYWNrID0gc3R5bGVkLmNpcmNsZWBcblx0JHsgY29tbW9uUGF0aFByb3BzIH07XG5cdHN0cm9rZTogJHsgQ09MT1JTLmdyYXlbIDMwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lckluZGljYXRvciA9IHN0eWxlZC5wYXRoYFxuXHQkeyBjb21tb25QYXRoUHJvcHMgfTtcblx0c3Ryb2tlOiBjdXJyZW50Q29sb3I7XG5cdHN0cm9rZS1saW5lY2FwOiByb3VuZDtcblx0dHJhbnNmb3JtLW9yaWdpbjogNTAlIDUwJTtcblx0YW5pbWF0aW9uOiAxLjRzIGxpbmVhciBpbmZpbml0ZSBib3RoICR7IHNwaW5BbmltYXRpb24gfTtcbmA7XG4iXX0= */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 export const SpinnerTrack = _styled("circle", process.env.NODE_ENV === "production" ? {
@@ -39,11 +39,11 @@ export const SpinnerTrack = _styled("circle", process.env.NODE_ENV === "producti
 } : {
   target: "ea4tfvq1",
   label: "SpinnerTrack"
-})(commonPathProps, ";stroke:", COLORS.gray[300], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc3Bpbm5lci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUN5QyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3NwaW5uZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgQ09ORklHIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5jb25zdCBzcGluQW5pbWF0aW9uID0ga2V5ZnJhbWVzYFxuXHRmcm9tIHtcblx0XHR0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcblx0fVxuXHR0byB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcblx0fVxuIGA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTcGlubmVyID0gc3R5bGVkLnN2Z2Bcblx0d2lkdGg6ICR7IENPTkZJRy5zcGlubmVyU2l6ZSB9cHg7XG5cdGhlaWdodDogJHsgQ09ORklHLnNwaW5uZXJTaXplIH1weDtcblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRtYXJnaW46IDVweCAxMXB4IDA7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0Y29sb3I6IHZhciggLS13cC1hZG1pbi10aGVtZS1jb2xvciApO1xuXHRvdmVyZmxvdzogdmlzaWJsZTtcbmA7XG5cbmNvbnN0IGNvbW1vblBhdGhQcm9wcyA9IGNzc2Bcblx0ZmlsbDogdHJhbnNwYXJlbnQ7XG5cdHN0cm9rZS13aWR0aDogMS41cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lclRyYWNrID0gc3R5bGVkLmNpcmNsZWBcblx0JHsgY29tbW9uUGF0aFByb3BzIH07XG5cdHN0cm9rZTogJHsgQ09MT1JTLmdyYXlbIDMwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lckluZGljYXRvciA9IHN0eWxlZC5wYXRoYFxuXHQkeyBjb21tb25QYXRoUHJvcHMgfTtcblx0c3Ryb2tlOiBjdXJyZW50Q29sb3I7XG5cdHN0cm9rZS1saW5lY2FwOiByb3VuZDtcblx0dHJhbnNmb3JtLW9yaWdpbjogNTAlIDUwJTtcblx0YW5pbWF0aW9uOiAxLjRzIGxpbmVhciBpbmZpbml0ZSBib3RoICR7IHNwaW5BbmltYXRpb24gfTtcbmA7XG4iXX0= */"));
+})(commonPathProps, ";stroke:", COLORS.gray[300], ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc3Bpbm5lci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBbUN5QyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3NwaW5uZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgQ09ORklHIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5jb25zdCBzcGluQW5pbWF0aW9uID0ga2V5ZnJhbWVzYFxuXHRmcm9tIHtcblx0XHR0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcblx0fVxuXHR0byB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcblx0fVxuIGA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTcGlubmVyID0gc3R5bGVkLnN2Z2Bcblx0d2lkdGg6ICR7IENPTkZJRy5zcGlubmVyU2l6ZSB9cHg7XG5cdGhlaWdodDogJHsgQ09ORklHLnNwaW5uZXJTaXplIH1weDtcblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRtYXJnaW46IDVweCAxMXB4IDA7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRvdmVyZmxvdzogdmlzaWJsZTtcbmA7XG5cbmNvbnN0IGNvbW1vblBhdGhQcm9wcyA9IGNzc2Bcblx0ZmlsbDogdHJhbnNwYXJlbnQ7XG5cdHN0cm9rZS13aWR0aDogMS41cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lclRyYWNrID0gc3R5bGVkLmNpcmNsZWBcblx0JHsgY29tbW9uUGF0aFByb3BzIH07XG5cdHN0cm9rZTogJHsgQ09MT1JTLmdyYXlbIDMwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lckluZGljYXRvciA9IHN0eWxlZC5wYXRoYFxuXHQkeyBjb21tb25QYXRoUHJvcHMgfTtcblx0c3Ryb2tlOiBjdXJyZW50Q29sb3I7XG5cdHN0cm9rZS1saW5lY2FwOiByb3VuZDtcblx0dHJhbnNmb3JtLW9yaWdpbjogNTAlIDUwJTtcblx0YW5pbWF0aW9uOiAxLjRzIGxpbmVhciBpbmZpbml0ZSBib3RoICR7IHNwaW5BbmltYXRpb24gfTtcbmA7XG4iXX0= */"));
 export const SpinnerIndicator = _styled("path", process.env.NODE_ENV === "production" ? {
   target: "ea4tfvq0"
 } : {
   target: "ea4tfvq0",
   label: "SpinnerIndicator"
-})(commonPathProps, ";stroke:currentColor;stroke-linecap:round;transform-origin:50% 50%;animation:1.4s linear infinite both ", spinAnimation, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc3Bpbm5lci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0MyQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3NwaW5uZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgQ09ORklHIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5jb25zdCBzcGluQW5pbWF0aW9uID0ga2V5ZnJhbWVzYFxuXHRmcm9tIHtcblx0XHR0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcblx0fVxuXHR0byB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcblx0fVxuIGA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTcGlubmVyID0gc3R5bGVkLnN2Z2Bcblx0d2lkdGg6ICR7IENPTkZJRy5zcGlubmVyU2l6ZSB9cHg7XG5cdGhlaWdodDogJHsgQ09ORklHLnNwaW5uZXJTaXplIH1weDtcblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRtYXJnaW46IDVweCAxMXB4IDA7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0Y29sb3I6IHZhciggLS13cC1hZG1pbi10aGVtZS1jb2xvciApO1xuXHRvdmVyZmxvdzogdmlzaWJsZTtcbmA7XG5cbmNvbnN0IGNvbW1vblBhdGhQcm9wcyA9IGNzc2Bcblx0ZmlsbDogdHJhbnNwYXJlbnQ7XG5cdHN0cm9rZS13aWR0aDogMS41cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lclRyYWNrID0gc3R5bGVkLmNpcmNsZWBcblx0JHsgY29tbW9uUGF0aFByb3BzIH07XG5cdHN0cm9rZTogJHsgQ09MT1JTLmdyYXlbIDMwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lckluZGljYXRvciA9IHN0eWxlZC5wYXRoYFxuXHQkeyBjb21tb25QYXRoUHJvcHMgfTtcblx0c3Ryb2tlOiBjdXJyZW50Q29sb3I7XG5cdHN0cm9rZS1saW5lY2FwOiByb3VuZDtcblx0dHJhbnNmb3JtLW9yaWdpbjogNTAlIDUwJTtcblx0YW5pbWF0aW9uOiAxLjRzIGxpbmVhciBpbmZpbml0ZSBib3RoICR7IHNwaW5BbmltYXRpb24gfTtcbmA7XG4iXX0= */"));
+})(commonPathProps, ";stroke:currentColor;stroke-linecap:round;transform-origin:50% 50%;animation:1.4s linear infinite both ", spinAnimation, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvc3Bpbm5lci9zdHlsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBd0MyQyIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL3NwaW5uZXIvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IENPTE9SUywgQ09ORklHIH0gZnJvbSAnLi4vdXRpbHMnO1xuXG5jb25zdCBzcGluQW5pbWF0aW9uID0ga2V5ZnJhbWVzYFxuXHRmcm9tIHtcblx0XHR0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTtcblx0fVxuXHR0byB7XG5cdFx0dHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTtcblx0fVxuIGA7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRTcGlubmVyID0gc3R5bGVkLnN2Z2Bcblx0d2lkdGg6ICR7IENPTkZJRy5zcGlubmVyU2l6ZSB9cHg7XG5cdGhlaWdodDogJHsgQ09ORklHLnNwaW5uZXJTaXplIH1weDtcblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRtYXJnaW46IDVweCAxMXB4IDA7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0Y29sb3I6ICR7IENPTE9SUy51aS50aGVtZSB9O1xuXHRvdmVyZmxvdzogdmlzaWJsZTtcbmA7XG5cbmNvbnN0IGNvbW1vblBhdGhQcm9wcyA9IGNzc2Bcblx0ZmlsbDogdHJhbnNwYXJlbnQ7XG5cdHN0cm9rZS13aWR0aDogMS41cHg7XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lclRyYWNrID0gc3R5bGVkLmNpcmNsZWBcblx0JHsgY29tbW9uUGF0aFByb3BzIH07XG5cdHN0cm9rZTogJHsgQ09MT1JTLmdyYXlbIDMwMCBdIH07XG5gO1xuXG5leHBvcnQgY29uc3QgU3Bpbm5lckluZGljYXRvciA9IHN0eWxlZC5wYXRoYFxuXHQkeyBjb21tb25QYXRoUHJvcHMgfTtcblx0c3Ryb2tlOiBjdXJyZW50Q29sb3I7XG5cdHN0cm9rZS1saW5lY2FwOiByb3VuZDtcblx0dHJhbnNmb3JtLW9yaWdpbjogNTAlIDUwJTtcblx0YW5pbWF0aW9uOiAxLjRzIGxpbmVhciBpbmZpbml0ZSBib3RoICR7IHNwaW5BbmltYXRpb24gfTtcbmA7XG4iXX0= */"));
 //# sourceMappingURL=styles.js.map

package/build-module/spinner/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/spinner/styles.ts"],"names":["css","keyframes","COLORS","CONFIG","spinAnimation","StyledSpinner","spinnerSize","commonPathProps","SpinnerTrack","gray","SpinnerIndicator"],"mappings":";;;;AAAA;AACA;AACA;AAEA,SAASA,GAAT,EAAcC,SAAd,QAA+B,gBAA/B;AAEA;AACA;AACA;;AACA,SAASC,MAAT,EAAiBC,MAAjB,QAA+B,UAA/B;AAEA,MAAMC,aAAa,GAAGH,SAAU;AAChC;AACA;AACA;AACA;AACA;AACA;AACA,EAPA;AASA,OAAO,MAAMI,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,aACfF,MAAM,CAACG,WADQ,gBAEdH,MAAM,CAACG,WAFO,yxDAAnB;AAUP,MAAMC,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAArB;AAKA,OAAO,MAAMC,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,GACrBD,eADqB,cAEbL,MAAM,CAACO,IAAP,CAAa,GAAb,CAFa,yqDAAlB;AAKP,OAAO,MAAMC,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,GACzBH,eADyB,6GAKYH,aALZ,yqDAAtB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport { css, keyframes } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG } from '../utils';\n\nconst spinAnimation = keyframes`\n\tfrom {\n\t\ttransform: rotate(0deg);\n\t}\n\tto {\n\t\ttransform: rotate(360deg);\n\t}\n `;\n\nexport const StyledSpinner = styled.svg`\n\twidth: ${ CONFIG.spinnerSize }px;\n\theight: ${ CONFIG.spinnerSize }px;\n\tdisplay: inline-block;\n\tmargin: 5px 11px 0;\n\tposition: relative;\n\tcolor: var( --wp-admin-theme-color );\n\toverflow: visible;\n`;\n\nconst commonPathProps = css`\n\tfill: transparent;\n\tstroke-width: 1.5px;\n`;\n\nexport const SpinnerTrack = styled.circle`\n\t${ commonPathProps };\n\tstroke: ${ COLORS.gray[ 300 ] };\n`;\n\nexport const SpinnerIndicator = styled.path`\n\t${ commonPathProps };\n\tstroke: currentColor;\n\tstroke-linecap: round;\n\ttransform-origin: 50% 50%;\n\tanimation: 1.4s linear infinite both ${ spinAnimation };\n`;\n"]}
+{"version":3,"sources":["@wordpress/components/src/spinner/styles.ts"],"names":["css","keyframes","COLORS","CONFIG","spinAnimation","StyledSpinner","spinnerSize","ui","theme","commonPathProps","SpinnerTrack","gray","SpinnerIndicator"],"mappings":";;;;AAAA;AACA;AACA;AAEA,SAASA,GAAT,EAAcC,SAAd,QAA+B,gBAA/B;AAEA;AACA;AACA;;AACA,SAASC,MAAT,EAAiBC,MAAjB,QAA+B,UAA/B;AAEA,MAAMC,aAAa,GAAGH,SAAU;AAChC;AACA;AACA;AACA;AACA;AACA;AACA,EAPA;AASA,OAAO,MAAMI,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,aACfF,MAAM,CAACG,WADQ,gBAEdH,MAAM,CAACG,WAFO,wEAMfJ,MAAM,CAACK,EAAP,CAAUC,KANK,8qDAAnB;AAUP,MAAMC,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAArB;AAKA,OAAO,MAAMC,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA,GACrBD,eADqB,cAEbP,MAAM,CAACS,IAAP,CAAa,GAAb,CAFa,6pDAAlB;AAKP,OAAO,MAAMC,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA,GACzBH,eADyB,6GAKYL,aALZ,6pDAAtB","sourcesContent":["/**\n * External dependencies\n */\nimport styled from '@emotion/styled';\nimport { css, keyframes } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport { COLORS, CONFIG } from '../utils';\n\nconst spinAnimation = keyframes`\n\tfrom {\n\t\ttransform: rotate(0deg);\n\t}\n\tto {\n\t\ttransform: rotate(360deg);\n\t}\n `;\n\nexport const StyledSpinner = styled.svg`\n\twidth: ${ CONFIG.spinnerSize }px;\n\theight: ${ CONFIG.spinnerSize }px;\n\tdisplay: inline-block;\n\tmargin: 5px 11px 0;\n\tposition: relative;\n\tcolor: ${ COLORS.ui.theme };\n\toverflow: visible;\n`;\n\nconst commonPathProps = css`\n\tfill: transparent;\n\tstroke-width: 1.5px;\n`;\n\nexport const SpinnerTrack = styled.circle`\n\t${ commonPathProps };\n\tstroke: ${ COLORS.gray[ 300 ] };\n`;\n\nexport const SpinnerIndicator = styled.path`\n\t${ commonPathProps };\n\tstroke: currentColor;\n\tstroke-linecap: round;\n\ttransform-origin: 50% 50%;\n\tanimation: 1.4s linear infinite both ${ spinAnimation };\n`;\n"]}

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

@@ -10,7 +10,7 @@ import { find } from 'lodash';
  * WordPress dependencies
  */
 
-import { useState, useEffect } from '@wordpress/element';
+import { useState, useEffect, useCallback } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 /**
  * Internal dependencies
@@ -80,6 +80,7 @@ export function TabPanel(_ref2) {
     className,
     children,
     tabs,
+    selectOnMove = true,
     initialTabName,
     orientation = 'horizontal',
     activeClass = 'is-active',
@@ -87,13 +88,13 @@ export function TabPanel(_ref2) {
   } = _ref2;
   const instanceId = useInstanceId(TabPanel, 'tab-panel');
   const [selected, setSelected] = useState();
-
-  const handleTabSelection = tabKey => {
+  const handleTabSelection = useCallback(tabKey => {
     setSelected(tabKey);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(tabKey);
-  };
+  }, [onSelect]); // Simulate a click on the newly focused tab, which causes the component
+  // to show the `tab-panel` associated with the clicked tab.
 
-  const onNavigate = (_childIndex, child) => {
+  const activateTabAutomatically = (_childIndex, child) => {
     child.click();
   };
 
@@ -105,13 +106,13 @@ export function TabPanel(_ref2) {
     if (!(selectedTab !== null && selectedTab !== void 0 && selectedTab.name) && tabs.length > 0) {
       handleTabSelection(initialTabName || tabs[0].name);
     }
-  }, [tabs, selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.name, initialTabName]);
+  }, [tabs, selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.name, initialTabName, handleTabSelection]);
   return createElement("div", {
     className: className
   }, createElement(NavigableMenu, {
     role: "tablist",
     orientation: orientation,
-    onNavigate: onNavigate,
+    onNavigate: selectOnMove ? activateTabAutomatically : undefined,
     className: "components-tab-panel__tabs"
   }, tabs.map(tab => createElement(TabButton, {
     className: classnames('components-tab-panel__tabs-item', tab.className, {
@@ -121,8 +122,11 @@ export function TabPanel(_ref2) {
     "aria-controls": `${instanceId}-${tab.name}-view`,
     selected: tab.name === selected,
     key: tab.name,
-    onClick: () => handleTabSelection(tab.name)
-  }, tab.title))), selectedTab && createElement("div", {
+    onClick: () => handleTabSelection(tab.name),
+    label: tab.icon && tab.title,
+    icon: tab.icon,
+    showTooltip: !!tab.icon
+  }, !tab.icon && tab.title))), selectedTab && createElement("div", {
     key: selectedId,
     "aria-labelledby": selectedId,
     role: "tabpanel",

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/tab-panel/index.tsx"],"names":["classnames","find","useState","useEffect","useInstanceId","NavigableMenu","Button","TabButton","tabId","onClick","children","selected","rest","TabPanel","className","tabs","initialTabName","orientation","activeClass","onSelect","instanceId","setSelected","handleTabSelection","tabKey","onNavigate","_childIndex","child","click","selectedTab","name","selectedId","length","map","tab","title"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AACA,SAASC,IAAT,QAAqB,QAArB;AAEA;AACA;AACA;;AACA,SAASC,QAAT,EAAmBC,SAAnB,QAAoC,oBAApC;AACA,SAASC,aAAT,QAA8B,oBAA9B;AAEA;AACA;AACA;;AACA,SAASC,aAAT,QAA8B,wBAA9B;AACA,OAAOC,MAAP,MAAmB,WAAnB;;AAIA,MAAMC,SAAS,GAAG;AAAA,MAAE;AACnBC,IAAAA,KADmB;AAEnBC,IAAAA,OAFmB;AAGnBC,IAAAA,QAHmB;AAInBC,IAAAA,QAJmB;AAKnB,OAAGC;AALgB,GAAF;AAAA,SAOjB,cAAC,MAAD;AACC,IAAA,IAAI,EAAC,KADN;AAEC,IAAA,QAAQ,EAAGD,QAAQ,GAAG,IAAH,GAAU,CAAC,CAF/B;AAGC,qBAAgBA,QAHjB;AAIC,IAAA,EAAE,EAAGH,KAJN;AAKC,IAAA,OAAO,EAAGC;AALX,KAMMG,IANN,GAQGF,QARH,CAPiB;AAAA,CAAlB;AAmBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,SAASG,QAAT,QAQqD;AAAA;;AAAA,MARlC;AACzBC,IAAAA,SADyB;AAEzBJ,IAAAA,QAFyB;AAGzBK,IAAAA,IAHyB;AAIzBC,IAAAA,cAJyB;AAKzBC,IAAAA,WAAW,GAAG,YALW;AAMzBC,IAAAA,WAAW,GAAG,WANW;AAOzBC,IAAAA;AAPyB,GAQkC;AAC3D,QAAMC,UAAU,GAAGhB,aAAa,CAAES,QAAF,EAAY,WAAZ,CAAhC;AACA,QAAM,CAAEF,QAAF,EAAYU,WAAZ,IAA4BnB,QAAQ,EAA1C;;AAEA,QAAMoB,kBAAkB,GAAKC,MAAF,IAAsB;AAChDF,IAAAA,WAAW,CAAEE,MAAF,CAAX;AACAJ,IAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAII,MAAJ,CAAR;AACA,GAHD;;AAKA,QAAMC,UAAU,GAAG,CAAEC,WAAF,EAAuBC,KAAvB,KAAqD;AACvEA,IAAAA,KAAK,CAACC,KAAN;AACA,GAFD;;AAGA,QAAMC,WAAW,GAAG3B,IAAI,CAAEc,IAAF,EAAQ;AAAEc,IAAAA,IAAI,EAAElB;AAAR,GAAR,CAAxB;AACA,QAAMmB,UAAU,GAAI,GAAGV,UAAY,IAAhB,qBAAoBQ,WAApB,aAAoBA,WAApB,uBAAoBA,WAAW,CAAEC,IAAjC,iEAAyC,MAAQ,EAApE;AAEA1B,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAK,EAAEyB,WAAF,aAAEA,WAAF,eAAEA,WAAW,CAAEC,IAAf,KAAuBd,IAAI,CAACgB,MAAL,GAAc,CAA1C,EAA8C;AAC7CT,MAAAA,kBAAkB,CAAEN,cAAc,IAAID,IAAI,CAAE,CAAF,CAAJ,CAAUc,IAA9B,CAAlB;AACA;AACD,GAJQ,EAIN,CAAEd,IAAF,EAAQa,WAAR,aAAQA,WAAR,uBAAQA,WAAW,CAAEC,IAArB,EAA2Bb,cAA3B,CAJM,CAAT;AAMA,SACC;AAAK,IAAA,SAAS,EAAGF;AAAjB,KACC,cAAC,aAAD;AACC,IAAA,IAAI,EAAC,SADN;AAEC,IAAA,WAAW,EAAGG,WAFf;AAGC,IAAA,UAAU,EAAGO,UAHd;AAIC,IAAA,SAAS,EAAC;AAJX,KAMGT,IAAI,CAACiB,GAAL,CAAYC,GAAF,IACX,cAAC,SAAD;AACC,IAAA,SAAS,EAAGjC,UAAU,CACrB,iCADqB,EAErBiC,GAAG,CAACnB,SAFiB,EAGrB;AACC,OAAEI,WAAF,GAAiBe,GAAG,CAACJ,IAAJ,KAAalB;AAD/B,KAHqB,CADvB;AAQC,IAAA,KAAK,EAAI,GAAGS,UAAY,IAAIa,GAAG,CAACJ,IAAM,EARvC;AASC,qBAAiB,GAAGT,UAAY,IAAIa,GAAG,CAACJ,IAAM,OAT/C;AAUC,IAAA,QAAQ,EAAGI,GAAG,CAACJ,IAAJ,KAAalB,QAVzB;AAWC,IAAA,GAAG,EAAGsB,GAAG,CAACJ,IAXX;AAYC,IAAA,OAAO,EAAG,MAAMP,kBAAkB,CAAEW,GAAG,CAACJ,IAAN;AAZnC,KAcGI,GAAG,CAACC,KAdP,CADC,CANH,CADD,EA0BGN,WAAW,IACZ;AACC,IAAA,GAAG,EAAGE,UADP;AAEC,uBAAkBA,UAFnB;AAGC,IAAA,IAAI,EAAC,UAHN;AAIC,IAAA,EAAE,EAAI,GAAGA,UAAY,OAJtB;AAKC,IAAA,SAAS,EAAC;AALX,KAOGpB,QAAQ,CAAEkB,WAAF,CAPX,CA3BF,CADD;AAwCA;AAED,eAAef,QAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { find } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { NavigableMenu } from '../navigable-container';\nimport Button from '../button';\nimport type { TabButtonProps, TabPanelProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst TabButton = ( {\n\ttabId,\n\tonClick,\n\tchildren,\n\tselected,\n\t...rest\n}: TabButtonProps ) => (\n\t<Button\n\t\trole=\"tab\"\n\t\ttabIndex={ selected ? null : -1 }\n\t\taria-selected={ selected }\n\t\tid={ tabId }\n\t\tonClick={ onClick }\n\t\t{ ...rest }\n\t>\n\t\t{ children }\n\t</Button>\n);\n\n/**\n * TabPanel is an ARIA-compliant tabpanel.\n *\n * TabPanels organize content across different screens, data sets, and interactions.\n * It has two sections: a list of tabs, and the view to show when tabs are chosen.\n *\n * ```jsx\n * import { TabPanel } from '@wordpress/components';\n *\n * const onSelect = ( tabName ) => {\n *   console.log( 'Selecting tab', tabName );\n * };\n *\n * const MyTabPanel = () => (\n *   <TabPanel\n *     className=\"my-tab-panel\"\n *     activeClass=\"active-tab\"\n *     onSelect={ onSelect }\n *     tabs={ [\n *       {\n *         name: 'tab1',\n *         title: 'Tab 1',\n *         className: 'tab-one',\n *       },\n *       {\n *         name: 'tab2',\n *         title: 'Tab 2',\n *         className: 'tab-two',\n *       },\n *     ] }\n *   >\n *     { ( tab ) => <p>{ tab.title }</p> }\n *   </TabPanel>\n * );\n * ```\n */\nexport function TabPanel( {\n\tclassName,\n\tchildren,\n\ttabs,\n\tinitialTabName,\n\torientation = 'horizontal',\n\tactiveClass = 'is-active',\n\tonSelect,\n}: WordPressComponentProps< TabPanelProps, 'div', false > ) {\n\tconst instanceId = useInstanceId( TabPanel, 'tab-panel' );\n\tconst [ selected, setSelected ] = useState< string >();\n\n\tconst handleTabSelection = ( tabKey: string ) => {\n\t\tsetSelected( tabKey );\n\t\tonSelect?.( tabKey );\n\t};\n\n\tconst onNavigate = ( _childIndex: number, child: HTMLButtonElement ) => {\n\t\tchild.click();\n\t};\n\tconst selectedTab = find( tabs, { name: selected } );\n\tconst selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;\n\n\tuseEffect( () => {\n\t\tif ( ! selectedTab?.name && tabs.length > 0 ) {\n\t\t\thandleTabSelection( initialTabName || tabs[ 0 ].name );\n\t\t}\n\t}, [ tabs, selectedTab?.name, initialTabName ] );\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<NavigableMenu\n\t\t\t\trole=\"tablist\"\n\t\t\t\torientation={ orientation }\n\t\t\t\tonNavigate={ onNavigate }\n\t\t\t\tclassName=\"components-tab-panel__tabs\"\n\t\t\t>\n\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t<TabButton\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'components-tab-panel__tabs-item',\n\t\t\t\t\t\t\ttab.className,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t[ activeClass ]: tab.name === selected,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\ttabId={ `${ instanceId }-${ tab.name }` }\n\t\t\t\t\t\taria-controls={ `${ instanceId }-${ tab.name }-view` }\n\t\t\t\t\t\tselected={ tab.name === selected }\n\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\tonClick={ () => handleTabSelection( tab.name ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t</TabButton>\n\t\t\t\t) ) }\n\t\t\t</NavigableMenu>\n\t\t\t{ selectedTab && (\n\t\t\t\t<div\n\t\t\t\t\tkey={ selectedId }\n\t\t\t\t\taria-labelledby={ selectedId }\n\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\tid={ `${ selectedId }-view` }\n\t\t\t\t\tclassName=\"components-tab-panel__tab-content\"\n\t\t\t\t>\n\t\t\t\t\t{ children( selectedTab ) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default TabPanel;\n"]}
+{"version":3,"sources":["@wordpress/components/src/tab-panel/index.tsx"],"names":["classnames","find","useState","useEffect","useCallback","useInstanceId","NavigableMenu","Button","TabButton","tabId","onClick","children","selected","rest","TabPanel","className","tabs","selectOnMove","initialTabName","orientation","activeClass","onSelect","instanceId","setSelected","handleTabSelection","tabKey","activateTabAutomatically","_childIndex","child","click","selectedTab","name","selectedId","length","undefined","map","tab","icon","title"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { find } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect, useCallback } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { NavigableMenu } from '../navigable-container';\nimport Button from '../button';\nimport type { TabButtonProps, TabPanelProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst TabButton = ( {\n\ttabId,\n\tonClick,\n\tchildren,\n\tselected,\n\t...rest\n}: TabButtonProps ) => (\n\t<Button\n\t\trole=\"tab\"\n\t\ttabIndex={ selected ? null : -1 }\n\t\taria-selected={ selected }\n\t\tid={ tabId }\n\t\tonClick={ onClick }\n\t\t{ ...rest }\n\t>\n\t\t{ children }\n\t</Button>\n);\n\n/**\n * TabPanel is an ARIA-compliant tabpanel.\n *\n * TabPanels organize content across different screens, data sets, and interactions.\n * It has two sections: a list of tabs, and the view to show when tabs are chosen.\n *\n * ```jsx\n * import { TabPanel } from '@wordpress/components';\n *\n * const onSelect = ( tabName ) => {\n *   console.log( 'Selecting tab', tabName );\n * };\n *\n * const MyTabPanel = () => (\n *   <TabPanel\n *     className=\"my-tab-panel\"\n *     activeClass=\"active-tab\"\n *     onSelect={ onSelect }\n *     tabs={ [\n *       {\n *         name: 'tab1',\n *         title: 'Tab 1',\n *         className: 'tab-one',\n *       },\n *       {\n *         name: 'tab2',\n *         title: 'Tab 2',\n *         className: 'tab-two',\n *       },\n *     ] }\n *   >\n *     { ( tab ) => <p>{ tab.title }</p> }\n *   </TabPanel>\n * );\n * ```\n */\nexport function TabPanel( {\n\tclassName,\n\tchildren,\n\ttabs,\n\tselectOnMove = true,\n\tinitialTabName,\n\torientation = 'horizontal',\n\tactiveClass = 'is-active',\n\tonSelect,\n}: WordPressComponentProps< TabPanelProps, 'div', false > ) {\n\tconst instanceId = useInstanceId( TabPanel, 'tab-panel' );\n\tconst [ selected, setSelected ] = useState< string >();\n\n\tconst handleTabSelection = useCallback(\n\t\t( tabKey: string ) => {\n\t\t\tsetSelected( tabKey );\n\t\t\tonSelect?.( tabKey );\n\t\t},\n\t\t[ onSelect ]\n\t);\n\n\t// Simulate a click on the newly focused tab, which causes the component\n\t// to show the `tab-panel` associated with the clicked tab.\n\tconst activateTabAutomatically = (\n\t\t_childIndex: number,\n\t\tchild: HTMLButtonElement\n\t) => {\n\t\tchild.click();\n\t};\n\tconst selectedTab = find( tabs, { name: selected } );\n\tconst selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;\n\n\tuseEffect( () => {\n\t\tif ( ! selectedTab?.name && tabs.length > 0 ) {\n\t\t\thandleTabSelection( initialTabName || tabs[ 0 ].name );\n\t\t}\n\t}, [ tabs, selectedTab?.name, initialTabName, handleTabSelection ] );\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<NavigableMenu\n\t\t\t\trole=\"tablist\"\n\t\t\t\torientation={ orientation }\n\t\t\t\tonNavigate={\n\t\t\t\t\tselectOnMove ? activateTabAutomatically : undefined\n\t\t\t\t}\n\t\t\t\tclassName=\"components-tab-panel__tabs\"\n\t\t\t>\n\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t<TabButton\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'components-tab-panel__tabs-item',\n\t\t\t\t\t\t\ttab.className,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t[ activeClass ]: tab.name === selected,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\ttabId={ `${ instanceId }-${ tab.name }` }\n\t\t\t\t\t\taria-controls={ `${ instanceId }-${ tab.name }-view` }\n\t\t\t\t\t\tselected={ tab.name === selected }\n\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\tonClick={ () => handleTabSelection( tab.name ) }\n\t\t\t\t\t\tlabel={ tab.icon && tab.title }\n\t\t\t\t\t\ticon={ tab.icon }\n\t\t\t\t\t\tshowTooltip={ !! tab.icon }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! tab.icon && tab.title }\n\t\t\t\t\t</TabButton>\n\t\t\t\t) ) }\n\t\t\t</NavigableMenu>\n\t\t\t{ selectedTab && (\n\t\t\t\t<div\n\t\t\t\t\tkey={ selectedId }\n\t\t\t\t\taria-labelledby={ selectedId }\n\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\tid={ `${ selectedId }-view` }\n\t\t\t\t\tclassName=\"components-tab-panel__tab-content\"\n\t\t\t\t>\n\t\t\t\t\t{ children( selectedTab ) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default TabPanel;\n"]}