@homebound/beam 2.183.1 → 2.183.3
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.
|
@@ -146,6 +146,7 @@ function GridTable(props) {
|
|
|
146
146
|
level,
|
|
147
147
|
getCount,
|
|
148
148
|
api,
|
|
149
|
+
cellHighlight: "cellHighlight" in maybeStyle && maybeStyle.cellHighlight === true,
|
|
149
150
|
...sortProps,
|
|
150
151
|
}), `${row.kind}-${row.id}`));
|
|
151
152
|
}
|
|
@@ -467,7 +468,7 @@ function getFirstOrLastCellCss(style, columnIndex, columns) {
|
|
|
467
468
|
// We extract GridRow to its own mini-component primarily so we can React.memo'ize it.
|
|
468
469
|
function GridRow(props) {
|
|
469
470
|
var _a;
|
|
470
|
-
const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sortOn, sortState, setSortKey, columnSizes, level, getCount, api, ...others } = props;
|
|
471
|
+
const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sortOn, sortState, setSortKey, columnSizes, level, getCount, api, cellHighlight, ...others } = props;
|
|
471
472
|
const { rowState } = (0, react_1.useContext)(RowState_1.RowStateContext);
|
|
472
473
|
const rowId = `${row.kind}_${row.id}`;
|
|
473
474
|
const isActive = (0, hooks_1.useComputed)(() => rowState.activeRowId === rowId, [rowId, rowState]);
|
|
@@ -535,7 +536,7 @@ function GridRow(props) {
|
|
|
535
536
|
}
|
|
536
537
|
: {};
|
|
537
538
|
const cellId = `${row.kind}_${row.id}_${column.name}`;
|
|
538
|
-
const applyCellHighlight = !!column.name && !isHeader && !isTotals;
|
|
539
|
+
const applyCellHighlight = cellHighlight && !!column.name && !isHeader && !isTotals;
|
|
539
540
|
const isCellActive = rowState.activeCellId === cellId;
|
|
540
541
|
// Note that it seems expensive to calc a per-cell class name/CSS-in-JS output,
|
|
541
542
|
// vs. setting global/table-wide CSS like `style.cellCss` on the root grid div with
|
|
@@ -158,7 +158,7 @@ function DateFieldBase(props) {
|
|
|
158
158
|
setInputValue("");
|
|
159
159
|
onChange(undefined);
|
|
160
160
|
} }, void 0)) }, void 0));
|
|
161
|
-
const calendarButton = ((0, jsx_runtime_1.jsx)("button", Object.assign({ ref: buttonRef }, buttonProps, { disabled: isDisabled, css: Css_1.Css.if(isDisabled).cursorNotAllowed.$, tabIndex: -1 }, tid.calendarButton, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "calendar", color: Css_1.Palette.Gray700 }, void 0) }), void 0));
|
|
161
|
+
const calendarButton = ((0, jsx_runtime_1.jsx)("button", Object.assign({ ref: buttonRef }, buttonProps, { disabled: isDisabled, css: Css_1.Css.if(isDisabled).cursorNotAllowed.$, tabIndex: -1 }, tid.calendarButton, { children: (0, jsx_runtime_1.jsx)(components_1.Icon, { icon: "calendar", color: isDisabled ? Css_1.Palette.Gray400 : Css_1.Palette.Gray700 }, void 0) }), void 0));
|
|
162
162
|
const EndFieldButtons = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isRangeFilterField && clearButton, !hideCalendarIcon && calendarButton] }, void 0));
|
|
163
163
|
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextFieldBase_1.TextFieldBase, Object.assign({}, textFieldProps, { errorMsg: errorMsg, helperText: helperText, required: required, labelProps: labelProps, inputProps: { ...triggerProps, ...inputProps, size: inputSize }, inputRef: inputRef, inputWrapRef: inputWrapRef, inlineLabel: inlineLabel, onChange: (v) => {
|
|
164
164
|
// hide the calendar if the user is manually entering the date
|
|
@@ -33,6 +33,11 @@ function TextFieldBase(props) {
|
|
|
33
33
|
const maybeSmaller = compound ? 2 : 0;
|
|
34
34
|
const fieldHeight = 40;
|
|
35
35
|
const compactFieldHeight = 32;
|
|
36
|
+
const [bgColor, hoverBgColor, disabledBgColor] = contrast
|
|
37
|
+
? [Css_1.Palette.Gray700, Css_1.Palette.Gray600, Css_1.Palette.Gray700]
|
|
38
|
+
: borderless && !compound
|
|
39
|
+
? [Css_1.Palette.Gray100, Css_1.Palette.Gray200, Css_1.Palette.Gray200]
|
|
40
|
+
: [Css_1.Palette.White, Css_1.Palette.Gray100, Css_1.Palette.Gray100];
|
|
36
41
|
const fieldStyles = {
|
|
37
42
|
container: Css_1.Css.df.fdc.w100.maxw((0, Css_1.px)(550)).relative.$,
|
|
38
43
|
inputWrapper: {
|
|
@@ -40,7 +45,7 @@ function TextFieldBase(props) {
|
|
|
40
45
|
.hPx(fieldHeight - maybeSmaller)
|
|
41
46
|
.if(compact)
|
|
42
47
|
.hPx(compactFieldHeight - maybeSmaller).$,
|
|
43
|
-
...Css_1.Css.
|
|
48
|
+
...Css_1.Css.bgColor(bgColor).gray900.if(contrast).white.$,
|
|
44
49
|
// When borderless then perceived vertical alignments are misaligned. As there is no longer a border, then the field looks oddly indented.
|
|
45
50
|
// This typically happens in tables when a column has a mix of static text (i.e. "roll up" rows and table headers) and input fields.
|
|
46
51
|
// To remedy this perceived misalignment then we increase the width by the horizontal padding applied (16px), and set a negative margin left margin to re-center the field.
|
|
@@ -60,14 +65,14 @@ function TextFieldBase(props) {
|
|
|
60
65
|
.mhPx(compactFieldHeight - maybeSmaller).$),
|
|
61
66
|
},
|
|
62
67
|
input: {
|
|
63
|
-
...Css_1.Css.w100.mw0.outline0.fg1.if(multiline).br4.$,
|
|
68
|
+
...Css_1.Css.w100.mw0.outline0.fg1.bgColor(bgColor).if(multiline).br4.$,
|
|
64
69
|
// Not using Truss's inline `if` statement here because `addIn` properties do not respect the if statement.
|
|
65
|
-
...(
|
|
70
|
+
...(contrast && Css_1.Css.addIn("&::selection", Css_1.Css.bgGray800.$).$),
|
|
66
71
|
},
|
|
67
|
-
hover: Css_1.Css.
|
|
72
|
+
hover: Css_1.Css.bgColor(hoverBgColor).if(contrast).bGray600.$,
|
|
68
73
|
focus: Css_1.Css.bLightBlue700.if(contrast).bLightBlue500.$,
|
|
69
74
|
disabled: visuallyDisabled
|
|
70
|
-
? Css_1.Css.cursorNotAllowed.
|
|
75
|
+
? Css_1.Css.cursorNotAllowed.gray600.bgColor(disabledBgColor).if(contrast).gray500.$
|
|
71
76
|
: Css_1.Css.cursorNotAllowed.$,
|
|
72
77
|
error: Css_1.Css.bRed600.if(contrast).bRed400.$,
|
|
73
78
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@homebound/beam",
|
|
3
|
-
"version": "2.183.
|
|
3
|
+
"version": "2.183.3",
|
|
4
4
|
"author": "Homebound",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -21,15 +21,16 @@
|
|
|
21
21
|
"start": "yarn storybook",
|
|
22
22
|
"build": "yarn copy && ttsc",
|
|
23
23
|
"build:truss": "truss",
|
|
24
|
-
"build:storybook": "build-storybook -s
|
|
24
|
+
"build:storybook": "build-storybook -s storybookAssets",
|
|
25
25
|
"test": "jest --maxWorkers 4",
|
|
26
26
|
"test:watch": "jest --watch",
|
|
27
|
-
"lint": "eslint
|
|
28
|
-
"
|
|
27
|
+
"lint": "eslint --ext js,ts,tsx src",
|
|
28
|
+
"lint:fix": "eslint --ext js,ts,tsx --fix src",
|
|
29
|
+
"storybook": "start-storybook -p 9000 -s storybookAssets",
|
|
29
30
|
"chromatic": "chromatic --project-token=074248da7284 --exit-once-uploaded",
|
|
30
31
|
"copy": "npx copyfiles -u 1 \"./src/**/*.css\" \"./dist/\"",
|
|
31
32
|
"copy-to-internal-frontend": "cp -r dist/* ~/homebound/internal-frontend/node_modules/@homebound/beam/dist/",
|
|
32
|
-
"format": "prettier --loglevel warn --write \"**/*.{ts,tsx,css,md}\""
|
|
33
|
+
"format": "prettier --loglevel warn --write \"**/*.{ts,tsx,css,md,mdx}\""
|
|
33
34
|
},
|
|
34
35
|
"dependencies": {
|
|
35
36
|
"@homebound/form-state": "^2.15.3",
|
|
@@ -73,6 +74,7 @@
|
|
|
73
74
|
"@emotion/babel-preset-css-prop": "^11.2.0",
|
|
74
75
|
"@emotion/jest": "^11.3.0",
|
|
75
76
|
"@emotion/react": "^11.1.5",
|
|
77
|
+
"@homebound/eslint-config": "1.5.1",
|
|
76
78
|
"@homebound/rtl-react-router-utils": "^1.0.3",
|
|
77
79
|
"@homebound/rtl-utils": "^2.59.3",
|
|
78
80
|
"@homebound/truss": "^1.113.0",
|
|
@@ -80,11 +82,13 @@
|
|
|
80
82
|
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
|
|
81
83
|
"@semantic-release/exec": "^6.0.3",
|
|
82
84
|
"@semantic-release/git": "^9.0.0",
|
|
85
|
+
"@storybook/addon-docs": "^6.5.10",
|
|
83
86
|
"@storybook/addon-essentials": "^6.5.10",
|
|
84
87
|
"@storybook/addon-interactions": "^6.5.10",
|
|
85
88
|
"@storybook/addon-links": "^6.5.10",
|
|
86
89
|
"@storybook/addons": "^6.5.10",
|
|
87
90
|
"@storybook/builder-vite": "^0.2.2",
|
|
91
|
+
"@storybook/mdx2-csf": "^0.0.3",
|
|
88
92
|
"@storybook/react": "^6.5.10",
|
|
89
93
|
"@storybook/testing-library": "^0.0.13",
|
|
90
94
|
"@testing-library/jest-dom": "^5.11.9",
|
|
@@ -96,22 +100,13 @@
|
|
|
96
100
|
"@types/react-beautiful-dnd": "^13.1.2",
|
|
97
101
|
"@types/react-dom": "^16.9.11",
|
|
98
102
|
"@types/react-router-dom": "^5.1.7",
|
|
99
|
-
"@typescript-eslint/eslint-plugin": "^4.17.0",
|
|
100
|
-
"@typescript-eslint/parser": "^4.17.0",
|
|
101
103
|
"@vitejs/plugin-react": "^2.0.1",
|
|
102
104
|
"array-move": "^4.0.0",
|
|
103
105
|
"babel-eslint": "^10.1.0",
|
|
104
106
|
"babel-loader": "^8.2.2",
|
|
105
107
|
"chromatic": "^5.9.2",
|
|
106
108
|
"conventional-changelog-conventionalcommits": "^4.5.0",
|
|
107
|
-
"eslint": "^
|
|
108
|
-
"eslint-config-prettier": "^8.1.0",
|
|
109
|
-
"eslint-config-react-app": "^6.0.0",
|
|
110
|
-
"eslint-plugin-flowtype": "^5.3.1",
|
|
111
|
-
"eslint-plugin-import": "^2.22.1",
|
|
112
|
-
"eslint-plugin-jsx-a11y": "^6.4.1",
|
|
113
|
-
"eslint-plugin-react": "^7.22.0",
|
|
114
|
-
"eslint-plugin-react-hooks": "^4.2.0",
|
|
109
|
+
"eslint": "^8.12.0",
|
|
115
110
|
"eslint-plugin-storybook": "^0.6.4",
|
|
116
111
|
"husky": "^5.1.1",
|
|
117
112
|
"identity-obj-proxy": "^3.0.0",
|