@loadsmart/loadsmart-ui 5.11.2-beta.1 → 5.12.0

package/package.json

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

package/src/components/Select/Select.test.tsx

@@ -298,6 +298,25 @@ describe('Select', () => {
         expect(await selectEvent.getSelectedOptions(searchInput)).toHaveLength(0)
         expect(searchInput).toHaveDisplayValue('')
       })
+
+      it('removes the clear button', async () => {
+        const selectedFruit = generator.pickone([...FRUITS])
+
+        setup({
+          value: selectedFruit as Option,
+          hideClear: true,
+        })
+
+        const searchInput = screen.getByLabelText('Select your favorite fruit')
+        expect(searchInput).toHaveDisplayValue(selectedFruit.label)
+
+        const selectedOptions = await selectEvent.getSelectedOptions(searchInput)
+        expect(selectedOptions).toHaveLength(1)
+
+        expect(selectedOptions[0]).toHaveTextContent(selectedFruit.label)
+
+        expect(screen.queryByTestId('select-trigger-clear')).not.toBeInTheDocument()
+      })
     })
 
     describe('Multi selection', () => {

package/src/components/Select/Select.tsx

@@ -207,7 +207,7 @@ function renderOptionsMultiple(select: useSelectReturn, components?: Components)
 }
 
 function Select(props: SelectProps): JSX.Element {
-  const { multiple, placeholder, components, ...others } = props
+  const { multiple, placeholder, components, hideClear = false, ...others } = props
 
   const select = useSelect(props)
 
@@ -224,24 +224,26 @@ function Select(props: SelectProps): JSX.Element {
       return <Loading data-testid="select-trigger-loading">&middot;&middot;&middot;</Loading>
     }
 
-    if (select.value) {
-      if (multiple) {
-        return <ClearMultiple select={select} />
-      }
-
-      if (!select.disabled) {
-        return (
-          <CloseButton
-            size={12}
-            {...getCommonClearButtonProps()}
-            {...select.getClearProps()}
-            type="button"
-          />
-        )
-      }
+    if (!select.value) {
+      return null
     }
 
-    return null
+    if (multiple) {
+      return <ClearMultiple select={select} />
+    }
+
+    if (select.disabled || hideClear) {
+      return null
+    }
+
+    return (
+      <CloseButton
+        size={12}
+        {...getCommonClearButtonProps()}
+        {...select.getClearProps()}
+        type="button"
+      />
+    )
   }
 
   return (

package/src/components/Select/Select.types.ts

@@ -69,6 +69,12 @@ export type Components = {
 
 export type CreateOptionPosition = 'first' | 'last'
 
+export type OnChange = (event: EventLike<Option | Option[] | null>) => void
+
+export type OnCreate = (query: string) => Promise<void | Option> | void | Option
+
+export type OnQueryChange = (e: ChangeEvent<HTMLInputElement>) => void
+
 export interface SelectProps extends DropdownProps {
   name: string
   placeholder?: string
@@ -78,11 +84,15 @@ export interface SelectProps extends DropdownProps {
   datasources?: SelectDatasourceFunction<any>[]
   options?: GenericOption[]
   components?: Components
-  onChange?: (event: EventLike<Option | Option[] | null>) => void
-  onCreate?: (query: string) => Promise<void | Option> | void | Option
-  onQueryChange?: (e: ChangeEvent<HTMLInputElement>) => void
+  onChange?: OnChange
+  onCreate?: OnCreate
+  onQueryChange?: OnQueryChange
   isValidNewOption?: ((query: string) => boolean) | boolean
   createOptionPosition?: CreateOptionPosition
+  /**
+   * Hide the clear button on the Single Select.
+   */
+  hideClear?: boolean
 }
 
 export type SelectOptionProps = {

package/src/components/Select/index.ts

@@ -4,5 +4,9 @@ export type {
   useSelectExternalReturn as useSelectReturn,
   SelectComponentsOptionProps as SelectOptionProps,
   SelectComponentsEmptyProps as SelectEmptyProps,
+  Option as SelectOption,
+  OnChange as SelectOnChange,
+  OnCreate as SelectOnCreate,
+  OnQueryChange as SelectOnQueryChange,
 } from './Select.types'
 export { useSelectExternal as useSelect } from './useSelectExternal'

package/src/testing/SelectEvent/SelectEvent.ts

@@ -1,4 +1,11 @@
-import { fireEvent, waitFor, within, waitForElementToBeRemoved } from '@testing-library/react'
+/* eslint-disable */
+import {
+  fireEvent,
+  queries,
+  waitFor,
+  within,
+  waitForElementToBeRemoved,
+} from '@testing-library/dom'
 import { act } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
@@ -19,7 +26,6 @@ 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
 }
 
@@ -54,12 +60,12 @@ function isSelectMenuExpanded(input: HTMLElement): boolean {
 async function waitForPendingQuery(input: HTMLElement) {
   const searchContainer = getSelectSearchContainer(input)
 
-  if (!within(searchContainer).queryByTestId('select-trigger-loading')) {
+  if (!queries.queryByTestId(searchContainer, 'select-trigger-loading')) {
     return
   }
 
   await waitForElementToBeRemoved(
-    () => within(searchContainer).queryByTestId('select-trigger-loading'),
+    () => queries.queryByTestId(searchContainer, 'select-trigger-loading'),
     { timeout: 2500 }
   )
 }
@@ -82,10 +88,11 @@ async function expand(input: HTMLElement): Promise<void> {
     expect(triggerHandle).toBeEnabled()
   })
 
-  userEvent.click(triggerHandle)
-
-  await waitFor(async () => {
-    expect(await within(getSelectContainer(input)).findByRole('listbox')).toBeInTheDocument()
+  await act(async () => {
+    userEvent.click(triggerHandle)
+    await waitFor(() => {
+      expect(isSelectMenuExpanded(input)).toBe(true)
+    })
   })
 }
 
@@ -101,10 +108,12 @@ async function collapse(input: HTMLElement): Promise<void> {
 
   const triggerHandle = getSelectTriggerHandle(input)
 
-  userEvent.click(triggerHandle)
+  await act(async () => {
+    userEvent.click(triggerHandle)
 
-  await waitFor(() => {
-    expect(within(getSelectContainer(input)).queryByRole('listbox')).not.toBeInTheDocument()
+    await waitFor(() => {
+      expect(isSelectMenuExpanded(input)).toBe(false)
+    })
   })
 }
 
@@ -120,12 +129,14 @@ async function select(option: string, input: HTMLElement): Promise<void> {
 
   const menuContainer = getSelectMenu(input)
 
-  const optionElement = await within(menuContainer).findByLabelText(option)
+  await act(async () => {
+    const optionElement = await queries.findByLabelText(menuContainer, 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)
@@ -143,12 +154,14 @@ async function unselect(option: string, input: HTMLElement): Promise<void> {
 
   const menuContainer = getSelectMenu(input)
 
-  const optionElement = await within(menuContainer).findByLabelText(option)
+  await act(async () => {
+    const optionElement = await queries.findByLabelText(menuContainer, 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)
@@ -164,9 +177,9 @@ async function clear(input: HTMLElement): Promise<void> {
 
   const searchContainer = getSelectSearchContainer(input)
 
-  const clearButton = within(searchContainer).getByTestId('select-trigger-clear')
+  await act(async () => {
+    const clearButton = within(searchContainer).getByTestId('select-trigger-clear')
 
-  act(() => {
     if (clearButton) {
       userEvent.click(clearButton)
     }
@@ -182,9 +195,11 @@ async function clear(input: HTMLElement): Promise<void> {
 async function search(query: string, input: HTMLElement): Promise<void> {
   const selectContainer = getSelectContainer(input)
 
-  fireEvent.change(input, { target: { value: query } })
+  await act(async () => {
+    fireEvent.change(input, { target: { value: query } })
 
-  await within(selectContainer).findAllByRole('option')
+    await queries.findAllByRole(selectContainer, 'option')
+  })
 }
 
 /**
@@ -197,8 +212,7 @@ async function getOptions(input: HTMLElement): Promise<HTMLElement[]> {
 
   const menuContainer = getSelectMenu(input)
 
-  const options = within(menuContainer).queryAllByRole('option')
-
+  const options = queries.queryAllByRole(menuContainer, 'option')
   await collapse(input)
 
   return options
@@ -216,7 +230,7 @@ async function getSelectedOptions(input: HTMLElement): Promise<HTMLElement[]> {
   let selectedOptions: HTMLElement[] = []
 
   try {
-    selectedOptions = await within(menuContainer).findAllByRole('option', {
+    selectedOptions = await queries.findAllByRole(menuContainer, 'option', {
       selected: true,
     })
   } catch (err) {