@douglasneuroinformatics/libui 2.4.0 → 2.4.2

package/dist/components/ActionDropdown/ActionDropdown.d.ts

@@ -8,6 +8,8 @@ type ActionDropdownOptionKey<T> = T extends readonly string[] ? T[number] : T ex
 } ? Extract<keyof T, string> : never;
 export type ActionDropdownProps<T extends ActionDropdownOptions> = {
     align?: DropdownMenuContentProps['align'];
+    contentClassName?: string;
+    disabled?: boolean;
     /** Callback function invoked when user clicks an option */
     onSelection: (option: ActionDropdownOptionKey<T>) => void;
     /** Either a list of options for the dropdown, or an object with options mapped to custom labels  */
@@ -15,7 +17,8 @@ export type ActionDropdownProps<T extends ActionDropdownOptions> = {
     /** The text content for the dropdown toggle */
     title: string;
     triggerClassName?: string;
+    widthFull?: boolean;
 };
-export declare function ActionDropdown<const T extends ActionDropdownOptions>({ align, onSelection, options, title, triggerClassName }: ActionDropdownProps<T>): React.JSX.Element;
+export declare function ActionDropdown<const T extends ActionDropdownOptions>({ align, contentClassName, disabled, onSelection, options, title, triggerClassName, widthFull }: ActionDropdownProps<T>): React.JSX.Element;
 export {};
 //# sourceMappingURL=ActionDropdown.d.ts.map

package/dist/components/ActionDropdown/ActionDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/ActionDropdown/ActionDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wCAAwC,CAAC;AAEvF,KAAK,qBAAqB,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GAAG,SAAS,MAAM,EAAE,CAAC;AAE3E,KAAK,uBAAuB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,MAAM,EAAE,GACzD,CAAC,CAAC,MAAM,CAAC,GACT,CAAC,SAAS;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GACjC,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,GACxB,KAAK,CAAC;AAEZ,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,qBAAqB,IAAI;IACjE,KAAK,CAAC,EAAE,wBAAwB,CAAC,OAAO,CAAC,CAAC;IAE1C,2DAA2D;IAC3D,WAAW,EAAE,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAE1D,oGAAoG;IACpG,OAAO,EAAE,CAAC,CAAC;IAEX,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IAEd,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAGF,wBAAgB,cAAc,CAAC,KAAK,CAAC,CAAC,SAAS,qBAAqB,EAAE,EACpE,KAAe,EACf,WAAW,EACX,OAAO,EACP,KAAK,EACL,gBAAgB,EACjB,EAAE,mBAAmB,CAAC,CAAC,CAAC,qBAyBxB"}
+{"version":3,"file":"ActionDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/ActionDropdown/ActionDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wCAAwC,CAAC;AAEvF,KAAK,qBAAqB,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GAAG,SAAS,MAAM,EAAE,CAAC;AAE3E,KAAK,uBAAuB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,MAAM,EAAE,GACzD,CAAC,CAAC,MAAM,CAAC,GACT,CAAC,SAAS;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,GACjC,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,GACxB,KAAK,CAAC;AAEZ,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,qBAAqB,IAAI;IACjE,KAAK,CAAC,EAAE,wBAAwB,CAAC,OAAO,CAAC,CAAC;IAE1C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,2DAA2D;IAC3D,WAAW,EAAE,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAE1D,oGAAoG;IACpG,OAAO,EAAE,CAAC,CAAC;IAEX,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IAEd,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAGF,wBAAgB,cAAc,CAAC,KAAK,CAAC,CAAC,SAAS,qBAAqB,EAAE,EACpE,KAAe,EACf,gBAAgB,EAChB,QAAQ,EACR,WAAW,EACX,OAAO,EACP,KAAK,EACL,gBAAgB,EAChB,SAAS,EACV,EAAE,mBAAmB,CAAC,CAAC,CAAC,qBA2BxB"}

package/dist/components/ActionDropdown/ActionDropdown.js

@@ -2,13 +2,13 @@ import React from 'react';
 import { DropdownButton } from '../DropdownButton/DropdownButton.js';
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
 // eslint-disable-next-line react/function-component-definition
-export function ActionDropdown({ align = 'start', onSelection, options, title, triggerClassName }) {
+export function ActionDropdown({ align = 'start', contentClassName, disabled, onSelection, options, title, triggerClassName, widthFull }) {
     const optionKeys = options instanceof Array ? options : Object.keys(options);
     return (React.createElement(DropdownMenu, null,
         React.createElement("div", { className: "w-full" },
             React.createElement(DropdownMenu.Trigger, { asChild: true },
-                React.createElement(DropdownButton, { className: triggerClassName }, title)),
-            React.createElement(DropdownMenu.Content, { align: align, style: { width: 'var(--radix-popper-anchor-width)' } },
+                React.createElement(DropdownButton, { className: triggerClassName, disabled: disabled }, title)),
+            React.createElement(DropdownMenu.Content, { align: align, className: contentClassName, widthFull: widthFull },
                 React.createElement(DropdownMenu.Group, null, optionKeys.map((option) => (React.createElement(DropdownMenu.Item, { key: option, onClick: () => {
                         onSelection(option);
                     } }, Array.isArray(options) ? option : options[option]))))))));

package/dist/components/DropdownButton/DropdownButton.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { ChevronDownIcon } from 'lucide-react';
 import { cn } from '../../utils.js';
 export const DropdownButton = React.forwardRef(function DropdownButton({ children, className, ...props }, ref) {
-    return (React.createElement("button", { className: cn('flex h-9 w-full items-center whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1', children ? 'justify-between' : 'justify-end', className), ref: ref, type: "button", ...props },
+    return (React.createElement("button", { className: cn('flex h-9 w-full items-center gap-2 whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1', children ? 'justify-between' : 'justify-end', className), ref: ref, type: "button", ...props },
         children,
         React.createElement(ChevronDownIcon, { className: "h-4 w-4 opacity-50" })));
 });

package/dist/components/ListboxDropdown/ListboxDropdown.d.ts

@@ -7,12 +7,15 @@ export type ListboxDropdownOption = {
 export type ListboxDropdownProps<T extends ListboxDropdownOption> = {
     checkPosition?: 'left' | 'right';
     className?: string;
+    contentClassName?: string;
+    disabled?: boolean;
     options: T[];
     selected: T[];
     setSelected: React.Dispatch<React.SetStateAction<T[]>>;
     title: string;
-    /** The button variant to use for the dropdown toggle */
+    triggerClassName?: string;
     variant?: ButtonProps['variant'];
+    widthFull?: boolean;
 };
-export declare const ListboxDropdown: <T extends ListboxDropdownOption>({ options, selected, setSelected, title }: ListboxDropdownProps<T>) => React.JSX.Element;
+export declare const ListboxDropdown: <T extends ListboxDropdownOption>({ contentClassName, disabled, options, selected, setSelected, title, triggerClassName, widthFull }: ListboxDropdownProps<T>) => React.JSX.Element;
 //# sourceMappingURL=ListboxDropdown.d.ts.map

package/dist/components/ListboxDropdown/ListboxDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListboxDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/ListboxDropdown/ListboxDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAIvD,MAAM,MAAM,qBAAqB,GAAG;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,qBAAqB,IAAI;IAClE,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,QAAQ,EAAE,CAAC,EAAE,CAAC;IACd,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,eAAe,+EAKzB,qBAAqB,CAAC,CAAC,sBAiCzB,CAAC"}
+{"version":3,"file":"ListboxDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/ListboxDropdown/ListboxDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAIvD,MAAM,MAAM,qBAAqB,GAAG;IAClC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,qBAAqB,IAAI;IAClE,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,QAAQ,EAAE,CAAC,EAAE,CAAC;IACd,WAAW,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,eAAe,wIASzB,qBAAqB,CAAC,CAAC,sBAiCzB,CAAC"}

package/dist/components/ListboxDropdown/ListboxDropdown.js

@@ -1,12 +1,13 @@
 import React from 'react';
+import { cn } from '../../utils.js';
 import {} from '../Button/Button.js';
 import { DropdownButton } from '../DropdownButton/DropdownButton.js';
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
-export const ListboxDropdown = ({ options, selected, setSelected, title }) => {
+export const ListboxDropdown = ({ contentClassName, disabled, options, selected, setSelected, title, triggerClassName, widthFull }) => {
     return (React.createElement(DropdownMenu, null,
-        React.createElement(DropdownMenu.Trigger, { asChild: true, className: "w-full" },
+        React.createElement(DropdownMenu.Trigger, { asChild: true, className: cn('w-full', triggerClassName), disabled: disabled },
             React.createElement(DropdownButton, null, title)),
-        React.createElement(DropdownMenu.Content, { widthFull: true, align: "start" }, options.map((option) => {
+        React.createElement(DropdownMenu.Content, { align: "start", className: contentClassName, widthFull: widthFull }, options.map((option) => {
             const checked = Boolean(selected.find((selectedOption) => selectedOption.key === option.key));
             return (React.createElement(DropdownMenu.CheckboxItem, { checked: checked, className: "flex w-full items-center whitespace-nowrap bg-slate-50 p-2 text-sm hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 ", "data-cy": "select-dropdown-option", key: option.key, onSelect: (event) => {
                     event.preventDefault();

package/dist/hooks/useTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.ts"],"names":[],"mappings":"AAIA,KAAK,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;AAE9B,KAAK,WAAW,GAAG,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;AAE1C,eAAe;AACf,QAAA,MAAM,aAAa,EAAE,KAAe,CAAC;AAErC,eAAe;AACf,QAAA,MAAM,eAAe,cAAc,CAAC;AAEpC,eAAe;AACf,QAAA,MAAM,SAAS,UAAU,CAAC;AAE1B,eAAe;AACf,QAAA,MAAM,oBAAoB,iCAAiC,CAAC;AAE5D;;;;;GAKG;AACH,iBAAS,QAAQ,IAAI,SAAS,CAAC,KAAK,EAAE,WAAW,CAAC,CA8CjD;AAED,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,eAAe,EAAE,SAAS,EAAE,KAAK,KAAK,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../src/hooks/useTheme.ts"],"names":[],"mappings":"AAIA,KAAK,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;AAE9B,KAAK,WAAW,GAAG,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;AAE1C,eAAe;AACf,QAAA,MAAM,aAAa,EAAE,KAAe,CAAC;AAErC,eAAe;AACf,QAAA,MAAM,eAAe,cAAc,CAAC;AAEpC,eAAe;AACf,QAAA,MAAM,SAAS,UAAU,CAAC;AAE1B,eAAe;AACf,QAAA,MAAM,oBAAoB,iCAAiC,CAAC;AAE5D;;;;;GAKG;AACH,iBAAS,QAAQ,IAAI,SAAS,CAAC,KAAK,EAAE,WAAW,CAAC,CA2CjD;AAED,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,eAAe,EAAE,SAAS,EAAE,KAAK,KAAK,EAAE,QAAQ,EAAE,CAAC"}

package/dist/hooks/useTheme.js

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { isBrowser } from '../utils.js';
 /** @private */
 const DEFAULT_THEME = 'light';
@@ -52,9 +52,9 @@ function useTheme() {
         return () => observer.disconnect();
     }, []);
     // When the user wants to change the theme
-    const updateTheme = useCallback((theme) => {
+    const updateTheme = (theme) => {
         document.documentElement.setAttribute(THEME_ATTRIBUTE, theme);
-    }, [document.documentElement]);
+    };
     return [theme, updateTheme];
 }
 export { DEFAULT_THEME, SYS_DARK_MEDIA_QUERY, THEME_ATTRIBUTE, THEME_KEY, useTheme };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@douglasneuroinformatics/libui",
   "type": "module",
-  "version": "2.4.0",
+  "version": "2.4.2",
   "packageManager": "pnpm@8.15.3",
   "description": "Generic UI components for DNP projects, built using React and TailwindCSS",
   "author": {

package/src/components/ActionDropdown/ActionDropdown.tsx

@@ -16,6 +16,10 @@ type ActionDropdownOptionKey<T> = T extends readonly string[]
 export type ActionDropdownProps<T extends ActionDropdownOptions> = {
   align?: DropdownMenuContentProps['align'];
 
+  contentClassName?: string;
+
+  disabled?: boolean;
+
   /** Callback function invoked when user clicks an option */
   onSelection: (option: ActionDropdownOptionKey<T>) => void;
 
@@ -26,24 +30,31 @@ export type ActionDropdownProps<T extends ActionDropdownOptions> = {
   title: string;
 
   triggerClassName?: string;
+
+  widthFull?: boolean;
 };
 
 // eslint-disable-next-line react/function-component-definition
 export function ActionDropdown<const T extends ActionDropdownOptions>({
   align = 'start',
+  contentClassName,
+  disabled,
   onSelection,
   options,
   title,
-  triggerClassName
+  triggerClassName,
+  widthFull
 }: ActionDropdownProps<T>) {
   const optionKeys: readonly string[] = options instanceof Array ? options : Object.keys(options);
   return (
     <DropdownMenu>
       <div className="w-full">
         <DropdownMenu.Trigger asChild>
-          <DropdownButton className={triggerClassName}>{title}</DropdownButton>
+          <DropdownButton className={triggerClassName} disabled={disabled}>
+            {title}
+          </DropdownButton>
         </DropdownMenu.Trigger>
-        <DropdownMenu.Content align={align} style={{ width: 'var(--radix-popper-anchor-width)' }}>
+        <DropdownMenu.Content align={align} className={contentClassName} widthFull={widthFull}>
           <DropdownMenu.Group>
             {optionKeys.map((option) => (
               <DropdownMenu.Item

package/src/components/DropdownButton/DropdownButton.tsx

@@ -9,7 +9,7 @@ export const DropdownButton = React.forwardRef<HTMLButtonElement, React.ButtonHT
     return (
       <button
         className={cn(
-          'flex h-9 w-full items-center whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+          'flex h-9 w-full items-center gap-2 whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
           children ? 'justify-between' : 'justify-end',
           className
         )}

package/src/components/ListboxDropdown/ListboxDropdown.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { cn } from '../../utils.js';
 import { type ButtonProps } from '../Button/Button.js';
 import { DropdownButton } from '../DropdownButton/DropdownButton.js';
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
@@ -12,26 +13,33 @@ export type ListboxDropdownOption = {
 export type ListboxDropdownProps<T extends ListboxDropdownOption> = {
   checkPosition?: 'left' | 'right';
   className?: string;
+  contentClassName?: string;
+  disabled?: boolean;
   options: T[];
   selected: T[];
   setSelected: React.Dispatch<React.SetStateAction<T[]>>;
   title: string;
-  /** The button variant to use for the dropdown toggle */
+  triggerClassName?: string;
   variant?: ButtonProps['variant'];
+  widthFull?: boolean;
 };
 
 export const ListboxDropdown = <T extends ListboxDropdownOption>({
+  contentClassName,
+  disabled,
   options,
   selected,
   setSelected,
-  title
+  title,
+  triggerClassName,
+  widthFull
 }: ListboxDropdownProps<T>) => {
   return (
     <DropdownMenu>
-      <DropdownMenu.Trigger asChild className="w-full">
+      <DropdownMenu.Trigger asChild className={cn('w-full', triggerClassName)} disabled={disabled}>
         <DropdownButton>{title}</DropdownButton>
       </DropdownMenu.Trigger>
-      <DropdownMenu.Content widthFull align="start">
+      <DropdownMenu.Content align="start" className={contentClassName} widthFull={widthFull}>
         {options.map((option) => {
           const checked = Boolean(selected.find((selectedOption) => selectedOption.key === option.key));
           return (

package/src/hooks/useTheme.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { isBrowser } from '../utils.js';
 
@@ -62,12 +62,9 @@ function useTheme(): readonly [Theme, UpdateTheme] {
   }, []);
 
   // When the user wants to change the theme
-  const updateTheme = useCallback(
-    (theme: Theme) => {
-      document.documentElement.setAttribute(THEME_ATTRIBUTE, theme);
-    },
-    [document.documentElement]
-  );
+  const updateTheme = (theme: Theme) => {
+    document.documentElement.setAttribute(THEME_ATTRIBUTE, theme);
+  };
 
   return [theme, updateTheme] as const;
 }