react-science 0.22.2 → 0.24.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.
Files changed (35) hide show
  1. package/lib/components/button/Button.js +7 -3
  2. package/lib/components/forms/Checkbox.js +62 -0
  3. package/lib/components/forms/Select.js +119 -0
  4. package/lib/components/forms/index.js +1 -0
  5. package/lib/components/split-pane/SplitPane.js +10 -4
  6. package/lib/components/table/Table.js +6 -6
  7. package/lib-esm/components/button/Button.d.ts +1 -0
  8. package/lib-esm/components/button/Button.d.ts.map +1 -1
  9. package/lib-esm/components/button/Button.js +7 -3
  10. package/lib-esm/components/button/Button.js.map +1 -1
  11. package/lib-esm/components/forms/Checkbox.d.ts +11 -0
  12. package/lib-esm/components/forms/Checkbox.d.ts.map +1 -0
  13. package/lib-esm/components/forms/Checkbox.js +36 -0
  14. package/lib-esm/components/forms/Checkbox.js.map +1 -0
  15. package/lib-esm/components/forms/Select.d.ts +21 -0
  16. package/lib-esm/components/forms/Select.d.ts.map +1 -0
  17. package/lib-esm/components/forms/Select.js +90 -0
  18. package/lib-esm/components/forms/Select.js.map +1 -0
  19. package/lib-esm/components/forms/index.d.ts +1 -0
  20. package/lib-esm/components/forms/index.d.ts.map +1 -1
  21. package/lib-esm/components/forms/index.js +1 -0
  22. package/lib-esm/components/forms/index.js.map +1 -1
  23. package/lib-esm/components/split-pane/SplitPane.js +10 -4
  24. package/lib-esm/components/split-pane/SplitPane.js.map +1 -1
  25. package/lib-esm/components/table/Table.d.ts +4 -3
  26. package/lib-esm/components/table/Table.d.ts.map +1 -1
  27. package/lib-esm/components/table/Table.js +6 -6
  28. package/lib-esm/components/table/Table.js.map +1 -1
  29. package/package.json +3 -1
  30. package/src/components/button/Button.tsx +8 -1
  31. package/src/components/forms/Checkbox.tsx +78 -0
  32. package/src/components/forms/Select.tsx +197 -0
  33. package/src/components/forms/index.ts +1 -0
  34. package/src/components/split-pane/SplitPane.tsx +10 -4
  35. package/src/components/table/Table.tsx +14 -6
@@ -8,7 +8,7 @@ function Button(props) {
8
8
  const { backgroundColor = {
9
9
  basic: 'hsl(21deg, 90%, 48%)',
10
10
  hover: 'hsl(21deg, 90%, 40%)',
11
- }, color = { basic: 'white', hover: 'white' }, style, onClick, children, } = props;
11
+ }, color = { basic: 'white', hover: 'white' }, style, onClick, children, disabled = false, } = props;
12
12
  return ((0, jsx_runtime_1.jsx)("button", { style: style, onClick: onClick, css: (0, react_1.css)({
13
13
  display: 'flex',
14
14
  alignItems: 'center',
@@ -24,10 +24,14 @@ function Button(props) {
24
24
  minWidth: 30,
25
25
  justifyContent: 'center',
26
26
  backgroundColor: backgroundColor.basic,
27
- ':hover': {
27
+ ':hover:enabled': {
28
28
  color: color.hover,
29
29
  backgroundColor: backgroundColor.hover,
30
30
  },
31
- }), type: "button", children: children }));
31
+ ':disabled': {
32
+ opacity: 0.5,
33
+ cursor: 'not-allowed',
34
+ },
35
+ }), type: "button", disabled: disabled, children: children }));
32
36
  }
33
37
  exports.Button = Button;
@@ -0,0 +1,62 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ Object.defineProperty(exports, "__esModule", { value: true });
26
+ exports.Checkbox = void 0;
27
+ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
28
+ /** @jsxImportSource @emotion/react */
29
+ const react_1 = require("@emotion/react");
30
+ const RadixCheckbox = __importStar(require("@radix-ui/react-checkbox"));
31
+ const index_1 = require("react-icons/rx/index");
32
+ const enabledColor = '#1677ff';
33
+ const disabledColor = '#b8b8b8';
34
+ function Checkbox(props) {
35
+ const { checked = 'indeterminate', disabled = false, label, onChange, } = props;
36
+ return ((0, jsx_runtime_1.jsxs)("label", { style: {
37
+ display: 'flex',
38
+ alignItems: 'center',
39
+ fontSize: '1.125em',
40
+ }, children: [(0, jsx_runtime_1.jsx)(RadixCheckbox.Root, { checked: checked, onCheckedChange: onChange, disabled: disabled, css: (0, react_1.css)({
41
+ width: '16px',
42
+ height: '16px',
43
+ backgroundColor: disabled
44
+ ? 'rgba(0, 0, 0, 0.04)'
45
+ : checked
46
+ ? enabledColor
47
+ : 'white',
48
+ borderWidth: '1px',
49
+ borderColor: checked && !disabled ? enabledColor : disabledColor,
50
+ borderRadius: '4px',
51
+ display: 'flex',
52
+ alignItems: 'center',
53
+ justifyContent: 'center',
54
+ cursor: disabled ? 'not-allowed' : 'pointer',
55
+ }), children: (0, jsx_runtime_1.jsx)(RadixCheckbox.Indicator, { css: (0, react_1.css)({
56
+ color: disabled ? disabledColor : 'white',
57
+ }), children: checked === true ? ((0, jsx_runtime_1.jsx)(index_1.RxCheck, {})) : checked === 'indeterminate' ? ((0, jsx_runtime_1.jsx)(index_1.RxMinus, {})) : null }) }), (0, jsx_runtime_1.jsx)("span", { style: {
58
+ paddingInline: '8px',
59
+ lineHeight: '16px',
60
+ }, children: label })] }));
61
+ }
62
+ exports.Checkbox = Checkbox;
@@ -0,0 +1,119 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ var __importDefault = (this && this.__importDefault) || function (mod) {
26
+ return (mod && mod.__esModule) ? mod : { "default": mod };
27
+ };
28
+ Object.defineProperty(exports, "__esModule", { value: true });
29
+ exports.Select = void 0;
30
+ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
31
+ /** @jsxImportSource @emotion/react */
32
+ const styled_1 = __importDefault(require("@emotion/styled"));
33
+ const RadixSelect = __importStar(require("@radix-ui/react-select"));
34
+ const react_select_1 = require("@radix-ui/react-select");
35
+ const react_1 = require("react");
36
+ const fa_1 = require("react-icons/fa");
37
+ const Portal_1 = require("../root-layout/Portal");
38
+ const SelectRoot = styled_1.default.div `
39
+ display: inline-flex;
40
+ align-items: center;
41
+ justify-content: space-between;
42
+ background-color: #ffffff;
43
+ font-size: 1.125em;
44
+ width: 120px;
45
+ `;
46
+ const SelectTrigger = (0, styled_1.default)(RadixSelect.Trigger) `
47
+ width: 100%;
48
+ display: flex;
49
+ align-items: center;
50
+ justify-content: space-between;
51
+ border-radius: 4px;
52
+ border: 1px solid rgba(0, 0, 0, 0.15);
53
+ padding: 4px 11px;
54
+ user-select: none;
55
+ font-size: 1.125em;
56
+ line-height: 1.125em;
57
+
58
+ &[data-disabled] {
59
+ color: rgba(0, 0, 0, 0.5);
60
+ background-color: #f5f5f5;
61
+ }
62
+ `;
63
+ const SelectContent = (0, styled_1.default)(RadixSelect.Content) `
64
+ width: var(--radix-select-trigger-width);
65
+ max-height: var(--radix-select-content-available-height);
66
+ `;
67
+ const SelectViewport = (0, styled_1.default)(RadixSelect.Viewport) `
68
+ width: var(--radix-select-trigger-width);
69
+ border-radius: 4px;
70
+ box-sizing: border-box;
71
+ border: 1px solid rgba(0, 0, 0, 0.15);
72
+ background-color: white;
73
+ padding: 5px;
74
+ `;
75
+ const SelectItem = (0, styled_1.default)(RadixSelect.Item) `
76
+ user-select: none;
77
+ font-size: 1.125em;
78
+ padding: 4px 11px;
79
+ width: 100%;
80
+ display: flex;
81
+ align-items: center;
82
+ justify-content: space-between;
83
+
84
+ &:hover {
85
+ background-color: #e6f4ff;
86
+ }
87
+ &[data-disabled] {
88
+ color: rgba(0, 0, 0, 0.5);
89
+ }
90
+ `;
91
+ const SelectLabel = (0, styled_1.default)(RadixSelect.Label) `
92
+ color: rgba(0, 0, 0, 0.5);
93
+ font-size: 1em;
94
+ padding: 4px 11px;
95
+ margin-top: 8px;
96
+ `;
97
+ const SelectItemIndicator = (0, styled_1.default)(RadixSelect.ItemIndicator) `
98
+ right: 0;
99
+ width: 25px;
100
+ display: inline-flex;
101
+ align-items: center;
102
+ justify-content: center;
103
+ `;
104
+ const SelectSeparator = (0, styled_1.default)(RadixSelect.Separator) `
105
+ height: 1px;
106
+ width: 100%;
107
+ background-color: rgba(0, 0, 0, 0.15);
108
+ margin: 5px 0;
109
+ `;
110
+ function Select(props) {
111
+ const { placeholder, value, onSelect, options, disabled = false, style, } = props;
112
+ const selectedLabel = options
113
+ .flatMap((group) => group.flatMap((optionOrCategory) => 'options' in optionOrCategory
114
+ ? optionOrCategory.options
115
+ : [optionOrCategory]))
116
+ .find((option) => option.value === value)?.label;
117
+ return ((0, jsx_runtime_1.jsx)(SelectRoot, { style: { ...style }, children: (0, jsx_runtime_1.jsxs)(RadixSelect.Root, { value: value, onValueChange: onSelect, disabled: disabled, children: [(0, jsx_runtime_1.jsxs)(SelectTrigger, { children: [(0, jsx_runtime_1.jsx)(RadixSelect.Value, { children: (0, jsx_runtime_1.jsxs)("span", { children: [selectedLabel || placeholder, "\u00A0"] }) }), (0, jsx_runtime_1.jsx)(RadixSelect.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(fa_1.FaChevronDown, {}) })] }), (0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsxs)(SelectContent, { position: "popper", children: [(0, jsx_runtime_1.jsx)(RadixSelect.ScrollUpButton, { children: (0, jsx_runtime_1.jsx)(fa_1.FaChevronUp, {}) }), (0, jsx_runtime_1.jsx)(SelectViewport, { children: options.map((group, groupIndex) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [group.map((optionOrCategory, optionOrCategoryIndex) => 'options' in optionOrCategory ? ((0, jsx_runtime_1.jsxs)(react_select_1.SelectGroup, { children: [(0, jsx_runtime_1.jsx)(SelectLabel, { children: optionOrCategory.label }), optionOrCategory.options.map((option) => ((0, jsx_runtime_1.jsxs)(SelectItem, { value: option.value, disabled: option.disabled, children: [(0, jsx_runtime_1.jsx)(RadixSelect.ItemText, { children: option.label }), (0, jsx_runtime_1.jsx)(SelectItemIndicator, { children: (0, jsx_runtime_1.jsx)(fa_1.FaCheck, {}) })] }, option.value)))] }, optionOrCategoryIndex)) : ((0, jsx_runtime_1.jsxs)(SelectItem, { value: optionOrCategory.value, disabled: optionOrCategory.disabled, children: [(0, jsx_runtime_1.jsx)(RadixSelect.ItemText, { children: optionOrCategory.label }), (0, jsx_runtime_1.jsx)(SelectItemIndicator, { children: (0, jsx_runtime_1.jsx)(fa_1.FaCheck, {}) })] }, optionOrCategory.value))), groupIndex < options.length - 1 && (0, jsx_runtime_1.jsx)(SelectSeparator, {})] }, groupIndex))) }), (0, jsx_runtime_1.jsx)(RadixSelect.ScrollDownButton, {}), (0, jsx_runtime_1.jsx)(RadixSelect.Arrow, {})] }) })] }) }));
118
+ }
119
+ exports.Select = Select;
@@ -15,4 +15,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
15
15
  };
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
17
  __exportStar(require("./Input"), exports);
18
+ __exportStar(require("./Checkbox"), exports);
18
19
  __exportStar(require("./context"), exports);
@@ -118,8 +118,15 @@ function getItemStyle(isClosed, isControlledSide, direction, size, type) {
118
118
  }
119
119
  else if (type === '%') {
120
120
  return isControlledSide
121
- ? { flex: '100 0 0%', display: 'flex' }
122
- : { flex: `${percentToFlex(size)} 0 0%`, display: 'flex' };
121
+ ? {
122
+ flex: '100 0 0%',
123
+ display: 'flex',
124
+ }
125
+ : {
126
+ flex: `${percentToFlex(size)} 0 0%`,
127
+ display: 'flex',
128
+ [isHorizontal ? 'minWidth' : 'minHeight']: 0,
129
+ };
123
130
  }
124
131
  else {
125
132
  return isControlledSide
@@ -130,8 +137,7 @@ function getItemStyle(isClosed, isControlledSide, direction, size, type) {
130
137
  : {
131
138
  flex: '1 1 0%',
132
139
  display: 'flex',
133
- minWidth: isHorizontal ? 0 : undefined,
134
- minHeight: isHorizontal ? undefined : 0,
140
+ [isHorizontal ? 'minWidth' : 'minHeight']: 0,
135
141
  };
136
142
  }
137
143
  }
@@ -44,10 +44,10 @@ function splitChildren(children) {
44
44
  return { Rows, Header };
45
45
  }
46
46
  function Table(props) {
47
- const { border = true, children } = props;
47
+ const { border = true, style = {}, children } = props;
48
48
  const { Header, Rows } = splitChildren(children);
49
49
  const tableContextValue = (0, react_2.useMemo)(() => ({ border }), [border]);
50
- return ((0, jsx_runtime_1.jsx)(TableContext.Provider, { value: tableContextValue, children: (0, jsx_runtime_1.jsxs)("table", { children: [Header, (0, jsx_runtime_1.jsx)("tbody", { children: Rows })] }) }));
50
+ return ((0, jsx_runtime_1.jsx)(TableContext.Provider, { value: tableContextValue, children: (0, jsx_runtime_1.jsxs)("table", { style: style, children: [Header, (0, jsx_runtime_1.jsx)("tbody", { children: Rows })] }) }));
51
51
  }
52
52
  exports.Table = Table;
53
53
  function useRowChildren(children) {
@@ -79,11 +79,11 @@ function useRowChildren(children) {
79
79
  }
80
80
  return { cells };
81
81
  }
82
- function Row({ children, border = false }) {
82
+ function Row({ children, style = {}, border = false }) {
83
83
  const { cells } = useRowChildren(children);
84
- return (0, jsx_runtime_1.jsx)("tr", { style: { border: border ? '1px solid black' : '' }, children: cells });
84
+ return ((0, jsx_runtime_1.jsx)("tr", { style: { border: border ? '1px solid black' : '', ...style }, children: cells }));
85
85
  }
86
86
  Table.Row = Row;
87
- Table.Header = ({ children, border = false }) => {
88
- return ((0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)(Table.Row, { border: border, children: children }) }));
87
+ Table.Header = ({ children, style, border = false }) => {
88
+ return ((0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)(Table.Row, { border: border, style: style, children: children }) }));
89
89
  };
@@ -9,6 +9,7 @@ interface ButtonProps {
9
9
  color?: Colorhover;
10
10
  onClick?: () => void;
11
11
  style?: CSSProperties;
12
+ disabled?: boolean;
12
13
  }
13
14
  export declare function Button(props: ButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
14
15
  export {};
@@ -1 +1 @@
1
- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,UAAU,UAAU;IAClB,KAAK,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;CAC1C;AAED,UAAU,WAAW;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,oDAyCxC"}
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,UAAU,UAAU;IAClB,KAAK,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;CAC1C;AAED,UAAU,WAAW;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,oDA+CxC"}
@@ -5,7 +5,7 @@ export function Button(props) {
5
5
  const { backgroundColor = {
6
6
  basic: 'hsl(21deg, 90%, 48%)',
7
7
  hover: 'hsl(21deg, 90%, 40%)',
8
- }, color = { basic: 'white', hover: 'white' }, style, onClick, children, } = props;
8
+ }, color = { basic: 'white', hover: 'white' }, style, onClick, children, disabled = false, } = props;
9
9
  return (_jsx("button", { style: style, onClick: onClick, css: css({
10
10
  display: 'flex',
11
11
  alignItems: 'center',
@@ -21,10 +21,14 @@ export function Button(props) {
21
21
  minWidth: 30,
22
22
  justifyContent: 'center',
23
23
  backgroundColor: backgroundColor.basic,
24
- ':hover': {
24
+ ':hover:enabled': {
25
25
  color: color.hover,
26
26
  backgroundColor: backgroundColor.hover,
27
27
  },
28
- }), type: "button", children: children }));
28
+ ':disabled': {
29
+ opacity: 0.5,
30
+ cursor: 'not-allowed',
31
+ },
32
+ }), type: "button", disabled: disabled, children: children }));
29
33
  }
30
34
  //# sourceMappingURL=Button.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAgBrC,MAAM,UAAU,MAAM,CAAC,KAAkB;IACvC,MAAM,EACJ,eAAe,GAAG;QAChB,KAAK,EAAE,sBAAsB;QAC7B,KAAK,EAAE,sBAAsB;KAC9B,EACD,KAAK,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAC1C,KAAK,EACL,OAAO,EACP,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,iBACE,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,CAAC;YACP,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,WAAW,EAAE,EAAE;YACf,YAAY,EAAE,EAAE;YAChB,UAAU,EAAE,CAAC;YACb,aAAa,EAAE,CAAC;YAChB,WAAW,EAAE,CAAC;YACd,WAAW,EAAE,aAAa;YAC1B,QAAQ,EAAE,SAAS;YACnB,YAAY,EAAE,CAAC;YACf,KAAK,EAAE,KAAK,CAAC,KAAK;YAClB,QAAQ,EAAE,EAAE;YACZ,cAAc,EAAE,QAAQ;YACxB,eAAe,EAAE,eAAe,CAAC,KAAK;YACtC,QAAQ,EAAE;gBACR,KAAK,EAAE,KAAK,CAAC,KAAK;gBAClB,eAAe,EAAE,eAAe,CAAC,KAAK;aACvC;SACF,CAAC,EACF,IAAI,EAAC,QAAQ,YAEZ,QAAQ,GACF,CACV,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/button/Button.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AAiBrC,MAAM,UAAU,MAAM,CAAC,KAAkB;IACvC,MAAM,EACJ,eAAe,GAAG;QAChB,KAAK,EAAE,sBAAsB;QAC7B,KAAK,EAAE,sBAAsB;KAC9B,EACD,KAAK,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAC1C,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,GAAG,KAAK,GACjB,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,iBACE,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,CAAC;YACP,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,WAAW,EAAE,EAAE;YACf,YAAY,EAAE,EAAE;YAChB,UAAU,EAAE,CAAC;YACb,aAAa,EAAE,CAAC;YAChB,WAAW,EAAE,CAAC;YACd,WAAW,EAAE,aAAa;YAC1B,QAAQ,EAAE,SAAS;YACnB,YAAY,EAAE,CAAC;YACf,KAAK,EAAE,KAAK,CAAC,KAAK;YAClB,QAAQ,EAAE,EAAE;YACZ,cAAc,EAAE,QAAQ;YACxB,eAAe,EAAE,eAAe,CAAC,KAAK;YACtC,gBAAgB,EAAE;gBAChB,KAAK,EAAE,KAAK,CAAC,KAAK;gBAClB,eAAe,EAAE,eAAe,CAAC,KAAK;aACvC;YACD,WAAW,EAAE;gBACX,OAAO,EAAE,GAAG;gBACZ,MAAM,EAAE,aAAa;aACtB;SACF,CAAC,EACF,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,QAAQ,YAEjB,QAAQ,GACF,CACV,CAAC;AACJ,CAAC"}
@@ -0,0 +1,11 @@
1
+ import { ReactNode } from 'react';
2
+ export type CheckedState = boolean | 'indeterminate';
3
+ interface CheckboxProps {
4
+ checked?: CheckedState;
5
+ disabled?: boolean;
6
+ label?: ReactNode;
7
+ onChange?: (checked: CheckedState) => void;
8
+ }
9
+ export declare function Checkbox(props: CheckboxProps): import("@emotion/react/jsx-runtime").JSX.Element;
10
+ export {};
11
+ //# sourceMappingURL=Checkbox.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Checkbox.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,eAAe,CAAC;AAErD,UAAU,aAAa;IACrB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;CAC5C;AAKD,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,oDA2D5C"}
@@ -0,0 +1,36 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
2
+ /** @jsxImportSource @emotion/react */
3
+ import { css } from '@emotion/react';
4
+ import * as RadixCheckbox from '@radix-ui/react-checkbox';
5
+ import { RxCheck, RxMinus } from 'react-icons/rx/index';
6
+ const enabledColor = '#1677ff';
7
+ const disabledColor = '#b8b8b8';
8
+ export function Checkbox(props) {
9
+ const { checked = 'indeterminate', disabled = false, label, onChange, } = props;
10
+ return (_jsxs("label", { style: {
11
+ display: 'flex',
12
+ alignItems: 'center',
13
+ fontSize: '1.125em',
14
+ }, children: [_jsx(RadixCheckbox.Root, { checked: checked, onCheckedChange: onChange, disabled: disabled, css: css({
15
+ width: '16px',
16
+ height: '16px',
17
+ backgroundColor: disabled
18
+ ? 'rgba(0, 0, 0, 0.04)'
19
+ : checked
20
+ ? enabledColor
21
+ : 'white',
22
+ borderWidth: '1px',
23
+ borderColor: checked && !disabled ? enabledColor : disabledColor,
24
+ borderRadius: '4px',
25
+ display: 'flex',
26
+ alignItems: 'center',
27
+ justifyContent: 'center',
28
+ cursor: disabled ? 'not-allowed' : 'pointer',
29
+ }), children: _jsx(RadixCheckbox.Indicator, { css: css({
30
+ color: disabled ? disabledColor : 'white',
31
+ }), children: checked === true ? (_jsx(RxCheck, {})) : checked === 'indeterminate' ? (_jsx(RxMinus, {})) : null }) }), _jsx("span", { style: {
32
+ paddingInline: '8px',
33
+ lineHeight: '16px',
34
+ }, children: label })] }));
35
+ }
36
+ //# sourceMappingURL=Checkbox.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/forms/Checkbox.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,KAAK,aAAa,MAAM,0BAA0B,CAAC;AAE1D,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAWxD,MAAM,YAAY,GAAG,SAAS,CAAC;AAC/B,MAAM,aAAa,GAAG,SAAS,CAAC;AAEhC,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,MAAM,EACJ,OAAO,GAAG,eAAe,EACzB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,iBACE,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,QAAQ,EAAE,SAAS;SACpB,aAED,KAAC,aAAa,CAAC,IAAI,IACjB,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,QAAQ,EACzB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,CAAC;oBACP,KAAK,EAAE,MAAM;oBACb,MAAM,EAAE,MAAM;oBACd,eAAe,EAAE,QAAQ;wBACvB,CAAC,CAAC,qBAAqB;wBACvB,CAAC,CAAC,OAAO;4BACT,CAAC,CAAC,YAAY;4BACd,CAAC,CAAC,OAAO;oBACX,WAAW,EAAE,KAAK;oBAClB,WAAW,EAAE,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa;oBAChE,YAAY,EAAE,KAAK;oBACnB,OAAO,EAAE,MAAM;oBACf,UAAU,EAAE,QAAQ;oBACpB,cAAc,EAAE,QAAQ;oBACxB,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;iBAC7C,CAAC,YAEF,KAAC,aAAa,CAAC,SAAS,IACtB,GAAG,EAAE,GAAG,CAAC;wBACP,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO;qBAC1C,CAAC,YAED,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,CAClB,KAAC,OAAO,KAAG,CACZ,CAAC,CAAC,CAAC,OAAO,KAAK,eAAe,CAAC,CAAC,CAAC,CAChC,KAAC,OAAO,KAAG,CACZ,CAAC,CAAC,CAAC,IAAI,GACgB,GACP,EACrB,eACE,KAAK,EAAE;oBACL,aAAa,EAAE,KAAK;oBACpB,UAAU,EAAE,MAAM;iBACnB,YAEA,KAAK,GACD,IACD,CACT,CAAC;AACJ,CAAC"}
@@ -0,0 +1,21 @@
1
+ import { ReactNode, CSSProperties } from 'react';
2
+ interface Category {
3
+ label: ReactNode;
4
+ options: Option[];
5
+ }
6
+ interface Option {
7
+ label: ReactNode;
8
+ value: string;
9
+ disabled?: boolean;
10
+ }
11
+ export interface SelectProps {
12
+ placeholder?: string;
13
+ value: string | undefined;
14
+ onSelect?: (value: string | undefined) => void;
15
+ options: (Option[] | Category[])[];
16
+ disabled?: boolean;
17
+ style?: CSSProperties;
18
+ }
19
+ export declare function Select(props: SelectProps): import("@emotion/react/jsx-runtime").JSX.Element;
20
+ export {};
21
+ //# sourceMappingURL=Select.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Select.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAY,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAK3D,UAAU,QAAQ;IAChB,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB;AACD,UAAU,MAAM;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/C,OAAO,EAAE,CAAC,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAC,EAAE,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAkFD,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,oDAwFxC"}
@@ -0,0 +1,90 @@
1
+ import { jsxs as _jsxs, jsx as _jsx } from "@emotion/react/jsx-runtime";
2
+ /** @jsxImportSource @emotion/react */
3
+ import styled from '@emotion/styled';
4
+ import * as RadixSelect from '@radix-ui/react-select';
5
+ import { SelectGroup } from '@radix-ui/react-select';
6
+ import { Fragment } from 'react';
7
+ import { FaCheck, FaChevronDown, FaChevronUp } from 'react-icons/fa';
8
+ import { Portal } from '../root-layout/Portal';
9
+ const SelectRoot = styled.div `
10
+ display: inline-flex;
11
+ align-items: center;
12
+ justify-content: space-between;
13
+ background-color: #ffffff;
14
+ font-size: 1.125em;
15
+ width: 120px;
16
+ `;
17
+ const SelectTrigger = styled(RadixSelect.Trigger) `
18
+ width: 100%;
19
+ display: flex;
20
+ align-items: center;
21
+ justify-content: space-between;
22
+ border-radius: 4px;
23
+ border: 1px solid rgba(0, 0, 0, 0.15);
24
+ padding: 4px 11px;
25
+ user-select: none;
26
+ font-size: 1.125em;
27
+ line-height: 1.125em;
28
+
29
+ &[data-disabled] {
30
+ color: rgba(0, 0, 0, 0.5);
31
+ background-color: #f5f5f5;
32
+ }
33
+ `;
34
+ const SelectContent = styled(RadixSelect.Content) `
35
+ width: var(--radix-select-trigger-width);
36
+ max-height: var(--radix-select-content-available-height);
37
+ `;
38
+ const SelectViewport = styled(RadixSelect.Viewport) `
39
+ width: var(--radix-select-trigger-width);
40
+ border-radius: 4px;
41
+ box-sizing: border-box;
42
+ border: 1px solid rgba(0, 0, 0, 0.15);
43
+ background-color: white;
44
+ padding: 5px;
45
+ `;
46
+ const SelectItem = styled(RadixSelect.Item) `
47
+ user-select: none;
48
+ font-size: 1.125em;
49
+ padding: 4px 11px;
50
+ width: 100%;
51
+ display: flex;
52
+ align-items: center;
53
+ justify-content: space-between;
54
+
55
+ &:hover {
56
+ background-color: #e6f4ff;
57
+ }
58
+ &[data-disabled] {
59
+ color: rgba(0, 0, 0, 0.5);
60
+ }
61
+ `;
62
+ const SelectLabel = styled(RadixSelect.Label) `
63
+ color: rgba(0, 0, 0, 0.5);
64
+ font-size: 1em;
65
+ padding: 4px 11px;
66
+ margin-top: 8px;
67
+ `;
68
+ const SelectItemIndicator = styled(RadixSelect.ItemIndicator) `
69
+ right: 0;
70
+ width: 25px;
71
+ display: inline-flex;
72
+ align-items: center;
73
+ justify-content: center;
74
+ `;
75
+ const SelectSeparator = styled(RadixSelect.Separator) `
76
+ height: 1px;
77
+ width: 100%;
78
+ background-color: rgba(0, 0, 0, 0.15);
79
+ margin: 5px 0;
80
+ `;
81
+ export function Select(props) {
82
+ const { placeholder, value, onSelect, options, disabled = false, style, } = props;
83
+ const selectedLabel = options
84
+ .flatMap((group) => group.flatMap((optionOrCategory) => 'options' in optionOrCategory
85
+ ? optionOrCategory.options
86
+ : [optionOrCategory]))
87
+ .find((option) => option.value === value)?.label;
88
+ return (_jsx(SelectRoot, { style: { ...style }, children: _jsxs(RadixSelect.Root, { value: value, onValueChange: onSelect, disabled: disabled, children: [_jsxs(SelectTrigger, { children: [_jsx(RadixSelect.Value, { children: _jsxs("span", { children: [selectedLabel || placeholder, "\u00A0"] }) }), _jsx(RadixSelect.Icon, { asChild: true, children: _jsx(FaChevronDown, {}) })] }), _jsx(Portal, { children: _jsxs(SelectContent, { position: "popper", children: [_jsx(RadixSelect.ScrollUpButton, { children: _jsx(FaChevronUp, {}) }), _jsx(SelectViewport, { children: options.map((group, groupIndex) => (_jsxs(Fragment, { children: [group.map((optionOrCategory, optionOrCategoryIndex) => 'options' in optionOrCategory ? (_jsxs(SelectGroup, { children: [_jsx(SelectLabel, { children: optionOrCategory.label }), optionOrCategory.options.map((option) => (_jsxs(SelectItem, { value: option.value, disabled: option.disabled, children: [_jsx(RadixSelect.ItemText, { children: option.label }), _jsx(SelectItemIndicator, { children: _jsx(FaCheck, {}) })] }, option.value)))] }, optionOrCategoryIndex)) : (_jsxs(SelectItem, { value: optionOrCategory.value, disabled: optionOrCategory.disabled, children: [_jsx(RadixSelect.ItemText, { children: optionOrCategory.label }), _jsx(SelectItemIndicator, { children: _jsx(FaCheck, {}) })] }, optionOrCategory.value))), groupIndex < options.length - 1 && _jsx(SelectSeparator, {})] }, groupIndex))) }), _jsx(RadixSelect.ScrollDownButton, {}), _jsx(RadixSelect.Arrow, {})] }) })] }) }));
89
+ }
90
+ //# sourceMappingURL=Select.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/components/forms/Select.tsx"],"names":[],"mappings":"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"}
@@ -1,3 +1,4 @@
1
1
  export * from './Input';
2
+ export * from './Checkbox';
2
3
  export * from './context';
3
4
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/forms/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/forms/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC"}
@@ -1,3 +1,4 @@
1
1
  export * from './Input';
2
+ export * from './Checkbox';
2
3
  export * from './context';
3
4
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/forms/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/forms/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC"}
@@ -110,8 +110,15 @@ function getItemStyle(isClosed, isControlledSide, direction, size, type) {
110
110
  }
111
111
  else if (type === '%') {
112
112
  return isControlledSide
113
- ? { flex: '100 0 0%', display: 'flex' }
114
- : { flex: `${percentToFlex(size)} 0 0%`, display: 'flex' };
113
+ ? {
114
+ flex: '100 0 0%',
115
+ display: 'flex',
116
+ }
117
+ : {
118
+ flex: `${percentToFlex(size)} 0 0%`,
119
+ display: 'flex',
120
+ [isHorizontal ? 'minWidth' : 'minHeight']: 0,
121
+ };
115
122
  }
116
123
  else {
117
124
  return isControlledSide
@@ -122,8 +129,7 @@ function getItemStyle(isClosed, isControlledSide, direction, size, type) {
122
129
  : {
123
130
  flex: '1 1 0%',
124
131
  display: 'flex',
125
- minWidth: isHorizontal ? 0 : undefined,
126
- minHeight: isHorizontal ? undefined : 0,
132
+ [isHorizontal ? 'minWidth' : 'minHeight']: 0,
127
133
  };
128
134
  }
129
135
  }
@@ -1 +1 @@
1
- {"version":3,"file":"SplitPane.js","sourceRoot":"","sources":["../../../src/components/split-pane/SplitPane.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"SplitPane.js","sourceRoot":"","sources":["../../../src/components/split-pane/SplitPane.tsx"],"names":[],"mappings":"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"}
@@ -1,11 +1,12 @@
1
- import { ReactNode } from 'react';
1
+ import { CSSProperties, ReactNode } from 'react';
2
2
  export interface TableProps {
3
3
  children?: ReactNode;
4
4
  border?: boolean;
5
+ style?: CSSProperties;
5
6
  }
6
7
  export declare function Table(props: TableProps): import("@emotion/react/jsx-runtime").JSX.Element;
7
8
  export declare namespace Table {
8
- var Row: ({ children, border }: TableProps) => import("@emotion/react/jsx-runtime").JSX.Element;
9
- var Header: ({ children, border }: TableProps) => import("@emotion/react/jsx-runtime").JSX.Element;
9
+ var Row: ({ children, style, border }: TableProps) => import("@emotion/react/jsx-runtime").JSX.Element;
10
+ var Header: ({ children, style, border }: TableProps) => import("@emotion/react/jsx-runtime").JSX.Element;
10
11
  }
11
12
  //# sourceMappingURL=Table.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/table/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,SAAS,EAGV,MAAM,OAAO,CAAC;AAiDf,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,oDAYtC;yBAZe,KAAK"}
1
+ {"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../src/components/table/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,aAAa,EAGb,SAAS,EAGV,MAAM,OAAO,CAAC;AAiDf,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,oDAYtC;yBAZe,KAAK"}
@@ -41,10 +41,10 @@ function splitChildren(children) {
41
41
  return { Rows, Header };
42
42
  }
43
43
  export function Table(props) {
44
- const { border = true, children } = props;
44
+ const { border = true, style = {}, children } = props;
45
45
  const { Header, Rows } = splitChildren(children);
46
46
  const tableContextValue = useMemo(() => ({ border }), [border]);
47
- return (_jsx(TableContext.Provider, { value: tableContextValue, children: _jsxs("table", { children: [Header, _jsx("tbody", { children: Rows })] }) }));
47
+ return (_jsx(TableContext.Provider, { value: tableContextValue, children: _jsxs("table", { style: style, children: [Header, _jsx("tbody", { children: Rows })] }) }));
48
48
  }
49
49
  function useRowChildren(children) {
50
50
  const cells = [];
@@ -75,12 +75,12 @@ function useRowChildren(children) {
75
75
  }
76
76
  return { cells };
77
77
  }
78
- function Row({ children, border = false }) {
78
+ function Row({ children, style = {}, border = false }) {
79
79
  const { cells } = useRowChildren(children);
80
- return _jsx("tr", { style: { border: border ? '1px solid black' : '' }, children: cells });
80
+ return (_jsx("tr", { style: { border: border ? '1px solid black' : '', ...style }, children: cells }));
81
81
  }
82
82
  Table.Row = Row;
83
- Table.Header = ({ children, border = false }) => {
84
- return (_jsx("thead", { children: _jsx(Table.Row, { border: border, children: children }) }));
83
+ Table.Header = ({ children, style, border = false }) => {
84
+ return (_jsx("thead", { children: _jsx(Table.Row, { border: border, style: style, children: children }) }));
85
85
  };
86
86
  //# sourceMappingURL=Table.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/table/Table.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../src/components/table/Table.tsx"],"names":[],"mappings":";AAAA,sCAAsC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EACL,QAAQ,EACR,aAAa,EAEb,cAAc,EAGd,UAAU,EACV,OAAO,GACR,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,OAAO,EACP,KAAK,EACL,SAAS,EACT,MAAM,EACN,MAAM,EACN,MAAM,EACN,IAAI,EACJ,KAAK,GACN,MAAM,oBAAoB,CAAC;AAE5B,MAAM,MAAM,GAAG;IACb,MAAM,EAAE,GAAG,CAAC;QACV,MAAM,EAAE,0BAA0B;QAClC,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,UAAU;KACrB,CAAC;IACF,QAAQ,EAAE,GAAG,CAAC;QACZ,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,UAAU;KACrB,CAAC;CACH,CAAC;AAEF,MAAM,YAAY,GAAG,aAAa,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;AACrD,SAAS,eAAe;IACtB,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACzC,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,SAAS,aAAa,CAAC,QAAmB;IACxC,MAAM,IAAI,GAAmB,EAAE,CAAC;IAChC,IAAI,MAAM,GAAwB,IAAI,CAAC;IACvC,KAAK,IAAI,KAAK,IAAI,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;QAC5C,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;YACvD,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,sBAAsB,EAAE,KAAK,CAAC,CAAC;YAC7C,MAAM,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAC;SACxC;aAAM,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,GAAG,EAAE;YACnC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAClB;aAAM,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,MAAM,EAAE;YACtC,MAAM,GAAG,KAAK,CAAC;SAChB;aAAM;YACL,MAAM,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAC;SACxC;KACF;IACD,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAC1B,CAAC;AAOD,MAAM,UAAU,KAAK,CAAC,KAAiB;IACrC,MAAM,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACtD,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjD,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAChE,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,iBAAiB,YAC7C,iBAAO,KAAK,EAAE,KAAK,aAChB,MAAM,EACP,0BAAQ,IAAI,GAAS,IACf,GACc,CACzB,CAAC;AACJ,CAAC;AAED,SAAS,cAAc,CAAC,QAAmB;IACzC,MAAM,KAAK,GAAmB,EAAE,CAAC;IACjC,MAAM,EAAE,MAAM,EAAE,GAAG,eAAe,EAAE,CAAC;IACrC,KAAK,IAAI,KAAK,IAAI,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;QAC5C,IACE,OAAO,KAAK,KAAK,QAAQ;YACzB,cAAc,CAAC,KAAK,CAAC;YACrB,CAAC,KAAK,CAAC,IAAI,KAAK,KAAK;gBACnB,KAAK,CAAC,IAAI,KAAK,OAAO;gBACtB,KAAK,CAAC,IAAI,KAAK,IAAI;gBACnB,KAAK,CAAC,IAAI,KAAK,MAAM;gBACrB,KAAK,CAAC,IAAI,KAAK,KAAK;gBACpB,KAAK,CAAC,IAAI,KAAK,MAAM;gBACrB,KAAK,CAAC,IAAI,KAAK,MAAM;gBACrB,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,EAC3B;YACA,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,EAAE;gBACzB,KAAK,CAAC,IAAI,CACR,aAAoB,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,YAC9D,KAAK,IADC,KAAK,CAAC,GAAG,CAEb,CACN,CAAC;aACH;iBAAM;gBACL,KAAK,CAAC,IAAI,CACR,aAAoB,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,YAC9D,KAAK,IADC,KAAK,CAAC,GAAG,CAEb,CACN,CAAC;aACH;SACF;aAAM;YACL,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,oBAAoB,EAAE,KAAK,CAAC,CAAC;YAC3C,MAAM,IAAI,KAAK,CAAC,mBAAmB,CAAC,CAAC;SACtC;KACF;IACD,OAAO,EAAE,KAAK,EAAE,CAAC;AACnB,CAAC;AAED,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAG,EAAE,EAAE,MAAM,GAAG,KAAK,EAAc;IAC/D,MAAM,EAAE,KAAK,EAAE,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;IAC3C,OAAO,CACL,aAAI,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAAE,GAAG,KAAK,EAAE,YAC7D,KAAK,GACH,CACN,CAAC;AACJ,CAAC;AACD,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;AAChB,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,GAAG,KAAK,EAAc,EAAE,EAAE;IACjE,OAAO,CACL,0BACE,KAAC,KAAK,CAAC,GAAG,IAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,YACpC,QAAQ,GACC,GACN,CACT,CAAC;AACJ,CAAC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-science",
3
- "version": "0.22.2",
3
+ "version": "0.24.0",
4
4
  "description": "React components to build analysis UI",
5
5
  "exports": {
6
6
  "./app": {
@@ -66,6 +66,8 @@
66
66
  "@headlessui/react": "^1.7.14",
67
67
  "@lukeed/uuid": "^2.0.1",
68
68
  "@popperjs/core": "^2.11.7",
69
+ "@radix-ui/react-checkbox": "^1.0.4",
70
+ "@radix-ui/react-select": "^1.2.2",
69
71
  "@tanstack/react-query": "^4.29.5",
70
72
  "@tanstack/react-table": "^8.8.5",
71
73
  "biologic-converter": "^0.6.0",
@@ -13,6 +13,7 @@ interface ButtonProps {
13
13
  color?: Colorhover;
14
14
  onClick?: () => void;
15
15
  style?: CSSProperties;
16
+ disabled?: boolean;
16
17
  }
17
18
 
18
19
  export function Button(props: ButtonProps) {
@@ -25,6 +26,7 @@ export function Button(props: ButtonProps) {
25
26
  style,
26
27
  onClick,
27
28
  children,
29
+ disabled = false,
28
30
  } = props;
29
31
 
30
32
  return (
@@ -46,12 +48,17 @@ export function Button(props: ButtonProps) {
46
48
  minWidth: 30,
47
49
  justifyContent: 'center',
48
50
  backgroundColor: backgroundColor.basic,
49
- ':hover': {
51
+ ':hover:enabled': {
50
52
  color: color.hover,
51
53
  backgroundColor: backgroundColor.hover,
52
54
  },
55
+ ':disabled': {
56
+ opacity: 0.5,
57
+ cursor: 'not-allowed',
58
+ },
53
59
  })}
54
60
  type="button"
61
+ disabled={disabled}
55
62
  >
56
63
  {children}
57
64
  </button>
@@ -0,0 +1,78 @@
1
+ /** @jsxImportSource @emotion/react */
2
+ import { css } from '@emotion/react';
3
+ import * as RadixCheckbox from '@radix-ui/react-checkbox';
4
+ import { ReactNode } from 'react';
5
+ import { RxCheck, RxMinus } from 'react-icons/rx/index';
6
+
7
+ export type CheckedState = boolean | 'indeterminate';
8
+
9
+ interface CheckboxProps {
10
+ checked?: CheckedState;
11
+ disabled?: boolean;
12
+ label?: ReactNode;
13
+ onChange?: (checked: CheckedState) => void;
14
+ }
15
+
16
+ const enabledColor = '#1677ff';
17
+ const disabledColor = '#b8b8b8';
18
+
19
+ export function Checkbox(props: CheckboxProps) {
20
+ const {
21
+ checked = 'indeterminate',
22
+ disabled = false,
23
+ label,
24
+ onChange,
25
+ } = props;
26
+
27
+ return (
28
+ <label
29
+ style={{
30
+ display: 'flex',
31
+ alignItems: 'center',
32
+ fontSize: '1.125em',
33
+ }}
34
+ >
35
+ <RadixCheckbox.Root
36
+ checked={checked}
37
+ onCheckedChange={onChange}
38
+ disabled={disabled}
39
+ css={css({
40
+ width: '16px',
41
+ height: '16px',
42
+ backgroundColor: disabled
43
+ ? 'rgba(0, 0, 0, 0.04)'
44
+ : checked
45
+ ? enabledColor
46
+ : 'white',
47
+ borderWidth: '1px',
48
+ borderColor: checked && !disabled ? enabledColor : disabledColor,
49
+ borderRadius: '4px',
50
+ display: 'flex',
51
+ alignItems: 'center',
52
+ justifyContent: 'center',
53
+ cursor: disabled ? 'not-allowed' : 'pointer',
54
+ })}
55
+ >
56
+ <RadixCheckbox.Indicator
57
+ css={css({
58
+ color: disabled ? disabledColor : 'white',
59
+ })}
60
+ >
61
+ {checked === true ? (
62
+ <RxCheck />
63
+ ) : checked === 'indeterminate' ? (
64
+ <RxMinus />
65
+ ) : null}
66
+ </RadixCheckbox.Indicator>
67
+ </RadixCheckbox.Root>
68
+ <span
69
+ style={{
70
+ paddingInline: '8px',
71
+ lineHeight: '16px',
72
+ }}
73
+ >
74
+ {label}
75
+ </span>
76
+ </label>
77
+ );
78
+ }
@@ -0,0 +1,197 @@
1
+ /** @jsxImportSource @emotion/react */
2
+ import styled from '@emotion/styled';
3
+ import * as RadixSelect from '@radix-ui/react-select';
4
+ import { SelectGroup } from '@radix-ui/react-select';
5
+ import { Fragment, ReactNode, CSSProperties } from 'react';
6
+ import { FaCheck, FaChevronDown, FaChevronUp } from 'react-icons/fa';
7
+
8
+ import { Portal } from '../root-layout/Portal';
9
+
10
+ interface Category {
11
+ label: ReactNode;
12
+ options: Option[];
13
+ }
14
+ interface Option {
15
+ label: ReactNode;
16
+ value: string;
17
+ disabled?: boolean;
18
+ }
19
+
20
+ export interface SelectProps {
21
+ placeholder?: string;
22
+ value: string | undefined;
23
+ onSelect?: (value: string | undefined) => void;
24
+ options: (Option[] | Category[])[];
25
+ disabled?: boolean;
26
+ style?: CSSProperties;
27
+ }
28
+
29
+ const SelectRoot = styled.div`
30
+ display: inline-flex;
31
+ align-items: center;
32
+ justify-content: space-between;
33
+ background-color: #ffffff;
34
+ font-size: 1.125em;
35
+ width: 120px;
36
+ `;
37
+
38
+ const SelectTrigger = styled(RadixSelect.Trigger)`
39
+ width: 100%;
40
+ display: flex;
41
+ align-items: center;
42
+ justify-content: space-between;
43
+ border-radius: 4px;
44
+ border: 1px solid rgba(0, 0, 0, 0.15);
45
+ padding: 4px 11px;
46
+ user-select: none;
47
+ font-size: 1.125em;
48
+ line-height: 1.125em;
49
+
50
+ &[data-disabled] {
51
+ color: rgba(0, 0, 0, 0.5);
52
+ background-color: #f5f5f5;
53
+ }
54
+ `;
55
+
56
+ const SelectContent = styled(RadixSelect.Content)`
57
+ width: var(--radix-select-trigger-width);
58
+ max-height: var(--radix-select-content-available-height);
59
+ `;
60
+
61
+ const SelectViewport = styled(RadixSelect.Viewport)`
62
+ width: var(--radix-select-trigger-width);
63
+ border-radius: 4px;
64
+ box-sizing: border-box;
65
+ border: 1px solid rgba(0, 0, 0, 0.15);
66
+ background-color: white;
67
+ padding: 5px;
68
+ `;
69
+
70
+ const SelectItem = styled(RadixSelect.Item)`
71
+ user-select: none;
72
+ font-size: 1.125em;
73
+ padding: 4px 11px;
74
+ width: 100%;
75
+ display: flex;
76
+ align-items: center;
77
+ justify-content: space-between;
78
+
79
+ &:hover {
80
+ background-color: #e6f4ff;
81
+ }
82
+ &[data-disabled] {
83
+ color: rgba(0, 0, 0, 0.5);
84
+ }
85
+ `;
86
+
87
+ const SelectLabel = styled(RadixSelect.Label)`
88
+ color: rgba(0, 0, 0, 0.5);
89
+ font-size: 1em;
90
+ padding: 4px 11px;
91
+ margin-top: 8px;
92
+ `;
93
+
94
+ const SelectItemIndicator = styled(RadixSelect.ItemIndicator)`
95
+ right: 0;
96
+ width: 25px;
97
+ display: inline-flex;
98
+ align-items: center;
99
+ justify-content: center;
100
+ `;
101
+
102
+ const SelectSeparator = styled(RadixSelect.Separator)`
103
+ height: 1px;
104
+ width: 100%;
105
+ background-color: rgba(0, 0, 0, 0.15);
106
+ margin: 5px 0;
107
+ `;
108
+
109
+ export function Select(props: SelectProps) {
110
+ const {
111
+ placeholder,
112
+ value,
113
+ onSelect,
114
+ options,
115
+ disabled = false,
116
+ style,
117
+ } = props;
118
+
119
+ const selectedLabel = options
120
+ .flatMap((group) =>
121
+ group.flatMap((optionOrCategory) =>
122
+ 'options' in optionOrCategory
123
+ ? optionOrCategory.options
124
+ : [optionOrCategory],
125
+ ),
126
+ )
127
+ .find((option) => option.value === value)?.label;
128
+
129
+ return (
130
+ <SelectRoot style={{ ...style }}>
131
+ <RadixSelect.Root
132
+ value={value}
133
+ onValueChange={onSelect}
134
+ disabled={disabled}
135
+ >
136
+ <SelectTrigger>
137
+ <RadixSelect.Value>
138
+ <span>{selectedLabel || placeholder}&nbsp;</span>
139
+ </RadixSelect.Value>
140
+ <RadixSelect.Icon asChild>
141
+ <FaChevronDown />
142
+ </RadixSelect.Icon>
143
+ </SelectTrigger>
144
+ <Portal>
145
+ <SelectContent position="popper">
146
+ <RadixSelect.ScrollUpButton>
147
+ <FaChevronUp />
148
+ </RadixSelect.ScrollUpButton>
149
+ <SelectViewport>
150
+ {options.map((group, groupIndex) => (
151
+ <Fragment key={groupIndex}>
152
+ {group.map((optionOrCategory, optionOrCategoryIndex) =>
153
+ 'options' in optionOrCategory ? (
154
+ <SelectGroup key={optionOrCategoryIndex}>
155
+ <SelectLabel>{optionOrCategory.label}</SelectLabel>
156
+ {optionOrCategory.options.map((option) => (
157
+ <SelectItem
158
+ key={option.value}
159
+ value={option.value}
160
+ disabled={option.disabled}
161
+ >
162
+ <RadixSelect.ItemText>
163
+ {option.label}
164
+ </RadixSelect.ItemText>
165
+ <SelectItemIndicator>
166
+ <FaCheck />
167
+ </SelectItemIndicator>
168
+ </SelectItem>
169
+ ))}
170
+ </SelectGroup>
171
+ ) : (
172
+ <SelectItem
173
+ key={optionOrCategory.value}
174
+ value={optionOrCategory.value}
175
+ disabled={optionOrCategory.disabled}
176
+ >
177
+ <RadixSelect.ItemText>
178
+ {optionOrCategory.label}
179
+ </RadixSelect.ItemText>
180
+ <SelectItemIndicator>
181
+ <FaCheck />
182
+ </SelectItemIndicator>
183
+ </SelectItem>
184
+ ),
185
+ )}
186
+ {groupIndex < options.length - 1 && <SelectSeparator />}
187
+ </Fragment>
188
+ ))}
189
+ </SelectViewport>
190
+ <RadixSelect.ScrollDownButton />
191
+ <RadixSelect.Arrow />
192
+ </SelectContent>
193
+ </Portal>
194
+ </RadixSelect.Root>
195
+ </SelectRoot>
196
+ );
197
+ }
@@ -1,2 +1,3 @@
1
1
  export * from './Input';
2
+ export * from './Checkbox';
2
3
  export * from './context';
@@ -257,8 +257,15 @@ function getItemStyle(
257
257
  : { flex: '1 1 0%', display: 'flex' };
258
258
  } else if (type === '%') {
259
259
  return isControlledSide
260
- ? { flex: '100 0 0%', display: 'flex' }
261
- : { flex: `${percentToFlex(size)} 0 0%`, display: 'flex' };
260
+ ? {
261
+ flex: '100 0 0%',
262
+ display: 'flex',
263
+ }
264
+ : {
265
+ flex: `${percentToFlex(size)} 0 0%`,
266
+ display: 'flex',
267
+ [isHorizontal ? 'minWidth' : 'minHeight']: 0,
268
+ };
262
269
  } else {
263
270
  return isControlledSide
264
271
  ? {
@@ -268,8 +275,7 @@ function getItemStyle(
268
275
  : {
269
276
  flex: '1 1 0%',
270
277
  display: 'flex',
271
- minWidth: isHorizontal ? 0 : undefined,
272
- minHeight: isHorizontal ? undefined : 0,
278
+ [isHorizontal ? 'minWidth' : 'minHeight']: 0,
273
279
  };
274
280
  }
275
281
  }
@@ -3,6 +3,7 @@ import { css } from '@emotion/react';
3
3
  import {
4
4
  Children,
5
5
  createContext,
6
+ CSSProperties,
6
7
  isValidElement,
7
8
  ReactElement,
8
9
  ReactNode,
@@ -60,15 +61,16 @@ function splitChildren(children: ReactNode) {
60
61
  export interface TableProps {
61
62
  children?: ReactNode;
62
63
  border?: boolean;
64
+ style?: CSSProperties;
63
65
  }
64
66
 
65
67
  export function Table(props: TableProps) {
66
- const { border = true, children } = props;
68
+ const { border = true, style = {}, children } = props;
67
69
  const { Header, Rows } = splitChildren(children);
68
70
  const tableContextValue = useMemo(() => ({ border }), [border]);
69
71
  return (
70
72
  <TableContext.Provider value={tableContextValue}>
71
- <table>
73
+ <table style={style}>
72
74
  {Header}
73
75
  <tbody>{Rows}</tbody>
74
76
  </table>
@@ -114,15 +116,21 @@ function useRowChildren(children: ReactNode) {
114
116
  return { cells };
115
117
  }
116
118
 
117
- function Row({ children, border = false }: TableProps) {
119
+ function Row({ children, style = {}, border = false }: TableProps) {
118
120
  const { cells } = useRowChildren(children);
119
- return <tr style={{ border: border ? '1px solid black' : '' }}>{cells}</tr>;
121
+ return (
122
+ <tr style={{ border: border ? '1px solid black' : '', ...style }}>
123
+ {cells}
124
+ </tr>
125
+ );
120
126
  }
121
127
  Table.Row = Row;
122
- Table.Header = ({ children, border = false }: TableProps) => {
128
+ Table.Header = ({ children, style, border = false }: TableProps) => {
123
129
  return (
124
130
  <thead>
125
- <Table.Row border={border}>{children}</Table.Row>
131
+ <Table.Row border={border} style={style}>
132
+ {children}
133
+ </Table.Row>
126
134
  </thead>
127
135
  );
128
136
  };