@kaizen/components 1.79.2 → 1.79.3

package/dist/cjs/src/__next__/Tabs/subcomponents/TabList/TabList.cjs

@@ -70,7 +70,7 @@ var TabList = function (props) {
       }
       setLeftArrowEnabled(false);
     }, {
-      threshold: 0.75,
+      threshold: 0.8,
       root: containerElement
     });
     firstTabObserver.observe(isRTL$1 ? tabs[tabs.length - 1] : tabs[0]);
@@ -81,7 +81,7 @@ var TabList = function (props) {
       }
       setRightArrowEnabled(false);
     }, {
-      threshold: 0.75,
+      threshold: 0.8,
       root: containerElement
     });
     lastTabObserver.observe(isRTL$1 ? tabs[0] : tabs[tabs.length - 1]);
@@ -89,7 +89,7 @@ var TabList = function (props) {
       firstTabObserver.disconnect();
       lastTabObserver.disconnect();
     };
-  }, [isDocumentReady, containerElement, isRTL$1]);
+  }, [isDocumentReady, containerElement, isRTL$1, tabListContext === null || tabListContext === void 0 ? void 0 : tabListContext.collection.size]);
   React.useEffect(function () {
     var _a;
     if (!isDocumentReady) {

package/dist/esm/src/__next__/Tabs/subcomponents/TabList/TabList.mjs

@@ -61,7 +61,7 @@ var TabList = function (props) {
       }
       setLeftArrowEnabled(false);
     }, {
-      threshold: 0.75,
+      threshold: 0.8,
       root: containerElement
     });
     firstTabObserver.observe(isRTL$1 ? tabs[tabs.length - 1] : tabs[0]);
@@ -72,7 +72,7 @@ var TabList = function (props) {
       }
       setRightArrowEnabled(false);
     }, {
-      threshold: 0.75,
+      threshold: 0.8,
       root: containerElement
     });
     lastTabObserver.observe(isRTL$1 ? tabs[0] : tabs[tabs.length - 1]);
@@ -80,7 +80,7 @@ var TabList = function (props) {
       firstTabObserver.disconnect();
       lastTabObserver.disconnect();
     };
-  }, [isDocumentReady, containerElement, isRTL$1]);
+  }, [isDocumentReady, containerElement, isRTL$1, tabListContext === null || tabListContext === void 0 ? void 0 : tabListContext.collection.size]);
   useEffect(function () {
     var _a;
     if (!isDocumentReady) {

package/dist/styles.css

@@ -6329,6 +6329,8 @@
   .GenericModal-module_transitionLayer__zTH-C {
     transition: opacity var(--animation-duration-fast, 300ms) ease-in-out;
     opacity: 1;
+    position: relative;
+    z-index: 1050;
   }
   .GenericModal-module_transitionLayer__zTH-C .GenericModal-module_backdropLayer__RNQ-U {
     /*
@@ -6720,6 +6722,8 @@
   .ConfirmationModal-module_transitionLayer__Ue95T {
     transition: opacity var(--animation-duration-fast, 300ms) ease-in-out;
     opacity: 1;
+    position: relative;
+    z-index: 1050;
   }
   .ConfirmationModal-module_transitionLayer__Ue95T .ConfirmationModal-module_backdropLayer__wvXnl {
     /*
@@ -7070,6 +7074,8 @@
   .ContextModal-module_transitionLayer__IjJem {
     transition: opacity var(--animation-duration-fast, 300ms) ease-in-out;
     opacity: 1;
+    position: relative;
+    z-index: 1050;
   }
   .ContextModal-module_transitionLayer__IjJem .ContextModal-module_backdropLayer__wuj3B {
     /*
@@ -7394,6 +7400,8 @@
   .InputEditModal-module_transitionLayer__1B3VI {
     transition: opacity var(--animation-duration-fast, 300ms) ease-in-out;
     opacity: 1;
+    position: relative;
+    z-index: 1050;
   }
   .InputEditModal-module_transitionLayer__1B3VI .InputEditModal-module_backdropLayer__aVLSb {
     /*

package/package.json

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

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

@@ -68,6 +68,8 @@
   .transitionLayer {
     transition: opacity $ca-duration-fast ease-in-out;
     opacity: 1;
+    position: relative;
+    z-index: $ca-z-index-modal;
 
     .backdropLayer {
       /*

package/src/Modal/GenericModal/_docs/GenericModal.spec.stories.tsx

@@ -21,7 +21,11 @@ export const TestBase: Story = {
 
     return (
       <>
-        <button type="button" className="border border-gray-500" onClick={() => setIsOpen(true)}>
+        <button
+          type="button"
+          className="border border-gray-500 relative z-10"
+          onClick={() => setIsOpen(true)}
+        >
           Open Modal
         </button>
         <GenericModal
@@ -30,6 +34,7 @@ export const TestBase: Story = {
           onOutsideModalClick={handleDismiss}
           onEscapeKeyup={handleDismiss}
           id="GenericModalTestId"
+          className="will-change-[opacity]"
         >
           <ModalHeader>
             <ModalAccessibleLabel>Test Modal</ModalAccessibleLabel>

package/src/__next__/Button/_docs/Button--migration-guide.mdx

@@ -1,11 +1,18 @@
-import { Canvas, Meta, Controls, Story } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import { Meta } from '@storybook/blocks'
 
-<Meta title="Components/Button/Migration Guide" />
+<Meta title="Components/Button/Migration guide" />
 
-# Button Migration Guide (next)
+# Button migration guide
 
-This is a short guide to assist in migration from the old to new `Button` and `LinkButton` component.
+## Audience
+
+This guide is relevant for Kaizen All-In-One (KAIO) v1 consumers.
+
+## Purpose
+
+This guide provides instructions for migrating button usage from `deprecated` (`@kaizen/components`) `Button` and `IconButton` components to `next` (`@kaizen/components/next`) `Button` and `LinkButton` components.
+
+This migration is a prerequisite for [migrating to KAIO v2](/docs/releases-upcoming-major-releases--docs).
 
 ## Key API differences
 

package/src/__next__/Icon/_docs/Icon--migration-guide.mdx

@@ -1,12 +1,20 @@
-import { Canvas, Meta, Controls, Story } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components'
+import { Meta, Story } from '@storybook/blocks'
+import { LinkTo } from '~storybook/components'
 import * as IconStories from './Icon.docs.stories'
 
 <Meta title="Components/Icon/Migration guide" />
 
 # Icon migration guide
 
-This is a short guide to assist in migration from the old to new Icon component.
+## Audience
+
+This guide is relevant for Kaizen All-In-One (KAIO) v1 consumers.
+
+## Purpose
+
+This guide provides instructions for migrating icon usage from the `deprecated` (`@kaizen/components`) `*Icon` components to the `next` (`@kaizen/components/next`) `Icon` component.
+
+This migration is a prerequisite for [migrating to KAIO v2](/docs/releases-upcoming-major-releases--docs).
 
 ## Codemod
 

package/src/__next__/Tabs/_docs/Tabs--migration-guide.mdx

@@ -2,9 +2,17 @@ import { Meta } from '@storybook/blocks'
 
 <Meta title="Components/Tabs/Migration guide" />
 
-# Next Tabs migration guide
+# Tabs migration guide
 
-A brief guide on how and why to migrate from Kaizen's current `Tabs` to the `next` release.
+## Audience
+
+This guide is relevant for Kaizen All-In-One (KAIO) v1 consumers.
+
+## Purpose
+
+This guide provides instructions for migrating tabs usage from the `deprecated` (`@kaizen/components`) `Tabs` component to the `next` (`@kaizen/components/next`) `Tabs` component.
+
+This migration is a prerequisite for [migrating to KAIO v2](/docs/releases-upcoming-major-releases--docs).
 
 ## Why the change?
 

package/src/__next__/Tabs/_docs/Tabs.spec.stories.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
-import { expect, userEvent, within } from '@storybook/test'
+import { expect, userEvent, waitFor, within } from '@storybook/test'
 import { Text } from '~components/Text'
-import { Tab, TabList, TabPanel, Tabs } from '../index'
+import { Tab, TabList, TabPanel, Tabs, type Key } from '../index'
 
 const meta = {
   title: 'Components/Tabs/Tabs (next)/Tabs (next) tests',
@@ -116,3 +116,48 @@ export const ArrowsShowingAndHidingRTL: Story = {
     expect(leftArrow).not.toBeInTheDocument()
   },
 }
+
+export const AsyncLoaded: Story = {
+  render: () => {
+    const [selectedKey, setSelectedKey] = useState<Key>(0)
+
+    const [showSecondTab, setShowSecondTab] = React.useState(false)
+    React.useEffect(() => {
+      const timer = setTimeout(() => setShowSecondTab(true), 1000)
+      return () => clearTimeout(timer)
+    }, [])
+    return (
+      <div style={{ maxWidth: '300px' }}>
+        <Tabs selectedKey={selectedKey} onSelectionChange={setSelectedKey}>
+          <TabList aria-label="Tabs" data-testid="sb-arrows">
+            <Tab id="one">Conversation</Tab>
+            {showSecondTab && <Tab id="two">Personal notes</Tab>}
+          </TabList>
+          <TabPanel id="one" className="p-24">
+            <Text variant="body">Content 1</Text>
+          </TabPanel>
+          <TabPanel id="two" className="p-24">
+            <Text variant="body">Content 2</Text>
+          </TabPanel>
+        </Tabs>
+      </div>
+    )
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement.parentElement!)
+    expect(canvas.queryByTestId('kz-tablist-right-arrow')).not.toBeInTheDocument()
+    await waitFor(() => userEvent.click(canvasElement))
+    await new Promise((r) => setTimeout(r, 2000))
+
+    await step('Check if second tab is loaded', async () => {
+      await waitFor(() => {
+        expect(canvas.queryByText('Personal notes')).toBeInTheDocument()
+      })
+
+      await waitFor(async () => {
+        const rightTab = await canvas.findByTestId('sb-arrows-kz-tablist-right-arrow')
+        expect(rightTab).toBeInTheDocument()
+      })
+    })
+  },
+}

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

@@ -66,11 +66,22 @@ export const Playground: Story = {
 }
 
 export const Controlled: Story = {
-  render: (args) => {
+  render: () => {
     const [selectedKey, setSelectedKey] = useState<Key>(0)
     return (
       <>
-        <Tabs {...args} selectedKey={selectedKey} onSelectionChange={setSelectedKey} />
+        <Tabs selectedKey={selectedKey} onSelectionChange={setSelectedKey}>
+          <TabList aria-label="Tabs">
+            <Tab id="one">Tab 1</Tab>
+            <Tab id="two">Tab 2</Tab>
+          </TabList>
+          <TabPanel id="one" className="p-24">
+            <Text variant="body">Content 1</Text>
+          </TabPanel>
+          <TabPanel id="two" className="p-24">
+            <Text variant="body">Content 2</Text>
+          </TabPanel>
+        </Tabs>
         <Button label="Switch to tab 2" onClick={(): void => setSelectedKey('two')} />
       </>
     )

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

@@ -75,7 +75,7 @@ export const TabList = (props: TabListProps): JSX.Element => {
         setLeftArrowEnabled(false)
       },
       {
-        threshold: 0.75,
+        threshold: 0.8,
         root: containerElement,
       },
     )
@@ -90,7 +90,7 @@ export const TabList = (props: TabListProps): JSX.Element => {
         setRightArrowEnabled(false)
       },
       {
-        threshold: 0.75,
+        threshold: 0.8,
         root: containerElement,
       },
     )
@@ -100,7 +100,7 @@ export const TabList = (props: TabListProps): JSX.Element => {
       firstTabObserver.disconnect()
       lastTabObserver.disconnect()
     }
-  }, [isDocumentReady, containerElement, isRTL])
+  }, [isDocumentReady, containerElement, isRTL, tabListContext?.collection.size])
 
   useEffect(() => {
     if (!isDocumentReady) {

package/src/__next__/Tooltip/_docs/Tooltip--migration-guide.mdx

@@ -0,0 +1,62 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Components/Tooltip/Migration guide" />
+
+# Tooltip migration guide
+
+## Audience
+
+This guide is relevant for Kaizen All-In-One (KAIO) v1 consumers.
+
+## Purpose
+
+This guide provides instructions for migrating tooltip usage from the `deprecated` (`@kaizen/components`) `Tooltip` component to the `next` (`@kaizen/components/next`) `Tooltip` component.
+
+This migration is a prerequisite for [migrating to KAIO v2](/docs/releases-upcoming-major-releases--docs).
+
+## Key API changes
+
+The `next` tooltip separates its functionality into two distinct components:
+
+- `TooltipTrigger` component wraps the `Tooltip` component and its trigger element, and controls open and close interactions.
+- `Tooltip` component provides the tooltip's content and controls its placement.
+
+Other notable changes:
+
+- `animationDuration` prop is retired
+- `children` prop becomes `TooltipTrigger.Children`
+- `display` prop is retired
+- `isInitiallyVisible` prop becomes `Tooltip.defaultOpen`
+- `mood` prop is retired
+  - This change aligns with a broader move towards more judicious use of colour
+- `portalSelector` prop is retired
+  - Where needed, [PortalProvider](https://react-spectrum.adobe.com/react-aria/PortalProvider.html) can be used to control portalling behaviour
+- `position` prop becomes `Tooltip.placement`, and values are mapped as follows:
+  - `above` becomes `top`
+  - `below` becomes `bottom`
+  - `left` becomes `start`
+  - `right` becomes `end`
+- `text` prop becomes `Tooltip.Children`
+
+## Migration example
+
+### Before
+
+```tsx
+<Tooltip text="Content" position="above">
+  <Button>Trigger</Button>
+</Tooltip>
+```
+
+### After
+
+```tsx
+<TooltipTrigger>
+  <Button>Trigger</Button>
+  <Tooltip placement="top">Content</Tooltip>
+</TooltipTrigger>
+```
+
+## More information
+
+More information about the `next` `Tooltip` component can be found at [API Specification](/docs/components-tooltip-tooltip-next-api-specification--docs) and [Usage Guidelines](/docs/components-tooltip-tooltip-next-usage-guidelines--docs).