nitro-web 0.2.3 → 0.2.5

package/components/partials/element/dropdown.tsx

@@ -142,7 +142,7 @@ export const Dropdown = forwardRef(function Dropdown({
 
   function onMouseDown(e: { key: string, preventDefault: Function, target: EventTarget | null }) {
     if (e.key && e.key != 'Enter') return
-    if (e.key) e.preventDefault() // for button, stops buttons firing twice
+    if (e.key) e.preventDefault() // Enter on a <button> also fires a native click, cancel to avoid toggling twice
 
     if (!isHoverable && !menuIsOpen && ((menuToggles || e.key) || !isActive)) {
       if (isActive && preventCloseOnClickChild && dropdownRef.current?.contains(e.target as Node)) return // keep active
@@ -150,13 +150,20 @@ export const Dropdown = forwardRef(function Dropdown({
     }
   }
 
+  function onClick(e: React.MouseEvent) {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
   function onItemClick(option: { onClick?: Function, preventCloseOnClick?: boolean }, e: React.MouseEvent) {
     if (option.onClick) option.onClick(e, option)
     if (!menuIsOpen && !option?.preventCloseOnClick) setIsActive(!isActive)
   }
 
   return (
-    <div 
+    <div
+      ref={dropdownRef} 
+      css={style}
       class={
         `relative is-${direction || dir}` + // until hovered, show the original direction to prevent scrollbars
         (isHoverable ? ' is-hoverable' : '') +
@@ -166,28 +173,36 @@ export const Dropdown = forwardRef(function Dropdown({
         ' nitro-dropdown' +
         (className ? ` ${className}` : '')
       }
-      // When the dropdown is inside a link, prevent click propagation
-      onClick={(e) => { e.preventDefault() }}
-      // When the dropdown is inside a link, prevent auto <a> focus propagation (for the window listener)
-      onMouseDown={(e) => { e.preventDefault() }}
-      ref={dropdownRef} 
-      css={style}
     >
       {
         (Array.isArray(children) ? children : [children]).map((el, key) => {
           const onKeyDown = onMouseDown 
           if (!el.type) throw new Error('Dropdown component requires a valid child element')
-          return cloneElement(el, { key, onMouseDown, onKeyDown }) // adds onClick
+          return cloneElement(el, { key, onMouseDown, onKeyDown, onClick })
         })
       }
       <ul
-        style={{ 
-          minWidth: minWidth, 
-          maxHeight: maxHeight, 
+        // Mousedown on non-focusable menu content now focuses the ul instead of escaping to parent link row,
+        // so the window 'focus' listener doesn't close the menu early
+        tabIndex={-1}
+        // Keep mousedown from bubbling to parent row handlers (focus containment is handled by tabIndex above)
+        onMouseDown={(e: React.MouseEvent) => e.stopPropagation()}
+        onClick={(e: React.MouseEvent) => {
+          // Keep menu clicks from reaching parent row click handlers
+          e.stopPropagation()
+          // Cancel parent <a> row navigation, unless a link INSIDE the menu was clicked
+          // (closest() doesn't stop at the ul, so check the matched link is contained within it)
+          const link = (e.target as HTMLElement).closest('a[href]')
+          if (!link || !e.currentTarget.contains(link)) e.preventDefault()
+        }}
+        style={{
+          minWidth: minWidth,
+          maxHeight: maxHeight,
           ...(maxHeight ? { overflow: 'auto' } : {}),
         }}
-        class={
-          twMerge(`${menuStyle} ${ready ? 'is-ready' : ''} absolute invisible opacity-0 select-none min-w-full z-[1] ${menuClassName||''}`)}
+        class={twMerge(
+          `${menuStyle} ${ready ? 'is-ready' : ''} absolute invisible opacity-0 select-none outline-none min-w-full z-[1] ${menuClassName||''}`
+        )}
       >
         {menuContent}
         {

package/components/partials/element/table.tsx

@@ -26,8 +26,10 @@ export type TableRow = {
 export type TableProps<T> = {
   // todo: put the classnames into a single object
   columns: TableColumn[]
-  rows: T[]
   generateTd: (col: TableColumn, row: T, i: number, isLast: boolean) => JSX.Element | null
+  rows: T[]
+  // Optional settings
+  addOverflowScroll?: boolean
   generateCheckboxActions?: (selectedRowIds: string[], setSelectedRowIds: (selectedRowIds: string[]) => void) => JSX.Element | null
   headerHeightMin?: number
   rowHeightMin?: number
@@ -39,7 +41,10 @@ export type TableProps<T> = {
   rowLink?: (row: T) => string
   columnGap?: number
   columnPaddingX?: number
+  checkboxSize?: number
+  // Class names
   className?: string
+  scrollContainerClassName?: string
   tableClassName?: string
   rowClassName?: string
   rowClassNameFn?: (row: T, i: number) => string
@@ -48,8 +53,8 @@ export type TableProps<T> = {
   columnSelectedClassName?: string
   columnHeaderClassName?: string
   checkboxClassName?: string
-  checkboxSize?: number
   loadingOverlayClassName?: string
+  // Loading
   isLoading?:boolean
   loadingMessage?: string
   showLoadingInline?: boolean|JSX.Element
@@ -57,22 +62,26 @@ export type TableProps<T> = {
 }
 
 export function Table<T extends TableRow>({ 
-  rows, 
   columns: columnsProp, 
-  generateTd, 
+  generateTd,
+  rows,
+  // Optional settings
+  addOverflowScroll,
+  checkboxSize=16,
+  columnGap=11,
+  columnPaddingX=11,
   generateCheckboxActions,
   headerHeightMin=40,
-  rowHeightMin=48, 
   rowContentHeightMax, 
-  rowLinesMax, 
-  rowSideColor,
   rowGap=0,
-  rowOnClick,
+  rowHeightMin=48, 
+  rowLinesMax, 
   rowLink,
-  columnGap=11,
-  columnPaddingX=11,
+  rowOnClick,
+  rowSideColor,
   // Class names
   className,
+  scrollContainerClassName,
   tableClassName,
   rowClassName,
   rowClassNameFn,
@@ -81,7 +90,6 @@ export function Table<T extends TableRow>({
   columnSelectedClassName,
   columnHeaderClassName,
   checkboxClassName,
-  checkboxSize=16,
   loadingOverlayClassName,
   // Loading
   isLoading=false,
@@ -161,190 +169,192 @@ export function Table<T extends TableRow>({
   }, [rowSideColor, columnPaddingX, columnGap])
 
   return (
-    <div 
-      style={{ marginTop: -rowGap }}
-      className={twMerge('overflow-x-auto thin-scrollbar', className)}
-    >
+    <div className={className}>
       <div 
-        style={{ borderSpacing: `0 ${rowGap}px` }}
-        className={twMerge('table w-full border-separate', showLoadingOverlay ? 'relative' : '', tableClassName)}
+        style={{ marginTop: -rowGap, marginBottom: -rowGap }} 
+        className={twMerge(addOverflowScroll ? 'overflow-x-auto thin-scrollbar' : '', scrollContainerClassName)}
       >
-        {/* Thead row */}
-        <div className="table-row relative">
-          {
-            columns.map((col, j) => {
-              const disableSort = col.disableSort || selectedRowIds.length
-              const { pl, pr } = getColumnPadding(j, undefined, 'thead')
+        <div 
+          style={{ borderSpacing: `0 ${rowGap}px` }}
+          className={twMerge('table w-full border-separate', showLoadingOverlay ? 'relative' : '', tableClassName)}
+        >
+          {/* Thead row */}
+          <div className="table-row relative">
+            {
+              columns.map((col, j) => {
+                const disableSort = col.disableSort || selectedRowIds.length
+                const { pl, pr } = getColumnPadding(j, undefined, 'thead')
 
-              if (col.isHidden) return <Fragment key={j} />
-              return (
-                <div
-                  key={j}
-                  onClick={disableSort ? undefined : () => onSort(col)}
-                  style={{ height: headerHeightMin, minWidth: col.minWidth, paddingLeft: pl, paddingRight: pr }}
-                  className={twMerge(
-                    _columnClassName,
-                    'h-auto text-sm font-medium border-t-1',
-                    disableSort ? '' : 'cursor-pointer select-none',
-                    getAlignClass(col.align),
-                    columnClassName,
-                    columnHeaderClassName,
-                    columnClassNameFn ? columnClassNameFn(col, undefined, j) : '',
-                    col.className
-                  )}
-                >
+                if (col.isHidden) return <Fragment key={j} />
+                return (
                   <div
-                    style={{ maxHeight: rowContentHeightMax }}
+                    key={j}
+                    onClick={disableSort ? undefined : () => onSort(col)}
+                    style={{ height: headerHeightMin, minWidth: col.minWidth, paddingLeft: pl, paddingRight: pr }}
                     className={twMerge(
-                      col.value == 'checkbox' ? 'relative' : getLineClampClassName(col.rowLinesMax),
-                      rowContentHeightMax ? 'overflow-hidden' : '',
-                      col.overflow ? 'overflow-visible' : '',
-                      col.innerClassName
+                      _columnClassName,
+                      'h-auto text-sm font-medium border-t-1',
+                      disableSort ? '' : 'cursor-pointer select-none',
+                      getAlignClass(col.align),
+                      columnClassName,
+                      columnHeaderClassName,
+                      columnClassNameFn ? columnClassNameFn(col, undefined, j) : '',
+                      col.className
                     )}
-                  > 
-                    {
-                      col.value == 'checkbox'
-                        ? <Fragment>
-                            <Checkbox 
-                              size={checkboxSize}
-                              name={`checkbox-all-${rand}`}
-                              hitboxPadding={5}
-                              checked={rows.length > 0 && selectedRowIds.length === rows.length}
-                              className='!m-0 py-[5px]' // py-5 is required for hitbox (restricted to tabel cell height)
-                              checkboxClassName={twMerge('border-foreground shadow-[0_1px_2px_0px_#0000001c]', checkboxClassName)}
-                              onChange={(e) => onSelect('all', e.target.checked)}
-                            />
-                            <div 
-                              className={`${selectedRowIds.length ? 'block' : 'hidden'} [&>*]:absolute [&>*]:inset-y-0 [&>*]:left-[35px] [&>*]:z-10 whitespace-nowrap`}
-                            >
-                              {generateCheckboxActions && generateCheckboxActions(selectedRowIds, setSelectedRowIds)}
-                            </div>
-                          </Fragment>
-                        : <span className={twMerge(
-                            'flex items-center gap-x-2 transition-opacity',
-                            selectedRowIds.length ? 'opacity-0' : '',
-                            getAlignClass(col.align, true)
-                          )}>
-                            <span>{col.label}</span>
-                            {
-                              (!col.disableSort && sortBy == col.sortByValue) 
-                                ? (sort == '1' 
-                                    ? <ChevronDownIcon class='shrink-0 size-[16px]' /> 
-                                    : <ChevronUpIcon class='shrink-0 size-[16px]' />
-                                  )
-                                : col.align == 'left' && <div class='size-[16px] shrink-0' /> // prevent layout shift on sort
-                            }
-                          </span>
-                    }
-                  </div>
-                </div>
-              )
-            })
-          }
-        </div>
-        {/* Tbody rows */}
-        {
-          rowsToRender.map((row: T, i: number) => {
-            const isSelected = selectedRowIds.includes(row._id || '')
-            const Element = (rowLink ? Link : 'div') as React.ElementType
-            const extraProps = rowLink ? { to: rowLink(row) } : { onClick: rowOnClick ? () => rowOnClick(row) : undefined }
-            return (
-              <Element
-                {...extraProps}
-                key={`${row._id}-${i}`}
-                id={`row-${row._id}-${i}`}
-                className={twMerge(
-                  `table-row relative ${(rowOnClick || rowLink) ? 'cursor-pointer' : ''} ${isSelected ? 'is-selected' : ''}`,
-                  rowClassName,
-                  rowClassNameFn ? rowClassNameFn(row, i) : ''
-                )}
-              >
-                {columns.map((col, j) => {
-                  const rowType = row._id ? 'row' : isLoading ? 'loading' : 'empty'
-                  const { pl, pr, sideColor } = getColumnPadding(j, isLoading ? undefined : row, rowType)
-                  if (col.isHidden) return <Fragment key={j} />
-                  return (
+                  >
                     <div
-                      key={j}
-                      style={{ height: rowHeightMin, paddingLeft: pl, paddingRight: pr }}
+                      style={{ maxHeight: rowContentHeightMax }}
                       className={twMerge(
-                        _columnClassName,
-                        getAlignClass(col.align),
-                        columnClassName,
-                        columnClassNameFn ? columnClassNameFn(col, row, i) : '',
-                        col.className,
-                        isSelected ? `bg-gray-50 ${columnSelectedClassName||''}` : ''
+                        col.value == 'checkbox' ? 'relative' : getLineClampClassName(col.rowLinesMax),
+                        rowContentHeightMax ? 'overflow-hidden' : '',
+                        col.overflow ? 'overflow-visible' : '',
+                        col.innerClassName
                       )}
-                    >
-                      <div 
-                        // pl:sideColorPadding was originally here
-                        style={{ maxHeight: rowContentHeightMax }} 
+                    > 
+                      {
+                        col.value == 'checkbox'
+                          ? <Fragment>
+                              <Checkbox 
+                                size={checkboxSize}
+                                name={`checkbox-all-${rand}`}
+                                hitboxPadding={5}
+                                checked={rows.length > 0 && selectedRowIds.length === rows.length}
+                                className='!m-0 py-[5px]' // py-5 is required for hitbox (restricted to tabel cell height)
+                                checkboxClassName={twMerge('border-foreground shadow-[0_1px_2px_0px_#0000001c]', checkboxClassName)}
+                                onChange={(e) => onSelect('all', e.target.checked)}
+                              />
+                              <div 
+                                className={`${selectedRowIds.length ? 'block' : 'hidden'} [&>*]:absolute [&>*]:inset-y-0 [&>*]:left-[35px] [&>*]:z-10 whitespace-nowrap`}
+                              >
+                                {generateCheckboxActions && generateCheckboxActions(selectedRowIds, setSelectedRowIds)}
+                              </div>
+                            </Fragment>
+                          : <span className={twMerge(
+                              'flex items-center gap-x-2 transition-opacity',
+                              selectedRowIds.length ? 'opacity-0' : '',
+                              getAlignClass(col.align, true)
+                            )}>
+                              <span>{col.label}</span>
+                              {
+                                (!col.disableSort && sortBy == col.sortByValue) 
+                                  ? (sort == '1' 
+                                      ? <ChevronDownIcon class='shrink-0 size-[16px]' /> 
+                                      : <ChevronUpIcon class='shrink-0 size-[16px]' />
+                                    )
+                                  : col.align == 'left' && <div class='size-[16px] shrink-0' /> // prevent layout shift on sort
+                              }
+                            </span>
+                      }
+                    </div>
+                  </div>
+                )
+              })
+            }
+          </div>
+          {/* Tbody rows */}
+          {
+            rowsToRender.map((row: T, i: number) => {
+              const isSelected = selectedRowIds.includes(row._id || '')
+              const Element = (rowLink ? Link : 'div') as React.ElementType
+              const extraProps = rowLink ? { to: rowLink(row) } : { onClick: rowOnClick ? () => rowOnClick(row) : undefined }
+              return (
+                <Element
+                  {...extraProps}
+                  key={`${row._id}-${i}`}
+                  id={`row-${row._id}-${i}`}
+                  className={twMerge(
+                    `table-row relative ${(rowOnClick || rowLink) ? 'cursor-pointer' : ''} ${isSelected ? 'is-selected' : ''}`,
+                    rowClassName,
+                    rowClassNameFn ? rowClassNameFn(row, i) : ''
+                  )}
+                >
+                  {columns.map((col, j) => {
+                    const rowType = row._id ? 'row' : isLoading ? 'loading' : 'empty'
+                    const { pl, pr, sideColor } = getColumnPadding(j, isLoading ? undefined : row, rowType)
+                    if (col.isHidden) return <Fragment key={j} />
+                    return (
+                      <div
+                        key={j}
+                        style={{ height: rowHeightMin, paddingLeft: pl, paddingRight: pr }}
                         className={twMerge(
-                          rowContentHeightMax ? 'overflow-hidden' : '',
-                          getLineClampClassName(col.rowLinesMax),
-                          col.overflow ? 'overflow-visible' : '',
-                          col.innerClassName
+                          _columnClassName,
+                          getAlignClass(col.align),
+                          columnClassName,
+                          columnClassNameFn ? columnClassNameFn(col, row, i) : '',
+                          col.className,
+                          isSelected ? `bg-gray-50 ${columnSelectedClassName||''}` : ''
                         )}
                       >
-                        {
-                          // Side color
-                          sideColor && 
-                          <div 
-                            className={`absolute top-0 left-0 h-full ${sideColor?.className||''}`} 
-                            style={{ width: sideColor.width }}
-                          />
-                        }
-                        {
-                          // Rows (content hidden when loading inline)
-                          row._id &&
-                          <div className={isLoading && showLoadingInline ? 'opacity-0 pointer-events-none' : ''}>
-                            {
-                              col.value == 'checkbox'
-                                ? <Checkbox 
-                                    size={checkboxSize} 
-                                    name={`checkbox-${row._id}`} 
-                                    onChange={(e) => onSelect(row?._id || '', e.target.checked)}
-                                    checked={selectedRowIds.includes(row?._id || '')}
-                                    onClick={(e) => e.stopPropagation()}
-                                    hitboxPadding={5}
-                                    className='!m-0 py-[5px]' // py-5 is required for hitbox (restricted to tabel cell height)
-                                    checkboxClassName={twMerge('border-foreground shadow-[0_1px_2px_0px_#0000001c]', checkboxClassName)}
-                                  />
-                                : generateTd(col, row, i, i == rows.length - 1)
-                            }
-                          </div>
-                        }
-                        {
-                          // Show "no records" or "loading" text in the first column
-                          j == 0 && (!row._id || isLoading) &&
-                          <div className={'absolute top-0 h-full flex items-center justify-center gap-3 text-sm text-gray-500'}>
-                            {
-                              (!row._id && !isLoading) ? (
-                                'No records found.' 
-                              ) : (!row._id && isLoading && showLoadingInline === true) ? (
-                                <Fragment>
-                                  <Spinner className="border-gray-500" />
-                                  <LoadingWithDots message={loadingMessage} />
-                                </Fragment>
-                              ) : (!row._id && isLoading && showLoadingInline) ? (
-                                showLoadingInline
-                              ) : null
-                            }
-                          </div>
-                        }
+                        <div 
+                          // pl:sideColorPadding was originally here
+                          style={{ maxHeight: rowContentHeightMax }} 
+                          className={twMerge(
+                            rowContentHeightMax ? 'overflow-hidden' : '',
+                            getLineClampClassName(col.rowLinesMax),
+                            col.overflow ? 'overflow-visible' : '',
+                            col.innerClassName
+                          )}
+                        >
+                          {
+                            // Side color
+                            sideColor && 
+                            <div 
+                              className={`absolute top-0 left-0 h-full ${sideColor?.className||''}`} 
+                              style={{ width: sideColor.width }}
+                            />
+                          }
+                          {
+                            // Rows (content hidden when loading inline)
+                            row._id &&
+                            <div className={isLoading && showLoadingInline ? 'opacity-0 pointer-events-none' : ''}>
+                              {
+                                col.value == 'checkbox'
+                                  ? <Checkbox 
+                                      size={checkboxSize} 
+                                      name={`checkbox-${row._id}`} 
+                                      onChange={(e) => onSelect(row?._id || '', e.target.checked)}
+                                      checked={selectedRowIds.includes(row?._id || '')}
+                                      onClick={(e) => e.stopPropagation()}
+                                      hitboxPadding={5}
+                                      className='!m-0 py-[5px]' // py-5 is required for hitbox (restricted to tabel cell height)
+                                      checkboxClassName={twMerge('border-foreground shadow-[0_1px_2px_0px_#0000001c]', checkboxClassName)}
+                                    />
+                                  : generateTd(col, row, i, i == rows.length - 1)
+                              }
+                            </div>
+                          }
+                          {
+                            // Show "no records" or "loading" text in the first column
+                            j == 0 && (!row._id || isLoading) &&
+                            <div className={'absolute top-0 h-full flex items-center justify-center gap-3 text-sm text-gray-500'}>
+                              {
+                                (!row._id && !isLoading) ? (
+                                  'No records found.' 
+                                ) : (!row._id && isLoading && showLoadingInline === true) ? (
+                                  <Fragment>
+                                    <Spinner className="border-gray-500" />
+                                    <LoadingWithDots message={loadingMessage} />
+                                  </Fragment>
+                                ) : (!row._id && isLoading && showLoadingInline) ? (
+                                  showLoadingInline
+                                ) : null
+                              }
+                            </div>
+                          }
+                        </div>
                       </div>
-                    </div>
-                  )
-                })}
-              </Element>
-            )
-          })
-        }
-        { 
-          (isLoading && showLoadingOverlay === true) 
-            ? <LoadingOverlay className={twMerge('m-[1px]', loadingOverlayClassName)} message={loadingMessage} /> 
-            : (isLoading && showLoadingOverlay) ? showLoadingOverlay : null
-        }
+                    )
+                  })}
+                </Element>
+              )
+            })
+          }
+          { 
+            (isLoading && showLoadingOverlay === true) 
+              ? <LoadingOverlay className={twMerge('m-[1px]', loadingOverlayClassName)} message={loadingMessage} /> 
+              : (isLoading && showLoadingOverlay) ? showLoadingOverlay : null
+          }
+        </div>
       </div>
     </div>
   )

package/components/partials/styleguide.tsx

@@ -220,7 +220,10 @@ export function Styleguide({ className, elements, children, currencies, groups }
       case 'actions':
         return (
           <Dropdown 
-            options={[{ label: 'Set Status' }, { label: 'Delete' }]} 
+            options={[
+              { label: 'Set Status', onClick: () => { console.log('set', row._id) } }, 
+              { label: 'Delete', onClick: () => { console.log('remove', row._id) } },
+            ]} 
             dir={rows.slice(0, perPage).length - 3 < i ? 'top-right' : 'bottom-right'} 
             minWidth={100}
           >
@@ -701,51 +704,64 @@ export function Styleguide({ className, elements, children, currencies, groups }
             />
           </div>
           <Table
-            rows={rows.slice(0, perPage)}
+            className="mb-6"
             columns={thead}
-            rowSideColor={(row) => ({ className: row?.status == 'pending' ? 'bg-yellow-400' : '', width: 5 })}
             generateCheckboxActions={generateCheckboxActions}
             generateTd={generateTd}
-            className="mb-6"
+            rowSideColor={(row) => ({ className: row?.status == 'pending' ? 'bg-yellow-400' : '', width: 5 })}
+            rows={rows.slice(0, perPage)}
           />
           <Table
-            rows={[]}
+            className="mb-6"
             columns={thead}
-            rowSideColor={(row) => ({ className: row?.status == 'pending' ? 'bg-yellow-400' : '', width: 5 })}
             generateCheckboxActions={generateCheckboxActions}
             generateTd={generateTd}
-            className="mb-6"
             isLoading={true}
+            rowSideColor={(row) => ({ className: row?.status == 'pending' ? 'bg-yellow-400' : '', width: 5 })}
+            rows={[]}
           />
           <Table
-            rows={[]}
+            className="mb-6"
             columns={thead}
-            rowSideColor={(row) => ({ className: row?.status == 'pending' ? 'bg-yellow-400' : '', width: 5 })}
             generateCheckboxActions={generateCheckboxActions}
             generateTd={generateTd}
-            className="mb-6"
             isLoading={true}
-            showLoadingOverlay={false}
+            rowSideColor={(row) => ({ className: row?.status == 'pending' ? 'bg-yellow-400' : '', width: 5 })}
+            rows={[]}
             showLoadingInline={true}
+            showLoadingOverlay={false}
           />
           <Table
-            rows={rows.slice(0, 2).map(row => ({ ...row, _id: row._id + '1' }))}
+            className="mb-6"
             columns={thead}
-            rowLinesMax={1}
+            generateCheckboxActions={generateCheckboxActions}
+            generateTd={generateTd}
+            rowLink={(row) => `#/table-link/${row?._id}`}
+            rowSideColor={(row) => ({ className: row?.status == 'pending' ? 'bg-yellow-400' : '', width: 5 })}
+            rows={rows.slice(0, 1).map(row => ({ ...row, _id: '1_' + row._id }))}
+          />
+          <Table
+            className="mb-6"
+            columns={thead}
+            generateCheckboxActions={generateCheckboxActions}
+            generateTd={generateTd}
             headerHeightMin={35}
             rowGap={8}
             rowHeightMin={42}
+            rowLinesMax={1} 
+            rowOnClick={useCallback((row: QuoteExample) => {
+              console.log('row clicked', row?._id)
+              setStore((s) => ({ ...s, message: `Row ${row?._id} clicked` }))
+            }, [setStore])}
             rowSideColor={(row) => ({ className: `rounded-l-xl ${statusColors(row?.status as string)}`, width: 10 })}
-            rowOnClick={useCallback((row: QuoteExample) => {setStore((s) => ({ ...s, message: `Row ${row?._id} clicked` }))}, [setStore])}
-            generateCheckboxActions={generateCheckboxActions}
-            generateTd={generateTd}
-            className="mb-5"
-            tableClassName="rounded-3px"
-            rowClassName="[&:hover>div]:bg-gray-50"
+            rows={rows.slice(0, 2).map(row => ({ ...row, _id: '2_' + row._id }))}
+
+            checkboxClassName="rounded-[2px] shadow-none"
             columnClassName="border-t-1 first:rounded-l-xl last:rounded-r-xl"
-            columnSelectedClassName="bg-gray-50 border-indigo-300"
             columnHeaderClassName="text-gray-500 text-2xs uppercase border-none"
-            checkboxClassName="rounded-[2px] shadow-none"
+            columnSelectedClassName="bg-gray-50 border-indigo-300"
+            rowClassName="[&:hover>div]:bg-gray-50"
+            tableClassName="rounded-3px"
           />
         </div>
       )}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "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 🚀",
@@ -64,7 +64,7 @@
   },
   "peerDependencies": {
     "@stripe/stripe-js": "^1.34.0",
-    "monastery": "^4.0.1",
+    "monastery": "^4.0.6",
     "stripe": "^9.16.0"
   },
   "_peers-are-packages-that-will-be-used-in-the-host-repo-too": "",

package/server/router.js

@@ -9,7 +9,7 @@ import expressFileUpload from 'express-fileupload'
 import express from 'express'
 import bodyParser from 'body-parser'
 import sortRouteAddressesNodeps from 'sort-route-addresses-nodeps'
-
+import { formatDuplicateKeyError } from 'monastery'
 import { sendEmail } from 'nitro-web/server'
 import * as util from 'nitro-web/util'
 
@@ -177,17 +177,6 @@ function setupErrorResponses (expressApp) {
     serverError: function(a, b) { error.call(this, a, b, 500) },
   })
 
-  function duplicateKeyIndexAndValue(error) {
-    // https://github.com/Automattic/mongoose/issues/2129#issuecomment-280507821
-    // E.g. E11000 duplicate key error collection: anamata-production.person index:
-    //   email_1 dup key: { email: "person1@gmail.com" }
-    let regex = /index: (?:.*\.)?\$?(?:([_a-z0-9]*)(?:_\d*)|([_a-z0-9]*))\s*dup key/i
-    let match = error.message.match(regex)
-    let index = match[1] || match[2]
-    let value = (error.message.match(/.*{.*?: (.*) }/i)[1]||'').replace(/"/g, '')
-    return [index, value]
-  }
-
   function error(error, detail, status) {
     /**
      * Returns a formatted error
@@ -218,11 +207,15 @@ function setupErrorResponses (expressApp) {
       else errors = [{ detail: error || _detail }]
 
     // Mongo error
-    } else if (util.isObject(error) && (error.name||'').match(/Mongo|BulkWriteError/)) {
-      if (error.code == 11000) {
-        let [name] = duplicateKeyIndexAndValue(error)
-        if (name == 'email') errors = [{ title: 'email', detail: 'That email is already linked to an account.' }]
-        else errors = [{ title: name, detail: `Cannot insert duplicate values for "${name}".` }]
+    } else if (util.isObject(error) && (error.name || '').match(/Mongo|BulkWriteError/)) {
+      // Below is thrown by Monastery if a custom message is not used, e.g. `{ ..., messages : { email: { unique: '...' } } }`
+      const formattedDuplicateKeyError = formatDuplicateKeyError(undefined, error)
+      if (formattedDuplicateKeyError) {
+        errors = formattedDuplicateKeyError
+        const hasRawMessage = errors[0].detail.includes('E11000 duplicate key')
+        // Add default messages if no custom message is used from definition.messages
+        if (hasRawMessage && errors[0].title == 'email') errors[0].detail = 'That email is already linked to an account.'
+        else if (hasRawMessage) errors[0].detail = `Cannot insert duplicate values for "${errors[0].title}".`
       } else {
         errors = [{ title: 'mongo', detail: error.message }]
       }

package/types/server/router.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../server/router.js"],"names":[],"mappings":"AAoCA,uGAAuG;AACvG,0CADc,OAAO,CAAC;IAAE,MAAM,EAAE,OAAO,MAAM,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,OAAO,SAAS,EAAE,WAAW,CAAA;CAAE,CAAC,CA+HlG;AAyPD,+CAEC;AAED,kEAYC;AAzGD,+BAA+B;AAC/B,yBADW,gBAAgB,CAuF1B;sBA1YY,OAAO,CAAC,OAAO,GAAG;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,GAAoB,CAAC;CAC7B;uBACS,OAAO,CAAC,QAAQ,GAAG;IAC3B,KAAK,EAAE,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,KAAK,EAAE,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjE,YAAY,EAAE,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,IAAI,CAAC;IACvD,SAAS,EAAE,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,IAAI,CAAC;IACpD,QAAQ,EAAE,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,IAAI,CAAC;IACnD,WAAW,EAAE,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,IAAI,CAAC;CACvD;+BACS;IACR,KAAK,EAAE,MAAM,EAAE,CAAC;IACpB,CAAK,GAAG,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,UAAU,KAAK,IAAI,CAAC,GAAG,MAAM,EAAE,CAAC;CACnF;oBAtBgB,SAAS"}
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../server/router.js"],"names":[],"mappings":"AAoCA,uGAAuG;AACvG,0CADc,OAAO,CAAC;IAAE,MAAM,EAAE,OAAO,MAAM,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,OAAO,SAAS,EAAE,WAAW,CAAA;CAAE,CAAC,CA+HlG;AAkPD,+CAEC;AAED,kEAYC;AAzGD,+BAA+B;AAC/B,yBADW,gBAAgB,CAuF1B;sBAnYY,OAAO,CAAC,OAAO,GAAG;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,GAAoB,CAAC;CAC7B;uBACS,OAAO,CAAC,QAAQ,GAAG;IAC3B,KAAK,EAAE,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,KAAK,EAAE,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjE,YAAY,EAAE,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,IAAI,CAAC;IACvD,SAAS,EAAE,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,IAAI,CAAC;IACpD,QAAQ,EAAE,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,IAAI,CAAC;IACnD,WAAW,EAAE,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,KAAK,EAAE,KAAK,IAAI,CAAC;CACvD;+BACS;IACR,KAAK,EAAE,MAAM,EAAE,CAAC;IACpB,CAAK,GAAG,EAAE,MAAM,GAAG,CAAC,CAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,UAAU,KAAK,IAAI,CAAC,GAAG,MAAM,EAAE,CAAC;CACnF;oBAtBgB,SAAS"}