nitro-web 0.2.13 → 0.2.15

package/components/partials/form/field.tsx

@@ -9,7 +9,8 @@ import { Errors, type Error } from 'nitro-web/types'
 import { MailIcon, CalendarIcon, FunnelIcon, SearchIcon, EyeIcon, EyeOffIcon, ClockIcon, PaperclipIcon } from 'lucide-react'
 import { memo, useState } from 'react'
 
-type FieldType = 'text' | 'number' | 'password' | 'email' | 'filter' | 'search' | 'textarea' | 'currency' | 'percent' | 'date' | 'color' | 'file'
+type FieldType = 'text' | 'number' | 'password' | 'email' | 'filter' | 'search' | 'textarea' 
+  | 'currency' | 'percent' | 'date' | 'color' | 'file'
 type InputProps = React.InputHTMLAttributes<HTMLInputElement>
 type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
 type FieldExtraProps = {

package/components/partials/form/select.tsx

@@ -1,11 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { css } from 'twin.macro'
-import { memo, useMemo, Fragment } from 'react'
+import { memo, useMemo, useState, Fragment, FocusEvent } from 'react'
 import ReactSelect, { 
   components, ControlProps, createFilter, OptionProps, SingleValueProps, ClearIndicatorProps,
   DropdownIndicatorProps, MultiValueRemoveProps, // ClassNamesConfig,
   ValueContainerProps,
   MenuProps,
+  InputProps,
 } from 'react-select'
 import { CheckCircleIcon } from '@heroicons/react/20/solid'
 import { ChevronsUpDownIcon, SearchIcon, XIcon } from 'lucide-react'
@@ -27,6 +28,8 @@ type GetSelectClassName = {
 export type SelectOption = { 
   value: unknown, 
   label: string | React.ReactNode, 
+  /** Plain-string label shown in the input when selected (needed when `label` is not a string) **/
+  labelInput?: string,
   labelSearch?: string,
   noTruncate?: boolean,
   fixed?: boolean,
@@ -38,6 +41,9 @@ export type SelectOption = {
 
 export type SelectedOption = SelectOption | null
 
+// Options/Control
+// 1. Control value comes from value or state (so if its the option it will be the option.labe;)
+
 /** Select (all other props are passed to react-select) **/
 export type SelectProps<IsMulti extends boolean = false> = {
   /** field name or path on state (used to match errors), e.g. 'date', 'company.email' **/
@@ -59,7 +65,7 @@ export type SelectProps<IsMulti extends boolean = false> = {
   /** The state object to get the value and check errors from **/
   state?: { errors?: Errors, [key: string]: any } // was unknown|unknown[]
   /** Select variations **/
-  mode?: string
+  mode?: 'combobox'
   /** Pass dependencies to break memoization, handy for onChange/onInputChange **/
   deps?: unknown[]
   /** title used to find related error messages */
@@ -68,6 +74,12 @@ export type SelectProps<IsMulti extends boolean = false> = {
   classNames?: ClassNames
   /** Show a search icon instead of the dropdown arrow **/
   showSearchIcon?: boolean
+  /** Combobox only: min input length before the menu opens (0 = disabled) **/
+  minLenForSearch?: number
+  /** Combobox only: hide the menu when nothing matches instead of showing "No options" (default true) **/
+  hideEmptyMenu?: boolean
+  /** Hide the right dropdown icon + its padding (text-field look) **/
+  hideDropdownIcon?: boolean
   /** All other props are passed to react-select **/
   [key: string]: unknown
 }
@@ -77,18 +89,24 @@ 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,
+  id, containerId, minMenuWidth, name, prefix='', onChange, options, state, mode, errorTitle, classNames: classNamesProp,
+  showSearchIcon, className, minLenForSearch = 0, hideEmptyMenu = true, hideDropdownIcon,
   ...props
 }: SelectProps<IsMulti>) {
   let value: unknown|unknown[]
   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'
+
   // Get value from value or state
   if (typeof props.value !== 'undefined') value = props.value
   else if (typeof state == 'object') value = deepFind(state, name)
 
+  // Raw (unconverted) value, used as the combobox input text
+  const rawValue = value
+
   // 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)
@@ -97,9 +115,28 @@ function SelectBase<IsMulti extends boolean = false>({
   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
+
   // 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
+    // padding) so the whole field is an easy text target, and the text cursor sits on the input, not the control
+    if (isCombobox) {
+      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 '
+        + '(-my-input-y -my-[9px]) ([&>input]:!py-input-y [&>input]:!py-[9px])') }
+    }
     for (const key in classNamesProp) {
       const value = classNamesProp[key as keyof ClassNames]
       if (typeof value == 'object') {
@@ -116,10 +153,12 @@ function SelectBase<IsMulti extends boolean = false>({
       }
     }
     return merged
-  }, [classNamesProp])
+  }, [classNamesProp, isCombobox])
 
   return (
-    <div css={style} class={'mt-2.5 mb-6 ' + twMerge(`mt-input-before mb-input-after nitro-select ${className || ''}`)}>
+    <div css={style} class={'mt-2.5 mb-6 ' + 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}>
       <ReactSelect
         /**
          * react-select prop quick reference (https://react-select.com/props#api):
@@ -133,19 +172,21 @@ function SelectBase<IsMulti extends boolean = false>({
          *   menuIsOpen={false}
          */
         {...props}
-        _nitro={{ prefix, mode, showSearchIcon }}
-        key={value as string}
+        _nitro={{ prefix: prefix, mode: mode, showSearchIcon: showSearchIcon ?? isCombobox }}
+        key={isCombobox ? name : value as string}
         unstyled={true}
         inputId={id || name}
         id={containerId}
         filterOption={(option, searchText) => {
           if ((option.data as {fixed?: boolean}).fixed) return true
-          const labelSearch = (option.data as {labelSearch?: string}).labelSearch
+          const o = option.data as SelectOption
+          const labelSearch = o.labelSearch || o.labelInput
           return filterFn(labelSearch ? { ...option, label: labelSearch } : option, searchText)
         }}
         menuPlacement="auto"
         minMenuHeight={250}
         onChange={!onChange ? undefined : (o) => {
+          if (isCombobox) setPickedFromMenu(true) // close the menu after picking an option
           // An array is returned for multi-select
           type OptionType = IsMulti extends true ? SelectOption[] : SelectedOption
           let value: unknown | unknown[] = []
@@ -169,7 +210,7 @@ function SelectBase<IsMulti extends boolean = false>({
           )
         }}
         options={options}
-        value={value}
+        value={isCombobox ? (typeof value == 'object' ? value : null) : value}
         // @ts-expect-error
         classNames={useMemo(() => ({
           // Input container
@@ -205,6 +246,8 @@ function SelectBase<IsMulti extends boolean = false>({
           MultiValueRemove,
           ValueContainer,
           Menu,
+          ...(isCombobox ? { Input: ComboboxInput } : {}),
+          ...(hideDropdownIcon ? { IndicatorsContainer: () => null } : {}),
           ...props.components as object,
         }}
         // menuIsOpen={!search ? false : undefined}
@@ -231,6 +274,29 @@ function SelectBase<IsMulti extends boolean = false>({
         // isMulti={true}
         // isDisabled={true}
         // maxMenuHeight={200}
+        // Combobox: bind the input text to the value (typed text is the value), options are just suggestions
+        {...(isCombobox ? {
+          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),
+          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)
+          },
+          onInputChange: (v: string, meta: { action: string }) => {
+            if (meta.action !== 'input-change') return
+            setPickedFromMenu(false) // typing re-opens the menu
+            onChange?.({ target: { name: name, value: v } }, null as never)
+          },
+        } : {})}
       />
       {error && <div class="mt-1.5 text-xs text-danger-foreground">{error.detail}</div>}
     </div>
@@ -241,9 +307,14 @@ function Menu(props: MenuProps) {
   return props.options.length === 0 ? null : <components.Menu {...props} />
 }
 
+// Combobox: keep the input visible after selecting (react-select hides it to show a value chip we don't render)
+function ComboboxInput(props: InputProps) {
+  return <components.Input {...props} isHidden={false} />
+}
+
 function Control({ children, ...props }: ControlProps) {
   // const selectedOption = props.getValue()[0]
-  const _nitro = (props.selectProps as { _nitro?: { prefix?: string, mode?: string } })?._nitro
+  const _nitro = (props.selectProps as { _nitro?: { prefix?: string, mode?: 'combobox' } })?._nitro
   return (
     <components.Control {...props}>
       {_nitro?.prefix
@@ -263,15 +334,15 @@ function ValueContainer({ children, ...props}: ValueContainerProps) {
 }
 
 function SingleValue({ children, ...props }: SingleValueProps) {
-  const selectedOption = props.getValue()[0] as { labelControl?: string } & SelectOption
+  const selectedOption = props.getValue()[0] as SelectOption
   // @ts-expect-error 
   const flagClassName = props.getClassNames('flag')
 
   return (  
     <components.SingleValue {...props}>
       { 
-        selectedOption?.labelControl
-          ? <Fragment>{selectedOption.labelControl}</Fragment>
+        selectedOption?.labelInput
+          ? <Fragment>{selectedOption.labelInput}</Fragment>
           : <Fragment>
               {selectedOption?.flag && <span className={flagClassName}>{selectedOption.flag}</span>}
               {selectedOption?.IconLeft}
@@ -287,7 +358,7 @@ function SingleValue({ children, ...props }: SingleValueProps) {
 
 function Option(props: OptionProps) {
   const data = props.data as SelectOption
-  // const _nitro = (props.selectProps as { _nitro?: { mode?: string } })?._nitro
+  // const _nitro = (props.selectProps as { _nitro?: { mode?: 'combobox' } })?._nitro
   // @ts-expect-error
   const flagClassName = props.getClassNames('flag')
   return (

package/components/partials/styleguide.tsx

@@ -80,6 +80,7 @@ export function Styleguide({ className, elements, children, currencies, groups }
       calendarSingle: Date.now(),
       calendarRange: [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 8],
       firstName: 'Bruce',
+      combobox: '11',
       tableFilter: '',
       errors: [
         { title: 'address', detail: 'Address is required' },
@@ -102,6 +103,7 @@ export function Styleguide({ className, elements, children, currencies, groups }
       calendarRange: [Date.now(), Date.now() + 1000 * 60 * 60 * 24 * 3.2],
       firstName: 'John',
       tableFilter: '',
+      combobox: '22',
       errors: [
         { title: 'address', detail: 'Address is required' },
       ],
@@ -472,8 +474,7 @@ export function Styleguide({ className, elements, children, currencies, groups }
               <Select
                 // menuIsOpen={true}
                 placeholder="Select or add customer..."
-                name="customer" 
-                mode="customer"
+                name="customer"
                 state={state}
                 onChange={onCustomerInputChange}
                 onInputChange={onCustomerSearch}
@@ -535,6 +536,43 @@ export function Styleguide({ className, elements, children, currencies, groups }
                 ], [])}
               />
             </div>
+            <div>
+              <label for="combobox">JSX label + custom search</label>
+              <Select
+                name="jsxlabel"
+                state={state}
+                onChange={(e) => onChange(e, setState)}
+                menuIsOpen={true}
+                options={useMemo(() => [
+                  { value: '11', label: <div class="inline-block bg-blue-300">Blue</div>, labelSearch: 'BL - blue', noTruncate: true },
+                  { value: '22', label: <div class="inline-block bg-green-300">Green</div>, labelSearch: 'GR - green', noTruncate: true },
+                  { value: '33', label: <div class="inline-block bg-yellow-300">Yellow</div>, labelSearch: 'YL - yellow', noTruncate: true },
+                  { value: '44', label: <div class="inline-block bg-red-300">Red</div>, labelSearch: 'RD - red', noTruncate: true },
+                  { value: '55', label: <div class="inline-block bg-orange-300">Orange</div>, labelSearch: 'OR - orange', noTruncate: true },
+                  { value: '66', label: <div class="inline-block bg-purple-300">Purple</div>, labelSearch: 'PU - purple', noTruncate: true },
+                ], [])}
+              />
+            </div>
+            <div>
+              <label for="combobox">Combobox (value={state.combobox})</label>
+              <Select
+                name="combobox"
+                mode="combobox"
+                minLenForSearch={1}
+                state={state}
+                onChange={(e) => onChange(e, setState)}
+                placeholder="Start typing to search for a color..."
+                // hideDropdownIcon={true}
+                options={useMemo(() => [
+                  { value: '11', label: <div class="inline-block bg-blue-300">Blue</div>, labelInput: 'BL - blue' },
+                  { value: '22', label: <div class="inline-block bg-green-300">Green</div>, labelInput: 'GR - green' },
+                  { value: '33', label: <div class="inline-block bg-yellow-300">Yellow</div>, labelInput: 'YL - yellow' },
+                  { value: '44', label: <div class="inline-block bg-red-300">Red</div>, labelInput: 'RD - red' },
+                  { value: '55', label: <div class="inline-block bg-orange-300">Orange</div>, labelInput: 'OR - orange' },
+                  { value: '66', label: <div class="inline-block bg-purple-300">Purple</div>, labelInput: 'PU - purple' },
+                ], [])}
+              />
+            </div>
           </div>
         </div>
       )}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "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 🚀",