@apia/table 2.0.9 → 2.0.10

package/dist/Cell.js

@@ -0,0 +1,52 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import React from 'react';
+import { shallowEqual } from 'react-redux';
+import { domPropsSelector } from './ResponsiveTable.js';
+import { DefaultCellRenderer } from './renderers/DefaultCellRenderer.js';
+import { useResponsiveTableContext } from './ResponsiveTableContext.js';
+import { useDomProps } from './store/selection/useDomProps.js';
+import { useResponsiveTable } from './store/index.js';
+
+const NoMemoCell = ({
+  columnIndex,
+  inTableColumnIndex,
+  rowIndex
+}) => {
+  const { name } = useResponsiveTableContext();
+  const domProps = useDomProps(
+    "td",
+    { columnIndex: inTableColumnIndex, rowIndex },
+    domPropsSelector(name)
+  );
+  const cell = useResponsiveTable((global) => {
+    const tableState = global.responsiveTableSlice[name];
+    return tableState?.rows[rowIndex]?.cells[columnIndex];
+  }, shallowEqual);
+  const column = useResponsiveTable((global) => {
+    const tableState = global.responsiveTableSlice[name];
+    return tableState?.columns[columnIndex];
+  }, shallowEqual);
+  const row = useResponsiveTable((global) => {
+    const tableState = global.responsiveTableSlice[name];
+    return tableState?.rows[rowIndex];
+  }, shallowEqual);
+  const Renderer = React.useMemo(
+    () => cell?.Renderer ?? column.Renderer ?? DefaultCellRenderer,
+    [cell?.Renderer, column.Renderer]
+  );
+  if (!Renderer || !cell)
+    return row.separator ? /* @__PURE__ */ jsx("div", { className: "separator" }) : null;
+  return /* @__PURE__ */ jsx(
+    Renderer,
+    {
+      ...domProps,
+      cell,
+      column,
+      row
+    }
+  );
+};
+const Cell = React.memo(NoMemoCell);
+
+export { Cell };
+//# sourceMappingURL=Cell.js.map

package/dist/Cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Cell.js","sources":["../src/Cell.tsx"],"sourcesContent":["import React, { FC } from 'react';\r\nimport { shallowEqual } from 'react-redux';\r\nimport { domPropsSelector } from './ResponsiveTable';\r\nimport { DefaultCellRenderer } from './renderers/DefaultCellRenderer';\r\nimport { useResponsiveTableContext } from './ResponsiveTableContext';\r\nimport { useDomProps } from './store/selection/useDomProps';\r\nimport { useResponsiveTable } from './store';\r\n\r\ninterface ICell {\r\n  columnIndex: number;\r\n  inTableColumnIndex: number;\r\n  rowIndex: number;\r\n}\r\n\r\nconst NoMemoCell: FC<ICell> = ({\r\n  columnIndex,\r\n  inTableColumnIndex,\r\n  rowIndex,\r\n}) => {\r\n  const { name } = useResponsiveTableContext();\r\n\r\n  const domProps = useDomProps(\r\n    'td',\r\n    { columnIndex: inTableColumnIndex, rowIndex },\r\n    domPropsSelector(name),\r\n  );\r\n\r\n  const cell = useResponsiveTable((global) => {\r\n    const tableState = global.responsiveTableSlice[name];\r\n\r\n    return tableState?.rows[rowIndex]?.cells[columnIndex];\r\n  }, shallowEqual);\r\n\r\n  const column = useResponsiveTable((global) => {\r\n    const tableState = global.responsiveTableSlice[name];\r\n    return tableState?.columns[columnIndex];\r\n  }, shallowEqual);\r\n\r\n  const row = useResponsiveTable((global) => {\r\n    const tableState = global.responsiveTableSlice[name];\r\n    return tableState?.rows[rowIndex];\r\n  }, shallowEqual);\r\n\r\n  const Renderer = React.useMemo(\r\n    () => cell?.Renderer ?? column.Renderer ?? DefaultCellRenderer,\r\n    [cell?.Renderer, column.Renderer],\r\n  );\r\n\r\n  if (!Renderer || !cell)\r\n    return row.separator ? <div className=\"separator\"></div> : null;\r\n\r\n  return (\r\n    <Renderer\r\n      {...(domProps as Omit<React.HTMLProps<HTMLTableCellElement>, 'ref'>)}\r\n      cell={cell}\r\n      column={column}\r\n      row={row}\r\n    />\r\n  );\r\n};\r\n\r\nexport const Cell = React.memo(NoMemoCell);\r\n"],"names":[],"mappings":";;;;;;;;;AAcA,MAAM,aAAwB,CAAC;AAAA,EAC7B,WAAA;AAAA,EACA,kBAAA;AAAA,EACA,QAAA;AACF,CAAM,KAAA;AACJ,EAAM,MAAA,EAAE,IAAK,EAAA,GAAI,yBAA0B,EAAA,CAAA;AAE3C,EAAA,MAAM,QAAW,GAAA,WAAA;AAAA,IACf,IAAA;AAAA,IACA,EAAE,WAAa,EAAA,kBAAA,EAAoB,QAAS,EAAA;AAAA,IAC5C,iBAAiB,IAAI,CAAA;AAAA,GACvB,CAAA;AAEA,EAAM,MAAA,IAAA,GAAO,kBAAmB,CAAA,CAAC,MAAW,KAAA;AAC1C,IAAM,MAAA,UAAA,GAAa,MAAO,CAAA,oBAAA,CAAqB,IAAI,CAAA,CAAA;AAEnD,IAAA,OAAO,UAAY,EAAA,IAAA,CAAK,QAAQ,CAAA,EAAG,MAAM,WAAW,CAAA,CAAA;AAAA,KACnD,YAAY,CAAA,CAAA;AAEf,EAAM,MAAA,MAAA,GAAS,kBAAmB,CAAA,CAAC,MAAW,KAAA;AAC5C,IAAM,MAAA,UAAA,GAAa,MAAO,CAAA,oBAAA,CAAqB,IAAI,CAAA,CAAA;AACnD,IAAO,OAAA,UAAA,EAAY,QAAQ,WAAW,CAAA,CAAA;AAAA,KACrC,YAAY,CAAA,CAAA;AAEf,EAAM,MAAA,GAAA,GAAM,kBAAmB,CAAA,CAAC,MAAW,KAAA;AACzC,IAAM,MAAA,UAAA,GAAa,MAAO,CAAA,oBAAA,CAAqB,IAAI,CAAA,CAAA;AACnD,IAAO,OAAA,UAAA,EAAY,KAAK,QAAQ,CAAA,CAAA;AAAA,KAC/B,YAAY,CAAA,CAAA;AAEf,EAAA,MAAM,WAAW,KAAM,CAAA,OAAA;AAAA,IACrB,MAAM,IAAA,EAAM,QAAY,IAAA,MAAA,CAAO,QAAY,IAAA,mBAAA;AAAA,IAC3C,CAAC,IAAA,EAAM,QAAU,EAAA,MAAA,CAAO,QAAQ,CAAA;AAAA,GAClC,CAAA;AAEA,EAAI,IAAA,CAAC,YAAY,CAAC,IAAA;AAChB,IAAA,OAAO,IAAI,SAAY,mBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,aAAY,CAAS,GAAA,IAAA,CAAA;AAE7D,EACE,uBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAI,QAAA;AAAA,MACL,IAAA;AAAA,MACA,MAAA;AAAA,MACA,GAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAA,CAAA;AAEa,MAAA,IAAA,GAAO,KAAM,CAAA,IAAA,CAAK,UAAU;;;;"}

package/dist/FilterCell.js

@@ -0,0 +1,68 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { Input } from '@apia/theme';
+import React from 'react';
+import { ApiaFilter } from '@apia/components';
+import { useResponsiveTableContext } from './ResponsiveTableContext.js';
+import { domPropsSelector } from './ResponsiveTable.js';
+import { RangeFilter } from './filters/RangeFilter.js';
+import { useDomProps } from './store/selection/useDomProps.js';
+
+const FilterCell = ({ columnIndex, filter }) => {
+  const { name, onFilterBlur, onFilterChange, onFilterPressEnter } = useResponsiveTableContext();
+  const domProps = useDomProps(
+    "filterTd",
+    {
+      columnIndex
+    },
+    domPropsSelector(name)
+  );
+  const handleOnBlur = React.useCallback(
+    (currentValue) => {
+      if (filter && onFilterBlur)
+        onFilterBlur({ ...filter, currentValue });
+    },
+    [filter, onFilterBlur]
+  );
+  const handleOnChange = React.useCallback(
+    (currentValue) => {
+      if (filter && onFilterChange)
+        return onFilterChange({ ...filter, currentValue });
+      return true;
+    },
+    [filter, onFilterChange]
+  );
+  const handleOnPressEnter = React.useCallback(
+    (currentValue) => {
+      if (filter && onFilterPressEnter)
+        onFilterPressEnter({ ...filter, currentValue });
+    },
+    [filter, onFilterPressEnter]
+  );
+  function findFilter() {
+    if (filter?.isRange) {
+      return /* @__PURE__ */ jsx(RangeFilter, { filter });
+    }
+    if (filter && !(filter.asAdditional || !filter.column || filter.isRange)) {
+      return /* @__PURE__ */ jsx(
+        ApiaFilter,
+        {
+          onBlur: handleOnBlur,
+          onChange: handleOnChange,
+          onPressEnter: handleOnPressEnter,
+          filter
+        }
+      );
+    }
+    let label;
+    if (filter && (filter.asAdditional || !filter.column || filter.isRange)) {
+      label = window.LBL_ADDITIONAL_FILTER;
+    } else {
+      label = window.LBL_NO_COLUMN_FILTER;
+    }
+    return /* @__PURE__ */ jsx(Input, { "aria-label": label, disabled: true });
+  }
+  return /* @__PURE__ */ jsx("td", { ...domProps, children: findFilter() });
+};
+
+export { FilterCell };
+//# sourceMappingURL=FilterCell.js.map

package/dist/FilterCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterCell.js","sources":["../src/FilterCell.tsx"],"sourcesContent":["import { Input } from '@apia/theme';\r\nimport React from 'react';\r\nimport { TApiaFilter, TApiaFilterValue } from '@apia/util';\r\nimport { ApiaFilter } from '@apia/components';\r\nimport { useResponsiveTableContext } from './ResponsiveTableContext';\r\nimport { domPropsSelector } from './ResponsiveTable';\r\nimport { RangeFilter } from './filters/RangeFilter';\r\nimport { useDomProps } from './store/selection/useDomProps';\r\n\r\ninterface IFilterCell {\r\n  columnIndex: number;\r\n  filter?: TApiaFilter;\r\n}\r\n\r\nexport const FilterCell = ({ columnIndex, filter }: IFilterCell) => {\r\n  const { name, onFilterBlur, onFilterChange, onFilterPressEnter } =\r\n    useResponsiveTableContext();\r\n  const domProps = useDomProps(\r\n    'filterTd',\r\n    {\r\n      columnIndex,\r\n    },\r\n    domPropsSelector(name),\r\n  );\r\n\r\n  const handleOnBlur = React.useCallback(\r\n    (currentValue: TApiaFilterValue) => {\r\n      if (filter && onFilterBlur) onFilterBlur({ ...filter, currentValue });\r\n    },\r\n    [filter, onFilterBlur],\r\n  );\r\n\r\n  const handleOnChange = React.useCallback(\r\n    (currentValue: TApiaFilterValue) => {\r\n      if (filter && onFilterChange)\r\n        return onFilterChange({ ...filter, currentValue });\r\n      return true;\r\n    },\r\n    [filter, onFilterChange],\r\n  );\r\n\r\n  const handleOnPressEnter = React.useCallback(\r\n    (currentValue: TApiaFilterValue) => {\r\n      if (filter && onFilterPressEnter)\r\n        onFilterPressEnter({ ...filter, currentValue });\r\n    },\r\n    [filter, onFilterPressEnter],\r\n  );\r\n\r\n  function findFilter() {\r\n    if (filter?.isRange) {\r\n      return <RangeFilter filter={filter} />;\r\n    }\r\n    if (filter && !(filter.asAdditional || !filter.column || filter.isRange)) {\r\n      return (\r\n        <ApiaFilter\r\n          onBlur={handleOnBlur}\r\n          onChange={handleOnChange}\r\n          onPressEnter={handleOnPressEnter}\r\n          filter={filter}\r\n        />\r\n      );\r\n    }\r\n\r\n    let label: string;\r\n    if (filter && (filter.asAdditional || !filter.column || filter.isRange)) {\r\n      label = window.LBL_ADDITIONAL_FILTER;\r\n    } else {\r\n      label = window.LBL_NO_COLUMN_FILTER;\r\n    }\r\n\r\n    return <Input aria-label={label} disabled />;\r\n  }\r\n  return <td {...domProps}>{findFilter()}</td>;\r\n};\r\n"],"names":[],"mappings":";;;;;;;;;AAcO,MAAM,UAAa,GAAA,CAAC,EAAE,WAAA,EAAa,QAA0B,KAAA;AAClE,EAAA,MAAM,EAAE,IAAM,EAAA,YAAA,EAAc,cAAgB,EAAA,kBAAA,KAC1C,yBAA0B,EAAA,CAAA;AAC5B,EAAA,MAAM,QAAW,GAAA,WAAA;AAAA,IACf,UAAA;AAAA,IACA;AAAA,MACE,WAAA;AAAA,KACF;AAAA,IACA,iBAAiB,IAAI,CAAA;AAAA,GACvB,CAAA;AAEA,EAAA,MAAM,eAAe,KAAM,CAAA,WAAA;AAAA,IACzB,CAAC,YAAmC,KAAA;AAClC,MAAA,IAAI,MAAU,IAAA,YAAA;AAAc,QAAA,YAAA,CAAa,EAAE,GAAG,MAAQ,EAAA,YAAA,EAAc,CAAA,CAAA;AAAA,KACtE;AAAA,IACA,CAAC,QAAQ,YAAY,CAAA;AAAA,GACvB,CAAA;AAEA,EAAA,MAAM,iBAAiB,KAAM,CAAA,WAAA;AAAA,IAC3B,CAAC,YAAmC,KAAA;AAClC,MAAA,IAAI,MAAU,IAAA,cAAA;AACZ,QAAA,OAAO,cAAe,CAAA,EAAE,GAAG,MAAA,EAAQ,cAAc,CAAA,CAAA;AACnD,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAAA,IACA,CAAC,QAAQ,cAAc,CAAA;AAAA,GACzB,CAAA;AAEA,EAAA,MAAM,qBAAqB,KAAM,CAAA,WAAA;AAAA,IAC/B,CAAC,YAAmC,KAAA;AAClC,MAAA,IAAI,MAAU,IAAA,kBAAA;AACZ,QAAA,kBAAA,CAAmB,EAAE,GAAG,MAAQ,EAAA,YAAA,EAAc,CAAA,CAAA;AAAA,KAClD;AAAA,IACA,CAAC,QAAQ,kBAAkB,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAA,SAAS,UAAa,GAAA;AACpB,IAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,MAAO,uBAAA,GAAA,CAAC,eAAY,MAAgB,EAAA,CAAA,CAAA;AAAA,KACtC;AACA,IAAI,IAAA,MAAA,IAAU,EAAE,MAAO,CAAA,YAAA,IAAgB,CAAC,MAAO,CAAA,MAAA,IAAU,OAAO,OAAU,CAAA,EAAA;AACxE,MACE,uBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,MAAQ,EAAA,YAAA;AAAA,UACR,QAAU,EAAA,cAAA;AAAA,UACV,YAAc,EAAA,kBAAA;AAAA,UACd,MAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KAEJ;AAEA,IAAI,IAAA,KAAA,CAAA;AACJ,IAAA,IAAI,WAAW,MAAO,CAAA,YAAA,IAAgB,CAAC,MAAO,CAAA,MAAA,IAAU,OAAO,OAAU,CAAA,EAAA;AACvE,MAAA,KAAA,GAAQ,MAAO,CAAA,qBAAA,CAAA;AAAA,KACV,MAAA;AACL,MAAA,KAAA,GAAQ,MAAO,CAAA,oBAAA,CAAA;AAAA,KACjB;AAEA,IAAA,uBAAQ,GAAA,CAAA,KAAA,EAAA,EAAM,YAAY,EAAA,KAAA,EAAO,UAAQ,IAAC,EAAA,CAAA,CAAA;AAAA,GAC5C;AACA,EAAA,uBAAQ,GAAA,CAAA,IAAA,EAAA,EAAI,GAAG,QAAA,EAAW,sBAAa,EAAA,CAAA,CAAA;AACzC;;;;"}

package/dist/Header.js

@@ -0,0 +1,171 @@
+import { jsxs, jsx, Fragment } from '@apia/theme/jsx-runtime';
+import { useUpdateEffect } from 'ahooks';
+import uniqueId from 'lodash-es/uniqueId';
+import React, { useState } from 'react';
+import { persistentStorage, customEvents, getLabel } from '@apia/util';
+import { shallowEqual } from '@apia/store';
+import { useOtherTagButton } from '@apia/components';
+import { Icon } from '@apia/icons';
+import { HeaderCell } from './HeaderCell.js';
+import { useResponsiveTableContext } from './ResponsiveTableContext.js';
+import { useResponsiveTable } from './store/index.js';
+import { StateCell } from './StateCell.js';
+import { FilterCell } from './FilterCell.js';
+
+const NoMemoHeader = () => {
+  const { name } = useResponsiveTableContext();
+  const { columns, hasNonAdditionalFilters, focusedColumn, focusedRow } = useResponsiveTable((global) => {
+    const tableState = global.responsiveTableSlice[name];
+    window.focusedRow = tableState?.focusedRow;
+    window.focusedColumn = tableState?.focusedColumn;
+    window.hasNonAdditionalFilters = tableState?.hasNonAdditionalFilters || false;
+    return {
+      columns: tableState?.columns ?? [],
+      focusedColumn: tableState?.focusedColumn,
+      focusedRow: tableState?.focusedRow,
+      hasNonAdditionalFilters: tableState?.hasNonAdditionalFilters
+    };
+  }, shallowEqual);
+  const filters = useResponsiveTable(
+    (global) => {
+      const tableState = global.responsiveTableSlice[name];
+      const returnObject = (tableState?.filters ?? []).map((current) => ({
+        columnIndex: tableState.columns.findIndex(
+          (search) => search.name === current.column
+        ),
+        definition: current
+      })).filter((current) => current.columnIndex >= 0);
+      return returnObject;
+    },
+    (a, b) => {
+      return a.length === b.length && a.reduce((result, current, index) => {
+        return result && shallowEqual(current.definition, b[index].definition);
+      }, true);
+    }
+  );
+  const statesCount = useResponsiveTable((globalState) => {
+    const state = globalState.responsiveTableSlice[name];
+    return state?.statesColumns ?? 0;
+  }, shallowEqual);
+  const additionalColumns = React.useMemo(
+    () => columns.reduce(
+      (count, column) => count + (column.showAsAdditional ? 1 : 0),
+      0
+    ),
+    [columns]
+  );
+  const statesIds = React.useMemo(() => {
+    return Array(statesCount).fill("").map(() => uniqueId());
+  }, [statesCount]);
+  const [isFiltersRowVisible, setIsFiltersRowVisible] = React.useState(
+    /* (persistentStorage.showResponsiveTableFilters as boolean) ??  */
+    false
+  );
+  React.useEffect(() => {
+    persistentStorage.showResponsiveTableFilters = isFiltersRowVisible;
+  }, [isFiltersRowVisible]);
+  const buttonProps = useOtherTagButton(
+    React.useMemo(
+      () => ({
+        className: "additionalColumn",
+        onClick: () => setIsFiltersRowVisible((current) => !current)
+      }),
+      []
+    )
+  );
+  const [ref, setRef] = useState(null);
+  useUpdateEffect(() => {
+    const handleFocus = (ev) => {
+      ev.stopPropagation();
+      setIsFiltersRowVisible(true);
+    };
+    ref?.addEventListener(customEvents.focus, handleFocus);
+    return () => {
+      ref?.removeEventListener(customEvents.focus, handleFocus);
+    };
+  }, [ref]);
+  return /* @__PURE__ */ jsxs("thead", { children: [
+    /* @__PURE__ */ jsxs("tr", { "data-focusindex": 1, children: [
+      (additionalColumns > 0 || hasNonAdditionalFilters) && /* @__PURE__ */ jsx(
+        "th",
+        {
+          "aria-colindex": 1,
+          "aria-rowindex": 1,
+          "data-focused": focusedColumn === 1 && focusedRow === -1 - (hasNonAdditionalFilters ? 1 : 0),
+          ...buttonProps,
+          tabIndex: focusedColumn === 1 && focusedRow === -1 - (hasNonAdditionalFilters ? 1 : 0) ? 0 : -1,
+          "aria-label": isFiltersRowVisible ? getLabel("lblHideFilters").text : getLabel("lblShowFilters").text,
+          role: "rowheader",
+          children: hasNonAdditionalFilters ? /* @__PURE__ */ jsx(
+            Icon,
+            {
+              className: "filterButton",
+              name: "Filter",
+              title: isFiltersRowVisible ? getLabel("lblHideFilters").text : getLabel("lblShowFilters").text,
+              "aria-label": isFiltersRowVisible ? getLabel("lblHideFilters").text : getLabel("lblShowFilters").text
+            }
+          ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { style: { display: "none" }, children: isFiltersRowVisible ? getLabel("lblHideFilters").text : getLabel("lblShowFilters").text }),
+            /* @__PURE__ */ jsx("span", { children: "\xA0" })
+          ] })
+        }
+      ),
+      statesIds.map((id, i) => /* @__PURE__ */ jsx(StateCell, { isHeader: true, index: i, rowIndex: 1 }, id)),
+      columns.map((current, actualColumnIndex) => ({
+        ...current,
+        actualTableColumnIndex: actualColumnIndex
+      })).filter((current) => !current.showAsAdditional).map((current, columnIndex) => {
+        if (current.hidden)
+          return null;
+        return /* @__PURE__ */ jsx(
+          HeaderCell,
+          {
+            apiaColumnIndex: current.actualTableColumnIndex,
+            columnIndex: current.actualTableColumnIndex,
+            inTableColumnIndex: columnIndex
+          },
+          current.name
+        );
+      })
+    ] }),
+    filters.length > 0 && /* @__PURE__ */ jsxs(
+      "tr",
+      {
+        ref: setRef,
+        "data-focusindex": 2,
+        className: `responsiveTable__filters__row ${isFiltersRowVisible ? "" : "hidden"}`,
+        children: [
+          (additionalColumns > 0 || hasNonAdditionalFilters) && /* @__PURE__ */ jsx(
+            "td",
+            {
+              className: "noFilter",
+              "aria-colindex": 1,
+              "aria-rowindex": 2,
+              tabIndex: focusedColumn === 1 && focusedRow === -1 ? 0 : -1,
+              "data-focused": focusedColumn === 1 && focusedRow === -1,
+              children: "\xA0"
+            }
+          ),
+          statesIds.map((id, i) => /* @__PURE__ */ jsx(StateCell, { isHeader: true, index: i, rowIndex: 2 }, id)),
+          columns.filter((current) => !current.showAsAdditional).map((current, columnIndex) => {
+            const filter = filters.find(
+              (search) => search.definition.column === current.name
+            );
+            return current.showAsAdditional ? null : /* @__PURE__ */ jsx(
+              FilterCell,
+              {
+                columnIndex,
+                filter: filter?.definition
+              },
+              current.name
+            );
+          })
+        ]
+      }
+    )
+  ] });
+};
+const Header = React.memo(NoMemoHeader);
+
+export { Header };
+//# sourceMappingURL=Header.js.map

package/dist/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sources":["../src/Header.tsx"],"sourcesContent":["import { useUpdateEffect } from 'ahooks';\r\nimport uniqueId from 'lodash-es/uniqueId';\r\nimport React, { useState } from 'react';\r\nimport {\r\n  customEvents,\r\n  getLabel,\r\n  persistentStorage,\r\n  TApiaFilter,\r\n} from '@apia/util';\r\nimport { shallowEqual } from '@apia/store';\r\nimport { useOtherTagButton } from '@apia/components';\r\nimport { Icon } from '@apia/icons';\r\nimport { HeaderCell } from './HeaderCell';\r\nimport { useResponsiveTableContext } from './ResponsiveTableContext';\r\nimport { useResponsiveTable } from './store';\r\nimport { StateCell } from './StateCell';\r\nimport { FilterCell } from './FilterCell';\r\n\r\ndeclare global {\r\n  interface Window {\r\n    focusedRow: number;\r\n    focusedColumn: number;\r\n    hasNonAdditionalFilters: boolean;\r\n  }\r\n}\r\n\r\nconst NoMemoHeader = () => {\r\n  const { name } = useResponsiveTableContext();\r\n  const { columns, hasNonAdditionalFilters, focusedColumn, focusedRow } =\r\n    useResponsiveTable((global) => {\r\n      const tableState = global.responsiveTableSlice[name];\r\n      window.focusedRow = tableState?.focusedRow;\r\n      window.focusedColumn = tableState?.focusedColumn;\r\n      window.hasNonAdditionalFilters =\r\n        tableState?.hasNonAdditionalFilters || false;\r\n      return {\r\n        columns: tableState?.columns ?? [],\r\n        focusedColumn: tableState?.focusedColumn,\r\n        focusedRow: tableState?.focusedRow,\r\n        hasNonAdditionalFilters: tableState?.hasNonAdditionalFilters,\r\n      };\r\n    }, shallowEqual);\r\n\r\n  const filters = useResponsiveTable<\r\n    {\r\n      columnIndex: number;\r\n      definition: TApiaFilter;\r\n    }[]\r\n  >(\r\n    (global) => {\r\n      const tableState = global.responsiveTableSlice[name];\r\n      const returnObject = (tableState?.filters ?? [])\r\n        .map((current) => ({\r\n          columnIndex: tableState.columns.findIndex(\r\n            (search) => search.name === current.column,\r\n          ),\r\n          definition: current,\r\n        }))\r\n        .filter((current) => current.columnIndex >= 0);\r\n\r\n      return returnObject;\r\n    },\r\n    (a, b) => {\r\n      return (\r\n        a.length === b.length &&\r\n        a.reduce<boolean>((result, current, index) => {\r\n          return (\r\n            result && shallowEqual(current.definition, b[index].definition)\r\n          );\r\n        }, true)\r\n      );\r\n    },\r\n  );\r\n\r\n  const statesCount = useResponsiveTable((globalState) => {\r\n    const state = globalState.responsiveTableSlice[name];\r\n    return state?.statesColumns ?? 0;\r\n  }, shallowEqual);\r\n\r\n  const additionalColumns = React.useMemo(\r\n    () =>\r\n      columns.reduce(\r\n        (count, column) => count + (column.showAsAdditional ? 1 : 0),\r\n        0,\r\n      ),\r\n    [columns],\r\n  );\r\n\r\n  const statesIds = React.useMemo(() => {\r\n    return Array(statesCount)\r\n      .fill('')\r\n      .map(() => uniqueId());\r\n  }, [statesCount]);\r\n\r\n  const [isFiltersRowVisible, setIsFiltersRowVisible] = React.useState<boolean>(\r\n    /* (persistentStorage.showResponsiveTableFilters as boolean) ??  */ false,\r\n  );\r\n  React.useEffect(() => {\r\n    persistentStorage.showResponsiveTableFilters = isFiltersRowVisible;\r\n  }, [isFiltersRowVisible]);\r\n\r\n  const buttonProps = useOtherTagButton(\r\n    React.useMemo(\r\n      () => ({\r\n        className: 'additionalColumn',\r\n        onClick: () => setIsFiltersRowVisible((current) => !current),\r\n      }),\r\n      [],\r\n    ),\r\n  );\r\n\r\n  const [ref, setRef] = useState<HTMLTableRowElement | null>(null);\r\n\r\n  useUpdateEffect(() => {\r\n    const handleFocus = (ev: Event) => {\r\n      ev.stopPropagation();\r\n      setIsFiltersRowVisible(true);\r\n    };\r\n    ref?.addEventListener(customEvents.focus, handleFocus);\r\n    return () => {\r\n      ref?.removeEventListener(customEvents.focus, handleFocus);\r\n    };\r\n  }, [ref]);\r\n\r\n  return (\r\n    <thead>\r\n      <tr data-focusindex={1}>\r\n        {(additionalColumns > 0 || hasNonAdditionalFilters) && (\r\n          <th\r\n            aria-colindex={1}\r\n            aria-rowindex={1}\r\n            data-focused={\r\n              focusedColumn === 1 &&\r\n              focusedRow === -1 - (hasNonAdditionalFilters ? 1 : 0)\r\n            }\r\n            {...buttonProps}\r\n            tabIndex={\r\n              focusedColumn === 1 &&\r\n              focusedRow === -1 - (hasNonAdditionalFilters ? 1 : 0)\r\n                ? 0\r\n                : -1\r\n            }\r\n            aria-label={\r\n              isFiltersRowVisible\r\n                ? getLabel('lblHideFilters').text\r\n                : getLabel('lblShowFilters').text\r\n            }\r\n            role=\"rowheader\"\r\n          >\r\n            {hasNonAdditionalFilters ? (\r\n              <Icon\r\n                className=\"filterButton\"\r\n                name=\"Filter\"\r\n                title={\r\n                  isFiltersRowVisible\r\n                    ? getLabel('lblHideFilters').text\r\n                    : getLabel('lblShowFilters').text\r\n                }\r\n                aria-label={\r\n                  isFiltersRowVisible\r\n                    ? getLabel('lblHideFilters').text\r\n                    : getLabel('lblShowFilters').text\r\n                }\r\n              />\r\n            ) : (\r\n              <>\r\n                <span style={{ display: 'none' }}>\r\n                  {isFiltersRowVisible\r\n                    ? getLabel('lblHideFilters').text\r\n                    : getLabel('lblShowFilters').text}\r\n                </span>\r\n                <span>&nbsp;</span>\r\n              </>\r\n            )}\r\n          </th>\r\n        )}\r\n        {statesIds.map((id, i) => (\r\n          <StateCell isHeader key={id} index={i} rowIndex={1} />\r\n        ))}\r\n        {columns\r\n          .map((current, actualColumnIndex) => ({\r\n            ...current,\r\n            actualTableColumnIndex: actualColumnIndex,\r\n          }))\r\n          .filter((current) => !current.showAsAdditional)\r\n          .map((current, columnIndex) => {\r\n            if (current.hidden) return null;\r\n\r\n            return (\r\n              <HeaderCell\r\n                apiaColumnIndex={current.actualTableColumnIndex}\r\n                columnIndex={current.actualTableColumnIndex}\r\n                inTableColumnIndex={columnIndex}\r\n                key={current.name}\r\n              />\r\n            );\r\n          })}\r\n      </tr>\r\n      {filters.length > 0 && (\r\n        <tr\r\n          ref={setRef}\r\n          data-focusindex={2}\r\n          className={`responsiveTable__filters__row ${\r\n            isFiltersRowVisible ? '' : 'hidden'\r\n          }`}\r\n        >\r\n          {(additionalColumns > 0 || hasNonAdditionalFilters) && (\r\n            <td\r\n              className=\"noFilter\"\r\n              aria-colindex={1}\r\n              aria-rowindex={2}\r\n              tabIndex={focusedColumn === 1 && focusedRow === -1 ? 0 : -1}\r\n              data-focused={focusedColumn === 1 && focusedRow === -1}\r\n            >\r\n              &nbsp;\r\n            </td>\r\n          )}\r\n          {statesIds.map((id, i) => (\r\n            <StateCell isHeader key={id} index={i} rowIndex={2} />\r\n          ))}\r\n          {columns\r\n            .filter((current) => !current.showAsAdditional)\r\n            .map((current, columnIndex) => {\r\n              const filter = filters.find(\r\n                (search) => search.definition.column === current.name,\r\n              );\r\n\r\n              return current.showAsAdditional ? null : (\r\n                <FilterCell\r\n                  key={current.name}\r\n                  columnIndex={columnIndex}\r\n                  filter={filter?.definition}\r\n                />\r\n              );\r\n            })}\r\n        </tr>\r\n      )}\r\n    </thead>\r\n  );\r\n};\r\n\r\nexport const Header = React.memo(NoMemoHeader);\r\n"],"names":[],"mappings":"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"}

package/dist/HeaderCell.js

@@ -0,0 +1,223 @@
+import { jsx, jsxs } from '@apia/theme/jsx-runtime';
+import { FaSortUp, FaSortDown, FaSort } from '@meronex/icons/fa';
+import React from 'react';
+import { shallowEqual } from 'react-redux';
+import { Box } from '@apia/theme';
+import { debugDispatcher, persistentStorage, EventEmitter, isChild, getSpecificParent } from '@apia/util';
+import { useOtherTagButton, AutoEllipsis } from '@apia/components';
+import { domPropsSelector } from './ResponsiveTable.js';
+import { useResponsiveTableContext } from './ResponsiveTableContext.js';
+import { useResponsiveTable } from './store/index.js';
+import { useDomProps } from './store/selection/useDomProps.js';
+
+const widthStorageName = "tablesWidths";
+function getColumnWidth(width) {
+  if (typeof width === "string") {
+    if (width.match(/(%|px|vw|vh|vmin|vmax|cm|mm|in|pt|pc)/))
+      return width;
+    if (width === "")
+      return "auto";
+    const numberValue = Number.parseInt(width, 10);
+    if (isNaN(numberValue))
+      return "auto";
+    return numberValue;
+  }
+  if (typeof width === "number")
+    return width;
+  return width;
+}
+debugDispatcher.on(
+  "cleanTableSizes",
+  ([tableName]) => {
+    const currentWidths = persistentStorage[widthStorageName];
+    delete currentWidths[tableName];
+    persistentStorage[widthStorageName] = currentWidths;
+  },
+  'Se usa para borrar el estado de una tabla. Uso: dd.cleanTableSizes("TableName")'
+);
+function makeColumnName(tableName, columnName) {
+  return `${tableName}${columnName}`;
+}
+const thWidthEmitter = new class ThWidthEmitter extends EventEmitter {
+}();
+const NoMemoHeaderCell = ({
+  apiaColumnIndex,
+  columnIndex,
+  inTableColumnIndex
+}) => {
+  const { name, onSortChange } = useResponsiveTableContext();
+  const uniqueId = window.location.href.match(/busEntId=(\d+)/)?.[1] ?? window.location.href.match(/query=(\d+)/)?.[1] ?? "";
+  const isGlobal = window.isGlobal ? "isGlobal" : "notGlobal";
+  const actualName = name + uniqueId + String(isGlobal);
+  const column = useResponsiveTable((global) => {
+    const tableState = global.responsiveTableSlice[name];
+    return tableState?.columns[columnIndex];
+  }, shallowEqual);
+  const storedWidth = persistentStorage[widthStorageName]?.[actualName]?.[column.name];
+  const [width, setWidth] = React.useState(storedWidth ?? 200);
+  const [isResize, setIsResize] = React.useState(storedWidth !== void 0);
+  React.useEffect(() => {
+    return void thWidthEmitter.on("resize", (ev) => {
+      if (ev.name === makeColumnName(actualName, column.name)) {
+        setIsResize(true);
+        setWidth(ev.width);
+      }
+    });
+  }, [column.name, actualName]);
+  const isFilterRequired = useResponsiveTable((global) => {
+    const tableState = global.responsiveTableSlice[name];
+    const columnFilter = tableState?.filters.find(
+      (current) => current.column === column.title
+    );
+    return columnFilter?.required;
+  }, shallowEqual);
+  const isSortingAllowed = useResponsiveTable((global) => {
+    const tableState = global.responsiveTableSlice[name];
+    return tableState?.allowSorting;
+  });
+  const domProps = useDomProps(
+    "th",
+    {
+      columnIndex: inTableColumnIndex
+    },
+    domPropsSelector(name)
+  );
+  const sx = React.useMemo(
+    () => !isResize ? {
+      minWidth: getColumnWidth(column.minWidth ?? column.width),
+      maxWidth: column.maxWidth !== void 0 ? getColumnWidth(column.maxWidth) : void 0,
+      width: getColumnWidth(column.width),
+      position: "relative"
+    } : {
+      width: `${width}px`,
+      minWidth: `${width}px`,
+      position: "relative"
+    },
+    [column.maxWidth, column.minWidth, column.width, isResize, width]
+  );
+  const buttonProps = useOtherTagButton(
+    React.useMemo(
+      () => ({
+        className: "headButton",
+        onClick: (ev) => {
+          if (isChild(
+            ev.target,
+            (current) => current.classList.contains("headButton__resizer")
+          ))
+            return;
+          console.warn("Buttons slice is not defined");
+          if (onSortChange && column.allowSorting !== false && isSortingAllowed !== false)
+            onSortChange({
+              column,
+              columnIndex: apiaColumnIndex,
+              name: column.name,
+              sortValue: ["Asc", "Desc"][column.currentSorting !== "A" ? 0 : 1]
+            });
+        }
+      }),
+      [apiaColumnIndex, column, isSortingAllowed, onSortChange]
+    )
+  );
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      as: "th",
+      style: sx,
+      "data-columnname": column.name,
+      title: column.title ?? column.label ?? column.name,
+      ...buttonProps,
+      ...domProps,
+      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: `${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, {}),
+          column.allowSorting !== false && !column.currentSorting && /* @__PURE__ */ jsx(FaSort, {})
+        ] }),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            className: "headButton__resizer",
+            onMouseDown: (ev) => {
+              if (!isResize) {
+                const trElement = getSpecificParent(
+                  ev.target,
+                  (current) => current.tagName === "TR"
+                );
+                trElement?.querySelectorAll("th").forEach((current) => {
+                  thWidthEmitter.emit("resize", {
+                    name: makeColumnName(
+                      actualName,
+                      current.dataset.columnname
+                    ),
+                    width: current.clientWidth
+                  });
+                });
+                setIsResize(true);
+              }
+              const th = getSpecificParent(
+                ev.target,
+                (current) => current.tagName === "TH"
+              );
+              if (!th)
+                throw new Error("There is no th");
+              const initialX = ev.clientX;
+              const initialWidth = th.clientWidth;
+              const resize = (mousemoveEv) => {
+                const dif = mousemoveEv.clientX - initialX;
+                setWidth(initialWidth + dif);
+              };
+              const unsuscribe = () => {
+                const trElement = getSpecificParent(
+                  ev.target,
+                  (current) => current.tagName === "TR"
+                );
+                trElement?.querySelectorAll("th").forEach((current) => {
+                  persistentStorage[widthStorageName] = {
+                    ...persistentStorage[widthStorageName],
+                    [actualName]: {
+                      ...persistentStorage[widthStorageName]?.[actualName],
+                      [current.dataset.columnname]: current.clientWidth
+                    }
+                  };
+                });
+                document.removeEventListener("mousemove", resize);
+                document.removeEventListener("mouseup", unsuscribe);
+              };
+              document.addEventListener("mousemove", resize);
+              document.addEventListener("mouseup", unsuscribe);
+              return false;
+            }
+          }
+        )
+      ] })
+    }
+  );
+};
+const HeaderCell = React.memo(NoMemoHeaderCell);
+
+export { HeaderCell };
+//# sourceMappingURL=HeaderCell.js.map

package/dist/HeaderCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderCell.js","sources":["../src/HeaderCell.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-dynamic-delete */\r\nimport { FaSortUp, FaSortDown, FaSort } from '@meronex/icons/fa';\r\nimport React, { CSSProperties } from 'react';\r\nimport { shallowEqual } from 'react-redux';\r\nimport { Box } from '@apia/theme';\r\nimport {\r\n  EventEmitter,\r\n  TMap,\r\n  debugDispatcher,\r\n  getSpecificParent,\r\n  isChild,\r\n  persistentStorage,\r\n} from '@apia/util';\r\nimport { AutoEllipsis, useOtherTagButton } from '@apia/components';\r\nimport { domPropsSelector } from './ResponsiveTable';\r\nimport { useResponsiveTableContext } from './ResponsiveTableContext';\r\nimport { TResponsiveTableSortValue } from './types';\r\nimport { useResponsiveTable } from './store';\r\nimport { useDomProps } from './store/selection/useDomProps';\r\n\r\ninterface IHeaderCell {\r\n  /**\r\n   * Para ordenar en Apia se usa un índice de columna, que se\r\n   * corresponde con su posición en base 0, sin tomar en cuenta\r\n   * las columnas adicionales.\r\n   */\r\n  apiaColumnIndex: number;\r\n  columnIndex: number;\r\n  inTableColumnIndex: number;\r\n}\r\n\r\nconst widthStorageName = 'tablesWidths';\r\n\r\n/**\r\n * Calcula el ancho de la columna dependiendo del valor establecido,\r\n * si el valor es numérico o un string que contiene un número sin\r\n * unidad, devuelve el doble de ese número para establecer una\r\n * relatividad con los tamaños de las columnas actuales en Apia.\r\n *\r\n * Es decir, como todo en Apia era más chico, los tamaños que se\r\n * establecían antes no quedan visualmente agradables con los\r\n * tamaños actuales, por eso se magnifican multiplicando por 2.\r\n */\r\nfunction getColumnWidth(width?: string | number) {\r\n  if (typeof width === 'string') {\r\n    if (width.match(/(%|px|vw|vh|vmin|vmax|cm|mm|in|pt|pc)/)) return width;\r\n    if (width === '') return 'auto';\r\n    const numberValue = Number.parseInt(width, 10);\r\n    if (isNaN(numberValue)) return 'auto';\r\n    return numberValue;\r\n  }\r\n  if (typeof width === 'number') return width;\r\n  return width;\r\n}\r\ndebugDispatcher.on(\r\n  'cleanTableSizes',\r\n  ([tableName]) => {\r\n    const currentWidths = persistentStorage[widthStorageName] as TMap<unknown>;\r\n    delete currentWidths[tableName as string];\r\n    persistentStorage[widthStorageName] = currentWidths;\r\n  },\r\n  'Se usa para borrar el estado de una tabla. Uso: dd.cleanTableSizes(\"TableName\")',\r\n);\r\nfunction makeColumnName(tableName: string, columnName: string): string {\r\n  return `${tableName}${columnName}`;\r\n}\r\n\r\nconst thWidthEmitter = new (class ThWidthEmitter extends EventEmitter<{\r\n  resize: { name: string; width: number };\r\n}> {})();\r\n\r\nconst NoMemoHeaderCell = ({\r\n  apiaColumnIndex,\r\n  columnIndex,\r\n  inTableColumnIndex,\r\n}: IHeaderCell) => {\r\n  const { name, onSortChange } = useResponsiveTableContext();\r\n  const uniqueId =\r\n    (window.location.href.match(/busEntId=(\\d+)/)?.[1] as string) ??\r\n    (window.location.href.match(/query=(\\d+)/)?.[1] as string) ??\r\n    '';\r\n  const isGlobal = window.isGlobal ? 'isGlobal' : 'notGlobal';\r\n  const actualName = name + uniqueId + String(isGlobal);\r\n  const column = useResponsiveTable((global) => {\r\n    const tableState = global.responsiveTableSlice[name];\r\n    return tableState?.columns[columnIndex];\r\n  }, shallowEqual);\r\n  const storedWidth = (\r\n    (persistentStorage[widthStorageName] as TMap<unknown>)?.[\r\n      actualName\r\n    ] as TMap<unknown>\r\n  )?.[column.name] as number;\r\n\r\n  const [width, setWidth] = React.useState(storedWidth ?? 200);\r\n  const [isResize, setIsResize] = React.useState(storedWidth !== undefined);\r\n\r\n  React.useEffect(() => {\r\n    return void thWidthEmitter.on('resize', (ev) => {\r\n      if (ev.name === makeColumnName(actualName, column.name)) {\r\n        setIsResize(true);\r\n        setWidth(ev.width);\r\n      }\r\n    });\r\n  }, [column.name, actualName]);\r\n\r\n  const isFilterRequired = useResponsiveTable((global) => {\r\n    const tableState = global.responsiveTableSlice[name];\r\n    const columnFilter = tableState?.filters.find(\r\n      (current) => current.column === column.title,\r\n    );\r\n    return columnFilter?.required;\r\n  }, shallowEqual);\r\n\r\n  const isSortingAllowed = useResponsiveTable((global) => {\r\n    const tableState = global.responsiveTableSlice[name];\r\n    return tableState?.allowSorting;\r\n  });\r\n\r\n  const domProps = useDomProps(\r\n    'th',\r\n    {\r\n      columnIndex: inTableColumnIndex,\r\n    },\r\n    domPropsSelector(name),\r\n  );\r\n\r\n  const sx: CSSProperties = React.useMemo(\r\n    () =>\r\n      !isResize\r\n        ? {\r\n            minWidth: getColumnWidth(column.minWidth ?? column.width),\r\n            maxWidth:\r\n              column.maxWidth !== undefined\r\n                ? getColumnWidth(column.maxWidth)\r\n                : undefined,\r\n            width: getColumnWidth(column.width),\r\n            position: 'relative',\r\n          }\r\n        : {\r\n            width: `${width}px`,\r\n            minWidth: `${width}px`,\r\n            position: 'relative',\r\n          },\r\n    [column.maxWidth, column.minWidth, column.width, isResize, width],\r\n  );\r\n\r\n  const buttonProps = useOtherTagButton(\r\n    React.useMemo(\r\n      () => ({\r\n        className: 'headButton',\r\n        onClick: (ev) => {\r\n          if (\r\n            isChild(ev.target as HTMLElement, (current) =>\r\n              current.classList.contains('headButton__resizer'),\r\n            )\r\n          )\r\n            return;\r\n\r\n          console.warn('Buttons slice is not defined');\r\n          /* if (\r\n            responsiveTableStore\r\n              .getState()\r\n              .buttonsSlice.performingActions.includes('disableTable')\r\n          )\r\n            return; */\r\n          if (\r\n            onSortChange &&\r\n            column.allowSorting !== false &&\r\n            isSortingAllowed !== false\r\n          )\r\n            onSortChange({\r\n              column,\r\n              columnIndex: apiaColumnIndex,\r\n              name: column.name,\r\n              sortValue: ['Asc', 'Desc'][\r\n                column.currentSorting !== 'A' ? 0 : 1\r\n              ] as TResponsiveTableSortValue,\r\n            });\r\n        },\r\n      }),\r\n      [apiaColumnIndex, column, isSortingAllowed, onSortChange],\r\n    ),\r\n  );\r\n  return (\r\n    <Box\r\n      as=\"th\"\r\n      style={sx}\r\n      data-columnname={column.name}\r\n      title={column.title ?? column.label ?? column.name}\r\n      {...buttonProps}\r\n      {...domProps}\r\n      role=\"rowheader\"\r\n      className={`${\r\n        isFilterRequired && window.SHOW_REQUIRED_POSITION\r\n          ? 'requiredFilterColumn'\r\n          : ''\r\n      }`}\r\n    >\r\n      <Box as=\"span\" className=\"headButton__container\">\r\n        <Box\r\n          as=\"span\"\r\n          className={`${\r\n            isFilterRequired ? 'requiredFilter__Column' : ''\r\n          } headButton__label`}\r\n        >\r\n          <AutoEllipsis\r\n            overrideStyles={(el) => {\r\n              const th = el.closest('th') as HTMLElement;\r\n              return {\r\n                width: `${Math.max(\r\n                  100,\r\n                  Number.parseInt(window.getComputedStyle(th).width),\r\n                )}px`,\r\n              };\r\n            }}\r\n          >\r\n            {column.label}\r\n          </AutoEllipsis>\r\n        </Box>\r\n        <Box as=\"span\" className=\"headButton__sortIcon\">\r\n          {column.allowSorting !== false && column.currentSorting === 'A' && (\r\n            <FaSortUp />\r\n          )}\r\n          {column.allowSorting !== false && column.currentSorting === 'D' && (\r\n            <FaSortDown />\r\n          )}\r\n          {column.allowSorting !== false && !column.currentSorting && (\r\n            <FaSort />\r\n          )}\r\n        </Box>\r\n        <Box\r\n          // sx={{ display: 'none' }}\r\n          className=\"headButton__resizer\"\r\n          onMouseDown={(ev) => {\r\n            if (!isResize) {\r\n              const trElement = getSpecificParent(\r\n                ev.target as HTMLElement,\r\n                (current) => current.tagName === 'TR',\r\n              );\r\n\r\n              trElement?.querySelectorAll('th').forEach((current) => {\r\n                thWidthEmitter.emit('resize', {\r\n                  name: makeColumnName(\r\n                    actualName,\r\n                    current.dataset.columnname as string,\r\n                  ),\r\n                  width: (current as HTMLElement).clientWidth,\r\n                });\r\n              });\r\n\r\n              setIsResize(true);\r\n            }\r\n\r\n            const th = getSpecificParent(\r\n              ev.target as HTMLElement,\r\n              (current) => current.tagName === 'TH',\r\n            );\r\n            if (!th) throw new Error('There is no th');\r\n\r\n            const initialX = ev.clientX;\r\n            const initialWidth = th.clientWidth;\r\n\r\n            const resize = (mousemoveEv: MouseEvent) => {\r\n              const dif = mousemoveEv.clientX - initialX;\r\n\r\n              setWidth(initialWidth + dif);\r\n            };\r\n            const unsuscribe = () => {\r\n              const trElement = getSpecificParent(\r\n                ev.target as HTMLElement,\r\n                (current) => current.tagName === 'TR',\r\n              );\r\n              trElement?.querySelectorAll('th').forEach((current) => {\r\n                persistentStorage[widthStorageName] = {\r\n                  ...(persistentStorage[widthStorageName] as TMap<unknown>),\r\n                  [actualName]: {\r\n                    ...((\r\n                      persistentStorage[widthStorageName] as TMap<unknown>\r\n                    )?.[actualName] as TMap<unknown>),\r\n                    [current.dataset.columnname as string]: (\r\n                      current as HTMLElement\r\n                    ).clientWidth,\r\n                  },\r\n                };\r\n              });\r\n              document.removeEventListener('mousemove', resize);\r\n              document.removeEventListener('mouseup', unsuscribe);\r\n            };\r\n\r\n            document.addEventListener('mousemove', resize);\r\n            document.addEventListener('mouseup', unsuscribe);\r\n\r\n            return false;\r\n          }}\r\n        />\r\n      </Box>\r\n    </Box>\r\n  );\r\n};\r\n\r\nexport const HeaderCell = React.memo(NoMemoHeaderCell);\r\n"],"names":[],"mappings":"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"}

package/dist/KeyHandler.js

@@ -0,0 +1,28 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import React from 'react';
+import { useResponsiveTableContext } from './ResponsiveTableContext.js';
+import { makeKeyHandler } from './store/selection/makeKeyHandler.js';
+import { responsiveTableActions } from './store/index.js';
+
+const NoMemoKeyHandler = (props) => {
+  const { name, onChangeSelection, onSelectRows } = useResponsiveTableContext();
+  const Handler = React.useMemo(
+    () => makeKeyHandler(responsiveTableActions, name, {
+      throttleOptions: { wait: 50 },
+      stateSelector: (global) => global.responsiveTableSlice[name]
+    }),
+    [name]
+  );
+  return /* @__PURE__ */ jsx(
+    Handler,
+    {
+      onChangeSelection,
+      onSelectRows,
+      ...props
+    }
+  );
+};
+const KeyHandler = React.memo(NoMemoKeyHandler);
+
+export { KeyHandler };
+//# sourceMappingURL=KeyHandler.js.map

package/dist/KeyHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyHandler.js","sources":["../src/KeyHandler.tsx"],"sourcesContent":["import React from 'react';\r\nimport { BoxProps } from '@apia/theme';\r\nimport { useResponsiveTableContext } from './ResponsiveTableContext';\r\nimport { makeKeyHandler } from './store/selection/makeKeyHandler';\r\nimport { responsiveTableActions } from './store';\r\n\r\nexport interface IKeyHandler {\r\n  children: React.ReactNode;\r\n}\r\n\r\nconst NoMemoKeyHandler = (props: BoxProps) => {\r\n  const { name, onChangeSelection, onSelectRows } = useResponsiveTableContext();\r\n\r\n  const Handler = React.useMemo(\r\n    () =>\r\n      makeKeyHandler(responsiveTableActions, name, {\r\n        throttleOptions: { wait: 50 },\r\n        stateSelector: (global) => global.responsiveTableSlice[name],\r\n      }),\r\n    [name],\r\n  );\r\n\r\n  return (\r\n    <Handler\r\n      onChangeSelection={onChangeSelection}\r\n      onSelectRows={onSelectRows}\r\n      {...props}\r\n    />\r\n  );\r\n};\r\n\r\nexport const KeyHandler = React.memo(NoMemoKeyHandler);\r\n"],"names":[],"mappings":";;;;;;AAUA,MAAM,gBAAA,GAAmB,CAAC,KAAoB,KAAA;AAC5C,EAAA,MAAM,EAAE,IAAA,EAAM,iBAAmB,EAAA,YAAA,KAAiB,yBAA0B,EAAA,CAAA;AAE5E,EAAA,MAAM,UAAU,KAAM,CAAA,OAAA;AAAA,IACpB,MACE,cAAe,CAAA,sBAAA,EAAwB,IAAM,EAAA;AAAA,MAC3C,eAAA,EAAiB,EAAE,IAAA,EAAM,EAAG,EAAA;AAAA,MAC5B,aAAe,EAAA,CAAC,MAAW,KAAA,MAAA,CAAO,qBAAqB,IAAI,CAAA;AAAA,KAC5D,CAAA;AAAA,IACH,CAAC,IAAI,CAAA;AAAA,GACP,CAAA;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,iBAAA;AAAA,MACA,YAAA;AAAA,MACC,GAAG,KAAA;AAAA,KAAA;AAAA,GACN,CAAA;AAEJ,CAAA,CAAA;AAEa,MAAA,UAAA,GAAa,KAAM,CAAA,IAAA,CAAK,gBAAgB;;;;"}

package/dist/ResponsiveTable.d.ts

@@ -0,0 +1,8 @@
+import React__default from 'react';
+import { BoxProps } from '@apia/theme';
+import './types.js';
+
+declare const ResponsiveTable: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<BoxProps & React__default.RefAttributes<HTMLDivElement>>>;
+
+export { ResponsiveTable };
+//# sourceMappingURL=ResponsiveTable.d.ts.map

package/dist/ResponsiveTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveTable.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}