qantler-flaz-dataview 1.0.0

package/src/MdtDisplayPopup.jsx

@@ -0,0 +1,170 @@
+import React from "react";
+import {
+  ArrowDownWideNarrow,
+  ArrowUpNarrowWide,
+  ChevronDown,
+} from "lucide-react";
+
+/**
+ * Display popup — Display Properties, Order By, Group By (list only).
+ * Used in the toolbar and Create View modal.
+ */
+const MdtDisplayPopup = ({
+  viewMode = "table",
+  visibleColumns = [],
+  /** Columns shown as toggles in Display Properties (excludes locked e.g. Application ID). */
+  displayPropertyColumns = null,
+  hiddenColumns = [],
+  onToggleColumn,
+  groupByColumns = [],
+  groupByKey,
+  onGroupByChange,
+  sortState = { column: null, direction: null },
+  orderDirEffective = "asc",
+  onOrderFromDisplay,
+  displayPropsOpen,
+  onToggleDisplayPropsOpen,
+  orderByOpen,
+  onToggleOrderByOpen,
+  groupByOpen,
+  onToggleGroupByOpen,
+  className = "",
+}) => {
+  const propertyColumns = displayPropertyColumns ?? visibleColumns;
+
+  return (
+  <div className={`mdt-display-popup${className ? ` ${className}` : ""}`}>
+    <div className="mdt-dp-section">
+      <div className="mdt-dp-section-header">
+        <span>Display Properties</span>
+        <button
+          type="button"
+          className="mdt-dp-chevron-btn"
+          onClick={onToggleDisplayPropsOpen}
+        >
+          <ChevronDown
+            size={13}
+            className="mdt-dp-chevron"
+            style={{ transform: displayPropsOpen ? "rotate(180deg)" : "rotate(0deg)" }}
+          />
+        </button>
+      </div>
+      {displayPropsOpen && (
+        <div className="mdt-dp-badges">
+          {propertyColumns.map((col) => {
+            const isVisible = !hiddenColumns.includes(col.accessorKey);
+            return (
+              <button
+                key={col.accessorKey}
+                type="button"
+                className={`mdt-dp-badge${isVisible ? " mdt-dp-badge-active" : ""}`}
+                onClick={() => onToggleColumn(col.accessorKey)}
+              >
+                {col.header}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+
+    <div className="mdt-dp-section">
+      <div className="mdt-dp-section-header">
+        <span>Order By</span>
+        <div className="mdt-dp-header-icons">
+          {visibleColumns.some((col) => col.accessorKey === sortState.column) && (
+            <button
+              type="button"
+              className="mdt-dp-sort-icon-btn"
+              title={orderDirEffective === "asc" ? "Ascending" : "Descending"}
+              onClick={() =>
+                onOrderFromDisplay(
+                  sortState.column,
+                  orderDirEffective === "asc" ? "desc" : "asc",
+                )
+              }
+            >
+              {orderDirEffective === "asc" ? (
+                <ArrowUpNarrowWide size={12} />
+              ) : (
+                <ArrowDownWideNarrow size={12} />
+              )}
+            </button>
+          )}
+          <button type="button" className="mdt-dp-chevron-btn" onClick={onToggleOrderByOpen}>
+            <ChevronDown
+              size={13}
+              className="mdt-dp-chevron"
+              style={{ transform: orderByOpen ? "rotate(180deg)" : "rotate(0deg)" }}
+            />
+          </button>
+        </div>
+      </div>
+      {orderByOpen && (
+        <div className="mdt-dp-checklist">
+          {visibleColumns.map((col) => (
+            <label key={col.accessorKey} className="mdt-dp-check-row">
+              <input
+                type="checkbox"
+                className="mdt-dp-checkbox"
+                checked={sortState.column === col.accessorKey}
+                onChange={() => {
+                  if (sortState.column === col.accessorKey) {
+                    onOrderFromDisplay(null, null);
+                  } else {
+                    onOrderFromDisplay(col.accessorKey, "asc");
+                  }
+                }}
+              />
+              <span className="mdt-dp-check-label">{col.header}</span>
+            </label>
+          ))}
+        </div>
+      )}
+    </div>
+
+    {viewMode === "list" && (
+      <div className="mdt-dp-section">
+        <div className="mdt-dp-section-header">
+          <span>Group By</span>
+          <button type="button" className="mdt-dp-chevron-btn" onClick={onToggleGroupByOpen}>
+            <ChevronDown
+              size={13}
+              className="mdt-dp-chevron"
+              style={{ transform: groupByOpen ? "rotate(180deg)" : "rotate(0deg)" }}
+            />
+          </button>
+        </div>
+        {groupByOpen && (
+          <div className="mdt-dp-checklist">
+            {groupByColumns.map((col) => (
+              <label key={col.accessorKey} className="mdt-dp-check-row">
+                <input
+                  type="checkbox"
+                  className="mdt-dp-checkbox"
+                  checked={groupByKey === col.accessorKey}
+                  onChange={() =>
+                    onGroupByChange(groupByKey === col.accessorKey ? null : col.accessorKey)
+                  }
+                />
+                <span className="mdt-dp-check-label">{col.header}</span>
+              </label>
+            ))}
+            <label className="mdt-dp-check-row mdt-dp-check-none">
+              <input
+                type="checkbox"
+                className="mdt-dp-checkbox"
+                checked={groupByKey === null}
+                onChange={() => onGroupByChange(null)}
+              />
+              <span className="mdt-dp-check-label">None</span>
+            </label>
+          </div>
+        )}
+      </div>
+    )}
+  </div>
+  );
+};
+
+export default MdtDisplayPopup;

package/src/MdtEmptyState.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import MdtNoDataIllustration from "./MdtNoDataIllustration";
+
+/**
+ * Centered empty state for table/list when there is no data.
+ */
+const MdtEmptyState = ({
+  title = "No data found",
+  className = "",
+}) => (
+  <div
+    className={`mdt-empty-state${className ? ` ${className}` : ""}`.trim()}
+    role="status"
+  >
+    <MdtNoDataIllustration className="mdt-empty-state-icon" />
+    <h3 className="mdt-empty-state-title">{title}</h3>
+  </div>
+);
+
+export default MdtEmptyState;

package/src/MdtFilterColumnPicker.jsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { Search } from "lucide-react";
+import { renderColumnIcon } from "../../ui/tableColumnIcons";
+
+/**
+ * Reusable column picker dropdown (toolbar, chip replace, add filter).
+ */
+const MdtFilterColumnPicker = ({
+  columns = [],
+  search = "",
+  onSearchChange,
+  onSelectColumn,
+  searchPlaceholder = "Search",
+  emptyMessage = "No filters available",
+  className = "",
+  dropdownClassName = "mdt-filter-dropdown",
+  align = "right",
+  autoFocus = true,
+}) => {
+  const alignClass =
+    align === "left" ? " mdt-fd-left" : align === "center" ? "" : "";
+
+  return (
+    <div
+      className={`${dropdownClassName}${alignClass}${className ? ` ${className}` : ""}`.trim()}
+      style={align === "right" ? { top: "calc(100% + 8px)" } : undefined}
+    >
+      <div className="mdt-fd-search">
+        <div className="mdt-fd-search-wrap">
+          <span className="mdt-fd-search-icon">
+            <Search size={12} />
+          </span>
+          <input
+            type="text"
+            placeholder={searchPlaceholder}
+            value={search}
+            onChange={(e) => onSearchChange?.(e.target.value)}
+            autoFocus={autoFocus}
+          />
+        </div>
+      </div>
+      <div className="mdt-fd-list">
+        {columns.map((col) => (
+          <button
+            key={col.accessorKey}
+            type="button"
+            className="mdt-fd-item"
+            onClick={() => onSelectColumn?.(col)}
+          >
+            <span className="mdt-fd-item-icon">
+              {renderColumnIcon(col.headerIcon || col.rowIcon || "default", {
+                className: "mdt-fd-svg",
+              })}
+            </span>
+            <span>{col.header}</span>
+          </button>
+        ))}
+        {columns.length === 0 && (
+          <div className="mdt-fd-empty">{emptyMessage}</div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default MdtFilterColumnPicker;

package/src/MdtFilterOperatorDropdown.jsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useRef } from "react";
+import { Check } from "lucide-react";
+import { DATE_FILTER_OPERATORS } from "./mdtDateFilterUtils";
+
+/**
+ * Date filter operator picker — "is" | "between".
+ */
+const MdtFilterOperatorDropdown = ({
+  operator,
+  onSelect,
+  onClose,
+  className = "",
+}) => {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const handleOutside = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        onClose?.();
+      }
+    };
+    document.addEventListener("mousedown", handleOutside);
+    return () => document.removeEventListener("mousedown", handleOutside);
+  }, [onClose]);
+
+  return (
+    <div
+      ref={ref}
+      className={`mdt-filter-op-dropdown${className ? ` ${className}` : ""}`}
+      onMouseDown={(e) => e.stopPropagation()}
+    >
+      {DATE_FILTER_OPERATORS.map((opt) => {
+        const active = operator === opt.id;
+        return (
+          <button
+            key={opt.id}
+            type="button"
+            className={`mdt-fd-item mdt-filter-op-item${active ? " mdt-fd-item-checked" : ""}`}
+            onClick={() => {
+              onSelect(opt.id);
+              onClose?.();
+            }}
+          >
+            <span style={{ flex: 1 }}>{opt.label}</span>
+            {active && (
+              <Check
+                size={12}
+                style={{ color: "oklch(0.2378 0.0029 230.83)", flexShrink: 0 }}
+              />
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+export default MdtFilterOperatorDropdown;

package/src/MdtFilterSection.jsx

@@ -0,0 +1,73 @@
+import React from "react";
+import MdtFilterToolbar from "./MdtFilterToolbar";
+import MdtActiveFilterBar from "./MdtActiveFilterBar";
+import { getFilterableColumns, resolveFilterConfig } from "./mdtFilterUtils";
+
+/**
+ * Full filter UI: optional toolbar button + active chips bar.
+ * State/handlers stay in the parent; this component wires layout + config.
+ */
+const MdtFilterSection = ({
+  filterConfig: filterConfigProp,
+  /** All table columns (filterable subset used internally). */
+  columns = [],
+  activeFilters = [],
+  isFilterBarOpen = false,
+  showToolbar = true,
+  showChipBar = true,
+  hideChipBar = false,
+  /** Toolbar */
+  isPickerOpen = false,
+  onPickerOpenChange,
+  onToggleFilterBar,
+  onSelectColumn,
+  pickerSearch = "",
+  onPickerSearchChange,
+  toolbarWrapRef,
+  /** Chips bar — spread remaining MdtActiveFilterBar props */
+  filterBarRef,
+  filterBarProps = {},
+  chipBarClassName = "mdt-filter-bar",
+}) => {
+  const config = resolveFilterConfig(filterConfigProp);
+  const filterableColumns = getFilterableColumns(columns);
+
+  const showBar =
+    showChipBar &&
+    !hideChipBar &&
+    isFilterBarOpen &&
+    activeFilters.length > 0;
+
+  return (
+    <>
+      {showToolbar && (
+        <MdtFilterToolbar
+          filterConfig={config}
+          columns={filterableColumns}
+          activeFilters={activeFilters}
+          isFilterBarOpen={isFilterBarOpen}
+          isPickerOpen={isPickerOpen}
+          onPickerOpenChange={onPickerOpenChange}
+          onToggleFilterBar={onToggleFilterBar}
+          onSelectColumn={onSelectColumn}
+          pickerSearch={pickerSearch}
+          onPickerSearchChange={onPickerSearchChange}
+          wrapRef={toolbarWrapRef}
+        />
+      )}
+
+      {showBar && (
+        <div className={chipBarClassName} ref={filterBarRef}>
+          <MdtActiveFilterBar
+            filterConfig={config}
+            filterableColumns={filterableColumns}
+            activeFilters={activeFilters}
+            {...filterBarProps}
+          />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default MdtFilterSection;

package/src/MdtFilterToolbar.jsx

@@ -0,0 +1,81 @@
+import React, { useRef } from "react";
+import { ListFilter } from "lucide-react";
+import MdtFilterColumnPicker from "./MdtFilterColumnPicker";
+import { resolveFilterConfig } from "./mdtFilterUtils";
+
+/**
+ * Header filter button + column picker dropdown.
+ */
+const MdtFilterToolbar = ({
+  filterConfig: filterConfigProp,
+  columns = [],
+  activeFilters = [],
+  isFilterBarOpen = false,
+  isPickerOpen = false,
+  onPickerOpenChange,
+  onToggleFilterBar,
+  onSelectColumn,
+  pickerSearch = "",
+  onPickerSearchChange,
+  wrapRef,
+  iconSize = 16,
+}) => {
+  const config = resolveFilterConfig(filterConfigProp);
+  const innerRef = useRef(null);
+  const setRef = (el) => {
+    innerRef.current = el;
+    if (typeof wrapRef === "function") wrapRef(el);
+    else if (wrapRef) wrapRef.current = el;
+  };
+
+  const hasFilters = activeFilters.length > 0;
+  const isActive = hasFilters || isFilterBarOpen;
+
+  const handleButtonClick = () => {
+    if (isFilterBarOpen && hasFilters) {
+      onToggleFilterBar?.(false);
+      return;
+    }
+    if (hasFilters) {
+      onToggleFilterBar?.(true);
+      return;
+    }
+    onPickerOpenChange?.(!isPickerOpen);
+  };
+
+  const availableColumns = columns.filter((col) => {
+    const q = pickerSearch.toLowerCase();
+    if (!col.header?.toLowerCase().includes(q)) return false;
+    return !activeFilters.find((f) => f.key === col.accessorKey);
+  });
+
+  return (
+    <div className="mdt-filter-button-wrap" ref={setRef}>
+      <button
+        className={`mdt-ghost icon${isActive ? " mdt-filter-active" : ""}`}
+        type="button"
+        title={config.toolbarButtonTitle}
+        onClick={handleButtonClick}
+      >
+        <ListFilter size={iconSize} />
+      </button>
+
+      {isPickerOpen && (
+        <MdtFilterColumnPicker
+          columns={availableColumns}
+          search={pickerSearch}
+          onSearchChange={onPickerSearchChange}
+          onSelectColumn={(col) => {
+            onSelectColumn?.(col);
+            onPickerOpenChange?.(false);
+          }}
+          searchPlaceholder={config.searchPlaceholder}
+          emptyMessage={config.emptyColumnsMessage}
+          align={config.dropdownAlign}
+        />
+      )}
+    </div>
+  );
+};
+
+export default MdtFilterToolbar;

package/src/MdtInlineField.css

@@ -0,0 +1,221 @@
+.mdt-inline-field {
+  position: relative;
+  flex-shrink: 0;
+  max-width: 100%;
+}
+
+.mdt-inline-field-chip.mdt-filter-chip {
+  max-width: 100%;
+  border: none;
+  box-shadow: none;
+}
+
+.mdt-inline-field-chip-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  height: 28px;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  font: inherit;
+  text-align: left;
+  color: inherit;
+  background: #ffffff;
+}
+
+.mdt-inline-field-chip-btn:hover,
+.mdt-inline-field-chip-btn.mdt-inline-field-chip--open {
+  background: #f4f4f5;
+}
+
+.mdt-inline-field-chip-btn .mdt-chip-label {
+  flex-shrink: 0;
+  padding: 0 0 0 6px;
+  max-width: none;
+}
+
+.mdt-inline-field-chip-value {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 100%;
+  padding: 0 6px 0 0;
+}
+
+/* Selected / entered value text in badges */
+.mdt-inline-field-chip-value:not(.mdt-inline-field-value--empty),
+.mdt-inline-field-chip-value:not(.mdt-inline-field-value--empty) .mdt-chip-value-text,
+.mdt-inline-field-chip-value:not(.mdt-inline-field-value--empty) .mdt-chip-value-entry-label,
+.mdt-inline-field-chip-value:not(.mdt-inline-field-value--empty) .mdt-chip-value-sep,
+.mdt-inline-field-chip-value:not(.mdt-inline-field-value--empty) .mdt-chip-value-more {
+  font-size: 13px;
+  line-height: 18px;
+  font-weight: 400;
+  color: oklch(0.4377 0.0066 230.87);
+}
+
+.mdt-inline-field-chip-value .mdt-chip-value-text {
+  min-width: 0;
+}
+
+.mdt-inline-field-value-with-icon {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.mdt-inline-field-chip .mdt-chip-value-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+
+.mdt-inline-field-chip .mdt-chip-value-icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+.mdt-inline-field-chip .mdt-chip-value-entry {
+  gap: 4px;
+}
+
+.mdt-inline-field-chip-value.mdt-inline-field-value--empty {
+  min-width: 12px;
+}
+
+.mdt-inline-field-chip--error.mdt-filter-chip {
+  border: none;
+  box-shadow: inset 0 0 0 1px #dc2626;
+}
+
+.mdt-inline-field-chip--error.mdt-inline-field-chip-btn:hover,
+.mdt-inline-field-chip--error.mdt-inline-field-chip-btn.mdt-inline-field-chip--open {
+  background: #f4f4f5;
+}
+
+.mdt-inline-field--open {
+  z-index: 10002;
+  overflow: visible;
+}
+
+/* Same popup positioning as filter bar (.mdt-chip-value-wrap) */
+.mdt-inline-field .mdt-inline-field-popup-anchor {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: auto;
+  flex: none;
+  height: 0;
+  min-width: 0;
+  max-width: none;
+  width: 0;
+  border-left: none;
+  overflow: visible;
+  z-index: 10002;
+}
+
+.mdt-inline-field-popup-anchor--align-end {
+  left: auto;
+  right: 0;
+}
+
+.mdt-inline-field-popup-anchor--align-end .mdt-value-popup {
+  left: auto;
+  right: 0;
+}
+
+.mdt-inline-field-popup-anchor .mdt-fd-item-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.mdt-inline-field-popup-anchor .mdt-fd-item-icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+.mdt-inline-field-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 21.6px;
+  border-bottom: none;
+  background: #ffffff;
+}
+
+/* Responsive badge grid — column count follows available width (~4 on wide, fewer on small) */
+.mdt-inline-field-row--responsive,
+.mdt-inline-field-row--4-cols {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
+  gap: 1rem;
+  align-items: stretch;
+}
+
+.mdt-inline-field-row--responsive .mdt-inline-field,
+.mdt-inline-field-row--4-cols .mdt-inline-field {
+  min-width: 0;
+  max-width: none;
+}
+
+/* Badge bar: full-width grid cells; vertical rule at column end; 4px inset from line */
+.mdt-inline-field-row--responsive.mdt-inline-field-row--badge-bar,
+.mdt-inline-field-row--4-cols.mdt-inline-field-row--badge-bar {
+  column-gap: 0;
+  row-gap: 1rem;
+}
+
+.mdt-inline-field-row--badge-bar .mdt-inline-field {
+  box-sizing: border-box;
+  min-width: 0;
+  padding-left: 4px;
+}
+
+.mdt-inline-field-row--badge-bar .mdt-inline-field:not(.mdt-inline-field--row-end) {
+  padding-right: 4px;
+  border-right: 1px solid #e4e4e7;
+}
+
+.mdt-inline-field-row--badge-bar .mdt-inline-field-chip-btn {
+  width: 100%;
+}
+
+@media (max-width: 599px) {
+  .mdt-inline-field-row--responsive,
+  .mdt-inline-field-row--4-cols {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+.mdt-inline-field-row--open {
+  position: relative;
+  z-index: 60;
+}
+
+/* Flex-only bar (no responsive grid) */
+.mdt-inline-field-row--badge-bar:not(.mdt-inline-field-row--responsive):not(
+    .mdt-inline-field-row--4-cols
+  ) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0;
+}
+
+.mdt-inline-field-row--badge-bar:not(.mdt-inline-field-row--responsive):not(
+    .mdt-inline-field-row--4-cols
+  )
+  .mdt-inline-field {
+  flex-shrink: 0;
+  max-width: 100%;
+}