@loadsmart/loadsmart-ui 5.12.3 → 5.13.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loadsmart/loadsmart-ui",
-  "version": "5.12.3",
+  "version": "5.13.1",
   "description": "Miranda UI, a React UI library",
   "main": "dist",
   "files": [

package/src/components/Tabs/Tabs.test.tsx

@@ -69,4 +69,35 @@ describe('Tabs', () => {
 
     expect(screen.getByRole('tab', { selected: true })).toHaveTextContent('Multi-quote')
   })
+
+  it('mounts only the visible tab when using the `lazy` prop', () => {
+    setup({
+      children: (
+        <Fragment>
+          <Tabs.Items>
+            <Tabs.Item name="tab-1" default>
+              Tabs 1
+            </Tabs.Item>
+            <Tabs.Item name="tab-2">Tabs 2</Tabs.Item>
+          </Tabs.Items>
+          <Tabs.Panels>
+            <Tabs.Panel name="tab-1" lazy>
+              first content
+            </Tabs.Panel>
+            <Tabs.Panel name="tab-2" lazy>
+              second content
+            </Tabs.Panel>
+          </Tabs.Panels>
+        </Fragment>
+      ),
+    })
+
+    expect(screen.getByText('first content')).toBeInTheDocument()
+    expect(screen.queryByText('second content')).not.toBeInTheDocument()
+
+    fire.click(screen.getByDisplayValue('tab-2'))
+
+    expect(screen.getByText('second content')).toBeInTheDocument()
+    expect(screen.queryByText('first content')).not.toBeInTheDocument()
+  })
 })

package/src/components/Tabs/Tabs.tsx

@@ -203,20 +203,29 @@ function PanelsItems({ children, ...props }: PanelsItemsProps) {
 
 interface PanelsItemProps extends HTMLAttributes<HTMLElement> {
   name: string
+  /**
+   * Renders the Panel.Item only when is visible
+   * @default false
+   */
+  lazy?: boolean
 }
 
-function PanelsItem({ children, name, ...props }: PanelsItemProps) {
+function PanelsItem({ children, name, lazy, ...props }: PanelsItemProps) {
   const { activeTab } = useContext(TabContext)
 
   const hidden = activeTab !== name
 
   return (
     <PanelsItemWrapper {...props} role="tabpanel" aria-hidden={hidden}>
-      {children}
+      {lazy && hidden ? null : children}
     </PanelsItemWrapper>
   )
 }
 
+PanelsItem.defaultProps = {
+  lazy: false,
+}
+
 export interface TabsProps extends HTMLAttributes<HTMLElement>, WithDirectionProps {
   activeTab?: string
   onTabChange?: (tab: string) => void
@@ -228,6 +237,21 @@ const TabsWrapper = styled.div`
   }
 `
 
+/**
+ * @example
+ * <Tabs>
+    <Tabs.Items>
+      <Tabs.Item name="tab-1" default>
+        Tabs 1
+      </Tabs.Item>
+      <Tabs.Item name="tab-2">Tabs 2</Tabs.Item>
+    </Tabs.Items>
+    <Tabs.Panels>
+      <Tabs.Panel name="tab-1">first content</Tabs.Panel>
+      <Tabs.Panel name="tab-2">second content</Tabs.Panel>
+    </Tabs.Panels>
+ * </Tabs>
+ */
 function Tabs({
   children,
   direction = 'horizontal',

package/src/testing/SelectEvent/SelectEvent.ts

@@ -1,11 +1,4 @@
-/* eslint-disable */
-import {
-  fireEvent,
-  queries,
-  waitFor,
-  within,
-  waitForElementToBeRemoved,
-} from '@testing-library/dom'
+import { fireEvent, waitFor, within, waitForElementToBeRemoved } from '@testing-library/react'
 import { act } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
@@ -26,6 +19,7 @@ function getSelectMenu(input: HTMLElement): HTMLElement {
 }
 
 function getSelectTriggerHandle(input: HTMLElement): HTMLElement {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   return input.parentNode!.nextSibling!.nextSibling as HTMLElement
 }
 
@@ -60,12 +54,12 @@ function isSelectMenuExpanded(input: HTMLElement): boolean {
 async function waitForPendingQuery(input: HTMLElement) {
   const searchContainer = getSelectSearchContainer(input)
 
-  if (!queries.queryByTestId(searchContainer, 'select-trigger-loading')) {
+  if (!within(searchContainer).queryByTestId('select-trigger-loading')) {
     return
   }
 
   await waitForElementToBeRemoved(
-    () => queries.queryByTestId(searchContainer, 'select-trigger-loading'),
+    () => within(searchContainer).queryByTestId('select-trigger-loading'),
     { timeout: 2500 }
   )
 }
@@ -88,11 +82,10 @@ async function expand(input: HTMLElement): Promise<void> {
     expect(triggerHandle).toBeEnabled()
   })
 
-  await act(async () => {
-    userEvent.click(triggerHandle)
-    await waitFor(() => {
-      expect(isSelectMenuExpanded(input)).toBe(true)
-    })
+  userEvent.click(triggerHandle)
+
+  await waitFor(async () => {
+    expect(await within(getSelectContainer(input)).findByRole('listbox')).toBeInTheDocument()
   })
 }
 
@@ -108,12 +101,10 @@ async function collapse(input: HTMLElement): Promise<void> {
 
   const triggerHandle = getSelectTriggerHandle(input)
 
-  await act(async () => {
-    userEvent.click(triggerHandle)
+  userEvent.click(triggerHandle)
 
-    await waitFor(() => {
-      expect(isSelectMenuExpanded(input)).toBe(false)
-    })
+  await waitFor(() => {
+    expect(within(getSelectContainer(input)).queryByRole('listbox')).not.toBeInTheDocument()
   })
 }
 
@@ -129,14 +120,12 @@ async function select(option: string, input: HTMLElement): Promise<void> {
 
   const menuContainer = getSelectMenu(input)
 
-  await act(async () => {
-    const optionElement = await queries.findByLabelText(menuContainer, option)
+  const optionElement = await within(menuContainer).findByLabelText(option)
 
-    // click the option if exists; Select currently closes when an item is clicked.
-    if (optionElement && optionElement.getAttribute('aria-selected') == 'false') {
-      userEvent.click(optionElement)
-    }
-  })
+  // click the option if exists; Select currently closes when an item is clicked.
+  if (optionElement && optionElement.getAttribute('aria-selected') == 'false') {
+    userEvent.click(optionElement)
+  }
 
   // we collapse in the case the option was not clicked
   await collapse(input)
@@ -154,14 +143,12 @@ async function unselect(option: string, input: HTMLElement): Promise<void> {
 
   const menuContainer = getSelectMenu(input)
 
-  await act(async () => {
-    const optionElement = await queries.findByLabelText(menuContainer, option)
+  const optionElement = await within(menuContainer).findByLabelText(option)
 
-    // ensures that the option exists and IS selected
-    if (optionElement && optionElement.getAttribute('aria-selected') == 'true') {
-      userEvent.click(optionElement)
-    }
-  })
+  // ensures that the option exists and IS selected
+  if (optionElement && optionElement.getAttribute('aria-selected') == 'true') {
+    userEvent.click(optionElement)
+  }
 
   // we collapse in the case the option was not clicked
   await collapse(input)
@@ -177,9 +164,9 @@ async function clear(input: HTMLElement): Promise<void> {
 
   const searchContainer = getSelectSearchContainer(input)
 
-  await act(async () => {
-    const clearButton = within(searchContainer).getByTestId('select-trigger-clear')
+  const clearButton = within(searchContainer).getByTestId('select-trigger-clear')
 
+  act(() => {
     if (clearButton) {
       userEvent.click(clearButton)
     }
@@ -195,11 +182,9 @@ async function clear(input: HTMLElement): Promise<void> {
 async function search(query: string, input: HTMLElement): Promise<void> {
   const selectContainer = getSelectContainer(input)
 
-  await act(async () => {
-    fireEvent.change(input, { target: { value: query } })
+  fireEvent.change(input, { target: { value: query } })
 
-    await queries.findAllByRole(selectContainer, 'option')
-  })
+  await within(selectContainer).findAllByRole('option')
 }
 
 /**
@@ -212,7 +197,8 @@ async function getOptions(input: HTMLElement): Promise<HTMLElement[]> {
 
   const menuContainer = getSelectMenu(input)
 
-  const options = queries.queryAllByRole(menuContainer, 'option')
+  const options = within(menuContainer).queryAllByRole('option')
+
   await collapse(input)
 
   return options
@@ -230,7 +216,7 @@ async function getSelectedOptions(input: HTMLElement): Promise<HTMLElement[]> {
   let selectedOptions: HTMLElement[] = []
 
   try {
-    selectedOptions = await queries.findAllByRole(menuContainer, 'option', {
+    selectedOptions = await within(menuContainer).findAllByRole('option', {
       selected: true,
     })
   } catch (err) {