Merge pull request #494 from acelaya-forks/feature/bootstrapless-fixes

Add fixes for tailwind components to work without bootstrap

Author: acelaya

CHANGELOG.md

@@ -4,21 +4,21 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org).
 
-## [Unreleased]
+## [0.9.10] - 2025-06-11
 ### Added
 * *Nothing*
 
 ### Changed
 * Change 2xl breakpoint to 1320px.
 
 ### Deprecated
-* *Nothing*
+* Deprecated `determineOrder` and `determineOrderDir` when arguments are passed individually. The only supported signature going forward is the one where an `OrderDirChange` object is passed.
 
 ### Removed
 * *Nothing*
 
 ### Fixed
-* *Nothing*
+* Fixes and adjustments to work when bootstrap styles are not present.
 
 
 ## [0.9.9] - 2025-06-10

src/ordering/ordering.ts

@@ -14,6 +14,7 @@ export type OrderDirChange<Fields extends string = string> = {
 };
 
 export function determineOrderDir<Fields extends string = string>(orderDirChange: OrderDirChange<Fields>): OrderDir;
+/** @deprecated */
 export function determineOrderDir<Fields extends string = string>(
   currentField?: Fields,
   newField?: Fields,
@@ -27,11 +28,12 @@ export function determineOrderDir<Fields extends string = string>(
   newField?: Fields,
   currentOrderDir?: OrderDir,
 ): OrderDir {
-  if (typeof firstArg === 'object') {
-    return determineOrderDir(firstArg.currentField, firstArg.newField, firstArg.currentOrderDir);
+  if (!firstArg || typeof firstArg === 'string') {
+    return determineOrderDir({ currentField: firstArg, newField, currentOrderDir });
   }
 
-  if (firstArg !== newField) {
+  const orderDirChange = firstArg;
+  if (orderDirChange.currentField !== orderDirChange.newField) {
     return 'ASC';
   }
 
@@ -40,10 +42,11 @@ export function determineOrderDir<Fields extends string = string>(
     DESC: undefined,
   };
 
-  return currentOrderDir ? newOrderMap[currentOrderDir] : 'ASC';
+  return orderDirChange.currentOrderDir ? newOrderMap[orderDirChange.currentOrderDir] : 'ASC';
 }
 
 export function determineOrder<Fields extends string = string>(orderDirChange: OrderDirChange<Fields>): Order<Fields>;
+/** @deprecated */
 export function determineOrder<Fields extends string = string>(
   currentField?: Fields,
   newField?: Fields,
@@ -57,13 +60,14 @@ export function determineOrder<Fields extends string = string>(
   newField?: Fields,
   currentOrderDir?: OrderDir,
 ): Order<Fields> {
-  if (typeof firstArg === 'object') {
-    return determineOrder(firstArg.currentField, firstArg.newField, firstArg.currentOrderDir);
+  if (!firstArg || typeof firstArg === 'string') {
+    return determineOrder({ currentField: firstArg, newField, currentOrderDir });
   }
 
-  const newOrderDir = determineOrderDir(firstArg, newField, currentOrderDir);
+  const orderDirChange = firstArg;
+  const newOrderDir = determineOrderDir(orderDirChange);
   return {
-    field: newOrderDir ? newField : undefined,
+    field: newOrderDir ? orderDirChange.newField : undefined,
     dir: newOrderDir,
   };
 }
@@ -92,6 +96,7 @@ export const stringToOrder = <T>(order: string): Order<T> => {
 
 export type OrderSetter<T> = {
   (order: Order<T>): void;
+  /** @deprecated Pass the order object as the only argument */
   (orderField?: T, orderDir?: OrderDir): void;
 };
 

src/tailwind/content/Table.tsx

@@ -121,6 +121,7 @@ const Cell: FC<CellProps> = ({ children, className, columnName, type, ...rest })
 
           'tw:border-b-1': !responsive,
           'tw:block tw:lg:table-cell tw:not-last:border-b-1 tw:lg:border-b-1': responsive,
+          'tw:text-left': Tag === 'th',
 
           // For responsive tables, display the content in data-column attribute for md sizes and lower
           'tw:before:lg:hidden tw:before:content-[attr(data-column)] tw:before:font-bold tw:before:mr-1': responsive && Tag === 'td',

src/tailwind/form/Button.tsx

@@ -81,6 +81,7 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
           'tw:highlight:bg-danger': variant === 'danger',
         },
         {
+          'tw:cursor-pointer': !disabled,
           'tw:pointer-events-none tw:opacity-65': disabled,
         },
         className,

src/tailwind/form/CloseButton.tsx

@@ -20,7 +20,7 @@ export const CloseButton = forwardRef<HTMLButtonElement, CloseButtonProps>((
     onClick={onClick}
     className={clsx(
       'tw:opacity-50 tw:highlight:opacity-80 tw:transition-opacity',
-      'tw:rounded-md tw:focus-ring',
+      'tw:rounded-md tw:focus-ring tw:cursor-pointer',
       className,
     )}
     aria-label={label}

src/tailwind/form/RevealablePasswordInput.tsx

@@ -49,7 +49,7 @@ export const RevealablePasswordInput = forwardRef<HTMLInputElement, RevealablePa
         title={passwordRevealed ? 'Hide password' : 'Show password'}
         aria-label={passwordRevealed ? 'Hide password' : 'Show password'}
         className={clsx(
-          'tw:absolute tw:top-[50%] tw:translate-y-[-50%] tw:px-1',
+          'tw:absolute tw:top-[50%] tw:translate-y-[-50%] tw:px-1 tw:cursor-pointer',
           'tw:text-placeholder tw:hover:text-lm-text tw:hover:dark:text-dm-text tw:transition-colors',
           {
             'tw:right-1.5': size !== 'sm',

src/tailwind/navigation/Dropdown.tsx

@@ -112,6 +112,7 @@ const BaseDropdown: FC<DropdownProps> = ({
           'tw:flex tw:items-center tw:rounded-md tw:focus-ring',
           {
             'tw:justify-between': !caretless,
+            'tw:cursor-pointer': !buttonDisabled,
             'tw:pointer-events-none tw:opacity-50': buttonDisabled,
 
             // Button variant

src/tailwind/navigation/LinkButton.tsx

@@ -21,6 +21,7 @@ export const LinkButton = forwardRef<HTMLButtonElement, LinkButtonProps>((
         'tw:px-1.5 tw:py-1 tw:text-sm': size === 'sm',
         'tw:px-3 tw:py-1.5': size === 'md',
         'tw:px-4 tw:py-2 tw:text-lg': size === 'lg',
+        'tw:cursor-pointer': !disabled,
         'tw:pointer-events-none tw:opacity-65': disabled,
       },
       className,

src/tailwind/navigation/Menu.tsx

@@ -29,6 +29,7 @@ const Item: FC<MenuItemProps> = ({ className, selected, disabled, ...rest }) =>
         // Overwrite link styles in case a Link is being used
         'tw:no-underline tw:text-inherit',
         {
+          'tw:cursor-pointer': !disabled,
           'tw:pointer-events-none tw:opacity-50': disabled,
           'tw:bg-lm-secondary tw:dark:bg-dm-secondary': selected && !disabled,
           'tw:highlight:bg-lm-secondary tw:dark:highlight:bg-dm-secondary tw:highlight:z-1 tw:relative': !selected && !disabled,

src/tailwind/navigation/Paginator.tsx

@@ -14,7 +14,7 @@ const commonClasses = [
 
 const buildPaginatorItemClasses = (active = false) => clsx(
   commonClasses,
-  'tw:px-3 py-2 tw:cursor-pointer tw:no-underline',
+  'tw:px-3 tw:py-2 tw:cursor-pointer tw:no-underline',
   'tw:focus-ring tw:focus-visible:z-1',
   !active && [
     'tw:text-lm-brand tw:dark:text-dm-brand',
@@ -25,7 +25,7 @@ const buildPaginatorItemClasses = (active = false) => clsx(
 );
 
 const DisabledPaginatorItem: FC<PropsWithChildren> = ({ children }) => (
-  <span aria-hidden className={clsx(commonClasses, 'tw:px-3 py-2 tw:text-gray-400')}>
+  <span aria-hidden className={clsx(commonClasses, 'tw:px-3 tw:py-2 tw:text-gray-400')}>
     {children}
   </span>
 );