@kaizen/components 1.73.8 → 1.73.9

package/dist/cjs/AvatarGroup/AvatarGroup.cjs

@@ -12,8 +12,9 @@ function _interopDefault(e) {
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
-var renderCounter = function (remainingAvatars) {
-  if (remainingAvatars <= 0) return;
+var Counter = function (_a) {
+  var remainingAvatars = _a.remainingAvatars;
+  if (remainingAvatars <= 0) return null;
   return React__default.default.createElement("li", {
     "aria-label": "There ".concat(remainingAvatars > 1 ? "are ".concat(remainingAvatars, " other members") : "is ".concat(remainingAvatars, " other member"), " of this group"),
     className: AvatarGroup_module.AvatarGroupItem
@@ -22,7 +23,10 @@ var renderCounter = function (remainingAvatars) {
     "aria-hidden": true
   }, "+".concat(remainingAvatars)));
 };
-var renderAvatars = function (avatars, maxVisible, size) {
+var AllAvatars = function (_a) {
+  var avatars = _a.avatars,
+    maxVisible = _a.maxVisible,
+    size = _a.size;
   return React__default.default.createElement(React__default.default.Fragment, null, avatars === null || avatars === void 0 ? void 0 : avatars.map(function (avatarProps, index) {
     return index < maxVisible && React__default.default.createElement("li", {
       key: "avatar-".concat(index),
@@ -30,7 +34,9 @@ var renderAvatars = function (avatars, maxVisible, size) {
     }, React__default.default.createElement(Avatar.Avatar, tslib.__assign({}, avatarProps, {
       size: size
     })));
-  }), renderCounter((avatars === null || avatars === void 0 ? void 0 : avatars.length) - maxVisible));
+  }), React__default.default.createElement(Counter, {
+    remainingAvatars: (avatars === null || avatars === void 0 ? void 0 : avatars.length) - maxVisible
+  }));
 };
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3065021264/Avatar+Group Guidance} |
@@ -47,6 +53,10 @@ var AvatarGroup = function (_a) {
   return React__default.default.createElement("ul", tslib.__assign({
     className: classnames__default.default(AvatarGroup_module.AvatarGroup, AvatarGroup_module[size], classNameOverride),
     "aria-label": "Avatar Group"
-  }, restProps), renderAvatars(avatars, maxVisible, size));
+  }, restProps), React__default.default.createElement(AllAvatars, {
+    avatars: avatars,
+    maxVisible: maxVisible,
+    size: size
+  }));
 };
 exports.AvatarGroup = AvatarGroup;

package/dist/cjs/Tag/Tag.cjs

@@ -85,7 +85,7 @@ var Tag = function (props) {
           className: Tag_module.profile
         }, props.avatar && renderAvatar(props.avatar));
       default:
-        return;
+        return null;
     }
   }(), React__default.default.createElement("span", {
     className: classnames__default.default(Tag_module.textContent, isTruncated && Tag_module.truncate),

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

@@ -102,7 +102,7 @@ var GenericTile = function (_a) {
     return informationProp;
   };
   var renderBack = function () {
-    if (!information) return;
+    if (!information) return null;
     var returnButtonLabel = formatMessage({
       id: 'kzGenericTile.infoButtonReturnLabel',
       defaultMessage: 'Hide information:',

package/dist/cjs/TitleBlockZen/TitleBlockZen.cjs

@@ -26,7 +26,7 @@ var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var renderTag = function (surveyStatus) {
   var tagVariant;
   if (tagVariant === 'profile') {
-    return;
+    return null;
   }
   if (surveyStatus.status === 'draft') {
     tagVariant = 'statusDraft';

package/dist/esm/AvatarGroup/AvatarGroup.mjs

@@ -3,8 +3,9 @@ import React from 'react';
 import classnames from 'classnames';
 import { Avatar } from '../Avatar/Avatar.mjs';
 import styles from './AvatarGroup.module.css.mjs';
-var renderCounter = function (remainingAvatars) {
-  if (remainingAvatars <= 0) return;
+var Counter = function (_a) {
+  var remainingAvatars = _a.remainingAvatars;
+  if (remainingAvatars <= 0) return null;
   return /*#__PURE__*/React.createElement("li", {
     "aria-label": "There ".concat(remainingAvatars > 1 ? "are ".concat(remainingAvatars, " other members") : "is ".concat(remainingAvatars, " other member"), " of this group"),
     className: styles.AvatarGroupItem
@@ -13,7 +14,10 @@ var renderCounter = function (remainingAvatars) {
     "aria-hidden": true
   }, "+".concat(remainingAvatars)));
 };
-var renderAvatars = function (avatars, maxVisible, size) {
+var AllAvatars = function (_a) {
+  var avatars = _a.avatars,
+    maxVisible = _a.maxVisible,
+    size = _a.size;
   return /*#__PURE__*/React.createElement(React.Fragment, null, avatars === null || avatars === void 0 ? void 0 : avatars.map(function (avatarProps, index) {
     return index < maxVisible && (/*#__PURE__*/React.createElement("li", {
       key: "avatar-".concat(index),
@@ -21,7 +25,9 @@ var renderAvatars = function (avatars, maxVisible, size) {
     }, /*#__PURE__*/React.createElement(Avatar, __assign({}, avatarProps, {
       size: size
     }))));
-  }), renderCounter((avatars === null || avatars === void 0 ? void 0 : avatars.length) - maxVisible));
+  }), /*#__PURE__*/React.createElement(Counter, {
+    remainingAvatars: (avatars === null || avatars === void 0 ? void 0 : avatars.length) - maxVisible
+  }));
 };
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3065021264/Avatar+Group Guidance} |
@@ -38,6 +44,10 @@ var AvatarGroup = function (_a) {
   return /*#__PURE__*/React.createElement("ul", __assign({
     className: classnames(styles.AvatarGroup, styles[size], classNameOverride),
     "aria-label": "Avatar Group"
-  }, restProps), renderAvatars(avatars, maxVisible, size));
+  }, restProps), /*#__PURE__*/React.createElement(AllAvatars, {
+    avatars: avatars,
+    maxVisible: maxVisible,
+    size: size
+  }));
 };
 export { AvatarGroup };

package/dist/esm/Tag/Tag.mjs

@@ -77,7 +77,7 @@ const Tag = /*#__PURE__*/function () {
             className: styles.profile
           }, props.avatar && renderAvatar(props.avatar));
         default:
-          return;
+          return null;
       }
     }(), /*#__PURE__*/React.createElement("span", {
       className: classnames(styles.textContent, isTruncated && styles.truncate),

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

@@ -94,7 +94,7 @@ const GenericTile = /*#__PURE__*/function () {
       return informationProp;
     };
     var renderBack = function () {
-      if (!information) return;
+      if (!information) return null;
       var returnButtonLabel = formatMessage({
         id: 'kzGenericTile.infoButtonReturnLabel',
         defaultMessage: 'Hide information:',

package/dist/esm/TitleBlockZen/TitleBlockZen.mjs

@@ -17,7 +17,7 @@ import styles from './TitleBlockZen.module.scss.mjs';
 var renderTag = function (surveyStatus) {
   var tagVariant;
   if (tagVariant === 'profile') {
-    return;
+    return null;
   }
   if (surveyStatus.status === 'draft') {
     tagVariant = 'statusDraft';

package/dist/types/SplitButton/subcomponents/BaseButton/BaseButton.d.ts

@@ -5,7 +5,7 @@ type ButtonAttributes = ButtonHTMLAttributes<HTMLButtonElement>;
 type AnchorButtonAttributes = AnchorAttributes & ButtonAttributes;
 export type BaseButtonProps = {
     label: string;
-    icon?: React.SVGAttributes<SVGSymbolElement>;
+    icon?: React.ReactNode;
     isReversed?: boolean;
 } & OverrideClassName<AnchorButtonAttributes>;
 export declare const BaseButton: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.73.8",
+  "version": "1.73.9",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -104,23 +104,23 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
     "@headlessui/react": "<=1.5.0",
-    "@internationalized/date": "^3.6.0",
+    "@internationalized/date": "^3.7.0",
     "@popperjs/core": "^2.11.8",
     "@reach/tabs": "^0.18.0",
-    "@react-aria/button": "^3.11.0",
-    "@react-aria/datepicker": "^3.12.0",
-    "@react-aria/focus": "^3.19.0",
-    "@react-aria/i18n": "^3.12.4",
-    "@react-aria/listbox": "^3.13.6",
-    "@react-aria/menu": "^3.16.0",
-    "@react-aria/overlays": "^3.24.0",
-    "@react-aria/select": "^3.15.0",
-    "@react-aria/utils": "^3.26.0",
-    "@react-stately/collections": "^3.12.0",
-    "@react-stately/datepicker": "^3.11.0",
-    "@react-stately/list": "^3.11.1",
-    "@react-stately/menu": "^3.9.0",
-    "@react-stately/select": "^3.6.9",
+    "@react-aria/button": "^3.12.1",
+    "@react-aria/datepicker": "^3.14.1",
+    "@react-aria/focus": "^3.20.1",
+    "@react-aria/i18n": "^3.12.7",
+    "@react-aria/listbox": "^3.14.2",
+    "@react-aria/menu": "^3.18.1",
+    "@react-aria/overlays": "^3.26.1",
+    "@react-aria/select": "^3.15.3",
+    "@react-aria/utils": "^3.28.1",
+    "@react-stately/collections": "^3.12.2",
+    "@react-stately/datepicker": "^3.13.0",
+    "@react-stately/list": "^3.12.0",
+    "@react-stately/menu": "^3.9.2",
+    "@react-stately/select": "^3.6.11",
     "@react-types/shared": "^3.26.0",
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
@@ -138,8 +138,8 @@
     "prosemirror-utils": "^1.2.2",
     "prosemirror-view": "^1.37.1",
     "react-animate-height": "^3.2.3",
-    "react-aria": "^3.36.0",
-    "react-aria-components": "^1.5.0",
+    "react-aria": "^3.38.1",
+    "react-aria-components": "^1.7.1",
     "react-day-picker": "8.10.1",
     "react-focus-lock": "^2.13.5",
     "react-focus-on": "^3.9.4",
@@ -185,8 +185,8 @@
     "svgo": "^3.3.2",
     "tslib": "^2.8.1",
     "tsx": "^4.19.2",
-    "@kaizen/package-bundler": "2.0.5",
-    "@kaizen/design-tokens": "10.8.8"
+    "@kaizen/design-tokens": "10.8.9",
+    "@kaizen/package-bundler": "2.0.5"
   },
   "devDependenciesComments": {
     "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",

package/src/AvatarGroup/AvatarGroup.tsx

@@ -1,4 +1,4 @@
-import React, { type HTMLAttributes } from 'react'
+import React, { type HTMLAttributes, type ReactNode } from 'react'
 import classnames from 'classnames'
 import { Avatar, type CompanyAvatarProps, type GenericAvatarProps } from '~components/Avatar'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
@@ -29,8 +29,8 @@ export type AvatarGroupProps = {
   avatars: AvatarList
 } & OverrideClassName<HTMLAttributes<HTMLUListElement>>
 
-const renderCounter = (remainingAvatars: number): JSX.Element | void => {
-  if (remainingAvatars <= 0) return
+const Counter = ({ remainingAvatars }: { remainingAvatars: number }): ReactNode => {
+  if (remainingAvatars <= 0) return null
   return (
     <li
       aria-label={`There ${
@@ -47,11 +47,15 @@ const renderCounter = (remainingAvatars: number): JSX.Element | void => {
   )
 }
 
-const renderAvatars = (
-  avatars: AvatarList,
-  maxVisible: number,
-  size: AvatarGroupSize,
-): JSX.Element => (
+const AllAvatars = ({
+  avatars,
+  maxVisible,
+  size,
+}: {
+  avatars: AvatarList
+  maxVisible: number
+  size: AvatarGroupSize
+}): ReactNode => (
   <>
     {avatars?.map(
       (avatarProps, index) =>
@@ -61,7 +65,7 @@ const renderAvatars = (
           </li>
         ),
     )}
-    {renderCounter(avatars?.length - maxVisible)}
+    <Counter remainingAvatars={avatars?.length - maxVisible} />
   </>
 )
 
@@ -81,6 +85,6 @@ export const AvatarGroup = ({
     aria-label="Avatar Group"
     {...restProps}
   >
-    {renderAvatars(avatars, maxVisible, size)}
+    <AllAvatars avatars={avatars} maxVisible={maxVisible} size={size} />
   </ul>
 )

package/src/SplitButton/subcomponents/BaseButton/BaseButton.tsx

@@ -12,7 +12,7 @@ const isAnchor = (attributes: AnchorButtonAttributes): boolean =>
 
 export type BaseButtonProps = {
   label: string
-  icon?: React.SVGAttributes<SVGSymbolElement>
+  icon?: React.ReactNode
   isReversed?: boolean
 } & OverrideClassName<AnchorButtonAttributes>
 

package/src/Tag/Tag.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type ReactNode } from 'react'
 import classnames from 'classnames'
 import { Avatar, type AvatarProps } from '~components/Avatar'
 import { Icon } from '~components/__next__/Icon'
@@ -71,7 +71,7 @@ export const Tag = (props: TagProps): JSX.Element => {
       <div className={styles.layoutContainer}>
         <>
           {canShowIcon &&
-            ((): JSX.Element | void => {
+            ((): ReactNode => {
               switch (props.variant) {
                 case 'validationPositive':
                   return (
@@ -104,7 +104,7 @@ export const Tag = (props: TagProps): JSX.Element => {
                     </span>
                   )
                 default:
-                  return
+                  return null
               }
             })()}
           <span

package/src/Tile/subcomponents/GenericTile/GenericTile.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState, type HTMLAttributes } from 'react'
+import React, { useEffect, useRef, useState, type HTMLAttributes, type ReactNode } from 'react'
 import { useIntl } from '@cultureamp/i18n-react-intl'
 import classnames from 'classnames'
 import { Button, IconButton } from '~components/Button'
@@ -130,8 +130,8 @@ export const GenericTile = ({
     return informationProp
   }
 
-  const renderBack = (): JSX.Element | void => {
-    if (!information) return
+  const renderBack = (): ReactNode => {
+    if (!information) return null
 
     const returnButtonLabel = formatMessage({
       id: 'kzGenericTile.infoButtonReturnLabel',

package/src/TitleBlockZen/TitleBlockZen.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type ReactNode } from 'react'
 import classnames from 'classnames'
 import { Avatar } from '~components/Avatar'
 import { IconButton } from '~components/Button'
@@ -21,11 +21,11 @@ import {
 import { createTabletOverflowMenuItems, isReversed } from './utils'
 import styles from './TitleBlockZen.module.scss'
 
-const renderTag = (surveyStatus: SurveyStatus): JSX.Element | void => {
+const renderTag = (surveyStatus: SurveyStatus): ReactNode => {
   let tagVariant: React.ComponentPropsWithoutRef<typeof Tag>['variant']
 
   if (tagVariant === 'profile') {
-    return
+    return null
   }
 
   if (surveyStatus.status === 'draft') {