@apia/table 0.2.4 → 0.3.0

package/dist/index.js

@@ -6,9 +6,10 @@ import { uniqueId } from 'lodash-es';
 import { createSlice, injectReducers, shallowEqual as shallowEqual$1 } from '@apia/store';
 import { addBoundary, useLatest, useUpdateEffect, getSpecificParent, isChild, autoDisconnectMutationObserver, getFocusSelector, cantFocusSelector, globalFocus, scrollParentIntoElement, customEvents, debugDispatcher, persistentStorage, EventEmitter, downloadUrl, arrayOrArray, useMount as useMount$1, getDateFormat } from '@apia/util';
 import { shallowEqual } from 'react-redux';
-import { useOtherTagButton, ApiaFilter, IconButton, AccordionItem, Accordion } from '@apia/components';
+import { useOtherTagButton, AutoEllipsis, ApiaFilter, IconButton, AccordionItem, Accordion } from '@apia/components';
 import { Icon } from '@apia/icons';
-import { FaSortUp, FaSortDown, FaSort, FaMinusSquare, FaPlusSquare, FaSquare } from '@meronex/icons/fa';
+import { FaSortUp, FaSortDown, FaSort, FaSquare } from '@meronex/icons/fa';
+import { MdKeyboardArrowDown, MdKeyboardArrowRight } from '@meronex/icons/md/';
 import dayjs from 'dayjs';
 
 const defaultLabels = {
@@ -372,7 +373,7 @@ function makeKeyHandler(actions, id, config) {
       )
     );
     const selectedRowsRef = useLatest(selectedRows);
-    const focusedRow = useResponsiveTable((global) => {
+    useResponsiveTable((global) => {
       var _a3;
       const state = config.stateSelector(global);
       return (_a3 = state == null ? void 0 : state.focusedRow) != null ? _a3 : -1;
@@ -445,9 +446,12 @@ function makeKeyHandler(actions, id, config) {
           return;
         ev.preventDefault();
         if (onSelectRows)
-          onSelectRows(selectedRowsRef.current, focusedRow);
+          onSelectRows(
+            selectedRowsRef.current,
+            config.stateSelector(responsiveTableStore.getState()).focusedRow
+          );
       },
-      [focusedRow, onSelectRows, selectedRowsRef]
+      [onSelectRows, selectedRowsRef]
     );
     const initialized = React.useRef(true);
     const running = React.useRef(false);
@@ -654,12 +658,12 @@ function makeKeyHandler(actions, id, config) {
               if (props.onKeyDown)
                 props.onKeyDown(ev);
               if (ev.key === "Enter" && onSelectRows && state.focusedRow >= 0) {
-                onSelectRows(currentSelectedRows, focusedRow);
+                onSelectRows(currentSelectedRows, state.focusedRow);
               }
               keyHandler(ev);
             }
           },
-          [allowKeyboardSorting, focusedRow, keyHandler, onSelectRows, props]
+          [allowKeyboardSorting, keyHandler, onSelectRows, props]
         ),
         children
       })
@@ -1404,14 +1408,28 @@ const NoMemoHeaderCell = ({
       role: "rowheader",
       className: `${isFilterRequired && window.SHOW_REQUIRED_POSITION ? "requiredFilterColumn" : ""}`,
       children: /* @__PURE__ */ jsxs(Box, { as: "span", className: "headButton__container", children: [
-        /* @__PURE__ */ jsx(Box, { as: "span", className: "headButton__label", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
           Box,
           {
             as: "span",
-            className: `${isFilterRequired ? "requiredFilter__Column" : ""}`,
-            children: column.label
+            className: `${isFilterRequired ? "requiredFilter__Column" : ""} headButton__label`,
+            children: /* @__PURE__ */ jsx(
+              AutoEllipsis,
+              {
+                overrideStyles: (el) => {
+                  const th = el.closest("th");
+                  return {
+                    width: `${Math.max(
+                      100,
+                      Number.parseInt(window.getComputedStyle(th).width)
+                    )}px`
+                  };
+                },
+                children: column.label
+              }
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsxs(Box, { as: "span", className: "headButton__sortIcon", children: [
           column.allowSorting !== false && column.currentSorting === "A" && /* @__PURE__ */ jsx(FaSortUp, {}),
           column.allowSorting !== false && column.currentSorting === "D" && /* @__PURE__ */ jsx(FaSortDown, {}),
@@ -2029,7 +2047,8 @@ const NoMemoDefaultCellRenderer = React.forwardRef(
           () => ({
             "&.colored": {
               background: cell.background,
-              color: cell.color
+              color: cell.color,
+              fontWeight: "bold"
             }
           }),
           [cell.background, cell.color]
@@ -2037,7 +2056,18 @@ const NoMemoDefaultCellRenderer = React.forwardRef(
         ref: currentRef
       }, props), cell), {
         "aria-label": ariaLabel,
-        children: (_a2 = props.children) != null ? _a2 : cell.children
+        children: /* @__PURE__ */ jsx(
+          AutoEllipsis,
+          {
+            overrideStyles: (el) => {
+              const td = el.closest("td");
+              return {
+                width: window.getComputedStyle(td).width
+              };
+            },
+            children: (_a2 = props.children) != null ? _a2 : cell.children
+          }
+        )
       })
     );
   }
@@ -2290,8 +2320,10 @@ const NoMemoRow = ({ rowIndex }) => {
         ) : /* @__PURE__ */ jsxs(Fragment, { children: [
           (additionalCells.length > 0 || hasNonAdditionalFilters) && /* @__PURE__ */ jsx("td", __spreadProps$7(__spreadValues$8({ className: "additionalInfo__cell" }, additionalCellDomProps), { children: additionalCells.length > 0 && /* @__PURE__ */ jsx(
             IconButton,
-            __spreadProps$7(__spreadValues$8({}, getVariant("icon-outline")), {
-              icon: isExpanded ? FaMinusSquare : FaPlusSquare,
+            __spreadProps$7(__spreadValues$8({
+              size: "Lg"
+            }, getVariant("icon-outline")), {
+              icon: isExpanded ? MdKeyboardArrowDown : MdKeyboardArrowRight,
               "aria-label": isExpanded ? window.LBL_COLLAPSE_ROW : window.LBL_EXPAND_ROW,
               className: "moreInformationButton",
               onClick: handleExpandedState
@@ -2466,6 +2498,9 @@ const NoMemoAccordionElement = ({ row, rowIndex }) => {
   const isSelected = useResponsiveTable(
     (global) => global.responsiveTableSlice[name].allowSelection !== false ? global.responsiveTableSlice[name].selectedRows.includes(rowIndex) : void 0
   );
+  const isFocused = useResponsiveTable(
+    (global) => global.responsiveTableSlice[name].focusedRow === rowIndex
+  );
   const buttonProps = useMemo(
     () => ({
       title,
@@ -2484,9 +2519,10 @@ const NoMemoAccordionElement = ({ row, rowIndex }) => {
             )
           })
         );
-      }
+      },
+      tabIndex: isFocused ? 0 : -1
     }),
-    [isSelected, name, rowIndex, title]
+    [isFocused, isSelected, name, rowIndex, title]
   );
   if (!Array.isArray(indexColumns) || !columns)
     return null;
@@ -2525,7 +2561,6 @@ const NoMemoAccordionElement = ({ row, rowIndex }) => {
 };
 const AccordionElement = memo(NoMemoAccordionElement);
 
-const isDebugging = false;
 const NoMemoAccordionRenderer = () => {
   const { name } = useResponsiveTableContext();
   const { columns, rows } = useResponsiveTable((global) => {
@@ -2553,7 +2588,7 @@ const NoMemoAccordionRenderer = () => {
         const columnsLength = columns.length;
         let indexColumn = null;
         let currentIndex = 0;
-        while (!indexColumn && !isDebugging && currentIndex < columns.length || isDebugging ) {
+        while (!indexColumn && currentIndex < columns.length) {
           let isAnyEmptyRow = false;
           for (const row of rows) {
             if (!row.cells[currentIndex].children) {
@@ -2586,14 +2621,7 @@ const NoMemoAccordionRenderer = () => {
   }, [columns, name, rows]);
   return /* @__PURE__ */ jsxs(Accordion, { children: [
     !rows || rows.length === 0 && /* @__PURE__ */ jsx(NoRegistersRenderer, {}),
-    rows == null ? void 0 : rows.slice(0, void 0).map((current, rowIndex) => /* @__PURE__ */ jsx(
-      AccordionElement,
-      {
-        row: current,
-        rowIndex
-      },
-      current.id
-    ))
+    rows == null ? void 0 : rows.map((current, rowIndex) => /* @__PURE__ */ jsx(AccordionElement, { row: current, rowIndex }, current.id))
   ] });
 };
 const AccordionRenderer = React.memo(NoMemoAccordionRenderer);