schummar-table 0.39.2 → 0.40.0

package/dist/index.d.cts

@@ -1,8 +1,8 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as React from 'react';
 import { ComponentType, ReactNode, HTMLProps } from 'react';
-import { T as TableTheme, C as CommonFilterProps, S as SerializableValue, a as TableProps, F as FilterImplementation, M as MemoizedTableTheme, I as Id, b as TableItem, c as InternalTableState, P as PartialTableTheme } from './types-CBQ-mEqF.cjs';
-export { e as Column, f as FunctionWithDeps, g as InternalColumn, h as Sort, i as SortDirection, d as TableStateStorage } from './types-CBQ-mEqF.cjs';
+import { T as TableTheme, C as CommonFilterProps, S as SerializableValue, a as TableProps, F as FilterImplementation, M as MemoizedTableTheme, I as Id, b as TableItem, c as InternalTableState, P as PartialTableTheme } from './types-CYMVvUGJ.cjs';
+export { e as Column, f as FunctionWithDeps, g as InternalColumn, h as Sort, i as SortDirection, d as TableStateStorage } from './types-CYMVvUGJ.cjs';
 import { Store } from 'schummar-state/react';
 import { E as ExporterEntry } from './exporter-u6SatTo6.cjs';
 import '@emotion/react';

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as React from 'react';
 import { ComponentType, ReactNode, HTMLProps } from 'react';
-import { T as TableTheme, C as CommonFilterProps, S as SerializableValue, a as TableProps, F as FilterImplementation, M as MemoizedTableTheme, I as Id, b as TableItem, c as InternalTableState, P as PartialTableTheme } from './types-DXWvQ10Y.js';
-export { e as Column, f as FunctionWithDeps, g as InternalColumn, h as Sort, i as SortDirection, d as TableStateStorage } from './types-DXWvQ10Y.js';
+import { T as TableTheme, C as CommonFilterProps, S as SerializableValue, a as TableProps, F as FilterImplementation, M as MemoizedTableTheme, I as Id, b as TableItem, c as InternalTableState, P as PartialTableTheme } from './types-3d4ARU6a.js';
+export { e as Column, f as FunctionWithDeps, g as InternalColumn, h as Sort, i as SortDirection, d as TableStateStorage } from './types-3d4ARU6a.js';
 import { Store } from 'schummar-state/react';
 import { E as ExporterEntry } from './exporter-u6SatTo6.js';
 import '@emotion/react';

package/dist/index.js

@@ -5,13 +5,10 @@ import {
   TableSettingsContext,
   TableSettingsProvider,
   configureTableTheme,
-  darkGray,
   defaultClasses,
   globalTableTheme,
-  gray,
-  lightGray,
   mergeThemes
-} from "./chunk-YWWFSINO.js";
+} from "./chunk-E2DUBLYQ.js";
 import "./chunk-WFCJ3D3G.js";
 import {
   __async,
@@ -47,7 +44,11 @@ function useColumnContext() {
 var defaultColors = {
   primary: { main: "#1976d2", light: "#42a5f5", contrastText: "#fff" },
   secondary: { main: "#9c27b0", light: "#ba68c8", contrastText: "#fff" },
-  blocked: { main: "#f44336", light: "#f26257", contrastText: "#fff" }
+  blocked: { main: "#f44336", light: "#f26257", contrastText: "#fff" },
+  background: "#ffffff",
+  text: "inherit",
+  border: "#777",
+  borderLight: "#eee"
 };
 
 // src/components/spinnner.tsx
@@ -189,9 +190,9 @@ var Button = (_a) => {
           }
         },
         variant === "outlined" && {
-          border: `1px solid ${darkGray}`,
+          border: "1px solid var(--table-button-border, var(--table-border, #777777))",
           "&:disabled": {
-            borderColor: lightGray
+            borderColor: "var(--table-button-border-disabled, #eeeeee)"
           }
         },
         variant === "contained" && {
@@ -319,7 +320,7 @@ var TextField = (_a) => {
           flex: 1,
           display: "flex",
           alignItems: "center",
-          border: `1px solid ${darkGray}`,
+          border: "1px solid var(--table-textfield-border, var(--table-border, #777777))",
           borderRadius: 4
         },
         focus && { border: "2px solid var(--primaryMain)", margin: -1 }
@@ -771,7 +772,11 @@ function useCssVariables() {
       "--secondaryContrastText": colors.secondary.contrastText,
       "--blockedMain": colors.blocked.main,
       "--blockedLight": colors.blocked.light,
-      "--blockedContrastText": colors.blocked.contrastText
+      "--blockedContrastText": colors.blocked.contrastText,
+      "--table-background-color": colors.background,
+      "--table-text-color": colors.text,
+      "--table-border-color": colors.border,
+      "--table-border-light-color": colors.borderLight
     };
   });
 }
@@ -887,7 +892,18 @@ function AutoFocusTextField(props) {
       ref.current.focus();
     }
   }, [isActive]);
-  return /* @__PURE__ */ jsx10(TextField2, __spreadProps(__spreadValues({}, props), { inputRef: ref }));
+  return /* @__PURE__ */ jsx10(
+    TextField2,
+    __spreadProps(__spreadValues({}, props), {
+      inputRef: ref,
+      css: {
+        input: {
+          backgroundColor: "inherit",
+          color: "inherit"
+        }
+      }
+    })
+  );
 }
 
 // src/hooks/useFilter.ts
@@ -1100,6 +1116,12 @@ function DateInput({
             borderBottom: "2px solid transparent",
             outline: "none",
             fontSize: "inherit",
+            backgroundColor: "inherit",
+            color: "inherit",
+            "::placeholder": {
+              color: "inherit",
+              opacity: 0.5
+            },
             "&:focus": {
               borderBottom: "2px solid var(--primaryMain)"
             }
@@ -1301,10 +1323,11 @@ function DatePicker(props) {
         border: "none",
         background: "transparent",
         cursor: disabled ? void 0 : "pointer",
-        font: "inherit"
+        font: "inherit",
+        color: "inherit"
       },
       (prevMonth || nextMonth) && {
-        color: gray
+        color: "var(--date-picker-disemphasized, #bdbdbd)"
       },
       today2 && {
         outline: "1px solid var(--secondaryMain)"
@@ -1362,6 +1385,9 @@ function DatePicker(props) {
         {
           variant: "text",
           type: "button",
+          css: {
+            color: "inherit"
+          },
           onClick: () => {
             setDirty(void 0);
             if (value2 instanceof Function) {
@@ -1431,185 +1457,197 @@ function DatePicker(props) {
     const { format } = new Intl.DateTimeFormat(locale, { year: "numeric" });
     return (year) => format(new Date(year, 0, 1));
   }, [locale]);
-  return /* @__PURE__ */ jsxs8("div", { css: cssVariables, children: [
-    /* @__PURE__ */ jsxs8(
-      "div",
-      {
-        css: {
-          display: "grid",
-          gridAutoFlow: "column",
-          justifyContent: "center",
-          alignItems: "baseline",
-          gap: "var(--spacing)"
-        },
-        children: [
-          /* @__PURE__ */ jsx13(
-            DateInput,
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      css: [
+        cssVariables,
+        {
+          color: "var(--table-text-color)"
+        }
+      ],
+      children: [
+        /* @__PURE__ */ jsxs8(
+          "div",
+          {
+            css: {
+              display: "grid",
+              gridAutoFlow: "column",
+              justifyContent: "center",
+              alignItems: "baseline",
+              gap: "var(--spacing)"
+            },
+            children: [
+              /* @__PURE__ */ jsx13(
+                DateInput,
+                {
+                  value: min != null ? min : null,
+                  onChange: (date) => set(date != null ? date : void 0, max, "min"),
+                  locale
+                }
+              ),
+              rangeSelect && /* @__PURE__ */ jsxs8(Fragment4, { children: [
+                " - ",
+                /* @__PURE__ */ jsx13(
+                  DateInput,
+                  {
+                    value: max != null ? max : null,
+                    onChange: (date) => set(min, date != null ? date : void 0, "max"),
+                    locale
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        calendars.map(({ month, year, weeks }) => /* @__PURE__ */ jsxs8("div", { css: { display: "grid" }, children: [
+          /* @__PURE__ */ jsxs8(
+            "div",
             {
-              value: min != null ? min : null,
-              onChange: (date) => set(date != null ? date : void 0, max, "min"),
-              locale
+              css: {
+                margin: "calc(var(--spacing) * 4) 0",
+                display: "grid",
+                gridAutoFlow: "column",
+                justifyContent: "space-between",
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsx13(IconButton2, __spreadProps(__spreadValues({ type: "button" }, getBackProps({ calendars })), { children: /* @__PURE__ */ jsx13(ChevronRight2, { css: { transform: "rotate3d(0, 0, 1, 180deg)" } }) })),
+                /* @__PURE__ */ jsxs8("div", { css: { display: "flex" }, children: [
+                  formatMonth(month),
+                  " ",
+                  formatYear(year)
+                ] }),
+                /* @__PURE__ */ jsx13(IconButton2, __spreadProps(__spreadValues({ type: "button" }, getForwardProps({ calendars })), { children: /* @__PURE__ */ jsx13(ChevronRight2, {}) }))
+              ]
             }
           ),
-          rangeSelect && /* @__PURE__ */ jsxs8(Fragment4, { children: [
-            " - ",
-            /* @__PURE__ */ jsx13(
-              DateInput,
-              {
-                value: max != null ? max : null,
-                onChange: (date) => set(min, date != null ? date : void 0, "max"),
-                locale
-              }
-            )
-          ] })
-        ]
-      }
-    ),
-    calendars.map(({ month, year, weeks }) => /* @__PURE__ */ jsxs8("div", { css: { display: "grid" }, children: [
-      /* @__PURE__ */ jsxs8(
-        "div",
-        {
-          css: {
-            margin: "calc(var(--spacing) * 4) 0",
-            display: "grid",
-            gridAutoFlow: "column",
-            justifyContent: "space-between",
-            alignItems: "center"
-          },
-          children: [
-            /* @__PURE__ */ jsx13(IconButton2, __spreadProps(__spreadValues({ type: "button" }, getBackProps({ calendars })), { children: /* @__PURE__ */ jsx13(ChevronRight2, { css: { transform: "rotate3d(0, 0, 1, 180deg)" } }) })),
-            /* @__PURE__ */ jsxs8("div", { css: { display: "flex" }, children: [
-              formatMonth(month),
-              " ",
-              formatYear(year)
-            ] }),
-            /* @__PURE__ */ jsx13(IconButton2, __spreadProps(__spreadValues({ type: "button" }, getForwardProps({ calendars })), { children: /* @__PURE__ */ jsx13(ChevronRight2, {}) }))
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs8(
-        "div",
-        {
-          css: {
-            justifySelf: "center",
-            display: "grid",
-            gridTemplateColumns: "repeat(8, max-content)"
-          },
-          children: [
-            showCalendarWeek ? /* @__PURE__ */ jsx13(
-              "div",
-              {
-                css: {
-                  justifySelf: "center",
-                  padding: 10,
-                  borderRight: `1px solid ${gray}`
-                },
-                children: /* @__PURE__ */ jsx13(Text, { id: "calendarWeek" })
-              }
-            ) : /* @__PURE__ */ jsx13("div", {}),
-            weekDays.map((_v, weekDay) => /* @__PURE__ */ jsx13(
-              "div",
-              {
-                css: {
-                  justifySelf: "center",
-                  padding: 10
-                },
-                children: formatWeekday(weekDay)
+          /* @__PURE__ */ jsxs8(
+            "div",
+            {
+              css: {
+                justifySelf: "center",
+                display: "grid",
+                gridTemplateColumns: "repeat(8, max-content)"
               },
-              weekDay
-            )),
-            weeks.map((week, index) => {
-              const weekStart = week[0];
-              const weekEnd = week[6];
-              const weekDisabled = !rangeSelect || minDate && weekEnd.date < minDate || maxDate && weekStart.date > maxDate;
-              return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+              children: [
                 showCalendarWeek ? /* @__PURE__ */ jsx13(
-                  "button",
+                  "div",
                   {
-                    type: "button",
                     css: {
+                      justifySelf: "center",
                       padding: 10,
-                      border: "none",
-                      background: "transparent",
-                      cursor: weekDisabled ? void 0 : "pointer",
-                      font: "inherit",
-                      borderRight: `1px solid ${gray}`
-                    },
-                    onClick: () => {
-                      if (weekDisabled) {
-                        return;
-                      }
-                      const min2 = minDate && weekStart.date < minDate ? minDate : weekStart.date;
-                      const max2 = maxDate && weekEnd.date > maxDate ? maxDate : weekEnd.date;
-                      set(min2, max2);
+                      borderRight: "1px solid var(--date-picker-separator, var(--table-border, #bdbdbd))"
                     },
-                    onPointerOver: () => !weekDisabled && setHovered({ min: weekStart.date, max: weekEnd.date }),
-                    onPointerOut: () => !weekDisabled && setHovered(void 0),
-                    children: getCalendarWeek(weekEnd.date)
+                    children: /* @__PURE__ */ jsx13(Text, { id: "calendarWeek" })
                   }
                 ) : /* @__PURE__ */ jsx13("div", {}),
-                week.map((dateObject, dayIndex) => {
-                  if (!dateObject) {
-                    return /* @__PURE__ */ jsx13("div", {}, dayIndex);
-                  }
-                  const { prevMonth, nextMonth, date } = dateObject;
-                  const today2 = startOfDay(date).getTime() === now.getTime();
-                  const disabled = minDate && date < minDate || maxDate && date > maxDate;
-                  const selected = date.getTime() === (min == null ? void 0 : min.getTime()) || min && max && dateIntersect(date, { min, max });
-                  const preSelected = !selected && !disabled && (dateIntersect(date, hovered) || min && !max && hovered && dateIntersect(
-                    date,
-                    min <= hovered.min ? { min, max: hovered.min } : { min: hovered.max, max: min }
-                  ));
-                  const blocked = blockedRanges.some((range) => dateIntersect(date, range));
-                  return /* @__PURE__ */ jsx13(
-                    "button",
-                    __spreadProps(__spreadValues({
-                      type: "button",
-                      css: getDayCssStyles({
-                        disabled,
-                        prevMonth,
-                        nextMonth,
-                        today: today2,
-                        blocked,
-                        selected,
-                        preSelected
-                      })
-                    }, getDateProps({ dateObj: dateObject })), {
-                      onClick: () => {
-                        if (dirty) {
-                          if (min) set(min, date);
-                          else set(date, max);
-                        } else {
-                          set(date);
-                        }
-                      },
-                      onPointerOver: () => setHovered({ min: date, max: date }),
-                      onPointerOut: () => setHovered(void 0),
-                      disabled,
-                      children: date.getDate()
-                    }),
-                    `${index}-${dayIndex}`
-                  );
+                weekDays.map((_v, weekDay) => /* @__PURE__ */ jsx13(
+                  "div",
+                  {
+                    css: {
+                      justifySelf: "center",
+                      padding: 10
+                    },
+                    children: formatWeekday(weekDay)
+                  },
+                  weekDay
+                )),
+                weeks.map((week, index) => {
+                  const weekStart = week[0];
+                  const weekEnd = week[6];
+                  const weekDisabled = !rangeSelect || minDate && weekEnd.date < minDate || maxDate && weekStart.date > maxDate;
+                  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+                    showCalendarWeek ? /* @__PURE__ */ jsx13(
+                      "button",
+                      {
+                        type: "button",
+                        css: {
+                          padding: 10,
+                          border: "none",
+                          background: "transparent",
+                          cursor: weekDisabled ? void 0 : "pointer",
+                          font: "inherit",
+                          borderRight: "1px solid var(--date-picker-separator, var(--table-border, #bdbdbd))",
+                          color: "inherit"
+                        },
+                        onClick: () => {
+                          if (weekDisabled) {
+                            return;
+                          }
+                          const min2 = minDate && weekStart.date < minDate ? minDate : weekStart.date;
+                          const max2 = maxDate && weekEnd.date > maxDate ? maxDate : weekEnd.date;
+                          set(min2, max2);
+                        },
+                        onPointerOver: () => !weekDisabled && setHovered({ min: weekStart.date, max: weekEnd.date }),
+                        onPointerOut: () => !weekDisabled && setHovered(void 0),
+                        children: getCalendarWeek(weekEnd.date)
+                      }
+                    ) : /* @__PURE__ */ jsx13("div", {}),
+                    week.map((dateObject, dayIndex) => {
+                      if (!dateObject) {
+                        return /* @__PURE__ */ jsx13("div", {}, dayIndex);
+                      }
+                      const { prevMonth, nextMonth, date } = dateObject;
+                      const today2 = startOfDay(date).getTime() === now.getTime();
+                      const disabled = minDate && date < minDate || maxDate && date > maxDate;
+                      const selected = date.getTime() === (min == null ? void 0 : min.getTime()) || min && max && dateIntersect(date, { min, max });
+                      const preSelected = !selected && !disabled && (dateIntersect(date, hovered) || min && !max && hovered && dateIntersect(
+                        date,
+                        min <= hovered.min ? { min, max: hovered.min } : { min: hovered.max, max: min }
+                      ));
+                      const blocked = blockedRanges.some((range) => dateIntersect(date, range));
+                      return /* @__PURE__ */ jsx13(
+                        "button",
+                        __spreadProps(__spreadValues({
+                          type: "button",
+                          css: getDayCssStyles({
+                            disabled,
+                            prevMonth,
+                            nextMonth,
+                            today: today2,
+                            blocked,
+                            selected,
+                            preSelected
+                          })
+                        }, getDateProps({ dateObj: dateObject })), {
+                          onClick: () => {
+                            if (dirty) {
+                              if (min) set(min, date);
+                              else set(date, max);
+                            } else {
+                              set(date);
+                            }
+                          },
+                          onPointerOver: () => setHovered({ min: date, max: date }),
+                          onPointerOut: () => setHovered(void 0),
+                          disabled,
+                          children: date.getDate()
+                        }),
+                        `${index}-${dayIndex}`
+                      );
+                    })
+                  ] }, index);
                 })
-              ] }, index);
-            })
-          ]
-        }
-      )
-    ] }, `${month}${year}`)),
-    /* @__PURE__ */ jsx13(
-      "div",
-      {
-        css: {
-          marginTop: "var(--spacing)",
-          display: "grid",
-          gridAutoFlow: "column",
-          justifyContent: "center"
-        },
-        children: resolvedQuickOptions
-      }
-    )
-  ] });
+              ]
+            }
+          )
+        ] }, `${month}${year}`)),
+        /* @__PURE__ */ jsx13(
+          "div",
+          {
+            css: {
+              marginTop: "var(--spacing)",
+              display: "grid",
+              gridAutoFlow: "column",
+              justifyContent: "center"
+            },
+            children: resolvedQuickOptions
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/components/dateFilter.tsx
@@ -1721,7 +1759,7 @@ function NumberField(_a) {
   const [value = printNumber(commitedValue, locale), setValue] = useState6();
   return /* @__PURE__ */ jsx15(
     TextField2,
-    __spreadValues({
+    __spreadProps(__spreadValues({
       value,
       onChange: (event) => {
         if (Pattern.test(event.target.value)) {
@@ -1732,7 +1770,14 @@ function NumberField(_a) {
         onChange == null ? void 0 : onChange(parseNumber(value));
         setValue(void 0);
       }
-    }, textFieldProps)
+    }, textFieldProps), {
+      css: {
+        input: {
+          backgroundColor: "inherit",
+          color: "inherit"
+        }
+      }
+    })
   );
 }
 
@@ -2116,7 +2161,12 @@ function SelectFilter(_a) {
             disabled: value.size === 0,
             onClick: () => onChange(/* @__PURE__ */ new Set()),
             variant: "outlined",
-            css: { justifyContent: "center", width: "100%", marginBottom: "var(--spacing)" },
+            css: {
+              justifyContent: "center",
+              width: "100%",
+              marginBottom: "var(--spacing)",
+              color: "inherit"
+            },
             children: deselectAll
           }
         ),
@@ -3660,7 +3710,7 @@ var Row = memo2(function Row2({
   return /* @__PURE__ */ jsxs17("div", { css: { display: "contents" }, children: [
     /* @__PURE__ */ jsx31("div", { className: className2, css: [defaultClasses.cellFill, css_], ref: divRef }),
     /* @__PURE__ */ jsxs17("div", { className: className2, css: [defaultClasses.cell, defaultClasses.firstCell, css_], children: [
-      /* @__PURE__ */ jsx31("div", { css: { width: indent * 20 } }),
+      indent > 0 && /* @__PURE__ */ jsx31("div", { css: { width: indent * 20 } }),
       enableSelection && /* @__PURE__ */ jsx31(SelectComponent, { itemId }),
       (hasChildren || hasDeferredChildren || hasDetails) && /* @__PURE__ */ jsx31(ExpandControl, { itemId, hasDeferredChildren }),
       rowAction
@@ -3885,8 +3935,10 @@ var TableInner = memo3(function TableInner2({ hidden }) {
               enableSelection && /* @__PURE__ */ jsx33(SelectComponent, {}),
               enableColumnSelection && /* @__PURE__ */ jsx33(ColumnSelection, {}),
               enableExport && /* @__PURE__ */ jsx33(Export2, {}),
-              /* @__PURE__ */ jsx33("div", { css: { flex: 1 } }),
-              /* @__PURE__ */ jsx33(ResizeHandleView, {})
+              (enableSelection || enableColumnSelection || enableExport) && /* @__PURE__ */ jsxs19(Fragment7, { children: [
+                /* @__PURE__ */ jsx33("div", { css: { flex: 1 } }),
+                /* @__PURE__ */ jsx33(ResizeHandleView, {})
+              ] })
             ]
           }
         ),