@kaizen/components 0.0.0-canary-kz-components-css-layer-pre-release-20250527021003 → 0.0.0-canary-fix-fms-popover-20250603003244

package/dist/types/Calendar/CalendarRange/CalendarRange.d.ts

@@ -1,11 +1,11 @@
-import { type PropsBase, type PropsRange } from 'react-day-picker';
+import { type DayPickerRangeProps } from 'react-day-picker';
 import { type OverrideClassName } from "../../types/OverrideClassName";
 export type CalendarRangeElement = HTMLDivElement;
 export type CalendarRangeProps = {
     id?: string;
     onMount?: (calendarElement: CalendarRangeElement) => void;
     hasDivider?: boolean;
-} & OverrideClassName<Omit<PropsRange & Omit<PropsBase, 'mode'>, 'mode'>>;
+} & OverrideClassName<Omit<DayPickerRangeProps, 'mode'>>;
 export declare const CalendarRange: {
     ({ id, onMount, hasDivider, classNameOverride, selected, defaultMonth, numberOfMonths, locale, ...restProps }: CalendarRangeProps): JSX.Element;
     displayName: string;

package/dist/types/Calendar/CalendarSingle/CalendarSingle.d.ts

@@ -1,10 +1,10 @@
-import { type PropsBase, type PropsSingle } from 'react-day-picker';
+import { type DayPickerSingleProps } from 'react-day-picker';
 import { type OverrideClassName } from "../../types/OverrideClassName";
 export type CalendarSingleElement = HTMLDivElement;
 export type CalendarSingleProps = {
     id?: string;
     onMount?: (calendarElement: CalendarSingleElement) => void;
-} & OverrideClassName<Omit<PropsSingle & Omit<PropsBase, 'mode'>, 'mode'>>;
+} & OverrideClassName<Omit<DayPickerSingleProps, 'mode'>>;
 export declare const CalendarSingle: {
     ({ id, onMount, classNameOverride, selected, defaultMonth, weekStartsOn, locale, ...restProps }: CalendarSingleProps): JSX.Element;
     displayName: string;

package/dist/types/Calendar/LegacyCalendarRange/LegacyCalendarRange.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 import type { Locale } from 'date-fns';
-import { type DateRange, type DayEventHandler, type Matcher } from 'react-day-picker';
+import { type DateRange, type DayClickEventHandler, type Matcher } from 'react-day-picker';
 import { DayOfWeek } from '../enums';
 export type LegacyCalendarRangeElement = HTMLDivElement;
 export type LegacyCalendarRangeProps = {
@@ -10,7 +9,7 @@ export type LegacyCalendarRangeProps = {
     disabledDays?: Matcher[];
     selectedRange?: DateRange;
     locale: Locale;
-    onDayChange: DayEventHandler<React.MouseEvent>;
+    onDayChange: DayClickEventHandler;
 };
 export declare const LegacyCalendarRange: {
     ({ classNameOverride, defaultMonth, weekStartsOn, disabledDays, selectedRange, locale, onDayChange, }: LegacyCalendarRangeProps): JSX.Element;

package/dist/types/Calendar/baseCalendarClassNames.d.ts

@@ -1,2 +1,2 @@
-import { type PropsBase } from 'react-day-picker';
-export declare const baseCalendarClassNames: PropsBase['classNames'];
+import { type ClassNames } from 'react-day-picker';
+export declare const baseCalendarClassNames: ClassNames;

package/dist/types/Filter/FilterMultiSelect/FilterMultiSelect.d.ts

@@ -19,7 +19,7 @@ export type FilterMultiSelectProps = {
     className?: string;
 } & Omit<MenuPopupProps, 'children'> & Omit<MenuTriggerProviderProps, 'children'> & SelectionProps;
 export declare const FilterMultiSelect: {
-    ({ trigger, children, isOpen, defaultOpen, onOpenChange, isLoading, loadingSkeleton, label, items, selectedKeys, defaultSelectedKeys, onSelectionChange, selectionMode, onSearchInputChange, triggerRef, className, }: FilterMultiSelectProps): JSX.Element;
+    ({ trigger, children, isOpen, defaultOpen, onOpenChange, isLoading, loadingSkeleton, label, items, selectedKeys, defaultSelectedKeys, onSelectionChange, selectionMode, onSearchInputChange, triggerRef, className, floatingOptions, }: FilterMultiSelectProps): JSX.Element;
     displayName: string;
     TriggerButton: {
         ({ selectedOptionLabels, label, classNameOverride, labelCharacterLimitBeforeTruncate, }: import("./subcomponents/Trigger").FilterTriggerButtonProps): JSX.Element;

package/dist/types/Filter/FilterMultiSelect/subcomponents/MenuPopup/MenuPopup.d.ts

@@ -1,10 +1,13 @@
-import React from 'react';
+import React, { type HTMLAttributes } from 'react';
+import { type UseFloatingOptions } from '@floating-ui/react-dom';
+import { type OverrideClassName } from "../../../../types/OverrideClassName";
 export type MenuPopupProps = {
+    children: React.ReactNode;
+    floatingOptions?: Partial<UseFloatingOptions>;
     isLoading?: boolean;
     loadingSkeleton?: React.ReactNode;
-    children: React.ReactNode;
-};
+} & OverrideClassName<HTMLAttributes<HTMLDivElement>>;
 export declare const MenuPopup: {
-    ({ isLoading, loadingSkeleton, children, }: MenuPopupProps): JSX.Element;
+    ({ children, floatingOptions, classNameOverride, isLoading, loadingSkeleton, ...restProps }: MenuPopupProps): JSX.Element;
     displayName: string;
 };

package/dist/types/RichTextEditor/utils/schema/marks.d.ts

@@ -1,2 +1,2 @@
 import type { MarkSpec } from 'prosemirror-model';
-export declare const getMarks: () => Record<string, MarkSpec>;
+export declare const getMarks: () => MarkSpec;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "0.0.0-canary-kz-components-css-layer-pre-release-20250527021003",
+  "version": "0.0.0-canary-fix-fms-popover-20250603003244",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -103,44 +103,44 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@headlessui/react": "^2.2.4",
-    "@internationalized/date": "^3.8.1",
+    "@headlessui/react": "^2.2.0",
+    "@internationalized/date": "^3.7.0",
     "@popperjs/core": "^2.11.8",
     "@reach/tabs": "^0.18.0",
-    "@react-aria/button": "^3.13.1",
-    "@react-aria/datepicker": "^3.14.3",
-    "@react-aria/focus": "^3.20.3",
-    "@react-aria/i18n": "^3.12.9",
-    "@react-aria/listbox": "^3.14.4",
-    "@react-aria/menu": "^3.18.3",
-    "@react-aria/overlays": "^3.27.1",
-    "@react-aria/select": "^3.15.5",
-    "@react-aria/utils": "^3.29.0",
-    "@react-stately/collections": "^3.12.4",
-    "@react-stately/datepicker": "^3.14.1",
-    "@react-stately/list": "^3.12.2",
-    "@react-stately/menu": "^3.9.4",
-    "@react-stately/select": "^3.6.13",
-    "@react-types/shared": "^3.29.1",
+    "@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.28.0",
     "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
     "lodash.debounce": "^4.0.8",
     "nanobus": "^4.5.0",
-    "prosemirror-commands": "^1.7.1",
+    "prosemirror-commands": "^1.6.2",
     "prosemirror-history": "^1.4.1",
-    "prosemirror-inputrules": "^1.5.0",
-    "prosemirror-keymap": "^1.2.3",
-    "prosemirror-model": "^1.25.1",
-    "prosemirror-schema-basic": "^1.2.4",
-    "prosemirror-schema-list": "^1.5.1",
+    "prosemirror-inputrules": "^1.4.0",
+    "prosemirror-keymap": "^1.2.2",
+    "prosemirror-model": "^1.24.1",
+    "prosemirror-schema-basic": "^1.2.3",
+    "prosemirror-schema-list": "^1.5.0",
     "prosemirror-state": "^1.4.3",
-    "prosemirror-transform": "^1.10.4",
+    "prosemirror-transform": "^1.10.2",
     "prosemirror-utils": "^1.2.2",
-    "prosemirror-view": "^1.39.3",
+    "prosemirror-view": "^1.37.1",
     "react-animate-height": "^3.2.3",
-    "react-aria": "^3.40.0",
-    "react-aria-components": "^1.9.0",
-    "react-day-picker": "9.6.7",
+    "react-aria": "^3.38.1",
+    "react-aria-components": "^1.7.1",
+    "react-day-picker": "8.10.1",
     "react-focus-lock": "^2.13.6",
     "react-focus-on": "^3.9.4",
     "react-popper": "^2.3.0",
@@ -154,9 +154,9 @@
     "react-day-picker": "Version locked until a11y gets fixed (https://github.com/gpbl/react-day-picker/pull/1708)"
   },
   "devDependencies": {
-    "@cultureamp/frontend-apis": "13.3.0",
-    "@cultureamp/i18n-react-intl": "^2.9.1",
-    "@cultureamp/package-bundler": "^2.3.2",
+    "@cultureamp/frontend-apis": "^13.2.5",
+    "@cultureamp/i18n-react-intl": "^2.7.3",
+    "@cultureamp/package-bundler": "^2.3.0",
     "@testing-library/dom": "^10.4.0",
     "@types/jest-axe": "^3.5.9",
     "@types/lodash.debounce": "^4.0.9",
@@ -172,31 +172,30 @@
     "postcss": "^8.5.3",
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.0",
-    "postcss-preset-env": "^10.1.6",
+    "postcss-preset-env": "^10.1.5",
     "postcss-scss": "^4.0.9",
-    "query-string": "^9.2.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "query-string": "^9.1.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-highlight": "^0.15.0",
-    "react-intl": "^7.1.11",
-    "rollup": "^4.40.2",
+    "react-intl": "^7.1.10",
+    "rollup": "^4.39.0",
     "sass": "1.79.6",
     "serialize-query-params": "^2.0.2",
     "svgo": "^3.3.2",
     "tslib": "^2.8.1",
     "ts-patch": "^3.3.0",
-    "tsx": "^4.19.4",
-    "@kaizen/design-tokens": "10.10.0"
+    "tsx": "^4.19.3",
+    "@kaizen/design-tokens": "10.9.1"
   },
   "devDependenciesComments": {
     "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",
-    "typescript": "Installed in root",
-    "frontend-apis": "There's an unresolved dep with 13.4.0 and onwards with node/msw, so we are locking to 13.3.0 for this update."
+    "typescript": "Installed in root"
   },
   "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/Avatar/Avatar.module.css

@@ -1,140 +1,138 @@
-@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,
+.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: rgba(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);
 }

package/src/AvatarGroup/AvatarGroup.module.css

@@ -1,59 +1,57 @@
-@layer kz-components {
-  .AvatarGroup {
-    display: inline-flex;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  .AvatarCounter {
-    direction: ltr;
-    align-items: center;
-    background: var(--color-gray-300);
-    border: 3px solid var(--color-white);
-    border-radius: 100%;
-    box-sizing: border-box;
-    box-shadow: var(--shadow-small-box-shadow);
-    display: flex;
-    justify-content: center;
-    overflow: hidden;
-    width: var(--avatar-x-y, 1.25rem);
-    height: var(--avatar-x-y, 1.25rem);
-    font-family: var(--typography-heading-5-font-family);
-    font-weight: var(--typography-heading-5-font-weight);
-    letter-spacing: var(--typography-heading-5-letter-spacing);
-  }
-
-  .AvatarGroupItem + .AvatarGroupItem {
-    margin-inline-start: calc((var(--avatar-x-y)) / -2);
-  }
-
-  .small {
-    --avatar-x-y: 1.25rem;
-  }
-
-  .small .AvatarCounter {
-    box-shadow: none;
-    border: none;
-    font-size: 0.5rem;
-  }
-
-  .medium {
-    --avatar-x-y: 3rem;
-  }
-
-  .medium .AvatarCounter {
-    font-size: var(--typography-heading-5-font-size);
-  }
-
-  .large {
-    --avatar-x-y: 4.5rem;
-  }
-
-  .large .AvatarCounter {
-    font-family: var(--typography-heading-3-font-family);
-    font-size: var(--typography-heading-3-font-size);
-    font-weight: var(--typography-heading-3-font-weight);
-    letter-spacing: var(--typography-heading-3-letter-spacing);
-  }
+.AvatarGroup {
+  display: inline-flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.AvatarCounter {
+  direction: ltr;
+  align-items: center;
+  background: var(--color-gray-300);
+  border: 3px solid var(--color-white);
+  border-radius: 100%;
+  box-sizing: border-box;
+  box-shadow: var(--shadow-small-box-shadow);
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+  width: var(--avatar-x-y, 1.25rem);
+  height: var(--avatar-x-y, 1.25rem);
+  font-family: var(--typography-heading-5-font-family);
+  font-weight: var(--typography-heading-5-font-weight);
+  letter-spacing: var(--typography-heading-5-letter-spacing);
+}
+
+.AvatarGroupItem + .AvatarGroupItem {
+  margin-inline-start: calc((var(--avatar-x-y)) / -2);
+}
+
+.small {
+  --avatar-x-y: 1.25rem;
+}
+
+.small .AvatarCounter {
+  box-shadow: none;
+  border: none;
+  font-size: 0.5rem;
+}
+
+.medium {
+  --avatar-x-y: 3rem;
+}
+
+.medium .AvatarCounter {
+  font-size: var(--typography-heading-5-font-size);
+}
+
+.large {
+  --avatar-x-y: 4.5rem;
+}
+
+.large .AvatarCounter {
+  font-family: var(--typography-heading-3-font-family);
+  font-size: var(--typography-heading-3-font-size);
+  font-weight: var(--typography-heading-3-font-weight);
+  letter-spacing: var(--typography-heading-3-letter-spacing);
 }