@popmenu/table 0.126.0 → 0.126.1

package/build/esm/_virtual/_commonjsHelpers.js

@@ -0,0 +1,4 @@
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+export { commonjsGlobal };
+//# sourceMappingURL=_commonjsHelpers.js.map

package/build/esm/_virtual/_commonjsHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_commonjsHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/build/{components → esm/components}/ColumnFilterChip/ColumnFilterChip.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
-import { ColumnFilter } from '@tanstack/react-table';
-interface ColumnFilterChipProps {
-    columnFilter: ColumnFilter;
-    label: [string, string];
-    onClick: (columnFilter: ColumnFilter) => void;
-}
-export declare const ColumnFilterChip: (props: ColumnFilterChipProps) => JSX.Element;
-export {};
+/// <reference types="react" />
+import { ColumnFilter } from '@tanstack/react-table';
+interface ColumnFilterChipProps {
+    columnFilter: ColumnFilter;
+    label: [string, string];
+    onClick: (columnFilter: ColumnFilter) => void;
+}
+export declare const ColumnFilterChip: (props: ColumnFilterChipProps) => JSX.Element;
+export {};

package/build/esm/components/ColumnFilterChip/ColumnFilterChip.js

@@ -0,0 +1,17 @@
+import { __assign } from 'tslib';
+import React from 'react';
+import { useStyles } from './ColumnFilterChipStyles.js';
+import { Chip, Box, Typography } from '@popmenu/common-ui';
+
+var ColumnFilterChip = function (props) {
+    var columnFilter = props.columnFilter, onClick = props.onClick, label = props.label;
+    var classes = useStyles();
+    return (React.createElement(Chip, { className: classes.chip, onDelete: function () { return onClick(columnFilter); }, label: React.createElement(Box, { display: "flex", gridGap: 4, flexWrap: "wrap" },
+            React.createElement(Typography, null,
+                label[0],
+                ":"),
+            React.createElement(Typography, __assign({ className: classes.label, weight: "semi-bold" }, { component: 'span' }), label[1])) }));
+};
+
+export { ColumnFilterChip };
+//# sourceMappingURL=ColumnFilterChip.js.map

package/build/esm/components/ColumnFilterChip/ColumnFilterChip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnFilterChip.js","sources":["../../../../src/components/ColumnFilterChip/ColumnFilterChip.tsx"],"sourcesContent":["import React from 'react'\nimport { ColumnFilter } from '@tanstack/react-table'\nimport { useStyles } from './ColumnFilterChipStyles'\nimport { Box, Chip, Typography } from '@popmenu/common-ui'\n\ninterface ColumnFilterChipProps {\n  columnFilter: ColumnFilter\n  label: [string, string]\n  onClick: (columnFilter: ColumnFilter) => void\n}\n\nexport const ColumnFilterChip = (props: ColumnFilterChipProps) => {\n  const { columnFilter, onClick, label } = props\n  const classes = useStyles()\n  return (\n    <Chip\n      className={classes.chip}\n      onDelete={() => onClick(columnFilter)}\n      label={\n        <Box display=\"flex\" gridGap={4} flexWrap=\"wrap\">\n          <Typography>{label[0]}:</Typography>\n          <Typography className={classes.label} weight=\"semi-bold\" {...{ component: 'span' }}>\n            {label[1]}\n          </Typography>\n        </Box>\n      }\n    />\n  )\n}\n"],"names":[],"mappings":";;;;;AAWO,IAAM,gBAAgB,GAAG,UAAC,KAA4B,EAAA;AACnD,IAAA,IAAA,YAAY,GAAqB,KAAK,CAAA,YAA1B,EAAE,OAAO,GAAY,KAAK,CAAA,OAAjB,EAAE,KAAK,GAAK,KAAK,MAAV;AACpC,IAAA,IAAM,OAAO,GAAG,SAAS,EAAE;AAC3B,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,IAAI,EACH,EAAA,SAAS,EAAE,OAAO,CAAC,IAAI,EACvB,QAAQ,EAAE,YAAA,EAAM,OAAA,OAAO,CAAC,YAAY,CAAC,CAArB,EAAqB,EACrC,KAAK,EACH,KAAC,CAAA,aAAA,CAAA,GAAG,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAC,MAAM,EAAA;AAC7C,YAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,IAAA;gBAAE,KAAK,CAAC,CAAC,CAAC;AAAe,gBAAA,GAAA,CAAA;YACpC,KAAC,CAAA,aAAA,CAAA,UAAU,EAAC,QAAA,CAAA,EAAA,SAAS,EAAE,OAAO,CAAC,KAAK,EAAE,MAAM,EAAC,WAAW,EAAK,EAAA,EAAE,SAAS,EAAE,MAAM,EAAE,CAAA,EAC/E,KAAK,CAAC,CAAC,CAAC,CACE,CACT,EAER,CAAA;AAEN;;;;"}

package/build/esm/components/ColumnFilterChip/ColumnFilterChipStyles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"label" | "chip">;

package/build/esm/components/ColumnFilterChip/ColumnFilterChipStyles.js

@@ -0,0 +1,14 @@
+import { makeStyles } from '@material-ui/core';
+
+var useStyles = makeStyles({
+    chip: {
+        overflow: 'visible',
+        height: 'auto',
+    },
+    label: {
+        whiteSpace: 'normal',
+    },
+});
+
+export { useStyles };
+//# sourceMappingURL=ColumnFilterChipStyles.js.map

package/build/esm/components/ColumnFilterChip/ColumnFilterChipStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnFilterChipStyles.js","sources":["../../../../src/components/ColumnFilterChip/ColumnFilterChipStyles.ts"],"sourcesContent":["import { makeStyles } from '@material-ui/core'\n\nexport const useStyles = makeStyles({\n  chip: {\n    overflow: 'visible',\n    height: 'auto',\n  },\n  label: {\n    whiteSpace: 'normal',\n  },\n})\n"],"names":[],"mappings":";;AAEO,IAAM,SAAS,GAAG,UAAU,CAAC;AAClC,IAAA,IAAI,EAAE;AACJ,QAAA,QAAQ,EAAE,SAAS;AACnB,QAAA,MAAM,EAAE,MAAM;AACf,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,UAAU,EAAE,QAAQ;AACrB,KAAA;AACF,CAAA;;;;"}

package/build/{components → esm/components}/ColumnFilterChip/index.d.ts

@@ -1 +1 @@
-export { ColumnFilterChip } from './ColumnFilterChip';
+export { ColumnFilterChip } from './ColumnFilterChip';

package/build/{components → esm/components}/ColumnFilterResetButton/ColumnFilterResetButton.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { ButtonProps } from '@popmenu/admin-ui';
-export declare const ColumnFilterResetButton: (props: ButtonProps) => JSX.Element;
+/// <reference types="react" />
+import { ButtonProps } from '@popmenu/admin-ui';
+export declare const ColumnFilterResetButton: (props: ButtonProps) => JSX.Element;

package/build/esm/components/ColumnFilterResetButton/ColumnFilterResetButton.js

@@ -0,0 +1,11 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { Button } from '@popmenu/admin-ui';
+
+var ColumnFilterResetButton = function (props) {
+    var _a = props.children, children = _a === void 0 ? 'Clear All' : _a, restProps = __rest(props, ["children"]);
+    return (React.createElement(Button, __assign({ variant: "text", textTransform: "none" }, restProps), children));
+};
+
+export { ColumnFilterResetButton };
+//# sourceMappingURL=ColumnFilterResetButton.js.map

package/build/esm/components/ColumnFilterResetButton/ColumnFilterResetButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnFilterResetButton.js","sources":["../../../../src/components/ColumnFilterResetButton/ColumnFilterResetButton.tsx"],"sourcesContent":["import React from 'react'\nimport { Button, ButtonProps } from '@popmenu/admin-ui'\n\nexport const ColumnFilterResetButton = (props: ButtonProps) => {\n  const { children = 'Clear All', ...restProps } = props\n  return (\n    <Button variant=\"text\" textTransform=\"none\" {...restProps}>\n      {children}\n    </Button>\n  )\n}\n"],"names":[],"mappings":";;;;AAGO,IAAM,uBAAuB,GAAG,UAAC,KAAkB,EAAA;AAChD,IAAA,IAAA,EAAyC,GAAA,KAAK,CAAxB,QAAA,EAAtB,QAAQ,GAAG,EAAA,KAAA,MAAA,GAAA,WAAW,GAAA,EAAA,EAAK,SAAS,GAAK,MAAA,CAAA,KAAK,EAAhD,CAAA,UAAA,CAAwC,CAAF;AAC5C,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,MAAM,EAAC,QAAA,CAAA,EAAA,OAAO,EAAC,MAAM,EAAC,aAAa,EAAC,MAAM,EAAK,EAAA,SAAS,GACtD,QAAQ,CACF;AAEb;;;;"}

package/build/{components → esm/components}/ColumnFilterResetButton/index.d.ts

@@ -1 +1 @@
-export { ColumnFilterResetButton } from './ColumnFilterResetButton';
+export { ColumnFilterResetButton } from './ColumnFilterResetButton';

package/build/{components → esm/components}/FilterPanel/FilterControl/FilterControl.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-import { ColumnFilter } from '../FilterPanelProps';
-export declare const FilterControl: (props: ColumnFilter) => JSX.Element;
+/// <reference types="react" />
+import { ColumnFilter } from '../FilterPanelProps';
+export declare const FilterControl: (props: ColumnFilter) => JSX.Element;

package/build/esm/components/FilterPanel/FilterControl/FilterControl.js

@@ -0,0 +1,24 @@
+import { __rest, __assign } from 'tslib';
+import React, { createElement } from 'react';
+import { TextField } from '@material-ui/core';
+import { SelectFilter } from './SelectFilter/SelectFilter.js';
+import { ToggleFilter } from './ToggleFilter/ToggleFilter.js';
+
+var FilterControl = function (props) {
+    var input = props.input, columnFilter = __rest(props, ["input"]);
+    var inputDictionary = {
+        text: TextField,
+        select: SelectFilter,
+        'multi-select': SelectFilter,
+        toggle: ToggleFilter,
+    };
+    var propsDictionary = {
+        select: { multiple: false },
+        'multi-select': { multiple: true },
+    };
+    // @ts-expect-error - todo.
+    return React.createElement("div", null, createElement(inputDictionary[input], __assign(__assign({}, columnFilter), propsDictionary[input])));
+};
+
+export { FilterControl };
+//# sourceMappingURL=FilterControl.js.map

package/build/esm/components/FilterPanel/FilterControl/FilterControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterControl.js","sources":["../../../../../src/components/FilterPanel/FilterControl/FilterControl.tsx"],"sourcesContent":["import React, { createElement } from 'react'\n\nimport { TextField } from '@material-ui/core'\nimport { ColumnFilter } from '../FilterPanelProps'\nimport { SelectFilter } from './SelectFilter'\nimport { ToggleFilter } from './ToggleFilter'\n\nexport const FilterControl = (props: ColumnFilter) => {\n  const { input, ...columnFilter } = props\n  const inputDictionary = {\n    text: TextField,\n    select: SelectFilter,\n    'multi-select': SelectFilter,\n    toggle: ToggleFilter,\n  }\n  const propsDictionary = {\n    select: { multiple: false },\n    'multi-select': { multiple: true },\n  }\n  // @ts-expect-error - todo.\n  return <div>{createElement(inputDictionary[input], { ...columnFilter, ...propsDictionary[input] })}</div>\n}\n"],"names":[],"mappings":";;;;;;AAOO,IAAM,aAAa,GAAG,UAAC,KAAmB,EAAA;IACvC,IAAA,KAAK,GAAsB,KAAK,CAA3B,KAAA,EAAK,YAAY,GAAA,MAAA,CAAK,KAAK,EAAlC,CAA0B,OAAA,CAAA,CAAF;AAC9B,IAAA,IAAM,eAAe,GAAG;AACtB,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,MAAM,EAAE,YAAY;AACpB,QAAA,cAAc,EAAE,YAAY;AAC5B,QAAA,MAAM,EAAE,YAAY;KACrB;AACD,IAAA,IAAM,eAAe,GAAG;AACtB,QAAA,MAAM,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE;AAC3B,QAAA,cAAc,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KACnC;;AAED,IAAA,OAAO,iCAAM,aAAa,CAAC,eAAe,CAAC,KAAK,CAAC,EAAA,QAAA,CAAA,QAAA,CAAA,EAAA,EAAO,YAAY,CAAA,EAAK,eAAe,CAAC,KAAK,CAAC,CAAA,CAAG,CAAO;AAC3G;;;;"}

package/build/{components → esm/components}/FilterPanel/FilterControl/SelectFilter/SelectFilter.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-import { ColumnFilter } from '../../FilterPanelProps';
-export declare const SelectFilter: (props: Pick<ColumnFilter, "options" | "columnId"> & {
-    multiple: boolean;
-}) => JSX.Element;
+/// <reference types="react" />
+import { ColumnFilter } from '../../FilterPanelProps';
+export declare const SelectFilter: (props: Pick<ColumnFilter, "options" | "columnId"> & {
+    multiple: boolean;
+}) => JSX.Element;

package/build/esm/components/FilterPanel/FilterControl/SelectFilter/SelectFilter.js

@@ -0,0 +1,97 @@
+import { __assign } from 'tslib';
+import React, { useContext, useState } from 'react';
+import { Box, FormControl, InputLabel, Select } from '@material-ui/core';
+import { ChevronDown } from '@popmenu/web-icons';
+import { Typography, MenuItem } from '@popmenu/common-ui';
+import { useStyles } from './SelectFilterStyles.js';
+import { TableContext } from '../../../TableContext/index.js';
+import { useFilterPanelContext } from '../../FilterPanelContext/FilterPanelContext.js';
+
+var SelectFilter = function (props) {
+    var _a, _b, _c;
+    var options = props.options, columnId = props.columnId, multiple = props.multiple;
+    var classes = useStyles();
+    var _d = useContext(TableContext), table = _d.table, stagedColumnFilters = _d.stagedColumnFilters, stageFilterSelections = _d.stageFilterSelections;
+    var _e = useState(false), open = _e[0], setOpen = _e[1];
+    var _f = useFilterPanelContext().anchorState, setAnchorEl = _f[1];
+    var column = table.getColumn(columnId);
+    var meta = column.columnDef.meta;
+    var filterName = (_a = meta === null || meta === void 0 ? void 0 : meta.filter) === null || _a === void 0 ? void 0 : _a.name;
+    var value = '';
+    if (stageFilterSelections && !!stagedColumnFilters.get(columnId)) {
+        value = stagedColumnFilters.get(columnId);
+    }
+    else {
+        value = column.getFilterValue();
+    }
+    var fallbackValue = multiple ? [] : '';
+    var filteredOptions = options.map(function (option) {
+        if (Array.isArray(value)) {
+            if (value.includes(option.value)) {
+                return __assign(__assign({}, option), { hide: !stageFilterSelections });
+            }
+        }
+        if (typeof value === 'string' || typeof value === 'number') {
+            if (value === option.value) {
+                return __assign(__assign({}, option), { hide: !stageFilterSelections });
+            }
+        }
+        return __assign(__assign({}, option), { hide: false });
+    });
+    var filteredOptionsCount = filteredOptions.filter(function (option) { return !(option === null || option === void 0 ? void 0 : option.hide); }).length;
+    var renderedValue = '';
+    if (!stageFilterSelections && value && filteredOptions && filteredOptionsCount > 0) {
+        if (typeof value === 'string' || typeof value === 'number') {
+            renderedValue = (_c = (_b = filteredOptions.find(function (option) { return option.value === value; })) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : filterName;
+        }
+        else if (Array.isArray(value) && value.length > 0) {
+            renderedValue = value.length + " selected";
+        }
+        else {
+            renderedValue = filterName;
+        }
+    }
+    var handleChange = function (event) {
+        event.stopPropagation();
+        if (stageFilterSelections) {
+            stagedColumnFilters.update(columnId, event.target.value);
+        }
+        else {
+            column.setFilterValue(event.target.value);
+            setAnchorEl(null);
+        }
+    };
+    var handleItemClick = function () {
+        if (multiple) {
+            if (!stageFilterSelections && filteredOptionsCount === 1) {
+                setOpen(false);
+            }
+            else {
+                setOpen(false);
+            }
+        }
+    };
+    return (React.createElement(Box, { className: classes.selectContainer },
+        React.createElement(FormControl, { variant: "outlined", fullWidth: true },
+            React.createElement(InputLabel, { id: "select-filter-label-" + filterName }, filterName || 'filter'),
+            React.createElement(Select, { variant: "outlined", open: open, onOpen: function () { return setOpen(true); }, onClose: function () { return setOpen(false); }, value: value || fallbackValue, displayEmpty: true, multiple: multiple, renderValue: stageFilterSelections ? undefined : function () { return React.createElement(Typography, null, renderedValue); }, label: filterName || 'filter', labelId: "select-filter-label-" + filterName, disabled: !filteredOptionsCount, IconComponent: ChevronDown, onChange: handleChange, fullWidth: true, classes: {
+                    root: classes.selectRoot,
+                    icon: classes.icon,
+                }, MenuProps: {
+                    disablePortal: true,
+                    anchorOrigin: {
+                        vertical: 'bottom',
+                        horizontal: 'left',
+                    },
+                    transformOrigin: {
+                        vertical: 'top',
+                        horizontal: 'left',
+                    },
+                    getContentAnchorEl: null,
+                } }, filteredOptions.map(function (option, index) {
+                return (React.createElement(MenuItem, { classes: { root: option.hide ? classes.hidden : undefined }, key: "option-" + value + "-" + index, value: option.value, onClick: handleItemClick }, option.label));
+            })))));
+};
+
+export { SelectFilter };
+//# sourceMappingURL=SelectFilter.js.map

package/build/esm/components/FilterPanel/FilterControl/SelectFilter/SelectFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectFilter.js","sources":["../../../../../../src/components/FilterPanel/FilterControl/SelectFilter/SelectFilter.tsx"],"sourcesContent":["import React, { ChangeEvent, useContext, useState } from 'react'\nimport { Select, InputLabel, FormControl, Box } from '@material-ui/core'\nimport { ChevronDown } from '@popmenu/web-icons'\nimport { MenuItem, Typography } from '@popmenu/common-ui'\n\nimport { useStyles } from './SelectFilterStyles'\nimport { TableContext } from '../../../TableContext'\nimport { ColumnFilter } from '../../FilterPanelProps'\nimport { useFilterPanelContext } from '../../FilterPanelContext'\n\nexport const SelectFilter = (props: Pick<ColumnFilter, 'options' | 'columnId'> & { multiple: boolean }) => {\n  const { options, columnId, multiple } = props\n  const classes = useStyles()\n  const { table, stagedColumnFilters, stageFilterSelections } = useContext(TableContext)\n\n  const [open, setOpen] = useState(false)\n  const {\n    anchorState: [, setAnchorEl],\n  } = useFilterPanelContext()\n  const column = table.getColumn(columnId)\n  const { meta } = column.columnDef as { meta?: any }\n  const filterName = meta?.filter?.name\n  let value = '' as unknown\n  if (stageFilterSelections && !!stagedColumnFilters.get(columnId)) {\n    value = stagedColumnFilters.get(columnId) as unknown\n  } else {\n    value = column.getFilterValue() as unknown\n  }\n\n  const fallbackValue = multiple ? [] : ''\n  const filteredOptions = options.map((option) => {\n    if (Array.isArray(value)) {\n      if (value.includes(option.value)) {\n        return { ...option, hide: !stageFilterSelections }\n      }\n    }\n    if (typeof value === 'string' || typeof value === 'number') {\n      if (value === option.value) {\n        return { ...option, hide: !stageFilterSelections }\n      }\n    }\n    return { ...option, hide: false }\n  })\n  const filteredOptionsCount = filteredOptions.filter((option) => !option?.hide).length\n  let renderedValue = ''\n  if (!stageFilterSelections && value && filteredOptions && filteredOptionsCount > 0) {\n    if (typeof value === 'string' || typeof value === 'number') {\n      renderedValue = filteredOptions.find((option) => option.value === value)?.label ?? filterName\n    } else if (Array.isArray(value) && value.length > 0) {\n      renderedValue = `${value.length} selected`\n    } else {\n      renderedValue = filterName\n    }\n  }\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    event.stopPropagation()\n    if (stageFilterSelections) {\n      stagedColumnFilters.update(columnId, event.target.value)\n    } else {\n      column.setFilterValue(event.target.value)\n      setAnchorEl(null)\n    }\n  }\n  const handleItemClick = () => {\n    if (multiple) {\n      if (!stageFilterSelections && filteredOptionsCount === 1) {\n        setOpen(false)\n      } else {\n        setOpen(false)\n      }\n    }\n  }\n\n  return (\n    <Box className={classes.selectContainer}>\n      <FormControl variant=\"outlined\" fullWidth>\n        <InputLabel id={`select-filter-label-${filterName}`}>{filterName || 'filter'}</InputLabel>\n        <Select\n          variant=\"outlined\"\n          open={open}\n          onOpen={() => setOpen(true)}\n          onClose={() => setOpen(false)}\n          value={value || fallbackValue}\n          displayEmpty\n          multiple={multiple}\n          renderValue={stageFilterSelections ? undefined : () => <Typography>{renderedValue}</Typography>}\n          label={filterName || 'filter'}\n          labelId={`select-filter-label-${filterName}`}\n          disabled={!filteredOptionsCount}\n          IconComponent={ChevronDown}\n          onChange={handleChange}\n          fullWidth\n          classes={{\n            root: classes.selectRoot,\n            icon: classes.icon,\n          }}\n          MenuProps={{\n            disablePortal: true,\n            anchorOrigin: {\n              vertical: 'bottom',\n              horizontal: 'left',\n            },\n            transformOrigin: {\n              vertical: 'top',\n              horizontal: 'left',\n            },\n            getContentAnchorEl: null,\n          }}\n        >\n          {filteredOptions.map((option, index) => {\n            return (\n              <MenuItem\n                classes={{ root: option.hide ? classes.hidden : undefined }}\n                key={`option-${value}-${index}`}\n                value={option.value}\n                onClick={handleItemClick}\n              >\n                {option.label}\n              </MenuItem>\n            )\n          })}\n        </Select>\n      </FormControl>\n    </Box>\n  )\n}\n"],"names":[],"mappings":"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"}

package/build/{components → esm/components}/FilterPanel/FilterControl/SelectFilter/SelectFilterStyles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<string>;
+export declare const useStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<string>;

package/build/esm/components/FilterPanel/FilterControl/SelectFilter/SelectFilterStyles.js

@@ -0,0 +1,23 @@
+import { makeStyles } from '@material-ui/core';
+
+var useStyles = makeStyles(function (theme) { return ({
+    icon: {
+        marginRight: theme.spacing(1.5),
+        marginTop: theme.spacing(0.5),
+        scale: 1.5,
+    },
+    selectContainer: {
+        padding: '8px 0',
+    },
+    selectRoot: {
+        '&:focus': {
+            backgroundColor: 'transparent',
+        },
+    },
+    hidden: {
+        display: 'none',
+    },
+}); });
+
+export { useStyles };
+//# sourceMappingURL=SelectFilterStyles.js.map

package/build/esm/components/FilterPanel/FilterControl/SelectFilter/SelectFilterStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectFilterStyles.js","sources":["../../../../../../src/components/FilterPanel/FilterControl/SelectFilter/SelectFilterStyles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\n\nexport const useStyles = makeStyles<Theme>((theme) => ({\n  icon: {\n    marginRight: theme.spacing(1.5),\n    marginTop: theme.spacing(0.5),\n    scale: 1.5,\n  },\n  selectContainer: {\n    padding: '8px 0',\n  },\n  selectRoot: {\n    '&:focus': {\n      backgroundColor: 'transparent',\n    },\n  },\n  hidden: {\n    display: 'none',\n  },\n}))\n"],"names":[],"mappings":";;AAEa,IAAA,SAAS,GAAG,UAAU,CAAQ,UAAC,KAAK,EAAK,EAAA,QAAC;AACrD,IAAA,IAAI,EAAE;AACJ,QAAA,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;AAC/B,QAAA,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;AAC7B,QAAA,KAAK,EAAE,GAAG;AACX,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,OAAO,EAAE,OAAO;AACjB,KAAA;AACD,IAAA,UAAU,EAAE;AACV,QAAA,SAAS,EAAE;AACT,YAAA,eAAe,EAAE,aAAa;AAC/B,SAAA;AACF,KAAA;AACD,IAAA,MAAM,EAAE;AACN,QAAA,OAAO,EAAE,MAAM;AAChB,KAAA;CACF,EAAC,EAAA;;;;"}

package/build/{components → esm/components}/FilterPanel/FilterControl/SelectFilter/index.d.ts

@@ -1 +1 @@
-export { SelectFilter } from './SelectFilter';
+export { SelectFilter } from './SelectFilter';

package/build/{components → esm/components}/FilterPanel/FilterControl/ToggleFilter/ToggleFilter.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-export declare const ToggleFilter: (props: {
-    columnId: string;
-}) => JSX.Element;
+/// <reference types="react" />
+export declare const ToggleFilter: (props: {
+    columnId: string;
+}) => JSX.Element;

package/build/esm/components/FilterPanel/FilterControl/ToggleFilter/ToggleFilter.js

@@ -0,0 +1,20 @@
+import React, { useContext } from 'react';
+import { FormControlLabel, Switch } from '@material-ui/core';
+import { TableContext } from '../../../TableContext/index.js';
+
+var ToggleFilter = function (props) {
+    var table = useContext(TableContext).table;
+    var columnId = props.columnId;
+    var column = table.getColumn(columnId);
+    var meta = column.columnDef.meta;
+    var filterName = meta.filter.name;
+    var value = column.getFilterValue();
+    var handleChange = function (event, checked) {
+        event.stopPropagation();
+        column.setFilterValue(checked);
+    };
+    return React.createElement(FormControlLabel, { control: React.createElement(Switch, { checked: value, onChange: handleChange }), label: filterName });
+};
+
+export { ToggleFilter };
+//# sourceMappingURL=ToggleFilter.js.map

package/build/esm/components/FilterPanel/FilterControl/ToggleFilter/ToggleFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleFilter.js","sources":["../../../../../../src/components/FilterPanel/FilterControl/ToggleFilter/ToggleFilter.tsx"],"sourcesContent":["import React, { useContext } from 'react'\nimport { FormControlLabel, Switch } from '@material-ui/core'\nimport { TableContext } from '../../../TableContext'\n\nexport const ToggleFilter = (props: { columnId: string }) => {\n  const table = useContext(TableContext).table\n  const { columnId } = props\n  const column = table.getColumn(columnId)\n  const meta = column.columnDef.meta as { filter: { name: string } }\n  const filterName = meta.filter.name\n  const value = column.getFilterValue() as boolean\n  const handleChange = (event: React.SyntheticEvent<HTMLInputElement>, checked: boolean) => {\n    event.stopPropagation()\n    column.setFilterValue(checked)\n  }\n  return <FormControlLabel control={<Switch checked={value} onChange={handleChange} />} label={filterName} />\n}\n"],"names":[],"mappings":";;;;AAIO,IAAM,YAAY,GAAG,UAAC,KAA2B,EAAA;IACtD,IAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC,KAAK;AACpC,IAAA,IAAA,QAAQ,GAAK,KAAK,CAAA,QAAV;IAChB,IAAM,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC;AACxC,IAAA,IAAM,IAAI,GAAG,MAAM,CAAC,SAAS,CAAC,IAAoC;AAClE,IAAA,IAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI;AACnC,IAAA,IAAM,KAAK,GAAG,MAAM,CAAC,cAAc,EAAa;AAChD,IAAA,IAAM,YAAY,GAAG,UAAC,KAA6C,EAAE,OAAgB,EAAA;QACnF,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,MAAM,CAAC,cAAc,CAAC,OAAO,CAAC;AAChC,KAAC;IACD,OAAO,KAAA,CAAA,aAAA,CAAC,gBAAgB,EAAC,EAAA,OAAO,EAAE,KAAC,CAAA,aAAA,CAAA,MAAM,IAAC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAA,CAAI,EAAE,KAAK,EAAE,UAAU,EAAA,CAAI;AAC7G;;;;"}

package/build/{components → esm/components}/FilterPanel/FilterControl/ToggleFilter/index.d.ts

@@ -1 +1 @@
-export { ToggleFilter } from './ToggleFilter';
+export { ToggleFilter } from './ToggleFilter';

package/build/{components → esm/components}/FilterPanel/FilterControl/index.d.ts

@@ -1 +1 @@
-export { FilterControl } from './FilterControl';
+export { FilterControl } from './FilterControl';

package/build/{components → esm/components}/FilterPanel/FilterPanel.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare const FilterPanel: () => JSX.Element;
+/// <reference types="react" />
+export declare const FilterPanel: () => JSX.Element;

package/build/esm/components/FilterPanel/FilterPanel.js

@@ -0,0 +1,24 @@
+import React, { useState, useContext } from 'react';
+import { Panel } from './Panel/Panel.js';
+import { Trigger } from './Trigger/Trigger.js';
+import { FilterPanelContext } from './FilterPanelContext/FilterPanelContext.js';
+import { TableContext } from '../TableContext/index.js';
+
+var FilterPanel = function () {
+    var _a = useState(null), anchorEl = _a[0], setAnchorEl = _a[1];
+    var _b = useContext(TableContext), stageFilterSelections = _b.stageFilterSelections, stagedColumnFilters = _b.stagedColumnFilters;
+    var handleClick = function (event) {
+        setAnchorEl(event.currentTarget);
+    };
+    var handleClose = function () {
+        if (stageFilterSelections)
+            stagedColumnFilters.clear();
+        setAnchorEl(null);
+    };
+    return (React.createElement(FilterPanelContext.Provider, { value: { anchorState: [anchorEl, setAnchorEl] } },
+        React.createElement(Trigger, { onClick: handleClick }),
+        React.createElement(Panel, { onClose: handleClose, anchorEl: anchorEl })));
+};
+
+export { FilterPanel };
+//# sourceMappingURL=FilterPanel.js.map

package/build/esm/components/FilterPanel/FilterPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPanel.js","sources":["../../../../src/components/FilterPanel/FilterPanel.tsx"],"sourcesContent":["import React, { useContext, useState } from 'react'\n\nimport { Panel } from './Panel'\nimport { Trigger } from './Trigger'\nimport { FilterPanelContext } from './FilterPanelContext'\nimport { TableContext } from '../TableContext'\n\nexport const FilterPanel = () => {\n  const [anchorEl, setAnchorEl] = useState<Element | null>(null)\n  const { stageFilterSelections, stagedColumnFilters } = useContext(TableContext)\n\n  const handleClick = (event: React.SyntheticEvent) => {\n    setAnchorEl(event.currentTarget)\n  }\n\n  const handleClose = () => {\n    if (stageFilterSelections) stagedColumnFilters.clear()\n    setAnchorEl(null)\n  }\n  return (\n    <FilterPanelContext.Provider value={{ anchorState: [anchorEl, setAnchorEl] }}>\n      <Trigger onClick={handleClick} />\n      <Panel onClose={handleClose} anchorEl={anchorEl} />\n    </FilterPanelContext.Provider>\n  )\n}\n"],"names":[],"mappings":";;;;;;AAOa,IAAA,WAAW,GAAG,YAAA;IACnB,IAAA,EAAA,GAA0B,QAAQ,CAAiB,IAAI,CAAC,EAAvD,QAAQ,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,WAAW,GAAA,EAAA,CAAA,CAAA,CAAkC;IACxD,IAAA,EAAA,GAAiD,UAAU,CAAC,YAAY,CAAC,EAAvE,qBAAqB,GAAA,EAAA,CAAA,qBAAA,EAAE,mBAAmB,GAAA,EAAA,CAAA,mBAA6B;IAE/E,IAAM,WAAW,GAAG,UAAC,KAA2B,EAAA;AAC9C,QAAA,WAAW,CAAC,KAAK,CAAC,aAAa,CAAC;AAClC,KAAC;AAED,IAAA,IAAM,WAAW,GAAG,YAAA;AAClB,QAAA,IAAI,qBAAqB;YAAE,mBAAmB,CAAC,KAAK,EAAE;QACtD,WAAW,CAAC,IAAI,CAAC;AACnB,KAAC;AACD,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,WAAW,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,EAAE,EAAA;AAC1E,QAAA,KAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,OAAO,EAAE,WAAW,EAAI,CAAA;AACjC,QAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,EAAC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAA,CAAI,CACvB;AAElC;;;;"}

package/build/{components → esm/components}/FilterPanel/FilterPanelContext/FilterPanelContext.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-declare type FilterPanelContextValue = {
-    anchorState: [Element | null, React.Dispatch<React.SetStateAction<Element | null>>];
-};
-export declare const FilterPanelContext: React.Context<FilterPanelContextValue | null>;
-export declare const useFilterPanelContext: () => FilterPanelContextValue;
-export {};
+import React from 'react';
+declare type FilterPanelContextValue = {
+    anchorState: [Element | null, React.Dispatch<React.SetStateAction<Element | null>>];
+};
+export declare const FilterPanelContext: React.Context<FilterPanelContextValue | null>;
+export declare const useFilterPanelContext: () => FilterPanelContextValue;
+export {};

package/build/esm/components/FilterPanel/FilterPanelContext/FilterPanelContext.js

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+
+var FilterPanelContext = createContext(null);
+var useFilterPanelContext = function () {
+    var context = useContext(FilterPanelContext);
+    if (!context) {
+        throw new Error('useFilterPanelContext has to be used within <FilterPanelContext.Provider>');
+    }
+    return context;
+};
+
+export { FilterPanelContext, useFilterPanelContext };
+//# sourceMappingURL=FilterPanelContext.js.map

package/build/esm/components/FilterPanel/FilterPanelContext/FilterPanelContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPanelContext.js","sources":["../../../../../src/components/FilterPanel/FilterPanelContext/FilterPanelContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from 'react'\n\ntype FilterPanelContextValue = {\n  anchorState: [Element | null, React.Dispatch<React.SetStateAction<Element | null>>]\n}\n\nexport const FilterPanelContext = createContext<FilterPanelContextValue | null>(null)\n\nexport const useFilterPanelContext = () => {\n  const context = useContext(FilterPanelContext)\n\n  if (!context) {\n    throw new Error('useFilterPanelContext has to be used within <FilterPanelContext.Provider>')\n  }\n\n  return context\n}\n"],"names":[],"mappings":";;IAMa,kBAAkB,GAAG,aAAa,CAAiC,IAAI;AAEvE,IAAA,qBAAqB,GAAG,YAAA;AACnC,IAAA,IAAM,OAAO,GAAG,UAAU,CAAC,kBAAkB,CAAC;IAE9C,IAAI,CAAC,OAAO,EAAE;AACZ,QAAA,MAAM,IAAI,KAAK,CAAC,2EAA2E,CAAC;AAC7F;AAED,IAAA,OAAO,OAAO;AAChB;;;;"}

package/build/{components → esm/components}/FilterPanel/FilterPanelContext/index.d.ts

@@ -1 +1 @@
-export { FilterPanelContext, useFilterPanelContext } from './FilterPanelContext';
+export { FilterPanelContext, useFilterPanelContext } from './FilterPanelContext';

package/build/{components → esm/components}/FilterPanel/FilterPanelProps.d.ts

@@ -1,11 +1,11 @@
-export declare type ColumnFilterInput = 'text' | 'number' | 'radio' | 'select' | 'multi-select';
-export declare type ColumnFilter = {
-    columnId: string;
-    input: ColumnFilterInput;
-    min?: number;
-    max?: number;
-    options: Array<{
-        label: string;
-        value: string | number;
-    }>;
-};
+export declare type ColumnFilterInput = 'text' | 'number' | 'radio' | 'select' | 'multi-select';
+export declare type ColumnFilter = {
+    columnId: string;
+    input: ColumnFilterInput;
+    min?: number;
+    max?: number;
+    options: Array<{
+        label: string;
+        value: string | number;
+    }>;
+};

package/build/{components → esm/components}/FilterPanel/Panel/Panel.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-declare type PanelProps = {
-    anchorEl: null | Element;
-    onClose: () => void;
-};
-export declare const Panel: (props: PanelProps) => JSX.Element;
-export {};
+/// <reference types="react" />
+declare type PanelProps = {
+    anchorEl: null | Element;
+    onClose: () => void;
+};
+export declare const Panel: (props: PanelProps) => JSX.Element;
+export {};

package/build/esm/components/FilterPanel/Panel/Panel.js

@@ -0,0 +1,72 @@
+import { __assign } from 'tslib';
+import React, { useContext, useRef } from 'react';
+import { Popover, Paper, Box, Typography } from '@popmenu/common-ui';
+import { useStyles } from './PanelStyles.js';
+import { FilterControl } from '../FilterControl/FilterControl.js';
+import { TableContext } from '../../TableContext/index.js';
+import { useColumnFilters } from '../../../hooks/useColumnFilters.js';
+import { Button } from '@popmenu/admin-ui';
+
+var Panel = function (props) {
+    var anchorEl = props.anchorEl, onClose = props.onClose;
+    var classes = useStyles();
+    var _a = useContext(TableContext), table = _a.table, stagedColumnFilters = _a.stagedColumnFilters, stageFilterSelections = _a.stageFilterSelections;
+    var paperRef = useRef(null);
+    var _b = useColumnFilters(table), columnFilters = _b.columnFilters, resetColumnFilters = _b.resetColumnFilters;
+    var handleClick = function (e) {
+        var _a;
+        var rect = (_a = paperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (rect) {
+            var buffer = 10;
+            var mouseX = e.nativeEvent.x;
+            var mouseY = e.nativeEvent.y;
+            var xHit = rect.x - buffer < mouseX && mouseX < rect.x + rect.width + buffer;
+            var yHit = rect.y - buffer < mouseY && mouseY < rect.y + rect.height + buffer;
+            if (!xHit || !yHit) {
+                onClose();
+            }
+        }
+    };
+    var handleApplyClick = function () {
+        if (stagedColumnFilters.exist()) {
+            columnFilters.forEach(function (columnFilter) {
+                var columnInputValue = stagedColumnFilters.get(columnFilter.columnId);
+                if (columnInputValue) {
+                    var column = table.getColumn(columnFilter.columnId);
+                    column.setFilterValue(columnInputValue);
+                }
+            });
+        }
+        else {
+            resetColumnFilters();
+        }
+        onClose();
+    };
+    var handleCancelClick = function () {
+        onClose();
+    };
+    var open = Boolean(anchorEl);
+    return (React.createElement(Popover, { onClick: handleClick, anchorEl: anchorEl, anchorOrigin: {
+            vertical: 'bottom',
+            horizontal: 'right',
+        }, className: classes.filterPopover, onClose: onClose, open: open, PaperProps: {
+            style: {
+                backgroundColor: 'transparent',
+                boxShadow: 'none',
+                borderRadius: 0,
+            },
+        }, transformOrigin: {
+            vertical: 'top',
+            horizontal: 'right',
+        } },
+        React.createElement(Paper, { className: classes.filterPopoverContents, elevation: 2 },
+            React.createElement(Box, __assign({}, { ref: paperRef }, { padding: 3 }),
+                React.createElement(Typography, { className: classes.menuTitle }, "Filter By"),
+                columnFilters.map(function (columnFilter, i) { return (React.createElement(FilterControl, __assign({}, columnFilter, { key: i }))); })),
+            stageFilterSelections && (React.createElement(Box, { className: classes.buttonBox },
+                React.createElement(Button, { variant: "secondary", onClick: handleCancelClick }, "Cancel"),
+                React.createElement(Button, { onClick: handleApplyClick }, "Apply"))))));
+};
+
+export { Panel };
+//# sourceMappingURL=Panel.js.map

package/build/esm/components/FilterPanel/Panel/Panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","sources":["../../../../../src/components/FilterPanel/Panel/Panel.tsx"],"sourcesContent":["import React, { MouseEvent, useContext, useRef } from 'react'\nimport { Paper, Box, Typography, Popover } from '@popmenu/common-ui'\n\nimport { useStyles } from './PanelStyles'\nimport { FilterControl } from '../FilterControl'\nimport { TableContext } from '../../TableContext'\nimport { useColumnFilters } from '../../../hooks'\nimport { Button } from '@popmenu/admin-ui'\n\ntype PanelProps = {\n  anchorEl: null | Element\n  onClose: () => void\n}\n\nexport const Panel = (props: PanelProps) => {\n  const { anchorEl, onClose } = props\n  const classes = useStyles()\n  const { table, stagedColumnFilters, stageFilterSelections } = useContext(TableContext)\n  const paperRef = useRef<HTMLDivElement>(null)\n  const { columnFilters, resetColumnFilters } = useColumnFilters(table)\n\n  const handleClick = (e: MouseEvent) => {\n    const rect = paperRef.current?.getBoundingClientRect()\n    if (rect) {\n      const buffer = 10\n      const mouseX = e.nativeEvent.x\n      const mouseY = e.nativeEvent.y\n      const xHit = rect.x - buffer < mouseX && mouseX < rect.x + rect.width + buffer\n      const yHit = rect.y - buffer < mouseY && mouseY < rect.y + rect.height + buffer\n      if (!xHit || !yHit) {\n        onClose()\n      }\n    }\n  }\n\n  const handleApplyClick = () => {\n    if (stagedColumnFilters.exist()) {\n      columnFilters.forEach((columnFilter) => {\n        const columnInputValue = stagedColumnFilters.get(columnFilter.columnId)\n        if (columnInputValue) {\n          const column = table.getColumn(columnFilter.columnId)\n          column.setFilterValue(columnInputValue)\n        }\n      })\n    } else {\n      resetColumnFilters()\n    }\n    onClose()\n  }\n\n  const handleCancelClick = () => {\n    onClose()\n  }\n  const open = Boolean(anchorEl)\n  return (\n    <Popover\n      onClick={handleClick}\n      anchorEl={anchorEl}\n      anchorOrigin={{\n        vertical: 'bottom',\n        horizontal: 'right',\n      }}\n      className={classes.filterPopover}\n      onClose={onClose}\n      open={open}\n      PaperProps={{\n        style: {\n          backgroundColor: 'transparent',\n          boxShadow: 'none',\n          borderRadius: 0,\n        },\n      }}\n      transformOrigin={{\n        vertical: 'top',\n        horizontal: 'right',\n      }}\n    >\n      <Paper className={classes.filterPopoverContents} elevation={2}>\n        <Box {...{ ref: paperRef }} padding={3}>\n          <Typography className={classes.menuTitle}>Filter By</Typography>\n          {columnFilters.map((columnFilter, i) => (\n            <FilterControl {...columnFilter} key={i} />\n          ))}\n        </Box>\n        {stageFilterSelections && (\n          <Box className={classes.buttonBox}>\n            <Button variant=\"secondary\" onClick={handleCancelClick}>\n              Cancel\n            </Button>\n            <Button onClick={handleApplyClick}>Apply</Button>\n          </Box>\n        )}\n      </Paper>\n    </Popover>\n  )\n}\n"],"names":[],"mappings":"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"}

package/build/{components → esm/components}/FilterPanel/Panel/PanelStyles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<string>;
+export declare const useStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<string>;