@kaizen/components 1.68.4 → 1.68.6

package/dist/cjs/Tile/subcomponents/GenericTile/GenericTile.cjs

@@ -34,7 +34,26 @@ var GenericTile = function (_a) {
   var _d = React.useState(false),
     isFlipped = _d[0],
     setIsFlipped = _d[1];
+  var _e = React.useState(false),
+    isDocumentReady = _e[0],
+    setIsDocumentReady = _e[1];
   var formatMessage = i18nReactIntl.useIntl().formatMessage;
+  var infoButtonRef = React.useRef(null);
+  var infoButtonReturnRef = React.useRef(null);
+  React.useEffect(function () {
+    setIsDocumentReady(true);
+  }, []);
+  React.useEffect(function () {
+    if (!isDocumentReady) {
+      setIsDocumentReady(true);
+      return;
+    }
+    if (isFlipped) {
+      infoButtonReturnRef.current.focus();
+    } else {
+      infoButtonRef.current.focus();
+    }
+  }, [isFlipped]);
   var translatedInfoLabel = formatMessage({
     id: "kzGenericTile.infoButtonLabel",
     defaultMessage: "View more information:",
@@ -69,7 +88,8 @@ var GenericTile = function (_a) {
         return setIsFlipped(true);
       },
       disabled: isFlipped,
-      "aria-hidden": isFlipped
+      "aria-hidden": isFlipped,
+      ref: infoButtonRef
     })), renderTitle(), React__default.default.createElement("div", {
       className: GenericTile_module.children
     }, children && children), footer && React__default.default.createElement("div", {
@@ -114,7 +134,8 @@ var GenericTile = function (_a) {
         return setIsFlipped(false);
       },
       disabled: !isFlipped,
-      "aria-hidden": !isFlipped
+      "aria-hidden": !isFlipped,
+      ref: infoButtonReturnRef
     })), React__default.default.createElement("div", {
       className: GenericTile_module.information
     }, renderInformation(information)));

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

@@ -32,8 +32,10 @@ var Button = React.forwardRef(function (_a, ref) {
     _f = _a.hasHiddenPendingLabel,
     propsHasHiddenPendingLabel = _f === void 0 ? false : _f,
     pendingLabel = _a.pendingLabel,
-    restProps = tslib.__rest(_a, ["variant", "size", "className", "children", "isDisabled", "isFullWidth", "icon", "iconPosition", "hasHiddenLabel", "isPending", "hasHiddenPendingLabel", "pendingLabel"]);
-  var isReversed = ReversedColors.useReversedColors();
+    isReversed = _a.isReversed,
+    restProps = tslib.__rest(_a, ["variant", "size", "className", "children", "isDisabled", "isFullWidth", "icon", "iconPosition", "hasHiddenLabel", "isPending", "hasHiddenPendingLabel", "pendingLabel", "isReversed"]);
+  var shouldUseReverse = ReversedColors.useReversedColors();
+  var isReversedVariant = isReversed !== null && isReversed !== void 0 ? isReversed : shouldUseReverse;
   var pendingProps = isPending ? {
     isPending: isPending,
     hasHiddenPendingLabel: hasHiddenLabel || propsHasHiddenPendingLabel,
@@ -42,7 +44,7 @@ var Button = React.forwardRef(function (_a, ref) {
   var buttonContentClass = isPending ? !hasHiddenLabel && propsHasHiddenPendingLabel ? Button_module.retainContentWidth : Button_module.hideContentWidth : undefined;
   return React__default.default.createElement(reactAriaComponents.Button, tslib.__assign({
     ref: ref,
-    className: mergeClassNames.mergeClassNames(Button_module.button, Button_module[size], hasHiddenLabel && Button_module["".concat(size, "IconButton")], isDisabled && Button_module.isDisabled, isReversed ? Button_module["".concat(variant, "Reversed")] : Button_module[variant], isFullWidth && Button_module.fullWidth, className),
+    className: mergeClassNames.mergeClassNames(Button_module.button, Button_module[size], hasHiddenLabel && Button_module["".concat(size, "IconButton")], isDisabled && Button_module.isDisabled, isReversedVariant ? Button_module["".concat(variant, "Reversed")] : Button_module[variant], isFullWidth && Button_module.fullWidth, className),
     isDisabled: isDisabled,
     isPending: isPending
   }, restProps), function (racStateProps) {

package/dist/esm/Tile/subcomponents/GenericTile/GenericTile.mjs

@@ -1,5 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { useIntl } from '@cultureamp/i18n-react-intl';
 import classnames from 'classnames';
 import { Heading } from '../../../Heading/Heading.mjs';
@@ -26,7 +26,26 @@ const GenericTile = /*#__PURE__*/function () {
     var _d = useState(false),
       isFlipped = _d[0],
       setIsFlipped = _d[1];
+    var _e = useState(false),
+      isDocumentReady = _e[0],
+      setIsDocumentReady = _e[1];
     var formatMessage = useIntl().formatMessage;
+    var infoButtonRef = useRef(null);
+    var infoButtonReturnRef = useRef(null);
+    useEffect(function () {
+      setIsDocumentReady(true);
+    }, []);
+    useEffect(function () {
+      if (!isDocumentReady) {
+        setIsDocumentReady(true);
+        return;
+      }
+      if (isFlipped) {
+        infoButtonReturnRef.current.focus();
+      } else {
+        infoButtonRef.current.focus();
+      }
+    }, [isFlipped]);
     var translatedInfoLabel = formatMessage({
       id: "kzGenericTile.infoButtonLabel",
       defaultMessage: "View more information:",
@@ -61,7 +80,8 @@ const GenericTile = /*#__PURE__*/function () {
           return setIsFlipped(true);
         },
         disabled: isFlipped,
-        "aria-hidden": isFlipped
+        "aria-hidden": isFlipped,
+        ref: infoButtonRef
       }))), renderTitle(), /*#__PURE__*/React.createElement("div", {
         className: styles.children
       }, children && children), footer && /*#__PURE__*/React.createElement("div", {
@@ -106,7 +126,8 @@ const GenericTile = /*#__PURE__*/function () {
           return setIsFlipped(false);
         },
         disabled: !isFlipped,
-        "aria-hidden": !isFlipped
+        "aria-hidden": !isFlipped,
+        ref: infoButtonReturnRef
       })), /*#__PURE__*/React.createElement("div", {
         className: styles.information
       }, renderInformation(information)));

package/dist/esm/__actions__/Button/v3/Button.mjs

@@ -24,8 +24,10 @@ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
     _f = _a.hasHiddenPendingLabel,
     propsHasHiddenPendingLabel = _f === void 0 ? false : _f,
     pendingLabel = _a.pendingLabel,
-    restProps = __rest(_a, ["variant", "size", "className", "children", "isDisabled", "isFullWidth", "icon", "iconPosition", "hasHiddenLabel", "isPending", "hasHiddenPendingLabel", "pendingLabel"]);
-  var isReversed = useReversedColors();
+    isReversed = _a.isReversed,
+    restProps = __rest(_a, ["variant", "size", "className", "children", "isDisabled", "isFullWidth", "icon", "iconPosition", "hasHiddenLabel", "isPending", "hasHiddenPendingLabel", "pendingLabel", "isReversed"]);
+  var shouldUseReverse = useReversedColors();
+  var isReversedVariant = isReversed !== null && isReversed !== void 0 ? isReversed : shouldUseReverse;
   var pendingProps = isPending ? {
     isPending: isPending,
     hasHiddenPendingLabel: hasHiddenLabel || propsHasHiddenPendingLabel,
@@ -34,7 +36,7 @@ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
   var buttonContentClass = isPending ? !hasHiddenLabel && propsHasHiddenPendingLabel ? styles.retainContentWidth : styles.hideContentWidth : undefined;
   return /*#__PURE__*/React.createElement(Button$1, __assign({
     ref: ref,
-    className: mergeClassNames(styles.button, styles[size], hasHiddenLabel && styles["".concat(size, "IconButton")], isDisabled && styles.isDisabled, isReversed ? styles["".concat(variant, "Reversed")] : styles[variant], isFullWidth && styles.fullWidth, className),
+    className: mergeClassNames(styles.button, styles[size], hasHiddenLabel && styles["".concat(size, "IconButton")], isDisabled && styles.isDisabled, isReversedVariant ? styles["".concat(variant, "Reversed")] : styles[variant], isFullWidth && styles.fullWidth, className),
     isDisabled: isDisabled,
     isPending: isPending
   }, restProps), function (racStateProps) {