@loadsmart/loadsmart-ui 5.7.0 → 5.9.0

package/src/components/Select/Select.tsx

@@ -105,6 +105,10 @@ const DividerText = styled(Text)`
   background-color: ${token('color-neutral-white')};
 `
 
+function isQuerying(status: SelectStatus) {
+  return ['pending-query', 'querying'].includes(status)
+}
+
 type SeparatorProps = {
   status: SelectStatus
   after?: unknown[]
@@ -112,7 +116,7 @@ type SeparatorProps = {
 }
 
 function Separator({ status, after = [], before = [] }: SeparatorProps): JSX.Element {
-  if (status !== 'querying') {
+  if (!isQuerying(status)) {
     if (isEmpty(after) && !isEmpty(before)) return <Divider />
     if (isEmpty(after)) return <Fragment />
   }
@@ -121,7 +125,7 @@ function Separator({ status, after = [], before = [] }: SeparatorProps): JSX.Ele
     <div style={{ position: 'relative' }}>
       <Divider />
       <DividerText variant="caption-bold" color="color-neutral-light">
-        {status === 'querying' ? 'Loading...' : `${after.length} option${pluralize(after.length)}`}
+        {isQuerying(status) ? 'Loading...' : `${after.length} option${pluralize(after.length)}`}
       </DividerText>
     </div>
   )
@@ -131,7 +135,7 @@ function renderOptionsSingle(select: useSelectReturn, components?: Components):
   const { Option, Empty, CreatableOption } = getComponents(components)
   const isCreatable = select.isCreatable()
 
-  if (select.status === 'querying' && isEmpty(select.options)) {
+  if (isQuerying(select.status) && isEmpty(select.options)) {
     return <SelectEmpty>Loading...</SelectEmpty>
   }
 
@@ -145,11 +149,12 @@ function renderOptionsSingle(select: useSelectReturn, components?: Components):
 
   return (
     <>
+      {select.createOptionPosition === 'first' && isCreatable ? <CreatableOption /> : null}
       {select.options.map((option) => {
         const { value } = select.getSelectableOption(option)
         return <Option key={String(value)} value={value} />
       })}
-      {isCreatable && <CreatableOption />}
+      {select.createOptionPosition === 'last' && isCreatable ? <CreatableOption /> : null}
     </>
   )
 }
@@ -174,18 +179,19 @@ function renderOptionsMultiple(select: useSelectReturn, components?: Components)
 
   let remaining = (
     <Fragment>
+      {select.createOptionPosition === 'first' && isCreatable ? <CreatableOption /> : null}
       {remainingOptions.map((option) => (
         <Option key={String(option.value)} value={option.value} />
       ))}
-      {isCreatable && <CreatableOption />}
+      {select.createOptionPosition === 'last' && isCreatable ? <CreatableOption /> : null}
     </Fragment>
   )
 
-  if (select.status !== 'querying' && isEmpty(remainingOptions)) {
+  if (!isQuerying(select.status) && isEmpty(remainingOptions)) {
     remaining = isCreatable ? <CreatableOption /> : <Empty>No more options.</Empty>
   }
 
-  if (select.status !== 'querying' && isEmpty(select.options)) {
+  if (!isQuerying(select.status) && isEmpty(select.options)) {
     remaining = isCreatable ? <CreatableOption /> : <Empty>No results found.</Empty>
   }
 
@@ -214,7 +220,7 @@ function Select(props: SelectProps): JSX.Element {
   }
 
   function getTrailing() {
-    if (select.status === 'querying') {
+    if (isQuerying(select.status)) {
       return <Loading data-testid="select-trigger-loading">&middot;&middot;&middot;</Loading>
     }
 

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,32 @@ 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) &&
+      isFunction(isValidNewOption)
+        ? !isValidNewOption(query)
+        : !isValidNewOption,
+    [query, options, selectable.selected, isValidNewOption]
+  )
+
+  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 +306,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 +334,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 +436,17 @@ function useSelect(props: SelectProps): useSelectReturn {
         )
       }
 
-      return (
-        isFunction(onCreate) &&
-        Boolean(query) &&
-        options.status === 'queried' &&
-        !isQueryEqualAnOption()
-      )
+      function getIsValidNewOption() {
+        if (isFunction(isValidNewOption)) {
+          return isValidNewOption(query) && !isQueryEqualAnOption()
+        }
+
+        return isValidNewOption
+      }
+
+      return isFunction(onCreate) && options.status === 'queried' && getIsValidNewOption()
     },
-    [getSelectableOption, onCreate, options, query, selectable.selected]
+    [getSelectableOption, isValidNewOption, onCreate, options, query, selectable.selected]
   )
 
   useEffect(
@@ -461,6 +504,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'))