@patternfly/react-data-view 6.4.0-prerelease.11 → 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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-data-view",
-  "version": "6.4.0-prerelease.11",
+  "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}