@kaizen/components 0.0.0-canary-react-19-peer-20250303031741 → 0.0.0-canary-add-length-check-for-tabs-20250313022700

package/dist/types/Modal/ConfirmationModal/ConfirmationModal.d.ts

@@ -53,7 +53,7 @@ export type ConfirmationModalProps = BaseConfirmationModalProps & (ConfirmationM
  * {@link https://cultureamp.design/?path=/docs/components-modals-confirmationmodal--docs Storybook}
  */
 export declare const ConfirmationModal: {
-    ({ isOpen, isProminent, unpadded, mood, variant, title, onConfirm, onAfterLeave, onAfterEnter, confirmLabel, dismissLabel, confirmWorking, onDismiss: propsOnDismiss, children, ...props }: ConfirmationModalProps): JSX.Element;
+    ({ isOpen, isProminent, unpadded, mood, variant, title, onConfirm, onAfterLeave, onAfterEnter, confirmLabel, dismissLabel, confirmWorking, onDismiss: propsOnDismiss, children, className, ...props }: ConfirmationModalProps): JSX.Element;
     displayName: string;
 };
 export {};

package/dist/types/Modal/ContextModal/ContextModal.d.ts

@@ -39,6 +39,6 @@ export type ContextModalProps = Readonly<{
  * {@link https://cultureamp.design/?path=/docs/components-modals--contextmodal--docs Storybook}
  */
 export declare const ContextModal: {
-    ({ isOpen, unpadded, layout, title, onConfirm, onDismiss: propsOnDismiss, onAfterLeave, onAfterEnter, confirmLabel, confirmWorking, renderBackground, children, contentHeader, image, secondaryLabel, onSecondaryAction, ...props }: ContextModalProps): JSX.Element;
+    ({ isOpen, unpadded, layout, title, onConfirm, onDismiss: propsOnDismiss, onAfterLeave, onAfterEnter, confirmLabel, confirmWorking, renderBackground, children, contentHeader, image, secondaryLabel, onSecondaryAction, className, ...props }: ContextModalProps): JSX.Element;
     displayName: string;
 };

package/dist/types/Modal/GenericModal/GenericModal.d.ts

@@ -10,8 +10,9 @@ export type GenericModalProps = {
     onAfterEnter?: () => void;
     /** A callback that is triggered after the modal is closed. */
     onAfterLeave?: () => void;
+    className?: string;
 };
 export declare const GenericModal: {
-    ({ id: propsId, children, isOpen, focusLockDisabled, onEscapeKeyup, onOutsideModalClick, onAfterEnter, onAfterLeave: propsOnAfterLeave, }: GenericModalProps): JSX.Element;
+    ({ id: propsId, children, isOpen, focusLockDisabled, onEscapeKeyup, onOutsideModalClick, onAfterEnter, onAfterLeave: propsOnAfterLeave, className, }: GenericModalProps): JSX.Element;
     displayName: string;
 };

package/dist/types/Modal/InputEditModal/InputEditModal.d.ts

@@ -14,7 +14,6 @@ export type InputEditModalProps = {
     onAfterEnter?: () => void;
     /** A callback that is triggered after the modal is closed. */
     onAfterLeave?: () => void;
-    localeDirection?: 'rtl' | 'ltr';
     submitLabel?: string;
     dismissLabel?: string;
     secondaryLabel?: string;
@@ -33,6 +32,6 @@ export type InputEditModalProps = {
  * {@link https://cultureamp.design/?path=/docs/components-modals-inputeditmodal--docs Storybook}
  */
 export declare const InputEditModal: {
-    ({ isOpen, mood, title, onSubmit, onSecondaryAction, onAfterLeave, localeDirection, submitLabel, dismissLabel, secondaryLabel, submitWorking, children, unpadded, onDismiss: propsOnDismiss, onAfterEnter, ...props }: InputEditModalProps): JSX.Element;
+    ({ isOpen, mood, title, onSubmit, onSecondaryAction, onAfterLeave, submitLabel, dismissLabel, secondaryLabel, submitWorking, children, unpadded, onDismiss: propsOnDismiss, onAfterEnter, className, ...props }: InputEditModalProps): JSX.Element;
     displayName: string;
 };

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.ReactNode;
+    icon?: React.SVGAttributes<SVGSymbolElement>;
     isReversed?: boolean;
 } & OverrideClassName<AnchorButtonAttributes>;
 export declare const BaseButton: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-react-19-peer-20250303031741",
+  "version": "0.0.0-canary-add-length-check-for-tabs-20250313022700",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -175,8 +175,8 @@
     "postcss-preset-env": "^10.1.3",
     "postcss-scss": "^4.0.9",
     "query-string": "^9.1.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-highlight": "^0.15.0",
     "react-intl": "^7.1.0",
     "rollup": "^4.30.1",
@@ -185,7 +185,7 @@
     "svgo": "^3.3.2",
     "tslib": "^2.8.1",
     "tsx": "^4.19.2",
-    "@kaizen/design-tokens": "0.0.0-canary-react-19-peer-20250303031741",
+    "@kaizen/design-tokens": "10.8.7",
     "@kaizen/package-bundler": "2.0.4"
   },
   "devDependenciesComments": {
@@ -194,8 +194,8 @@
   },
   "peerDependencies": {
     "@cultureamp/i18n-react-intl": "^2.5.9",
-    "react": "^18.3.1 || ^19.0.0",
-    "react-dom": "^18.3.1 || ^19.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-intl": "^6.6.8 || ^7.0.0",
     "typescript": "5.x"
   },

package/src/AvatarGroup/AvatarGroup.tsx

@@ -29,7 +29,7 @@ export type AvatarGroupProps = {
   avatars: AvatarList
 } & OverrideClassName<HTMLAttributes<HTMLUListElement>>
 
-const renderCounter = (remainingAvatars: number): JSX.Element | undefined => {
+const renderCounter = (remainingAvatars: number): JSX.Element | void => {
   if (remainingAvatars <= 0) return
   return (
     <li

package/src/Content/Content.module.scss

@@ -6,8 +6,10 @@
   margin: 0 $layout-content-side-margin;
   width: 100%;
 
+  // Setting a min-width: 0 will maintain the gutter margins when the inner contents has something wider than the page (e.g. scrollable table)
+  min-width: 0;
+
   @media (max-width: calc(#{$layout-breakpoints-large} - 1px)) {
     margin: 0 $content-margin-width-on-medium-and-small;
-    width: calc(100% - 2 * #{$content-margin-width-on-medium-and-small});
   }
 }

package/src/Modal/ConfirmationModal/ConfirmationModal.module.scss

@@ -21,7 +21,7 @@
   grid-template-columns: 0.2fr 2fr;
   align-items: center;
   color: $color-white;
-  text-align: left;
+  text-align: start;
   border-radius: $border-solid-border-radius $border-solid-border-radius 0 0;
 
   &.padded {
@@ -53,9 +53,9 @@
     height: 30px;
 
     @media (max-width: $layout-breakpoints-medium) {
-      margin-right: 0.9375rem;
+      margin-inline-end: 0.9375rem;
       position: relative;
-      top: 0.125rem;
+      inset-block-start: 0.125rem;
     }
   }
 }
@@ -75,12 +75,12 @@
 
   .iconContainer {
     position: absolute;
-    top: 8%;
+    inset-block-start: 8%;
 
     @media (max-width: $layout-breakpoints-medium) {
       position: relative;
-      top: 0;
-      margin-bottom: $spacing-sm;
+      inset-block-start: 0;
+      margin-block-end: $spacing-sm;
     }
   }
 

package/src/Modal/ConfirmationModal/ConfirmationModal.tsx

@@ -124,6 +124,7 @@ export const ConfirmationModal = ({
   confirmWorking,
   onDismiss: propsOnDismiss,
   children,
+  className,
   ...props
 }: ConfirmationModalProps): JSX.Element => {
   const variantName = variant ?? mood
@@ -158,6 +159,7 @@ export const ConfirmationModal = ({
       onOutsideModalClick={onDismiss}
       onAfterLeave={onAfterLeave}
       onAfterEnter={onAfterEnter}
+      className={className}
     >
       <div className={styles.modal} data-modal {...props}>
         <ModalHeader onDismiss={onDismiss}>

package/src/Modal/ContextModal/ContextModal.module.scss

@@ -58,7 +58,7 @@
 .footerWithSecondaryAction {
   @extend %footer;
 
-  margin-left: calc(-1 * #{$spacing-sm});
+  margin-inline-start: calc(-1 * #{$spacing-sm});
 }
 
 .emptyFooter {
@@ -97,7 +97,7 @@
   }
 
   .content {
-    padding-left: 0;
+    padding-inline-start: 0;
 
     @media (min-width: $layout-breakpoints-medium) {
       max-width: 100%;

package/src/Modal/ContextModal/ContextModal.tsx

@@ -71,6 +71,7 @@ export const ContextModal = ({
   image,
   secondaryLabel,
   onSecondaryAction,
+  className,
   ...props
 }: ContextModalProps): JSX.Element => {
   const onDismiss = confirmWorking ? undefined : propsOnDismiss
@@ -105,6 +106,7 @@ export const ContextModal = ({
       onOutsideModalClick={onDismiss}
       onAfterLeave={onAfterLeave}
       onAfterEnter={onAfterEnter}
+      className={className}
     >
       <div className={styles.modal} data-modal {...props}>
         {renderBackground?.()}

package/src/Modal/GenericModal/GenericModal.module.scss

@@ -115,7 +115,7 @@
 
 .pseudoScrollbar {
   /* Tech debt - this !important existed before Stylelint rules */
-  padding-right: 15px !important; /* stylelint-disable-line declaration-no-important */
+  padding-inline-end: 15px !important; /* stylelint-disable-line declaration-no-important */
 }
 
 .hide {

package/src/Modal/GenericModal/GenericModal.tsx

@@ -17,6 +17,7 @@ export type GenericModalProps = {
   onAfterEnter?: () => void
   /** A callback that is triggered after the modal is closed. */
   onAfterLeave?: () => void
+  className?: string
 }
 
 export const GenericModal = ({
@@ -28,6 +29,7 @@ export const GenericModal = ({
   onOutsideModalClick,
   onAfterEnter,
   onAfterLeave: propsOnAfterLeave,
+  className,
 }: GenericModalProps): JSX.Element => {
   const reactId = useId()
   const id = propsId ?? reactId
@@ -137,6 +139,7 @@ export const GenericModal = ({
       afterLeave={onAfterLeaveHandler}
       data-generic-modal-transition-wrapper
       onClick={(e: React.MouseEvent): void => e.stopPropagation()}
+      className={className}
     >
       <FocusLock
         disabled={focusLockDisabled}

package/src/Modal/GenericModal/subcomponents/ModalAccessibleLabel/ModalAccessibleLabel.module.scss

@@ -27,7 +27,7 @@ $ca-breakpoint-small-mobile: 375px;
 
   &.prominent {
     grid-column-start: 2;
-    text-align: left;
+    text-align: start;
   }
 
   &:focus {

package/src/Modal/GenericModal/subcomponents/ModalFooter/ModalFooter.module.scss

@@ -32,10 +32,10 @@
 }
 
 .actionButton + .actionButton {
-  margin-right: $spacing-sm;
+  margin-inline-end: $spacing-sm;
 
   @media (max-width: (calc(#{$layout-breakpoints-medium} - 1px))) {
-    margin-top: $spacing-sm;
+    margin-block-start: $spacing-sm;
   }
 }
 
@@ -51,7 +51,7 @@
 }
 
 .border {
-  border-top: 1px solid $border-solid-border-color;
+  border-block-start: 1px solid $border-solid-border-color;
 }
 
 .start {
@@ -66,8 +66,8 @@
 
 .fixed {
   position: absolute;
-  bottom: 0;
-  left: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
 }
 
 .filler {

package/src/Modal/GenericModal/subcomponents/ModalHeader/ModalHeader.module.scss

@@ -15,8 +15,8 @@
 
 .fixed {
   position: absolute;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
 }
 
 .filler {

package/src/Modal/InputEditModal/InputEditModal.module.scss

@@ -28,11 +28,7 @@
 
 .header {
   color: $color-purple-800;
-  text-align: left;
-
-  &.textAlignRTL {
-    text-align: right;
-  }
+  text-align: start;
 
   &.padded {
     padding: $spacing-md $spacing-lg;

package/src/Modal/InputEditModal/InputEditModal.tsx

@@ -26,7 +26,6 @@ export type InputEditModalProps = {
   onAfterEnter?: () => void
   /** A callback that is triggered after the modal is closed. */
   onAfterLeave?: () => void
-  localeDirection?: 'rtl' | 'ltr'
   submitLabel?: string
   dismissLabel?: string
   secondaryLabel?: string
@@ -49,7 +48,6 @@ export const InputEditModal = ({
   onSubmit,
   onSecondaryAction,
   onAfterLeave,
-  localeDirection = 'ltr',
   submitLabel = 'Submit',
   dismissLabel = 'Cancel',
   secondaryLabel,
@@ -58,6 +56,7 @@ export const InputEditModal = ({
   unpadded = false,
   onDismiss: propsOnDismiss,
   onAfterEnter,
+  className,
   ...props
 }: InputEditModalProps): JSX.Element => {
   const onDismiss = submitWorking ? undefined : propsOnDismiss
@@ -87,16 +86,11 @@ export const InputEditModal = ({
       onEscapeKeyup={onDismiss}
       onAfterLeave={onAfterLeave}
       onAfterEnter={onAfterEnter}
+      className={className}
     >
-      <div className={styles.modal} dir={localeDirection} data-modal {...props}>
+      <div className={styles.modal} data-modal {...props}>
         <ModalHeader onDismiss={onDismiss}>
-          <div
-            className={classnames(
-              styles.header,
-              localeDirection === 'rtl' && styles.textAlignRTL,
-              !unpadded && styles.padded,
-            )}
-          >
+          <div className={classnames(styles.header, !unpadded && styles.padded)}>
             <ModalAccessibleLabel>
               <Heading tag="h2" variant="heading-2">
                 {title}
@@ -105,12 +99,7 @@ export const InputEditModal = ({
           </div>
         </ModalHeader>
         <ModalBody>
-          <div
-            className={classnames(styles.body, !unpadded && styles.padded)}
-            dir={localeDirection}
-          >
-            {children}
-          </div>
+          <div className={classnames(styles.body, !unpadded && styles.padded)}>{children}</div>
         </ModalBody>
         <ModalFooter
           actions={footerActions}

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

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

package/src/Tag/Tag.tsx

@@ -71,7 +71,7 @@ export const Tag = (props: TagProps): JSX.Element => {
       <div className={styles.layoutContainer}>
         <>
           {canShowIcon &&
-            ((): JSX.Element | undefined => {
+            ((): JSX.Element | void => {
               switch (props.variant) {
                 case 'validationPositive':
                   return (

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

@@ -130,7 +130,7 @@ export const GenericTile = ({
     return informationProp
   }
 
-  const renderBack = (): JSX.Element | undefined => {
+  const renderBack = (): JSX.Element | void => {
     if (!information) return
 
     const returnButtonLabel = formatMessage({

package/src/TitleBlockZen/TitleBlockZen.tsx

@@ -21,7 +21,7 @@ import {
 import { createTabletOverflowMenuItems, isReversed } from './utils'
 import styles from './TitleBlockZen.module.scss'
 
-const renderTag = (surveyStatus: SurveyStatus): JSX.Element | undefined => {
+const renderTag = (surveyStatus: SurveyStatus): JSX.Element | void => {
   let tagVariant: React.ComponentPropsWithoutRef<typeof Tag>['variant']
 
   if (tagVariant === 'profile') {

package/src/__next__/Tabs/subcomponents/TabList/TabList.tsx

@@ -62,7 +62,7 @@ export const TabList = (props: TabListProps): JSX.Element => {
     }
 
     const tabs = containerElement?.querySelectorAll('[data-kz-tab]')
-    if (!tabs) {
+    if (!tabs || tabs.length === 0) {
       return
     }