@patternfly/react-data-view 6.4.0-prerelease.10 → 6.4.0-prerelease.12

package/dist/cjs/DataViewTh/DataViewTh.d.ts

@@ -5,13 +5,13 @@ export interface DataViewThResizableProps {
     isResizable?: boolean;
     /** Callback after the column is resized. Returns the triggering event, the column id passed in via cell props, and the new width of the column. */
     onResize?: (event: ReactMouseEvent | MouseEvent | ReactKeyboardEvent | KeyboardEvent | TouchEvent, id: string | number | undefined, width: number) => void;
-    /** Width of the column */
+    /** Starting width in pixels of the column */
     width?: number;
-    /** Minimum width of the column */
+    /** Minimum resize width in pixels of the column */
     minWidth?: number;
-    /** Increment for keyboard navigation */
+    /** Increment in pixels for keyboard navigation */
     increment?: number;
-    /** Increment for keyboard navigation while shift is held */
+    /** Increment in pixels for keyboard navigation while shift is held */
     shiftIncrement?: number;
     /** Provides an accessible name for the resizable column via a human readable string. */
     resizeButtonAriaLabel?: string;

package/dist/cjs/DataViewTh/DataViewTh.js

@@ -216,7 +216,14 @@ const DataViewTh = (_a) => {
         onResize && onResize(e, thProps === null || thProps === void 0 ? void 0 : thProps.id, newSize);
     };
     const resizableContent = ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "aria-live": "polite", className: "pf-v6-screen-reader", children: screenReaderText }), (0, jsx_runtime_1.jsx)(react_core_1.Button, { ref: resizeButtonRef, variant: "plain", hasNoPadding: true, icon: (0, jsx_runtime_1.jsx)(ResizeIcon, {}), onMouseDown: handleMousedown, onKeyDown: handleKeys, onTouchStart: handleTouchStart, "aria-label": resizeButtonAriaLabel, className: classes.dataViewResizableButton })] }));
-    return ((0, jsx_runtime_1.jsx)(react_table_1.Th, Object.assign({}, thProps, props, { style: width > 0 ? { minWidth: width } : undefined, ref: thRef, modifier: "truncate", className: dataViewThClassName }, (isResizable && { additionalContent: resizableContent }), { children: content })));
+    const classNames = [];
+    if (thProps === null || thProps === void 0 ? void 0 : thProps.className) {
+        classNames.push(thProps.className);
+    }
+    if (dataViewThClassName) {
+        classNames.push(dataViewThClassName);
+    }
+    return ((0, jsx_runtime_1.jsx)(react_table_1.Th, Object.assign({ modifier: "truncate" }, thProps, props, { ref: thRef, style: width > 0 ? Object.assign(Object.assign({}, thProps === null || thProps === void 0 ? void 0 : thProps.style), { minWidth: width }) : thProps === null || thProps === void 0 ? void 0 : thProps.style, className: classNames.length > 0 ? classNames.join(' ') : undefined }, (isResizable && { additionalContent: resizableContent }), { children: content })));
 };
 exports.DataViewTh = DataViewTh;
 exports.default = exports.DataViewTh;

package/dist/cjs/Hooks/selection.d.ts

@@ -1,12 +1,12 @@
-export interface UseDataViewSelectionProps {
+export interface UseDataViewSelectionProps<T = any> {
     /** Function to compare items when checking if item is selected */
-    matchOption: (item: any, another: any) => boolean;
+    matchOption: (item: T, another: T) => boolean;
     /** Array of initially selected entries */
-    initialSelected?: (any)[];
+    initialSelected?: (T)[];
 }
-export declare const useDataViewSelection: (props?: UseDataViewSelectionProps) => {
-    selected: any[];
-    onSelect: (isSelecting: boolean, items?: any[] | any) => void;
-    isSelected: (item: any) => boolean;
-    setSelected: (items: any[]) => void;
+export declare const useDataViewSelection: <T = any>(props?: UseDataViewSelectionProps<T>) => {
+    selected: T[];
+    onSelect: (isSelecting: boolean, items?: T[] | T) => void;
+    isSelected: (item: T) => boolean;
+    setSelected: (items: T[]) => void;
 };

package/dist/esm/DataViewTh/DataViewTh.d.ts

@@ -5,13 +5,13 @@ export interface DataViewThResizableProps {
     isResizable?: boolean;
     /** Callback after the column is resized. Returns the triggering event, the column id passed in via cell props, and the new width of the column. */
     onResize?: (event: ReactMouseEvent | MouseEvent | ReactKeyboardEvent | KeyboardEvent | TouchEvent, id: string | number | undefined, width: number) => void;
-    /** Width of the column */
+    /** Starting width in pixels of the column */
     width?: number;
-    /** Minimum width of the column */
+    /** Minimum resize width in pixels of the column */
     minWidth?: number;
-    /** Increment for keyboard navigation */
+    /** Increment in pixels for keyboard navigation */
     increment?: number;
-    /** Increment for keyboard navigation while shift is held */
+    /** Increment in pixels for keyboard navigation while shift is held */
     shiftIncrement?: number;
     /** Provides an accessible name for the resizable column via a human readable string. */
     resizeButtonAriaLabel?: string;

package/dist/esm/DataViewTh/DataViewTh.js

@@ -210,6 +210,13 @@ export const DataViewTh = (_a) => {
         onResize && onResize(e, thProps === null || thProps === void 0 ? void 0 : thProps.id, newSize);
     };
     const resizableContent = (_jsxs(Fragment, { children: [_jsx("div", { "aria-live": "polite", className: "pf-v6-screen-reader", children: screenReaderText }), _jsx(Button, { ref: resizeButtonRef, variant: "plain", hasNoPadding: true, icon: _jsx(ResizeIcon, {}), onMouseDown: handleMousedown, onKeyDown: handleKeys, onTouchStart: handleTouchStart, "aria-label": resizeButtonAriaLabel, className: classes.dataViewResizableButton })] }));
-    return (_jsx(Th, Object.assign({}, thProps, props, { style: width > 0 ? { minWidth: width } : undefined, ref: thRef, modifier: "truncate", className: dataViewThClassName }, (isResizable && { additionalContent: resizableContent }), { children: content })));
+    const classNames = [];
+    if (thProps === null || thProps === void 0 ? void 0 : thProps.className) {
+        classNames.push(thProps.className);
+    }
+    if (dataViewThClassName) {
+        classNames.push(dataViewThClassName);
+    }
+    return (_jsx(Th, Object.assign({ modifier: "truncate" }, thProps, props, { ref: thRef, style: width > 0 ? Object.assign(Object.assign({}, thProps === null || thProps === void 0 ? void 0 : thProps.style), { minWidth: width }) : thProps === null || thProps === void 0 ? void 0 : thProps.style, className: classNames.length > 0 ? classNames.join(' ') : undefined }, (isResizable && { additionalContent: resizableContent }), { children: content })));
 };
 export default DataViewTh;

package/dist/esm/Hooks/selection.d.ts

@@ -1,12 +1,12 @@
-export interface UseDataViewSelectionProps {
+export interface UseDataViewSelectionProps<T = any> {
     /** Function to compare items when checking if item is selected */
-    matchOption: (item: any, another: any) => boolean;
+    matchOption: (item: T, another: T) => boolean;
     /** Array of initially selected entries */
-    initialSelected?: (any)[];
+    initialSelected?: (T)[];
 }
-export declare const useDataViewSelection: (props?: UseDataViewSelectionProps) => {
-    selected: any[];
-    onSelect: (isSelecting: boolean, items?: any[] | any) => void;
-    isSelected: (item: any) => boolean;
-    setSelected: (items: any[]) => void;
+export declare const useDataViewSelection: <T = any>(props?: UseDataViewSelectionProps<T>) => {
+    selected: T[];
+    onSelect: (isSelecting: boolean, items?: T[] | T) => void;
+    isSelected: (item: T) => boolean;
+    setSelected: (items: T[]) => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-data-view",
-  "version": "6.4.0-prerelease.10",
+  "version": "6.4.0-prerelease.12",
   "description": "Data view used for Red Hat projects.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/DataViewTh/DataViewTh.tsx

@@ -58,13 +58,13 @@ export interface DataViewThResizableProps {
     id: string | number | undefined,
     width: number
   ) => void;
-  /** Width of the column */
+  /** Starting width in pixels of the column */
   width?: number;
-  /** Minimum width of the column */
+  /** Minimum resize width in pixels of the column */
   minWidth?: number;
-  /** Increment for keyboard navigation */
+  /** Increment in pixels for keyboard navigation */
   increment?: number;
-  /** Increment for keyboard navigation while shift is held */
+  /** Increment in pixels for keyboard navigation while shift is held */
   shiftIncrement?: number;
   /** Provides an accessible name for the resizable column via a human readable string. */
   resizeButtonAriaLabel?: string;
@@ -324,14 +324,22 @@ export const DataViewTh: FC<DataViewThProps> = ({
     </Fragment>
   );
 
+  const classNames: string[] = [];
+  if (thProps?.className) {
+    classNames.push(thProps.className);
+  }
+  if (dataViewThClassName) {
+    classNames.push(dataViewThClassName);
+  }
+
   return (
     <Th
+      modifier="truncate"
       {...thProps}
       {...props}
-      style={width > 0 ? { minWidth: width } : undefined}
       ref={thRef}
-      modifier="truncate"
-      className={dataViewThClassName}
+      style={width > 0 ? { ...thProps?.style, minWidth: width } : thProps?.style}
+      className={classNames.length > 0 ? classNames.join(' ') : undefined}
       {...(isResizable && { additionalContent: resizableContent })}
     >
       {content}

package/src/Hooks/selection.ts

@@ -1,18 +1,18 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState } from "react";
 
-export interface UseDataViewSelectionProps {
+export interface UseDataViewSelectionProps<T = any> {
   /** Function to compare items when checking if item is selected */
-  matchOption: (item: any, another: any) => boolean;
+  matchOption: (item: T, another: T) => boolean;
   /** Array of initially selected entries */
-  initialSelected?: (any)[];
+  initialSelected?: (T)[];
 }
 
-export const useDataViewSelection = (props?: UseDataViewSelectionProps) => {
-  const [ selected, setSelected ] = useState<any[]>(props?.initialSelected ?? []);
+export const useDataViewSelection = <T = any>(props?: UseDataViewSelectionProps<T>) => {
+  const [ selected, setSelected ] = useState<T[]>(props?.initialSelected ?? []);
   const matchOption = props?.matchOption ? props.matchOption : (option, another) => (option === another);
 
-  const onSelect = (isSelecting: boolean, items?: any[] | any) => {
+  const onSelect = (isSelecting: boolean, items?: T[] | T) => {
     isSelecting && items ?
       setSelected(prev => {
         const newSelectedItems = [ ...prev ];
@@ -22,9 +22,9 @@ export const useDataViewSelection = (props?: UseDataViewSelectionProps) => {
       : setSelected(items ? prev => prev.filter(prevSelected => !(Array.isArray(items) ? items : [ items ]).some(item => matchOption(item, prevSelected))) : []);
   };
   
-  const isSelected = (item: any): boolean => Boolean(selected.find(selected => matchOption(selected, item)));
+  const isSelected = (item: T): boolean => Boolean(selected.find(selected => matchOption(selected, item)));
 
-  const setSelectedItems = (items: any[]) => {
+  const setSelectedItems = (items: T[]) => {
     setSelected(items);
   };