@jobber/components 6.62.0 → 6.62.2

package/dist/Checkbox/index.cjs

@@ -55,6 +55,7 @@ function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value,
 }
 
 const CheckboxRebuilt = React.forwardRef(function CheckboxRebuiltInternal({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, invalid, }, ref) {
+    const descriptionIdentifier = React.useId();
     const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled, invalid && styles.invalid);
     const inputClassName = classnames(styles.input, {
         [styles.indeterminate]: indeterminate,
@@ -69,11 +70,11 @@ const CheckboxRebuilt = React.forwardRef(function CheckboxRebuiltInternal({ chec
     return (React.createElement("div", { className: styles.checkBoxParent },
         React.createElement("label", { className: wrapperClassName },
             React.createElement("span", { className: styles.checkHolder },
-                React.createElement("input", { ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
+                React.createElement("input", { ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, "aria-describedby": description ? descriptionIdentifier : undefined, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
                 React.createElement("span", { className: styles.checkBox },
                     React.createElement(Icon.Icon, { name: iconName, color: "surface" }))),
             labelContent && React.createElement("span", { className: styles.label }, labelContent)),
-        description && (React.createElement("div", { className: styles.description }, descriptionContent))));
+        description && (React.createElement("div", { id: descriptionIdentifier, className: styles.description }, descriptionContent))));
 });
 CheckboxRebuilt.displayName = "CheckboxRebuilt";
 

package/dist/Checkbox/index.mjs

@@ -53,6 +53,7 @@ function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value,
 }
 
 const CheckboxRebuilt = forwardRef(function CheckboxRebuiltInternal({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, invalid, }, ref) {
+    const descriptionIdentifier = useId();
     const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled, invalid && styles.invalid);
     const inputClassName = classnames(styles.input, {
         [styles.indeterminate]: indeterminate,
@@ -67,11 +68,11 @@ const CheckboxRebuilt = forwardRef(function CheckboxRebuiltInternal({ checked, d
     return (React__default.createElement("div", { className: styles.checkBoxParent },
         React__default.createElement("label", { className: wrapperClassName },
             React__default.createElement("span", { className: styles.checkHolder },
-                React__default.createElement("input", { ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
+                React__default.createElement("input", { ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, "aria-describedby": description ? descriptionIdentifier : undefined, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
                 React__default.createElement("span", { className: styles.checkBox },
                     React__default.createElement(Icon, { name: iconName, color: "surface" }))),
             labelContent && React__default.createElement("span", { className: styles.label }, labelContent)),
-        description && (React__default.createElement("div", { className: styles.description }, descriptionContent))));
+        description && (React__default.createElement("div", { id: descriptionIdentifier, className: styles.description }, descriptionContent))));
 });
 CheckboxRebuilt.displayName = "CheckboxRebuilt";
 

package/dist/DataList/components/DataListHeader/DataListHeaderCheckbox.d.ts

@@ -3,5 +3,7 @@ import { ReactElement } from "react-markdown/lib/react-markdown";
 interface DataListHeaderCheckbox {
     readonly children: ReactElement;
 }
+export declare const DATA_LIST_HEADER_CHECKBOX_TEST_ID = "ATL-DataList-header-checkbox";
+export declare const DATA_LIST_HEADER_BATCH_SELECT_TEST_ID = "ATL-DataList-header-batch-select";
 export declare function DataListHeaderCheckbox({ children }: DataListHeaderCheckbox): React.JSX.Element;
 export {};

package/dist/DataListHeader-cjs.js

@@ -14,28 +14,25 @@ var DataListBulkActions = require('./DataListBulkActions-cjs.js');
 var useBatchSelect = require('./useBatchSelect-cjs.js');
 var useActiveLayout = require('./useActiveLayout-cjs.js');
 
+const DATA_LIST_HEADER_CHECKBOX_TEST_ID = "ATL-DataList-header-checkbox";
+const DATA_LIST_HEADER_BATCH_SELECT_TEST_ID = "ATL-DataList-header-batch-select";
 function DataListHeaderCheckbox({ children }) {
     const { sm } = useResponsiveSizing.useResponsiveSizing();
     const { data, totalCount } = DataListContext.useDataListContext();
-    const { canSelectAll, hasAtLeastOneSelected, isSelectAll, selectedCount, selectedIDs, selected, onSelectAll, onSelect, } = useBatchSelect.useBatchSelect();
-    // If there's no onSelectAll or onSelect, we don't need to render the checkbox.
-    if (!canSelectAll)
+    const { canSelect, canSelectAll, hasAtLeastOneSelected, isSelectAll, selectedCount, selectedIDs, selected, onSelectAll, onSelect, } = useBatchSelect.useBatchSelect();
+    // If there's no onSelect, we don't need to render the checkbox.
+    // We'll still render the (invisible) checkbox even if only onSelect is provided for alignment.
+    if (!canSelect)
         return children;
     const deselectText = sm ? "Deselect All" : "Deselect";
     const selectedLabel = selectedCount ? `${selectedCount} selected` : "";
     return (React.createElement("div", { className: DataList_module.styles.selectable },
-        React.createElement("div", { className: classnames(DataList_module.styles.selectAllCheckbox, {
+        React.createElement("div", { "data-testid": DATA_LIST_HEADER_CHECKBOX_TEST_ID, className: classnames(DataList_module.styles.selectAllCheckbox, {
                 [DataList_module.styles.visible]: canSelectAll,
             }) },
             React.createElement(Checkbox_index.Checkbox, { checked: isAllSelected(), indeterminate: isIndeterminate(), onChange: handleSelectAll },
                 React.createElement("div", { className: DataList_module.styles.srOnly }, selectedLabel))),
-        React.createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: hasAtLeastOneSelected, initialChild: children, switchTo: React.createElement("div", { className: DataList_module.styles.batchSelectContainer },
-                React.createElement("div", { className: DataList_module.styles.headerBatchSelect },
-                    Boolean(selectedCount) && React.createElement(Text.Text, null,
-                        selectedCount,
-                        " selected"),
-                    React.createElement(Button.Button, { label: deselectText, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect([]), type: "tertiary" })),
-                React.createElement(DataListBulkActions.InternalDataListBulkActions, null)) })));
+        React.createElement(ColumnHeaderContent, { canSelectAll: canSelectAll, hasAtLeastOneSelected: hasAtLeastOneSelected, selectedCount: selectedCount, deselectText: deselectText, onSelect: onSelect }, children)));
     function isIndeterminate() {
         if (isSelectAll)
             return selectedIDs.length > 0;
@@ -69,18 +66,33 @@ function DataListHeaderCheckbox({ children }) {
         return 0;
     }
 }
+function ColumnHeaderContent({ canSelectAll, children, hasAtLeastOneSelected, selectedCount, deselectText, onSelect, }) {
+    if (canSelectAll) {
+        return (React.createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: hasAtLeastOneSelected, initialChild: children, switchTo: React.createElement("div", { "data-testid": DATA_LIST_HEADER_BATCH_SELECT_TEST_ID, className: DataList_module.styles.batchSelectContainer },
+                React.createElement("div", { className: DataList_module.styles.headerBatchSelect },
+                    Boolean(selectedCount) && React.createElement(Text.Text, null,
+                        selectedCount,
+                        " selected"),
+                    React.createElement(Button.Button, { label: deselectText, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect([]), type: "tertiary" })),
+                React.createElement(DataListBulkActions.InternalDataListBulkActions, null)) }));
+    }
+    else {
+        return children;
+    }
+}
 
 function DataListHeader() {
     const breakpoints = useResponsiveSizing.useResponsiveSizing();
     const { headerVisibility = { xs: true, sm: true, md: true, lg: true, xl: true }, headers, layoutBreakpoints, } = DataListContext.useDataListContext();
-    const { hasAtLeastOneSelected } = useBatchSelect.useBatchSelect();
+    const { hasAtLeastOneSelected, canSelect, canSelectAll } = useBatchSelect.useBatchSelect();
     const size = getVisibleSize();
     const { layout } = useActiveLayout.useActiveLayout();
     const visible = headerVisibility[size];
-    if ((!visible && !hasAtLeastOneSelected) || !layout)
+    if (isHeaderHidden(visible, hasAtLeastOneSelected, layout, canSelect, canSelectAll)) {
         return null;
+    }
     const headerData = DataList_utils.generateHeaderElements(headers);
-    if (!headerData)
+    if (!headerData || !layout)
         return null;
     return (React.createElement("div", { className: DataList_module.styles.headerTitles },
         React.createElement(DataListHeaderCheckbox, null, layout(headerData))));
@@ -91,5 +103,14 @@ function DataListHeader() {
         return visibleHeaderSize || layoutBreakpoints[0];
     }
 }
+function isHeaderHidden(visible, hasAtLeastOneSelected, layout, canSelect, canSelectAll) {
+    // When the horizontal area is too small and the data starts to wrap
+    // we want to hide the headers that will no longer align with the content
+    // The exception is when we have onSelectAll AND one or more are selected
+    // because then we show the "header" in its select-all UI variation state
+    const isHiddenForSelect = !visible && canSelect && !canSelectAll;
+    const isHiddenForSelectAll = !visible && !hasAtLeastOneSelected;
+    return !layout || isHiddenForSelect || isHiddenForSelectAll;
+}
 
 exports.DataListHeader = DataListHeader;

package/dist/DataListHeader-es.js

@@ -12,28 +12,25 @@ import { I as InternalDataListBulkActions } from './DataListBulkActions-es.js';
 import { u as useBatchSelect } from './useBatchSelect-es.js';
 import { u as useActiveLayout } from './useActiveLayout-es.js';
 
+const DATA_LIST_HEADER_CHECKBOX_TEST_ID = "ATL-DataList-header-checkbox";
+const DATA_LIST_HEADER_BATCH_SELECT_TEST_ID = "ATL-DataList-header-batch-select";
 function DataListHeaderCheckbox({ children }) {
     const { sm } = useResponsiveSizing();
     const { data, totalCount } = useDataListContext();
-    const { canSelectAll, hasAtLeastOneSelected, isSelectAll, selectedCount, selectedIDs, selected, onSelectAll, onSelect, } = useBatchSelect();
-    // If there's no onSelectAll or onSelect, we don't need to render the checkbox.
-    if (!canSelectAll)
+    const { canSelect, canSelectAll, hasAtLeastOneSelected, isSelectAll, selectedCount, selectedIDs, selected, onSelectAll, onSelect, } = useBatchSelect();
+    // If there's no onSelect, we don't need to render the checkbox.
+    // We'll still render the (invisible) checkbox even if only onSelect is provided for alignment.
+    if (!canSelect)
         return children;
     const deselectText = sm ? "Deselect All" : "Deselect";
     const selectedLabel = selectedCount ? `${selectedCount} selected` : "";
     return (React__default.createElement("div", { className: styles.selectable },
-        React__default.createElement("div", { className: classnames(styles.selectAllCheckbox, {
+        React__default.createElement("div", { "data-testid": DATA_LIST_HEADER_CHECKBOX_TEST_ID, className: classnames(styles.selectAllCheckbox, {
                 [styles.visible]: canSelectAll,
             }) },
             React__default.createElement(Checkbox, { checked: isAllSelected(), indeterminate: isIndeterminate(), onChange: handleSelectAll },
                 React__default.createElement("div", { className: styles.srOnly }, selectedLabel))),
-        React__default.createElement(AnimatedSwitcher, { switched: hasAtLeastOneSelected, initialChild: children, switchTo: React__default.createElement("div", { className: styles.batchSelectContainer },
-                React__default.createElement("div", { className: styles.headerBatchSelect },
-                    Boolean(selectedCount) && React__default.createElement(Text, null,
-                        selectedCount,
-                        " selected"),
-                    React__default.createElement(Button, { label: deselectText, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect([]), type: "tertiary" })),
-                React__default.createElement(InternalDataListBulkActions, null)) })));
+        React__default.createElement(ColumnHeaderContent, { canSelectAll: canSelectAll, hasAtLeastOneSelected: hasAtLeastOneSelected, selectedCount: selectedCount, deselectText: deselectText, onSelect: onSelect }, children)));
     function isIndeterminate() {
         if (isSelectAll)
             return selectedIDs.length > 0;
@@ -67,18 +64,33 @@ function DataListHeaderCheckbox({ children }) {
         return 0;
     }
 }
+function ColumnHeaderContent({ canSelectAll, children, hasAtLeastOneSelected, selectedCount, deselectText, onSelect, }) {
+    if (canSelectAll) {
+        return (React__default.createElement(AnimatedSwitcher, { switched: hasAtLeastOneSelected, initialChild: children, switchTo: React__default.createElement("div", { "data-testid": DATA_LIST_HEADER_BATCH_SELECT_TEST_ID, className: styles.batchSelectContainer },
+                React__default.createElement("div", { className: styles.headerBatchSelect },
+                    Boolean(selectedCount) && React__default.createElement(Text, null,
+                        selectedCount,
+                        " selected"),
+                    React__default.createElement(Button, { label: deselectText, onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect([]), type: "tertiary" })),
+                React__default.createElement(InternalDataListBulkActions, null)) }));
+    }
+    else {
+        return children;
+    }
+}
 
 function DataListHeader() {
     const breakpoints = useResponsiveSizing();
     const { headerVisibility = { xs: true, sm: true, md: true, lg: true, xl: true }, headers, layoutBreakpoints, } = useDataListContext();
-    const { hasAtLeastOneSelected } = useBatchSelect();
+    const { hasAtLeastOneSelected, canSelect, canSelectAll } = useBatchSelect();
     const size = getVisibleSize();
     const { layout } = useActiveLayout();
     const visible = headerVisibility[size];
-    if ((!visible && !hasAtLeastOneSelected) || !layout)
+    if (isHeaderHidden(visible, hasAtLeastOneSelected, layout, canSelect, canSelectAll)) {
         return null;
+    }
     const headerData = generateHeaderElements(headers);
-    if (!headerData)
+    if (!headerData || !layout)
         return null;
     return (React__default.createElement("div", { className: styles.headerTitles },
         React__default.createElement(DataListHeaderCheckbox, null, layout(headerData))));
@@ -89,5 +101,14 @@ function DataListHeader() {
         return visibleHeaderSize || layoutBreakpoints[0];
     }
 }
+function isHeaderHidden(visible, hasAtLeastOneSelected, layout, canSelect, canSelectAll) {
+    // When the horizontal area is too small and the data starts to wrap
+    // we want to hide the headers that will no longer align with the content
+    // The exception is when we have onSelectAll AND one or more are selected
+    // because then we show the "header" in its select-all UI variation state
+    const isHiddenForSelect = !visible && canSelect && !canSelectAll;
+    const isHiddenForSelectAll = !visible && !hasAtLeastOneSelected;
+    return !layout || isHiddenForSelect || isHiddenForSelectAll;
+}
 
 export { DataListHeader as D };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.62.0",
+  "version": "6.62.2",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -542,5 +542,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "ea50c58452e6f0b0dccffad258cebf27fc70e2bd"
+  "gitHead": "a4cb5a5d369226f54f7c8ec5684ddef1131dffbd"
 }