@klodd/kommers-ds 0.1.0

package/dist/esm/blocks/data-table/components/data-table-filter-menu.js

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { useDataTableContext } from "../../data-table/context/use-data-table-context";
+import { DropdownMenu } from "../../../components/dropdown-menu";
+import { IconButton } from "../../../components/icon-button";
+import { Skeleton } from "../../../components/skeleton";
+import { Tooltip } from "../../../components/tooltip";
+import { Funnel } from "@klodd/kommers-icons";
+/**
+ * This component adds a filter menu to the data table, allowing users
+ * to filter the table's data.
+ */
+const DataTableFilterMenu = ({ tooltip, onAddFilter }) => {
+    const { instance } = useDataTableContext();
+    const enabledFilters = Object.keys(instance.getFiltering());
+    const filterOptions = instance
+        .getFilters()
+        .filter((filter) => !enabledFilters.includes(filter.id));
+    if (!enabledFilters.length && !filterOptions.length) {
+        throw new Error("DataTable.FilterMenu was rendered but there are no filters to apply. Make sure to pass filters to 'useDataTable'");
+    }
+    const Wrapper = tooltip ? Tooltip : React.Fragment;
+    const wrapperProps = tooltip
+        ? { content: tooltip, hidden: filterOptions.length === 0 }
+        : {};
+    if (instance.showSkeleton) {
+        return React.createElement(DataTableFilterMenuSkeleton, null);
+    }
+    return (React.createElement(DropdownMenu, null,
+        React.createElement(Wrapper, { ...wrapperProps },
+            React.createElement(DropdownMenu.Trigger, { asChild: true, disabled: filterOptions.length === 0 },
+                React.createElement(IconButton, { size: "small" },
+                    React.createElement(Funnel, null)))),
+        React.createElement(DropdownMenu.Content, { side: "bottom", align: "start" }, filterOptions.map((filter) => {
+            const getDefaultValue = () => {
+                switch (filter.type) {
+                    case "select":
+                    case "multiselect":
+                        return [];
+                    case "string":
+                        return "";
+                    case "number":
+                        return null;
+                    case "date":
+                        return null;
+                    case "radio":
+                        return null;
+                    case "custom":
+                        return null;
+                    default:
+                        return null;
+                }
+            };
+            return (React.createElement(DropdownMenu.Item, { key: filter.id, onClick: (e) => {
+                    // Prevent any bubbling that might interfere
+                    e.stopPropagation();
+                    if (onAddFilter) {
+                        onAddFilter(filter.id, getDefaultValue());
+                    }
+                    else {
+                        instance.addFilter({ id: filter.id, value: getDefaultValue() });
+                    }
+                } }, filter.label));
+        }))));
+};
+DataTableFilterMenu.displayName = "DataTable.FilterMenu";
+const DataTableFilterMenuSkeleton = () => {
+    return React.createElement(Skeleton, { className: "size-7" });
+};
+export { DataTableFilterMenu };
+//# sourceMappingURL=data-table-filter-menu.js.map

package/dist/esm/blocks/data-table/components/data-table-filter-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-filter-menu.js","sourceRoot":"","sources":["../../../../../src/blocks/data-table/components/data-table-filter-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\"\n\nimport { useDataTableContext } from \"@/blocks/data-table/context/use-data-table-context\"\nimport { DropdownMenu } from \"@/components/dropdown-menu\"\nimport { IconButton } from \"@/components/icon-button\"\nimport { Skeleton } from \"@/components/skeleton\"\nimport { Tooltip } from \"@/components/tooltip\"\nimport { Funnel } from \"@klodd/kommers-icons\"\n\ninterface DataTableFilterMenuProps {\n  /**\n   * The tooltip to show when hovering over the filter menu.\n   */\n  tooltip?: string\n  /**\n   * Callback when a filter is added\n   */\n  onAddFilter?: (id: string, value: unknown) => void\n}\n\n/**\n * This component adds a filter menu to the data table, allowing users\n * to filter the table's data.\n */\nconst DataTableFilterMenu = ({ tooltip, onAddFilter }: DataTableFilterMenuProps) => {\n  const { instance } = useDataTableContext()\n\n  const enabledFilters = Object.keys(instance.getFiltering())\n\n  const filterOptions = instance\n    .getFilters()\n    .filter((filter) => !enabledFilters.includes(filter.id))\n\n  if (!enabledFilters.length && !filterOptions.length) {\n    throw new Error(\n      \"DataTable.FilterMenu was rendered but there are no filters to apply. Make sure to pass filters to 'useDataTable'\"\n    )\n  }\n\n  const Wrapper = tooltip ? Tooltip : React.Fragment\n  const wrapperProps = tooltip\n    ? { content: tooltip, hidden: filterOptions.length === 0 }\n    : ({} as any)\n\n  if (instance.showSkeleton) {\n    return <DataTableFilterMenuSkeleton />\n  }\n\n  return (\n    <DropdownMenu>\n      <Wrapper {...wrapperProps}>\n        <DropdownMenu.Trigger asChild disabled={filterOptions.length === 0}>\n          <IconButton size=\"small\">\n            <Funnel />\n          </IconButton>\n        </DropdownMenu.Trigger>\n      </Wrapper>\n      <DropdownMenu.Content side=\"bottom\" align=\"start\">\n        {filterOptions.map((filter) => {\n          const getDefaultValue = () => {\n            switch (filter.type) {\n              case \"select\":\n              case \"multiselect\":\n                return []\n              case \"string\":\n                return \"\"\n              case \"number\":\n                return null\n              case \"date\":\n                return null\n              case \"radio\":\n                return null\n              case \"custom\":\n                return null\n              default:\n                return null\n            }\n          }\n          \n          return (\n            <DropdownMenu.Item\n              key={filter.id}\n              onClick={(e) => {\n                // Prevent any bubbling that might interfere\n                e.stopPropagation()\n                if (onAddFilter) {\n                  onAddFilter(filter.id, getDefaultValue())\n                } else {\n                  instance.addFilter({ id: filter.id, value: getDefaultValue() })\n                }\n              }}\n            >\n              {filter.label}\n            </DropdownMenu.Item>\n          )\n        })}\n      </DropdownMenu.Content>\n    </DropdownMenu>\n  )\n}\nDataTableFilterMenu.displayName = \"DataTable.FilterMenu\"\n\nconst DataTableFilterMenuSkeleton = () => {\n  return <Skeleton className=\"size-7\" />\n}\n\nexport { DataTableFilterMenu }\nexport type { DataTableFilterMenuProps }\n"]}

package/dist/esm/blocks/data-table/components/data-table-filter.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+interface DataTableFilterProps {
+    id: string;
+    filter: unknown;
+    isNew?: boolean;
+    onUpdate?: (value: unknown) => void;
+    onRemove?: () => void;
+}
+declare const DataTableFilter: {
+    ({ id, filter, isNew, onUpdate, onRemove }: DataTableFilterProps): React.JSX.Element | null;
+    displayName: string;
+};
+export { DataTableFilter };
+export type { DataTableFilterProps };
+//# sourceMappingURL=data-table-filter.d.ts.map

package/dist/esm/blocks/data-table/components/data-table-filter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-filter.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/data-table/components/data-table-filter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAsB9B,UAAU,oBAAoB;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,OAAO,CAAA;IACf,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACnC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAYD,QAAA,MAAM,eAAe;gDAAuD,oBAAoB;;CAqU/F,CAAA;AA+4BD,OAAO,EAAE,eAAe,EAAE,CAAA;AAC1B,YAAY,EAAE,oBAAoB,EAAE,CAAA"}