newspack-components 4.3.0 → 4.4.0-epic-editor-refactor.1

package/dist/esm/progress-bar/index.test.js

@@ -1,53 +1,52 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { createElement as _createElement } from 'react';
 import { render } from '@testing-library/react';
 import ProgressBar from './';
 import { jsx as _jsx } from "react/jsx-runtime";
-describe('ProgressBar', () => {
-  it('should render a progress indicator', () => {
-    const {
-      getByTestId
-    } = render(/*#__PURE__*/_jsx(ProgressBar, {
-      completed: "1",
-      total: "2"
-    }));
-    const indicator = getByTestId('progress-bar-indicator');
+describe('ProgressBar', function () {
+  it('should render a progress indicator', function () {
+    var _render = render(/*#__PURE__*/_jsx(ProgressBar, {
+        completed: "1",
+        total: "2"
+      })),
+      getByTestId = _render.getByTestId;
+    var indicator = getByTestId('progress-bar-indicator');
     expect(indicator).toHaveAttribute('style', 'width: 50%;');
   });
-  it('should render a label', () => {
-    const label = 'test label';
-    const {
-      getByText
-    } = render(/*#__PURE__*/_jsx(ProgressBar, {
-      completed: "1",
-      total: "2",
-      label: label
-    }));
+  it('should render a label', function () {
+    var label = 'test label';
+    var _render2 = render(/*#__PURE__*/_jsx(ProgressBar, {
+        completed: "1",
+        total: "2",
+        label: label
+      })),
+      getByText = _render2.getByText;
     expect(getByText(label)).toBeInTheDocument();
   });
-  it('should render progress as a fraction', () => {
-    const {
-      getByText
-    } = render(/*#__PURE__*/_jsx(ProgressBar, {
-      completed: "1",
-      total: "2",
-      displayFraction: true
-    }));
+  it('should render progress as a fraction', function () {
+    var _render3 = render(/*#__PURE__*/_jsx(ProgressBar, {
+        completed: "1",
+        total: "2",
+        displayFraction: true
+      })),
+      getByText = _render3.getByText;
     expect(getByText('1/2')).toBeInTheDocument();
   });
-  it('should render with both label and fraction', () => {
-    const label = 'test label';
-    const {
-      getByText
-    } = render(/*#__PURE__*/_jsx(ProgressBar, {
-      completed: "1",
-      total: "2",
-      label: label,
-      displayFraction: true
-    }));
+  it('should render with both label and fraction', function () {
+    var label = 'test label';
+    var _render4 = render(/*#__PURE__*/_jsx(ProgressBar, {
+        completed: "1",
+        total: "2",
+        label: label,
+        displayFraction: true
+      })),
+      getByText = _render4.getByText;
     expect(getByText(label)).toBeInTheDocument();
     expect(getByText('1/2')).toBeInTheDocument();
   });
-  describe('should calculate progress correctly', () => {
+  describe('should calculate progress correctly', function () {
     [{
       props: {
         completed: 1,
@@ -66,42 +65,37 @@ describe('ProgressBar', () => {
         total: 3
       },
       expectedWidth: 100
-    }].forEach(({
-      props,
-      expectedWidth
-    }) => {
-      it(`with expected  progress of ${expectedWidth}`, () => {
-        const {
-          getByTestId
-        } = render(/*#__PURE__*/_createElement(ProgressBar, {
-          ...props,
-          key: expectedWidth
-        }));
-        expect(getByTestId('progress-bar-indicator')).toHaveAttribute('style', `width: ${expectedWidth}%;`);
+    }].forEach(function (_ref) {
+      var props = _ref.props,
+        expectedWidth = _ref.expectedWidth;
+      it("with expected  progress of ".concat(expectedWidth), function () {
+        var _render5 = render(/*#__PURE__*/_createElement(ProgressBar, _objectSpread(_objectSpread({}, props), {}, {
+            key: expectedWidth
+          }))),
+          getByTestId = _render5.getByTestId;
+        expect(getByTestId('progress-bar-indicator')).toHaveAttribute('style', "width: ".concat(expectedWidth, "%;"));
       });
     });
   });
-  it('should handle non-numeric values in ProgressBar element', () => {
-    const {
-      getByText,
-      getByTestId
-    } = render(/*#__PURE__*/_jsx(ProgressBar, {
-      completed: "cats",
-      total: "dogs",
-      displayFraction: true
-    }));
+  it('should handle non-numeric values in ProgressBar element', function () {
+    var _render6 = render(/*#__PURE__*/_jsx(ProgressBar, {
+        completed: "cats",
+        total: "dogs",
+        displayFraction: true
+      })),
+      getByText = _render6.getByText,
+      getByTestId = _render6.getByTestId;
     expect(getByText('0/0')).toBeInTheDocument();
     expect(getByTestId('progress-bar-indicator')).toHaveAttribute('style', 'width: 100%;');
   });
-  it('should handle non-logical values in ProgressBar element', () => {
-    const {
-      getByText,
-      getByTestId
-    } = render(/*#__PURE__*/_jsx(ProgressBar, {
-      completed: "3",
-      total: "-1",
-      displayFraction: true
-    }));
+  it('should handle non-logical values in ProgressBar element', function () {
+    var _render7 = render(/*#__PURE__*/_jsx(ProgressBar, {
+        completed: "3",
+        total: "-1",
+        displayFraction: true
+      })),
+      getByText = _render7.getByText,
+      getByTestId = _render7.getByTestId;
     expect(getByText('0/0')).toBeInTheDocument();
     expect(getByTestId('progress-bar-indicator')).toHaveAttribute('style', 'width: 100%;');
   });

package/dist/esm/radio-control/index.js

@@ -1,3 +1,15 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+var _excluded = ["className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /**
  * WordPress dependencies.
  */
@@ -18,20 +30,27 @@ import classnames from 'classnames';
  * Radio Control.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
-class RadioControl extends Component {
-  /**
-   * Render.
-   */
-  render() {
-    const {
-      className,
-      ...otherProps
-    } = this.props;
-    const classes = classnames('newspack-radio-control', className);
-    return /*#__PURE__*/_jsx(BaseComponent, {
-      className: classes,
-      ...otherProps
-    });
+var RadioControl = /*#__PURE__*/function (_Component) {
+  function RadioControl() {
+    _classCallCheck(this, RadioControl);
+    return _callSuper(this, RadioControl, arguments);
   }
-}
+  _inherits(RadioControl, _Component);
+  return _createClass(RadioControl, [{
+    key: "render",
+    value:
+    /**
+     * Render.
+     */
+    function render() {
+      var _this$props = this.props,
+        className = _this$props.className,
+        otherProps = _objectWithoutProperties(_this$props, _excluded);
+      var classes = classnames('newspack-radio-control', className);
+      return /*#__PURE__*/_jsx(BaseComponent, _objectSpread({
+        className: classes
+      }, otherProps));
+    }
+  }]);
+}(Component);
 export default RadioControl;

package/dist/esm/section-header/index.js

@@ -7,8 +7,8 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useEffect, useRef } from '@wordpress/element';
-import { Tooltip } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
-import { Icon, chevronLeft } from '@wordpress/icons';
+import { DropdownMenu, MenuItem, Tooltip, __experimentalHStack as HStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
+import { Icon, chevronLeft, moreVertical } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -47,39 +47,96 @@ import classnames from 'classnames';
  * @param {SectionHeaderProps} props - The properties for the section header.
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SectionHeader = ({
-  backNav = '',
-  badges,
-  centered = false,
-  className = null,
-  description = '',
-  heading = 2,
-  icon = null,
-  isWhite = false,
-  noMargin = false,
-  pageHeader = false,
-  title,
-  id = null,
-  primaryAction,
-  secondaryAction,
-  children = null
-}) => {
+var SectionHeader = function SectionHeader(_ref) {
+  var _ref$backNav = _ref.backNav,
+    backNav = _ref$backNav === void 0 ? '' : _ref$backNav,
+    badges = _ref.badges,
+    _ref$centered = _ref.centered,
+    centered = _ref$centered === void 0 ? false : _ref$centered,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className,
+    _ref$description = _ref.description,
+    description = _ref$description === void 0 ? '' : _ref$description,
+    _ref$heading = _ref.heading,
+    heading = _ref$heading === void 0 ? 2 : _ref$heading,
+    _ref$icon = _ref.icon,
+    icon = _ref$icon === void 0 ? null : _ref$icon,
+    _ref$isWhite = _ref.isWhite,
+    isWhite = _ref$isWhite === void 0 ? false : _ref$isWhite,
+    _ref$noMargin = _ref.noMargin,
+    noMargin = _ref$noMargin === void 0 ? false : _ref$noMargin,
+    _ref$pageHeader = _ref.pageHeader,
+    pageHeader = _ref$pageHeader === void 0 ? false : _ref$pageHeader,
+    title = _ref.title,
+    _ref$id = _ref.id,
+    id = _ref$id === void 0 ? null : _ref$id,
+    menu = _ref.menu,
+    primaryAction = _ref.primaryAction,
+    secondaryAction = _ref.secondaryAction,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children;
   // If id is in the URL as a scrollTo param, scroll to it on render.
-  const ref = useRef();
-  useEffect(() => {
-    const params = new Proxy(new URLSearchParams(window.location.search), {
-      get: (searchParams, prop) => searchParams.get(prop)
+  var ref = useRef();
+  useEffect(function () {
+    var params = new Proxy(new URLSearchParams(window.location.search), {
+      get: function get(searchParams, prop) {
+        return searchParams.get(prop);
+      }
     });
-    const scrollToId = params.scrollTo;
+    var scrollToId = params.scrollTo;
     if (scrollToId && scrollToId === id) {
       // Let parent scroll action run before running this.
-      window.setTimeout(() => ref.current.scrollIntoView({
-        behavior: 'smooth'
-      }), 250);
+      window.setTimeout(function () {
+        return ref.current.scrollIntoView({
+          behavior: 'smooth'
+        });
+      }, 250);
     }
   }, []);
-  const classes = classnames('newspack-section-header', centered && 'newspack-section-header--is-centered', isWhite && 'newspack-section-header--is-white', noMargin && 'newspack-section-header--no-margin', pageHeader && 'newspack-section-header--page-header');
-  const HeadingTag = pageHeader ? 'h1' : `h${heading}`;
+  var classes = classnames('newspack-section-header', centered && 'newspack-section-header--is-centered', isWhite && 'newspack-section-header--is-white', noMargin && 'newspack-section-header--no-margin', pageHeader && 'newspack-section-header--page-header');
+  var HeadingTag = pageHeader ? 'h1' : "h".concat(heading);
+  var titleContent = null;
+  if (typeof title === 'string') {
+    titleContent = /*#__PURE__*/_jsxs("div", {
+      className: "newspack-section-header__title-container",
+      children: [/*#__PURE__*/_jsxs(HeadingTag, {
+        children: [title, badges !== null && badges !== void 0 && badges.length ? badges.map(function (badge, i) {
+          return /*#__PURE__*/_jsx(Badge, {
+            text: badge.label,
+            level: badge.level || 'default'
+          }, i);
+        }) : null]
+      }), (menu === null || menu === void 0 ? void 0 : menu.length) > 0 && /*#__PURE__*/_jsx(DropdownMenu, {
+        className: "newspack-section-header__menu",
+        icon: moreVertical,
+        label: __('More options', 'newspack-plugin'),
+        children: function children() {
+          return menu.map(function (item, index) {
+            return /*#__PURE__*/_jsx(MenuItem, {
+              icon: item.icon,
+              href: item.href,
+              onClick: item.action,
+              disabled: item.disabled || false,
+              isDestructive: item.destructive || false,
+              children: item.label
+            }, index);
+          });
+        }
+      }), secondaryAction && /*#__PURE__*/_jsx("div", {
+        className: "newspack-section-header__secondary-action",
+        children: /*#__PURE__*/_jsx(Button, {
+          variant: "link",
+          href: secondaryAction.href,
+          onClick: secondaryAction.action,
+          children: secondaryAction.label
+        })
+      })]
+    });
+  } else if (typeof title === 'function') {
+    titleContent = /*#__PURE__*/_jsx(HeadingTag, {
+      children: title()
+    });
+  }
   return /*#__PURE__*/_jsxs("div", {
     id: id,
     className: classnames('newspack-section-header__container', backNav && 'newspack-section-header--has-back-nav', primaryAction && 'newspack-section-header--has-primary-action', className),
@@ -94,35 +151,23 @@ const SectionHeader = ({
           icon: icon,
           size: 48
         })
-      }), backNav && /*#__PURE__*/_jsx("div", {
-        className: "newspack-section-header__back-nav",
-        children: /*#__PURE__*/_jsx(Tooltip, {
-          text: __('Go back', 'newspack-plugin'),
-          children: /*#__PURE__*/_jsx(Button, {
-            href: backNav,
-            icon: chevronLeft,
-            variant: "tertiary"
-          })
-        })
-      }), typeof title === 'string' && /*#__PURE__*/_jsxs("div", {
-        className: "newspack-section-header__title-container",
-        children: [/*#__PURE__*/_jsx(HeadingTag, {
-          children: title
-        }), badges?.length ? badges.map((badge, i) => /*#__PURE__*/_jsx(Badge, {
-          text: badge.label,
-          level: badge.level || 'default'
-        }, i)) : null, secondaryAction && /*#__PURE__*/_jsx("div", {
-          className: "newspack-section-header__secondary-action",
-          children: /*#__PURE__*/_jsx(Button, {
-            variant: "link",
-            href: secondaryAction.href,
-            onClick: secondaryAction.action,
-            children: secondaryAction.label
+      }), backNav ? /*#__PURE__*/_jsxs(HStack, {
+        alignment: "left",
+        style: {
+          position: 'relative'
+        },
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "newspack-section-header__back-nav",
+          children: /*#__PURE__*/_jsx(Tooltip, {
+            text: __('Go back', 'newspack-plugin'),
+            children: /*#__PURE__*/_jsx(Button, {
+              href: backNav,
+              icon: chevronLeft,
+              variant: "tertiary"
+            })
           })
-        })]
-      }), typeof title === 'function' && /*#__PURE__*/_jsx(HeadingTag, {
-        children: title()
-      }), description && typeof description === 'string' && /*#__PURE__*/_jsx("p", {
+        }), titleContent]
+      }) : titleContent, description && typeof description === 'string' && /*#__PURE__*/_jsx("p", {
         children: description
       }), typeof description === 'function' && /*#__PURE__*/_jsx("p", {
         children: description()

package/dist/esm/section-header/style.scss

@@ -3,6 +3,7 @@
  */
 
 @use "~@wordpress/base-styles/colors" as wp-colors;
+@use "~@wordpress/base-styles/variables" as wp-vars;
 @use "../../../colors/colors.module" as colors;
 
 .newspack-section-header {
@@ -14,6 +15,9 @@
 		&:not(:first-child) {
 			margin-top: 48px;
 		}
+		&:has(> .newspack-section-header--no-margin) {
+			margin-top: 0;
+		}
 		&.newspack-section-header--has-primary-action {
 			display: flex;
 			flex-direction: column;
@@ -24,18 +28,22 @@
 			}
 		}
 		&.newspack-section-header--has-back-nav {
-			--back-nav-button-size: 36px;
-			margin-left: calc(var(--back-nav-button-size) + 8px);
 			@media (min-width: 782px) {
-				margin-left: 0;
+				.newspack-section-header__title-container,
+				p {
+					max-width: calc(50% - 16px);
+				}
 			}
 		}
 	}
 
 	&__back-nav {
-		left: calc((var(--back-nav-button-size) + 8px) * -1);
-		position: absolute;
-		top: calc(50% - (var(--back-nav-button-size) / 2));
+		@media (min-width: 1280px) {
+			left: 0;
+			position: absolute;
+			top: 50%;
+			transform: translate(calc(-100% - 8px), -50%);
+		}
 		a,
 		button {
 			color: inherit !important;
@@ -77,15 +85,27 @@
 	}
 
 	&__title-container {
-		align-items: baseline;
+		align-items: center;
 		display: flex;
 		gap: 8px;
 
+		h2 {
+			font-size: wp-vars.$font-size-x-large;
+			font-weight: wp-vars.$font-weight-medium;
+			line-height: wp-vars.$font-line-height-x-large;
+		}
+
+		.newspack-section-header__menu,
+		.newspack-section-header__secondary-action,
 		.newspack-badge {
-			transform: translateY(-4px);
+			margin-top: 8px;
 		}
 	}
 
+	&__menu {
+		align-self: center;
+	}
+
 	&__primary-action {
 		@media (min-width: 782px) {
 			display: flex;
@@ -142,9 +162,9 @@
 			}
 		}
 		h1 {
-			font-size: 1.25rem;
-			font-weight: 500;
-			line-height: 1.5;
+			font-size: wp-vars.$font-size-x-large;
+			font-weight: wp-vars.$font-weight-medium;
+			line-height: wp-vars.$font-line-height-x-large;
 		}
 	}
 }

package/dist/esm/select-control/ButtonGroupControl.js

@@ -14,17 +14,16 @@ import { BaseControl, Button, ButtonGroup } from '@wordpress/components';
  */
 import { hooks } from '..';
 import { jsx as _jsx } from "react/jsx-runtime";
-const ButtonGroupControl = ({
-  buttonOptions,
-  buttonSmall,
-  className,
-  help,
-  hideLabelFromVision,
-  label,
-  onChange,
-  value
-}) => {
-  const id = hooks.useUniqueId('button-group');
+var ButtonGroupControl = function ButtonGroupControl(_ref) {
+  var buttonOptions = _ref.buttonOptions,
+    buttonSmall = _ref.buttonSmall,
+    className = _ref.className,
+    help = _ref.help,
+    hideLabelFromVision = _ref.hideLabelFromVision,
+    label = _ref.label,
+    onChange = _ref.onChange,
+    value = _ref.value;
+  var id = hooks.useUniqueId('button-group');
   return /*#__PURE__*/_jsx(BaseControl, {
     label: label,
     help: help,
@@ -32,19 +31,25 @@ const ButtonGroupControl = ({
     id: id.current,
     className: classnames(className, 'components-select-control'),
     children: /*#__PURE__*/_jsx(ButtonGroup, {
-      children: buttonOptions.map(option => {
-        const isSelected = value === option.value;
-        let Label = () => option.label;
+      children: buttonOptions.map(function (option) {
+        var isSelected = value === option.value;
+        var Label = function Label() {
+          return option.label;
+        };
         if (option.icon) {
           // eslint-disable-next-line react/display-name
-          Label = () => /*#__PURE__*/_jsx(Icon, {
-            icon: option.icon
-          });
+          Label = function Label() {
+            return /*#__PURE__*/_jsx(Icon, {
+              icon: option.icon
+            });
+          };
         }
         return /*#__PURE__*/_jsx(Button, {
           variant: isSelected ? 'primary' : null,
           isPressed: isSelected,
-          onClick: () => onChange(option.value),
+          onClick: function onClick() {
+            return onChange(option.value);
+          },
           isSmall: buttonSmall,
           children: /*#__PURE__*/_jsx(Label, {})
         }, option.value);

package/dist/esm/select-control/GroupedSelectControl.js

@@ -1,3 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["help", "label", "onChange", "optgroups", "className", "hideLabelFromVision"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * WordPress dependencies
  */
@@ -21,23 +26,23 @@ import { hooks } from '..';
  * SelectControl with optgroup support
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export default function GroupedSelectControl({
-  help,
-  label,
-  onChange,
-  optgroups = [],
-  className,
-  hideLabelFromVision,
-  ...props
-}) {
-  const onChangeValue = event => {
-    const {
-      value
-    } = event.target;
-    const optgroup = find(optgroups, group => some(group.options, ['value', value]));
+export default function GroupedSelectControl(_ref) {
+  var help = _ref.help,
+    label = _ref.label,
+    onChange = _ref.onChange,
+    _ref$optgroups = _ref.optgroups,
+    optgroups = _ref$optgroups === void 0 ? [] : _ref$optgroups,
+    className = _ref.className,
+    hideLabelFromVision = _ref.hideLabelFromVision,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var onChangeValue = function onChangeValue(event) {
+    var value = event.target.value;
+    var optgroup = find(optgroups, function (group) {
+      return some(group.options, ['value', value]);
+    });
     onChange(value, optgroup);
   };
-  const id = hooks.useUniqueId('group-select');
+  var id = hooks.useUniqueId('group-select');
   return /*#__PURE__*/_jsx(BaseControl, {
     label: label,
     hideLabelFromVision: hideLabelFromVision,
@@ -46,27 +51,30 @@ export default function GroupedSelectControl({
     className: classnames(className, 'components-select-control'),
     children: /*#__PURE__*/_jsxs("div", {
       className: "relative",
-      children: [/*#__PURE__*/_jsxs("select", {
+      children: [/*#__PURE__*/_jsxs("select", _objectSpread(_objectSpread({
         id: id,
         className: "components-select-control__input",
         onChange: onChangeValue,
-        "aria-describedby": !!help ? `${id}__help` : undefined,
-        ...props,
+        "aria-describedby": !!help ? "".concat(id, "__help") : undefined
+      }, props), {}, {
         children: [/*#__PURE__*/_jsx("option", {
           value: "",
           children: __('-- Select --', 'newspack-plugin')
-        }), optgroups.map(({
-          label: optgroupLabel,
-          options
-        }, optgroupIndex) => /*#__PURE__*/_jsx("optgroup", {
-          label: optgroupLabel,
-          children: options.map((option, optionIndex) => /*#__PURE__*/_jsx("option", {
-            value: option.value,
-            disabled: option.disabled,
-            children: option.label
-          }, `${option.label}-${option.value}-${optionIndex}`))
-        }, optgroupIndex))]
-      }), /*#__PURE__*/_jsx("div", {
+        }), optgroups.map(function (_ref2, optgroupIndex) {
+          var optgroupLabel = _ref2.label,
+            options = _ref2.options;
+          return /*#__PURE__*/_jsx("optgroup", {
+            label: optgroupLabel,
+            children: options.map(function (option, optionIndex) {
+              return /*#__PURE__*/_jsx("option", {
+                value: option.value,
+                disabled: option.disabled,
+                children: option.label
+              }, "".concat(option.label, "-").concat(option.value, "-").concat(optionIndex));
+            })
+          }, optgroupIndex);
+        })]
+      })), /*#__PURE__*/_jsx("div", {
         className: "components-select-control__arrow-wrapper",
         children: /*#__PURE__*/_jsx(Icon, {
           icon: chevronDown,