@geotab/zenith 1.19.1 → 1.20.0-beta.1

package/dist/table/selectable/useSelectableRows.js

@@ -128,7 +128,7 @@ const useSelectableRows = (columns, entities, isMobile, selectMode, setSelectMod
                 }
                 const allowed = checkboxVisible(entity);
                 const isDisable = checkboxDisabled(entity) || state === interfaces_1.SelectionState.All;
-                const cell = (0, jsx_runtime_1.jsx)(checkboxCell_1.CheckboxCell, { id: entity.id, className: allowed ? "zen-selectable-column" : "zen-selectable-column zen-selectable-column--no-checkbox", checked: state === interfaces_1.SelectionState.All || selections.has(entity.id), indeterminate: false, disabled: isDisable, label: checkboxTitle(entity), onChange: onSelectListener, children: (0, jsx_runtime_1.jsx)(checkboxCell_1.CheckboxCell.Content, { children: value }) });
+                const cell = (0, jsx_runtime_1.jsx)(checkboxCell_1.CheckboxCell, { id: entity.id, className: allowed ? "zen-selectable-row" : "zen-selectable-row zen-selectable-column--no-checkbox", checked: state === interfaces_1.SelectionState.All || selections.has(entity.id), indeterminate: false, disabled: isDisable, label: checkboxTitle(entity), onChange: onSelectListener, children: (0, jsx_runtime_1.jsx)(checkboxCell_1.CheckboxCell.Content, { children: value }) });
                 return cell;
             },
             renderHeader(title) {

package/dist/table/sortable/sortableHeader.js

@@ -33,10 +33,28 @@ const isClickOnSortableParent = (element) => {
 };
 const SortableHeaderCell = ({ columnName, isSortedBy, sortDirection, title, tooltip, onSortChange, isMobile = false }) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
-    const iconTitle = getSortButtonTitle(sortDirection === interfaces_1.ColumnSortDirection.Ascending ? interfaces_1.ColumnSortDirection.Descending : interfaces_1.ColumnSortDirection.Ascending, tooltip, translate);
-    const icon = (0, react_1.useMemo)(() => sortDirection === interfaces_1.ColumnSortDirection.Ascending ? iconFilter3Asc_1.IconFilter3Asc : iconFilter3Desc_1.IconFilter3Desc, [sortDirection]);
-    const iconButton = (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-sortable-column-button__dir-icon zen-caption__post-icon", icon: icon, iconPosition: isMobile ? textIconButton_1.ButtonIconPosition.Start : textIconButton_1.ButtonIconPosition.End, type: "tertiary-black", title: iconTitle });
-    const onHeaderClick = (0, react_1.useCallback)(e => {
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const isActive = isHovered || isFocused;
+    const iconTitle = getSortButtonTitle(isActive
+        ? sortDirection === interfaces_1.ColumnSortDirection.Ascending
+            ? interfaces_1.ColumnSortDirection.Descending
+            : interfaces_1.ColumnSortDirection.Ascending
+        : sortDirection === interfaces_1.ColumnSortDirection.Ascending
+            ? interfaces_1.ColumnSortDirection.Descending
+            : interfaces_1.ColumnSortDirection.Ascending, tooltip, translate);
+    const icon = (0, react_1.useMemo)(() => {
+        if (isActive) {
+            return sortDirection === interfaces_1.ColumnSortDirection.Ascending
+                ? iconFilter3Desc_1.IconFilter3Desc
+                : iconFilter3Asc_1.IconFilter3Asc;
+        }
+        return sortDirection === interfaces_1.ColumnSortDirection.Ascending
+            ? iconFilter3Asc_1.IconFilter3Asc
+            : iconFilter3Desc_1.IconFilter3Desc;
+    }, [sortDirection, isActive]);
+    const iconButton = ((0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-sortable-column-button__dir-icon zen-caption__post-icon", icon: icon, iconPosition: isMobile ? textIconButton_1.ButtonIconPosition.Start : textIconButton_1.ButtonIconPosition.End, type: "tertiary-black", title: iconTitle }));
+    const onHeaderClick = (0, react_1.useCallback)((e) => {
         const target = e && e.target;
         if (!target) {
             return;
@@ -44,11 +62,13 @@ const SortableHeaderCell = ({ columnName, isSortedBy, sortDirection, title, tool
         if (isClickOnSortableParent(target)) {
             onSortChange({
                 sortColumn: columnName,
-                sortDirection: sortDirection === interfaces_1.ColumnSortDirection.Ascending ? interfaces_1.ColumnSortDirection.Descending : interfaces_1.ColumnSortDirection.Ascending
+                sortDirection: sortDirection === interfaces_1.ColumnSortDirection.Ascending
+                    ? interfaces_1.ColumnSortDirection.Descending
+                    : interfaces_1.ColumnSortDirection.Ascending
             });
         }
     }, [columnName, sortDirection, onSortChange]);
-    return (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)([
+    return ((0, jsx_runtime_1.jsx)("div", { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), className: (0, classNames_1.classNames)([
             "zen-sortable-column",
             isSortedBy ? `zen-sortable-column--active` : "",
             isMobile ? `zen-sortable-column--mobile` : ""
@@ -57,7 +77,9 @@ const SortableHeaderCell = ({ columnName, isSortedBy, sortDirection, title, tool
                 "zen-sortable-column__button",
                 "zen-sortable-column-button",
                 isSortedBy ? `zen-sortable-column-button--active` : "",
-                sortDirection === interfaces_1.ColumnSortDirection.Ascending ? "zen-sortable-column-button--dir-asc" : "zen-sortable-column-button--dir-desc"
-            ]), title: iconTitle, "aria-label": iconTitle, onClick: onHeaderClick, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isMobile ? iconButton : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-sortable-column-button__content zen-caption__content", children: title }), isMobile ? null : iconButton] }) }) });
+                sortDirection === interfaces_1.ColumnSortDirection.Ascending
+                    ? "zen-sortable-column-button--dir-asc"
+                    : "zen-sortable-column-button--dir-desc"
+            ]), title: iconTitle, "aria-label": iconTitle, onClick: onHeaderClick, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isMobile ? iconButton : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-sortable-column-button__content zen-caption__content", children: title }), isMobile ? null : iconButton] }) }) }));
 };
 exports.SortableHeaderCell = SortableHeaderCell;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geotab/zenith",
-  "version": "1.19.1",
+  "version": "1.20.0-beta.1",
   "description": "Zenith components library on React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -9,6 +9,7 @@
     "start": "npm run storybook --loglevel verbose",
     "lint": "npx eslint -c \".eslintrc.js\" --ext \".ts\" --ext \".tsx\" \"**/*.tsx\" \"**/*.ts\" --ignore-path \".eslintignore\"",
     "new": "node newComponent.mjs",
+    "build-ai-mdx": "node collectmdx.js",
     "build-ts": "npx tsc -b tsconfig.build.json && node less-transformer.js",
     "build-less": "node less-compile.js",
     "build-copy": "node build-copy.js",
@@ -23,7 +24,7 @@
     "test-coverage": "npm run clean && npm run test-build && jest --collectCoverage=true --coverage --collectCoverageFrom=./**/*.js --json --outputFile=jest-result.json --coverageReporters=html --coverageReporters=text-summary --coverageReporters=cobertura --noStackTrace && node testHelpers/cobertura/cobertura.js",
     "coverage": "npm run test-coverage && google-chrome ./jest-coverage/index.html",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
+    "build-storybook": "storybook build && npm run build-ai-mdx",
     "clean": "rm -rf ./dist && rm -rf ./jest-coverage"
   },
   "author": "",
@@ -93,5 +94,5 @@
   },
   "publishConfig": {
    "access": "public"
- }
+  }
 }