@geotab/zenith 3.9.0-beta.0 → 3.9.0-beta.2

package/esm/table/selectable/useSelectableRows.js

@@ -157,6 +157,7 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
       return;
     }
     const newSelections = getCurrentPageSelection(entities, selectable);
+    setState(newState);
     const newValue = {
       selected: [...newSelections],
       all: false
@@ -175,16 +176,8 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
     return translate("Deselect all");
   }, [selectable, selectableState, state, translate]);
   const isEntityChecked = useCallback((entity, isNested) => isRowChecked(selections, state, selectable === null || selectable === void 0 ? void 0 : selectable.strategy, entity, isNested), [selections, state, selectable === null || selectable === void 0 ? void 0 : selectable.strategy]);
-  const hasSelectable = !!selectable;
-  const selectableCheckboxSelectsCurrentPage = selectable === null || selectable === void 0 ? void 0 : selectable.checkboxSelectsCurrentPage;
-  const selectableTurnOffSelectAll = selectable === null || selectable === void 0 ? void 0 : selectable.turnOffSelectAll;
-  const selectableCheckboxInHeader = selectable === null || selectable === void 0 ? void 0 : selectable.checkboxInHeader;
-  const selectableSelectionLimit = selectable === null || selectable === void 0 ? void 0 : selectable.selectionLimit;
-  const selectableHeader = selectable === null || selectable === void 0 ? void 0 : selectable.header;
-  const checkboxEmitsCurrentPage = selectableCheckboxSelectsCurrentPage !== null && selectableCheckboxSelectsCurrentPage !== void 0 ? selectableCheckboxSelectsCurrentPage : selectableTurnOffSelectAll;
-  const checkboxInHeaderValue = selectableCheckboxInHeader !== undefined ? selectableCheckboxInHeader : selectableSelectionLimit !== undefined ? false : undefined;
   const wrapper = useMemo(() => {
-    if (!hasSelectable) {
+    if (!selectable) {
       return null;
     }
     return {
@@ -226,23 +219,23 @@ export const useSelectableRows = (columns, entities, isMobile, selectMode, setSe
           checked: state === SelectionState.CurrentPage || state === SelectionState.All,
           indeterminate: state === SelectionState.Partial,
           onChange: newValue => {
-            const newState = newValue ? checkboxEmitsCurrentPage ? SelectionState.CurrentPage : SelectionState.All : SelectionState.None;
+            const newState = newValue ? selectable.turnOffSelectAll ? SelectionState.CurrentPage : SelectionState.All : SelectionState.None;
             setState(newState);
             onChangeSelectionState(newState);
           },
           calculateSelectionState: () => selectableState,
-          checkboxInHeader: checkboxInHeaderValue,
-          header: selectableHeader,
+          checkboxInHeader: selectable.checkboxInHeader !== undefined ? selectable.checkboxInHeader : selectable.selectionLimit !== undefined ? false : undefined,
+          header: selectable.header,
           onSelect: newState => {
             setState(newState);
             onChangeSelectionState(newState);
           },
-          turnOffSelectAll: selectableTurnOffSelectAll
+          turnOffSelectAll: selectable.turnOffSelectAll
         });
         return cell;
       }
     };
-  }, [checkboxDisabled, checkboxTitle, checkboxVisible, headerTitle, onChangeSelectionState, onSelectListener, hasSelectable, checkboxEmitsCurrentPage, checkboxInHeaderValue, selectableHeader, selectableTurnOffSelectAll, selectableState, state, isMobile, checkboxPlaceholder, isEntityChecked]);
+  }, [checkboxDisabled, checkboxTitle, checkboxVisible, headerTitle, onChangeSelectionState, onSelectListener, selectable, selectableState, state, isMobile, checkboxPlaceholder, isEntityChecked]);
   const selectableFeedWrapper = useCallback((primaryData, secondaryData, entity, isNested) => {
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (!entity) {

package/esm/table/table.js

@@ -175,6 +175,12 @@ const TableInner = ({
       selected: []
     });
   }, [selectable]);
+  const selectAll = useCallback(() => {
+    selectable === null || selectable === void 0 ? void 0 : selectable.onSelect({
+      all: true,
+      selected: []
+    });
+  }, [selectable]);
   const [activeIdInternal, setActiveInternal] = useState(undefined);
   const activeId = active !== undefined ? active : activeIdInternal;
   const onClickInternal = useCallback(id => setActiveInternal(id === activeIdInternal ? undefined : id), [activeIdInternal, setActiveInternal]);
@@ -191,7 +197,7 @@ const TableInner = ({
     detailPanel,
     footer,
     other
-  } = useTableChildren(children, isMobile, selectionQty, ((_c = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _c === void 0 ? void 0 : _c.all) || false, clearSelection, activeId, gridRef, onCloseDetailPanel);
+  } = useTableChildren(children, isMobile, selectionQty, ((_c = selectable === null || selectable === void 0 ? void 0 : selectable.selection) === null || _c === void 0 ? void 0 : _c.all) || false, clearSelection, selectAll, selectable === null || selectable === void 0 ? void 0 : selectable.turnOffSelectAll, activeId, gridRef, onCloseDetailPanel);
   const hasDetailPanel = !!detailPanel;
   const shouldEnableRowClick = hasDetailPanel || !!onClick;
   const activeIdForRow = shouldEnableRowClick ? activeId : undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@geotab/zenith",
-    "version": "3.9.0-beta.0",
+    "version": "3.9.0-beta.2",
     "description": "Zenith components library on React",
     "main": "dist/index.js",
     "types": "esm/index.d.ts",

package/dist/title/title.js

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Title = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const classNames_1 = require("../commonHelpers/classNames/classNames");
-const useDrive_1 = require("../utils/theme/useDrive");
-const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
-const iconChevronRightSmall_1 = require("../icons/iconChevronRightSmall");
-const Title = ({ isMobile, link, target, title, id, icon, iconType, className = "", onClick }) => {
-    const isDrive = (0, useDrive_1.useDrive)();
-    const driveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-title");
-    const h3ClassName = (0, classNames_1.classNames)(["zen-title", driveClassName !== null && driveClassName !== void 0 ? driveClassName : ""]);
-    const clickableClass = onClick ? "zen-title__clickable" : "";
-    const iconClassName = iconType ? `zen-title__icon--${iconType}` : "";
-    const iconSize = (0, react_1.useMemo)(() => (isDrive ? "huge" : "large"), [isDrive]);
-    const iconElement = (0, react_1.useMemo)(() => (icon ? (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-title__icon", iconClassName]), children: (0, react_1.createElement)(icon, { size: iconSize }) }) : null), [icon, iconSize, iconClassName]);
-    const chevron = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)("span", { className: "zen-title__link-chevron", children: (0, jsx_runtime_1.jsx)(iconChevronRightSmall_1.IconChevronRightSmall, { size: iconSize, className: "zen-title__chevron-icon" }) })), [iconSize]);
-    if (onClick) {
-        return ((0, jsx_runtime_1.jsx)("h3", { className: h3ClassName, children: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: clickableClass, onClick: onClick, children: [iconElement, (0, jsx_runtime_1.jsxs)("span", { title: title, id: id, className: (0, classNames_1.classNames)(["zen-title__text", isMobile && !isDrive ? "zen-title__text--mobile" : "", className]), children: [title, chevron] })] }) }));
-    }
-    if (link) {
-        return ((0, jsx_runtime_1.jsx)("h3", { className: h3ClassName, children: (0, jsx_runtime_1.jsxs)("a", { id: id, className: "zen-title__link", href: link, target: target, children: [iconElement, (0, jsx_runtime_1.jsxs)("span", { title: title, className: (0, classNames_1.classNames)(["zen-title__link-text"]), children: [title, chevron] })] }) }));
-    }
-    return ((0, jsx_runtime_1.jsxs)("h3", { className: h3ClassName, children: [iconElement, (0, jsx_runtime_1.jsx)("span", { title: title, id: id, className: (0, classNames_1.classNames)(["zen-title__text", isMobile && !isDrive ? "zen-title__text--mobile" : "", className]), children: title })] }));
-};
-exports.Title = Title;

package/esm/title/title.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createElement, useMemo } from "react";
-import { classNames } from "../commonHelpers/classNames/classNames";
-import { useDrive } from "../utils/theme/useDrive";
-import { useDriveClassName } from "../utils/theme/useDriveClassName";
-import { IconChevronRightSmall } from "../icons/iconChevronRightSmall";
-export const Title = ({ isMobile, link, target, title, id, icon, iconType, className = "", onClick }) => {
-    const isDrive = useDrive();
-    const driveClassName = useDriveClassName("zen-title");
-    const h3ClassName = classNames(["zen-title", driveClassName !== null && driveClassName !== void 0 ? driveClassName : ""]);
-    const clickableClass = onClick ? "zen-title__clickable" : "";
-    const iconClassName = iconType ? `zen-title__icon--${iconType}` : "";
-    const iconSize = useMemo(() => (isDrive ? "huge" : "large"), [isDrive]);
-    const iconElement = useMemo(() => (icon ? _jsx("div", { className: classNames(["zen-title__icon", iconClassName]), children: createElement(icon, { size: iconSize }) }) : null), [icon, iconSize, iconClassName]);
-    const chevron = useMemo(() => (_jsx("span", { className: "zen-title__link-chevron", children: _jsx(IconChevronRightSmall, { size: iconSize, className: "zen-title__chevron-icon" }) })), [iconSize]);
-    if (onClick) {
-        return (_jsx("h3", { className: h3ClassName, children: _jsxs("button", { type: "button", className: clickableClass, onClick: onClick, children: [iconElement, _jsxs("span", { title: title, id: id, className: classNames(["zen-title__text", isMobile && !isDrive ? "zen-title__text--mobile" : "", className]), children: [title, chevron] })] }) }));
-    }
-    if (link) {
-        return (_jsx("h3", { className: h3ClassName, children: _jsxs("a", { id: id, className: "zen-title__link", href: link, target: target, children: [iconElement, _jsxs("span", { title: title, className: classNames(["zen-title__link-text"]), children: [title, chevron] })] }) }));
-    }
-    return (_jsxs("h3", { className: h3ClassName, children: [iconElement, _jsx("span", { title: title, id: id, className: classNames(["zen-title__text", isMobile && !isDrive ? "zen-title__text--mobile" : "", className]), children: title })] }));
-};