nitro-web 0.0.194 → 0.0.196

package/components/partials/form/field.tsx

@@ -29,6 +29,8 @@ type FieldExtraProps = {
   placeholder?: string
   /** title used to find related error messages */
   errorTitle?: string|RegExp
+  /** class names to override the default class names */
+  inputClassName?: string
 }
 type IconWrapperProps = {
   iconPos: 'left' | 'right'
@@ -54,7 +56,7 @@ export const Field = memo(FieldBase, (prev, next) => {
   return isFieldCached(prev, next)
 })
 
-function FieldBase({ state, icon, iconPos: ip, errorTitle, ...props }: FieldProps) {
+function FieldBase({ state, icon, iconPos: ip, errorTitle, inputClassName, ...props }: FieldProps) {
   // `type` must be kept as props.type for TS to be happy and follow the conditions below
   let value!: any
   let Icon!: React.ReactNode
@@ -104,8 +106,9 @@ function FieldBase({ state, icon, iconPos: ip, errorTitle, ...props }: FieldProp
   }
 
   // Classname
-  const inputClassName = getInputClasses({ error, Icon, iconPos, type })
-  const commonProps = { id: id, value: value, className: inputClassName }
+  const inputClasses = getInputClasses({ error, Icon, iconPos, type })
+  const inputClassName2 = inputClassName ? twMerge(inputClasses, inputClassName) : inputClasses.replaceAll(/\(|\)/g, '')
+  const commonProps = { id: id, value: value, className: inputClassName2 }
 
   // Type has to be referenced as props.type for TS to be happy
   if (!type || type == 'text' || type == 'number' || type == 'password' || type == 'email' || type == 'filter' || type == 'search') {
@@ -160,9 +163,11 @@ function getInputClasses({ error, Icon, iconPos, type }: { error?: Error, Icon?:
   const py = 'py-[9px] py-input-y'
   return (
     'block col-start-1 row-start-1 w-full rounded-md bg-white disabled:bg-input-disabled-bg text-input-base outline outline-1 -outline-offset-1 ' +
-    'placeholder:text-input-placeholder focus:outline focus:outline-2 focus:-outline-offset-2 ' + `${py} ${px} ` +
-    (iconPos == 'right' && Icon ? 'pr-[32px] pr-input-x-icon pl-input-x ' : '') +
-    (iconPos == 'left' && Icon ? 'pl-[32px] pl-input-x-icon pr-input-x ' : 'px-input-x ') +
+    'placeholder:text-input-placeholder focus:outline focus:outline-2 focus:-outline-offset-2 (' +
+      `${py} ${px} ` +
+      (iconPos == 'right' && Icon ? 'pr-[32px] pr-input-x-icon pl-input-x ' : '') +
+      (iconPos == 'left' && Icon ? 'pl-[32px] pl-input-x-icon pr-input-x ' : 'px-input-x ') +
+    ')' +
     (iconPos == 'left' && Icon && type == 'color' ? 'indent-[5px] ' : '') +
     (error
       ? 'text-danger-foreground outline-danger focus:outline-danger '

package/components/partials/form/select.tsx

@@ -3,18 +3,17 @@ import { css } from 'twin.macro'
 import { memo, useMemo, Fragment } from 'react'
 import ReactSelect, { 
   components, ControlProps, createFilter, OptionProps, SingleValueProps, ClearIndicatorProps,
-  DropdownIndicatorProps, MultiValueRemoveProps, ClassNamesConfig,
+  DropdownIndicatorProps, MultiValueRemoveProps, // ClassNamesConfig,
   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'
 
 const filterFn = createFilter()
 
-type NitroClassNamesConfig = ClassNamesConfig & { flag?: () => string }
 type GetSelectClassName = {
   name: string
   isFocused?: boolean
@@ -22,6 +21,7 @@ type GetSelectClassName = {
   isDisabled?: boolean
   hasError?: boolean
   usePrefixes?: boolean
+  classNames?: ClassNames
 }
 export type SelectOption = { 
   value: unknown, 
@@ -58,7 +58,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 +69,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 +89,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 +126,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 +147,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 +270,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>
   )
 }
@@ -278,7 +307,7 @@ const selectClassNames = {
     error: 'outline-danger',
     disabled: 'cursor-not-allowed bg-input-disabled-bg',
   },
-  valueContainer: 'gap-1 py-[9px] px-[12px] py-input-y px-input-x', // dont twMerge (input-x is optional)
+  valueContainer: 'gap-1 (py-[9px] px-[12px] py-input-y px-input-x)', // dont twMerge (input-x is optional)
   // Input container objects
   input: {
     base: 'text-input',
@@ -309,14 +338,41 @@ const selectClassNames = {
   },
   // Nitro specific
   flag: 'align-middle text-[1.2em] leading-[1em] mr-1.5 flex-shrink-0',
+} as const
+
+type ClassNames = {
+  // Input container
+  control?: { base?: string, focus?: string, error?: string, disabled?: string }
+  valueContainer?: string
+  // Input container objects
+  input?: { base?: string, error?: string, disabled?: string }
+  multiValue?: string
+  multiValueLabel?: string
+  multiValueRemove?: string
+  placeholder?: string
+  singleValue?: { base?: string, error?: string, disabled?: string }
+  // Icon indicators
+  clearIndicator?: string
+  dropdownIndicator?: string
+  indicatorsContainer?: string
+  indicatorSeparator?: string
+  // Dropdown menu
+  menu?: string
+  groupHeading?: string
+  noOptionsMessage?: string
+  option?: { base?: string, hover?: string, selected?: string }
+  // Nitro specific
+  flag?: 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
+  
+  if (typeof obj == 'string' && obj.includes('(')) return obj.replaceAll(/\(|\)/g, '') // no modifiers & still has group wrappers
+  else if (typeof obj == 'string') return obj // no modifiers
 
   if (usePrefixes) {
     if (obj.focus) output += ' ' + obj.focus.split(' ').map((part: string) => `focus:${part}`).join(' ')
@@ -332,11 +388,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

@@ -503,7 +503,7 @@ export function Styleguide({ className, elements, children, currencies, groups }
               />
             </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.194",
+  "version": "0.0.196",
   "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 🚀",