pixel-react 1.7.3 → 1.7.4
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.
- package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -2
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -1
- package/lib/components/Select/Select.stories.d.ts +0 -1
- package/lib/components/StatusCard/types.d.ts +7 -1
- package/lib/index.d.ts +8 -1
- package/lib/index.esm.js +54 -30
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +54 -30
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/assets/icons/approval_pending.svg +8 -8
- package/src/assets/icons/configuration.svg +3 -3
- package/src/assets/icons/defects.svg +8 -8
- package/src/assets/icons/element.svg +4 -4
- package/src/assets/icons/project_element.svg +4 -4
- package/src/assets/icons/step_group.svg +10 -10
- package/src/assets/icons/variable.svg +3 -3
- package/src/assets/icons/web_service_icon.svg +3 -3
- package/src/components/Charts/BarChart/BarChart.stories.tsx +3 -0
- package/src/components/Charts/BarChart/BarChart.tsx +7 -0
- package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +1 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/CornerIndicator.tsx +8 -7
- package/src/components/Excel/ExcelFile/ExcelFileComponents/HeaderRow.tsx +3 -1
- package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +21 -2
- package/src/components/StatusCard/StatusCard.scss +47 -4
- package/src/components/StatusCard/StatusCard.stories.tsx +1 -0
- package/src/components/StatusCard/StatusCard.tsx +28 -5
- package/src/components/StatusCard/types.ts +15 -10
- package/src/components/Toastify/Toastify.tsx +1 -0
- package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
- package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
- package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
- package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
- package/lib/components/AddButton/AddButton.d.ts +0 -5
- package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
- package/lib/components/AddButton/index.d.ts +0 -1
- package/lib/components/AddButton/types.d.ts +0 -4
- package/lib/components/AddVariables/AddVariables.d.ts +0 -5
- package/lib/components/AddVariables/index.d.ts +0 -1
- package/lib/components/AddVariables/types.d.ts +0 -35
- package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
- package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
- package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
- package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
- package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
- package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
- package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
- package/lib/components/Editor/Editor.stories.d.ts +0 -6
- package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
- package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
- package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
- package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
- package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
- package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
- /package/lib/components/ExcelFile/{ColorBarSelector → ColorBarselector}/ColorBarSelector.d.ts +0 -0
package/lib/index.js
CHANGED
@@ -8002,7 +8002,7 @@ function createFormControl(props = {}) {
|
|
8002
8002
|
timer = setTimeout(callback, wait);
|
8003
8003
|
};
|
8004
8004
|
const _updateValid = async (shouldUpdateValid) => {
|
8005
|
-
if (!
|
8005
|
+
if (!_options.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
|
8006
8006
|
const isValid = _options.resolver
|
8007
8007
|
? isEmptyObject((await _executeSchema()).errors)
|
8008
8008
|
: await executeBuiltInValidation(_fields, true);
|
@@ -8014,7 +8014,7 @@ function createFormControl(props = {}) {
|
|
8014
8014
|
}
|
8015
8015
|
};
|
8016
8016
|
const _updateIsValidating = (names, isValidating) => {
|
8017
|
-
if (!
|
8017
|
+
if (!_options.disabled &&
|
8018
8018
|
(_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
|
8019
8019
|
(names || Array.from(_names.mount)).forEach((name) => {
|
8020
8020
|
if (name) {
|
@@ -8030,7 +8030,7 @@ function createFormControl(props = {}) {
|
|
8030
8030
|
}
|
8031
8031
|
};
|
8032
8032
|
const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
|
8033
|
-
if (args && method && !
|
8033
|
+
if (args && method && !_options.disabled) {
|
8034
8034
|
_state.action = true;
|
8035
8035
|
if (shouldUpdateFieldsAndState && Array.isArray(get$1(_fields, name))) {
|
8036
8036
|
const fieldValues = method(get$1(_fields, name), args.argA, args.argB);
|
@@ -8094,7 +8094,7 @@ function createFormControl(props = {}) {
|
|
8094
8094
|
const output = {
|
8095
8095
|
name,
|
8096
8096
|
};
|
8097
|
-
if (!
|
8097
|
+
if (!_options.disabled) {
|
8098
8098
|
const disabledField = !!(get$1(_fields, name) &&
|
8099
8099
|
get$1(_fields, name)._f &&
|
8100
8100
|
get$1(_fields, name)._f.disabled);
|
@@ -8230,7 +8230,7 @@ function createFormControl(props = {}) {
|
|
8230
8230
|
}
|
8231
8231
|
_names.unMount = new Set();
|
8232
8232
|
};
|
8233
|
-
const _getDirty = (name, data) => !
|
8233
|
+
const _getDirty = (name, data) => !_options.disabled &&
|
8234
8234
|
(name && data && set$1(_formValues, name, data),
|
8235
8235
|
!deepEqual(getValues(), _defaultValues));
|
8236
8236
|
const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
|
@@ -8546,7 +8546,7 @@ function createFormControl(props = {}) {
|
|
8546
8546
|
};
|
8547
8547
|
const register = (name, options = {}) => {
|
8548
8548
|
let field = get$1(_fields, name);
|
8549
|
-
const disabledIsDefined = isBoolean(options.disabled) || isBoolean(
|
8549
|
+
const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
|
8550
8550
|
set$1(_fields, name, {
|
8551
8551
|
...(field || {}),
|
8552
8552
|
_f: {
|
@@ -8562,7 +8562,7 @@ function createFormControl(props = {}) {
|
|
8562
8562
|
field,
|
8563
8563
|
disabled: isBoolean(options.disabled)
|
8564
8564
|
? options.disabled
|
8565
|
-
:
|
8565
|
+
: _options.disabled,
|
8566
8566
|
name,
|
8567
8567
|
value: options.value,
|
8568
8568
|
});
|
@@ -8572,7 +8572,7 @@ function createFormControl(props = {}) {
|
|
8572
8572
|
}
|
8573
8573
|
return {
|
8574
8574
|
...(disabledIsDefined
|
8575
|
-
? { disabled: options.disabled ||
|
8575
|
+
? { disabled: options.disabled || _options.disabled }
|
8576
8576
|
: {}),
|
8577
8577
|
...(_options.progressive
|
8578
8578
|
? {
|
@@ -8656,6 +8656,12 @@ function createFormControl(props = {}) {
|
|
8656
8656
|
e.preventDefault && e.preventDefault();
|
8657
8657
|
e.persist && e.persist();
|
8658
8658
|
}
|
8659
|
+
if (_options.disabled) {
|
8660
|
+
if (onInvalid) {
|
8661
|
+
await onInvalid({ ..._formState.errors }, e);
|
8662
|
+
}
|
8663
|
+
return;
|
8664
|
+
}
|
8659
8665
|
let fieldValues = cloneObject(_formValues);
|
8660
8666
|
_subjects.state.next({
|
8661
8667
|
isSubmitting: true,
|
@@ -8834,7 +8840,9 @@ function createFormControl(props = {}) {
|
|
8834
8840
|
: fieldReference.ref;
|
8835
8841
|
if (fieldRef.focus) {
|
8836
8842
|
fieldRef.focus();
|
8837
|
-
options.shouldSelect &&
|
8843
|
+
options.shouldSelect &&
|
8844
|
+
isFunction$1(fieldRef.select) &&
|
8845
|
+
fieldRef.select();
|
8838
8846
|
}
|
8839
8847
|
}
|
8840
8848
|
};
|
@@ -9035,11 +9043,6 @@ function useForm(props = {}) {
|
|
9035
9043
|
values: control._getWatch(),
|
9036
9044
|
});
|
9037
9045
|
}, [props.shouldUnregister, control]);
|
9038
|
-
React.useEffect(() => {
|
9039
|
-
if (_formControl.current) {
|
9040
|
-
_formControl.current.watch = _formControl.current.watch.bind({});
|
9041
|
-
}
|
9042
|
-
}, [formState]);
|
9043
9046
|
_formControl.current.formState = getProxyFormState(formState, control);
|
9044
9047
|
return _formControl.current;
|
9045
9048
|
}
|
@@ -27249,7 +27252,8 @@ const Toastify = () => {
|
|
27249
27252
|
isOpen: toastProps.isOpen,
|
27250
27253
|
variant: toastProps.variant,
|
27251
27254
|
toastTitle: toastProps.toastTitle,
|
27252
|
-
toastMessage: toastProps.toastMessage
|
27255
|
+
toastMessage: toastProps.toastMessage,
|
27256
|
+
zIndex: 1000000000
|
27253
27257
|
});
|
27254
27258
|
};
|
27255
27259
|
// Utility to trigger toast messages outside of the Toastify component
|
@@ -31384,6 +31388,7 @@ const Row = props => jsxRuntime.jsx("tr", {
|
|
31384
31388
|
});
|
31385
31389
|
|
31386
31390
|
const HeaderRow = props => jsxRuntime.jsx("tr", {
|
31391
|
+
className: "ff-spreadsheet-row-header",
|
31387
31392
|
...props
|
31388
31393
|
});
|
31389
31394
|
|
@@ -31403,14 +31408,17 @@ const CornerIndicator = ({
|
|
31403
31408
|
onSelect();
|
31404
31409
|
}, [onSelect]);
|
31405
31410
|
return jsxRuntime.jsx("th", {
|
31406
|
-
className:
|
31407
|
-
'ff-spreadsheet-header--selected': selected
|
31408
|
-
}),
|
31411
|
+
className: 'ff-spreadsheet-corner-header',
|
31409
31412
|
onClick: handleClick,
|
31410
31413
|
tabIndex: 0,
|
31411
|
-
children: jsxRuntime.jsx(
|
31412
|
-
|
31413
|
-
|
31414
|
+
children: jsxRuntime.jsx("div", {
|
31415
|
+
className: classNames('corner-header', {
|
31416
|
+
'ff-spreadsheet-header--selected': selected
|
31417
|
+
}),
|
31418
|
+
children: jsxRuntime.jsx(Icon, {
|
31419
|
+
variant: selected ? 'dark' : 'light',
|
31420
|
+
name: "excel_corner_menu"
|
31421
|
+
})
|
31414
31422
|
})
|
31415
31423
|
});
|
31416
31424
|
};
|
@@ -31492,7 +31500,7 @@ const ColumnIndicator = ({
|
|
31492
31500
|
return jsxRuntime.jsxs("th", {
|
31493
31501
|
style: {
|
31494
31502
|
minWidth: `${columnWidth}px`,
|
31495
|
-
position: '
|
31503
|
+
position: 'sticky'
|
31496
31504
|
},
|
31497
31505
|
className: classNames('ff-spreadsheet-header', {
|
31498
31506
|
'ff-spreadsheet-header--selected': selected
|
@@ -32025,7 +32033,7 @@ const Copied = () => {
|
|
32025
32033
|
});
|
32026
32034
|
};
|
32027
32035
|
|
32028
|
-
var css_248z$n = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-excel {\n display: flex;\n flex-direction: column;\n}\n.ff-excel .ff-excel-toolbar-container {\n position: relative;\n top: 0;\n background-color: var(--excel-toolbar-bg);\n padding: 4px 8px;\n margin-bottom: 20px;\n}\n.ff-excel .ff-spreadsheet {\n --background-color: var(--drawer-footer-bg);\n --text-color: var(--text-color);\n --readonly-text-color: var(--toggle-strip-active);\n --outline-color: var(--toggle-strip-active);\n --outline-background-color: var(--overlay-bg);\n --border-color: var(--excel-sheet-border);\n --header-background-color: var(--excel-header-bg);\n --elevation: var(--brand-color);\n position: relative;\n overflow: scroll;\n background: var(--background-color);\n color: var(--text-color);\n scrollbar-width: none;\n display: inline-block;\n}\n.ff-excel .ff-spreadsheet-active-cell {\n position: absolute;\n border: 2px solid var(--outline-color);\n box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-active-cell--edit {\n background: var(--background-color);\n box-shadow: var(--elevation);\n}\n.ff-excel .ff-spreadsheet-table {\n overflow: scroll;\n top: 0;\n left: 0;\n margin: 0;\n position: relative;\n border-collapse: collapse;\n table-layout: fixed;\n}\n.ff-excel .ff-spreadsheet-table::-webkit-scrollbar {\n height: 0px;\n}\n.ff-excel .ff-spreadsheet-cell {\n outline: none;\n position: relative;\n z-index: 0;\n}\n.ff-excel .ff-spreadsheet-active-cell .select_dot {\n background-color: var(--elevation);\n height: 10px;\n width: 10px;\n border-radius: 50%;\n position: absolute;\n bottom: -5px;\n right: -5px;\n cursor: crosshair;\n z-index: 1000;\n}\n.ff-excel .ff-spreadsheet-cell--readonly {\n color: var(--readonly-text-color);\n}\n.ff-excel .ff-spreadsheet-cell,\n.ff-excel .ff-spreadsheet-header {\n border: 0.1px solid var(--border-color);\n overflow: hidden;\n word-break: keep-all;\n white-space: nowrap;\n text-align: left;\n box-sizing: border-box;\n user-select: none;\n}\n.ff-excel .ff-spreadsheet-header {\n border: 0.1px solid var(--border-color);\n background-color: var(--header-background-color);\n color: var(--readonly-text-color);\n text-align: center;\n z-index: 1000;\n}\n.ff-excel .ff-spreadsheet-corner-header {\n
|
32036
|
+
var css_248z$n = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-excel {\n display: flex;\n flex-direction: column;\n}\n.ff-excel .ff-excel-toolbar-container {\n position: relative;\n top: 0;\n background-color: var(--excel-toolbar-bg);\n padding: 4px 8px;\n margin-bottom: 20px;\n}\n.ff-excel .ff-spreadsheet {\n --background-color: var(--drawer-footer-bg);\n --text-color: var(--text-color);\n --readonly-text-color: var(--toggle-strip-active);\n --outline-color: var(--toggle-strip-active);\n --outline-background-color: var(--overlay-bg);\n --border-color: var(--excel-sheet-border);\n --header-background-color: var(--excel-header-bg);\n --elevation: var(--brand-color);\n position: relative;\n overflow: scroll;\n background: var(--background-color);\n color: var(--text-color);\n scrollbar-width: none;\n display: inline-block;\n}\n.ff-excel .ff-spreadsheet-active-cell {\n position: absolute;\n border: 2px solid var(--outline-color);\n box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-active-cell--edit {\n background: var(--background-color);\n box-shadow: var(--elevation);\n}\n.ff-excel .ff-spreadsheet-table {\n overflow: scroll;\n top: 0;\n left: 0;\n margin: 0;\n position: relative;\n border-collapse: collapse;\n table-layout: fixed;\n}\n.ff-excel .ff-spreadsheet-table::-webkit-scrollbar {\n height: 0px;\n}\n.ff-excel .ff-spreadsheet-cell {\n outline: none;\n position: relative;\n z-index: 0;\n}\n.ff-excel .ff-spreadsheet-active-cell .select_dot {\n background-color: var(--elevation);\n height: 10px;\n width: 10px;\n border-radius: 50%;\n position: absolute;\n bottom: -5px;\n right: -5px;\n cursor: crosshair;\n z-index: 1000;\n}\n.ff-excel .ff-spreadsheet-cell--readonly {\n color: var(--readonly-text-color);\n}\n.ff-excel .ff-spreadsheet-cell,\n.ff-excel .ff-spreadsheet-header {\n border: 0.1px solid var(--border-color);\n overflow: hidden;\n word-break: keep-all;\n white-space: nowrap;\n text-align: left;\n box-sizing: border-box;\n user-select: none;\n}\n.ff-excel .ff-spreadsheet-header {\n border: 0.1px solid var(--border-color);\n background-color: var(--header-background-color);\n color: var(--readonly-text-color);\n text-align: center;\n z-index: 1000;\n position: sticky;\n}\n.ff-excel .ff-spreadsheet-corner-header {\n position: fixed;\n z-index: 2000;\n}\n.ff-excel .ff-spreadsheet-row-header {\n height: 34px;\n}\n.ff-excel .corner-header {\n border: 0.1px solid var(--border-color);\n background-color: var(--header-background-color);\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1100;\n top: -1px;\n width: 60px;\n height: 34px;\n left: -1px;\n}\n.ff-excel .ff-spreadsheet-header--selected {\n background: var(--brand-color);\n color: var(--tooltip-text-color);\n}\n.ff-excel .ff-spreadsheet-data-viewer,\n.ff-excel .ff-spreadsheet-data-editor input {\n padding: 4px;\n box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-header {\n box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-data-viewer--preserve-breaks {\n white-space: pre-wrap;\n}\n.ff-excel .ff-spreadsheet-data-editor,\n.ff-excel .ff-spreadsheet-data-editor input {\n width: 100%;\n height: 100%;\n}\n.ff-excel .ff-spreadsheet-data-editor input {\n font: inherit;\n color: inherit;\n background: none;\n border: none;\n outline: none;\n margin: 0;\n}\n.ff-excel .ff-spreadsheet-data-viewer--boolean {\n text-align: center;\n}\n.ff-excel .ff-spreadsheet-floating-rect {\n position: absolute;\n pointer-events: none;\n box-sizing: border-box;\n}\n.ff-excel .ff-spreadsheet-floating-rect--hidden {\n display: none;\n}\n.ff-excel .ff-spreadsheet-floating-rect--selected {\n background: var(--outline-background-color);\n border: 2px var(--outline-color) solid;\n}\n.ff-excel .ff-spreadsheet-floating-rect--dragging {\n border: none;\n}\n.ff-excel .ff-spreadsheet-floating-rect--copied {\n border: 2px var(--outline-color) dashed;\n}";
|
32029
32037
|
styleInject(css_248z$n);
|
32030
32038
|
|
32031
32039
|
var css_248z$m = ".ff-excel-toolbar {\n display: flex;\n height: 32px;\n align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-divider {\n width: 1px;\n height: 24px;\n background-color: var(--excel-toolbar-divider);\n margin: 0 24px;\n border-radius: 1px;\n z-index: 1000;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font {\n display: flex;\n gap: 8px;\n justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font .ff-excel-toolbar-font-family {\n width: 120px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font .ff-excel-toolbar-font-size {\n width: 56px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-text {\n width: 100px;\n height: 24px;\n display: flex;\n gap: 8px;\n justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-text .ff-excel-toolbar-icon-underline {\n display: flex;\n align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon {\n width: 88px;\n height: 24px;\n display: flex;\n gap: 8px;\n justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n width: 24px;\n height: 24px;\n border-radius: 4px;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color:hover {\n border-radius: 4px;\n background-color: var(--icon-hover-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n background-color: var(--brand-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover {\n background-color: var(--primary-button-text-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover svg path {\n fill: var(--brand-color);\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color:hover {\n border-radius: 4px;\n background-color: var(--icon-hover-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n background-color: var(--brand-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover {\n background-color: var(--primary-button-text-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover svg path {\n fill: var(--brand-color);\n}\n.ff-excel-toolbar .ff-excel-toolbar-menu {\n display: flex;\n align-items: center;\n width: 36px;\n height: 24px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-menu .ff-excel-toolbar-menu-option {\n display: flex;\n align-items: center;\n}";
|
@@ -33531,17 +33539,28 @@ const AttachImage = ({
|
|
33531
33539
|
});
|
33532
33540
|
};
|
33533
33541
|
|
33534
|
-
var css_248z$f = ".ff-card-container {\n
|
33542
|
+
var css_248z$f = ".ff-card-container {\n height: 78px;\n display: flex;\n align-items: center;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n overflow: hidden;\n cursor: pointer;\n}\n.ff-card-container:hover.passed {\n border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container:hover.failed {\n border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container:hover.warning {\n border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container:hover.skipped {\n border-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container:hover.flaky {\n border-color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container .ff-status-bar {\n width: 12%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: start;\n align-items: center;\n border-right: 1px solid var(--border-color);\n gap: 17px;\n}\n.ff-card-container .ff-status-bar .ff-status-text {\n transform: rotate(-90deg);\n transform-origin: center;\n display: inline-block;\n}\n.ff-card-container.passed .ff-status-bar {\n background-color: var(--ff-card-passed-status-bg-color);\n color: var(--base-bg-color);\n}\n.ff-card-container.failed .ff-status-bar {\n background-color: var(--ff-card-failed-status-bg-color);\n color: var(--base-bg-color);\n}\n.ff-card-container.warning .ff-status-bar {\n background-color: var(--ff-card-warning-status-bg-color);\n color: var(--base-bg-color);\n}\n.ff-card-container.skipped .ff-status-bar {\n background-color: var(--ff-card-skipped-status-bg-color);\n color: var(--base-bg-color);\n}\n.ff-card-container.flaky .ff-status-bar {\n background-color: var(--ff-card-flaky-status-bg-color);\n color: var(--base-bg-color);\n}\n.ff-card-container .ff-content {\n flex: 1;\n padding: 8px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n.ff-card-container .ff-content .ff-number {\n margin-bottom: 4px;\n color: inherit;\n}\n.ff-card-container.passed .ff-number {\n color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.failed .ff-number {\n color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.warning .ff-number {\n color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.skipped .ff-number {\n color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.flaky .ff-number {\n color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container.toggled.passed .ff-status-bar {\n background-color: var(--base-bg-color);\n color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.toggled.failed .ff-status-bar {\n background-color: var(--base-bg-color);\n color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.toggled.warning .ff-status-bar {\n background-color: var(--base-bg-color);\n color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.toggled.skipped .ff-status-bar {\n background-color: var(--base-bg-color);\n color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.toggled.flaky .ff-status-bar {\n background-color: var(--base-bg-color);\n color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container.toggled.passed .ff-content {\n background-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.toggled.failed .ff-content {\n background-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.toggled.warning .ff-content {\n background-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.toggled.skipped .ff-content {\n background-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.toggled.flaky .ff-content {\n background-color: var(--ff-card-flaky-status-bg-color);\n}";
|
33535
33543
|
styleInject(css_248z$f);
|
33536
33544
|
|
33537
33545
|
const StatusCard = ({
|
33538
33546
|
icon,
|
33539
33547
|
status,
|
33540
33548
|
count,
|
33541
|
-
text
|
33549
|
+
text,
|
33550
|
+
style = {
|
33551
|
+
width: '196.4px'
|
33552
|
+
},
|
33553
|
+
onSelectedStatus = _status => {}
|
33542
33554
|
}) => {
|
33555
|
+
const [isToggled, setIsToggled] = React.useState(false);
|
33556
|
+
const handleSelectStatus = status => {
|
33557
|
+
setIsToggled(true);
|
33558
|
+
onSelectedStatus(status);
|
33559
|
+
};
|
33543
33560
|
return jsxRuntime.jsxs("div", {
|
33544
|
-
className: `ff-card-container ${status.toLowerCase()}`,
|
33561
|
+
className: `ff-card-container ${status.toLowerCase()} ${isToggled ? 'toggled' : ''}`,
|
33562
|
+
style: style,
|
33563
|
+
onClick: () => handleSelectStatus(status),
|
33545
33564
|
children: [jsxRuntime.jsxs("div", {
|
33546
33565
|
className: "ff-status-bar",
|
33547
33566
|
children: [jsxRuntime.jsx("div", {
|
@@ -33554,7 +33573,6 @@ const StatusCard = ({
|
|
33554
33573
|
}), jsxRuntime.jsx(Typography, {
|
33555
33574
|
fontWeight: "semi-bold",
|
33556
33575
|
fontSize: "10px",
|
33557
|
-
color: "var(--ff-status-card-text-color)",
|
33558
33576
|
textAlign: "center",
|
33559
33577
|
lineHeight: "15px",
|
33560
33578
|
className: "ff-status-text",
|
@@ -33568,13 +33586,14 @@ const StatusCard = ({
|
|
33568
33586
|
fontSize: "24px",
|
33569
33587
|
className: "ff-number",
|
33570
33588
|
lineHeight: "36px",
|
33589
|
+
color: isToggled ? 'var(--base-bg-color)' : '',
|
33571
33590
|
children: count
|
33572
33591
|
}), jsxRuntime.jsx(Typography, {
|
33573
33592
|
fontWeight: "regular",
|
33574
33593
|
fontSize: "10px",
|
33575
33594
|
className: "ff-text",
|
33576
33595
|
lineHeight: "15px",
|
33577
|
-
color:
|
33596
|
+
color: isToggled ? 'var(--base-bg-color)' : 'var(--ff-card-status-text-color)',
|
33578
33597
|
children: text
|
33579
33598
|
})]
|
33580
33599
|
})]
|
@@ -39635,7 +39654,8 @@ const BarChart = ({
|
|
39635
39654
|
icons = [],
|
39636
39655
|
iconSize,
|
39637
39656
|
legendPosition = 'bottom',
|
39638
|
-
legendGap = 5
|
39657
|
+
legendGap = 5,
|
39658
|
+
onSelectedBar = _label => {}
|
39639
39659
|
}) => {
|
39640
39660
|
const [tooltip, setTooltip] = React.useState({
|
39641
39661
|
visible: false,
|
@@ -39693,6 +39713,9 @@ const BarChart = ({
|
|
39693
39713
|
borderColor: 'transparent'
|
39694
39714
|
});
|
39695
39715
|
};
|
39716
|
+
const handleSelectLabel = label => {
|
39717
|
+
onSelectedBar(label);
|
39718
|
+
};
|
39696
39719
|
return jsxRuntime.jsxs("div", {
|
39697
39720
|
className: "ff-bar-chart-container",
|
39698
39721
|
style: {
|
@@ -39767,7 +39790,8 @@ const BarChart = ({
|
|
39767
39790
|
ry: barBorderRadius,
|
39768
39791
|
onMouseEnter: e => handleMouseEnter(e, item.label, item.value, getBorderColor(index)),
|
39769
39792
|
onMouseMove: handleMouseMove,
|
39770
|
-
onMouseLeave: handleMouseLeave
|
39793
|
+
onMouseLeave: handleMouseLeave,
|
39794
|
+
onClick: () => handleSelectLabel(item.label)
|
39771
39795
|
}), showXAxisLabels && jsxRuntime.jsx("text", {
|
39772
39796
|
x: barX + barWidth / 2,
|
39773
39797
|
y: height + topPadding + 15,
|