nitro-web 0.2.21 → 0.2.22

package/components/partials/element/modal.tsx

@@ -7,13 +7,16 @@ type ModalProps = {
   children: React.ReactNode
   className?: string
   rootClassName?: string
+  xClassName?: string
   dismissable?: boolean
   maxWidth?: string
   minHeight?: string
   [key: string]: unknown
 }
 
-export function Modal({ show, setShow, children, maxWidth, minHeight, dismissable = true, className, rootClassName }: ModalProps) {
+export function Modal({ 
+  show, setShow, children, maxWidth, minHeight, dismissable = true, className, rootClassName, xClassName,
+}: ModalProps) {
   const [state, setState] = useState(show ? 'open' : 'close')
   const containerEl = useRef<HTMLDivElement>(null)
   const isFirst = IsFirstRender()
@@ -76,7 +79,7 @@ export function Modal({ show, setShow, children, maxWidth, minHeight, dismissabl
             class={`${twMerge('relative w-full mx-6 mt-4 mb-8 bg-white rounded-lg shadow-lg p-9', className)}`}
           >
             <div 
-              class="absolute top-0 right-0 p-3 m-1 cursor-pointer" 
+              class={twMerge(`absolute top-0 right-0 p-3 m-1 cursor-pointer ${xClassName||''}`)} 
               onClick={() => { if (dismissable) { setShow(false) }}}
             >
               <SvgX1 />

package/components/partials/form/field.tsx

@@ -230,10 +230,10 @@ export function isFieldCached(prev: IsFieldCachedProps, next: IsFieldCachedProps
   const nextState = next.state || {}
   const errorTitle = next.errorTitle || path
 
-  // Check if any prop has changed, except `onChange`/`onInputChange`
+  // Check if any prop has changed, except `onChange`/`onInputChange`/`onSearch`
   const allKeys = new Set([...Object.keys(prev), ...Object.keys(next)])
   for (const k of allKeys) {
-    if (k === 'state' || k === 'onChange' || k === 'onInputChange') continue
+    if (k === 'state' || k === 'onChange' || k === 'onInputChange' || k === 'onSearch') continue
     if (prev[k as keyof typeof prev] !== next[k as keyof typeof next]) {
       // console.log(4, 'changed', path, k)
       return false

package/components/partials/form/select.tsx

@@ -1,12 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { css } from 'twin.macro'
-import { memo, useMemo, useState, useRef, useLayoutEffect, Fragment, FocusEvent, ReactNode } from 'react'
+import { memo, useMemo, useState, useRef, useLayoutEffect, startTransition, Fragment, FocusEvent, ReactNode } from 'react'
 import ReactSelect, { 
   components, ControlProps, createFilter, OptionProps, SingleValueProps, ClearIndicatorProps,
   DropdownIndicatorProps, MultiValueRemoveProps, MultiValueGenericProps, // ClassNamesConfig,
   ValueContainerProps,
   MenuProps,
   InputProps,
+  FilterOptionOption,
 } from 'react-select'
 import { CheckCircleIcon } from '@heroicons/react/20/solid'
 import { ChevronsUpDownIcon, SearchIcon, XIcon } from 'lucide-react'
@@ -25,6 +26,7 @@ type GetSelectClassName = {
   usePrefixes?: boolean
   classNames?: ClassNames
 }
+
 export type SelectOption = { 
   value: unknown, 
   label: string | React.ReactNode, 
@@ -64,8 +66,15 @@ export type SelectProps<IsMulti extends boolean = false> = {
   options: SelectOption[]
   /** The state object to get the value and check errors from **/
   state?: { errors?: Errors, [key: string]: any } // was unknown|unknown[]
-  /** Select variations **/
-  mode?: 'combobox'
+  /** Select variations, combobox is a free text input with a suggestions dropdown, search is a combobox that
+   * selects an option (the parent filters/fetches the options via `onSearch`) **/
+  mode?: 'combobox' | 'search'
+  /** Search only: the typed text, for the parent to filter/fetch `options` with **/
+  onSearch?: (text: string) => void
+  /** Search only: option used to render the value when its missing from `options` (e.g. a value loaded from the api) **/
+  selectedOption?: SelectedOption
+  /** Search only: always drop the typed text on blur (by default its kept until something is selected) **/
+  clearSearch?: boolean
   /** Pass dependencies to break memoization, handy for onChange/onInputChange **/
   deps?: unknown[]
   /** title used to find related error messages */
@@ -91,52 +100,64 @@ export const Select = memo(SelectBase, (prev, next) => {
 }) as <IsMulti extends boolean = false>(props: SelectProps<IsMulti>) => React.ReactElement | null
 
 function SelectBase<IsMulti extends boolean = false>({
-  id, containerId, minMenuWidth, name, prefix='', onChange, options, state, mode, errorTitle, classNames: classNamesProp,
-  showSearchIcon, className, minLenForSearch = 0, hideEmptyMenu = true, hideDropdownIcon, maxLines,
+  id, containerId, minMenuWidth, name, prefix='', onChange, onSearch, options, selectedOption, clearSearch, state, mode,
+  errorTitle, classNames: classNamesProp, showSearchIcon, className, minLenForSearch = 0, hideEmptyMenu = true,
+  hideDropdownIcon, maxLines,
   ...props
 }: SelectProps<IsMulti>) {
   let value: unknown|unknown[]
+  const isCombobox = mode === 'combobox'
+  const isSearch = mode === 'search'
+  const isTextInput = isCombobox || isSearch // both render the value inside the text input
+  const [typed, setTyped] = useState<string | null>(null)
+  const [focused, setFocused] = useState(false)
+  const [pickedFromMenu, setPickedFromMenu] = useState(false) // keeps the menu closed after a selection until typing
+  const picked = useRef<SelectedOption>(null) // last picked option, filtered options wont contain it
   const error = getErrorFromState(state, errorTitle || name)
   if (!name) throw new Error('Select component requires a `name` and `options` prop')
 
-  // Combobox: free text with a suggestions dropdown, the typed text is the value (full-width text-input feel)
-  const isCombobox = mode === 'combobox'
-
   // Multi-selects collapse tags to 2 lines by default, pass 0 (or null) to turn it off
   maxLines = maxLines === undefined ? (props.isMulti ? 2 : undefined) : maxLines
 
   // Get value from value or state
   if (typeof props.value !== 'undefined') value = props.value
   else if (typeof state == 'object') value = deepFind(state, name)
+  const rawValue = value // Raw (unconverted) value, used as the combobox input text
 
-  // Raw (unconverted) value, used as the combobox input text
-  const rawValue = value
+  // Search: the value may sit outside the filtered options, so also look at the last pick/selectedOption
+  const lookup = isSearch ? [...options, picked.current, selectedOption].filter(Boolean) as SelectOption[] : options
 
   // If multi-select, filter options by value
-  if (Array.isArray(value)) value = options.filter(o => (value as unknown[]).includes(o.value))
-  else value = options.find(o => value === o.value)
+  if (Array.isArray(value)) value = lookup.filter(o => (value as unknown[]).includes(o.value))
+  else value = lookup.find(o => value === o.value)
 
   // Input is always controlled if state is passed in
   if (typeof state == 'object' && typeof value == 'undefined') value = ''
   else if (typeof value == 'undefined') value = null // new
 
-  // Combobox: input text (matched option's plain-string label, else raw typed text) + matches, to gate the menu
-  const [focused, setFocused] = useState(false)
-  const [pickedFromMenu, setPickedFromMenu] = useState(false) // keeps the menu closed after a selection until typing
   const valueOption = typeof value == 'object' ? value as SelectOption | null : null
   const comboLabel = valueOption?.labelInput ?? (typeof valueOption?.label == 'string' ? valueOption.label : undefined)
-  const comboInput = comboLabel ?? String(rawValue ?? '')
-  const comboMatches = !isCombobox ? 0 : options.filter((o) => {
-    const label = typeof o.label == 'string' ? o.label : (o.labelSearch || o.labelInput || '')
-    return filterFn({ label: label, value: String(o.value), data: o }, comboInput)
-  }).length
+  // Search shows the value as a normal chip, so the input only ever holds the typed text
+  const comboInput = typed ?? (isSearch ? '' : comboLabel ?? String(rawValue ?? ''))
+
+  // Search: with nothing typed the parent has no options, so fall back to the selection to open the menu on
+  const showSelected = isSearch && !comboInput && !!valueOption && !options.length
+  const menuOptions = showSelected ? [valueOption] : options
+
+  // Open on focus, past minLenForSearch, and (unless hideEmptyMenu is off) only when something matches
+  const comboMenuOpen = isTextInput && focused && !pickedFromMenu
+    && (showSelected || comboInput.length >= minLenForSearch)
+    && (isSearch ? menuOptions.length > 0 : !hideEmptyMenu || options.some((o) => {
+      const label = typeof o.label == 'string' ? o.label : (o.labelSearch || o.labelInput || '')
+      return filterFn({ label: label, value: String(o.value), data: o }, comboInput)
+    }))
 
   // Merge class names (up to 1 level deep)
   const classNames = useMemo(() => {
     const merged = { ...selectClassNames }
-    // Combobox: input spans full width + stretches to full control height (cancels the valueContainer's vertical
+    // Combobox/search: input spans full width + stretches to full control height (cancels the valueContainer's vertical
     // padding) so the whole field is an easy text target, and the text cursor sits on the input, not the control
-    if (isCombobox) {
+    if (isTextInput) {
       const m = merged as ClassNames
       m.input = { ...m.input, base: twMerge(m.input?.base,
         'w-full ![grid-template-columns:0_1fr] cursor-text hover:cursor-text '
@@ -158,14 +179,14 @@ function SelectBase<IsMulti extends boolean = false>({
       }
     }
     return merged
-  }, [classNamesProp, isCombobox])
+  }, [classNamesProp, isTextInput])
 
   return (
     <div 
       css={style} 
       class={'mt-2.5 mb-6 min-w-0 contain-inline-size ' + twMerge(`mt-input-before mb-input-after nitro-select ${className || ''}`)}
-      // Combobox: clicking the (already focused) control reopens the menu after a selection
-      onMouseDown={isCombobox ? () => setPickedFromMenu(false) : undefined}>
+      // Combobox/search: clicking the (already focused) control reopens the menu after a selection
+      onMouseDown={isTextInput ? () => setPickedFromMenu(false) : undefined}>
       <ReactSelect
         /**
          * react-select prop quick reference (https://react-select.com/props#api):
@@ -179,21 +200,19 @@ function SelectBase<IsMulti extends boolean = false>({
          *   menuIsOpen={false}
          */
         {...props}
-        _nitro={{ prefix: prefix, mode: mode, showSearchIcon: showSearchIcon ?? isCombobox, maxLines: maxLines }}
-        key={isCombobox ? name : value as string}
+        _nitro={{ prefix: prefix, mode: mode, showSearchIcon: showSearchIcon ?? isTextInput, maxLines: maxLines }}
+        key={isTextInput ? name : value as string}
         unstyled={true}
         inputId={id || name}
         id={containerId}
-        filterOption={(option, searchText) => {
-          if ((option.data as {fixed?: boolean}).fixed) return true
-          const o = option.data as SelectOption
-          const labelSearch = o.labelSearch || o.labelInput
-          return filterFn(labelSearch ? { ...option, label: labelSearch } : option, searchText)
-        }}
+        filterOption={filterOption}
         menuPlacement="auto"
         minMenuHeight={250}
         onChange={!onChange ? undefined : (o) => {
-          if (isCombobox) setPickedFromMenu(true) // close the menu after picking an option
+          if (isTextInput) {
+            setPickedFromMenu(true) // close the menu after picking an option
+            setTyped(null) // show the picked option's label, not the text that was typed to find it
+          }
           // An array is returned for multi-select
           type OptionType = IsMulti extends true ? SelectOption[] : SelectedOption
           let value: unknown | unknown[] = []
@@ -211,15 +230,21 @@ function SelectBase<IsMulti extends boolean = false>({
             optionCopy = (isObject ? { ...o } : o) as OptionType
           }
 
+          // Search: remember the pick (the filtered options wont contain it) and reset the parent's search
+          if (isSearch) {
+            picked.current = Array.isArray(optionCopy) ? null : optionCopy as SelectedOption
+            onSearch?.('')
+          }
+
           return onChange(
-            { target: { name: name, value: value }}, 
+            { target: { name: name, value: value }},
             optionCopy
           )
         }}
-        options={options}
+        options={menuOptions}
         // maxLines hides overflow chips, so keep selected options in the menu to make them easy to unselect
         {...(maxLines && !('hideSelectedOptions' in props) ? { hideSelectedOptions: false } : {})}
-        value={isCombobox ? (typeof value == 'object' ? value : null) : value}
+        value={isTextInput ? (typeof value == 'object' ? value : null) : value}
         // @ts-expect-error
         classNames={useMemo(() => ({
           // Input container
@@ -256,14 +281,15 @@ function SelectBase<IsMulti extends boolean = false>({
           MultiValueRemove,
           ValueContainer,
           Menu,
-          ...(isCombobox ? { Input: ComboboxInput } : {}),
+          ...(isTextInput ? { Input: ComboboxInput } : {}),
           ...(hideDropdownIcon ? { IndicatorsContainer: () => null } : {}),
           ...props.components as object,
         }}
         // menuIsOpen={!search ? false : undefined}
-        styles={{
-          menu: (base) => ({ 
-            ...base, minWidth: minMenuWidth,
+        styles={useMemo(() => ({
+          menu: (base) => ({
+            ...base, 
+            minWidth: minMenuWidth,
           }),
           // On mobile, the label will truncate automatically, so we want to
           // override that behaviour.
@@ -281,7 +307,7 @@ function SelectBase<IsMulti extends boolean = false>({
             ...base,
             visibility: 'inherit', // RS hardcodes to visblr, inherit visibility from  ancestor
           }),
-        }}
+        }), [minMenuWidth])}
         // menuIsOpen={true}
         // isSearchable={false}
         // isClearable={true}
@@ -289,26 +315,31 @@ function SelectBase<IsMulti extends boolean = false>({
         // isDisabled={true}
         // maxMenuHeight={200}
         // Combobox: bind the input text to the value (typed text is the value), options are just suggestions
-        {...(isCombobox ? {
+        // Search: the value renders as usual (react-select hides it while theres input text), typing filters via onSearch
+        {...(isTextInput ? {
           inputValue: comboInput,
-          controlShouldRenderValue: false,
-          // Gate the menu: needs focus, min input length, and (optionally) a match to avoid the empty "No options" menu.
-          // A menuIsOpen prop hard-overrides this.
-          menuIsOpen: 'menuIsOpen' in props
-            ? props.menuIsOpen as boolean | undefined
-            : focused && !pickedFromMenu && comboInput.length >= minLenForSearch && (!hideEmptyMenu || comboMatches >= 1),
+          controlShouldRenderValue: isSearch,
+          // A menuIsOpen prop hard-overrides the gate above
+          menuIsOpen: 'menuIsOpen' in props ? props.menuIsOpen as boolean | undefined : comboMenuOpen,
+          ...(isSearch ? { filterOption: null } : {}), // the parent has already filtered
           onFocus: (e: FocusEvent<HTMLInputElement>) => {
             setFocused(true); setPickedFromMenu(false);
             (props.onFocus as ((e: FocusEvent<HTMLInputElement>) => void) | undefined)?.(e)
           },
           onBlur: (e: FocusEvent<HTMLInputElement>) => {
-            setFocused(false);
-            (props.onBlur as ((e: FocusEvent<HTMLInputElement>) => void) | undefined)?.(e)
+            setFocused(false)
+            // Combobox state is authoritative once focus leaves, search keeps the typed text for the next focus
+            if (isCombobox || clearSearch) { setTyped(null); if (isSearch) onSearch?.('') }
+            const onBlur = props.onBlur as ((e: FocusEvent<HTMLInputElement>) => void) | undefined
+            onBlur?.(e)
           },
           onInputChange: (v: string, meta: { action: string }) => {
             if (meta.action !== 'input-change') return
+            setTyped(v) // urgent, so the character paints without waiting on the parent
             setPickedFromMenu(false) // typing re-opens the menu
-            onChange?.({ target: { name: name, value: v } }, null as never)
+            startTransition(() => isSearch
+              ? onSearch?.(v)
+              : onChange?.({ target: { name: name, value: v } }, null as never))
           },
         } : {})}
       />
@@ -498,6 +529,14 @@ const MultiValueRemove = (props: MultiValueRemoveProps) => {
   )
 }
 
+const filterOption = (option: FilterOptionOption<unknown>, searchText: string) => {
+  // Match on labelSearch/labelInput when the label isn't plain text, fixed options always show
+  if ((option.data as {fixed?: boolean}).fixed) return true
+  const o = option.data as SelectOption
+  const labelSearch = o.labelSearch || o.labelInput
+  return filterFn(labelSearch ? { ...option, label: labelSearch } : option, searchText)
+}
+
 const selectClassNames = {
   // Based off https://www.jussivirtanen.fi/writing/styling-react-select-with-tailwind
   // Input container

package/components/partials/styleguide.tsx

@@ -55,6 +55,7 @@ export function Styleguide({ className, elements, children, currencies, groups }
   const Button = elements?.Button || ButtonNitro
   const [, setStore] = useTracked()
   const [customerSearch, setCustomerSearch] = useState('')
+  const [countrySearch, setCountrySearch] = useState('')
   const [showModal1, setShowModal1] = useState(false)
 
   // Tip: handy when developing or updating components, you can hide/show the groups you want to see
@@ -69,6 +70,7 @@ export function Styleguide({ className, elements, children, currencies, groups }
       colorsMulti: ['blue', 'green', 'yellow', 'red', 'orange', 'purple'],
       colorsMultiFlex: ['blue', 'green', 'yellow', 'red', 'orange', 'purple'],
       country: 'cd',
+      countrySearch: 'nz',
       currency: 'nzd',
       percent: 1250,
       customer: '1',
@@ -558,6 +560,25 @@ export function Styleguide({ className, elements, children, currencies, groups }
                 ], [])}
               />
             </div>
+            <div>
+              <label for="countrySearch">Search (parent filters, value={state.countrySearch})</label>
+              <Select
+                name="countrySearch"
+                mode="search"
+                minLenForSearch={1}
+                state={state}
+                placeholder="Start typing to search for a country..."
+                isClearable={true}
+                onChange={(e) => onChange(e, setState)}
+                onSearch={setCountrySearch}
+                options={useMemo(() => (!countrySearch ? [] : countryOptions
+                  .filter(o => o.label.toLowerCase().includes(countrySearch.toLowerCase()))
+                  .slice(0, 5)), [countrySearch])}
+                // the filtered options wont contain the stored value, so resolve it here
+                selectedOption={useMemo(() => countryOptions.find(o => o.value === state.countrySearch) || null,
+                  [state.countrySearch])}
+              />
+            </div>
             <div>
               <label for="combobox">Combobox (value={state.combobox})</label>
               <Select

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.2.21",
+  "version": "0.2.22",
   "repository": "github:boycce/nitro-web",
   "homepage": "https://boycce.github.io/nitro-web/",
   "description": "Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀",