@loadsmart/loadsmart-ui 5.7.0 → 5.8.0

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

@@ -67,6 +67,8 @@ export type Components = {
   CreatableOption?: CreatableOptionType
 }
 
+export type CreateOptionPosition = 'first' | 'last'
+
 export interface SelectProps extends DropdownProps {
   name: string
   placeholder?: string
@@ -79,6 +81,8 @@ export interface SelectProps extends DropdownProps {
   onChange?: (event: EventLike<Option | Option[] | null>) => void
   onCreate?: (query: string) => Promise<void | Option> | void | Option
   onQueryChange?: (e: ChangeEvent<HTMLInputElement>) => void
+  isValidNewOption?: ((query: string) => boolean) | boolean
+  createOptionPosition?: CreateOptionPosition
 }
 
 export type SelectOptionProps = {
@@ -123,6 +127,7 @@ export type useSelectReturn = {
   }
   getCreatebleProps: () => CreatableProps
   isCreatable: () => boolean
+  createOptionPosition?: CreateOptionPosition
 }
 
 export type useSelectExternalReturn = {

package/src/components/Select/useSelect.ts

@@ -3,6 +3,7 @@ import { isFunction } from '@loadsmart/utils-function'
 import { isNil } from '@loadsmart/utils-object'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
+import isEmpty from 'utils/toolset/isEmpty'
 import { useDropdown } from 'components/Dropdown'
 import { useDidMount } from 'hooks/useDidMount'
 import { useFocusTrap } from 'hooks/useFocusTrap'
@@ -191,8 +192,18 @@ function useOptions<T = any>(props: { datasources: SelectDatasource<T>[]; adapte
  */
 function useSelect(props: SelectProps): useSelectReturn {
   const didMount = useDidMount()
-  const { multiple, onQueryChange, onChange, onCreate, id, name, disabled = false, onBlur } = props
-  const dropdown = useDropdown(props)
+  const {
+    multiple,
+    onQueryChange,
+    onChange,
+    onCreate,
+    id,
+    name,
+    disabled = false,
+    onBlur,
+    isValidNewOption = (query: string) => Boolean(query),
+    createOptionPosition = 'last',
+  } = props
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const datasources = useMemo<SelectDatasource<any>[]>(() => getDatasources(props), [
@@ -221,11 +232,26 @@ function useSelect(props: SelectProps): useSelectReturn {
     },
   })
 
+  const [queryTyped, setQueryTyped] = useState(false)
   const [query, setQuery] = useState<string>(
     getDisplayValue(adapters, selectable.selected, multiple)
   )
   const options = useOptions({ datasources, adapters })
 
+  const expandDisabled = useMemo(
+    () => !query.length && isEmpty(options.get()) && isEmpty(selectable.selected),
+    [query, options, selectable.selected]
+  )
+
+  const dropdown = useDropdown({ ...props, expandDisabled })
+
+  useEffect(() => {
+    if (queryTyped) {
+      options.fetch(query)
+      dropdown.expand()
+    }
+  }, [query, queryTyped])
+
   const getSelectableOption = useCallback(
     function getSelectableOption(option: Option) {
       const adapter = getAdapter(adapters, option._type)
@@ -274,9 +300,19 @@ function useSelect(props: SelectProps): useSelectReturn {
 
           onBlur?.(event)
         },
+        expandDisabled,
       }
     },
-    [adapters, dropdown.expanded, dropdown.toggle, multiple, options, selectable.selected, onBlur]
+    [
+      adapters,
+      dropdown.expanded,
+      dropdown.toggle,
+      multiple,
+      options,
+      selectable.selected,
+      onBlur,
+      expandDisabled,
+    ]
   )
 
   const getTriggerProps = useCallback(
@@ -292,15 +328,13 @@ function useSelect(props: SelectProps): useSelectReturn {
         onChange(e: ChangeEvent<HTMLInputElement>) {
           onQueryChange?.(e)
 
-          const query = e.target.value
-          setQuery(query)
-          dropdown.expand()
-          options.fetch(query)
+          setQuery(e.target.value)
+          setQueryTyped(true)
         },
         onFocus: TriggerOnFocusHandler,
       }
     },
-    [id, query, onQueryChange, dropdown, options]
+    [id, query, onQueryChange, dropdown, options, selectable.selected]
   )
 
   const getClearProps = useCallback(
@@ -396,14 +430,22 @@ function useSelect(props: SelectProps): useSelectReturn {
         )
       }
 
+      function getIsValidNewOption() {
+        if (isFunction(isValidNewOption)) {
+          return isValidNewOption(query)
+        }
+
+        return isValidNewOption
+      }
+
       return (
         isFunction(onCreate) &&
-        Boolean(query) &&
+        getIsValidNewOption() &&
         options.status === 'queried' &&
         !isQueryEqualAnOption()
       )
     },
-    [getSelectableOption, onCreate, options, query, selectable.selected]
+    [getSelectableOption, isValidNewOption, onCreate, options, query, selectable.selected]
   )
 
   useEffect(
@@ -461,6 +503,7 @@ function useSelect(props: SelectProps): useSelectReturn {
     getDropdownProps,
     getCreatebleProps,
     isCreatable,
+    createOptionPosition,
   }
 }
 

package/src/stories/startPage.stories.mdx

@@ -2,20 +2,26 @@ import { Meta } from '@storybook/addon-docs/blocks'
 
 <Meta title="Getting started page" />
 
-
 Miranda UI is a [React](https://reactjs.org/) components library. It works with [Styled Components](https://www.styled-components.com).
 
 ## Steps to install
 
-1. Install node 11
-2. Install dependencies: `yarn`
+1. You need to have node 16 or the latest LTS version installed;
+
+   One option is to use [NVM](https://github.com/nvm-sh/nvm). You can run `nvm use` or set it to run automatically in a directory with a .nvmrc file.
+
+1. Install dependencies: `yarn`
+
+   If you don't have yarn, follow yarn [installation docs](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable)
 
 ## Usage
 
 ```sh
 yarn add @loadsmart/loadsmart-ui
 ```
+
 or
+
 ```sh
 npm install @loadsmart/loadsmart-ui
 ```
@@ -43,7 +49,9 @@ Install all dependencies:
 ```bash
 yarn
 ```
-or 
+
+or
+
 ```bash
 npm i
 ```
@@ -53,7 +61,9 @@ Run the application - you'll be able to see all components documentation in Stor
 ```bash
 yarn dev
 ```
-or 
+
+or
+
 ```bash
 npm run dev
 ```
@@ -65,7 +75,9 @@ To run tests:
 ```bash
 yarn test
 ```
-or 
+
+or
+
 ```bash
 npm run test
 ```
@@ -77,7 +89,7 @@ When creating a new one, you must add its new folder following this pattern.
 
 It's also essential to include the `.stories` and `.test` files to cover both documentation and quality standards.
 
-
-<br /><br />
+<br />
+<br />
 
 We use [`semantic-release`](https://github.com/semantic-release/) to evaluate our commits and trigger automatic release to NPM. For that, please follow [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/), so your changes will properly be evaluated and published if that's the case.

package/src/testing/SelectEvent/SelectEvent.ts

@@ -42,6 +42,10 @@ async function expand(input: HTMLElement): Promise<void> {
     return
   }
 
+  await waitFor(() => {
+    expect(within(selectContainer).getByTestId('select-trigger-handle')).toBeEnabled()
+  })
+
   await act(async () => {
     userEvent.click(within(selectContainer).getByTestId('select-trigger-handle'))