@douglasneuroinformatics/libui 2.5.1 → 2.5.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/README.md +6 -0
  2. package/dist/components/ClientTable/ClientTable.d.ts +2 -1
  3. package/dist/components/ClientTable/ClientTable.d.ts.map +1 -1
  4. package/dist/components/ClientTable/ClientTable.js +5 -5
  5. package/dist/components/Drawer/Drawer.d.ts +5 -5
  6. package/dist/components/Drawer/DrawerContent.d.ts +1 -1
  7. package/dist/components/Drawer/DrawerDescription.d.ts +1 -1
  8. package/dist/components/Drawer/DrawerDescription.d.ts.map +1 -1
  9. package/dist/components/Drawer/DrawerTitle.d.ts +1 -1
  10. package/dist/components/Drawer/DrawerTitle.d.ts.map +1 -1
  11. package/dist/components/Form/Form.d.ts.map +1 -1
  12. package/dist/components/Form/Form.js +1 -1
  13. package/package.json +46 -47
  14. package/src/components/ClientTable/ClientTable.tsx +14 -7
package/README.md CHANGED
@@ -54,6 +54,12 @@ module.exports {
54
54
  };
55
55
  ```
56
56
 
57
+ **main.tsx**
58
+
59
+ ```js
60
+ import '@douglasneuroinformatics/libui/styles/globals.css';
61
+ ```
62
+
57
63
  ## Contributing
58
64
 
59
65
  We welcome contributions! If you're interested in improving the library or adding new features, please refer to our contribution guide.
package/dist/components/ClientTable/ClientTable.d.ts CHANGED
@@ -27,7 +27,8 @@ export type ClientTableProps<T extends ClientTableEntry> = {
27
27
  data: T[];
28
28
  entriesPerPage?: number;
29
29
  minRows?: number;
30
+ noWrap?: boolean;
30
31
  onEntryClick?: (entry: T) => void;
31
32
  };
32
- export declare const ClientTable: <T extends ClientTableEntry>({ className, columnDropdownOptions, columns, data, entriesPerPage, minRows, onEntryClick }: ClientTableProps<T>) => React.JSX.Element;
33
+ export declare const ClientTable: <T extends ClientTableEntry>({ className, columnDropdownOptions, columns, data, entriesPerPage, minRows, noWrap, onEntryClick }: ClientTableProps<T>) => React.JSX.Element;
33
34
  //# sourceMappingURL=ClientTable.d.ts.map
package/dist/components/ClientTable/ClientTable.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ClientTable.d.ts","sourceRoot":"","sources":["../../../src/components/ClientTable/ClientTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AA0BxC,MAAM,MAAM,gBAAgB,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,CAAC;AAE1D,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,gBAAgB,GAAG,gBAAgB,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,CAAC;AAErG,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,gBAAgB,IAAI;IAC1D,6CAA6C;IAC7C,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC;IAEvC,oDAAoD;IAEpD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,CAAC;IAEnC,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,0BAA0B,CAAC,CAAC,SAAS,gBAAgB,IAAI;IACnE,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CACrD,EAAE,CAAC;AAEJ,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,gBAAgB,IAAI;IAC/D,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC7B,eAAe,CAAC,EAAE,0BAA0B,CAAC,CAAC,CAAC,CAAC;CACjD,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,gBAAgB,IAAI;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB,CAAC,EAAE,0BAA0B,CAAC,CAAC,CAAC,CAAC;IACtD,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;IAChC,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,WAAW,2HAQrB,iBAAiB,CAAC,CAAC,sBA6FrB,CAAC"}
1
+ {"version":3,"file":"ClientTable.d.ts","sourceRoot":"","sources":["../../../src/components/ClientTable/ClientTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AA0BxC,MAAM,MAAM,gBAAgB,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,CAAC;AAE1D,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,gBAAgB,GAAG,gBAAgB,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,CAAC;AAErG,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,gBAAgB,IAAI;IAC1D,6CAA6C;IAC7C,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC;IAEvC,oDAAoD;IACpD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,CAAC;IAEnC,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,0BAA0B,CAAC,CAAC,SAAS,gBAAgB,IAAI;IACnE,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CACrD,EAAE,CAAC;AAEJ,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,gBAAgB,IAAI;IAC/D,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;IAC7B,eAAe,CAAC,EAAE,0BAA0B,CAAC,CAAC,CAAC,CAAC;CACjD,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,gBAAgB,IAAI;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB,CAAC,EAAE,0BAA0B,CAAC,CAAC,CAAC,CAAC;IACtD,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,EAAE,CAAC;IAChC,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,WAAW,mIASrB,iBAAiB,CAAC,CAAC,sBAmGrB,CAAC"}
package/dist/components/ClientTable/ClientTable.js CHANGED
@@ -22,7 +22,7 @@ function defaultFormatter(value) {
22
22
  }
23
23
  return JSON.stringify(value);
24
24
  }
25
- export const ClientTable = ({ className, columnDropdownOptions, columns, data, entriesPerPage = 10, minRows, onEntryClick }) => {
25
+ export const ClientTable = ({ className, columnDropdownOptions, columns, data, entriesPerPage = 10, minRows, noWrap, onEntryClick }) => {
26
26
  const [currentPage, setCurrentPage] = useState(1);
27
27
  const pageCount = Math.max(Math.ceil(data.length / entriesPerPage), 1);
28
28
  const firstEntry = data.length === 0 ? 0 : (currentPage - 1) * entriesPerPage + 1;
@@ -48,9 +48,8 @@ export const ClientTable = ({ className, columnDropdownOptions, columns, data, e
48
48
  }))))) : (column.label)))))),
49
49
  React.createElement(Table.Body, null, range(nRows).map((i) => {
50
50
  const entry = currentEntries[i];
51
- return (React.createElement(Table.Row, { className: cn(typeof onEntryClick === 'function' && 'cursor-pointer hover:backdrop-brightness-95'), key: i, onClick: () => {
52
- onEntryClick?.(entry);
53
- } }, columns.map(({ field, formatter }, j) => {
51
+ const onClick = onEntryClick && entry ? () => onEntryClick(entry) : undefined;
52
+ return (React.createElement(Table.Row, { className: cn(onClick && 'cursor-pointer hover:backdrop-brightness-95'), key: i, onClick: onClick }, columns.map(({ field, formatter }, j) => {
54
53
  let value;
55
54
  if (!entry) {
56
55
  value = 'NA';
@@ -62,7 +61,8 @@ export const ClientTable = ({ className, columnDropdownOptions, columns, data, e
62
61
  value = entry[field];
63
62
  }
64
63
  const formattedValue = entry && formatter ? formatter(value) : defaultFormatter(value);
65
- return (React.createElement(Table.Cell, { className: cn('text-ellipsis leading-none', !entry && 'invisible'), key: j }, formattedValue));
64
+ return (React.createElement(Table.Cell, { className: cn('text-ellipsis leading-none', !entry && 'opacity-0', // safari does not include borders if invisible
65
+ noWrap && 'max-w-3xl overflow-hidden text-ellipsis whitespace-nowrap'), key: j }, formattedValue));
66
66
  })));
67
67
  })))),
68
68
  React.createElement(ClientTablePagination, { currentPage: currentPage, firstEntry: firstEntry, lastEntry: lastEntry, pageCount: pageCount, setCurrentPage: setCurrentPage, totalEntries: data.length })));
package/dist/components/Drawer/Drawer.d.ts CHANGED
@@ -1,14 +1,14 @@
1
1
  import React from 'react';
2
2
  import { Drawer as DrawerPrimitive } from 'vaul';
3
3
  export declare const Drawer: (({ shouldScaleBackground, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => React.JSX.Element) & {
4
- Close: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog", { with: { "resolution-mode": "require" } }).DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
5
- Content: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog", { with: { "resolution-mode": "require" } }).DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
4
+ Close: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
5
+ Content: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
6
6
  onAnimationEnd?: ((open: boolean) => void) | undefined;
7
7
  } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
8
- Description: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog", { with: { "resolution-mode": "require" } }).DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
8
+ Description: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
9
9
  Footer: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
10
10
  Header: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
11
- Title: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog", { with: { "resolution-mode": "require" } }).DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
12
- Trigger: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog", { with: { "resolution-mode": "require" } }).DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
11
+ Title: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
12
+ Trigger: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
13
13
  };
14
14
  //# sourceMappingURL=Drawer.d.ts.map
package/dist/components/Drawer/DrawerContent.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- export declare const DrawerContent: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog", { with: { "resolution-mode": "require" } }).DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
2
+ export declare const DrawerContent: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
3
3
  onAnimationEnd?: ((open: boolean) => void) | undefined;
4
4
  } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
5
5
  //# sourceMappingURL=DrawerContent.d.ts.map
package/dist/components/Drawer/DrawerDescription.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from 'react';
2
- export declare const DrawerDescription: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog", { with: { "resolution-mode": "require" } }).DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
2
+ export declare const DrawerDescription: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
3
3
  //# sourceMappingURL=DrawerDescription.d.ts.map
package/dist/components/Drawer/DrawerDescription.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DrawerDescription.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/DrawerDescription.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,iBAAiB,2OAO5B,CAAC"}
1
+ {"version":3,"file":"DrawerDescription.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/DrawerDescription.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,iBAAiB,+LAO5B,CAAC"}
package/dist/components/Drawer/DrawerTitle.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import React from 'react';
2
- export declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog", { with: { "resolution-mode": "require" } }).DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
2
+ export declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
3
3
  //# sourceMappingURL=DrawerTitle.d.ts.map
package/dist/components/Drawer/DrawerTitle.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DrawerTitle.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/DrawerTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,WAAW,iOAWtB,CAAC"}
1
+ {"version":3,"file":"DrawerTitle.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/DrawerTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,WAAW,qLAWtB,CAAC"}
package/dist/components/Form/Form.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EACV,WAAW,EACX,YAAY,EAGZ,2BAA2B,EAC5B,MAAM,2CAA2C,CAAC;AAInD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAUxB,KAAK,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;IAC7G,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,aAAa,CAAC,EAAE,2BAA2B,CAAC,KAAK,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IAC7C,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,UAAU,CAAC,IAAI,CAAC,CAAC;IAC5C,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;CACpC,CAAC;AAEF,QAAA,MAAM,IAAI,wSAcP,UAAU,OAAO,EAAE,KAAK,CAAC,sBAqI3B,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,CAAC"}
1
+ {"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../src/components/Form/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EACV,WAAW,EACX,YAAY,EAGZ,2BAA2B,EAC5B,MAAM,2CAA2C,CAAC;AAInD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAC5C,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAUxB,KAAK,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,KAAK,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI;IAC7G,CAAC,GAAG,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,aAAa,CAAC,EAAE,2BAA2B,CAAC,KAAK,CAAC,CAAC;IACnD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;IAC7C,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,UAAU,CAAC,IAAI,CAAC,CAAC;IAC5C,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;CACpC,CAAC;AAEF,QAAA,MAAM,IAAI,wSAcP,UAAU,OAAO,EAAE,KAAK,CAAC,sBAyI3B,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,CAAC"}
package/dist/components/Form/Form.js CHANGED
@@ -70,7 +70,7 @@ const Form = ({ className, content, id, initialValues, onError, onSubmit, preven
70
70
  isGrouped ? (content.map((fieldGroup, i) => {
71
71
  return (React.createElement("div", { className: "space-y-6 [&:not(:first-child)]:pt-8", key: i },
72
72
  React.createElement("div", { className: "space-y-1" },
73
- fieldGroup.title && React.createElement(Heading, { className: "text-base", variant: "h4" }, fieldGroup.title),
73
+ fieldGroup.title && (React.createElement(Heading, { className: "text-base", variant: "h4" }, fieldGroup.title)),
74
74
  fieldGroup.description && (React.createElement("p", { className: "text-sm italic leading-tight text-muted-foreground" }, fieldGroup.description))),
75
75
  React.createElement(FieldsComponent, { errors: errors, fields: fieldGroup.fields, readOnly: readOnly, setErrors: setErrors, setValues: setValues, values: values })));
76
76
  })) : (React.createElement(FieldsComponent, { errors: errors, fields: content, readOnly: readOnly, setErrors: setErrors, setValues: setValues, values: values })),
package/package.json CHANGED
@@ -1,8 +1,7 @@
1
1
  {
2
2
  "name": "@douglasneuroinformatics/libui",
3
3
  "type": "module",
4
- "version": "2.5.1",
5
- "packageManager": "pnpm@8.15.3",
4
+ "version": "2.5.3",
6
5
  "description": "Generic UI components for DNP projects, built using React and TailwindCSS",
7
6
  "author": {
8
7
  "name": "Douglas Neuroinformatics",
@@ -57,8 +56,7 @@
57
56
  "dependencies": {
58
57
  "@douglasneuroinformatics/libjs": "^0.3.1",
59
58
  "@douglasneuroinformatics/libui-form-types": "^0.7.0",
60
- "@headlessui/react": "^1.7.18",
61
- "@headlessui/tailwindcss": "^0.2.0",
59
+ "@headlessui/tailwindcss": "^0.2.1",
62
60
  "@heroicons/react": "^2.1.3",
63
61
  "@radix-ui/react-accordion": "^1.1.2",
64
62
  "@radix-ui/react-alert-dialog": "^1.0.5",
@@ -84,68 +82,69 @@
84
82
  "@radix-ui/react-tooltip": "^1.0.7",
85
83
  "@tailwindcss/container-queries": "^0.1.1",
86
84
  "class-variance-authority": "^0.7.0",
87
- "clsx": "^2.1.0",
85
+ "clsx": "^2.1.1",
88
86
  "cmdk": "^1.0.0",
89
- "framer-motion": "^11.0.24",
87
+ "framer-motion": "^11.2.10",
90
88
  "i18next": "23.x",
91
- "i18next-browser-languagedetector": "^7.2.1",
89
+ "i18next-browser-languagedetector": "^8.0.0",
92
90
  "lodash-es": "^4.17.21",
93
- "lucide-react": "^0.364.0",
91
+ "lucide-react": "^0.390.0",
94
92
  "react-error-boundary": "^4.0.13",
95
- "react-i18next": "^14.1.0",
96
- "react-resizable-panels": "^2.0.16",
97
- "recharts": "^2.12.3",
98
- "tailwind-merge": "^2.2.2",
93
+ "react-i18next": "^14.1.2",
94
+ "react-resizable-panels": "^2.0.19",
95
+ "recharts": "^2.12.7",
96
+ "tailwind-merge": "^2.3.0",
99
97
  "tailwindcss-animate": "^1.0.7",
100
- "ts-pattern": "^5.1.0",
101
- "type-fest": "^4.15.0",
102
- "vaul": "^0.9.0",
103
- "zod": "^3.22.4",
98
+ "ts-pattern": "^5.1.2",
99
+ "type-fest": "^4.20.0",
100
+ "vaul": "^0.9.1",
101
+ "zod": "^3.23.8",
104
102
  "zustand": "^4.5.2"
105
103
  },
106
104
  "devDependencies": {
107
- "@commitlint/cli": "^19.2.1",
108
- "@commitlint/config-conventional": "^19.1.0",
105
+ "@commitlint/cli": "^19.3.0",
106
+ "@commitlint/config-conventional": "^19.2.2",
109
107
  "@commitlint/types": "^19.0.3",
110
- "@douglasneuroinformatics/eslint-config": "^4.2.1",
108
+ "@douglasneuroinformatics/eslint-config": "^4.2.2",
111
109
  "@semantic-release/changelog": "^6.0.3",
112
110
  "@semantic-release/git": "^10.0.1",
113
- "@semantic-release/npm": "^12.0.0",
114
- "@storybook/addon-essentials": "^8.0.5",
115
- "@storybook/addon-interactions": "^8.0.5",
116
- "@storybook/addon-links": "^8.0.5",
117
- "@storybook/blocks": "^8.0.5",
118
- "@storybook/components": "^8.0.5",
111
+ "@semantic-release/npm": "^12.0.1",
112
+ "@storybook/addon-essentials": "^8.1.6",
113
+ "@storybook/addon-interactions": "^8.1.6",
114
+ "@storybook/addon-links": "^8.1.6",
115
+ "@storybook/blocks": "^8.1.6",
116
+ "@storybook/components": "^8.1.6",
119
117
  "@storybook/icons": "^1.2.9",
120
- "@storybook/manager-api": "^8.0.5",
121
- "@storybook/react": "^8.0.5",
122
- "@storybook/react-vite": "^8.0.5",
123
- "@storybook/theming": "^8.0.5",
124
- "@testing-library/jest-dom": "^6.4.2",
125
- "@testing-library/react": "14.2.2",
118
+ "@storybook/manager-api": "^8.1.6",
119
+ "@storybook/react": "^8.1.6",
120
+ "@storybook/react-vite": "^8.1.6",
121
+ "@storybook/theming": "^8.1.6",
122
+ "@testing-library/dom": "^10.1.0",
123
+ "@testing-library/jest-dom": "^6.4.5",
124
+ "@testing-library/react": "16.0.0",
126
125
  "@testing-library/user-event": "^14.5.2",
127
126
  "@types/lodash-es": "^4.17.12",
128
- "@types/node": "^20.12.3",
129
- "@types/react": "^18.2.74",
130
- "@types/react-dom": "^18.2.23",
131
- "@vitejs/plugin-react-swc": "^3.6.0",
132
- "@vitest/coverage-v8": "^1.4.0",
127
+ "@types/node": "^20.14.2",
128
+ "@types/react": "^18.3.3",
129
+ "@types/react-dom": "^18.3.0",
130
+ "@vitejs/plugin-react-swc": "^3.7.0",
131
+ "@vitest/coverage-v8": "^1.6.0",
133
132
  "autoprefixer": "^10.4.19",
134
133
  "eslint": "^8.57.0",
135
- "happy-dom": "^14.3.10",
134
+ "happy-dom": "^14.12.0",
136
135
  "husky": "^9.0.11",
137
- "jsdom": "24.0.0",
136
+ "jsdom": "24.1.0",
138
137
  "postcss": "^8.4.38",
139
- "prettier": "^3.2.5",
140
- "prettier-plugin-tailwindcss": "^0.5.13",
141
- "semantic-release": "^23.0.7",
138
+ "prettier": "^3.3.1",
139
+ "prettier-plugin-tailwindcss": "^0.6.2",
140
+ "semantic-release": "^24.0.0",
142
141
  "sort-json": "^2.0.1",
143
- "storybook": "^8.0.5",
144
- "storybook-react-i18next": "^3.0.1",
145
- "tailwindcss": "^3.4.3",
146
- "typescript": "~5.4.3",
147
- "vite": "5.2.8",
148
- "vitest": "^1.4.0"
142
+ "storybook": "^8.1.6",
143
+ "storybook-react-i18next": "^3.1.1",
144
+ "tailwindcss": "^3.4.4",
145
+ "typescript": "~5.4.5",
146
+ "vite": "5.2.13",
147
+ "vitest": "^1.6.0"
149
148
  },
150
149
  "scripts": {
151
150
  "build": "rm -rf dist && tsc -b tsconfig.build.json && cp -r src/styles dist",
package/src/components/ClientTable/ClientTable.tsx CHANGED
@@ -33,7 +33,6 @@ export type ClientTableColumn<T extends ClientTableEntry> = {
33
33
  field: ClientFieldFactory<T> | keyof T;
34
34
 
35
35
  /** Override the default formatter for this field */
36
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
37
36
  formatter?: (value: any) => string;
38
37
 
39
38
  /** The label to be displayed on the header */
@@ -58,6 +57,7 @@ export type ClientTableProps<T extends ClientTableEntry> = {
58
57
  data: T[];
59
58
  entriesPerPage?: number;
60
59
  minRows?: number;
60
+ noWrap?: boolean;
61
61
  onEntryClick?: (entry: T) => void;
62
62
  };
63
63
 
@@ -68,6 +68,7 @@ export const ClientTable = <T extends ClientTableEntry>({
68
68
  data,
69
69
  entriesPerPage = 10,
70
70
  minRows,
71
+ noWrap,
71
72
  onEntryClick
72
73
  }: ClientTableProps<T>) => {
73
74
  const [currentPage, setCurrentPage] = useState(1);
@@ -121,14 +122,13 @@ export const ClientTable = <T extends ClientTableEntry>({
121
122
  </Table.Header>
122
123
  <Table.Body>
123
124
  {range(nRows).map((i) => {
124
- const entry = currentEntries[i];
125
+ const entry = currentEntries[i] as T | undefined;
126
+ const onClick = onEntryClick && entry ? () => onEntryClick(entry) : undefined;
125
127
  return (
126
128
  <Table.Row
127
- className={cn(typeof onEntryClick === 'function' && 'cursor-pointer hover:backdrop-brightness-95')}
129
+ className={cn(onClick && 'cursor-pointer hover:backdrop-brightness-95')}
128
130
  key={i}
129
- onClick={() => {
130
- onEntryClick?.(entry);
131
- }}
131
+ onClick={onClick}
132
132
  >
133
133
  {columns.map(({ field, formatter }, j) => {
134
134
  let value: unknown;
@@ -141,7 +141,14 @@ export const ClientTable = <T extends ClientTableEntry>({
141
141
  }
142
142
  const formattedValue = entry && formatter ? formatter(value) : defaultFormatter(value);
143
143
  return (
144
- <Table.Cell className={cn('text-ellipsis leading-none', !entry && 'invisible')} key={j}>
144
+ <Table.Cell
145
+ className={cn(
146
+ 'text-ellipsis leading-none',
147
+ !entry && 'opacity-0', // safari does not include borders if invisible
148
+ noWrap && 'max-w-3xl overflow-hidden text-ellipsis whitespace-nowrap'
149
+ )}
150
+ key={j}
151
+ >
145
152
  {formattedValue}
146
153
  </Table.Cell>
147
154
  );