@kaizen/components 1.79.8 → 1.79.10

package/dist/cjs/src/Avatar/Avatar.cjs

@@ -109,9 +109,9 @@ var Avatar = function (_a) {
   var isOtherUser = isNoneOrError && !isCurrentUser;
   return React__default.default.createElement("span", tslib.__assign({
     className: classnames__default.default(Avatar_module.wrapper, Avatar_module[size], classNameOverride, isCompany && Avatar_module.company, isPersonal && Avatar_module.personal, isOtherUser && Avatar_module.otherUser)
-  }, restProps), avatarState !== 'none' && React__default.default.createElement("img", {
+  }, restProps), avatarState !== 'none' && avatarState !== 'error' && React__default.default.createElement("img", {
     ref: image,
-    className: classnames__default.default(Avatar_module.avatarImage, isCompany && Avatar_module.companyAvatarImage, (avatarState === 'loading' || avatarState === 'error') && Avatar_module.loading),
+    className: classnames__default.default(Avatar_module.avatarImage, isCompany && Avatar_module.companyAvatarImage, avatarState === 'loading' && Avatar_module.loading),
     src: avatarSrc,
     onError: onImageFailure,
     onLoad: onImageSuccess,

package/dist/cjs/src/Modal/GenericModal/GenericModal.cjs

@@ -99,21 +99,19 @@ var GenericModal = function (_a) {
       document.addEventListener('keyup', escapeKeyHandler);
     }
   };
-  var cleanUpAfterClose = function () {
+  var cleanUpAfterClose = React.useCallback(function () {
     if (!isClientReady) return;
     document.documentElement.classList.remove(GenericModal_module.unscrollable, GenericModal_module.pseudoScrollbar);
     if (onEscapeKeyup) {
       document.removeEventListener('keyup', escapeKeyHandler);
     }
-  };
+  }, [escapeKeyHandler, onEscapeKeyup, isClientReady]);
   /* Ensure sure add-on styles (e.g. unscrollable) and key event is cleaned up when the modal is unmounted*/
-  // @todo: Fix if possible - avoiding breaking in eslint upgrade
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   React.useEffect(function () {
     return function () {
       return cleanUpAfterClose();
     };
-  }, []);
+  }, [cleanUpAfterClose]);
   var onAfterLeaveHandler = function () {
     cleanUpAfterClose();
     propsOnAfterLeave === null || propsOnAfterLeave === void 0 ? void 0 : propsOnAfterLeave();

package/dist/esm/src/Avatar/Avatar.mjs

@@ -101,9 +101,9 @@ var Avatar = function (_a) {
   var isOtherUser = isNoneOrError && !isCurrentUser;
   return /*#__PURE__*/React.createElement("span", __assign({
     className: classnames(styles.wrapper, styles[size], classNameOverride, isCompany && styles.company, isPersonal && styles.personal, isOtherUser && styles.otherUser)
-  }, restProps), avatarState !== 'none' && (/*#__PURE__*/React.createElement("img", {
+  }, restProps), avatarState !== 'none' && avatarState !== 'error' && (/*#__PURE__*/React.createElement("img", {
     ref: image,
-    className: classnames(styles.avatarImage, isCompany && styles.companyAvatarImage, (avatarState === 'loading' || avatarState === 'error') && styles.loading),
+    className: classnames(styles.avatarImage, isCompany && styles.companyAvatarImage, avatarState === 'loading' && styles.loading),
     src: avatarSrc,
     onError: onImageFailure,
     onLoad: onImageSuccess,

package/dist/esm/src/Modal/GenericModal/GenericModal.mjs

@@ -90,21 +90,19 @@ const GenericModal = /*#__PURE__*/function () {
         document.addEventListener('keyup', escapeKeyHandler);
       }
     };
-    var cleanUpAfterClose = function () {
+    var cleanUpAfterClose = useCallback(function () {
       if (!isClientReady) return;
       document.documentElement.classList.remove(styles.unscrollable, styles.pseudoScrollbar);
       if (onEscapeKeyup) {
         document.removeEventListener('keyup', escapeKeyHandler);
       }
-    };
+    }, [escapeKeyHandler, onEscapeKeyup, isClientReady]);
     /* Ensure sure add-on styles (e.g. unscrollable) and key event is cleaned up when the modal is unmounted*/
-    // @todo: Fix if possible - avoiding breaking in eslint upgrade
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     useEffect(function () {
       return function () {
         return cleanUpAfterClose();
       };
-    }, []);
+    }, [cleanUpAfterClose]);
     var onAfterLeaveHandler = function () {
       cleanUpAfterClose();
       propsOnAfterLeave === null || propsOnAfterLeave === void 0 ? void 0 : propsOnAfterLeave();

package/dist/styles.css

@@ -9,6 +9,16 @@
   }
 }
 
+@layer kz-components {
+  .ListItem-module_listItem__xGr6A {
+    font-family: var(--typography-paragraph-body-font-family);
+    font-weight: var(--typography-paragraph-body-font-weight);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+  }
+}
+
 @layer kz-components {
   .ListSection-module_listSectionHeader__bptHg {
     font-family: var(--typography-heading-5-font-family);
@@ -20,12 +30,10 @@
 }
 
 @layer kz-components {
-  .ListItem-module_listItem__xGr6A {
-    font-family: var(--typography-paragraph-body-font-family);
-    font-weight: var(--typography-paragraph-body-font-weight);
-    font-size: var(--typography-paragraph-body-font-size);
-    line-height: var(--typography-paragraph-body-line-height);
-    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+  .List-module_list__bbFPn {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-16);
   }
 }
 
@@ -48,14 +56,6 @@
   }
 }
 
-@layer kz-components {
-  .List-module_list__bbFPn {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-16);
-  }
-}
-
 @layer kz-components {
   /*
  * This is taken from the Material Symbols CDN

package/locales/de.json

@@ -23,7 +23,7 @@
   },
   "date.validation.unavailableDate" : {
     "description" : "Error message when the user tries to select a date that is unavailable",
-    "message" : "{inputValue} ist nicht verfügbar. Versuchen Sie es mit einem anderen Datum."
+    "message" : "{inputValue} ist nicht verfügbar. Versuche es mit einem anderen Datum."
   },
   "dateInputDescription.inputFormat" : {
     "description" : "Label for the 'Input format' field",
@@ -31,7 +31,7 @@
   },
   "datePicker.calendarLabelDescription" : {
     "description" : "Label for the search input",
-    "message" : "Wählen Sie im Kalender ein Datum für:"
+    "message" : "Wähle im Kalender ein Datum für:"
   },
   "filterBar.addFiltersMenu.buttonLabel" : {
     "description" : "Menu button label to show additional available filter options",
@@ -87,7 +87,7 @@
   },
   "kzErrorPage" : {
     "description" : "Label for contact button",
-    "message" : "kontaktieren Sie den Support,"
+    "message" : "Support kontaktieren"
   },
   "kzErrorPage.400.message" : {
     "description" : "Call to action instructions for the user",
@@ -99,23 +99,23 @@
   },
   "kzErrorPage.401.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Leider können wir nicht überprüfen, ob Sie diese Seite anzeigen können. Gehen Sie zurück und versuchen Sie es erneut oder gehen Sie zur Startseite"
+    "message" : "Leider können wir nicht überprüfen, ob du diese Seite anzeigen kannst. Gehe zurück und versuche es erneut oder gehe zur Startseite."
   },
   "kzErrorPage.401.title" : {
     "description" : "Main title for page",
-    "message" : "Sie können diese Seite nicht anzeigen"
+    "message" : "Du kannst diese Seite nicht anzeigen"
   },
   "kzErrorPage.403.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Offenbar fehlt Ihnen leider die Berechtigung zum Anzeigen dieser Seite. Gehen Sie zurück und versuchen Sie es erneut oder gehen Sie zur Startseite"
+    "message" : "Offenbar fehlt dir leider die Berechtigung zum Anzeigen dieser Seite. Gehe zurück und versuche es erneut oder gehe zur Startseite."
   },
   "kzErrorPage.403.title" : {
     "description" : "Main title for page",
-    "message" : "Sie können diese Seite nicht anzeigen"
+    "message" : "Du kannst diese Seite nicht anzeigen"
   },
   "kzErrorPage.404.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Leider können wir die von Ihnen gesuchte Seite nicht finden. Gehen Sie zurück und versuchen Sie es erneut oder gehen Sie zur Startseite"
+    "message" : "Leider können wir die von dir gesuchte Seite nicht finden. Gehe zurück und versuche es erneut oder gehe zur Startseite"
   },
   "kzErrorPage.404.title" : {
     "description" : "Main title of page",
@@ -123,7 +123,7 @@
   },
   "kzErrorPage.413" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Leider liegt ein Problem mit unserem System vor und diese Seite kann nicht angezeigt werden. Gehen Sie zurück und versuchen Sie es erneut oder gehen Sie zur Startseite"
+    "message" : "Leider liegt ein Problem mit unserem System vor und diese Seite kann nicht angezeigt werden. Gehe zurück und versuche es erneut oder gehe zur Startseite"
   },
   "kzErrorPage.413.title" : {
     "description" : "Main title of page",
@@ -131,7 +131,7 @@
   },
   "kzErrorPage.422.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Tut mir leid, aber Ihre Änderung konnte nicht vorgenommen werden. Gehen Sie zurück und versuchen Sie es erneut oder gehen Sie zur Startseite"
+    "message" : "Deine Änderung konnte leider nicht vorgenommen werden. Gehe zurück und versuche es erneut oder gehe zur Startseite."
   },
   "kzErrorPage.422.title" : {
     "description" : "Main title of page",
@@ -139,7 +139,7 @@
   },
   "kzErrorPage.500" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Leider liegt ein Problem mit unserem System vor und diese Seite kann nicht angezeigt werden. Gehen Sie zurück und versuchen Sie es erneut oder gehen Sie zur Startseite"
+    "message" : "Leider liegt ein Problem mit unserem System vor und diese Seite kann nicht angezeigt werden. Gehe zurück und versuche es erneut oder gehe zur Startseite."
   },
   "kzErrorPage.500.title" : {
     "description" : "Main title of page",
@@ -147,27 +147,27 @@
   },
   "kzErrorPage.502.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Das tut uns leid. Das Beste, was Sie tun können, ist, zurückzugehen und es erneut zu versuchen."
+    "message" : "Das tut uns leid. Das Beste, was du tun kannst, ist, zurückzugehen und es erneut zu versuchen."
   },
   "kzErrorPage.502.title" : {
     "description" : "Main title of page",
-    "message" : "Sie können diese Seite nicht anzeigen"
+    "message" : "Du kannst diese Seite nicht anzeigen"
   },
   "kzErrorPage.503.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Das tut uns leid. Das Beste, was Sie tun können, ist, zurückzugehen und es erneut zu versuchen."
+    "message" : "Das tut uns leid. Das Beste, was du tun kannst, ist, zurückzugehen und es erneut zu versuchen."
   },
   "kzErrorPage.503.title" : {
     "description" : "Main title of page",
-    "message" : "Sie können diese Seite nicht anzeigen"
+    "message" : "Du kannst diese Seite nicht anzeigen"
   },
   "kzErrorPage.504.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Das tut uns leid. Das Beste, was Sie tun können, ist, zurückzugehen und es erneut zu versuchen."
+    "message" : "Das tut uns leid. Das Beste, was du tun kannst, ist, zurückzugehen und es erneut zu versuchen."
   },
   "kzErrorPage.504.title" : {
     "description" : "Main title of page",
-    "message" : "Sie können diese Seite nicht anzeigen"
+    "message" : "Du kannst diese Seite nicht anzeigen"
   },
   "kzErrorPage.errorCode" : {
     "message" : "Fehlercode {code}"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.79.8",
+  "version": "1.79.10",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/Avatar/Avatar.spec.tsx

@@ -14,6 +14,7 @@ describe('<Avatar />', () => {
     fireEvent.error(screen.getByRole('img'))
 
     expect(screen.getByText('JD')).toBeInTheDocument()
+    expect(screen.queryByRole('img')).not.toBeInTheDocument()
   })
 
   describe('full name provided contains more than two names', () => {

package/src/Avatar/Avatar.tsx

@@ -156,13 +156,13 @@ export const Avatar = ({
       )}
       {...restProps}
     >
-      {avatarState !== 'none' && (
+      {avatarState !== 'none' && avatarState !== 'error' && (
         <img
           ref={image}
           className={classnames(
             styles.avatarImage,
             isCompany && styles.companyAvatarImage,
-            (avatarState === 'loading' || avatarState === 'error') && styles.loading,
+            avatarState === 'loading' && styles.loading,
           )}
           src={avatarSrc}
           onError={onImageFailure}

package/src/Modal/GenericModal/GenericModal.tsx

@@ -125,7 +125,7 @@ export const GenericModal = ({
     }
   }
 
-  const cleanUpAfterClose = (): void => {
+  const cleanUpAfterClose = useCallback(() => {
     if (!isClientReady) return
 
     document.documentElement.classList.remove(styles.unscrollable, styles.pseudoScrollbar)
@@ -133,12 +133,10 @@ export const GenericModal = ({
     if (onEscapeKeyup) {
       document.removeEventListener('keyup', escapeKeyHandler)
     }
-  }
+  }, [escapeKeyHandler, onEscapeKeyup, isClientReady])
 
   /* Ensure sure add-on styles (e.g. unscrollable) and key event is cleaned up when the modal is unmounted*/
-  // @todo: Fix if possible - avoiding breaking in eslint upgrade
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => () => cleanUpAfterClose(), [])
+  useEffect(() => () => cleanUpAfterClose(), [cleanUpAfterClose])
 
   const onAfterLeaveHandler = (): void => {
     cleanUpAfterClose()

package/src/__next__/Button/_docs/Button--api-specification.mdx

@@ -156,6 +156,12 @@ If a button is statically the full width of a container you can use the `isFullW
 
 For resizing on smaller screens, consider using the `className` prop to leverage CSS media or container queries, ie: `<Button className="w-full md:w-[initial]">Label</Button>`.
 
+## Use a menu to show additional actions
+
+Instead of a split button (now a [deprecated component](https://cultureamp.atlassian.net/wiki/spaces/DES/pages/4286611457/Deprecating+Split+Buttons+-+Design+Request+for+Comment+RFC)), use a Button with text followed by a Menu to show any additional actions related to the most critical action.
+
+<Canvas className="mb-24" of={exampleStories.ButtonMenuPattern} />
+
 ## Additional API options
 
 The following table is a collection of additional React Aria and native HTML props that are exposed from the React Aria API. These are not required for the implementation of `Button` but can be used to extend its functionality. Refer back to the [overview section](#overview) for the core props that enable most use cases.

package/src/__next__/Button/_docs/Button.docs.stories.tsx

@@ -391,3 +391,32 @@ export const DontExampleTertiaryButtonWithIcons: Story = {
     variant: 'tertiary',
   },
 }
+
+export const ButtonMenuPattern: Story = {
+  name: 'Button + Menu Pattern',
+  render: () => (
+    <div className="flex gap-4">
+      <Button size="large" variant="secondary">
+        Edit Survey
+      </Button>
+      <MenuTrigger>
+        <Button
+          size="large"
+          icon={<Icon name="more_horiz" isPresentational />}
+          variant="secondary"
+          hasHiddenLabel
+        >
+          More surveys
+        </Button>
+        <MenuPopover>
+          <Menu>
+            <MenuItem>Survey 1</MenuItem>
+            <MenuItem>Survey 2</MenuItem>
+            <MenuItem>Survey 3</MenuItem>
+            <MenuItem>Survey 4</MenuItem>
+          </Menu>
+        </MenuPopover>
+      </MenuTrigger>
+    </div>
+  ),
+}

package/src/__next__/Menu/_docs/Menu--api-specification.mdx

@@ -83,3 +83,9 @@ Menu items can be disabled with the `isDisabled` prop.
 By default, the open/closed state of the menu is handled under the hood. In cases where you need control over the open state, use the `isOpen` and `onOpenChange` props on the `MenuTrigger` component (both props must be used for this to work).
 
 <Canvas className="mb-24" of={exampleStories.Controlled} />
+
+## Use a menu to show additional actions
+
+Instead of a split button (now a [deprecated component](https://cultureamp.atlassian.net/wiki/spaces/DES/pages/4286611457/Deprecating+Split+Buttons+-+Design+Request+for+Comment+RFC)), use a Button with text followed by a Menu to show any additional actions related to the most critical action.
+
+<Canvas className="mb-24" of={exampleStories.ButtonMenuPattern} />

package/src/__next__/Menu/_docs/Menu.stories.tsx

@@ -128,3 +128,32 @@ export const Sections: Story = {
     </MenuTrigger>
   ),
 }
+
+export const ButtonMenuPattern: Story = {
+  name: 'Button + Menu Pattern',
+  render: ({ defaultOpen: _, ...args }) => (
+    <div className="flex gap-4">
+      <Button size="large" variant="secondary">
+        Edit Survey
+      </Button>
+      <MenuTrigger {...args}>
+        <Button
+          size="large"
+          icon={<Icon name="more_horiz" isPresentational />}
+          variant="secondary"
+          hasHiddenLabel
+        >
+          More surveys
+        </Button>
+        <MenuPopover>
+          <Menu>
+            <MenuItem>Survey 1</MenuItem>
+            <MenuItem>Survey 2</MenuItem>
+            <MenuItem>Survey 3</MenuItem>
+            <MenuItem>Survey 4</MenuItem>
+          </Menu>
+        </MenuPopover>
+      </MenuTrigger>
+    </div>
+  ),
+}