@multiplatform.one/table 6.1.0 → 6.4.0

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

@@ -29,8 +29,10 @@ 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_components = require("@multiplatform.one/components");
 var import_tamagui = require("tamagui");
 var import_DataTableStateContext = require("../DataTable/DataTableStateContext.cjs");
+var import_t = require("../../shared/t.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 function DataTableViewOptions(props) {
   const ctx = (0, import_DataTableStateContext.useDataTableState)();
@@ -77,10 +79,10 @@ function DataTableViewOptions(props) {
   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, {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.DropdownMenu, {
       open: showOptions,
       onOpenChange: setShowOptions,
-      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Trigger, {
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Trigger, {
         asChild: true,
         children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
           size: knobProps.sizeToken,
@@ -88,63 +90,41 @@ function DataTableViewOptions(props) {
           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"
+          "aria-label": (0, import_t.t)("Open table view options"),
+          children: (0, import_t.t)("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
-          }
-        }],
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.DropdownMenu.Content, {
+        maxHeight: scrollMaxHeight,
         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)
-        })
+        children: [showColumnVisibility && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Label, {
+            children: (0, import_t.t)("Column Visibility")
+          }), columns.map(column => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.CheckboxItem, {
+            checked: column.visible,
+            onCheckedChange: checked => onColumnVisibilityChange(column.id, checked),
+            children: column.label
+          }, column.id)), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Separator, {})]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.DropdownMenu.Item, {
+          icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ArrowCounterClockwiseIcon, {
+            size: 16
+          }),
+          closeOnSelect: false,
+          onSelect: onResetToDefault,
+          children: (0, import_t.t)("Reset to Default")
+        })]
       })]
     });
   }
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
     ...knobProps.borderRadius,
+    ...knobProps.containerRadius,
     ...knobProps.panelPadding,
+    ...knobProps.gap,
     ...{
       backgroundColor: "$background"
     },
     borderColor: "$borderColor",
-    "aria-label": "Table view options",
-    "aria-live": "polite",
+    "aria-label": (0, import_t.t)("Table view options"),
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
       alignItems: "center",
       justifyContent: "space-between",
@@ -156,7 +136,7 @@ function DataTableViewOptions(props) {
         }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
           fontSize: "$4",
           fontWeight: "600",
-          children: "View Options"
+          children: (0, import_t.t)("View Options")
         })]
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
         size: knobProps.sizeToken,
@@ -165,12 +145,13 @@ function DataTableViewOptions(props) {
         icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ArrowCounterClockwiseIcon, {
           size: 16
         }),
-        children: "Reset"
+        children: (0, import_t.t)("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",
+        ...knobProps.gapLg,
+        paddingRight: "$3",
         children: [showColumnVisibility && /* @__PURE__ */(0, import_jsx_runtime.jsx)(ColumnVisibilitySection, {
           visibleColumns,
           hiddenColumns,
@@ -189,123 +170,31 @@ function DataTableViewOptions(props) {
     })]
   });
 }
-function ViewOptionsContent({
+const VISIBILITY_TOGGLE_TARGET = 44;
+function ColumnVisibilitySection({
   visibleColumns,
   hiddenColumns,
-  onColumnVisibilityChange,
-  onResetToDefault,
-  showColumnVisibility,
-  onClose
+  onColumnVisibilityChange
 }) {
   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 ?? (() => {});
+  const theme = (0, import_tamagui.useTheme)();
+  const iconColor = theme.color11?.get();
+  const mutedIconColor = theme.color10?.get();
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-    ...knobProps.panelPadding,
-    gap: "$4",
-    minWidth: 250,
+    ...knobProps.gap,
     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"
+      children: (0, import_t.t)("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"
+        children: (0, import_t.t)("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, {
@@ -316,15 +205,20 @@ function ColumnVisibilitySection({
             gap: "$2",
             children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.EyeIcon, {
               size: 16,
-              color: "$green10"
+              color: iconColor
             }), /* @__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",
+            minTargetHeight: VISIBILITY_TOGGLE_TARGET,
             checked: column.visible,
-            onCheckedChange: checked => onColumnVisibilityChange(column.id, checked)
+            onChange: checked => onColumnVisibilityChange(column.id, checked),
+            switchProps: {
+              "aria-label": (0, import_t.t)("Show {{column}} column", {
+                column: column.label
+              })
+            }
           })]
         }, column.id))
       })]
@@ -334,7 +228,7 @@ function ColumnVisibilitySection({
         fontSize: "$3",
         fontWeight: "500",
         color: "$color10",
-        children: "Hidden Columns"
+        children: (0, import_t.t)("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, {
@@ -345,16 +239,21 @@ function ColumnVisibilitySection({
             gap: "$2",
             children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.EyeSlashIcon, {
               size: 16,
-              color: "$color10"
+              color: mutedIconColor
             }), /* @__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",
+            minTargetHeight: VISIBILITY_TOGGLE_TARGET,
             checked: column.visible,
-            onCheckedChange: checked => onColumnVisibilityChange(column.id, checked)
+            onChange: checked => onColumnVisibilityChange(column.id, checked),
+            switchProps: {
+              "aria-label": (0, import_t.t)("Show {{column}} column", {
+                column: column.label
+              })
+            }
           })]
         }, column.id))
       })]
@@ -371,7 +270,7 @@ function ColumnResizingSection({
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
       fontSize: "$4",
       fontWeight: "600",
-      children: "Column Widths"
+      children: (0, import_t.t)("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, {
@@ -390,14 +289,19 @@ function ColumnResizingSection({
               onValueChange: value => onColumnWidthChange(column.id, value[0]),
               min: 50,
               max: 300,
-              step: 10
+              step: 10,
+              "aria-label": (0, import_t.t)("{{column}} column width", {
+                column: column.label
+              })
             })
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
             fontSize: "$3",
             color: "$color10",
             minWidth: 40,
             textAlign: "right",
-            children: [columnWidths[column.id] || column.width || 100, "px"]
+            children: (0, import_t.t)("{{width}}px", {
+              width: columnWidths[column.id] || column.width || 100
+            })
           })]
         })]
       }, column.id))
@@ -427,7 +331,7 @@ function ViewManagementSection({
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
       fontSize: "$4",
       fontWeight: "600",
-      children: "Saved Views"
+      children: (0, import_t.t)("Saved Views")
     }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Popover, {
       open: showSaveDialog,
       onOpenChange: setShowSaveDialog,
@@ -439,7 +343,7 @@ function ViewManagementSection({
           icon: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FloppyDiskIcon, {
             size: 16
           }),
-          children: "Save Current View"
+          children: (0, import_t.t)("Save Current View")
         })
       }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Popover.Content, {
         ...knobProps.borderRadius,
@@ -467,9 +371,9 @@ function ViewManagementSection({
           children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
             fontSize: "$4",
             fontWeight: "500",
-            children: "Save View"
+            children: (0, import_t.t)("Save View")
           }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
-            placeholder: "Enter view name...",
+            placeholder: (0, import_t.t)("Enter view name..."),
             value: viewName,
             onChangeText: setViewName,
             inputProps: {
@@ -484,12 +388,12 @@ function ViewManagementSection({
               size: knobProps.sizeToken,
               variant: "outlined",
               onPress: () => setShowSaveDialog(false),
-              children: "Cancel"
+              children: (0, import_t.t)("Cancel")
             }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Button, {
               size: knobProps.sizeToken,
               onPress: handleSaveView,
               disabled: !viewName.trim(),
-              children: "Save"
+              children: (0, import_t.t)("Save")
             })]
           })]
         })
@@ -513,7 +417,7 @@ function ViewManagementSection({
           variant: "outlined",
           onPress: () => onLoadView(view.id),
           disabled: activeViewId === view.id,
-          children: "Load"
+          children: (0, import_t.t)("Load")
         })]
       }, view.id))
     })]