@kaizen/components 0.0.0-canary-test-cherry-picked-updates-20250702235156 → 0.0.0-canary-ssr-generic-modal-2-20250709041326

package/dist/types/Button/Button/Button.d.ts

@@ -2,6 +2,11 @@ import React from 'react';
 import { type ButtonRef, type GenericButtonProps } from '../GenericButton';
 export type ButtonProps = GenericButtonProps;
 /**
+ * @deprecated This component will be replaced by the next Button component in v2.
+ * Use `@kaizen/components/next` Button instead.
+ * Migration guide: {@link https://cultureamp.design/?path=/docs/components-button-migration-guide--docs}
+ * Codemod available: `upgradeV1Buttons`
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3062890984/Button Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-buttons-button--docs Storybook}
  */

package/dist/types/Button/IconButton/IconButton.d.ts

@@ -2,6 +2,11 @@ import React from 'react';
 import { type BaseButtonProps, type ButtonRef, type WorkingButtonProps } from '../GenericButton';
 export type IconButtonProps = Omit<BaseButtonProps, 'iconPosition'> & WorkingButtonProps;
 /**
+ * @deprecated This component will be replaced by the next Button component in v2.
+ * Use `@kaizen/components/next` Button instead.
+ * Migration guide: {@link https://cultureamp.design/?path=/docs/components-button-migration-guide--docs}
+ * Codemod available: `upgradeV1Buttons`
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3062890984/Button Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-iconbutton--docs Storybook}
  */

package/dist/types/LikertScaleLegacy/LikertScaleLegacy.d.ts

@@ -19,6 +19,9 @@ export type LikertScaleProps = {
     'onSelect': (value: ScaleItem | null) => void;
 };
 /**
+ * @deprecated This component will be renamed to LikertScale in v2.
+ * Start importing as LikertScale instead.
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082060201/Likert+Scale Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-likertscalelegacy--docs Storybook}
  */

package/dist/types/Skirt/Skirt.d.ts

@@ -6,6 +6,9 @@ export type SkirtProps = {
     variant?: Variant;
     titleBlockHasNavigation?: boolean;
 } & ContentProps;
+/**
+ * @deprecated This component will be removed in v2. Please remove any usages.
+ */
 export declare const Skirt: {
     ({ children, variant, titleBlockHasNavigation, classNameOverride, ...restProps }: SkirtProps): JSX.Element;
     displayName: string;

package/dist/types/Skirt/subcomponents/SkirtCard/SkirtCard.d.ts

@@ -1,5 +1,8 @@
 import { type CardProps } from "../../../Card";
 export type SkirtCardProps = CardProps;
+/**
+ * @deprecated This component will be removed in v2. Use a regular Card component instead.
+ */
 export declare const SkirtCard: {
     (props: SkirtCardProps): JSX.Element;
     displayName: string;

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

@@ -36,6 +36,8 @@ export type SplitButtonProps = {
     dir?: 'ltr' | 'rtl';
 } & OverrideClassName<HTMLAttributes<HTMLDivElement>>;
 /**
+ * @deprecated This component will be removed in v2. Use a Button and Menu component instead.
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896196/Split+Button Guidance} |
  * {@link https://cultureamp.design/storybook/?path=/docs/components-splitbutton--docs Storybook}
  */

package/dist/types/TitleBlockZen/TitleBlockZen.d.ts

@@ -1,5 +1,8 @@
 import { type TitleBlockProps } from './types';
 /**
+ * @deprecated This component will be renamed to TitleBlock in v2.
+ * Start importing as TitleBlock instead.
+ *
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3075605782/Title+Block Guidance} |
  * {@link https://cultureamp.design/?path=/story/components-titleblock--docs Storybook}
  */

package/dist/types/__alpha__/SingleSelect/SingleSelect.d.ts

@@ -0,0 +1,23 @@
+import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
+import { type OverrideClassName } from "../../types/OverrideClassName";
+export type SingleSelectProps = {
+    children?: React.ReactNode;
+} & OverrideClassName<HTMLAttributes<Element>>;
+export declare const SingleSelect: {
+    ({ classNameOverride, children, ...restProps }: PropsWithChildren<SingleSelectProps>): JSX.Element;
+    displayName: string;
+    List: {
+        ({ children, className, ...props }: import("react-aria-components").ListBoxProps<object> & PropsWithChildren): React.ReactElement;
+        displayName: string;
+    };
+    ListItem: {
+        ({ children, className, ...props }: import("react-aria-components").ListBoxItemProps<object> & PropsWithChildren): React.ReactElement;
+        displayName: string;
+    };
+    ListSection: {
+        ({ name, className, children, ...props }: import("react-aria-components").ListBoxSectionProps<object> & PropsWithChildren & {
+            name: string;
+        }): React.ReactElement;
+        displayName: string;
+    };
+};

package/dist/types/__alpha__/SingleSelect/_docs/mockData.d.ts

@@ -0,0 +1,59 @@
+export declare const singleMockItems: {
+    label: string;
+    value: string;
+}[];
+export declare const groupedMockItems: {
+    label: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+}[];
+export declare const mixedMockItemsDisabled: ({
+    label: string;
+    value: string;
+    disabled: boolean;
+    options?: undefined;
+} | {
+    label: string;
+    value: string;
+    disabled?: undefined;
+    options?: undefined;
+} | {
+    label: string;
+    options: ({
+        label: string;
+        value: string;
+        disabled?: undefined;
+    } | {
+        label: string;
+        value: string;
+        disabled: boolean;
+    })[];
+    value?: undefined;
+    disabled?: undefined;
+})[];
+export declare const mixedMockItemsUngroupedFirst: ({
+    label: string;
+    value: string;
+    options?: undefined;
+} | {
+    label: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    value?: undefined;
+})[];
+export declare const mixedMockItemsUnordered: ({
+    label: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    value?: undefined;
+} | {
+    label: string;
+    value: string;
+    options?: undefined;
+})[];

package/dist/types/__alpha__/SingleSelect/index.d.ts

@@ -0,0 +1 @@
+export * from './SingleSelect';

package/dist/types/__alpha__/SingleSelect/subcomponents/List/List.d.ts

@@ -0,0 +1,6 @@
+import React, { type PropsWithChildren } from 'react';
+import { type ListBoxProps } from 'react-aria-components';
+export declare const List: {
+    ({ children, className, ...props }: ListBoxProps<object> & PropsWithChildren): React.ReactElement;
+    displayName: string;
+};

package/dist/types/__alpha__/SingleSelect/subcomponents/List/index.d.ts

@@ -0,0 +1 @@
+export * from './List';

package/dist/types/__alpha__/SingleSelect/subcomponents/ListItem/ListItem.d.ts

@@ -0,0 +1,6 @@
+import React, { type PropsWithChildren } from 'react';
+import { type ListBoxItemProps } from 'react-aria-components';
+export declare const ListItem: {
+    ({ children, className, ...props }: ListBoxItemProps<object> & PropsWithChildren): React.ReactElement;
+    displayName: string;
+};

package/dist/types/__alpha__/SingleSelect/subcomponents/ListItem/index.d.ts

@@ -0,0 +1 @@
+export * from './ListItem';

package/dist/types/__alpha__/SingleSelect/subcomponents/ListSection/ListSection.d.ts

@@ -0,0 +1,8 @@
+import React, { type PropsWithChildren } from 'react';
+import { type ListBoxSectionProps } from 'react-aria-components';
+export declare const ListSection: {
+    ({ name, className, children, ...props }: ListBoxSectionProps<object> & PropsWithChildren & {
+        name: string;
+    }): React.ReactElement;
+    displayName: string;
+};

package/dist/types/__alpha__/SingleSelect/subcomponents/ListSection/index.d.ts

@@ -0,0 +1 @@
+export * from './ListSection';

package/dist/types/__alpha__/SingleSelect/subcomponents/Trigger/Trigger.d.ts

@@ -0,0 +1 @@
+export declare const Trigger: () => JSX.Element;

package/dist/types/__alpha__/SingleSelect/subcomponents/Trigger/index.d.ts

@@ -0,0 +1 @@
+export * from './Trigger';

package/dist/types/__alpha__/SingleSelect/subcomponents/index.d.ts

@@ -0,0 +1,4 @@
+export * from './List';
+export * from './ListSection';
+export * from './ListItem';
+export * from './Trigger';

package/dist/types/__alpha__/index.d.ts

@@ -0,0 +1 @@
+export * from './SingleSelect';

package/dist/types/__next__/Select/Select.d.ts

@@ -5,7 +5,7 @@ import { type Key } from '@react-types/shared';
 import { type OverrideClassName } from "../../types/OverrideClassName";
 import { type SelectPopoverContentsProps, type SelectToggleProps } from './subcomponents';
 import { type SelectItem, type SelectOption } from './types';
-type OmittedAriaSelectProps = 'children' | 'items';
+type OmittedAriaSelectProps = 'children' | 'items' | 'onSelectionChange';
 export type SelectProps<Option extends SelectOption = SelectOption> = {
     /**
      * Item objects in the collection.
@@ -45,13 +45,17 @@ export type SelectProps<Option extends SelectOption = SelectOption> = {
      * Use the `labelText` prop to provide a concise name, and the `description` prop for any help text.
      */
     placeholder?: string;
+    /**
+     * Handler that is called when the selection changes.
+     */
+    onSelectionChange?: (key: Key) => void;
 } & OverrideClassName<Omit<AriaSelectProps<Option>, OmittedAriaSelectProps>>;
 /**
  * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3081896474/Select Guidance} |
  * {@link https://cultureamp.design/?path=/docs/components-select--docs Storybook}
  */
 export declare const Select: {
-    <Option extends SelectOption = SelectOption>({ label, items, id: propsId, trigger, children, status, validationMessage, isReversed, isRequired, isFullWidth, disabledValues, classNameOverride, selectedKey, description, placeholder, isDisabled, portalContainerId, onSelectionChange, ...restProps }: SelectProps<Option>): JSX.Element;
+    <Option extends SelectOption = SelectOption>({ label, items, id: propsId, trigger, children, status, validationMessage, isReversed, isRequired, isFullWidth, disabledValues, classNameOverride, selectedKey, description, placeholder, isDisabled, onSelectionChange, portalContainerId, ...restProps }: SelectProps<Option>): JSX.Element;
     displayName: string;
     Section: {
         <Option extends SelectOption = SelectOption>({ section, }: import("./subcomponents").ListBoxSectionProps<Option>): JSX.Element;

package/dist/types/__next__/Select/subcomponents/Overlay/Overlay.d.ts

@@ -3,8 +3,9 @@ import { type OverrideClassName } from "../../../../types/OverrideClassName";
 import { type SelectOption } from '../../types';
 export type OverlayProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
     children: React.ReactNode;
+    popoverRef?: React.RefObject<Element | null>;
 };
 export declare const Overlay: {
-    <Option extends SelectOption>({ children, classNameOverride, ...restProps }: OverlayProps): JSX.Element;
+    <Option extends SelectOption>({ children, classNameOverride, popoverRef, ...restProps }: OverlayProps): JSX.Element;
     displayName: string;
 };

package/dist/types/__next__/Select/subcomponents/SelectPopoverContents/SelectPopoverContents.d.ts

@@ -6,8 +6,9 @@ export type SelectPopoverContentsProps<Option extends SelectOption> = {
         items: SelectItemNode<Option>[];
     }) => React.ReactNode;
     menuProps: AriaListBoxOptions<SelectItem<Option>>;
+    popoverRef?: React.RefObject<Element | null>;
 };
 export declare const SelectPopoverContents: {
-    <Option extends SelectOption>({ children, menuProps, }: SelectPopoverContentsProps<Option>): JSX.Element;
+    <Option extends SelectOption>({ children, menuProps, popoverRef, }: SelectPopoverContentsProps<Option>): JSX.Element;
     displayName: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-test-cherry-picked-updates-20250702235156",
+  "version": "0.0.0-canary-ssr-generic-modal-2-20250709041326",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/Avatar/Avatar.module.css

@@ -1,138 +1,140 @@
-.wrapper {
-  --avatar-x-y: 1.5rem;
-
-  background: var(--color-gray-300);
-  border-radius: 100%;
-  box-sizing: border-box;
-  overflow: hidden;
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  width: var(--avatar-x-y);
-  height: var(--avatar-x-y);
-  box-shadow: var(--shadow-small-box-shadow);
-  border: 3px solid var(--color-white);
-}
-
-.small {
-  box-shadow: none;
-  border: none;
-
-  --avatar-x-y: 1.25rem;
-}
-
-.medium {
-  --avatar-x-y: 3rem;
-}
-
-.large {
-  --avatar-x-y: 4.5rem;
-}
-
-.xlarge {
-  --avatar-x-y: 6rem;
-}
-
-.xxlarge {
-  --avatar-x-y: 7.75rem;
-}
-
-/* Themes */
-.personal {
-  background: var(--color-orange-100);
-}
-
-.otherUser {
-  background: var(--color-gray-300);
-}
-
-.company {
-  border: 0;
-  background: var(--color-white);
-  padding: var(--spacing-6);
-  border-radius: var(--border-solid-border-radius);
-}
-
-.small.company {
-  padding: 0;
-}
-
-.avatarImage {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.avatarImage.loading {
-  display: none;
-}
-
-.companyAvatarImage {
-  object-fit: contain;
-  box-sizing: border-box;
-  border-radius: var(--spacing-4);
-}
-
-.fallbackIcon {
-  color: rgb(var(--color-purple-800-rgb), 0.7);
-  font-size: calc(var(--avatar-x-y) * 0.7);
-}
-
-.xlarge .fallbackIcon,
-.xxlarge .fallbackIcon {
-  font-size: calc(var(--avatar-x-y) * 0.8);
-}
-
-.initials {
-  box-sizing: border-box;
-  color: var(--color-purple-800);
-  padding-left: 5px;
-  padding-right: 5px;
-  text-align: center;
-  width: 100%;
-  font-size: var(--typography-heading-3-font-size);
-  font-family: var(--typography-heading-1-font-family);
-  font-weight: var(--typography-heading-1-font-weight);
-  letter-spacing: var(--typography-heading-3-letter-spacing);
-}
-
-.initials.longName::before {
-  content: none;
-}
-
-.initials::before {
-  content: '';
-  display: block;
-  margin-top: -0.001em;
-}
-
-.wrapper .initials {
-  text-decoration: none;
-  speak-as: spell-out;
-
-  /* to override materialize.css global styling in performance-ui,
+@layer kz-components {
+  .wrapper {
+    --avatar-x-y: 1.5rem;
+
+    background: var(--color-gray-300);
+    border-radius: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    width: var(--avatar-x-y);
+    height: var(--avatar-x-y);
+    box-shadow: var(--shadow-small-box-shadow);
+    border: 3px solid var(--color-white);
+  }
+
+  .small {
+    box-shadow: none;
+    border: none;
+
+    --avatar-x-y: 1.25rem;
+  }
+
+  .medium {
+    --avatar-x-y: 3rem;
+  }
+
+  .large {
+    --avatar-x-y: 4.5rem;
+  }
+
+  .xlarge {
+    --avatar-x-y: 6rem;
+  }
+
+  .xxlarge {
+    --avatar-x-y: 7.75rem;
+  }
+
+  /* Themes */
+  .personal {
+    background: var(--color-orange-100);
+  }
+
+  .otherUser {
+    background: var(--color-gray-300);
+  }
+
+  .company {
+    border: 0;
+    background: var(--color-white);
+    padding: var(--spacing-6);
+    border-radius: var(--border-solid-border-radius);
+  }
+
+  .small.company {
+    padding: 0;
+  }
+
+  .avatarImage {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .avatarImage.loading {
+    display: none;
+  }
+
+  .companyAvatarImage {
+    object-fit: contain;
+    box-sizing: border-box;
+    border-radius: var(--spacing-4);
+  }
+
+  .fallbackIcon {
+    color: rgb(var(--color-purple-800-rgb), 0.7);
+    font-size: calc(var(--avatar-x-y) * 0.7);
+  }
+
+  .xlarge .fallbackIcon,
+  .xxlarge .fallbackIcon {
+    font-size: calc(var(--avatar-x-y) * 0.8);
+  }
+
+  .initials {
+    box-sizing: border-box;
+    color: var(--color-purple-800);
+    padding-left: 5px;
+    padding-right: 5px;
+    text-align: center;
+    width: 100%;
+    font-size: var(--typography-heading-3-font-size);
+    font-family: var(--typography-heading-1-font-family);
+    font-weight: var(--typography-heading-1-font-weight);
+    letter-spacing: var(--typography-heading-3-letter-spacing);
+  }
+
+  .initials.longName::before {
+    content: none;
+  }
+
+  .initials::before {
+    content: '';
+    display: block;
+    margin-top: -0.001em;
+  }
+
+  .wrapper .initials {
+    text-decoration: none;
+    speak-as: spell-out;
+
+    /* to override materialize.css global styling in performance-ui,
   * which sets a border-bottom on abbr tags
   */
-  border-bottom: none;
-}
-
-.xlarge .initials,
-.xxlarge .initials {
-  font-size: var(--typography-heading-1-font-size);
-  letter-spacing: var(--typography-heading-1-letter-spacing);
-}
-
-.medium .initials {
-  font-size: var(--typography-heading-5-font-size);
-}
-
-.small .initials {
-  font-size: 0.5rem;
-}
-
-.small .initials,
-.medium .initials {
-  margin-bottom: -1px;
-  font-weight: var(--typography-heading-5-font-weight);
-  letter-spacing: var(--typography-heading-5-letter-spacing);
+    border-bottom: none;
+  }
+
+  .xlarge .initials,
+  .xxlarge .initials {
+    font-size: var(--typography-heading-1-font-size);
+    letter-spacing: var(--typography-heading-1-letter-spacing);
+  }
+
+  .medium .initials {
+    font-size: var(--typography-heading-5-font-size);
+  }
+
+  .small .initials {
+    font-size: 0.5rem;
+  }
+
+  .small .initials,
+  .medium .initials {
+    margin-bottom: -1px;
+    font-weight: var(--typography-heading-5-font-weight);
+    letter-spacing: var(--typography-heading-5-letter-spacing);
+  }
 }