nitro-web 0.2.14 → 0.2.16

package/components/partials/form/select.tsx

@@ -28,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,
@@ -39,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' **/
@@ -110,14 +115,14 @@ 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 (option label when matched, else raw typed text) + matches, to gate the menu
+  // 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 comboInput = typeof value == 'object' && value && typeof (value as SelectOption).label == 'string'
-    ? (value as SelectOption).label as string
-    : String(rawValue ?? '')
+  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 || '')
+    const label = typeof o.label == 'string' ? o.label : (o.labelSearch || o.labelInput || '')
     return filterFn({ label: label, value: String(o.value), data: o }, comboInput)
   }).length
 
@@ -167,14 +172,15 @@ function SelectBase<IsMulti extends boolean = false>({
          *   menuIsOpen={false}
          */
         {...props}
-        _nitro={{ prefix, mode, showSearchIcon: showSearchIcon ?? isCombobox }}
+        _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"
@@ -328,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}

package/components/partials/styleguide.tsx

@@ -10,20 +10,20 @@ import React from 'react'
 
 const perPage = 10
 const allGroups = [
-  // 'Links', 
-  // 'Dropdowns', 
-  // 'Filters', 
-  // 'Button Colors & Sizes', 
-  // 'Button Icons', 
-  // 'Loading Elements', 
-  // 'Varients', 
+  'Links', 
+  'Dropdowns', 
+  'Filters', 
+  'Button Colors & Sizes', 
+  'Button Icons', 
+  'Loading Elements', 
+  'Varients', 
   'Selects', 
-  // 'Inputs', 
-  // 'Date Inputs', 
-  // 'File Inputs & Calendar & Time', 
-  // 'Tables', 
-  // 'Modals & Notifications', 
-  // 'Custom Components',
+  'Inputs', 
+  'Date Inputs', 
+  'File Inputs & Calendar & Time', 
+  'Tables', 
+  'Modals & Notifications', 
+  'Custom Components',
 ] as const
 
 const statusColors = function(status: string) {
@@ -80,7 +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: 'blue',
+      combobox: '11',
       tableFilter: '',
       errors: [
         { title: 'address', detail: 'Address is required' },
@@ -103,7 +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: 'green',
+      combobox: '22',
       errors: [
         { title: 'address', detail: 'Address is required' },
       ],
@@ -537,7 +537,24 @@ export function Styleguide({ className, elements, children, currencies, groups }
               />
             </div>
             <div>
-              <label for="combobox">Combobox (Autocomplete /w or free text)</label>
+              <label for="combobox">JSX label + custom search matching</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"
@@ -547,16 +564,12 @@ export function Styleguide({ className, elements, children, currencies, groups }
                 placeholder="Start typing to search for a color..."
                 // hideDropdownIcon={true}
                 options={useMemo(() => [
-                  { value: 'blue', label: 'Blue' },
-                  { value: 'green', label: 'Green' },
-                  { value: 'yellow', label: 'Yellow' },
-                  { value: 'red', label: 'Red' },
-                  { value: 'orange', label: 'Orange' },
-                  { value: 'purple', label: 'Purple' },
-                  { value: 'pink', label: 'Pink' },
-                  { value: 'gray', label: 'Gray' },
-                  { value: 'black', label: 'Black' },
-                  { value: 'white', label: 'White' },
+                  { 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>

package/package.json

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