schummar-table 1.0.0-beta.9 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +68 -67
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +68 -67
  4. package/dist/index.js.map +1 -1
  5. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -1603,6 +1603,70 @@ function FilterPopover({ anchor, onClose, column, children }) {
1603
1603
  });
1604
1604
  }
1605
1605
  //#endregion
1606
+ //#region src/components/hiddenColumnFilters.tsx
1607
+ /** Lets users edit the filters of columns that are not visible, see `enableHiddenColumnFilters`. */
1608
+ function HiddenColumnFilters() {
1609
+ const { props, visibleColumns, filterValues, actions } = useTableStructure();
1610
+ const IconButton = require_useTheme.useTheme((t) => t.components.IconButton);
1611
+ const Button = require_useTheme.useTheme((t) => t.components.Button);
1612
+ const FilterList = require_useTheme.useTheme((t) => t.icons.FilterList);
1613
+ const title = require_useTheme.useTheme((t) => t.text.hiddenColumnFilters);
1614
+ const [anchor, setAnchor] = (0, react.useState)(null);
1615
+ const [selected, setSelected] = (0, react.useState)();
1616
+ const columns = props.columns.filter((column) => column.filter && !visibleColumns.some((visible) => visible.id === column.id));
1617
+ if (columns.length === 0) return null;
1618
+ const isActive = (columnId) => isActiveFilter(columns.find((column) => column.id === columnId)?.filter, filterValues.get(columnId));
1619
+ const anyActive = columns.some((column) => isActive(column.id));
1620
+ const selectedColumn = columns.find((column) => column.id === selected);
1621
+ function close() {
1622
+ setAnchor(null);
1623
+ setSelected(void 0);
1624
+ }
1625
+ const color = (active) => active ? "var(--primaryMain)" : "#b0bac9";
1626
+ return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(IconButton, {
1627
+ onClick: (event) => setAnchor(event.currentTarget),
1628
+ css: { color: color(anyActive) },
1629
+ children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(FilterList, {})
1630
+ }), anchor && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(FilterPopover, {
1631
+ anchor,
1632
+ onClose: close,
1633
+ column: selectedColumn,
1634
+ children: selectedColumn ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
1635
+ css: { display: "grid" },
1636
+ children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(Button, {
1637
+ onClick: () => setSelected(void 0),
1638
+ css: {
1639
+ justifyContent: "flex-start",
1640
+ color: "inherit"
1641
+ },
1642
+ children: ["‹ ", selectedColumn.header]
1643
+ }), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(FilterPanel, {
1644
+ column: selectedColumn,
1645
+ close
1646
+ }, selectedColumn.id)]
1647
+ }) : /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
1648
+ css: {
1649
+ padding: "calc(var(--spacing) * 2)",
1650
+ display: "grid",
1651
+ gap: "var(--spacing)"
1652
+ },
1653
+ children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", { children: title }), columns.map((column) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Button, {
1654
+ onClick: () => setSelected(column.id),
1655
+ onContextMenu: (event) => {
1656
+ actions.setFilterValue(column.id, void 0);
1657
+ event.preventDefault();
1658
+ },
1659
+ startIcon: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(FilterList, { css: { color: color(isActive(column.id)) } }),
1660
+ css: {
1661
+ justifyContent: "flex-start",
1662
+ color: isActive(column.id) ? "var(--primaryMain)" : "inherit"
1663
+ },
1664
+ children: column.header
1665
+ }, column.id))]
1666
+ })
1667
+ })] });
1668
+ }
1669
+ //#endregion
1606
1670
  //#region src/components/sortComponent.tsx
1607
1671
  function SortComponent({ children }) {
1608
1672
  const { sort, activeColumns, props, actions } = useTableStructure();
@@ -1662,7 +1726,7 @@ function SortComponent({ children }) {
1662
1726
  //#region src/components/columnHeader.tsx
1663
1727
  function ColumnHeader() {
1664
1728
  const columnId = useColumnContext();
1665
- const { activeColumns } = useTableStructure();
1729
+ const { props, activeColumns, visibleColumns } = useTableStructure();
1666
1730
  const column = activeColumns.find((column) => column.id === columnId);
1667
1731
  const { classes, styles } = require_useTheme.useTheme((theme) => require_useTheme.columnTheme(theme, column));
1668
1732
  return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
@@ -1680,6 +1744,7 @@ function ColumnHeader() {
1680
1744
  /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(SortComponent, { children: column?.header }),
1681
1745
  /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", { css: { flex: 1 } }),
1682
1746
  /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(FilterControl, {}),
1747
+ props.enableHiddenColumnFilters && visibleColumns[visibleColumns.length - 1]?.id === columnId && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(HiddenColumnFilters, {}),
1683
1748
  /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ResizeHandle, {})
1684
1749
  ]
1685
1750
  });
@@ -1854,70 +1919,6 @@ function Export() {
1854
1919
  })] });
1855
1920
  }
1856
1921
  //#endregion
1857
- //#region src/components/hiddenColumnFilters.tsx
1858
- /** Lets users edit the filters of columns that are not visible, see `enableHiddenColumnFilters`. */
1859
- function HiddenColumnFilters() {
1860
- const { props, visibleColumns, filterValues, actions } = useTableStructure();
1861
- const IconButton = require_useTheme.useTheme((t) => t.components.IconButton);
1862
- const Button = require_useTheme.useTheme((t) => t.components.Button);
1863
- const FilterList = require_useTheme.useTheme((t) => t.icons.FilterList);
1864
- const title = require_useTheme.useTheme((t) => t.text.hiddenColumnFilters);
1865
- const [anchor, setAnchor] = (0, react.useState)(null);
1866
- const [selected, setSelected] = (0, react.useState)();
1867
- const columns = props.columns.filter((column) => column.filter && !visibleColumns.some((visible) => visible.id === column.id));
1868
- if (columns.length === 0) return null;
1869
- const isActive = (columnId) => isActiveFilter(columns.find((column) => column.id === columnId)?.filter, filterValues.get(columnId));
1870
- const anyActive = columns.some((column) => isActive(column.id));
1871
- const selectedColumn = columns.find((column) => column.id === selected);
1872
- function close() {
1873
- setAnchor(null);
1874
- setSelected(void 0);
1875
- }
1876
- const color = (active) => active ? "var(--primaryMain)" : "#b0bac9";
1877
- return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(IconButton, {
1878
- onClick: (event) => setAnchor(event.currentTarget),
1879
- css: { color: color(anyActive) },
1880
- children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(FilterList, {})
1881
- }), anchor && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(FilterPopover, {
1882
- anchor,
1883
- onClose: close,
1884
- column: selectedColumn,
1885
- children: selectedColumn ? /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
1886
- css: { display: "grid" },
1887
- children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(Button, {
1888
- onClick: () => setSelected(void 0),
1889
- css: {
1890
- justifyContent: "flex-start",
1891
- color: "inherit"
1892
- },
1893
- children: ["‹ ", selectedColumn.header]
1894
- }), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(FilterPanel, {
1895
- column: selectedColumn,
1896
- close
1897
- }, selectedColumn.id)]
1898
- }) : /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)("div", {
1899
- css: {
1900
- padding: "calc(var(--spacing) * 2)",
1901
- display: "grid",
1902
- gap: "var(--spacing)"
1903
- },
1904
- children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", { children: title }), columns.map((column) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Button, {
1905
- onClick: () => setSelected(column.id),
1906
- onContextMenu: (event) => {
1907
- actions.setFilterValue(column.id, void 0);
1908
- event.preventDefault();
1909
- },
1910
- startIcon: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(FilterList, { css: { color: color(isActive(column.id)) } }),
1911
- css: {
1912
- justifyContent: "flex-start",
1913
- color: isActive(column.id) ? "var(--primaryMain)" : "inherit"
1914
- },
1915
- children: column.header
1916
- }, column.id))]
1917
- })
1918
- })] });
1919
- }
1920
- //#endregion
1921
1922
  //#region src/components/tableHeader.tsx
1922
1923
  const TableHeader = (0, react.memo)(function TableHeader() {
1923
1924
  const { props, visibleColumns } = useTableStructure();
@@ -1947,8 +1948,8 @@ const TableHeader = (0, react.memo)(function TableHeader() {
1947
1948
  enableSelection && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(SelectAll, {}),
1948
1949
  enableColumnSelection && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ColumnSelection, {}),
1949
1950
  enableExport && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Export, {}),
1950
- enableHiddenColumnFilters && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(HiddenColumnFilters, {}),
1951
- (enableSelection || enableColumnSelection || enableExport || enableHiddenColumnFilters) && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", { css: { flex: 1 } }), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ResizeHandleView, {})] })
1951
+ enableHiddenColumnFilters && visibleColumns.length === 0 && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(HiddenColumnFilters, {}),
1952
+ (enableSelection || enableColumnSelection || enableExport || enableHiddenColumnFilters && visibleColumns.length === 0) && /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", { css: { flex: 1 } }), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ResizeHandleView, {})] })
1952
1953
  ]
1953
1954
  }),
1954
1955
  visibleColumns.map((column) => /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(ColumnContext.Provider, {