@kaizen/components 1.68.6 → 1.68.8

package/dist/cjs/__actions__/Button/v1/GenericButton/GenericButton.cjs

@@ -24,7 +24,7 @@ var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 // This is so we can support properties like aria-* or data-*
 var getCustomProps = function (props) {
   var keys = Object.keys(props).filter(function (k) {
-    return k.indexOf("-") !== -1;
+    return k.includes('-');
   });
   return keys.reduce(function (acc, val) {
     acc[val] = props[val];
@@ -33,7 +33,7 @@ var getCustomProps = function (props) {
 };
 var GenericButton = React.forwardRef(function (_a, ref) {
   var _b = _a.iconPosition,
-    iconPosition = _b === void 0 ? "start" : _b,
+    iconPosition = _b === void 0 ? 'start' : _b,
     _c = _a.iconButton,
     iconButton = _c === void 0 ? false : _c,
     _d = _a.primary,
@@ -45,7 +45,7 @@ var GenericButton = React.forwardRef(function (_a, ref) {
     _g = _a.disableTabFocusAndIUnderstandTheAccessibilityImplications,
     disableTabFocusAndIUnderstandTheAccessibilityImplications = _g === void 0 ? false : _g,
     _h = _a.type,
-    type = _h === void 0 ? "button" : _h,
+    type = _h === void 0 ? 'button' : _h,
     otherProps = tslib.__rest(_a, ["iconPosition", "iconButton", "primary", "secondary", "newTabAndIUnderstandTheAccessibilityImplications", "disableTabFocusAndIUnderstandTheAccessibilityImplications", "type"]);
   var buttonRef = React.useRef();
   var wrapperRef = React.useRef(null);
@@ -72,27 +72,27 @@ var GenericButton = React.forwardRef(function (_a, ref) {
   return React__default.default.createElement("span", {
     ref: wrapperRef,
     className: classnames__default.default(GenericButton_module.container, props.fullWidth && GenericButton_module.fullWidth),
-    "aria-live": "workingLabel" in props ? "polite" : undefined
+    "aria-live": 'workingLabel' in props ? 'polite' : undefined
   }, props.href && !props.disabled && !props.working ? renderLink(props, buttonRef) : renderButton(props, buttonRef));
 });
-GenericButton.displayName = "GenericButton";
+GenericButton.displayName = 'GenericButton';
 var renderCustomComponent = function (CustomComponent, props, ref) {
   var passedInProps = tslib.__assign({
-    id: props.id,
-    className: buttonClass(props),
-    disabled: props.disabled,
-    href: props.href,
-    onClick: props.onClick,
-    onFocus: props.onFocus,
-    onBlur: props.onBlur,
-    "aria-label": generateAriaLabel(props)
+    'id': props.id,
+    'className': buttonClass(props),
+    'disabled': props.disabled,
+    'href': props.href,
+    'onClick': props.onClick,
+    'onFocus': props.onFocus,
+    'onBlur': props.onBlur,
+    'aria-label': generateAriaLabel(props)
   }, getCustomProps(props));
   var _a = reactAriaComponents.useContextProps(passedInProps, ref,
     // @ts-expect-error we're using span ref on link context, but that's ok because we need only sizing
     reactAriaComponents.LinkContext),
     contextProps = _a[0],
     contextRef = _a[1];
-  // @ts-expect-error
+  // @ts-expect-error Not fixing as a new Button component exists
   // @todo: Make a wrapper and take it out of Button
   var linkProps = reactAria.useLink(contextProps, contextRef).linkProps;
   // Unset this because the one defined in buttonProps shows
@@ -101,40 +101,40 @@ var renderCustomComponent = function (CustomComponent, props, ref) {
   return React__default.default.createElement("span", {
     ref: contextRef,
     className: classnames__default.default(GenericButton_module.container, props.fullWidth && GenericButton_module.fullWidth),
-    "aria-live": "workingLabel" in props ? "polite" : undefined
+    "aria-live": 'workingLabel' in props ? 'polite' : undefined
   }, React__default.default.createElement(CustomComponent, tslib.__assign({}, contextProps, linkProps, {
-    "aria-describedby": props["aria-describedby"] === null ? undefined : linkProps["aria-describedby"]
+    "aria-describedby": props['aria-describedby'] === null ? undefined : linkProps['aria-describedby']
   }), renderContent(props)));
 };
 var renderButton = function (props, ref) {
-  var disableActions = props.disabled || props.working;
+  var _a;
+  var disableActions = Boolean(props.disabled || props.working);
   var passedInProps = tslib.__assign({
-    id: props.id,
-    disabled: props.disabled,
-    onClick: !disableActions ? props.onClick : undefined,
-    onMouseDown: !disableActions ? props.onMouseDown : undefined,
-    type: props.type,
-    onFocus: props.onFocus,
-    onBlur: props.onBlur,
-    form: props.form,
-    formAction: props.formAction,
-    formMethod: props.formMethod,
-    formEncType: props.formEncType,
-    formTarget: props.formTarget,
-    formNoValidate: props.formNoValidate,
-    className: buttonClass(props),
-    "aria-label": generateAriaLabel(props),
-    "aria-disabled": props.disabled || props.working ? true : undefined,
-    tabIndex: props.disableTabFocusAndIUnderstandTheAccessibilityImplications ? -1 : undefined
+    'id': props.id,
+    'disabled': props.disabled,
+    'onClick': !disableActions ? props.onClick : undefined,
+    'onMouseDown': !disableActions ? props.onMouseDown : undefined,
+    'type': props.type,
+    'onFocus': props.onFocus,
+    'onBlur': props.onBlur,
+    'form': props.form,
+    'formAction': props.formAction,
+    'formMethod': props.formMethod,
+    'formEncType': props.formEncType,
+    'formTarget': props.formTarget,
+    'formNoValidate': props.formNoValidate,
+    'className': buttonClass(props),
+    'aria-label': generateAriaLabel(props),
+    'aria-disabled': props.disabled || props.working ? true : undefined,
+    'tabIndex': props.disableTabFocusAndIUnderstandTheAccessibilityImplications ? -1 : undefined
   }, getCustomProps(props));
-  // we're using useFocusable instead of useButton because at this stage we want to hook only to focusable.
+  // @ts-expect-error we're using useFocusable instead of useButton because at this stage we want to hook only to focusable.
   // Not standardize button behavior as we're currently relying on some weird native behaviours (like onClick firing on enter key press) see https://react-spectrum.adobe.com/blog/building-a-button-part-1.html
-  // @ts-ignore
   var focusableProps = reactAria.useFocusable(passedInProps, ref).focusableProps;
   return (
     // eslint-disable-next-line react/button-has-type
     React__default.default.createElement("button", tslib.__assign({}, passedInProps, focusableProps, {
-      "aria-describedby": props["aria-describedby"] === null ? undefined : props["aria-describedby"] || focusableProps["aria-describedby"],
+      "aria-describedby": props['aria-describedby'] === null ? undefined : (_a = props['aria-describedby']) !== null && _a !== void 0 ? _a : focusableProps['aria-describedby'],
       // Unset this because the one defined in buttonProps shows
       // focus-visible styles on click
       onPointerDown: undefined,
@@ -143,24 +143,24 @@ var renderButton = function (props, ref) {
   );
 };
 var renderLink = function (props, ref) {
-  var target = props.newTabAndIUnderstandTheAccessibilityImplications ? "_blank" : "_self";
+  var _a;
+  var target = props.newTabAndIUnderstandTheAccessibilityImplications ? '_blank' : '_self';
   var passedInProps = tslib.__assign({
-    id: props.id,
-    href: props.href,
+    'id': props.id,
+    'href': props.href,
     target: target,
-    rel: target === "_blank" ? "noopener noreferrer" : undefined,
-    className: buttonClass(props),
-    onClick: props.onClick,
-    onFocus: props.onFocus,
-    onBlur: props.onBlur,
-    "aria-label": generateAriaLabel(props)
+    'rel': target === '_blank' ? 'noopener noreferrer' : undefined,
+    'className': buttonClass(props),
+    'onClick': props.onClick,
+    'onFocus': props.onFocus,
+    'onBlur': props.onBlur,
+    'aria-label': generateAriaLabel(props)
   }, getCustomProps(props));
-  // we're using useFocusable instead of useLink because at this stage we want to hook only to focusable.
+  // @ts-expect-error we're using useFocusable instead of useLink because at this stage we want to hook only to focusable.
   // Not standardize button behavior as we're currently relying on some weird native behaviours (like onClick firing on enter key press) see https://react-spectrum.adobe.com/blog/building-a-button-part-1.html
-  // @ts-ignore
   var focusableProps = reactAria.useFocusable(passedInProps, ref).focusableProps;
   return React__default.default.createElement("a", tslib.__assign({}, passedInProps, focusableProps, {
-    "aria-describedby": props["aria-describedby"] === null ? undefined : props["aria-describedby"] || focusableProps["aria-describedby"],
+    "aria-describedby": props['aria-describedby'] === null ? undefined : (_a = props['aria-describedby']) !== null && _a !== void 0 ? _a : focusableProps['aria-describedby'],
     // Unset this because the one defined in linkProps shows
     // focus-visible styles on click
     onPointerDown: undefined,
@@ -170,8 +170,8 @@ var renderLink = function (props, ref) {
 var buttonClass = function (props) {
   var isDefault = !props.primary && !props.destructive && !props.secondary;
   return classnames__default.default(GenericButton_module.button, isDefault && GenericButton_module.default,
-  // @ts-ignore
-  (props.disabled || props["aria-disabled"]) && GenericButton_module.disabled, props.primary && GenericButton_module.primary, props.destructive && GenericButton_module.destructive, props.secondary && GenericButton_module.secondary, props.size && GenericButton_module[props.size], props.reversed && GenericButton_module.reversed, props.iconButton && GenericButton_module.iconButton, props.working && GenericButton_module.working, (props.directionalLink || props.paginationLink) && GenericButton_module.circleButton, props.directionalLink && GenericButton_module.directionalLink, props.paginationLink && GenericButton_module.paginationLink, props.isActive && GenericButton_module.isPaginationLinkActive, props.classNameOverride);
+  // @ts-expect-error aria-disabled exists in props
+  Boolean(props.disabled || props['aria-disabled']) && GenericButton_module.disabled, props.primary && GenericButton_module.primary, props.destructive && GenericButton_module.destructive, props.secondary && GenericButton_module.secondary, props.size && GenericButton_module[props.size], props.reversed && GenericButton_module.reversed, props.iconButton && GenericButton_module.iconButton, props.working && GenericButton_module.working, Boolean(props.directionalLink || props.paginationLink) && GenericButton_module.circleButton, props.directionalLink && GenericButton_module.directionalLink, props.paginationLink && GenericButton_module.paginationLink, props.isActive && GenericButton_module.isPaginationLinkActive, props.classNameOverride);
 };
 var renderLoadingSpinner = function () {
   return React__default.default.createElement("div", {
@@ -190,18 +190,18 @@ var renderWorkingContent = function (props) {
       className: GenericButton_module.centeredLoadingSpinner
     }, renderLoadingSpinner()));
   }
-  return React__default.default.createElement(React__default.default.Fragment, null, props.iconPosition !== "end" && renderLoadingSpinner(), React__default.default.createElement("span", {
+  return React__default.default.createElement(React__default.default.Fragment, null, props.iconPosition !== 'end' && renderLoadingSpinner(), React__default.default.createElement("span", {
     className: GenericButton_module.label
   }, props.workingLabel), props.additionalContent && React__default.default.createElement("span", {
     className: GenericButton_module.additionalContentWrapper
-  }, props.additionalContent), props.iconPosition === "end" && renderLoadingSpinner());
+  }, props.additionalContent), props.iconPosition === 'end' && renderLoadingSpinner());
 };
 var renderDefaultContent = function (props) {
-  return React__default.default.createElement(React__default.default.Fragment, null, props.icon && props.iconPosition !== "end" && renderIcon(props.icon), (!props.icon || !props.iconButton) && React__default.default.createElement("span", {
+  return React__default.default.createElement(React__default.default.Fragment, null, props.icon && props.iconPosition !== 'end' && renderIcon(props.icon), (!props.icon || !props.iconButton) && React__default.default.createElement("span", {
     className: GenericButton_module.label
   }, props.label), props.additionalContent && React__default.default.createElement("span", {
     className: GenericButton_module.additionalContentWrapper
-  }, props.additionalContent), renderBadge(props), props.icon && props.iconPosition === "end" && renderIcon(props.icon));
+  }, props.additionalContent), renderBadge(props), props.icon && props.iconPosition === 'end' && renderIcon(props.icon));
 };
 var renderBadge = function (props) {
   if (!props.badge) return null;

package/dist/cjs/__actions__/Button/v1/IconButton/IconButton.cjs

@@ -21,5 +21,5 @@ var IconButton = React.forwardRef(function (props, ref) {
     ref: ref
   }));
 });
-IconButton.displayName = "IconButton";
+IconButton.displayName = 'IconButton';
 exports.IconButton = IconButton;

package/dist/cjs/__actions__/Button/v3/Button.cjs

@@ -16,9 +16,9 @@ function _interopDefault(e) {
 var React__default = /*#__PURE__*/_interopDefault(React);
 var Button = React.forwardRef(function (_a, ref) {
   var _b = _a.variant,
-    variant = _b === void 0 ? "primary" : _b,
+    variant = _b === void 0 ? 'primary' : _b,
     _c = _a.size,
-    size = _c === void 0 ? "medium" : _c,
+    size = _c === void 0 ? 'medium' : _c,
     className = _a.className,
     children = _a.children,
     isDisabled = _a.isDisabled,
@@ -48,7 +48,7 @@ var Button = React.forwardRef(function (_a, ref) {
     isDisabled: isDisabled,
     isPending: isPending
   }, restProps), function (racStateProps) {
-    var childIsFunction = typeof children === "function";
+    var childIsFunction = typeof children === 'function';
     return React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(ButtonContent.ButtonContent, {
       size: size,
       icon: icon,
@@ -62,4 +62,5 @@ var Button = React.forwardRef(function (_a, ref) {
     }))));
   });
 });
+Button.displayName = 'Button';
 exports.Button = Button;

package/dist/cjs/__actions__/Button/v3/subcomponents/ButtonContent/ButtonContent.cjs

@@ -18,19 +18,19 @@ var ButtonContent = function (_a) {
   var children = _a.children,
     hasHiddenLabel = _a.hasHiddenLabel,
     _b = _a.size,
-    size = _b === void 0 ? "medium" : _b,
+    size = _b === void 0 ? 'medium' : _b,
     icon = _a.icon,
     _c = _a.iconPosition,
-    iconPosition = _c === void 0 ? "start" : _c,
+    iconPosition = _c === void 0 ? 'start' : _c,
     className = _a.className,
     restProps = tslib.__rest(_a, ["children", "hasHiddenLabel", "size", "icon", "iconPosition", "className"]);
   return React__default.default.createElement("span", tslib.__assign({
     className: classnames__default.default(className, ButtonContent_module.buttonContent, ButtonContent_module[size])
-  }, restProps), icon && iconPosition === "start" && React__default.default.createElement("span", {
+  }, restProps), icon && iconPosition === 'start' && React__default.default.createElement("span", {
     className: ButtonContent_module.buttonIcon
   }, icon), hasHiddenLabel ? React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, children) : React__default.default.createElement("span", {
     className: ButtonContent_module.buttonLabel
-  }, children), icon && iconPosition === "end" && React__default.default.createElement("span", {
+  }, children), icon && iconPosition === 'end' && React__default.default.createElement("span", {
     className: ButtonContent_module.buttonIcon
   }, icon));
 };

package/dist/cjs/__actions__/Button/v3/subcomponents/PendingContent/PendingContent.cjs

@@ -23,11 +23,11 @@ var PendingContent = function (_a) {
     _b = _a.hasHiddenPendingLabel,
     hasHiddenPendingLabel = _b === void 0 ? false : _b,
     _c = _a.size,
-    size = _c === void 0 ? "medium" : _c;
+    size = _c === void 0 ? 'medium' : _c;
   return React__default.default.createElement("span", {
     className: classnames__default.default(PendingContent_module.pendingContent, PendingContent_module[size])
   }, hasHiddenPendingLabel ? React__default.default.createElement(VisuallyHidden.VisuallyHidden, null, pendingLabel) : React__default.default.createElement("span", null, pendingLabel), React__default.default.createElement(LoadingSpinner.LoadingSpinner, {
-    size: size === "small" ? "xs" : "sm",
+    size: size === 'small' ? 'xs' : 'sm',
     accessibilityLabel: "",
     classNameOverride: hasHiddenPendingLabel ? PendingContent_module.centerSpinner : undefined
   }));

package/dist/cjs/__actions__/Menu/v1/Menu.cjs

@@ -54,5 +54,5 @@ var Menu = function (_a) {
     }
   }));
 };
-Menu.displayName = "Menu";
+Menu.displayName = 'Menu';
 exports.Menu = Menu;

package/dist/cjs/__actions__/Menu/v1/subcomponents/MenuDropdown/MenuDropdown.cjs

@@ -19,28 +19,28 @@ var MenuDropdown = function (_a) {
     id = _a.id,
     hideMenuDropdown = _a.hideMenuDropdown,
     _b = _a.autoHide,
-    autoHide = _b === void 0 ? "on" : _b,
+    autoHide = _b === void 0 ? 'on' : _b,
     _c = _a.align,
-    align = _c === void 0 ? "left" : _c,
+    align = _c === void 0 ? 'left' : _c,
     _d = _a.width,
-    width = _d === void 0 ? "default" : _d;
+    width = _d === void 0 ? 'default' : _d;
   var _e = React.useState(null),
     popperElement = _e[0],
     setPopperElement = _e[1];
   var _f = reactPopper.usePopper(referenceElement, popperElement, {
       modifiers: [{
-        name: "offset",
+        name: 'offset',
         options: {
           offset: [0, 6] // value used from the $spacing-xs scss variable,
         }
       }, {
-        name: "preventOverflow",
+        name: 'preventOverflow',
         options: {
           // Gives some room so the menu shadow doesn't get clipped if near the edge of the viewport.
           padding: 8
         }
       }],
-      placement: align === "left" ? "bottom-start" : "bottom-end"
+      placement: align === 'left' ? 'bottom-start' : 'bottom-end'
     }),
     popperStyles = _f.styles,
     attributes = _f.attributes;
@@ -54,24 +54,24 @@ var MenuDropdown = function (_a) {
     hideMenuDropdown();
   }, [hideMenuDropdown]);
   var handleRootClick = function () {
-    if (autoHide === "on") {
+    if (autoHide === 'on') {
       // ie. is not equal to "off" | "outside-click-only"
       hideMenuDropdown();
     }
   };
   React.useEffect(function () {
-    window.addEventListener("resize", handleDocumentResize, false);
+    window.addEventListener('resize', handleDocumentResize, false);
     return function () {
-      window.removeEventListener("resize", handleDocumentResize, false);
+      window.removeEventListener('resize', handleDocumentResize, false);
     };
   }, [handleDocumentResize]);
   React.useEffect(function () {
-    if (autoHide !== "off") {
-      document.addEventListener("click", handleDocumentClickForAutoHide, true);
+    if (autoHide !== 'off') {
+      document.addEventListener('click', handleDocumentClickForAutoHide, true);
     }
     return function () {
-      if (autoHide !== "off") {
-        document.removeEventListener("click", handleDocumentClickForAutoHide, true);
+      if (autoHide !== 'off') {
+        document.removeEventListener('click', handleDocumentClickForAutoHide, true);
       }
     };
   }, [autoHide, handleDocumentClickForAutoHide]);
@@ -90,9 +90,9 @@ var MenuDropdown = function (_a) {
     ref: setPopperElement
   }, attributes.popper, {
     style: popperStyles.popper,
-    className: classnames__default.default(MenuDropdown_module.menuContainer, width == "default" && MenuDropdown_module.defaultWidth),
+    className: classnames__default.default(MenuDropdown_module.menuContainer, width == 'default' && MenuDropdown_module.defaultWidth),
     onClick: handleRootClick
   }), children));
 };
-MenuDropdown.displayName = "MenuDropdown";
+MenuDropdown.displayName = 'MenuDropdown';
 exports.MenuDropdown = MenuDropdown;

package/dist/cjs/__actions__/Menu/v1/subcomponents/MenuHeading/MenuHeading.cjs

@@ -23,5 +23,5 @@ var MenuHeading = function (_a) {
     classNameOverride: classnames__default.default(MenuHeading_module.heading, classNameOverride)
   }, restProps));
 };
-MenuHeading.displayName = "MenuHeading";
+MenuHeading.displayName = 'MenuHeading';
 exports.MenuHeading = MenuHeading;

package/dist/cjs/__actions__/Menu/v1/subcomponents/MenuItem/MenuItem.cjs

@@ -27,7 +27,7 @@ var MenuItem = function (_a) {
   var iconNode = icon && React__default.default.createElement("span", {
     className: MenuItem_module.menuItem__Icon
   }, icon);
-  var className = classnames__default.default(MenuItem_module.menuItem, destructive && MenuItem_module["menuItem--destructive"], disabled && MenuItem_module["menuItem--disabled"], isActive && MenuItem_module["menuItem--active"]);
+  var className = classnames__default.default(MenuItem_module.menuItem, destructive && MenuItem_module['menuItem--destructive'], disabled && MenuItem_module['menuItem--disabled'], isActive && MenuItem_module['menuItem--active']);
   if (disabled) {
     return React__default.default.createElement("li", {
       className: MenuItem_module.menuListItem
@@ -48,7 +48,7 @@ var MenuItem = function (_a) {
       onClick: onClick,
       className: className,
       target: target,
-      "aria-current": isActive ? "page" : undefined,
+      "aria-current": isActive ? 'page' : undefined,
       "data-testid": dataTestId
     }, iconNode, wrappedLabel));
   }
@@ -62,5 +62,5 @@ var MenuItem = function (_a) {
     "data-testid": dataTestId
   }, iconNode, wrappedLabel));
 };
-MenuItem.displayName = "MenuItem";
+MenuItem.displayName = 'MenuItem';
 exports.MenuItem = MenuItem;

package/dist/cjs/__actions__/Menu/v1/subcomponents/MenuList/MenuList.cjs

@@ -24,7 +24,7 @@ const MenuList = /*#__PURE__*/function () {
       "aria-labelledby": heading ? listHeadingID : undefined
     }, restProps), children));
   };
-  MenuList.displayName = "MenuList";
+  MenuList.displayName = 'MenuList';
   return MenuList;
 }();
 exports.MenuList = MenuList;

package/dist/cjs/__actions__/Menu/v1/subcomponents/StatelessMenu/StatelessMenu.cjs

@@ -13,11 +13,11 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
 var StatelessMenu = function (_a) {
   var _b = _a.align,
-    align = _b === void 0 ? "left" : _b,
+    align = _b === void 0 ? 'left' : _b,
     _c = _a.dropdownWidth,
-    dropdownWidth = _c === void 0 ? "default" : _c,
+    dropdownWidth = _c === void 0 ? 'default' : _c,
     _d = _a.autoHide,
-    autoHide = _d === void 0 ? "on" : _d,
+    autoHide = _d === void 0 ? 'on' : _d,
     dataTestId = _a["data-testid"],
     dropdownId = _a.dropdownId,
     children = _a.children,
@@ -32,16 +32,16 @@ var StatelessMenu = function (_a) {
     setReferenceElement = _e[1];
   var portalSelectorElementRef = React.useRef(null);
   var menuButton = renderButton({
-    onClick: function (e) {
+    'onClick': function (e) {
       e.preventDefault();
       e.stopPropagation();
       toggleMenuDropdown();
     },
-    onMouseDown: function (e) {
+    'onMouseDown': function (e) {
       return e.preventDefault();
     },
-    "aria-haspopup": true,
-    "aria-expanded": isMenuVisible
+    'aria-haspopup': true,
+    'aria-expanded': isMenuVisible
   });
   React.useEffect(function () {
     portalSelectorElementRef.current = portalSelector ? document.querySelector(portalSelector) : null;
@@ -49,7 +49,7 @@ var StatelessMenu = function (_a) {
   React.useEffect(function () {
     if (portalSelector && !portalSelectorElementRef.current) {
       // eslint-disable-next-line no-console
-      console.warn("The portal could not be created using the selector: " + portalSelector);
+      console.warn('The portal could not be created using the selector: ' + portalSelector);
     }
   }, [portalSelectorElementRef, portalSelector]);
   var menu = isMenuVisible ? React__default.default.createElement(MenuDropdown.MenuDropdown, {
@@ -71,5 +71,5 @@ var StatelessMenu = function (_a) {
     }, menuButton), portalSelector && portalSelectorElementRef.current ? ReactDOM__default.default.createPortal(menu, portalSelectorElementRef.current) : menu)
   );
 };
-StatelessMenu.displayName = "StatelessMenu";
+StatelessMenu.displayName = 'StatelessMenu';
 exports.StatelessMenu = StatelessMenu;

package/dist/cjs/__actions__/Menu/v3/Menu.cjs

@@ -23,4 +23,5 @@ var Menu = React.forwardRef(function (_a, ref) {
     ref: ref
   }, props));
 });
+Menu.displayName = 'Menu';
 exports.Menu = Menu;

package/dist/cjs/__actions__/Menu/v3/MenuItem.cjs

@@ -21,15 +21,16 @@ var MenuItem = React.forwardRef(function (_a, ref) {
     children = _a.children,
     textValue = _a.textValue,
     props = tslib.__rest(_a, ["className", "icon", "children", "textValue"]);
-  var determinedTextValue = textValue || (typeof children === "string" ? children : undefined);
+  var determinedTextValue = textValue !== null && textValue !== void 0 ? textValue : typeof children === 'string' ? children : undefined;
   return React__default.default.createElement(reactAriaComponents.MenuItem, tslib.__assign({
     ref: ref,
     className: mergeClassNames.mergeClassNames(MenuItem_module.item, className),
     textValue: determinedTextValue
-  }, props), React__default.default.createElement(React__default.default.Fragment, null, typeof children === "string" && icon ? React__default.default.createElement("div", {
+  }, props), React__default.default.createElement(React__default.default.Fragment, null, typeof children === 'string' && icon ? React__default.default.createElement("div", {
     className: MenuItem_module.flexWrapper
   }, React__default.default.createElement("span", {
     className: MenuItem_module.iconWrapper
   }, icon), children) : React__default.default.createElement(React__default.default.Fragment, null, children)));
 });
+MenuItem.displayName = 'MenuItem';
 exports.MenuItem = MenuItem;

package/dist/cjs/__future__/Icon/Icon.cjs

@@ -20,9 +20,9 @@ var MaterialIcon = function (_a) {
     className = _a.className,
     restProps = tslib.__rest(_a, ["children", "isFilled", "isPresentational", "alt", "className"]);
   return React__default.default.createElement("span", tslib.__assign({
-    className: classnames__default.default(Icon_module["material-symbols-outlined"], Icon_module.icon, isFilled && Icon_module.filled, className),
+    className: classnames__default.default(Icon_module['material-symbols-outlined'], Icon_module.icon, isFilled && Icon_module.filled, className),
     "aria-hidden": isPresentational,
-    role: isPresentational ? undefined : "img",
+    role: isPresentational ? undefined : 'img',
     "aria-label": alt
   }, restProps), children);
 };

package/dist/cjs/__future__/Icon/constants.cjs

@@ -2,7 +2,7 @@
 
 /* eslint-disable camelcase */
 var handledRtlIcons = {
-  checklist: "checklist_rtl",
-  format_list_numbered: "format_list_numbered_rtl"
+  checklist: 'checklist_rtl',
+  format_list_numbered: 'format_list_numbered_rtl'
 };
 exports.handledRtlIcons = handledRtlIcons;

package/dist/cjs/__future__/Select/Select.cjs

@@ -50,13 +50,14 @@ var Select = function (_a) {
     selectedKey = _a.selectedKey,
     description = _a.description,
     _c = _a.placeholder,
-    placeholder = _c === void 0 ? "" : _c,
+    placeholder = _c === void 0 ? '' : _c,
     isDisabled = _a.isDisabled,
     portalContainerId = _a.portalContainerId,
     restProps = tslib.__rest(_a, ["label", "items", "id", "trigger", "children", "status", "validationMessage", "isReversed", "isFullWidth", "disabledValues", "classNameOverride", "selectedKey", "description", "placeholder", "isDisabled", "portalContainerId"]);
   var refs = reactDom.useFloating().refs;
   var triggerRef = refs.reference;
-  var id = propsId !== null && propsId !== void 0 ? propsId : React.useId();
+  var fallbackId = React.useId();
+  var id = propsId !== null && propsId !== void 0 ? propsId : fallbackId;
   var descriptionId = "".concat(id, "--description");
   var popoverId = "".concat(id, "--popover");
   var disabledKeys = getDisabledKeysFromItems.getDisabledKeysFromItems(items);
@@ -65,7 +66,7 @@ var Select = function (_a) {
     items: items,
     children: transformSelectItemToCollectionElement.transformSelectItemToCollectionElement,
     disabledKeys: disabledValues !== null && disabledValues !== void 0 ? disabledValues : disabledKeys,
-    selectedKey: typeof selectedKey === "number" ? selectedKey.toString() : selectedKey,
+    selectedKey: typeof selectedKey === 'number' ? selectedKey.toString() : selectedKey,
     description: description,
     placeholder: placeholder,
     isDisabled: isDisabled
@@ -83,9 +84,9 @@ var Select = function (_a) {
   // We use role=combobox, meaning screen readers will read the value.
   // So we're modifying the `aria-labelledby` property to remove the value element id.
   // Issue: https://github.com/adobe/react-spectrum/issues/4091
-  var reactAriaLabelledBy = reactAriaTriggerProps["aria-labelledby"];
+  var reactAriaLabelledBy = reactAriaTriggerProps['aria-labelledby'];
   var triggerProps = tslib.__assign(tslib.__assign({}, reactAriaTriggerProps), {
-    "aria-labelledby": reactAriaLabelledBy === null || reactAriaLabelledBy === void 0 ? void 0 : reactAriaLabelledBy.substring(reactAriaLabelledBy.indexOf(" ") + 1)
+    'aria-labelledby': reactAriaLabelledBy === null || reactAriaLabelledBy === void 0 ? void 0 : reactAriaLabelledBy.substring(reactAriaLabelledBy.indexOf(' ') + 1)
   });
   var buttonProps = button.useButton(triggerProps, triggerRef).buttonProps;
   var selectToggleProps = tslib.__assign(tslib.__assign({}, buttonProps), {
@@ -106,9 +107,9 @@ var Select = function (_a) {
   React.useEffect(function () {
     if (portalContainerId) {
       var portalElement = document.getElementById(portalContainerId);
-      portalElement && setPortalContainer(portalElement);
+      if (portalElement) setPortalContainer(portalElement);
     }
-  }, []);
+  }, [portalContainerId]);
   return React__default.default.createElement("div", {
     className: classnames__default.default(!isFullWidth && Select_module.notFullWidth, classNameOverride)
   }, React__default.default.createElement(select$1.HiddenSelect, {
@@ -136,7 +137,7 @@ var Select = function (_a) {
     reversed: isReversed
   })));
 };
-Select.displayName = "Select";
+Select.displayName = 'Select';
 Select.Section = ListBoxSection.ListBoxSection;
 Select.SectionDivider = SectionDivider.SectionDivider;
 Select.Option = Option.Option;

package/dist/cjs/__future__/Select/context/SelectContext.cjs

@@ -11,7 +11,7 @@ var SelectContext = React__default.default.createContext(null);
 var useSelectContext = function () {
   var context = React.useContext(SelectContext);
   if (!context) {
-    throw new Error("useSelectContext must be used within the SelectContext.Provider");
+    throw new Error('useSelectContext must be used within the SelectContext.Provider');
   }
   return context;
 };

package/dist/cjs/__future__/Select/subcomponents/ListBox/ListBox.cjs

@@ -22,7 +22,7 @@ var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var getOptionKeyFromCollection = function (state) {
   if (state.selectedItem) {
     return state.selectedItem.key;
-  } else if (state.focusStrategy === "last") {
+  } else if (state.focusStrategy === 'last') {
     return state.collection.getLastKey();
   }
   return state.collection.getFirstKey();
@@ -34,7 +34,7 @@ var safeQuerySelector = function (selector) {
     return document.querySelector(selector);
   } catch (error) {
     // eslint-disable-next-line no-console
-    console.error("Kaizen querySelector failed:", error);
+    console.error('Kaizen querySelector failed:', error);
     return null;
   }
 };
@@ -66,11 +66,13 @@ var ListBox = function (_a) {
         (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
       }
     }
+    // Only run this effect for checking the first successful render
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isClientReady]);
   return React__default.default.createElement("ul", tslib.__assign({
     ref: ref,
     className: classnames__default.default(ListBox_module.listBox, classNameOverride)
   }, listBoxProps, restProps), children);
 };
-ListBox.displayName = "ListBox";
+ListBox.displayName = 'ListBox';
 exports.ListBox = ListBox;