@multiplatform.one/table 6.0.0

package/dist/cjs/components/DataTableViewOptions/index.cjs

@@ -0,0 +1,521 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var DataTableViewOptions_exports = {};
+__export(DataTableViewOptions_exports, {
+  DataTableViewOptions: () => DataTableViewOptions
+});
+module.exports = __toCommonJS(DataTableViewOptions_exports);
+var import_react = require("@phosphor-icons/react");
+var import_theme = require("@multiplatform.one/theme");
+var import_react2 = require("react");
+var import_forms = require("@multiplatform.one/forms");
+var import_tamagui = require("tamagui");
+var import_DataTableStateContext = require("../DataTable/DataTableStateContext.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function DataTableViewOptions(props) {
+  const ctx = (0, import_DataTableStateContext.useDataTableState)();
+  const columns = props.columns ?? (ctx ? ctx.table.getAllColumns().map((col, index) => ({
+    id: col.id,
+    label: typeof col.columnDef.header === "string" ? col.columnDef.header : col.id,
+    visible: col.getIsVisible(),
+    order: index,
+    width: col.getSize(),
+    canHide: col.getCanHide(),
+    canResize: col.getCanResize()
+  })) : []);
+  const onColumnVisibilityChange = props.onColumnVisibilityChange ?? (ctx ? (columnId, visible) => ctx.actions.toggleColumnVisibility(columnId, visible) : () => {});
+  const onColumnOrderChange = props.onColumnOrderChange ?? (ctx ? ctx.actions.setColumnOrder : () => {});
+  const onColumnSizingChange = props.onColumnSizingChange ?? (ctx ? ctx.actions.setColumnSizing : () => {});
+  const views = props.views ?? ctx?.state.views ?? [];
+  const activeViewId = props.activeViewId ?? ctx?.state.activeViewId;
+  const onSaveView = props.onSaveView ?? ctx?.actions.saveView ?? (() => {});
+  const onLoadView = props.onLoadView ?? ctx?.actions.loadView ?? (() => {});
+  const onResetToDefault = props.onResetToDefault ?? ctx?.actions.resetToDefault ?? (() => {});
+  const {
+    showColumnVisibility = true,
+    showColumnOrdering = false,
+    showColumnResizing = false,
+    showViewManagement = false,
+    compact = false
+  } = props;
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const sz = knobProps.sizeToken;
+  const popoverMaxWidth = sz === "$3" ? 240 : sz === "$5" ? 360 : 300;
+  const scrollMaxHeight = sz === "$3" ? 320 : sz === "$5" ? 480 : 400;
+  const [showOptions, setShowOptions] = (0, import_react2.useState)(false);
+  const [columnWidths, setColumnWidths] = (0, import_react2.useState)(Object.fromEntries(columns.filter(col => col.width).map(col => [col.id, col.width])));
+  const handleColumnWidthChange = (columnId, width) => {
+    const newWidths = {
+      ...columnWidths,
+      [columnId]: width
+    };
+    setColumnWidths(newWidths);
+    onColumnSizingChange(newWidths);
+  };
+  const visibleColumns = columns.filter(col => col.visible);
+  const hiddenColumns = columns.filter(col => !col.visible);
+  if (compact) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
+      open: showOptions,
+      onOpenChange: setShowOptions,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
+        asChild: true,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          size: knobProps.sizeToken,
+          variant: "outlined",
+          icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.GearIcon, {
+            size: 16
+          }),
+          "aria-label": "Open table view options",
+          "aria-expanded": showOptions,
+          "aria-haspopup": "dialog",
+          children: "View"
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Content, {
+        ...knobProps.borderRadius,
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        enterStyle: {
+          x: 0,
+          y: -10,
+          opacity: 0
+        },
+        exitStyle: {
+          x: 0,
+          y: -10,
+          opacity: 0
+        },
+        transition: ["quick", {
+          opacity: {
+            overshootClamping: true
+          }
+        }],
+        maxWidth: popoverMaxWidth,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ViewOptionsContent, {
+          columns,
+          visibleColumns,
+          hiddenColumns,
+          columnWidths,
+          views,
+          activeViewId,
+          onColumnVisibilityChange,
+          onColumnWidthChange: handleColumnWidthChange,
+          onColumnOrderChange,
+          onColumnSizingChange,
+          onSaveView,
+          onLoadView,
+          onResetToDefault,
+          showColumnVisibility,
+          showColumnOrdering,
+          showColumnResizing,
+          showViewManagement,
+          onClose: () => setShowOptions(false)
+        })
+      })]
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    ...knobProps.borderRadius,
+    ...knobProps.panelPadding,
+    ...{
+      backgroundColor: "$background"
+    },
+    borderColor: "$borderColor",
+    "aria-label": "Table view options",
+    "aria-live": "polite",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      alignItems: "center",
+      justifyContent: "space-between",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        alignItems: "center",
+        gap: "$2",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.GearIcon, {
+          size: 16
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          fontSize: "$4",
+          fontWeight: "600",
+          children: "View Options"
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        size: knobProps.sizeToken,
+        variant: "outlined",
+        onPress: onResetToDefault,
+        icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ArrowCounterClockwiseIcon, {
+          size: 16
+        }),
+        children: "Reset"
+      })]
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {}), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+      maxHeight: scrollMaxHeight,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        gap: "$4",
+        children: [showColumnVisibility && /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColumnVisibilitySection, {
+          visibleColumns,
+          hiddenColumns,
+          onColumnVisibilityChange
+        }), showColumnResizing && /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColumnResizingSection, {
+          columns: columns.filter(col => col.canResize),
+          columnWidths,
+          onColumnWidthChange: handleColumnWidthChange
+        }), showViewManagement && /* @__PURE__ */(0, import_jsx_runtime.jsx)(ViewManagementSection, {
+          views,
+          activeViewId,
+          onSaveView,
+          onLoadView
+        })]
+      })
+    })]
+  });
+}
+function ViewOptionsContent({
+  visibleColumns,
+  hiddenColumns,
+  onColumnVisibilityChange,
+  onResetToDefault,
+  showColumnVisibility,
+  onClose
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const sz = knobProps.sizeToken;
+  const compactScrollMaxHeight = sz === "$3" ? 240 : sz === "$5" ? 360 : 300;
+  const handleVisibilityChange = onColumnVisibilityChange ?? (() => {});
+  const handleResetToDefault = onResetToDefault ?? (() => {});
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    ...knobProps.panelPadding,
+    gap: "$4",
+    minWidth: 250,
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontSize: "$4",
+      fontWeight: "600",
+      children: "View Options"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+      maxHeight: compactScrollMaxHeight,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        gap: "$4",
+        children: [showColumnVisibility && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$2",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontSize: "$3",
+            fontWeight: "500",
+            children: "Column Visibility"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+            gap: "$1",
+            children: [visibleColumns.map(column => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+              alignItems: "center",
+              justifyContent: "space-between",
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+                alignItems: "center",
+                gap: "$2",
+                children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.EyeIcon, {
+                  size: 16,
+                  color: "$color10"
+                }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                  fontSize: "$3",
+                  children: column.label
+                })]
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Switch, {
+                size: "$2",
+                checked: column.visible,
+                onCheckedChange: checked => handleVisibilityChange(column.id, checked)
+              })]
+            }, column.id)), hiddenColumns.map(column => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+              alignItems: "center",
+              justifyContent: "space-between",
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+                alignItems: "center",
+                gap: "$2",
+                children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.EyeSlashIcon, {
+                  size: 16,
+                  color: "$color10"
+                }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                  fontSize: "$3",
+                  color: "$color10",
+                  children: column.label
+                })]
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Switch, {
+                size: "$2",
+                checked: column.visible,
+                onCheckedChange: checked => handleVisibilityChange(column.id, checked)
+              })]
+            }, column.id))]
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+          gap: "$2",
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+            size: knobProps.sizeToken,
+            variant: "outlined",
+            onPress: handleResetToDefault,
+            icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ArrowCounterClockwiseIcon, {
+              size: 16
+            }),
+            children: "Reset to Default"
+          })
+        })]
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      gap: "$2",
+      justifyContent: "flex-end",
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+        size: knobProps.sizeToken,
+        variant: "outlined",
+        onPress: onClose,
+        children: "Close"
+      })
+    })]
+  });
+}
+function ColumnVisibilitySection({
+  visibleColumns,
+  hiddenColumns,
+  onColumnVisibilityChange
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    gap: "$3",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontSize: "$4",
+      fontWeight: "600",
+      children: "Column Visibility"
+    }), visibleColumns.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      gap: "$2",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontSize: "$3",
+        fontWeight: "500",
+        color: "$color10",
+        children: "Visible Columns"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        gap: "$1",
+        children: visibleColumns.map(column => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          alignItems: "center",
+          justifyContent: "space-between",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+            alignItems: "center",
+            gap: "$2",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.EyeIcon, {
+              size: 16,
+              color: "$green10"
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              fontSize: "$3",
+              children: column.label
+            })]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Switch, {
+            size: "$2",
+            checked: column.visible,
+            onCheckedChange: checked => onColumnVisibilityChange(column.id, checked)
+          })]
+        }, column.id))
+      })]
+    }), hiddenColumns.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      gap: "$2",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+        fontSize: "$3",
+        fontWeight: "500",
+        color: "$color10",
+        children: "Hidden Columns"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        gap: "$1",
+        children: hiddenColumns.map(column => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          alignItems: "center",
+          justifyContent: "space-between",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+            alignItems: "center",
+            gap: "$2",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.EyeSlashIcon, {
+              size: 16,
+              color: "$color10"
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              fontSize: "$3",
+              color: "$color10",
+              children: column.label
+            })]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Switch, {
+            size: "$2",
+            checked: column.visible,
+            onCheckedChange: checked => onColumnVisibilityChange(column.id, checked)
+          })]
+        }, column.id))
+      })]
+    })]
+  });
+}
+function ColumnResizingSection({
+  columns,
+  columnWidths,
+  onColumnWidthChange
+}) {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    gap: "$3",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontSize: "$4",
+      fontWeight: "600",
+      children: "Column Widths"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      gap: "$3",
+      children: columns.map(column => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        gap: "$2",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          fontSize: "$3",
+          fontWeight: "500",
+          children: column.label
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          alignItems: "center",
+          gap: "$3",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+            flex: 1,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Slider, {
+              value: [columnWidths[column.id] || column.width || 100],
+              onValueChange: value => onColumnWidthChange(column.id, value[0]),
+              min: 50,
+              max: 300,
+              step: 10
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+            fontSize: "$3",
+            color: "$color10",
+            minWidth: 40,
+            textAlign: "right",
+            children: [columnWidths[column.id] || column.width || 100, "px"]
+          })]
+        })]
+      }, column.id))
+    })]
+  });
+}
+function ViewManagementSection({
+  views,
+  activeViewId,
+  onSaveView,
+  onLoadView
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const [showSaveDialog, setShowSaveDialog] = (0, import_react2.useState)(false);
+  const [viewName, setViewName] = (0, import_react2.useState)("");
+  const handleSaveView = () => {
+    if (viewName.trim()) {
+      onSaveView(viewName.trim());
+      setViewName("");
+      setShowSaveDialog(false);
+    }
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    gap: "$3",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontSize: "$4",
+      fontWeight: "600",
+      children: "Saved Views"
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
+      open: showSaveDialog,
+      onOpenChange: setShowSaveDialog,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
+        asChild: true,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          size: knobProps.sizeToken,
+          variant: "outlined",
+          icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FloppyDiskIcon, {
+            size: 16
+          }),
+          children: "Save Current View"
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Content, {
+        ...knobProps.borderRadius,
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        enterStyle: {
+          x: 0,
+          y: -10,
+          opacity: 0
+        },
+        exitStyle: {
+          x: 0,
+          y: -10,
+          opacity: 0
+        },
+        transition: ["quick", {
+          opacity: {
+            overshootClamping: true
+          }
+        }],
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          ...knobProps.panelPadding,
+          gap: "$3",
+          minWidth: 250,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            fontSize: "$4",
+            fontWeight: "500",
+            children: "Save View"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
+            placeholder: "Enter view name...",
+            value: viewName,
+            onChangeText: setViewName,
+            inputProps: {
+              onKeyDown: e => {
+                if (e.key === "Enter" && viewName.trim()) handleSaveView();
+              }
+            }
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+            gap: "$2",
+            justifyContent: "flex-end",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+              size: knobProps.sizeToken,
+              variant: "outlined",
+              onPress: () => setShowSaveDialog(false),
+              children: "Cancel"
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+              size: knobProps.sizeToken,
+              onPress: handleSaveView,
+              disabled: !viewName.trim(),
+              children: "Save"
+            })]
+          })]
+        })
+      })]
+    }), views.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      gap: "$1",
+      children: views.map(view => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "$2",
+        backgroundColor: activeViewId === view.id ? "$color2" : "transparent",
+        borderRadius: "$2",
+        hoverStyle: {
+          backgroundColor: "$color1"
+        },
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          fontSize: "$3",
+          children: view.name
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
+          size: "$2",
+          variant: "outlined",
+          onPress: () => onLoadView(view.id),
+          disabled: activeViewId === view.id,
+          children: "Load"
+        })]
+      }, view.id))
+    })]
+  });
+}