@apia/table 1.0.4 → 2.0.0

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';\nimport { shallowEqual } from 'react-redux';\nimport { domPropsSelector } from './ResponsiveTable';\nimport { DefaultCellRenderer } from './renderers/DefaultCellRenderer';\nimport { useResponsiveTableContext } from './ResponsiveTableContext';\nimport { useDomProps } from './store/selection/useDomProps';\nimport { useResponsiveTable } from './store';\n\ninterface ICell {\n  columnIndex: number;\n  inTableColumnIndex: number;\n  rowIndex: number;\n}\n\nconst NoMemoCell: FC<ICell> = ({\n  columnIndex,\n  inTableColumnIndex,\n  rowIndex,\n}) => {\n  const { name } = useResponsiveTableContext();\n\n  const domProps = useDomProps(\n    'td',\n    { columnIndex: inTableColumnIndex, rowIndex },\n    domPropsSelector(name),\n  );\n\n  const cell = useResponsiveTable((global) => {\n    const tableState = global.responsiveTableSlice[name];\n\n    return tableState?.rows[rowIndex]?.cells[columnIndex];\n  }, shallowEqual);\n\n  const column = useResponsiveTable((global) => {\n    const tableState = global.responsiveTableSlice[name];\n    return tableState?.columns[columnIndex];\n  }, shallowEqual);\n\n  const row = useResponsiveTable((global) => {\n    const tableState = global.responsiveTableSlice[name];\n    return tableState?.rows[rowIndex];\n  }, shallowEqual);\n\n  const Renderer = React.useMemo(\n    () => cell?.Renderer ?? column.Renderer ?? DefaultCellRenderer,\n    [cell?.Renderer, column.Renderer],\n  );\n\n  if (!Renderer || !cell)\n    return row.separator ? <div className=\"separator\"></div> : null;\n\n  return (\n    <Renderer\n      {...(domProps as Omit<React.HTMLProps<HTMLTableCellElement>, 'ref'>)}\n      cell={cell}\n      column={column}\n      row={row}\n    />\n  );\n};\n\nexport const Cell = React.memo(NoMemoCell);\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';\nimport React from 'react';\nimport { TApiaFilter, TApiaFilterValue } from '@apia/util';\nimport { ApiaFilter } from '@apia/components';\nimport { useResponsiveTableContext } from './ResponsiveTableContext';\nimport { domPropsSelector } from './ResponsiveTable';\nimport { RangeFilter } from './filters/RangeFilter';\nimport { useDomProps } from './store/selection/useDomProps';\n\ninterface IFilterCell {\n  columnIndex: number;\n  filter?: TApiaFilter;\n}\n\nexport const FilterCell = ({ columnIndex, filter }: IFilterCell) => {\n  const { name, onFilterBlur, onFilterChange, onFilterPressEnter } =\n    useResponsiveTableContext();\n  const domProps = useDomProps(\n    'filterTd',\n    {\n      columnIndex,\n    },\n    domPropsSelector(name),\n  );\n\n  const handleOnBlur = React.useCallback(\n    (currentValue: TApiaFilterValue) => {\n      if (filter && onFilterBlur) onFilterBlur({ ...filter, currentValue });\n    },\n    [filter, onFilterBlur],\n  );\n\n  const handleOnChange = React.useCallback(\n    (currentValue: TApiaFilterValue) => {\n      if (filter && onFilterChange)\n        return onFilterChange({ ...filter, currentValue });\n      return true;\n    },\n    [filter, onFilterChange],\n  );\n\n  const handleOnPressEnter = React.useCallback(\n    (currentValue: TApiaFilterValue) => {\n      if (filter && onFilterPressEnter)\n        onFilterPressEnter({ ...filter, currentValue });\n    },\n    [filter, onFilterPressEnter],\n  );\n\n  function findFilter() {\n    if (filter?.isRange) {\n      return <RangeFilter filter={filter} />;\n    }\n    if (filter && !(filter.asAdditional || !filter.column || filter.isRange)) {\n      return (\n        <ApiaFilter\n          onBlur={handleOnBlur}\n          onChange={handleOnChange}\n          onPressEnter={handleOnPressEnter}\n          filter={filter}\n        />\n      );\n    }\n\n    let label: string;\n    if (filter && (filter.asAdditional || !filter.column || filter.isRange)) {\n      label = window.LBL_ADDITIONAL_FILTER;\n    } else {\n      label = window.LBL_NO_COLUMN_FILTER;\n    }\n\n    return <Input aria-label={label} disabled />;\n  }\n  return <td {...domProps}>{findFilter()}</td>;\n};\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';\nimport uniqueId from 'lodash-es/uniqueId';\nimport React, { useState } from 'react';\nimport {\n  customEvents,\n  getLabel,\n  persistentStorage,\n  TApiaFilter,\n} from '@apia/util';\nimport { shallowEqual } from '@apia/store';\nimport { useOtherTagButton } from '@apia/components';\nimport { Icon } from '@apia/icons';\nimport { HeaderCell } from './HeaderCell';\nimport { useResponsiveTableContext } from './ResponsiveTableContext';\nimport { useResponsiveTable } from './store';\nimport { StateCell } from './StateCell';\nimport { FilterCell } from './FilterCell';\n\ndeclare global {\n  interface Window {\n    focusedRow: number;\n    focusedColumn: number;\n    hasNonAdditionalFilters: boolean;\n  }\n}\n\nconst NoMemoHeader = () => {\n  const { name } = useResponsiveTableContext();\n  const { columns, hasNonAdditionalFilters, focusedColumn, focusedRow } =\n    useResponsiveTable((global) => {\n      const tableState = global.responsiveTableSlice[name];\n      window.focusedRow = tableState?.focusedRow;\n      window.focusedColumn = tableState?.focusedColumn;\n      window.hasNonAdditionalFilters =\n        tableState?.hasNonAdditionalFilters || false;\n      return {\n        columns: tableState?.columns ?? [],\n        focusedColumn: tableState?.focusedColumn,\n        focusedRow: tableState?.focusedRow,\n        hasNonAdditionalFilters: tableState?.hasNonAdditionalFilters,\n      };\n    }, shallowEqual);\n\n  const filters = useResponsiveTable<\n    {\n      columnIndex: number;\n      definition: TApiaFilter;\n    }[]\n  >(\n    (global) => {\n      const tableState = global.responsiveTableSlice[name];\n      const returnObject = (tableState?.filters ?? [])\n        .map((current) => ({\n          columnIndex: tableState.columns.findIndex(\n            (search) => search.name === current.column,\n          ),\n          definition: current,\n        }))\n        .filter((current) => current.columnIndex >= 0);\n\n      return returnObject;\n    },\n    (a, b) => {\n      return (\n        a.length === b.length &&\n        a.reduce<boolean>((result, current, index) => {\n          return (\n            result && shallowEqual(current.definition, b[index].definition)\n          );\n        }, true)\n      );\n    },\n  );\n\n  const statesCount = useResponsiveTable((globalState) => {\n    const state = globalState.responsiveTableSlice[name];\n    return state?.statesColumns ?? 0;\n  }, shallowEqual);\n\n  const additionalColumns = React.useMemo(\n    () =>\n      columns.reduce(\n        (count, column) => count + (column.showAsAdditional ? 1 : 0),\n        0,\n      ),\n    [columns],\n  );\n\n  const statesIds = React.useMemo(() => {\n    return Array(statesCount)\n      .fill('')\n      .map(() => uniqueId());\n  }, [statesCount]);\n\n  const [isFiltersRowVisible, setIsFiltersRowVisible] = React.useState<boolean>(\n    /* (persistentStorage.showResponsiveTableFilters as boolean) ??  */ false,\n  );\n  React.useEffect(() => {\n    persistentStorage.showResponsiveTableFilters = isFiltersRowVisible;\n  }, [isFiltersRowVisible]);\n\n  const buttonProps = useOtherTagButton(\n    React.useMemo(\n      () => ({\n        className: 'additionalColumn',\n        onClick: () => setIsFiltersRowVisible((current) => !current),\n      }),\n      [],\n    ),\n  );\n\n  const [ref, setRef] = useState<HTMLTableRowElement | null>(null);\n\n  useUpdateEffect(() => {\n    const handleFocus = (ev: Event) => {\n      ev.stopPropagation();\n      setIsFiltersRowVisible(true);\n    };\n    ref?.addEventListener(customEvents.focus, handleFocus);\n    return () => {\n      ref?.removeEventListener(customEvents.focus, handleFocus);\n    };\n  }, [ref]);\n\n  return (\n    <thead>\n      <tr data-focusindex={1}>\n        {(additionalColumns > 0 || hasNonAdditionalFilters) && (\n          <th\n            aria-colindex={1}\n            aria-rowindex={1}\n            data-focused={\n              focusedColumn === 1 &&\n              focusedRow === -1 - (hasNonAdditionalFilters ? 1 : 0)\n            }\n            {...buttonProps}\n            tabIndex={\n              focusedColumn === 1 &&\n              focusedRow === -1 - (hasNonAdditionalFilters ? 1 : 0)\n                ? 0\n                : -1\n            }\n            aria-label={\n              isFiltersRowVisible\n                ? getLabel('lblHideFilters').text\n                : getLabel('lblShowFilters').text\n            }\n            role=\"rowheader\"\n          >\n            {hasNonAdditionalFilters ? (\n              <Icon\n                className=\"filterButton\"\n                name=\"Filter\"\n                title={\n                  isFiltersRowVisible\n                    ? getLabel('lblHideFilters').text\n                    : getLabel('lblShowFilters').text\n                }\n                aria-label={\n                  isFiltersRowVisible\n                    ? getLabel('lblHideFilters').text\n                    : getLabel('lblShowFilters').text\n                }\n              />\n            ) : (\n              <>\n                <span style={{ display: 'none' }}>\n                  {isFiltersRowVisible\n                    ? getLabel('lblHideFilters').text\n                    : getLabel('lblShowFilters').text}\n                </span>\n                <span>&nbsp;</span>\n              </>\n            )}\n          </th>\n        )}\n        {statesIds.map((id, i) => (\n          <StateCell isHeader key={id} index={i} rowIndex={1} />\n        ))}\n        {columns\n          .map((current, actualColumnIndex) => ({\n            ...current,\n            actualTableColumnIndex: actualColumnIndex,\n          }))\n          .filter((current) => !current.showAsAdditional)\n          .map((current, columnIndex) => {\n            if (current.hidden) return null;\n\n            return (\n              <HeaderCell\n                apiaColumnIndex={current.actualTableColumnIndex}\n                columnIndex={current.actualTableColumnIndex}\n                inTableColumnIndex={columnIndex}\n                key={current.name}\n              />\n            );\n          })}\n      </tr>\n      {filters.length > 0 && (\n        <tr\n          ref={setRef}\n          data-focusindex={2}\n          className={`responsiveTable__filters__row ${\n            isFiltersRowVisible ? '' : 'hidden'\n          }`}\n        >\n          {(additionalColumns > 0 || hasNonAdditionalFilters) && (\n            <td\n              className=\"noFilter\"\n              aria-colindex={1}\n              aria-rowindex={2}\n              tabIndex={focusedColumn === 1 && focusedRow === -1 ? 0 : -1}\n              data-focused={focusedColumn === 1 && focusedRow === -1}\n            >\n              &nbsp;\n            </td>\n          )}\n          {statesIds.map((id, i) => (\n            <StateCell isHeader key={id} index={i} rowIndex={2} />\n          ))}\n          {columns\n            .filter((current) => !current.showAsAdditional)\n            .map((current, columnIndex) => {\n              const filter = filters.find(\n                (search) => search.definition.column === current.name,\n              );\n\n              return current.showAsAdditional ? null : (\n                <FilterCell\n                  key={current.name}\n                  columnIndex={columnIndex}\n                  filter={filter?.definition}\n                />\n              );\n            })}\n        </tr>\n      )}\n    </thead>\n  );\n};\n\nexport const Header = React.memo(NoMemoHeader);\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 */\nimport { FaSortUp, FaSortDown, FaSort } from '@meronex/icons/fa';\nimport React, { CSSProperties } from 'react';\nimport { shallowEqual } from 'react-redux';\nimport { Box } from '@apia/theme';\nimport {\n  EventEmitter,\n  TMap,\n  debugDispatcher,\n  getSpecificParent,\n  isChild,\n  persistentStorage,\n} from '@apia/util';\nimport { AutoEllipsis, useOtherTagButton } from '@apia/components';\nimport { domPropsSelector } from './ResponsiveTable';\nimport { useResponsiveTableContext } from './ResponsiveTableContext';\nimport { TResponsiveTableSortValue } from './types';\nimport { useResponsiveTable } from './store';\nimport { useDomProps } from './store/selection/useDomProps';\n\ninterface IHeaderCell {\n  /**\n   * Para ordenar en Apia se usa un índice de columna, que se\n   * corresponde con su posición en base 0, sin tomar en cuenta\n   * las columnas adicionales.\n   */\n  apiaColumnIndex: number;\n  columnIndex: number;\n  inTableColumnIndex: number;\n}\n\nconst widthStorageName = 'tablesWidths';\n\n/**\n * Calcula el ancho de la columna dependiendo del valor establecido,\n * si el valor es numérico o un string que contiene un número sin\n * unidad, devuelve el doble de ese número para establecer una\n * relatividad con los tamaños de las columnas actuales en Apia.\n *\n * Es decir, como todo en Apia era más chico, los tamaños que se\n * establecían antes no quedan visualmente agradables con los\n * tamaños actuales, por eso se magnifican multiplicando por 2.\n */\nfunction getColumnWidth(width?: string | number) {\n  if (typeof width === 'string') {\n    if (width.match(/(%|px|vw|vh|vmin|vmax|cm|mm|in|pt|pc)/)) return width;\n    if (width === '') return 'auto';\n    const numberValue = Number.parseInt(width, 10);\n    if (isNaN(numberValue)) return 'auto';\n    return numberValue;\n  }\n  if (typeof width === 'number') return width;\n  return width;\n}\ndebugDispatcher.on(\n  'cleanTableSizes',\n  ([tableName]) => {\n    const currentWidths = persistentStorage[widthStorageName] as TMap<unknown>;\n    delete currentWidths[tableName as string];\n    persistentStorage[widthStorageName] = currentWidths;\n  },\n  'Se usa para borrar el estado de una tabla. Uso: dd.cleanTableSizes(\"TableName\")',\n);\nfunction makeColumnName(tableName: string, columnName: string): string {\n  return `${tableName}${columnName}`;\n}\n\nconst thWidthEmitter = new (class ThWidthEmitter extends EventEmitter<{\n  resize: { name: string; width: number };\n}> {})();\n\nconst NoMemoHeaderCell = ({\n  apiaColumnIndex,\n  columnIndex,\n  inTableColumnIndex,\n}: IHeaderCell) => {\n  const { name, onSortChange } = useResponsiveTableContext();\n  const uniqueId =\n    (window.location.href.match(/busEntId=(\\d+)/)?.[1] as string) ??\n    (window.location.href.match(/query=(\\d+)/)?.[1] as string) ??\n    '';\n  const isGlobal = window.isGlobal ? 'isGlobal' : 'notGlobal';\n  const actualName = name + uniqueId + String(isGlobal);\n  const column = useResponsiveTable((global) => {\n    const tableState = global.responsiveTableSlice[name];\n    return tableState?.columns[columnIndex];\n  }, shallowEqual);\n  const storedWidth = (\n    (persistentStorage[widthStorageName] as TMap<unknown>)?.[\n      actualName\n    ] as TMap<unknown>\n  )?.[column.name] as number;\n\n  const [width, setWidth] = React.useState(storedWidth ?? 200);\n  const [isResize, setIsResize] = React.useState(storedWidth !== undefined);\n\n  React.useEffect(() => {\n    return void thWidthEmitter.on('resize', (ev) => {\n      if (ev.name === makeColumnName(actualName, column.name)) {\n        setIsResize(true);\n        setWidth(ev.width);\n      }\n    });\n  }, [column.name, actualName]);\n\n  const isFilterRequired = useResponsiveTable((global) => {\n    const tableState = global.responsiveTableSlice[name];\n    const columnFilter = tableState?.filters.find(\n      (current) => current.column === column.title,\n    );\n    return columnFilter?.required;\n  }, shallowEqual);\n\n  const isSortingAllowed = useResponsiveTable((global) => {\n    const tableState = global.responsiveTableSlice[name];\n    return tableState?.allowSorting;\n  });\n\n  const domProps = useDomProps(\n    'th',\n    {\n      columnIndex: inTableColumnIndex,\n    },\n    domPropsSelector(name),\n  );\n\n  const sx: CSSProperties = React.useMemo(\n    () =>\n      !isResize\n        ? {\n            minWidth: getColumnWidth(column.minWidth ?? column.width),\n            maxWidth:\n              column.maxWidth !== undefined\n                ? getColumnWidth(column.maxWidth)\n                : undefined,\n            width: getColumnWidth(column.width),\n            position: 'relative',\n          }\n        : {\n            width: `${width}px`,\n            minWidth: `${width}px`,\n            position: 'relative',\n          },\n    [column.maxWidth, column.minWidth, column.width, isResize, width],\n  );\n\n  const buttonProps = useOtherTagButton(\n    React.useMemo(\n      () => ({\n        className: 'headButton',\n        onClick: (ev) => {\n          if (\n            isChild(ev.target as HTMLElement, (current) =>\n              current.classList.contains('headButton__resizer'),\n            )\n          )\n            return;\n\n          console.warn('Buttons slice is not defined');\n          /* if (\n            responsiveTableStore\n              .getState()\n              .buttonsSlice.performingActions.includes('disableTable')\n          )\n            return; */\n          if (\n            onSortChange &&\n            column.allowSorting !== false &&\n            isSortingAllowed !== false\n          )\n            onSortChange({\n              column,\n              columnIndex: apiaColumnIndex,\n              name: column.name,\n              sortValue: ['Asc', 'Desc'][\n                column.currentSorting !== 'A' ? 0 : 1\n              ] as TResponsiveTableSortValue,\n            });\n        },\n      }),\n      [apiaColumnIndex, column, isSortingAllowed, onSortChange],\n    ),\n  );\n  return (\n    <Box\n      as=\"th\"\n      style={sx}\n      data-columnname={column.name}\n      title={column.title ?? column.label ?? column.name}\n      {...buttonProps}\n      {...domProps}\n      role=\"rowheader\"\n      className={`${\n        isFilterRequired && window.SHOW_REQUIRED_POSITION\n          ? 'requiredFilterColumn'\n          : ''\n      }`}\n    >\n      <Box as=\"span\" className=\"headButton__container\">\n        <Box\n          as=\"span\"\n          className={`${\n            isFilterRequired ? 'requiredFilter__Column' : ''\n          } headButton__label`}\n        >\n          <AutoEllipsis\n            overrideStyles={(el) => {\n              const th = el.closest('th') as HTMLElement;\n              return {\n                width: `${Math.max(\n                  100,\n                  Number.parseInt(window.getComputedStyle(th).width),\n                )}px`,\n              };\n            }}\n          >\n            {column.label}\n          </AutoEllipsis>\n        </Box>\n        <Box as=\"span\" className=\"headButton__sortIcon\">\n          {column.allowSorting !== false && column.currentSorting === 'A' && (\n            <FaSortUp />\n          )}\n          {column.allowSorting !== false && column.currentSorting === 'D' && (\n            <FaSortDown />\n          )}\n          {column.allowSorting !== false && !column.currentSorting && (\n            <FaSort />\n          )}\n        </Box>\n        <Box\n          // sx={{ display: 'none' }}\n          className=\"headButton__resizer\"\n          onMouseDown={(ev) => {\n            if (!isResize) {\n              const trElement = getSpecificParent(\n                ev.target as HTMLElement,\n                (current) => current.tagName === 'TR',\n              );\n\n              trElement?.querySelectorAll('th').forEach((current) => {\n                thWidthEmitter.emit('resize', {\n                  name: makeColumnName(\n                    actualName,\n                    current.dataset.columnname as string,\n                  ),\n                  width: (current as HTMLElement).clientWidth,\n                });\n              });\n\n              setIsResize(true);\n            }\n\n            const th = getSpecificParent(\n              ev.target as HTMLElement,\n              (current) => current.tagName === 'TH',\n            );\n            if (!th) throw new Error('There is no th');\n\n            const initialX = ev.clientX;\n            const initialWidth = th.clientWidth;\n\n            const resize = (mousemoveEv: MouseEvent) => {\n              const dif = mousemoveEv.clientX - initialX;\n\n              setWidth(initialWidth + dif);\n            };\n            const unsuscribe = () => {\n              const trElement = getSpecificParent(\n                ev.target as HTMLElement,\n                (current) => current.tagName === 'TR',\n              );\n              trElement?.querySelectorAll('th').forEach((current) => {\n                persistentStorage[widthStorageName] = {\n                  ...(persistentStorage[widthStorageName] as TMap<unknown>),\n                  [actualName]: {\n                    ...((\n                      persistentStorage[widthStorageName] as TMap<unknown>\n                    )?.[actualName] as TMap<unknown>),\n                    [current.dataset.columnname as string]: (\n                      current as HTMLElement\n                    ).clientWidth,\n                  },\n                };\n              });\n              document.removeEventListener('mousemove', resize);\n              document.removeEventListener('mouseup', unsuscribe);\n            };\n\n            document.addEventListener('mousemove', resize);\n            document.addEventListener('mouseup', unsuscribe);\n\n            return false;\n          }}\n        />\n      </Box>\n    </Box>\n  );\n};\n\nexport const HeaderCell = React.memo(NoMemoHeaderCell);\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';\nimport { BoxProps } from '@apia/theme';\nimport { useResponsiveTableContext } from './ResponsiveTableContext';\nimport { makeKeyHandler } from './store/selection/makeKeyHandler';\nimport { responsiveTableActions } from './store';\n\nexport interface IKeyHandler {\n  children: React.ReactNode;\n}\n\nconst NoMemoKeyHandler = (props: BoxProps) => {\n  const { name, onChangeSelection, onSelectRows } = useResponsiveTableContext();\n\n  const Handler = React.useMemo(\n    () =>\n      makeKeyHandler(responsiveTableActions, name, {\n        throttleOptions: { wait: 50 },\n        stateSelector: (global) => global.responsiveTableSlice[name],\n      }),\n    [name],\n  );\n\n  return (\n    <Handler\n      onChangeSelection={onChangeSelection}\n      onSelectRows={onSelectRows}\n      {...props}\n    />\n  );\n};\n\nexport const KeyHandler = React.memo(NoMemoKeyHandler);\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":""}