@extend-ai/react-xlsx 0.1.0 → 0.2.0

package/dist/index.d.cts

@@ -731,6 +731,7 @@ interface XlsxTableHeaderMenuRenderProps {
 interface XlsxViewerProviderProps extends UseXlsxViewerControllerOptions {
     children: React.ReactNode;
     controller?: XlsxViewerController;
+    isDark?: boolean;
 }
 interface XlsxViewerProps extends UseXlsxViewerControllerOptions {
     className?: string;
@@ -739,6 +740,7 @@ interface XlsxViewerProps extends UseXlsxViewerControllerOptions {
     errorState?: React.ReactNode | ((error: Error) => React.ReactNode);
     fileTooLargeState?: React.ReactNode | ((props: XlsxFileTooLargeRenderProps) => React.ReactNode);
     height?: React.CSSProperties["height"];
+    isDark?: boolean;
     loadingComponent?: React.ReactElement;
     loadingState?: React.ReactNode;
     renderChartLoading?: (props: XlsxChartLoadingRenderProps) => React.ReactNode;
@@ -762,7 +764,7 @@ declare class XlsxFileSizeLimitExceededError extends Error {
 }
 declare function useXlsxViewerController(options: UseXlsxViewerControllerOptions): XlsxViewerController;
 
-declare function XlsxViewerProvider({ children, controller, ...options }: XlsxViewerProviderProps): react_jsx_runtime.JSX.Element;
+declare function XlsxViewerProvider({ children, controller, isDark, ...options }: XlsxViewerProviderProps): react_jsx_runtime.JSX.Element;
 declare function useXlsxViewer(): XlsxViewerController;
 declare function useXlsxViewerSelection(): XlsxViewerSelection;
 declare function useXlsxViewerZoom(): XlsxViewerZoom;

package/dist/index.d.ts

@@ -731,6 +731,7 @@ interface XlsxTableHeaderMenuRenderProps {
 interface XlsxViewerProviderProps extends UseXlsxViewerControllerOptions {
     children: React.ReactNode;
     controller?: XlsxViewerController;
+    isDark?: boolean;
 }
 interface XlsxViewerProps extends UseXlsxViewerControllerOptions {
     className?: string;
@@ -739,6 +740,7 @@ interface XlsxViewerProps extends UseXlsxViewerControllerOptions {
     errorState?: React.ReactNode | ((error: Error) => React.ReactNode);
     fileTooLargeState?: React.ReactNode | ((props: XlsxFileTooLargeRenderProps) => React.ReactNode);
     height?: React.CSSProperties["height"];
+    isDark?: boolean;
     loadingComponent?: React.ReactElement;
     loadingState?: React.ReactNode;
     renderChartLoading?: (props: XlsxChartLoadingRenderProps) => React.ReactNode;
@@ -762,7 +764,7 @@ declare class XlsxFileSizeLimitExceededError extends Error {
 }
 declare function useXlsxViewerController(options: UseXlsxViewerControllerOptions): XlsxViewerController;
 
-declare function XlsxViewerProvider({ children, controller, ...options }: XlsxViewerProviderProps): react_jsx_runtime.JSX.Element;
+declare function XlsxViewerProvider({ children, controller, isDark, ...options }: XlsxViewerProviderProps): react_jsx_runtime.JSX.Element;
 declare function useXlsxViewer(): XlsxViewerController;
 declare function useXlsxViewerSelection(): XlsxViewerSelection;
 declare function useXlsxViewerZoom(): XlsxViewerZoom;

package/dist/index.js

@@ -15981,6 +15981,7 @@ function darkenColor3(color, ratio) {
   return mixRgbColor3(color, "#000000", ratio);
 }
 var ViewerContext = React4.createContext(null);
+var ViewerAppearanceContext = React4.createContext({ isDark: false });
 function classNames(...values) {
   return values.filter(Boolean).join(" ");
 }
@@ -17242,40 +17243,8 @@ function resolveImageHandleStyle(position, stroke, surface) {
   }
   return style;
 }
-function resolveIsDarkMode() {
-  if (typeof document === "undefined") {
-    return false;
-  }
-  const classList = document.documentElement.classList;
-  if (classList.contains("dark")) {
-    return true;
-  }
-  if (classList.contains("light")) {
-    return false;
-  }
-  return typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches;
-}
-function useViewerPalette() {
-  const [isDarkMode, setIsDarkMode] = React4.useState(resolveIsDarkMode);
-  React4.useEffect(() => {
-    if (typeof window === "undefined") {
-      return;
-    }
-    const update = () => setIsDarkMode(resolveIsDarkMode());
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const observer = new MutationObserver(update);
-    observer.observe(document.documentElement, {
-      attributeFilter: ["class", "data-theme"],
-      attributes: true
-    });
-    mediaQuery.addEventListener?.("change", update);
-    update();
-    return () => {
-      observer.disconnect();
-      mediaQuery.removeEventListener?.("change", update);
-    };
-  }, []);
-  return isDarkMode ? DARK_PALETTE : LIGHT_PALETTE;
+function useViewerPalette(isDark = false) {
+  return isDark ? DARK_PALETTE : LIGHT_PALETTE;
 }
 function columnLabel2(col) {
   let label = "";
@@ -18120,6 +18089,57 @@ function DefaultTableHeaderMenu({
     }
   );
 }
+function SegmentedControl({
+  items,
+  onValueChange,
+  palette,
+  value
+}) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "aria-label": "Workbook sheets",
+      role: "tablist",
+      style: {
+        alignItems: "center",
+        backgroundColor: palette.sheetInactiveSurface,
+        border: `1px solid ${palette.strongBorder}`,
+        borderRadius: 10,
+        display: "inline-flex",
+        gap: 2,
+        minHeight: 36,
+        padding: 2
+      },
+      children: items.map((item) => {
+        const selected = item.id === value;
+        return /* @__PURE__ */ jsx3(
+          "button",
+          {
+            "aria-selected": selected,
+            onClick: () => onValueChange(item.id),
+            role: "tab",
+            style: {
+              backgroundColor: selected ? palette.sheetActiveSurface : "transparent",
+              border: "none",
+              borderRadius: 8,
+              boxShadow: selected ? palette.shadow : "none",
+              color: selected ? palette.sheetActiveText : palette.sheetInactiveText,
+              cursor: "pointer",
+              fontSize: 12,
+              fontWeight: selected ? 600 : 500,
+              padding: "7px 12px",
+              transition: "background-color 120ms ease, color 120ms ease, box-shadow 120ms ease",
+              whiteSpace: "nowrap"
+            },
+            type: "button",
+            children: item.label
+          },
+          item.id
+        );
+      })
+    }
+  );
+}
 function DefaultToolbar({ controller, palette }) {
   const {
     activeTabIndex,
@@ -18241,19 +18261,26 @@ function DefaultToolbar({ controller, palette }) {
             canDownload ? /* @__PURE__ */ jsx3(
               "button",
               {
+                "aria-label": "Download workbook",
                 onClick: download,
                 style: {
+                  alignItems: "center",
                   background: palette.buttonSurface,
                   border: `1px solid ${palette.strongBorder}`,
                   borderRadius: 8,
                   color: palette.buttonText,
                   cursor: "pointer",
-                  fontSize: 12,
+                  display: "inline-flex",
+                  fontSize: 16,
                   fontWeight: 500,
-                  padding: "6px 10px"
+                  height: 32,
+                  justifyContent: "center",
+                  padding: 0,
+                  width: 32
                 },
+                title: "Download workbook",
                 type: "button",
-                children: "Download"
+                children: "\u2193"
               }
             ) : null
           ] })
@@ -18266,32 +18293,18 @@ function DefaultToolbar({ controller, palette }) {
         style: {
           backgroundColor: palette.subtleSurface,
           borderBottom: `1px solid ${palette.border}`,
-          display: "flex",
-          gap: 6,
           overflowX: "auto",
           padding: "8px 12px"
         },
-        children: tabs.map((tab, index) => /* @__PURE__ */ jsx3(
-          "button",
+        children: /* @__PURE__ */ jsx3(
+          SegmentedControl,
           {
-            onClick: () => setActiveTabIndex(index),
-            style: {
-              backgroundColor: index === activeTabIndex ? palette.sheetActiveSurface : palette.sheetInactiveSurface,
-              border: `1px solid ${index === activeTabIndex ? palette.strongBorder : "transparent"}`,
-              borderRadius: 8,
-              boxShadow: index === activeTabIndex ? palette.shadow : "none",
-              color: index === activeTabIndex ? palette.sheetActiveText : palette.sheetInactiveText,
-              cursor: "pointer",
-              fontSize: 12,
-              fontWeight: 500,
-              padding: "6px 12px",
-              whiteSpace: "nowrap"
-            },
-            type: "button",
-            children: tab.name
-          },
-          tab.id
-        ))
+            items: tabs.map((tab, index) => ({ id: String(index), label: tab.name })),
+            onValueChange: (value) => setActiveTabIndex(Number(value)),
+            palette,
+            value: String(activeTabIndex)
+          }
+        )
       }
     ) : null
   ] });
@@ -21556,7 +21569,7 @@ function XlsxGrid({
     selectionFillColor,
     selectionHeaderColor
   });
-  const selectionBorderWidth = 1.5;
+  const selectionBorderWidth = 1;
   const rowColSpan = renderedCols.length + 1 + (leadingColumnSpacerWidth > 0 ? 1 : 0) + (trailingColumnSpacerWidth > 0 ? 1 : 0);
   const gutterSeparatorShadow = `inset -1px 0 0 ${palette.border}, inset 0 -1px 0 ${palette.border}`;
   const headerCellStyle = {
@@ -21779,7 +21792,7 @@ function XlsxGrid({
             "div",
             {
               style: {
-                border: `1.5px solid ${selectionStroke}`,
+                border: `1px solid ${selectionStroke}`,
                 boxShadow: `0 0 0 1px ${palette.surface}`,
                 boxSizing: "border-box",
                 inset: 0,
@@ -21810,7 +21823,7 @@ function XlsxGrid({
           "div",
           {
             style: {
-              border: `1.5px solid ${selectionStroke}`,
+              border: `1px solid ${selectionStroke}`,
               boxShadow: `0 0 0 1px ${palette.surface}`,
               boxSizing: "border-box",
               inset: 0,
@@ -21883,7 +21896,7 @@ function XlsxGrid({
           "div",
           {
             style: {
-              border: `1.5px solid ${selectionStroke}`,
+              border: `1px solid ${selectionStroke}`,
               boxShadow: `0 0 0 1px ${palette.surface}`,
               boxSizing: "border-box",
               inset: 0,
@@ -22701,7 +22714,8 @@ function XlsxViewerInner({
   emptyState,
   errorState,
   fileTooLargeState,
-  height = "100%",
+  height,
+  isDark = false,
   loadingComponent,
   loadingState,
   renderChartLoading,
@@ -22716,15 +22730,14 @@ function XlsxViewerInner({
   showDefaultToolbar = true,
   toolbar
 }) {
-  const palette = useViewerPalette();
-  return /* @__PURE__ */ jsx3(ViewerContext.Provider, { value: controller, children: /* @__PURE__ */ jsxs3(
+  const palette = useViewerPalette(isDark);
+  return /* @__PURE__ */ jsx3(ViewerAppearanceContext.Provider, { value: { isDark }, children: /* @__PURE__ */ jsx3(ViewerContext.Provider, { value: controller, children: /* @__PURE__ */ jsxs3(
     "div",
     {
       className: classNames("react-xlsx-viewer", className),
       style: {
         blockSize: height,
         backgroundColor: palette.surface,
-        border: `1px solid ${palette.border}`,
         borderRadius: rounded ? 12 : 0,
         color: palette.text,
         display: "flex",
@@ -22762,7 +22775,7 @@ function XlsxViewerInner({
         ) })
       ]
     }
-  ) });
+  ) }) });
 }
 function XlsxViewerWithInlineController(props) {
   const controller = useXlsxViewerController(props);
@@ -22770,16 +22783,17 @@ function XlsxViewerWithInlineController(props) {
 }
 function XlsxViewerProviderWithInlineController({
   children,
+  isDark = false,
   ...options
 }) {
   const controller = useXlsxViewerController(options);
-  return /* @__PURE__ */ jsx3(ViewerContext.Provider, { value: controller, children });
+  return /* @__PURE__ */ jsx3(ViewerAppearanceContext.Provider, { value: { isDark }, children: /* @__PURE__ */ jsx3(ViewerContext.Provider, { value: controller, children }) });
 }
-function XlsxViewerProvider({ children, controller, ...options }) {
+function XlsxViewerProvider({ children, controller, isDark = false, ...options }) {
   if (controller) {
-    return /* @__PURE__ */ jsx3(ViewerContext.Provider, { value: controller, children });
+    return /* @__PURE__ */ jsx3(ViewerAppearanceContext.Provider, { value: { isDark }, children: /* @__PURE__ */ jsx3(ViewerContext.Provider, { value: controller, children }) });
   }
-  return /* @__PURE__ */ jsx3(XlsxViewerProviderWithInlineController, { ...options, children });
+  return /* @__PURE__ */ jsx3(XlsxViewerProviderWithInlineController, { ...options, isDark, children });
 }
 function useXlsxViewer() {
   const context = React4.useContext(ViewerContext);
@@ -23105,7 +23119,8 @@ function XlsxViewer(props) {
 }
 function DefaultXlsxToolbar() {
   const controller = useXlsxViewer();
-  const palette = useViewerPalette();
+  const { isDark } = React4.useContext(ViewerAppearanceContext);
+  const palette = useViewerPalette(isDark);
   return /* @__PURE__ */ jsx3(DefaultToolbar, { controller, palette });
 }
 export {