@kaizen/components 1.39.0 → 1.39.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.39.0",
+  "version": "1.39.1",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -42,7 +42,7 @@
     "update-icons": "./src/Icon/bin/update-icons.sh"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "^2.0.4",
+    "@floating-ui/react-dom": "^2.0.5",
     "@headlessui/react": "<=1.5.0",
     "@internationalized/date": "^3.5.1",
     "@kaizen/hosted-assets": "^2.0.3",
@@ -71,13 +71,13 @@
     "prosemirror-history": "^1.3.2",
     "prosemirror-inputrules": "^1.3.0",
     "prosemirror-keymap": "^1.2.2",
-    "prosemirror-model": "^1.19.3",
+    "prosemirror-model": "^1.19.4",
     "prosemirror-schema-basic": "^1.2.2",
     "prosemirror-schema-list": "^1.3.0",
     "prosemirror-state": "^1.4.3",
     "prosemirror-transform": "^1.8.0",
     "prosemirror-utils": "^1.2.1-0",
-    "prosemirror-view": "^1.32.4",
+    "prosemirror-view": "^1.32.7",
     "react-animate-height": "^3.2.3",
     "react-day-picker": "8.4.1",
     "react-focus-lock": "^2.9.6",
@@ -96,17 +96,17 @@
   },
   "devDependencies": {
     "@babel/plugin-transform-react-pure-annotations": "^7.23.3",
-    "@cultureamp/frontend-apis": "^9.1.3",
-    "@cultureamp/i18n-react-intl": "^2.1.8",
+    "@cultureamp/frontend-apis": "^9.2.0",
+    "@cultureamp/i18n-react-intl": "^2.1.10",
     "@kaizen/design-tokens": "^10.3.17",
-    "@kaizen/tailwind": "^1.2.2",
+    "@kaizen/tailwind": "^1.2.3",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.5",
+    "@rollup/plugin-typescript": "^11.1.6",
     "@types/lodash.debounce": "^4.0.9",
     "@types/react-dom": "^18.2.18",
     "@types/react-textfit": "^1.1.4",
@@ -116,22 +116,22 @@
     "babel-plugin-pure-static-props": "^0.2.0",
     "concat-cli": "^4.0.0",
     "query-string": "^8.1.0",
-    "react-intl": "^6.5.5",
-    "rollup": "^4.9.2",
+    "react-intl": "^6.6.0",
+    "rollup": "^4.9.5",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-ignore": "^1.0.10",
     "rollup-plugin-node-externals": "^6.1.2",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.69.6",
+    "sass": "^1.69.7",
     "serialize-query-params": "^2.0.2",
-    "svgo": "^3.1.0",
+    "svgo": "^3.2.0",
     "ts-jest": "^29.1.1",
-    "ts-patch": "^3.1.1",
+    "ts-patch": "^3.1.2",
     "typescript-transform-paths": "^3.4.6"
   },
   "peerDependencies": {
-    "@cultureamp/i18n-react-intl": "^2.1.8",
+    "@cultureamp/i18n-react-intl": "^2.1.10",
     "react": "^18.2.0",
-    "react-intl": "^6.5.5"
+    "react-intl": "^6.6.0"
   }
 }

package/src/Filter/FilterMultiSelect/_docs/FilterMultiSelect.stories.tsx

@@ -12,11 +12,7 @@ import isChromatic from "chromatic"
 import { InlineNotification } from "~components/Notification"
 import { Text } from "~components/Text"
 import { TextField } from "~components/TextField"
-import {
-  FilterMultiSelect,
-  getSelectedOptionLabels,
-  FilterMultiSelectProps,
-} from ".."
+import { FilterMultiSelect, getSelectedOptionLabels } from ".."
 import { mockItems } from "./MockData"
 import styles from "./FilterMultiSelect.stories.scss"
 
@@ -24,7 +20,7 @@ const IS_CHROMATIC = isChromatic()
 
 const client = new QueryClient()
 
-const withQueryProvider: Decorator<FilterMultiSelectProps> = Story => (
+const withQueryProvider: Decorator = Story => (
   <QueryClientProvider client={client}>
     <Story />
   </QueryClientProvider>

package/src/Modal/ConfirmationModal/_docs/ConfirmationModal.stories.tsx

@@ -1,38 +1,12 @@
 import React, { useState } from "react"
-import { Decorator, Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react"
 import isChromatic from "chromatic"
 import { Text } from "~components/Text"
-import { ConfirmationModal, ConfirmationModalProps } from "../index"
+import { chromaticModalSettings } from "../../_docs/controls"
+import { ConfirmationModal } from "../index"
 
 const IS_CHROMATIC = isChromatic()
 
-// Add additional height to the stories when running in Chromatic only.
-// Modals have fixed position and would be cropped from snapshot tests.
-// Setting height to 100vh ensures we capture as much content of the
-// modal, as it's height responds to the content within it.
-const HeightDecorator: Decorator<ConfirmationModalProps> = Story => {
-  if (IS_CHROMATIC) {
-    return (
-      <div style={{ minHeight: "100vh" }}>
-        <Story />
-      </div>
-    )
-  }
-
-  return <Story />
-}
-
-const chromaticModalSettings = {
-  parameters: {
-    chromatic: {
-      disable: false,
-      delay: 400, // match MODAL_TRANSITION_TIMEOUT in modals + 50ms
-      pauseAnimationAtEnd: true,
-    },
-  },
-  decorators: [HeightDecorator],
-}
-
 const ConfirmationModalTemplate: Story = {
   render: args => {
     const [isOpen, setIsOpen] = useState(IS_CHROMATIC)

package/src/Modal/ContextModal/_docs/ContextModal.stories.tsx

@@ -1,40 +1,14 @@
 import React, { useState } from "react"
-import { Decorator, Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react"
 import isChromatic from "chromatic"
 import { AddImage } from "~components/Illustration"
 import { ModalAccessibleDescription } from "~components/Modal/GenericModal/subcomponents/ModalAccessibleDescription"
 import { Text } from "~components/Text"
-import { ContextModal, ContextModalProps } from "../index"
+import { chromaticModalSettings } from "../../_docs/controls"
+import { ContextModal } from "../index"
 
 const IS_CHROMATIC = isChromatic()
 
-// Add additional height to the stories when running in Chromatic only.
-// Modals have fixed position and would be cropped from snapshot tests.
-// Setting height to 100vh ensures we capture as much content of the
-// modal, as it's height responds to the content within it.
-const HeightDecorator: Decorator<ContextModalProps> = Story => {
-  if (IS_CHROMATIC) {
-    return (
-      <div style={{ minHeight: "100vh" }}>
-        <Story />
-      </div>
-    )
-  }
-
-  return <Story />
-}
-
-const chromaticModalSettings = {
-  parameters: {
-    chromatic: {
-      disable: false,
-      delay: 400, // match MODAL_TRANSITION_TIMEOUT in modals + 50ms
-      pauseAnimationAtEnd: true,
-    },
-  },
-  decorators: [HeightDecorator],
-}
-
 const ContextModalTemplate: Story = {
   render: args => {
     const [isOpen, setIsOpen] = useState(IS_CHROMATIC)

package/src/Modal/InputEditModal/_docs/InputEditModal.stories.tsx

@@ -1,40 +1,14 @@
 import React, { useState } from "react"
-import { Decorator, Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react"
 import isChromatic from "chromatic"
 import { ModalAccessibleDescription } from "~components/Modal"
 import { Text } from "~components/Text"
 import { TextField } from "~components/TextField"
-import { InputEditModal, InputEditModalProps } from "../index"
+import { chromaticModalSettings } from "../../_docs/controls"
+import { InputEditModal } from "../index"
 
 const IS_CHROMATIC = isChromatic()
 
-// Add additional height to the stories when running in Chromatic only.
-// Modals have fixed position and would be cropped from snapshot tests.
-// Setting height to 100vh ensures we capture as much content of the
-// modal, as it's height responds to the content within it.
-const HeightDecorator: Decorator<InputEditModalProps> = Story => {
-  if (IS_CHROMATIC) {
-    return (
-      <div style={{ minHeight: "100vh" }}>
-        <Story />
-      </div>
-    )
-  }
-
-  return <Story />
-}
-
-const chromaticModalSettings = {
-  parameters: {
-    chromatic: {
-      disable: false,
-      delay: 400, // match MODAL_TRANSITION_TIMEOUT in modals + 50ms
-      pauseAnimationAtEnd: true,
-    },
-  },
-  decorators: [HeightDecorator],
-}
-
 const InputModalTemplate: Story = {
   render: args => {
     const [isOpen, setIsOpen] = useState(IS_CHROMATIC)

package/src/Modal/_docs/controls.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import { Decorator } from "@storybook/react"
+import isChromatic from "chromatic"
+
+const IS_CHROMATIC = isChromatic()
+
+// Add additional height to the stories when running in Chromatic only.
+// Modals have fixed position and would be cropped from snapshot tests.
+// Setting height to 100vh ensures we capture as much content of the
+// modal, as it's height responds to the content within it.
+const heightDecorator: Decorator = Story => {
+  if (IS_CHROMATIC) {
+    return (
+      <div style={{ minHeight: "100vh" }}>
+        <Story />
+      </div>
+    )
+  }
+
+  return <Story />
+}
+
+export const chromaticModalSettings = {
+  parameters: {
+    chromatic: {
+      disable: false,
+      delay: 400, // match MODAL_TRANSITION_TIMEOUT in modals + 50ms
+      pauseAnimationAtEnd: true,
+    },
+  },
+  decorators: [heightDecorator],
+}