@lightsparkdev/ui 1.0.8 → 1.0.9

package/dist/{chunk-JWGDZRNN.js → chunk-ONSMYN3L.js}

@@ -3,16 +3,16 @@ import {
 } from "./chunk-JJC2AUQ3.js";
 import {
   TextButton
-} from "./chunk-DGS7USD6.js";
+} from "./chunk-PFBJ4FWY.js";
 import {
   IconContainer
-} from "./chunk-QQTZ6DZL.js";
+} from "./chunk-K3DMPJSX.js";
 import {
   bp
 } from "./chunk-JSGRNWSB.js";
 import {
   colors
-} from "./chunk-REL56P3K.js";
+} from "./chunk-RTRS42I3.js";
 
 // src/components/PageSection/PageSectionNav.tsx
 import styled from "@emotion/styled";

package/dist/chunk-OS2EYFJG.js

@@ -0,0 +1,584 @@
+import {
+  Table
+} from "./chunk-P7AW5ENT.js";
+import {
+  DateFilter,
+  getDefaultDateFilterState
+} from "./chunk-SNGHCC4T.js";
+import {
+  EnumFilter,
+  getDefaultEnumFilterState,
+  isEnumFilterState
+} from "./chunk-SGEOJN66.js";
+import {
+  IdFilter,
+  getDefaultIdFilterState,
+  isIdFilterState
+} from "./chunk-DIUJNGAX.js";
+import {
+  Popover
+} from "./chunk-MFOXSQYS.js";
+import {
+  StringFilter,
+  getDefaultStringFilterState,
+  isStringFilterState
+} from "./chunk-HCWYHWS5.js";
+import {
+  BooleanFilter,
+  getDefaultBooleanFilterState
+} from "./chunk-EQMAHIZH.js";
+import {
+  LabelModerate
+} from "./chunk-NKLYOJV4.js";
+import {
+  Label
+} from "./chunk-4MZNGM5R.js";
+import {
+  Dropdown
+} from "./chunk-5NMI3YI4.js";
+import {
+  Spacing
+} from "./chunk-E5DUKMCU.js";
+import {
+  TextIconAligner
+} from "./chunk-LTVF3OV7.js";
+import {
+  CardPageFullWidth
+} from "./chunk-SW7ELJLY.js";
+import {
+  Button,
+  StyledButton
+} from "./chunk-R35JXTPE.js";
+import {
+  standardContentInset
+} from "./chunk-ZMK4RE5I.js";
+import {
+  bp
+} from "./chunk-JSGRNWSB.js";
+import {
+  __async,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-CWMXXUWU.js";
+
+// src/components/DataManagerTable/DataManagerTable.tsx
+import styled from "@emotion/styled";
+import { useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "@emotion/react/jsx-runtime";
+function getDefaultFilterState(filter) {
+  switch (filter.type) {
+    case "date" /* DATE */:
+      return getDefaultDateFilterState();
+    case "enum" /* ENUM */:
+      return getDefaultEnumFilterState();
+    case "string" /* STRING */:
+      return getDefaultStringFilterState();
+    case "id" /* ID */:
+      return getDefaultIdFilterState(filter.allowedEntities);
+    case "boolean" /* BOOLEAN */:
+      return getDefaultBooleanFilterState();
+    default:
+      throw new Error("Invalid filter type");
+  }
+}
+function initialFilterState(filters) {
+  let state = {};
+  filters.forEach((filter) => {
+    state = __spreadProps(__spreadValues({}, state), {
+      [filter.accessor]: getDefaultFilterState(filter)
+    });
+  });
+  return state;
+}
+function DataManagerTable(props) {
+  var _a, _b, _c;
+  const [pageSize, setPageSize] = useState(((_a = props.pageSizes) == null ? void 0 : _a[0]) || 20);
+  const [pageCursorState, setPageCursorState] = useState({
+    startResult: void 0,
+    nextPageCursor: props.nextPageCursor,
+    cursorCache: {}
+  });
+  const [isLoading, setIsLoading] = useState(props.loading || false);
+  const [numFiltersApplied, setNumFiltersApplied] = useState(0);
+  const [showFilterPopover, setShowFilterPopover] = useState(false);
+  const [filterStates, setFilterStates] = useState(
+    props.filterOptions ? initialFilterState(props.filterOptions.filters) : {}
+  );
+  const [fetchVariables, setFetchVariables] = useState(
+    ((_b = props.filterOptions) == null ? void 0 : _b.initialQueryVariables) || {}
+  );
+  useEffect(() => {
+    setIsLoading(Boolean(props.loading));
+  }, [props.loading]);
+  useEffect(() => {
+    if (!props.nextPageCursor) {
+      return;
+    }
+    const cursorCacheResult = Object.entries(
+      pageCursorState.cursorCache[pageSize] || {}
+    ).find(([_, cursor]) => cursor === props.nextPageCursor);
+    if (cursorCacheResult) {
+      setPageCursorState((prevState) => __spreadProps(__spreadValues({}, prevState), {
+        startResult: parseInt(cursorCacheResult[0]),
+        nextPageCursor: cursorCacheResult[1]
+      }));
+    } else {
+      setPageCursorState((prevState) => {
+        if (prevState.nextPageCursor === props.nextPageCursor) return prevState;
+        const startResult = prevState.startResult === void 0 ? 1 : prevState.startResult + pageSize;
+        return __spreadProps(__spreadValues({}, prevState), {
+          startResult,
+          nextPageCursor: props.nextPageCursor,
+          cursorCache: __spreadProps(__spreadValues({}, prevState.cursorCache), {
+            [pageSize]: __spreadProps(__spreadValues({}, prevState.cursorCache[pageSize]), {
+              [startResult]: props.nextPageCursor
+            })
+          })
+        });
+      });
+    }
+  }, [props.nextPageCursor, pageSize, pageCursorState.cursorCache]);
+  function updateFilterState(filter) {
+    return (state) => {
+      setFilterStates((prevState) => __spreadProps(__spreadValues({}, prevState), {
+        [filter.accessor]: state
+      }));
+    };
+  }
+  const handleApplyFilters = (filterStates2, filterOptions, pageSize2) => __async(this, null, function* () {
+    var _a2, _b2, _c2, _d;
+    const { filters: filters2, refetch, getFilterQueryVariables } = filterOptions;
+    const appliedFilterStates = __spreadValues({}, filterStates2);
+    const filterStatesArray = Object.values(appliedFilterStates);
+    let isValid = true;
+    for (let i = 0; i < filterStatesArray.length; i++) {
+      const filterState = filterStatesArray[i];
+      if (filterState.isApplied && filterState.onValidate) {
+        const filter = filters2[i];
+        const validResult = filterState.onValidate(
+          filterState,
+          filter.isMulti
+        );
+        if (validResult) {
+          appliedFilterStates[filter.accessor] = validResult;
+          if (isIdFilterState(filterState)) {
+            const appliedValues = validResult.appliedValues;
+            const isApplied = !!(appliedValues == null ? void 0 : appliedValues.length);
+            updateFilterState(filter)(__spreadProps(__spreadValues({}, filterStates2[filter.accessor]), {
+              value: "",
+              appliedValues: appliedValues ? [...appliedValues] : [],
+              isApplied
+            }));
+            filterState.isApplied = isApplied;
+          }
+        } else {
+          filterState.errorMessage = filter.errorMessage || "Error validating input";
+          isValid = false;
+        }
+      }
+    }
+    if (!isValid) {
+      setFilterStates((prevState) => __spreadValues({}, prevState));
+      return;
+    }
+    for (let i = 0; i < filterStatesArray.length; i++) {
+      const filterState = filterStatesArray[i];
+      if (!filterState.isApplied) continue;
+      const filter = filters2[i];
+      if (isStringFilterState(filterState)) {
+        if (filterState.value) {
+          const value = filterState.value;
+          let updatedAppliedValues = [];
+          if (filter.isMulti) {
+            updatedAppliedValues = ((_a2 = filterState.appliedValues) == null ? void 0 : _a2.filter(
+              (appliedValue) => appliedValue !== value
+            )) || [];
+          }
+          updatedAppliedValues.push(value);
+          const newFilterState = __spreadProps(__spreadValues({}, filterStates2[filter.accessor]), {
+            value: "",
+            appliedValues: updatedAppliedValues,
+            isApplied: !!updatedAppliedValues.length
+          });
+          appliedFilterStates[filter.accessor] = newFilterState;
+          updateFilterState(filter)(newFilterState);
+        } else if (((_b2 = filterState.appliedValues) == null ? void 0 : _b2.length) === 0) {
+          updateFilterState(filter)(getDefaultStringFilterState());
+          filterState.isApplied = false;
+        }
+      } else if (isEnumFilterState(filterState)) {
+        if (filterState.value) {
+          const newFilterState = __spreadProps(__spreadValues({}, filterStates2[filter.accessor]), {
+            value: "",
+            appliedValues: filterState.appliedValues,
+            isApplied: !!((_c2 = filterState.appliedValues) == null ? void 0 : _c2.length)
+          });
+          appliedFilterStates[filter.accessor] = newFilterState;
+          updateFilterState(filter)(newFilterState);
+        } else if (((_d = filterState.appliedValues) == null ? void 0 : _d.length) === 0) {
+          updateFilterState(filter)(getDefaultStringFilterState());
+          filterState.isApplied = false;
+        }
+      }
+    }
+    const numFiltersApplied2 = filterStatesArray.reduce((acc, state) => {
+      return state.isApplied ? acc + 1 : acc;
+    }, 0);
+    setNumFiltersApplied(numFiltersApplied2);
+    setShowFilterPopover(false);
+    setIsLoading(true);
+    const newFetchVariables = getFilterQueryVariables(
+      filters2,
+      appliedFilterStates,
+      pageSize2
+    );
+    setFetchVariables(newFetchVariables);
+    setPageCursorState((prevState) => __spreadProps(__spreadValues({}, prevState), {
+      startResult: void 0
+    }));
+    try {
+      yield refetch(newFetchVariables);
+    } catch (e) {
+      setIsLoading(false);
+      throw e;
+    }
+    setIsLoading(false);
+  });
+  const handleClearFilters = () => {
+    if (props.filterOptions) {
+      const { filters: filters2 } = props.filterOptions;
+      const newFilterStates = initialFilterState(filters2);
+      setFilterStates(newFilterStates);
+      void handleApplyFilters(newFilterStates, props.filterOptions, pageSize);
+    }
+  };
+  const handleNext = () => __async(this, null, function* () {
+    if (!props.filterOptions) {
+      return;
+    }
+    const { refetch } = props.filterOptions;
+    setIsLoading(true);
+    const newFetchVariables = __spreadProps(__spreadValues({}, fetchVariables), {
+      after: pageCursorState === void 0 ? void 0 : pageCursorState.nextPageCursor
+    });
+    setFetchVariables(newFetchVariables);
+    try {
+      yield refetch(newFetchVariables);
+    } catch (e) {
+      setIsLoading(false);
+      throw e;
+    }
+    setIsLoading(false);
+  });
+  const handlePrev = () => __async(this, null, function* () {
+    if (!props.filterOptions) {
+      return;
+    }
+    const { refetch } = props.filterOptions;
+    setIsLoading(true);
+    const newFetchVariables = __spreadProps(__spreadValues({}, fetchVariables), {
+      after: pageCursorState.startResult ? pageCursorState.cursorCache[pageSize][pageCursorState.startResult - pageSize - pageSize] : void 0
+    });
+    setFetchVariables(newFetchVariables);
+    try {
+      yield refetch(newFetchVariables);
+    } catch (e) {
+      setIsLoading(false);
+      throw e;
+    }
+    setIsLoading(false);
+  });
+  const handleChangePageSize = (size) => __async(this, null, function* () {
+    setPageSize(size);
+    if (props.showMoreOptions) {
+      const { refetch, initialQueryVariables } = props.showMoreOptions;
+      setIsLoading(true);
+      let pageSizeQueryVariables;
+      if (props.showMoreOptions.pageSizeVariables) {
+        pageSizeQueryVariables = {};
+        for (const variable of props.showMoreOptions.pageSizeVariables) {
+          pageSizeQueryVariables[variable] = size;
+        }
+      } else {
+        pageSizeQueryVariables = { first: size };
+      }
+      const newFetchVariables = __spreadValues(__spreadValues({}, initialQueryVariables), pageSizeQueryVariables);
+      setFetchVariables(newFetchVariables);
+      try {
+        yield refetch(newFetchVariables);
+      } catch (e) {
+        setIsLoading(false);
+        throw e;
+      }
+      setIsLoading(false);
+    } else if (props.filterOptions) {
+      void handleApplyFilters(filterStates, props.filterOptions, size);
+    }
+  });
+  const filterSections = props.filterOptions ? props.filterOptions.filters.map((filter) => {
+    switch (filter.type) {
+      case "date" /* DATE */:
+        return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          DateFilter,
+          {
+            updateFilterState: (state) => {
+              setFilterStates((prevState) => __spreadProps(__spreadValues({}, prevState), {
+                [filter.accessor]: state
+              }));
+            },
+            state: filterStates[filter.accessor]
+          }
+        ) }, filter.label);
+      case "enum" /* ENUM */:
+        return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          EnumFilter,
+          {
+            updateFilterState: (state) => {
+              setFilterStates((prevState) => __spreadProps(__spreadValues({}, prevState), {
+                [filter.accessor]: state
+              }));
+            },
+            options: filter.enumValues,
+            label: filter.label,
+            placeholder: filter.placeholder,
+            state: filterStates[filter.accessor],
+            isMulti: filter.isMulti
+          }
+        ) }, filter.label);
+      case "string" /* STRING */:
+        return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          StringFilter,
+          {
+            updateFilterState: (state) => {
+              setFilterStates((prevState) => __spreadProps(__spreadValues({}, prevState), {
+                [filter.accessor]: state
+              }));
+            },
+            label: filter.label,
+            placeholder: filter.placeholder,
+            state: filterStates[filter.accessor]
+          }
+        ) }, filter.label);
+      case "id" /* ID */:
+        return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          IdFilter,
+          {
+            updateFilterState: (state) => {
+              setFilterStates((prevState) => __spreadProps(__spreadValues({}, prevState), {
+                [filter.accessor]: state
+              }));
+            },
+            label: filter.label,
+            placeholder: filter.placeholder,
+            state: filterStates[filter.accessor]
+          }
+        ) }, filter.label);
+      case "boolean" /* BOOLEAN */:
+        return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          BooleanFilter,
+          {
+            updateFilterState: (state) => {
+              setFilterStates((prevState) => __spreadProps(__spreadValues({}, prevState), {
+                [filter.accessor]: state
+              }));
+            },
+            label: filter.label,
+            state: filterStates[filter.accessor]
+          }
+        ) }, filter.label);
+      default:
+        return null;
+    }
+  }) : [];
+  let filters;
+  if (props.filterOptions) {
+    filters = /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(DataManagerTableFilterContainer, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          text: `Filter${numFiltersApplied > 0 ? ` | ${numFiltersApplied}` : ""}`,
+          paddingY: "short",
+          icon: "Sort",
+          typography: { color: "c6Neutral" },
+          onClick: () => setShowFilterPopover(!showFilterPopover)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Popover,
+        {
+          show: showFilterPopover,
+          setShow: setShowFilterPopover,
+          side: "right",
+          onApply: () => void handleApplyFilters(
+            filterStates,
+            props.filterOptions,
+            pageSize
+          ),
+          onClear: handleClearFilters,
+          children: filterSections
+        }
+      )
+    ] }) });
+  }
+  let showMoreDropdown;
+  if (((_c = props.pageSizes) == null ? void 0 : _c.length) > 1) {
+    showMoreDropdown = /* @__PURE__ */ jsx(
+      Dropdown,
+      {
+        getCSS: ({ isOpen }) => ({
+          height: "fit-content",
+          alignSelf: "center"
+        }),
+        button: {
+          getCSS: ({ isOpen }) => ({
+            display: "flex",
+            alignItems: "center",
+            height: "100%",
+            width: "100%"
+          }),
+          getContent: ({ isOpen }) => /* @__PURE__ */ jsx(
+            TextIconAligner,
+            {
+              content: `Show ${pageSize} items`,
+              typography: { size: "ExtraSmall" },
+              rightIcon: {
+                name: "Chevron",
+                ml: 4,
+                width: 14,
+                color: isOpen ? "onPrimaryText" : "mcNeutral"
+              }
+            }
+          )
+        },
+        dropdownItems: props.pageSizes.map((size) => ({
+          label: `${size}`,
+          onClick: () => {
+            void handleChangePageSize(size);
+          }
+        }))
+      }
+    );
+  }
+  let footer;
+  if (props.showMoreOptions) {
+    footer = /* @__PURE__ */ jsxs(DataManagerTableFooter, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          text: "Show more",
+          paddingY: "short",
+          onClick: () => {
+            var _a2;
+            return void handleChangePageSize(pageSize + (((_a2 = props.pageSizes) == null ? void 0 : _a2[0]) || 20));
+          }
+        }
+      ),
+      showMoreDropdown
+    ] });
+  } else if (props.resultCount) {
+    const startResult = pageCursorState.startResult || 1;
+    const endResult = Math.min(props.resultCount, startResult + pageSize - 1);
+    const resultsString = /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Label, { children: "Viewing " }),
+      /* @__PURE__ */ jsx(LabelModerate, { children: `${startResult}-${endResult}` }),
+      /* @__PURE__ */ jsx(Label, { children: " of " }),
+      /* @__PURE__ */ jsx(LabelModerate, { children: `${props.resultCount}` }),
+      /* @__PURE__ */ jsx(Label, { children: " results" })
+    ] });
+    const hasNext = props.resultCount ? startResult + pageSize - 1 < props.resultCount : false;
+    const hasPrev = startResult > 1;
+    footer = /* @__PURE__ */ jsxs(DataManagerTableFooter, { children: [
+      resultsString,
+      /* @__PURE__ */ jsxs(PaginationContainer, { children: [
+        showMoreDropdown,
+        /* @__PURE__ */ jsxs(PaginationButtonsContainer, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              text: "Previous",
+              paddingY: "short",
+              onClick: () => {
+                void handlePrev();
+              },
+              disabled: !hasPrev
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              text: "Next",
+              paddingY: "short",
+              onClick: () => {
+                void handleNext();
+              },
+              disabled: !hasNext
+            }
+          )
+        ] })
+      ] })
+    ] });
+  }
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    props.showHeader && /* @__PURE__ */ jsx(DataManagerTableHeader, { children: filters }),
+    /* @__PURE__ */ jsx(Table, __spreadProps(__spreadValues({}, props), { loading: isLoading })),
+    footer
+  ] });
+  const isCardPage = typeof props.cardPage === "boolean" ? props.cardPage : true;
+  return /* @__PURE__ */ jsx(StyledDataManagerTable, { children: isCardPage ? /* @__PURE__ */ jsx(CardPageFullWidth, { css: { marginTop: "24px" }, children: content }) : content });
+}
+var StyledDataManagerTable = styled.div``;
+var commonPadding = `
+  ${bp.lg(`
+  padding-left: ${standardContentInset.lgPx}px;
+  padding-right: ${standardContentInset.lgPx}px;
+  `)}
+  ${bp.sm(`
+  padding-left: ${standardContentInset.smPx}px;
+  padding-right: ${standardContentInset.smPx}px;
+  `)}
+  ${bp.minSmMaxLg(`
+  padding-left: ${standardContentInset.minSmMaxLgPx}px;
+  padding-right: ${standardContentInset.minSmMaxLgPx}px;
+  `)}
+`;
+var DataManagerTableHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  gap: ${Spacing.px.sm};
+  padding: ${Spacing.px.xs} 0;
+  ${commonPadding};
+`;
+var DataManagerTableFooter = styled.div`
+  border-top: 1px solid ${({ theme }) => theme.c1Neutral};
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  ${commonPadding}
+  padding-top: ${Spacing.px.md};
+  padding-bottom: ${Spacing.px.md};
+
+  ${StyledButton} {
+    align-self: end;
+  }
+`;
+var PaginationContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+var PaginationButtonsContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-left: ${Spacing.px.md};
+  gap: ${Spacing.px.xs};
+`;
+var DataManagerTableFilterContainer = styled.div`
+  position: relative;
+`;
+
+export {
+  DataManagerTable
+};

package/dist/{chunk-G5HBO2FI.cjs → chunk-OVJZVL57.cjs}

@@ -12,7 +12,7 @@ var typographyStyles = ({
     margin: 0;
 
     ${displayValue ? `display: ${displayValue};` : ""}
-    ${hideOverflow ? "overflow: hidden; text-overflow: ellipsis;" : ""}
+    ${hideOverflow ? "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" : ""}
   `;
 };