@rc-component/listy 1.1.0 → 1.2.0

package/es/GroupHeader.d.ts

@@ -7,6 +7,7 @@ export interface GroupHeaderProps<T, K extends React.Key = React.Key> {
     prefixCls: string;
     fixed?: boolean;
     sticky?: boolean;
+    className?: string;
     style?: React.CSSProperties;
 }
 declare const GroupHeaderWithRef: <T, K extends React.Key = React.Key>(props: GroupHeaderProps<T, K> & {

package/es/GroupHeader.js

@@ -12,6 +12,7 @@ function GroupHeader(props, ref) {
     prefixCls,
     fixed,
     sticky,
+    className: customClassName,
     style
   } = props;
 
@@ -19,7 +20,7 @@ function GroupHeader(props, ref) {
   const className = clsx(`${prefixCls}-group-header`, {
     [`${prefixCls}-group-header-sticky`]: sticky,
     [`${prefixCls}-group-header-fixed`]: fixed
-  });
+  }, customClassName);
 
   // ============================== Render ==============================
   return /*#__PURE__*/React.createElement("div", {

package/es/List.d.ts

@@ -2,6 +2,9 @@ import * as React from 'react';
 import type { Group } from './hooks/useGroupSegments';
 export type RowKey<T> = keyof T | ((item: T) => React.Key);
 export type ScrollAlign = 'top' | 'bottom' | 'auto';
+export type ListySemanticName = 'root' | 'item' | 'groupHeader';
+export type ListyClassNames = Partial<Record<ListySemanticName, string>>;
+export type ListyStyles = Partial<Record<ListySemanticName, React.CSSProperties>>;
 export interface GroupScrollToConfig {
     groupKey: React.Key;
     align?: ScrollAlign;
@@ -29,6 +32,8 @@ export interface ListyProps<T, K extends React.Key = React.Key> {
     virtual?: boolean;
     prefixCls?: string;
     rowKey: RowKey<T>;
+    classNames?: ListyClassNames;
+    styles?: ListyStyles;
     onScroll?: React.UIEventHandler<HTMLElement>;
     itemRender: (item: T, index: number) => React.ReactNode;
 }
@@ -40,6 +45,8 @@ export interface ListComponentProps<T, K extends React.Key = React.Key> {
     group?: Group<T, K>;
     prefixCls: string;
     rowKey: RowKey<T>;
+    classNames?: ListyClassNames;
+    styles?: ListyStyles;
     onScroll?: React.UIEventHandler<HTMLElement>;
     itemRender: (item: T, index: number) => React.ReactNode;
 }

package/es/RawList/index.js

@@ -1,5 +1,6 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import * as React from 'react';
+import clsx from 'clsx';
 import { useEvent } from '@rc-component/util';
 import GroupHeader from "../GroupHeader";
 import useGroupSegments from "../hooks/useGroupSegments";
@@ -17,7 +18,9 @@ function RawList(props, ref) {
     onScroll,
     prefixCls,
     rowKey,
-    sticky
+    sticky,
+    classNames,
+    styles
   } = props;
 
   // =============================== Refs ===============================
@@ -43,12 +46,15 @@ function RawList(props, ref) {
     const scrollTargetProps = getScrollTargetProps(key);
     return /*#__PURE__*/React.createElement("div", _extends({
       key: key,
-      className: `${prefixCls}-item`,
-      style: sticky && groupKey !== undefined ? {
-        scrollMarginTop: `var(--${prefixCls}-item-scroll-margin-top, 0px)`
-      } : undefined
+      className: clsx(`${prefixCls}-item`, classNames?.item),
+      style: {
+        ...styles?.item,
+        ...(sticky && groupKey !== undefined ? {
+          scrollMarginTop: `var(--${prefixCls}-item-scroll-margin-top, 0px)`
+        } : undefined)
+      }
     }, scrollTargetProps), itemRender(item, index));
-  }, [getItemKey, getScrollTargetProps, itemRender, prefixCls, sticky]);
+  }, [classNames?.item, getItemKey, getScrollTargetProps, itemRender, prefixCls, sticky, styles?.item]);
 
   // ============================= Content ==============================
   const rawContent = group ? Array.from(groupData, ([groupKey, groupItems]) => {
@@ -63,7 +69,9 @@ function RawList(props, ref) {
       groupKey: groupKey,
       groupItems: currentGroupItems,
       prefixCls: prefixCls,
-      sticky: sticky
+      sticky: sticky,
+      className: classNames?.groupHeader,
+      style: styles?.groupHeader
     }), groupItems.map(({
       item,
       index
@@ -77,11 +85,12 @@ function RawList(props, ref) {
   // ============================== Render ==============================
   return /*#__PURE__*/React.createElement("div", {
     ref: holderRef,
-    className: prefixCls,
+    className: clsx(prefixCls, classNames?.root),
     style: {
       maxHeight: height,
       overflowY: height === undefined ? undefined : 'auto',
-      overflowAnchor: 'none'
+      overflowAnchor: 'none',
+      ...styles?.root
     },
     onScroll: onScroll
   }, rawContent);

package/es/VirtualList/index.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import clsx from 'clsx';
 import RcVirtualList from '@rc-component/virtual-list';
 import { useEvent } from '@rc-component/util';
 import GroupHeader from "../GroupHeader";
@@ -19,7 +20,9 @@ function VirtualList(props, ref) {
     onScroll,
     prefixCls,
     rowKey,
-    sticky
+    sticky,
+    classNames,
+    styles
   } = props;
 
   // =============================== Refs ===============================
@@ -117,7 +120,9 @@ function VirtualList(props, ref) {
     groupKeys,
     groupKeyToItems,
     prefixCls,
-    listRef
+    listRef,
+    headerClassName: classNames?.groupHeader,
+    headerStyle: styles?.groupHeader
   });
 
   // ============================ Render Row ============================
@@ -127,9 +132,11 @@ function VirtualList(props, ref) {
       group: group,
       groupKey: groupKey,
       groupItems: groupItems,
-      prefixCls: prefixCls
+      prefixCls: prefixCls,
+      className: classNames?.groupHeader,
+      style: styles?.groupHeader
     });
-  }, [group, groupKeyToItems, prefixCls]);
+  }, [classNames?.groupHeader, group, groupKeyToItems, prefixCls, styles?.groupHeader]);
 
   // ============================== Render ==============================
   return /*#__PURE__*/React.createElement(RcVirtualList, {
@@ -142,9 +149,12 @@ function VirtualList(props, ref) {
     onScroll: onScroll,
     prefixCls: prefixCls,
     virtual: true,
-    extraRender: extraRender
+    extraRender: extraRender,
+    className: classNames?.root,
+    style: styles?.root
   }, row => row.type === 'header' ? renderHeaderRow(row.groupKey) : /*#__PURE__*/React.createElement("div", {
-    className: `${prefixCls}-item`
+    className: clsx(`${prefixCls}-item`, classNames?.item),
+    style: styles?.item
   }, itemRender(row.item, row.index)));
 }
 const VirtualListWithRef = /*#__PURE__*/React.forwardRef(VirtualList);

package/es/VirtualList/useStickyGroupHeader.d.ts

@@ -9,6 +9,8 @@ export interface StickyHeaderParams<T, K extends React.Key = React.Key> {
     groupKeyToItems: Map<K, T[]>;
     prefixCls: string;
     listRef: React.RefObject<RcVirtualListRef | null>;
+    headerClassName?: string;
+    headerStyle?: React.CSSProperties;
 }
 export default function useStickyGroupHeader<T, K extends React.Key = React.Key>(params: StickyHeaderParams<T, K>): (info: ExtraRenderInfo) => React.JSX.Element;
 export {};

package/es/VirtualList/useStickyGroupHeader.js

@@ -32,7 +32,9 @@ export default function useStickyGroupHeader(params) {
     groupKeys,
     groupKeyToItems,
     prefixCls,
-    listRef
+    listRef,
+    headerClassName,
+    headerStyle
   } = params;
 
   // ============================ Extra Render ==========================
@@ -71,11 +73,16 @@ export default function useStickyGroupHeader(params) {
       groupKey: currGroupKey,
       groupItems: groupItems,
       prefixCls: prefixCls,
+      className: headerClassName
+      // `top` is the computed sticky-push offset and must win over any
+      // user-supplied top in headerStyle, or the sticky behavior breaks.
+      ,
       style: {
+        ...headerStyle,
         top
       }
     })));
-  }, [enabled, group, groupKeys, groupKeyToItems, prefixCls, listRef]);
+  }, [enabled, group, groupKeys, groupKeyToItems, prefixCls, listRef, headerClassName, headerStyle]);
 
   // ============================== Return ==============================
   return extraRender;

package/es/index.d.ts

@@ -1,3 +1,3 @@
 import Listy from './List';
-export type { ListyRef, ListyProps } from './List';
+export type { ListyRef, ListyProps, ListySemanticName, ListyClassNames, ListyStyles, } from './List';
 export default Listy;

package/lib/GroupHeader.d.ts

@@ -7,6 +7,7 @@ export interface GroupHeaderProps<T, K extends React.Key = React.Key> {
     prefixCls: string;
     fixed?: boolean;
     sticky?: boolean;
+    className?: string;
     style?: React.CSSProperties;
 }
 declare const GroupHeaderWithRef: <T, K extends React.Key = React.Key>(props: GroupHeaderProps<T, K> & {

package/lib/GroupHeader.js

@@ -20,6 +20,7 @@ function GroupHeader(props, ref) {
     prefixCls,
     fixed,
     sticky,
+    className: customClassName,
     style
   } = props;
 
@@ -27,7 +28,7 @@ function GroupHeader(props, ref) {
   const className = (0, _clsx.default)(`${prefixCls}-group-header`, {
     [`${prefixCls}-group-header-sticky`]: sticky,
     [`${prefixCls}-group-header-fixed`]: fixed
-  });
+  }, customClassName);
 
   // ============================== Render ==============================
   return /*#__PURE__*/React.createElement("div", {

package/lib/List.d.ts

@@ -2,6 +2,9 @@ import * as React from 'react';
 import type { Group } from './hooks/useGroupSegments';
 export type RowKey<T> = keyof T | ((item: T) => React.Key);
 export type ScrollAlign = 'top' | 'bottom' | 'auto';
+export type ListySemanticName = 'root' | 'item' | 'groupHeader';
+export type ListyClassNames = Partial<Record<ListySemanticName, string>>;
+export type ListyStyles = Partial<Record<ListySemanticName, React.CSSProperties>>;
 export interface GroupScrollToConfig {
     groupKey: React.Key;
     align?: ScrollAlign;
@@ -29,6 +32,8 @@ export interface ListyProps<T, K extends React.Key = React.Key> {
     virtual?: boolean;
     prefixCls?: string;
     rowKey: RowKey<T>;
+    classNames?: ListyClassNames;
+    styles?: ListyStyles;
     onScroll?: React.UIEventHandler<HTMLElement>;
     itemRender: (item: T, index: number) => React.ReactNode;
 }
@@ -40,6 +45,8 @@ export interface ListComponentProps<T, K extends React.Key = React.Key> {
     group?: Group<T, K>;
     prefixCls: string;
     rowKey: RowKey<T>;
+    classNames?: ListyClassNames;
+    styles?: ListyStyles;
     onScroll?: React.UIEventHandler<HTMLElement>;
     itemRender: (item: T, index: number) => React.ReactNode;
 }

package/lib/RawList/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _util = require("@rc-component/util");
 var _GroupHeader = _interopRequireDefault(require("../GroupHeader"));
 var _useGroupSegments = _interopRequireDefault(require("../hooks/useGroupSegments"));
@@ -25,7 +26,9 @@ function RawList(props, ref) {
     onScroll,
     prefixCls,
     rowKey,
-    sticky
+    sticky,
+    classNames,
+    styles
   } = props;
 
   // =============================== Refs ===============================
@@ -51,12 +54,15 @@ function RawList(props, ref) {
     const scrollTargetProps = getScrollTargetProps(key);
     return /*#__PURE__*/React.createElement("div", _extends({
       key: key,
-      className: `${prefixCls}-item`,
-      style: sticky && groupKey !== undefined ? {
-        scrollMarginTop: `var(--${prefixCls}-item-scroll-margin-top, 0px)`
-      } : undefined
+      className: (0, _clsx.default)(`${prefixCls}-item`, classNames?.item),
+      style: {
+        ...styles?.item,
+        ...(sticky && groupKey !== undefined ? {
+          scrollMarginTop: `var(--${prefixCls}-item-scroll-margin-top, 0px)`
+        } : undefined)
+      }
     }, scrollTargetProps), itemRender(item, index));
-  }, [getItemKey, getScrollTargetProps, itemRender, prefixCls, sticky]);
+  }, [classNames?.item, getItemKey, getScrollTargetProps, itemRender, prefixCls, sticky, styles?.item]);
 
   // ============================= Content ==============================
   const rawContent = group ? Array.from(groupData, ([groupKey, groupItems]) => {
@@ -71,7 +77,9 @@ function RawList(props, ref) {
       groupKey: groupKey,
       groupItems: currentGroupItems,
       prefixCls: prefixCls,
-      sticky: sticky
+      sticky: sticky,
+      className: classNames?.groupHeader,
+      style: styles?.groupHeader
     }), groupItems.map(({
       item,
       index
@@ -85,11 +93,12 @@ function RawList(props, ref) {
   // ============================== Render ==============================
   return /*#__PURE__*/React.createElement("div", {
     ref: holderRef,
-    className: prefixCls,
+    className: (0, _clsx.default)(prefixCls, classNames?.root),
     style: {
       maxHeight: height,
       overflowY: height === undefined ? undefined : 'auto',
-      overflowAnchor: 'none'
+      overflowAnchor: 'none',
+      ...styles?.root
     },
     onScroll: onScroll
   }, rawContent);

package/lib/VirtualList/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _virtualList = _interopRequireDefault(require("@rc-component/virtual-list"));
 var _util = require("@rc-component/util");
 var _GroupHeader = _interopRequireDefault(require("../GroupHeader"));
@@ -27,7 +28,9 @@ function VirtualList(props, ref) {
     onScroll,
     prefixCls,
     rowKey,
-    sticky
+    sticky,
+    classNames,
+    styles
   } = props;
 
   // =============================== Refs ===============================
@@ -125,7 +128,9 @@ function VirtualList(props, ref) {
     groupKeys,
     groupKeyToItems,
     prefixCls,
-    listRef
+    listRef,
+    headerClassName: classNames?.groupHeader,
+    headerStyle: styles?.groupHeader
   });
 
   // ============================ Render Row ============================
@@ -135,9 +140,11 @@ function VirtualList(props, ref) {
       group: group,
       groupKey: groupKey,
       groupItems: groupItems,
-      prefixCls: prefixCls
+      prefixCls: prefixCls,
+      className: classNames?.groupHeader,
+      style: styles?.groupHeader
     });
-  }, [group, groupKeyToItems, prefixCls]);
+  }, [classNames?.groupHeader, group, groupKeyToItems, prefixCls, styles?.groupHeader]);
 
   // ============================== Render ==============================
   return /*#__PURE__*/React.createElement(_virtualList.default, {
@@ -150,9 +157,12 @@ function VirtualList(props, ref) {
     onScroll: onScroll,
     prefixCls: prefixCls,
     virtual: true,
-    extraRender: extraRender
+    extraRender: extraRender,
+    className: classNames?.root,
+    style: styles?.root
   }, row => row.type === 'header' ? renderHeaderRow(row.groupKey) : /*#__PURE__*/React.createElement("div", {
-    className: `${prefixCls}-item`
+    className: (0, _clsx.default)(`${prefixCls}-item`, classNames?.item),
+    style: styles?.item
   }, itemRender(row.item, row.index)));
 }
 const VirtualListWithRef = /*#__PURE__*/React.forwardRef(VirtualList);

package/lib/VirtualList/useStickyGroupHeader.d.ts

@@ -9,6 +9,8 @@ export interface StickyHeaderParams<T, K extends React.Key = React.Key> {
     groupKeyToItems: Map<K, T[]>;
     prefixCls: string;
     listRef: React.RefObject<RcVirtualListRef | null>;
+    headerClassName?: string;
+    headerStyle?: React.CSSProperties;
 }
 export default function useStickyGroupHeader<T, K extends React.Key = React.Key>(params: StickyHeaderParams<T, K>): (info: ExtraRenderInfo) => React.JSX.Element;
 export {};

package/lib/VirtualList/useStickyGroupHeader.js

@@ -40,7 +40,9 @@ function useStickyGroupHeader(params) {
     groupKeys,
     groupKeyToItems,
     prefixCls,
-    listRef
+    listRef,
+    headerClassName,
+    headerStyle
   } = params;
 
   // ============================ Extra Render ==========================
@@ -79,11 +81,16 @@ function useStickyGroupHeader(params) {
       groupKey: currGroupKey,
       groupItems: groupItems,
       prefixCls: prefixCls,
+      className: headerClassName
+      // `top` is the computed sticky-push offset and must win over any
+      // user-supplied top in headerStyle, or the sticky behavior breaks.
+      ,
       style: {
+        ...headerStyle,
         top
       }
     })));
-  }, [enabled, group, groupKeys, groupKeyToItems, prefixCls, listRef]);
+  }, [enabled, group, groupKeys, groupKeyToItems, prefixCls, listRef, headerClassName, headerStyle]);
 
   // ============================== Return ==============================
   return extraRender;

package/lib/index.d.ts

@@ -1,3 +1,3 @@
 import Listy from './List';
-export type { ListyRef, ListyProps } from './List';
+export type { ListyRef, ListyProps, ListySemanticName, ListyClassNames, ListyStyles, } from './List';
 export default Listy;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/listy",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "React Listy Component",
   "keywords": [
     "react",