nitro-web 0.0.193 → 0.0.195

package/components/partials/form/select.tsx

@@ -7,7 +7,7 @@ import ReactSelect, {
   ValueContainerProps,
 } from 'react-select'
 import { CheckCircleIcon } from '@heroicons/react/20/solid'
-import { ChevronsUpDownIcon, XIcon } from 'lucide-react'
+import { ChevronsUpDownIcon, SearchIcon, XIcon } from 'lucide-react'
 import { isFieldCached } from 'nitro-web'
 import { getErrorFromState, deepFind, twMerge } from 'nitro-web/util'
 import { Errors } from 'nitro-web/types'
@@ -22,6 +22,7 @@ type GetSelectClassName = {
   isDisabled?: boolean
   hasError?: boolean
   usePrefixes?: boolean
+  classNames?: ClassNames
 }
 export type SelectOption = { 
   value: unknown, 
@@ -58,7 +59,9 @@ export type SelectProps = {
   /** title used to find related error messages */
   errorTitle?: string|RegExp
   /** Extend or override individual react-select part class names — merged with defaults via twMerge **/
-  classNames?: NitroClassNamesConfig
+  classNames?: ClassNames
+  /** Show a search icon instead of the dropdown arrow **/
+  showSearchIcon?: boolean
   /** All other props are passed to react-select **/
   [key: string]: unknown
 }
@@ -67,8 +70,10 @@ export const Select = memo(SelectBase, (prev, next) => {
   return isFieldCached(prev, next)
 })
 
-function SelectBase({ 
-  id, containerId, minMenuWidth, name, prefix='', onChange, options, state, mode='', errorTitle, classNames, ...props 
+function SelectBase({
+  id, containerId, minMenuWidth, name, prefix='', onChange, options, state, mode='', errorTitle, classNames: classNamesProp, 
+  showSearchIcon, className,
+  ...props
 }: SelectProps) {
   let value: unknown|unknown[]
   const error = getErrorFromState(state, errorTitle || name)
@@ -85,33 +90,29 @@ function SelectBase({
   // Input is always controlled if state is passed in
   if (typeof state == 'object' && typeof value == 'undefined') value = ''
 
-  const mergedClassNames = useMemo(() => mergeClassNames({
-    // Input container
-    control: (p) => getSelectClassName({ name: 'control', hasError: !!error, ...p }),
-    valueContainer: () => getSelectClassName({ name: 'valueContainer' }),
-    // Input container objects
-    input: () => getSelectClassName({ name: 'input', hasError: !!error }),
-    multiValue: () => getSelectClassName({ name: 'multiValue' }),
-    multiValueLabel: () => '',
-    multiValueRemove: () => getSelectClassName({ name: 'multiValueRemove' }),
-    placeholder: () => getSelectClassName({ name: 'placeholder' }),
-    singleValue: (p) => getSelectClassName({ name: 'singleValue', hasError: !!error, isDisabled: p.isDisabled }),
-    // Indicators
-    clearIndicator: () => getSelectClassName({ name: 'clearIndicator' }),
-    dropdownIndicator: () => getSelectClassName({ name: 'dropdownIndicator' }),
-    indicatorsContainer: () => getSelectClassName({ name: 'indicatorsContainer' }),
-    indicatorSeparator: () => getSelectClassName({ name: 'indicatorSeparator' }),
-    // Dropmenu
-    menu: () => getSelectClassName({ name: 'menu' }),
-    groupHeading: () => getSelectClassName({ name: 'groupHeading' }),
-    noOptionsMessage: () => getSelectClassName({ name: 'noOptionsMessage' }),
-    option: (p) => getSelectClassName({ name: 'option', ...p }),
-    // Nitro specific
-    flag: () => getSelectClassName({ name: 'flag' }),
-  }, classNames), [!!error, classNames])
+  // Merge class names (up to 1 level deep)
+  const classNames = useMemo(() => {
+    const merged = { ...selectClassNames }
+    for (const key in classNamesProp) {
+      const value = classNamesProp[key as keyof ClassNames]
+      if (typeof value == 'object') {
+        // @ts-expect-error
+        merged[key] = { ...merged[key] }
+        for (const key2 in value) {
+          const value2 = value[key2 as keyof typeof value]
+          // @ts-expect-error
+          merged[key][key2] = twMerge(merged[key][key2], value2)
+        }
+      } else {
+        // @ts-expect-error
+        merged[key] = twMerge(merged[key], value)
+      }
+    }
+    return merged
+  }, [classNamesProp])
 
   return (
-    <div css={style} class={'mt-2.5 mb-6 ' + twMerge(`mt-input-before mb-input-after nitro-select ${props.className || ''}`)}>
+    <div css={style} class={'mt-2.5 mb-6 ' + twMerge(`mt-input-before mb-input-after nitro-select ${className || ''}`)}>
       <ReactSelect
         /**
          * react-select prop quick reference (https://react-select.com/props#api):
@@ -126,7 +127,7 @@ function SelectBase({
          */
         {...props}
         // @ts-expect-error
-        _nitro={{ prefix, mode }}
+        _nitro={{ prefix, mode, showSearchIcon }}
         key={value as string}
         unstyled={true}
         inputId={id || name}
@@ -147,15 +148,40 @@ function SelectBase({
         }}
         options={options}
         value={value}
-        classNames={mergedClassNames}
-        components={{ 
-          Control, 
-          SingleValue, 
+        classNames={useMemo(() => ({
+          // Input container
+          control: (p) => getSelectClassName({ name: 'control', hasError: !!error, ...p, classNames: classNames }),
+          valueContainer: () => getSelectClassName({ name: 'valueContainer', classNames: classNames }),
+          // Input container objects
+          input: () => getSelectClassName({ name: 'input', hasError: !!error, classNames: classNames }),
+          multiValue: () => getSelectClassName({ name: 'multiValue', classNames: classNames }),
+          multiValueLabel: () => '',
+          multiValueRemove: () => getSelectClassName({ name: 'multiValueRemove', classNames: classNames }),
+          placeholder: () => getSelectClassName({ name: 'placeholder', classNames: classNames }),
+          singleValue: (p) => getSelectClassName({ name: 'singleValue', hasError: !!error, isDisabled: p.isDisabled,
+            classNames: classNames }),
+          // Indicators
+          clearIndicator: () => getSelectClassName({ name: 'clearIndicator', classNames: classNames }),
+          dropdownIndicator: () => getSelectClassName({ name: 'dropdownIndicator', classNames: classNames }),
+          indicatorsContainer: () => getSelectClassName({ name: 'indicatorsContainer', classNames: classNames }),
+          indicatorSeparator: () => getSelectClassName({ name: 'indicatorSeparator', classNames: classNames }),
+          // Dropmenu
+          menu: () => getSelectClassName({ name: 'menu', classNames: classNames }),
+          groupHeading: () => getSelectClassName({ name: 'groupHeading', classNames: classNames }),
+          noOptionsMessage: () => getSelectClassName({ name: 'noOptionsMessage', classNames: classNames }),
+          option: (p) => getSelectClassName({ name: 'option', ...p, classNames: classNames }),
+          // Nitro specific
+          flag: () => getSelectClassName({ name: 'flag', classNames: classNames }),
+        }), [!!error, classNames])}
+        components={{
+          Control,
+          SingleValue,
           Option,
-          DropdownIndicator, 
-          ClearIndicator, 
+          DropdownIndicator,
+          ClearIndicator,
           MultiValueRemove,
           ValueContainer,
+          ...props.components as object,
         }}
         styles={{
           menu: (base) => ({ 
@@ -245,9 +271,13 @@ function Option(props: OptionProps) {
 }
 
 const DropdownIndicator = (props: DropdownIndicatorProps) => {
+  const _nitro = (props.selectProps as { _nitro?: { showSearchIcon?: boolean } })?._nitro
+  const isSearch = _nitro?.showSearchIcon
+  const Icon = isSearch ? SearchIcon : ChevronsUpDownIcon
   return (
     <components.DropdownIndicator {...props}>
-      <ChevronsUpDownIcon size={15} className="text-[#b6b8be] text-input-icon -my-0.5 -mx-[1px]" />
+      <Icon size={isSearch ? 13 : 15} strokeWidth={isSearch ? 2.4 : undefined} 
+        className="text-[#b6b8be] text-input-icon -my-0.5 -mx-[1px]" />
     </components.DropdownIndicator>
   )
 }
@@ -309,12 +339,36 @@ const selectClassNames = {
   },
   // Nitro specific
   flag: 'align-middle text-[1.2em] leading-[1em] mr-1.5 flex-shrink-0',
+} as const
+
+type ClassNames = Partial<Omit<typeof selectClassNames, 'control' | 'input' | 'singleValue' | 'option'>> & {
+  control?: {
+    base?: string
+    focus?: string
+    error?: string
+    disabled?: string
+  }
+  input?: {
+    base?: string
+    error?: string
+    disabled?: string
+  }
+  singleValue?: {
+    base?: string
+    error?: string
+    disabled?: string
+  }
+  option?: {
+    base?: string
+    hover?: string
+    selected?: string
+  }
 }
 
-export function getSelectClassName({ name, isFocused, isSelected, isDisabled, hasError, usePrefixes }: GetSelectClassName) {
+export function getSelectClassName({ name, isFocused, isSelected, isDisabled, hasError, usePrefixes, classNames }: GetSelectClassName) {
   // Returns a class list that conditionally includes hover/focus modifier classes, or uses CSS modifiers, e.g. hover:, focus:
   // @ts-expect-error
-  const obj = selectClassNames[name]
+  const obj = classNames?.[name] || selectClassNames[name]
   let output = obj?.base
   if (typeof obj == 'string') return obj // no modifiers
 
@@ -332,11 +386,6 @@ export function getSelectClassName({ name, isFocused, isSelected, isDisabled, ha
   return twMerge(output)
 }
 
-function mergeClassNames(defaults: NitroClassNamesConfig, custom?: NitroClassNamesConfig): NitroClassNamesConfig {
-  if (!custom) return defaults
-  return { ...defaults, ...custom }
-}
-
 const style = css`
   /*
   todo: add these as tailwind classes

package/components/partials/styleguide.tsx

@@ -487,23 +487,23 @@ export function Styleguide({ className, elements, children, currencies, groups }
                   {
                     value: '1', 
                     label: 'Wayne Enterprises',
-                    IconLeft: <Initials initials="WE" className="inline-flex my-[-3px] mr-2 flex-shrink-0" />,
+                    IconLeft: <Initials initials="WE" className="inline-flex my-[-2px] mr-2 flex-shrink-0" />,
                   },
                   {
                     value: '2', 
                     label: 'Iceberg Lounge Limited',
-                    IconLeft: <Initials initials="IL" className="inline-flex my-[-3px] mr-2 flex-shrink-0" />,
+                    IconLeft: <Initials initials="IL" className="inline-flex my-[-2px] mr-2 flex-shrink-0" />,
                   },
                   {
                     value: '3', 
                     label: 'Ace Chemicals Company',
-                    IconLeft: <Initials initials="AC" className="inline-flex my-[-3px] mr-2 flex-shrink-0" />,
+                    IconLeft: <Initials initials="AC" className="inline-flex my-[-2px] mr-2 flex-shrink-0" />,
                   },
                 ], [customerSearch])}
               />
             </div>
             <div>
-              <label for="currency">Currencies</label>
+              <label for="currency">Currencies (and classNames prop)</label>
               <Select 
                 name="currency"
                 state={state} 
@@ -512,6 +512,11 @@ export function Styleguide({ className, elements, children, currencies, groups }
                   { value: 'aud', label: 'Australian Dollar' },
                 ]), [])} 
                 onChange={(e) => onChange(e, setState)}
+                classNames={{
+                  control: {
+                    focus: 'outline-secondary',
+                  },
+                }}
               />
             </div>
             <div>
@@ -522,7 +527,7 @@ export function Styleguide({ className, elements, children, currencies, groups }
                 options={useMemo(() => [
                   { value: 'edit', label: 'Edit' },
                   { value: 'delete', label: 'Delete' },
-                ], [])} 
+                ], [])}
               />
             </div>
           </div>

package/package.json

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