schummar-table 0.5.3 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -31,10 +31,10 @@ var __objRest = (source, exclude) => {
31
31
  };
32
32
  import { Button, IconButton, Checkbox, Badge, TextField, CircularProgress, useTheme } from "@material-ui/core";
33
33
  import { useMemo } from "react";
34
- import { b as Popover, m as mergeThemes, T as TableThemeContext } from "./tableTheme.js";
34
+ import { P as Popover, m as mergeThemes, T as TableThemeContext } from "./tableTheme.js";
35
35
  import { jsx } from "@emotion/react/jsx-runtime";
36
- import "@emotion/react";
37
36
  import "react-dom";
37
+ import "@emotion/react";
38
38
  const mui4Theme = {
39
39
  components: {
40
40
  Button: (props) => jsx(Button, __spreadProps(__spreadValues({}, props), {
@@ -1 +1 @@
1
- {"version":3,"file":"mui4Theme.js","sources":["../../src/theme/mui4Theme/index.tsx"],"sourcesContent":["import { Badge, Button, Checkbox, CircularProgress, IconButton, TextField, useTheme } from '@material-ui/core';\nimport { ReactNode, useMemo } from 'react';\nimport { PartialTableTheme, TableTheme } from '../../types';\nimport { Popover } from '../defaultTheme/popover';\nimport { mergeThemes, TableThemeContext } from '../tableTheme';\n\nexport const mui4Theme: Partial<TableTheme> = {\n components: {\n Button: (props) => (\n <Button\n {...props}\n size=\"small\"\n fullWidth\n css={{ justifyContent: 'start !important' }}\n color={props.variant === 'contained' ? 'primary' : 'inherit'}\n />\n ),\n IconButton: (props) => <IconButton {...props} size=\"small\" color=\"inherit\" />,\n Checkbox: (props) => <Checkbox {...props} color=\"primary\" size=\"medium\" />,\n Popover,\n Badge,\n TextField: ({ endIcon, ...props }) => <TextField {...props} InputProps={{ endAdornment: endIcon }} size=\"small\" variant=\"outlined\" />,\n Spinner: CircularProgress,\n },\n};\n\nexport function Mui4TableThemeProvider({ theme, children }: { theme?: PartialTableTheme; children: ReactNode }) {\n const muiTheme = useTheme();\n\n const _theme = useMemo(() => {\n return mergeThemes(\n {\n colors: {\n primary: muiTheme.palette.primary,\n secondary: muiTheme.palette.secondary,\n },\n },\n mui4Theme,\n theme ?? {},\n );\n }, [muiTheme, theme]);\n\n return <TableThemeContext.Provider value={_theme}>{children}</TableThemeContext.Provider>;\n}\n"],"names":["mui4Theme","components","Button","props","_jsx","justifyContent","variant","IconButton","Checkbox","Popover","Badge","TextField","endIcon","endAdornment","Spinner","CircularProgress","theme","children","muiTheme","useTheme","_theme","useMemo","mergeThemes","colors","primary","palette","secondary"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAMaA,YAAiC;AAAA,EAC5CC,YAAY;AAAA,IACVC,QAASC,WACPC,IAAC,yCACKD;MACJ,MAAK;AAAA,MACL;MACA,KAAK;AAAA,QAAEE,gBAAgB;AAAA;AAAA,MACvB,OAAOF,MAAMG,YAAY,cAAc,YAAY;AAAA;AAAA,IAGvDC,YAAaJ,WAAUC,IAAC,6CAAeD;MAAO,MAAK;AAAA,MAAQ,OAAM;AAAA;AAAA,IACjEK,UAAWL,WAAUC,IAAC,2CAAaD;MAAO,OAAM;AAAA,MAAU,MAAK;AAAA;AAAA,IAC/DM;AAAAA,IACAC;AAAAA,IACAC,WAAW,CAAC;AAAA,mBAAEC;AAAAA;AAAAA,UAAF,IAAcT,kBAAd,IAAcA;AAAAA,QAAZS;AAAAA;AAAwBR,iBAAC,4CAAcD;QAAO,YAAY;AAAA,UAAEU,cAAcD;AAAAA;AAAAA,QAAW,MAAK;AAAA,QAAQ,SAAQ;AAAA;AAAA;AAAA,IACxHE,SAASC;AAAAA;AAAAA;gCAI0B;AAAA,EAAEC;AAAAA,EAAOC;AAAAA,GAAgE;QACxGC,WAAWC;QAEXC,SAASC,QAAQ,MAAM;WACpBC,YACL;AAAA,MACEC,QAAQ;AAAA,QACNC,SAASN,SAASO,QAAQD;AAAAA,QAC1BE,WAAWR,SAASO,QAAQC;AAAAA;AAAAA,OAGhC1B,WACAgB,wBAAS;AAAA,KAEV,CAACE,UAAUF;SAEPZ,IAAC,kBAAkB;IAAS,OAAOgB;AAAAA;;;;"}
1
+ {"version":3,"file":"mui4Theme.js","sources":["../../src/theme/mui4Theme/index.tsx"],"sourcesContent":["import { Badge, Button, Checkbox, CircularProgress, IconButton, TextField, useTheme } from '@material-ui/core';\nimport { ReactNode, useMemo } from 'react';\nimport { PartialTableTheme } from '../../types';\nimport { Popover } from '../defaultTheme/popover';\nimport { mergeThemes, TableThemeContext } from '../tableTheme';\n\nexport const mui4Theme: PartialTableTheme = {\n components: {\n Button: (props) => (\n <Button\n {...props}\n size=\"small\"\n fullWidth\n css={{ justifyContent: 'start !important' }}\n color={props.variant === 'contained' ? 'primary' : 'inherit'}\n />\n ),\n IconButton: (props) => <IconButton {...props} size=\"small\" color=\"inherit\" />,\n Checkbox: (props) => <Checkbox {...props} color=\"primary\" size=\"medium\" />,\n Popover,\n Badge,\n TextField: ({ endIcon, ...props }) => <TextField {...props} InputProps={{ endAdornment: endIcon }} size=\"small\" variant=\"outlined\" />,\n Spinner: CircularProgress,\n },\n};\n\nexport function Mui4TableThemeProvider({ theme, children }: { theme?: PartialTableTheme; children: ReactNode }) {\n const muiTheme = useTheme();\n\n const _theme = useMemo(() => {\n return mergeThemes(\n {\n colors: {\n primary: muiTheme.palette.primary,\n secondary: muiTheme.palette.secondary,\n },\n },\n mui4Theme,\n theme ?? {},\n );\n }, [muiTheme, theme]);\n\n return <TableThemeContext.Provider value={_theme}>{children}</TableThemeContext.Provider>;\n}\n"],"names":["mui4Theme","components","Button","props","_jsx","justifyContent","variant","IconButton","Checkbox","Popover","Badge","TextField","endIcon","endAdornment","Spinner","CircularProgress","theme","children","muiTheme","useTheme","_theme","useMemo","mergeThemes","colors","primary","palette","secondary"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAMaA,YAA+B;AAAA,EAC1CC,YAAY;AAAA,IACVC,QAASC,WACPC,IAAC,yCACKD;MACJ,MAAK;AAAA,MACL;MACA,KAAK;AAAA,QAAEE,gBAAgB;AAAA;AAAA,MACvB,OAAOF,MAAMG,YAAY,cAAc,YAAY;AAAA;AAAA,IAGvDC,YAAaJ,WAAUC,IAAC,6CAAeD;MAAO,MAAK;AAAA,MAAQ,OAAM;AAAA;AAAA,IACjEK,UAAWL,WAAUC,IAAC,2CAAaD;MAAO,OAAM;AAAA,MAAU,MAAK;AAAA;AAAA,IAC/DM;AAAAA,IACAC;AAAAA,IACAC,WAAW,CAAC;AAAA,mBAAEC;AAAAA;AAAAA,UAAF,IAAcT,kBAAd,IAAcA;AAAAA,QAAZS;AAAAA;AAAwBR,iBAAC,4CAAcD;QAAO,YAAY;AAAA,UAAEU,cAAcD;AAAAA;AAAAA,QAAW,MAAK;AAAA,QAAQ,SAAQ;AAAA;AAAA;AAAA,IACxHE,SAASC;AAAAA;AAAAA;gCAI0B;AAAA,EAAEC;AAAAA,EAAOC;AAAAA,GAAgE;QACxGC,WAAWC;QAEXC,SAASC,QAAQ,MAAM;WACpBC,YACL;AAAA,MACEC,QAAQ;AAAA,QACNC,SAASN,SAASO,QAAQD;AAAAA,QAC1BE,WAAWR,SAASO,QAAQC;AAAAA;AAAAA,OAGhC1B,WACAgB,wBAAS;AAAA,KAEV,CAACE,UAAUF;SAEPZ,IAAC,kBAAkB;IAAS,OAAOgB;AAAAA;;;;"}
@@ -31,10 +31,10 @@ var __objRest = (source, exclude) => {
31
31
  };
32
32
  import { Button, IconButton, Checkbox, Badge, TextField, CircularProgress, useTheme } from "@mui/material";
33
33
  import { useMemo } from "react";
34
- import { b as Popover, m as mergeThemes, T as TableThemeContext } from "./tableTheme.js";
34
+ import { P as Popover, m as mergeThemes, T as TableThemeContext } from "./tableTheme.js";
35
35
  import { jsx } from "@emotion/react/jsx-runtime";
36
- import "@emotion/react";
37
36
  import "react-dom";
37
+ import "@emotion/react";
38
38
  const mui5Theme = {
39
39
  components: {
40
40
  Button: (props) => jsx(Button, __spreadProps(__spreadValues({}, props), {
@@ -1 +1 @@
1
- {"version":3,"file":"mui5Theme.js","sources":["../../src/theme/mui5Theme/index.tsx"],"sourcesContent":["import { Badge, Button, Checkbox, CircularProgress, IconButton, TextField, useTheme } from '@mui/material';\nimport { ReactNode, useMemo } from 'react';\nimport { PartialTableTheme, TableTheme } from '../../types';\nimport { Popover } from '../defaultTheme/popover';\nimport { mergeThemes, TableThemeContext } from '../tableTheme';\n\nexport const mui5Theme: Partial<TableTheme> = {\n components: {\n Button: (props) => (\n <Button\n {...props}\n size=\"small\"\n fullWidth\n css={{ justifyContent: 'start !important' }}\n color={props.variant === 'contained' ? 'primary' : 'inherit'}\n />\n ),\n IconButton: (props) => <IconButton {...props} size=\"small\" css={{ fontSize: '0.8em' }} color=\"inherit\" />,\n Checkbox: (props) => <Checkbox {...props} color=\"primary\" size=\"small\" />,\n Popover,\n Badge,\n TextField: ({ endIcon, ...props }) => <TextField {...props} InputProps={{ endAdornment: endIcon }} size=\"small\" />,\n Spinner: (props) => <CircularProgress {...props} size={20} />,\n },\n};\n\nexport function Mui5TableThemeProvider({ theme, children }: { theme?: PartialTableTheme; children: ReactNode }) {\n const muiTheme = useTheme();\n\n const _theme = useMemo(() => {\n return mergeThemes(\n {\n colors: {\n primary: muiTheme.palette.primary,\n secondary: muiTheme.palette.secondary,\n },\n },\n mui5Theme,\n theme ?? {},\n );\n }, [muiTheme, theme]);\n\n return <TableThemeContext.Provider value={_theme}>{children}</TableThemeContext.Provider>;\n}\n"],"names":["mui5Theme","components","Button","props","_jsx","justifyContent","variant","IconButton","fontSize","Checkbox","Popover","Badge","TextField","endIcon","endAdornment","Spinner","theme","children","muiTheme","useTheme","_theme","useMemo","mergeThemes","colors","primary","palette","secondary"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAMaA,YAAiC;AAAA,EAC5CC,YAAY;AAAA,IACVC,QAASC,WACPC,IAAC,yCACKD;MACJ,MAAK;AAAA,MACL;MACA,KAAK;AAAA,QAAEE,gBAAgB;AAAA;AAAA,MACvB,OAAOF,MAAMG,YAAY,cAAc,YAAY;AAAA;AAAA,IAGvDC,YAAaJ,WAAUC,IAAC,6CAAeD;MAAO,MAAK;AAAA,MAAQ,KAAK;AAAA,QAAEK,UAAU;AAAA;AAAA,MAAW,OAAM;AAAA;AAAA,IAC7FC,UAAWN,WAAUC,IAAC,2CAAaD;MAAO,OAAM;AAAA,MAAU,MAAK;AAAA;AAAA,IAC/DO;AAAAA,IACAC;AAAAA,IACAC,WAAW,CAAC;AAAA,mBAAEC;AAAAA;AAAAA,UAAF,IAAcV,kBAAd,IAAcA;AAAAA,QAAZU;AAAAA;AAAwBT,iBAAC,4CAAcD;QAAO,YAAY;AAAA,UAAEW,cAAcD;AAAAA;AAAAA,QAAW,MAAK;AAAA;AAAA;AAAA,IACxGE,SAAUZ,WAAUC,IAAC,mDAAqBD;MAAO,MAAM;AAAA;AAAA;AAAA;gCAIpB;AAAA,EAAEa;AAAAA,EAAOC;AAAAA,GAAgE;QACxGC,WAAWC;QAEXC,SAASC,QAAQ,MAAM;WACpBC,YACL;AAAA,MACEC,QAAQ;AAAA,QACNC,SAASN,SAASO,QAAQD;AAAAA,QAC1BE,WAAWR,SAASO,QAAQC;AAAAA;AAAAA,OAGhC1B,WACAgB,wBAAS;AAAA,KAEV,CAACE,UAAUF;SAEPZ,IAAC,kBAAkB;IAAS,OAAOgB;AAAAA;;;;"}
1
+ {"version":3,"file":"mui5Theme.js","sources":["../../src/theme/mui5Theme/index.tsx"],"sourcesContent":["import { Badge, Button, Checkbox, CircularProgress, IconButton, TextField, useTheme } from '@mui/material';\nimport { ReactNode, useMemo } from 'react';\nimport { PartialTableTheme } from '../../types';\nimport { Popover } from '../defaultTheme/popover';\nimport { mergeThemes, TableThemeContext } from '../tableTheme';\n\nexport const mui5Theme: PartialTableTheme = {\n components: {\n Button: (props) => (\n <Button\n {...props}\n size=\"small\"\n fullWidth\n css={{ justifyContent: 'start !important' }}\n color={props.variant === 'contained' ? 'primary' : 'inherit'}\n />\n ),\n IconButton: (props) => <IconButton {...props} size=\"small\" css={{ fontSize: '0.8em' }} color=\"inherit\" />,\n Checkbox: (props) => <Checkbox {...props} color=\"primary\" size=\"small\" />,\n Popover,\n Badge,\n TextField: ({ endIcon, ...props }) => <TextField {...props} InputProps={{ endAdornment: endIcon }} size=\"small\" />,\n Spinner: (props) => <CircularProgress {...props} size={20} />,\n },\n};\n\nexport function Mui5TableThemeProvider({ theme, children }: { theme?: PartialTableTheme; children: ReactNode }) {\n const muiTheme = useTheme();\n\n const _theme = useMemo(() => {\n return mergeThemes(\n {\n colors: {\n primary: muiTheme.palette.primary,\n secondary: muiTheme.palette.secondary,\n },\n },\n mui5Theme,\n theme ?? {},\n );\n }, [muiTheme, theme]);\n\n return <TableThemeContext.Provider value={_theme}>{children}</TableThemeContext.Provider>;\n}\n"],"names":["mui5Theme","components","Button","props","_jsx","justifyContent","variant","IconButton","fontSize","Checkbox","Popover","Badge","TextField","endIcon","endAdornment","Spinner","theme","children","muiTheme","useTheme","_theme","useMemo","mergeThemes","colors","primary","palette","secondary"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAMaA,YAA+B;AAAA,EAC1CC,YAAY;AAAA,IACVC,QAASC,WACPC,IAAC,yCACKD;MACJ,MAAK;AAAA,MACL;MACA,KAAK;AAAA,QAAEE,gBAAgB;AAAA;AAAA,MACvB,OAAOF,MAAMG,YAAY,cAAc,YAAY;AAAA;AAAA,IAGvDC,YAAaJ,WAAUC,IAAC,6CAAeD;MAAO,MAAK;AAAA,MAAQ,KAAK;AAAA,QAAEK,UAAU;AAAA;AAAA,MAAW,OAAM;AAAA;AAAA,IAC7FC,UAAWN,WAAUC,IAAC,2CAAaD;MAAO,OAAM;AAAA,MAAU,MAAK;AAAA;AAAA,IAC/DO;AAAAA,IACAC;AAAAA,IACAC,WAAW,CAAC;AAAA,mBAAEC;AAAAA;AAAAA,UAAF,IAAcV,kBAAd,IAAcA;AAAAA,QAAZU;AAAAA;AAAwBT,iBAAC,4CAAcD;QAAO,YAAY;AAAA,UAAEW,cAAcD;AAAAA;AAAAA,QAAW,MAAK;AAAA;AAAA;AAAA,IACxGE,SAAUZ,WAAUC,IAAC,mDAAqBD;MAAO,MAAM;AAAA;AAAA;AAAA;gCAIpB;AAAA,EAAEa;AAAAA,EAAOC;AAAAA,GAAgE;QACxGC,WAAWC;QAEXC,SAASC,QAAQ,MAAM;WACpBC,YACL;AAAA,MACEC,QAAQ;AAAA,QACNC,SAASN,SAASO,QAAQD;AAAAA,QAC1BE,WAAWR,SAASO,QAAQC;AAAAA;AAAAA,OAGhC1B,WACAgB,wBAAS;AAAA,KAEV,CAACE,UAAUF;SAEPZ,IAAC,kBAAkB;IAAS,OAAOgB;AAAAA;;;;"}
@@ -17,22 +17,10 @@ var __spreadValues = (a, b) => {
17
17
  return a;
18
18
  };
19
19
  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
- var __objRest = (source, exclude) => {
21
- var target = {};
22
- for (var prop in source)
23
- if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
24
- target[prop] = source[prop];
25
- if (source != null && __getOwnPropSymbols)
26
- for (var prop of __getOwnPropSymbols(source)) {
27
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
28
- target[prop] = source[prop];
29
- }
30
- return target;
31
- };
32
- import { createContext, useRef, useState, useLayoutEffect, useContext, useMemo, cloneElement } from "react";
33
- import { css, ClassNames } from "@emotion/react";
34
- import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
20
+ import { createContext, useRef, useState, useLayoutEffect, useContext, useMemo } from "react";
35
21
  import { createPortal } from "react-dom";
22
+ import { css } from "@emotion/react";
23
+ import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
36
24
  const white = "#ffffff";
37
25
  const lightGray = "#eeeeee";
38
26
  const gray = "#bdbdbd";
@@ -91,7 +79,7 @@ const PopoverContext = createContext({
91
79
  });
92
80
  const Popover = ({
93
81
  anchorEl,
94
- open: open2,
82
+ open,
95
83
  hidden,
96
84
  onClose,
97
85
  children,
@@ -101,7 +89,7 @@ const Popover = ({
101
89
  const popper = useRef(null);
102
90
  const [position, setPosition] = useState();
103
91
  useLayoutEffect(() => {
104
- if (!anchorEl || !open2) {
92
+ if (!anchorEl || !open) {
105
93
  setPosition(void 0);
106
94
  return;
107
95
  }
@@ -141,7 +129,7 @@ const Popover = ({
141
129
  return () => {
142
130
  clearInterval(handle);
143
131
  };
144
- }, [anchorEl, open2]);
132
+ }, [anchorEl, open]);
145
133
  const {
146
134
  depth
147
135
  } = useContext(PopoverContext);
@@ -150,7 +138,7 @@ const Popover = ({
150
138
  depth: depth + 1,
151
139
  visible
152
140
  }), [depth, visible]);
153
- if (!open2)
141
+ if (!open)
154
142
  return null;
155
143
  return jsx(PopoverContext.Provider, {
156
144
  value: context,
@@ -186,440 +174,6 @@ const Popover = ({
186
174
  }), document.body)
187
175
  });
188
176
  };
189
- const defaultColors = {
190
- primary: { main: "#1976d2", light: "#42a5f5", contrastText: "#fff" },
191
- secondary: { main: "#9c27b0", light: "#ba68c8", contrastText: "#fff" }
192
- };
193
- function Spinner({
194
- className
195
- }) {
196
- return jsxs("div", {
197
- className,
198
- css: css`
199
- display: inline-block;
200
- position: relative;
201
- width: 1em;
202
- height: 1em;
203
-
204
- div {
205
- box-sizing: border-box;
206
- display: block;
207
- position: absolute;
208
- width: 0.8em;
209
- height: 0.8em;
210
- margin: 0.1em;
211
- border: 0.1em solid #fff;
212
- border-radius: 50%;
213
- animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
214
- border-color: currentColor transparent transparent transparent;
215
- }
216
- div:nth-of-type(1) {
217
- animation-delay: -0.45s;
218
- }
219
- div:nth-of-type(2) {
220
- animation-delay: -0.3s;
221
- }
222
- div:nth-of-type(3) {
223
- animation-delay: -0.15s;
224
- }
225
- @keyframes lds-ring {
226
- 0% {
227
- transform: rotate(0deg);
228
- }
229
- 100% {
230
- transform: rotate(360deg);
231
- }
232
- }
233
- `,
234
- children: [jsx("div", {}), jsx("div", {}), jsx("div", {})]
235
- });
236
- }
237
- const Badge = ({
238
- badgeContent,
239
- children
240
- }) => {
241
- if (!open)
242
- return null;
243
- return jsxs("span", {
244
- css: {
245
- display: "inline-flex",
246
- position: "relative",
247
- flexShrink: 0,
248
- verticalAlign: "middle"
249
- },
250
- children: [children, jsx("span", {
251
- css: [{
252
- top: 0,
253
- right: 0,
254
- transform: "scale(1) translate(50%, -50%)",
255
- transformOrigin: "100% 0%",
256
- height: 20,
257
- display: "flex",
258
- padding: "0 6px",
259
- zIndex: 1,
260
- position: "absolute",
261
- flexWrap: "wrap",
262
- minWidth: 20,
263
- transition: "transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
264
- alignItems: "center",
265
- lineHeight: 1,
266
- alignContent: "center",
267
- borderRadius: 10,
268
- justifyContent: "center",
269
- fontSize: "0.8em"
270
- }, !badgeContent && {
271
- transform: "scale(0) translate(50%, -50%)",
272
- transition: "transform 195ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"
273
- }],
274
- children: badgeContent
275
- })]
276
- });
277
- };
278
- const Button = (_a) => {
279
- var _b = _a, {
280
- startIcon,
281
- children,
282
- variant = "text"
283
- } = _b, props = __objRest(_b, [
284
- "startIcon",
285
- "children",
286
- "variant"
287
- ]);
288
- return jsxs("button", __spreadProps(__spreadValues({
289
- css: [{
290
- padding: `var(--spacing) calc(var(--spacing) * 2)`,
291
- display: "inline-flex",
292
- alignItems: "center",
293
- transition: "background-color 150ms",
294
- border: "none",
295
- cursor: "pointer",
296
- background: "transparent",
297
- borderRadius: 4,
298
- "&:active:not(:disabled)": {
299
- transform: "scale3d(0.95, 0.95, 1)"
300
- }
301
- }, variant === "text" && {
302
- "&:hover": {
303
- background: "rgba(0, 0, 0, 0.1)"
304
- }
305
- }, variant === "outlined" && {
306
- border: `1px solid ${darkGray}`,
307
- "&:disabled": {
308
- borderColor: lightGray
309
- }
310
- }, variant === "contained" && {
311
- color: "var(--primaryContrastText)",
312
- backgroundColor: "var(--primaryMain)",
313
- boxShadow: "0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%)",
314
- "&:hover": {
315
- filter: "brightness(0.9)"
316
- },
317
- "&:disabled": {
318
- filter: "grayscale()",
319
- opacity: 0.5
320
- }
321
- }]
322
- }, props), {
323
- children: [startIcon && jsx("span", {
324
- css: {
325
- marginRight: `calc(var(--spacing) * 2)`
326
- },
327
- children: startIcon
328
- }), jsx("span", {
329
- children
330
- })]
331
- }));
332
- };
333
- const Checkbox = (_c) => {
334
- var _d = _c, {
335
- className
336
- } = _d, props = __objRest(_d, [
337
- "className"
338
- ]);
339
- return jsxs("label", {
340
- css: [{
341
- padding: "calc(var(--spacing) * 1.8)",
342
- display: "flex",
343
- color: "currentcolor",
344
- userSelect: "none",
345
- "& input": {
346
- appearance: "none",
347
- margin: 0
348
- }
349
- }, props.disabled && {
350
- color: "rgba(0, 0, 0, 0.26)"
351
- }],
352
- className,
353
- children: [jsx("input", __spreadValues({
354
- type: "checkbox"
355
- }, props)), props.checked ? jsx("svg", {
356
- css: {
357
- fontSize: "1.25rem",
358
- width: "1em",
359
- height: "1em",
360
- fill: "var(--primaryMain)"
361
- },
362
- focusable: "false",
363
- viewBox: "0 0 24 24",
364
- "aria-hidden": "true",
365
- children: jsx("path", {
366
- d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
367
- })
368
- }) : jsx("svg", {
369
- css: {
370
- fontSize: "1.25rem",
371
- width: "1em",
372
- height: "1em",
373
- fill: "currentColor"
374
- },
375
- focusable: "false",
376
- viewBox: "0 0 24 24",
377
- "aria-hidden": "true",
378
- children: jsx("path", {
379
- d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
380
- })
381
- })]
382
- });
383
- };
384
- const IconButton = (props) => {
385
- return jsx("button", __spreadValues({
386
- css: {
387
- padding: "var(--spacing)",
388
- borderRadius: "50%",
389
- display: "inline-flex",
390
- justifyContent: "center",
391
- alignItems: "center",
392
- transition: "background-color 150ms",
393
- border: "none",
394
- cursor: "pointer",
395
- color: "inherit",
396
- background: "transparent",
397
- "&:hover": {
398
- backgroundColor: "rgba(0, 0, 0, 0.04)"
399
- },
400
- "&:active": {
401
- transformColor: "scale3d(0.95, 0.95, 1)"
402
- }
403
- }
404
- }, props));
405
- };
406
- const TextField = (_e) => {
407
- var _f = _e, {
408
- endIcon,
409
- className,
410
- inputRef
411
- } = _f, props = __objRest(_f, [
412
- "endIcon",
413
- "className",
414
- "inputRef"
415
- ]);
416
- var _a;
417
- const [focus, setFocus] = useState(false);
418
- return jsx("div", {
419
- className,
420
- css: {
421
- display: "flex"
422
- },
423
- children: jsxs("span", {
424
- css: [{
425
- flex: 1,
426
- display: "flex",
427
- alignItems: "center",
428
- border: `1px solid ${darkGray}`,
429
- borderRadius: 4
430
- }, focus && {
431
- border: "2px solid var(--primaryMain)",
432
- margin: -1
433
- }],
434
- children: [jsx("input", __spreadProps(__spreadValues({
435
- ref: inputRef
436
- }, props), {
437
- value: (_a = props.value) != null ? _a : "",
438
- onFocus: () => setFocus(true),
439
- onBlur: () => setFocus(false),
440
- css: {
441
- flex: 1,
442
- border: "none",
443
- outline: "none",
444
- borderRadius: 4,
445
- padding: "calc(var(--spacing) * 2)",
446
- paddingRight: 0,
447
- transition: "outline 500ms"
448
- }
449
- })), endIcon]
450
- })
451
- });
452
- };
453
- const defaultComponents = {
454
- IconButton,
455
- Checkbox,
456
- Popover,
457
- Button,
458
- Badge,
459
- TextField,
460
- Spinner
461
- };
462
- const IconDefaultStyle = css({
463
- width: "1.5em",
464
- height: "1.5em",
465
- color: "inherit"
466
- });
467
- function Icon(svg) {
468
- return (props) => jsx(ClassNames, {
469
- children: ({
470
- css: css2
471
- }) => cloneElement(svg, __spreadProps(__spreadValues({}, props), {
472
- className: css2(IconDefaultStyle, props.className)
473
- }))
474
- });
475
- }
476
- const Settings = Icon(jsxs("svg", {
477
- xmlns: "http://www.w3.org/2000/svg",
478
- height: "24px",
479
- viewBox: "0 0 24 24",
480
- width: "24px",
481
- fill: "currentColor",
482
- children: [jsx("path", {
483
- d: "M0 0h24v24H0V0z",
484
- fill: "none"
485
- }), jsx("path", {
486
- d: "M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"
487
- })]
488
- }));
489
- const Export = Icon(jsxs("svg", {
490
- xmlns: "http://www.w3.org/2000/svg",
491
- enableBackground: "new 0 0 24 24",
492
- height: "24px",
493
- viewBox: "0 0 24 24",
494
- width: "24px",
495
- fill: "currentColor",
496
- children: [jsx("g", {
497
- children: jsx("rect", {
498
- fill: "none",
499
- height: "24",
500
- width: "24"
501
- })
502
- }), jsx("g", {
503
- children: jsx("path", {
504
- d: "M18,15v3H6v-3H4v3c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-3H18z M17,11l-1.41-1.41L13,12.17V4h-2v8.17L8.41,9.59L7,11l5,5 L17,11z"
505
- })
506
- })]
507
- }));
508
- const Clipboard = Icon(jsxs("svg", {
509
- xmlns: "http://www.w3.org/2000/svg",
510
- height: "24px",
511
- viewBox: "0 0 24 24",
512
- width: "24px",
513
- fill: "currentColor",
514
- children: [jsx("path", {
515
- d: "M0 0h24v24H0V0z",
516
- fill: "none"
517
- }), jsx("path", {
518
- d: "M19 2h-4.18C14.4.84 13.3 0 12 0S9.6.84 9.18 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z"
519
- })]
520
- }));
521
- const ChevronRight = Icon(jsxs("svg", {
522
- xmlns: "http://www.w3.org/2000/svg",
523
- height: "24px",
524
- viewBox: "0 0 24 24",
525
- width: "24px",
526
- fill: "currentColor",
527
- children: [jsx("path", {
528
- d: "M0 0h24v24H0V0z",
529
- fill: "none"
530
- }), jsx("path", {
531
- d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z"
532
- })]
533
- }));
534
- const Search = Icon(jsxs("svg", {
535
- xmlns: "http://www.w3.org/2000/svg",
536
- height: "24px",
537
- viewBox: "0 0 24 24",
538
- width: "24px",
539
- fill: "currentColor",
540
- children: [jsx("path", {
541
- d: "M0 0h24v24H0V0z",
542
- fill: "none"
543
- }), jsx("path", {
544
- d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
545
- })]
546
- }));
547
- const Clear = Icon(jsxs("svg", {
548
- xmlns: "http://www.w3.org/2000/svg",
549
- height: "24px",
550
- viewBox: "0 0 24 24",
551
- width: "24px",
552
- fill: "currentColor",
553
- children: [jsx("path", {
554
- d: "M0 0h24v24H0V0z",
555
- fill: "none"
556
- }), jsx("path", {
557
- d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
558
- })]
559
- }));
560
- const ArrowDropDown = Icon(jsxs("svg", {
561
- xmlns: "http://www.w3.org/2000/svg",
562
- height: "24px",
563
- viewBox: "0 0 24 24",
564
- width: "24px",
565
- fill: "currentColor",
566
- children: [jsx("path", {
567
- d: "M0 0h24v24H0V0z",
568
- fill: "none"
569
- }), jsx("path", {
570
- d: "M7 10l5 5 5-5H7z"
571
- })]
572
- }));
573
- const FilterList = Icon(jsx("svg", {
574
- viewBox: "0 0 24 24",
575
- children: jsx("path", {
576
- fill: "currentColor",
577
- d: "M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z"
578
- })
579
- }));
580
- const ArrowUpward = Icon(jsxs("svg", {
581
- xmlns: "http://www.w3.org/2000/svg",
582
- height: "24px",
583
- viewBox: "0 0 24 24",
584
- width: "24px",
585
- fill: "currentColor",
586
- children: [jsx("path", {
587
- d: "M0 0h24v24H0V0z",
588
- fill: "none"
589
- }), jsx("path", {
590
- d: "M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"
591
- })]
592
- }));
593
- const defaultIcons = {
594
- Settings,
595
- Export,
596
- Clipboard,
597
- ChevronRight,
598
- Search,
599
- Clear,
600
- ArrowDropDown,
601
- FilterList,
602
- ArrowUpward
603
- };
604
- const defaultTexts = {
605
- selectColumns: "Select visible columns",
606
- noResults: "No results",
607
- exportTitle: "Export",
608
- exportCopy: "To clipboard",
609
- exportDownload: "Download",
610
- today: "Today",
611
- thisWeek: "This week",
612
- reset: "Reset",
613
- loading: "Loading",
614
- selected: (count) => `${count} selected`
615
- };
616
- const defaultTableTheme = {
617
- text: defaultTexts,
618
- components: defaultComponents,
619
- icons: defaultIcons,
620
- colors: defaultColors,
621
- spacing: "5px"
622
- };
623
177
  let globalTableTheme = {};
624
178
  function configureTableTheme(tableTheme) {
625
179
  globalTableTheme = tableTheme;
@@ -653,9 +207,5 @@ function mergeThemes(...themes) {
653
207
  spacing: themes.map((theme) => theme.spacing).reverse().find((x) => x !== void 0)
654
208
  };
655
209
  }
656
- function useTableTheme(props) {
657
- const contextTableTheme = useContext(TableThemeContext);
658
- return mergeThemes(defaultTableTheme, globalTableTheme, contextTableTheme, props);
659
- }
660
- export { PopoverContext as P, TableThemeContext as T, TableThemeProvider as a, Popover as b, configureTableTheme as c, defaultClasses as d, gray as g, mergeThemes as m, useTableTheme as u };
210
+ export { Popover as P, TableThemeContext as T, darkGray as a, PopoverContext as b, gray as c, defaultClasses as d, configureTableTheme as e, TableThemeProvider as f, globalTableTheme as g, lightGray as l, mergeThemes as m };
661
211
  //# sourceMappingURL=tableTheme.js.map