@jobber/components 6.8.0 → 6.9.0

package/dist/List/List.d.ts

@@ -8,6 +8,7 @@ interface ListProps<T extends BaseListItemProps = ListItemProps> {
     /**
      * A function that will be called for each item instead of the default
      * rendering
+     * @argument item - The item to render
      */
     readonly customRenderItem?: (item: T) => React.ReactNode;
     /**
@@ -15,6 +16,26 @@ interface ListProps<T extends BaseListItemProps = ListItemProps> {
      * when used with customRenderItem.
      */
     readonly customItemStyles?: boolean;
+    /**
+     * A function that will be called for each section heading instead of the default
+     * rendering
+     * @argument sectionName - The name of the section to render
+     */
+    readonly customRenderSection?: (sectionName: string) => React.ReactNode;
+    /**
+     * Set to true for more control over the section heading styles. Only modifies styles
+     * when used with customRenderItem.
+     */
+    readonly customSectionStyles?: boolean;
+    /**
+     * An ID of an element that provides the labelling for this list.
+     */
+    readonly labelledBy?: string;
+    /**
+     * A default section header value for items that do not have a section.
+     * @default "Other"
+     */
+    readonly defaultSectionHeader?: string;
 }
-export declare function List<T extends BaseListItemProps = ListItemProps>({ items, customRenderItem, customItemStyles, }: ListProps<T>): JSX.Element;
+export declare function List<T extends BaseListItemProps = ListItemProps>({ items, customRenderItem, customItemStyles, customRenderSection, customSectionStyles, defaultSectionHeader, labelledBy, }: ListProps<T>): JSX.Element;
 export {};

package/dist/List-cjs.js

@@ -165,31 +165,37 @@ var sectionStyles = {"sectionHeader":"htH4y2JBFNQ-","spinning":"Y3FXizLWanA-"};
 
 var styles = {"list":"sFlecO8-wnY-","item":"dbZy6dviEis-","section":"vz43PAcPYt0-","spinning":"gv8zs1Wo4EY-"};
 
-function List({ items, customRenderItem, customItemStyles, }) {
+function List({ items, customRenderItem, customItemStyles, customRenderSection, customSectionStyles, defaultSectionHeader = "Other", labelledBy, }) {
     const isSectioned = items.some(item => "section" in item && item.section);
     if (isSectioned) {
-        return (React.createElement(SectionedList, { items: items, customRenderItem: customRenderItem, customItemStyles: customItemStyles }));
+        return (React.createElement(SectionedList, { items: items, customRenderItem: customRenderItem, customItemStyles: customItemStyles, customRenderSection: customRenderSection, customSectionStyles: customSectionStyles, defaultSectionHeader: defaultSectionHeader, labelledBy: labelledBy }));
     }
     else {
-        return (React.createElement(DisplayList, { items: items, customRenderItem: customRenderItem, customItemStyles: customItemStyles }));
+        return (React.createElement(DisplayList, { items: items, customRenderItem: customRenderItem, customItemStyles: customItemStyles, labelledBy: labelledBy }));
     }
 }
-function DisplayList({ items, customRenderItem, customItemStyles, }) {
+function DisplayList({ items, customRenderItem, customItemStyles, labelledBy, }) {
     const omitDefaultStyles = customRenderItem && customItemStyles;
     const itemClassNames = classnames(!omitDefaultStyles && styles.item);
-    return (React.createElement("ul", { className: styles.list }, items.map(item => (React.createElement("li", { key: item.id, className: itemClassNames },
+    return (React.createElement("ul", { className: styles.list, "aria-labelledby": labelledBy }, items.map(item => (React.createElement("li", { key: item.id, className: itemClassNames },
         React.createElement(ListItem, Object.assign({}, item, { customRenderItem: customRenderItem, customItemStyles: customItemStyles })))))));
 }
-function SectionedList({ items, customRenderItem, customItemStyles, }) {
-    const sectionedItems = groupBy$1(items, item => _baseEach.get(item, "section", "Other"));
-    const sectionHeaderClassNames = classnames(sectionStyles.sectionHeader);
+function SectionedList({ items, customRenderItem, customItemStyles, customRenderSection, customSectionStyles, defaultSectionHeader, labelledBy, }) {
+    const sectionedItems = groupBy$1(items, item => _baseEach.get(item, "section", defaultSectionHeader));
     const omitDefaultStyles = customRenderItem && customItemStyles;
+    const omitDefaultSectionStyles = customRenderSection && customSectionStyles;
     const itemClassNames = classnames(!omitDefaultStyles && styles.item);
-    return (React.createElement("ul", { className: styles.list }, Object.keys(sectionedItems).map(sectionName => (React.createElement("li", { key: sectionName, className: styles.section },
-        React.createElement("div", { className: sectionHeaderClassNames },
-            React.createElement(Typography.Typography, { element: "h4", fontWeight: "bold", size: "large" }, sectionName)),
-        React.createElement("ul", { className: styles.list }, sectionedItems[sectionName].map(item => (React.createElement("li", { key: item.id, className: itemClassNames },
-            React.createElement(ListItem, Object.assign({}, item, { customRenderItem: customRenderItem, customItemStyles: customItemStyles })))))))))));
+    const sectionHeaderClassNames = classnames(!omitDefaultSectionStyles && sectionStyles.sectionHeader);
+    return (React.createElement("ul", { className: styles.list, "aria-labelledby": labelledBy }, Object.keys(sectionedItems).map(sectionName => {
+        return (React.createElement("li", { key: sectionName, className: classnames(!omitDefaultSectionStyles && styles.section) },
+            getSectionHeader(sectionName, sectionHeaderClassNames, customRenderSection),
+            React.createElement("ul", { className: styles.list }, sectionedItems[sectionName].map(item => (React.createElement("li", { key: item.id, className: itemClassNames },
+                React.createElement(ListItem, Object.assign({}, item, { customRenderItem: customRenderItem, customItemStyles: customItemStyles }))))))));
+    })));
+}
+function getSectionHeader(sectionName, sectionHeaderClassNames, customRenderSection) {
+    const sectionHeader = customRenderSection ? (customRenderSection(sectionName)) : (React.createElement(Typography.Typography, { element: "h4", fontWeight: "bold", size: "large" }, sectionName));
+    return React.createElement("div", { className: sectionHeaderClassNames }, sectionHeader);
 }
 
 exports.List = List;

package/dist/List-es.js

@@ -163,31 +163,37 @@ var sectionStyles = {"sectionHeader":"htH4y2JBFNQ-","spinning":"Y3FXizLWanA-"};
 
 var styles = {"list":"sFlecO8-wnY-","item":"dbZy6dviEis-","section":"vz43PAcPYt0-","spinning":"gv8zs1Wo4EY-"};
 
-function List({ items, customRenderItem, customItemStyles, }) {
+function List({ items, customRenderItem, customItemStyles, customRenderSection, customSectionStyles, defaultSectionHeader = "Other", labelledBy, }) {
     const isSectioned = items.some(item => "section" in item && item.section);
     if (isSectioned) {
-        return (React.createElement(SectionedList, { items: items, customRenderItem: customRenderItem, customItemStyles: customItemStyles }));
+        return (React.createElement(SectionedList, { items: items, customRenderItem: customRenderItem, customItemStyles: customItemStyles, customRenderSection: customRenderSection, customSectionStyles: customSectionStyles, defaultSectionHeader: defaultSectionHeader, labelledBy: labelledBy }));
     }
     else {
-        return (React.createElement(DisplayList, { items: items, customRenderItem: customRenderItem, customItemStyles: customItemStyles }));
+        return (React.createElement(DisplayList, { items: items, customRenderItem: customRenderItem, customItemStyles: customItemStyles, labelledBy: labelledBy }));
     }
 }
-function DisplayList({ items, customRenderItem, customItemStyles, }) {
+function DisplayList({ items, customRenderItem, customItemStyles, labelledBy, }) {
     const omitDefaultStyles = customRenderItem && customItemStyles;
     const itemClassNames = classnames(!omitDefaultStyles && styles.item);
-    return (React.createElement("ul", { className: styles.list }, items.map(item => (React.createElement("li", { key: item.id, className: itemClassNames },
+    return (React.createElement("ul", { className: styles.list, "aria-labelledby": labelledBy }, items.map(item => (React.createElement("li", { key: item.id, className: itemClassNames },
         React.createElement(ListItem, Object.assign({}, item, { customRenderItem: customRenderItem, customItemStyles: customItemStyles })))))));
 }
-function SectionedList({ items, customRenderItem, customItemStyles, }) {
-    const sectionedItems = groupBy$1(items, item => get(item, "section", "Other"));
-    const sectionHeaderClassNames = classnames(sectionStyles.sectionHeader);
+function SectionedList({ items, customRenderItem, customItemStyles, customRenderSection, customSectionStyles, defaultSectionHeader, labelledBy, }) {
+    const sectionedItems = groupBy$1(items, item => get(item, "section", defaultSectionHeader));
     const omitDefaultStyles = customRenderItem && customItemStyles;
+    const omitDefaultSectionStyles = customRenderSection && customSectionStyles;
     const itemClassNames = classnames(!omitDefaultStyles && styles.item);
-    return (React.createElement("ul", { className: styles.list }, Object.keys(sectionedItems).map(sectionName => (React.createElement("li", { key: sectionName, className: styles.section },
-        React.createElement("div", { className: sectionHeaderClassNames },
-            React.createElement(Typography, { element: "h4", fontWeight: "bold", size: "large" }, sectionName)),
-        React.createElement("ul", { className: styles.list }, sectionedItems[sectionName].map(item => (React.createElement("li", { key: item.id, className: itemClassNames },
-            React.createElement(ListItem, Object.assign({}, item, { customRenderItem: customRenderItem, customItemStyles: customItemStyles })))))))))));
+    const sectionHeaderClassNames = classnames(!omitDefaultSectionStyles && sectionStyles.sectionHeader);
+    return (React.createElement("ul", { className: styles.list, "aria-labelledby": labelledBy }, Object.keys(sectionedItems).map(sectionName => {
+        return (React.createElement("li", { key: sectionName, className: classnames(!omitDefaultSectionStyles && styles.section) },
+            getSectionHeader(sectionName, sectionHeaderClassNames, customRenderSection),
+            React.createElement("ul", { className: styles.list }, sectionedItems[sectionName].map(item => (React.createElement("li", { key: item.id, className: itemClassNames },
+                React.createElement(ListItem, Object.assign({}, item, { customRenderItem: customRenderItem, customItemStyles: customItemStyles }))))))));
+    })));
+}
+function getSectionHeader(sectionName, sectionHeaderClassNames, customRenderSection) {
+    const sectionHeader = customRenderSection ? (customRenderSection(sectionName)) : (React.createElement(Typography, { element: "h4", fontWeight: "bold", size: "large" }, sectionName));
+    return React.createElement("div", { className: sectionHeaderClassNames }, sectionHeader);
 }
 
 export { List as L, ListItem as a };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.8.0",
+  "version": "6.9.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -487,5 +487,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "2f8c566ae6ad904b8532e1a123f454f959e5d328"
+  "gitHead": "e3061144a300e82ee790f5c7d99f90e8e21adfc0"
 }