@loadsmart/loadsmart-ui 5.7.0 → 5.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loadsmart/loadsmart-ui",
-  "version": "5.7.0",
+  "version": "5.8.0",
   "description": "Miranda UI, a React UI library",
   "main": "dist",
   "files": [
@@ -62,14 +62,12 @@
   "lint-staged": {
     "src/**/*.{js,ts,jsx,tsx,json}": [
       "eslint --fix",
-      "prettier --write",
-      "git add"
+      "prettier --write"
     ],
     "src/{common,components,styles}/**/*.{js,ts,jsx,tsx}": [
       "eslint --fix",
       "prettier --write",
-      "stylelint --fix",
-      "git add"
+      "stylelint --fix"
     ]
   },
   "devDependencies": {

package/src/components/Dropdown/Dropdown.context.ts

@@ -3,6 +3,7 @@ import type { DropdownContextReturn } from './Dropdown.types'
 
 const DropdownContext = createContext<DropdownContextReturn>({
   disabled: false,
+  expandDisabled: false,
   expanded: false,
   toggle: function () {
     // nothing

package/src/components/Dropdown/Dropdown.tsx

@@ -39,8 +39,16 @@ const HiddenCloseButton = styled.button.attrs({
  * @returns
  */
 export function GenericDropdown(props: GenericDropdownProps): JSX.Element {
-  const { children, expanded, toggle, disabled = false, onBlur, ...others } = props
-  const [contextValue, setContextValue] = useState({ expanded, toggle, disabled })
+  const {
+    children,
+    expanded,
+    toggle,
+    disabled = false,
+    expandDisabled = false,
+    onBlur,
+    ...others
+  } = props
+  const [contextValue, setContextValue] = useState({ expanded, toggle, disabled, expandDisabled })
   const ref = useRef(null)
 
   useClickOutside(
@@ -58,9 +66,9 @@ export function GenericDropdown(props: GenericDropdownProps): JSX.Element {
 
   useEffect(
     function updateContextValue() {
-      setContextValue({ expanded, toggle, disabled })
+      setContextValue({ expanded, toggle, disabled, expandDisabled })
     },
-    [disabled, expanded, toggle]
+    [expanded, toggle, disabled, expandDisabled]
   )
 
   return (

package/src/components/Dropdown/Dropdown.types.ts

@@ -15,6 +15,11 @@ export interface useDropdownReturn {
 
 export interface DropdownProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'onBlur'> {
   disabled?: boolean
+  /**
+   * Use this prop to not allow the dropdown to be expanded.
+   * While the `disabled` prop applies to the whole dropdown trigger element, this one only disables the TriggerHandle.
+   */
+  expandDisabled?: boolean
   onBlur?: (event?: MouseEvent | TouchEvent | KeyboardEvent) => void
 }
 
@@ -42,6 +47,7 @@ export interface DropdownMenuSectionProps extends HTMLAttributes<HTMLDivElement>
 
 export interface DropdownContextReturn {
   disabled: boolean
+  expandDisabled: boolean
   expanded: boolean
   toggle: () => void
 }

package/src/components/Dropdown/DropdownTrigger.tsx

@@ -237,7 +237,8 @@ function Caret(props: Omit<IconProps, 'name'> & { $rotate: boolean }) {
 }
 
 function DropdownTriggerButton(props: DropdownTriggerButtonProps): JSX.Element {
-  const { toggle, disabled, expanded } = useContext(DropdownContext)
+  const contextValue = useContext(DropdownContext)
+  const { toggle, disabled, expanded } = contextValue
   const { children, onClick, ...others } = props
 
   function handleClick(e: MouseEvent<HTMLButtonElement>) {
@@ -249,7 +250,7 @@ function DropdownTriggerButton(props: DropdownTriggerButtonProps): JSX.Element {
 
   function renderChildren() {
     if (isFunction(children)) {
-      return children({ toggle, disabled, expanded })
+      return children(contextValue)
     }
 
     return children
@@ -273,7 +274,7 @@ function DropdownTriggerButton(props: DropdownTriggerButtonProps): JSX.Element {
 }
 
 function DropdownTriggerHandle(props: ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element {
-  const { toggle, expanded, disabled } = useContext(DropdownContext)
+  const { toggle, expanded, disabled, expandDisabled } = useContext(DropdownContext)
   const { onClick, ...others } = props
 
   function handleClick(e: MouseEvent<HTMLButtonElement>) {
@@ -288,9 +289,9 @@ function DropdownTriggerHandle(props: ButtonHTMLAttributes<HTMLButtonElement>):
       onClick={handleClick}
       data-testid="dropdown-trigger-handle"
       {...others}
+      disabled={disabled || expandDisabled}
       type="button"
       tabIndex={-1}
-      disabled={disabled}
     >
       <Caret $rotate={expanded} />
     </TriggerHandle>

package/src/components/Dropdown/useDropdown.ts

@@ -11,6 +11,7 @@ export interface GenericDropdownProps extends DropdownProps, useDropdownProps {}
 
 function useDropdown({
   disabled,
+  expandDisabled,
 }: DropdownProps): {
   expanded: boolean
   toggle: () => void
@@ -21,44 +22,44 @@ function useDropdown({
 
   const toggle = useCallback(
     function toggle() {
-      if (disabled) {
+      if (disabled || expandDisabled) {
         return
       }
 
       setExpanded((isExpanded) => !isExpanded)
     },
-    [disabled]
+    [disabled, expandDisabled]
   )
 
   const expand = useCallback(
     function toggle() {
-      if (disabled) {
+      if (disabled || expandDisabled) {
         return
       }
 
       setExpanded(true)
     },
-    [disabled]
+    [disabled, expandDisabled]
   )
 
   const collapse = useCallback(
     function toggle() {
-      if (disabled) {
+      if (disabled || expandDisabled) {
         return
       }
 
       setExpanded(false)
     },
-    [disabled]
+    [disabled, expandDisabled]
   )
 
   useEffect(
     function closeWhenDisabled() {
-      if (disabled && expanded) {
+      if ((disabled || expandDisabled) && expanded) {
         setExpanded(false)
       }
     },
-    [disabled, expanded]
+    [disabled, expandDisabled, expanded]
   )
 
   return { expanded, toggle, expand, collapse }

package/src/components/Select/Select.fixtures.ts

@@ -136,7 +136,7 @@ export function useAsyncUsers(): SelectDatasource<{ uuid: string; name: string }
       return new Promise((resolve) => {
         setTimeout(() => {
           resolve(USERS.filter(({ name }) => regex.test(name)))
-        }, 2500)
+        }, 1500)
       })
     },
   }

package/src/components/Select/Select.stories.tsx

@@ -33,10 +33,10 @@ export const Playground: Story<SelectProps> = (args: SelectProps) => {
           <Label htmlFor="select-playground">Select your favorite fruit</Label>
           <Select
             options={FRUITS}
+            placeholder="Select sync"
             {...omit(args, OMITTED_PROPS)}
             id="select-playground"
             name="select-playground"
-            placeholder="Select sync"
           />
         </div>
       </div>
@@ -61,10 +61,10 @@ export const SingleSyncDatasource: Story<SelectProps> = (args: SelectProps) => {
         <div className="flex-1">
           <Label htmlFor="select-single-sync">Select your favorite fruit</Label>
           <Select
+            placeholder="Select sync"
             {...omit(args, OMITTED_PROPS)}
             id="select-single-sync"
             name="select-single-sync"
-            placeholder="Select sync"
             datasources={SINGLE_SYNC_DATASOURCES}
           />
         </div>
@@ -106,10 +106,10 @@ export const SingleCustomOptionRendering: Story<SelectProps> = (args: SelectProp
         <div className="flex-1">
           <Label htmlFor="select-custom-option">Select your favorite fruit</Label>
           <Select
+            placeholder="Select with custom option"
             {...args}
             id="select-custom-option"
             name="select-custom-option"
-            placeholder="Select with custom option"
             datasources={SINGLE_SYNC_DATASOURCES}
           />
         </div>
@@ -166,10 +166,10 @@ export const SingleCustomEmptyRendering: Story<SelectProps> = (args: SelectProps
         <div className="flex-1">
           <Label htmlFor="select-custom-empty">Select your favorite fruit</Label>
           <Select
+            placeholder="Select with custom empty"
             {...omit(args, OMITTED_PROPS)}
             id="select-custom-empty"
             name="select-custom-empyy"
-            placeholder="Select with custom empty"
             datasources={SINGLE_SYNC_DATASOURCES}
             components={{ Empty }}
           />
@@ -209,10 +209,10 @@ export const SingleAsyncDatasource: Story<SelectProps> = (args: SelectProps) =>
         <div className="flex-1">
           <Label htmlFor="select-single-async">Select the project manager</Label>
           <Select
+            placeholder="Select async"
             {...omit(args, OMITTED_PROPS)}
             id="select-single-async"
             name="select-single-async"
-            placeholder="Select async"
             datasources={SINGLE_ASYNC_DATASOURCES}
           />
         </div>
@@ -237,10 +237,10 @@ export const SingleMixedDatasources: Story<SelectProps> = (args: SelectProps) =>
         <div className="flex-1">
           <Label htmlFor="select-mixed">Select your favorite fruit or the project manager</Label>
           <Select
+            placeholder="Select mixed"
             {...omit(args, OMITTED_PROPS)}
             id="select-mixed"
             name="select-mixed"
-            placeholder="Select mixed"
             datasources={SINGLE_MIXED_DATASOURCES}
           />
         </div>
@@ -266,10 +266,10 @@ export const MultiSyncDatasource: Story<SelectProps> = (args: SelectProps) => {
         <div className="flex-1">
           <Label htmlFor="select-multi-sync">Select your favorite fruit</Label>
           <Select
+            placeholder="Select multiple sync"
             {...omit(args, OMITTED_PROPS)}
             id="select-multi-sync"
             name="select-multi-sync"
-            placeholder="Select multiple sync"
             datasources={MULTI_SYNC_DATASOURCES}
           />
         </div>
@@ -294,10 +294,10 @@ export const MultiAsyncDatasource: Story<SelectProps> = (args: SelectProps) => {
         <div className="flex-1">
           <Label htmlFor="select-multi-async">Select the project manager</Label>
           <Select
+            placeholder="Select multiple async"
             {...omit(args, OMITTED_PROPS)}
             id="select-multi-async"
             name="select-multi-async"
-            placeholder="Select multiple async"
             datasources={MULTI_ASYNC_DATASOURCES}
           />
         </div>
@@ -324,10 +324,10 @@ export const MultiMixedDatasource: Story<SelectProps> = (args: SelectProps) => {
             Select your favorite fruit or the project manager
           </Label>
           <Select
+            placeholder="Select multiple mixed"
             {...omit(args, OMITTED_PROPS)}
             id="select-multi-mixed"
             name="select-multi-mixed"
-            placeholder="Select multiple mixed"
             datasources={MULTI_MIXED_DATASOURCES}
           />
         </div>
@@ -383,10 +383,10 @@ export const MultiCustomOptionRendering: Story<SelectProps> = (args: SelectProps
             Select your favorite fruit or the project manager
           </Label>
           <Select
+            placeholder="Select multiple mixed"
             {...omit(args, OMITTED_PROPS)}
             id="select-multi-mixed"
             name="select-multi-mixed"
-            placeholder="Select multiple mixed"
             datasources={MULTI_MIXED_DATASOURCES}
             components={{ Option: MixedCustomOption }}
             value={value}
@@ -457,10 +457,10 @@ export const CreatableSync: Story<SelectProps> = (args: SelectProps) => {
           <Select
             onCreate={handleCreate}
             datasources={SINGLE_SYNC_DATASOURCES}
+            placeholder="Select creatable sync"
             {...args}
             id="select-creatable-sync"
             name="select-creatable-sync"
-            placeholder="Select creatable sync"
           />
         </div>
       </div>
@@ -488,7 +488,7 @@ function handleCreate(query: string): Promise<void | Option> | void | Option {
 
   // Update options
   FRUITS = [...FRUITS, item]
-  
+
   // When the option is returned it will be selected. onChange will be fired with the new value
   return item
 }
@@ -528,10 +528,10 @@ export const CreatableAsync: Story<SelectProps> = (args: SelectProps) => {
             datasources={SINGLE_ASYNC_DATASOURCES}
             onCreate={handleCreate}
             multiple
+            placeholder="Select creatable async"
             {...args}
             id="select-creatable-async"
             name="select-creatable-async"
-            placeholder="Select creatable async"
             disabled={disabled}
           />
         </div>
@@ -573,7 +573,7 @@ function handleCreate(query: string): Promise<void | Option> | void | Option {
     setTimeout(() => {
       // Update options
       USERS = [...USERS, item]
-            
+
       // Enable the component
       setDisabled(false)
 
@@ -615,10 +615,10 @@ export const CustomCreatableOption: Story<SelectProps> = ({ onCreate, ...args }:
         <div className="flex-1">
           <Label htmlFor="select-custom-creatable-option">Select your favorite fruit</Label>
           <Select
+            placeholder="Select with custom creatable option"
             {...args}
             id="select-custom-creatable-option"
             name="select-custom-creatable-option"
-            placeholder="Select with custom creatable option"
             datasources={SINGLE_SYNC_DATASOURCES}
             onChange={(event) => setValue(event.target.value as Option)}
             onCreate={handleCreate}
@@ -656,3 +656,86 @@ const CreatableOption = () => {
     },
   },
 }
+
+const FixedCreatableOption = () => {
+  return (
+    <Select.CreatableOption>
+      <Text variant="body-bold" color="color-accent">
+        Add new...
+      </Text>
+    </Select.CreatableOption>
+  )
+}
+
+export const SelectWithFixedCreatableOption: Story<SelectProps> = ({
+  onCreate,
+  ...args
+}: SelectProps) => {
+  const [value, setValue] = useState<Option | null>(null)
+
+  const handleCreate = useCallback(
+    function handleCreate(query: string) {
+      onCreate?.(query)
+    },
+    [onCreate]
+  )
+
+  return (
+    <div className="flex flex-col space-y-4">
+      <div className="flex flex-row space-x-4" style={{ width: 720 }}>
+        <div className="flex-1">
+          <Label htmlFor="select-custom-creatable-option">Select your favorite fruit</Label>
+          <Select
+            {...args}
+            id="select-custom-creatable-option"
+            name="select-custom-creatable-option"
+            placeholder="Select with custom creatable option"
+            datasources={SINGLE_SYNC_DATASOURCES}
+            onChange={(event) => setValue(event.target.value as Option)}
+            onCreate={handleCreate}
+            value={value as Option}
+            components={{
+              CreatableOption: FixedCreatableOption,
+            }}
+          />
+        </div>
+      </div>
+      <div className="text-sm" style={{ width: 720 }}>
+        <p>Available options:</p>
+        <code>{FRUITS.map(({ label }) => label).join(', ')}</code>
+      </div>
+    </div>
+  )
+}
+
+SelectWithFixedCreatableOption.args = {
+  createOptionPosition: 'first',
+  isValidNewOption: true,
+}
+
+SelectWithFixedCreatableOption.parameters = {
+  docs: {
+    description: {
+      story: `
+\`\`\`jsx
+const CreatableOption = () => {
+  return (
+    <Select.CreatableOption>
+      Add new...
+    </Select.CreatableOption>
+  )
+}
+
+<Select
+  {...args}
+  createOptionPosition="first"
+  isValidNewOption={true}
+  components={{
+    CreatableOption,
+  }}
+/>
+\`\`\`
+      `,
+    },
+  },
+}

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

@@ -22,6 +22,10 @@ const {
 } = composeStories(stories)
 
 async function expandSelect(waitForOptionsToBeAvailable = false) {
+  await waitFor(() => {
+    expect(screen.getByTestId('select-trigger-handle')).toBeEnabled()
+  })
+
   fire.click(screen.getByTestId('select-trigger-handle'))
 
   await waitFor(() => {
@@ -47,24 +51,24 @@ describe('Select', () => {
     })
 
     describe('when disabled', () => {
-      it('does not expand with the available options when search input is clicked', async () => {
+      it('does not expand with the available options when search input is clicked', () => {
         setup({ disabled: true })
 
         expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
         expect(screen.getByTestId('select-trigger-search-field')).toBeDisabled()
 
-        await expandSelect()
+        fire.click(screen.getByTestId('select-trigger-search-field'))
 
         expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
       })
 
-      it('does not expand with the available options when trigger handle is clicked', async () => {
+      it('does not expand with the available options when trigger handle is clicked', () => {
         setup({ disabled: true })
 
         expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
         expect(screen.getByTestId('select-trigger-handle')).toBeDisabled()
 
-        await expandSelect()
+        fire.click(screen.getByTestId('select-trigger-handle'))
 
         expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
       })
@@ -76,12 +80,14 @@ describe('Select', () => {
 
         expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
 
-        fire.click(screen.getByTestId('select-trigger-search-field'))
-
         await waitFor(() => {
-          screen.queryByRole('listbox')
+          expect(screen.getByTestId('select-trigger-handle')).toBeEnabled()
         })
 
+        fire.click(screen.getByTestId('select-trigger-search-field'))
+
+        expect(await screen.findByRole('listbox')).toBeInTheDocument()
+
         await waitFor(() => {
           screen.getAllByRole('option')
         })
@@ -109,13 +115,31 @@ describe('Select', () => {
         }
       })
 
+      it('expands only if a query is typed if the options list is empty', async () => {
+        render(<Playground options={undefined} />)
+
+        const searchInput = screen.getByLabelText('Select your favorite fruit')
+
+        expect(screen.getByTestId('select-trigger-handle')).toBeDisabled()
+        expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+
+        userEvent.type(searchInput, generator.word())
+
+        await selectEvent.expand(searchInput)
+
+        await waitFor(() => {
+          expect(screen.getByTestId('select-trigger-handle')).toBeEnabled()
+          expect(screen.queryByRole('listbox')).toBeInTheDocument()
+        })
+      })
+
       it('shows correct options when options prop change', async () => {
         const { rerender } = render(<Playground options={undefined} />)
 
         const searchInput = screen.getByLabelText('Select your favorite fruit')
-        await selectEvent.expand(searchInput)
 
-        expect(screen.queryByRole('option')).not.toBeInTheDocument()
+        expect(screen.getByTestId('select-trigger-handle')).toBeDisabled()
+        expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
 
         rerender(<Playground options={FRUITS as GenericOption[]} />)
 
@@ -785,6 +809,51 @@ describe('Select', () => {
         })
       }
     )
+
+    it.each([[{ multiple: false }], [{ multiple: true }]])(
+      'renders fixed creatable option when isValidNewOption is passed - %s',
+      async (args) => {
+        setup({ ...args, isValidNewOption: true })
+
+        await expandSelect(false)
+
+        await waitFor(() => {
+          expect(screen.getByText(/add ""/i)).toBeInTheDocument()
+        })
+      }
+    )
+
+    it.each([[{ multiple: false }], [{ multiple: true }]])(
+      'renders creatable option as first item - %s',
+      async (args) => {
+        setup({ ...args, isValidNewOption: true, createOptionPosition: 'first' })
+
+        await expandSelect(true)
+
+        await waitFor(() => {
+          expect(screen.getByText(/add ""/i)).toBeInTheDocument()
+        })
+
+        expect(screen.getAllByTestId('dropdown-menu-item')[0]).toHaveTextContent(/add ""/i)
+      }
+    )
+
+    it.each([[{ multiple: false }], [{ multiple: true }]])(
+      'renders creatable option as last item - %s',
+      async (args) => {
+        setup({ ...args, isValidNewOption: true, createOptionPosition: 'last' })
+
+        await expandSelect(true)
+
+        await waitFor(() => {
+          expect(screen.getByText(/add ""/i)).toBeInTheDocument()
+        })
+
+        const options = screen.getAllByTestId('dropdown-menu-item')
+
+        expect(options[options.length - 1]).toHaveTextContent(/add ""/i)
+      }
+    )
   })
 
   describe('Creatable Async', () => {

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>
     }