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
@@ -6,8 +6,6 @@ declare const meta: Meta<typeof LabelEditTextField>;
|
|
6
6
|
type Story = StoryObj<typeof LabelEditTextField>;
|
7
7
|
export declare const textField: Story;
|
8
8
|
export declare const textFieldWithOutLabel: Story;
|
9
|
-
export declare const openTextFieldWithOutLabel: Story;
|
10
9
|
export declare const textFieldWithDropdown: Story;
|
11
10
|
export declare const textFieldWithHighlight: Story;
|
12
|
-
export declare const openLabelEditTextField: Story;
|
13
11
|
export default meta;
|
@@ -2,9 +2,15 @@ export interface CardProps {
|
|
2
2
|
/** The icon to display in the card */
|
3
3
|
icon: string;
|
4
4
|
/** The status of the card (Passed, Failed, Warning, Skipped, Flaky) */
|
5
|
-
status: 'Passed' | 'Failed' | 'Warning' | 'Skipped' | 'Flaky';
|
5
|
+
status: 'Passed' | 'Failed' | 'Warning' | 'Skipped' | 'Flaky' | 'PASSED' | 'FAIL' | 'WARNING' | 'SKIPPED' | 'FLAKY';
|
6
6
|
/** The number displayed in the card */
|
7
7
|
count: number | string;
|
8
8
|
/** The description text displayed at the bottom of the card */
|
9
9
|
text: string;
|
10
|
+
/** Inline Styling */
|
11
|
+
style?: React.CSSProperties;
|
12
|
+
/** toggle update */
|
13
|
+
handleToggleStatus?: (_status: boolean) => void;
|
14
|
+
/** call back */
|
15
|
+
onSelectedStatus?: (_status: string) => void;
|
10
16
|
}
|
package/lib/index.d.ts
CHANGED
@@ -2471,11 +2471,17 @@ interface CardProps {
|
|
2471
2471
|
/** The icon to display in the card */
|
2472
2472
|
icon: string;
|
2473
2473
|
/** The status of the card (Passed, Failed, Warning, Skipped, Flaky) */
|
2474
|
-
status: 'Passed' | 'Failed' | 'Warning' | 'Skipped' | 'Flaky';
|
2474
|
+
status: 'Passed' | 'Failed' | 'Warning' | 'Skipped' | 'Flaky' | 'PASSED' | 'FAIL' | 'WARNING' | 'SKIPPED' | 'FLAKY';
|
2475
2475
|
/** The number displayed in the card */
|
2476
2476
|
count: number | string;
|
2477
2477
|
/** The description text displayed at the bottom of the card */
|
2478
2478
|
text: string;
|
2479
|
+
/** Inline Styling */
|
2480
|
+
style?: React.CSSProperties;
|
2481
|
+
/** toggle update */
|
2482
|
+
handleToggleStatus?: (_status: boolean) => void;
|
2483
|
+
/** call back */
|
2484
|
+
onSelectedStatus?: (_status: string) => void;
|
2479
2485
|
}
|
2480
2486
|
|
2481
2487
|
declare const StatusCard: React__default.FC<CardProps>;
|
@@ -2822,6 +2828,7 @@ type BarChartProps = {
|
|
2822
2828
|
backgroundColor?: string;
|
2823
2829
|
legendPosition?: 'top' | 'bottom';
|
2824
2830
|
legendGap?: number;
|
2831
|
+
onSelectedBar?: (_label: string) => void;
|
2825
2832
|
};
|
2826
2833
|
declare const BarChart: React__default.FC<BarChartProps>;
|
2827
2834
|
|
package/lib/index.esm.js
CHANGED
@@ -7982,7 +7982,7 @@ function createFormControl(props = {}) {
|
|
7982
7982
|
timer = setTimeout(callback, wait);
|
7983
7983
|
};
|
7984
7984
|
const _updateValid = async (shouldUpdateValid) => {
|
7985
|
-
if (!
|
7985
|
+
if (!_options.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
|
7986
7986
|
const isValid = _options.resolver
|
7987
7987
|
? isEmptyObject((await _executeSchema()).errors)
|
7988
7988
|
: await executeBuiltInValidation(_fields, true);
|
@@ -7994,7 +7994,7 @@ function createFormControl(props = {}) {
|
|
7994
7994
|
}
|
7995
7995
|
};
|
7996
7996
|
const _updateIsValidating = (names, isValidating) => {
|
7997
|
-
if (!
|
7997
|
+
if (!_options.disabled &&
|
7998
7998
|
(_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
|
7999
7999
|
(names || Array.from(_names.mount)).forEach((name) => {
|
8000
8000
|
if (name) {
|
@@ -8010,7 +8010,7 @@ function createFormControl(props = {}) {
|
|
8010
8010
|
}
|
8011
8011
|
};
|
8012
8012
|
const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
|
8013
|
-
if (args && method && !
|
8013
|
+
if (args && method && !_options.disabled) {
|
8014
8014
|
_state.action = true;
|
8015
8015
|
if (shouldUpdateFieldsAndState && Array.isArray(get$1(_fields, name))) {
|
8016
8016
|
const fieldValues = method(get$1(_fields, name), args.argA, args.argB);
|
@@ -8074,7 +8074,7 @@ function createFormControl(props = {}) {
|
|
8074
8074
|
const output = {
|
8075
8075
|
name,
|
8076
8076
|
};
|
8077
|
-
if (!
|
8077
|
+
if (!_options.disabled) {
|
8078
8078
|
const disabledField = !!(get$1(_fields, name) &&
|
8079
8079
|
get$1(_fields, name)._f &&
|
8080
8080
|
get$1(_fields, name)._f.disabled);
|
@@ -8210,7 +8210,7 @@ function createFormControl(props = {}) {
|
|
8210
8210
|
}
|
8211
8211
|
_names.unMount = new Set();
|
8212
8212
|
};
|
8213
|
-
const _getDirty = (name, data) => !
|
8213
|
+
const _getDirty = (name, data) => !_options.disabled &&
|
8214
8214
|
(name && data && set$1(_formValues, name, data),
|
8215
8215
|
!deepEqual(getValues(), _defaultValues));
|
8216
8216
|
const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
|
@@ -8526,7 +8526,7 @@ function createFormControl(props = {}) {
|
|
8526
8526
|
};
|
8527
8527
|
const register = (name, options = {}) => {
|
8528
8528
|
let field = get$1(_fields, name);
|
8529
|
-
const disabledIsDefined = isBoolean(options.disabled) || isBoolean(
|
8529
|
+
const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
|
8530
8530
|
set$1(_fields, name, {
|
8531
8531
|
...(field || {}),
|
8532
8532
|
_f: {
|
@@ -8542,7 +8542,7 @@ function createFormControl(props = {}) {
|
|
8542
8542
|
field,
|
8543
8543
|
disabled: isBoolean(options.disabled)
|
8544
8544
|
? options.disabled
|
8545
|
-
:
|
8545
|
+
: _options.disabled,
|
8546
8546
|
name,
|
8547
8547
|
value: options.value,
|
8548
8548
|
});
|
@@ -8552,7 +8552,7 @@ function createFormControl(props = {}) {
|
|
8552
8552
|
}
|
8553
8553
|
return {
|
8554
8554
|
...(disabledIsDefined
|
8555
|
-
? { disabled: options.disabled ||
|
8555
|
+
? { disabled: options.disabled || _options.disabled }
|
8556
8556
|
: {}),
|
8557
8557
|
...(_options.progressive
|
8558
8558
|
? {
|
@@ -8636,6 +8636,12 @@ function createFormControl(props = {}) {
|
|
8636
8636
|
e.preventDefault && e.preventDefault();
|
8637
8637
|
e.persist && e.persist();
|
8638
8638
|
}
|
8639
|
+
if (_options.disabled) {
|
8640
|
+
if (onInvalid) {
|
8641
|
+
await onInvalid({ ..._formState.errors }, e);
|
8642
|
+
}
|
8643
|
+
return;
|
8644
|
+
}
|
8639
8645
|
let fieldValues = cloneObject(_formValues);
|
8640
8646
|
_subjects.state.next({
|
8641
8647
|
isSubmitting: true,
|
@@ -8814,7 +8820,9 @@ function createFormControl(props = {}) {
|
|
8814
8820
|
: fieldReference.ref;
|
8815
8821
|
if (fieldRef.focus) {
|
8816
8822
|
fieldRef.focus();
|
8817
|
-
options.shouldSelect &&
|
8823
|
+
options.shouldSelect &&
|
8824
|
+
isFunction$1(fieldRef.select) &&
|
8825
|
+
fieldRef.select();
|
8818
8826
|
}
|
8819
8827
|
}
|
8820
8828
|
};
|
@@ -9015,11 +9023,6 @@ function useForm(props = {}) {
|
|
9015
9023
|
values: control._getWatch(),
|
9016
9024
|
});
|
9017
9025
|
}, [props.shouldUnregister, control]);
|
9018
|
-
React__default.useEffect(() => {
|
9019
|
-
if (_formControl.current) {
|
9020
|
-
_formControl.current.watch = _formControl.current.watch.bind({});
|
9021
|
-
}
|
9022
|
-
}, [formState]);
|
9023
9026
|
_formControl.current.formState = getProxyFormState(formState, control);
|
9024
9027
|
return _formControl.current;
|
9025
9028
|
}
|
@@ -27229,7 +27232,8 @@ const Toastify = () => {
|
|
27229
27232
|
isOpen: toastProps.isOpen,
|
27230
27233
|
variant: toastProps.variant,
|
27231
27234
|
toastTitle: toastProps.toastTitle,
|
27232
|
-
toastMessage: toastProps.toastMessage
|
27235
|
+
toastMessage: toastProps.toastMessage,
|
27236
|
+
zIndex: 1000000000
|
27233
27237
|
});
|
27234
27238
|
};
|
27235
27239
|
// Utility to trigger toast messages outside of the Toastify component
|
@@ -31364,6 +31368,7 @@ const Row = props => jsx("tr", {
|
|
31364
31368
|
});
|
31365
31369
|
|
31366
31370
|
const HeaderRow = props => jsx("tr", {
|
31371
|
+
className: "ff-spreadsheet-row-header",
|
31367
31372
|
...props
|
31368
31373
|
});
|
31369
31374
|
|
@@ -31383,14 +31388,17 @@ const CornerIndicator = ({
|
|
31383
31388
|
onSelect();
|
31384
31389
|
}, [onSelect]);
|
31385
31390
|
return jsx("th", {
|
31386
|
-
className:
|
31387
|
-
'ff-spreadsheet-header--selected': selected
|
31388
|
-
}),
|
31391
|
+
className: 'ff-spreadsheet-corner-header',
|
31389
31392
|
onClick: handleClick,
|
31390
31393
|
tabIndex: 0,
|
31391
|
-
children: jsx(
|
31392
|
-
|
31393
|
-
|
31394
|
+
children: jsx("div", {
|
31395
|
+
className: classNames('corner-header', {
|
31396
|
+
'ff-spreadsheet-header--selected': selected
|
31397
|
+
}),
|
31398
|
+
children: jsx(Icon, {
|
31399
|
+
variant: selected ? 'dark' : 'light',
|
31400
|
+
name: "excel_corner_menu"
|
31401
|
+
})
|
31394
31402
|
})
|
31395
31403
|
});
|
31396
31404
|
};
|
@@ -31472,7 +31480,7 @@ const ColumnIndicator = ({
|
|
31472
31480
|
return jsxs("th", {
|
31473
31481
|
style: {
|
31474
31482
|
minWidth: `${columnWidth}px`,
|
31475
|
-
position: '
|
31483
|
+
position: 'sticky'
|
31476
31484
|
},
|
31477
31485
|
className: classNames('ff-spreadsheet-header', {
|
31478
31486
|
'ff-spreadsheet-header--selected': selected
|
@@ -32005,7 +32013,7 @@ const Copied = () => {
|
|
32005
32013
|
});
|
32006
32014
|
};
|
32007
32015
|
|
32008
|
-
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
|
32016
|
+
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}";
|
32009
32017
|
styleInject(css_248z$n);
|
32010
32018
|
|
32011
32019
|
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}";
|
@@ -33511,17 +33519,28 @@ const AttachImage = ({
|
|
33511
33519
|
});
|
33512
33520
|
};
|
33513
33521
|
|
33514
|
-
var css_248z$f = ".ff-card-container {\n
|
33522
|
+
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}";
|
33515
33523
|
styleInject(css_248z$f);
|
33516
33524
|
|
33517
33525
|
const StatusCard = ({
|
33518
33526
|
icon,
|
33519
33527
|
status,
|
33520
33528
|
count,
|
33521
|
-
text
|
33529
|
+
text,
|
33530
|
+
style = {
|
33531
|
+
width: '196.4px'
|
33532
|
+
},
|
33533
|
+
onSelectedStatus = _status => {}
|
33522
33534
|
}) => {
|
33535
|
+
const [isToggled, setIsToggled] = useState(false);
|
33536
|
+
const handleSelectStatus = status => {
|
33537
|
+
setIsToggled(true);
|
33538
|
+
onSelectedStatus(status);
|
33539
|
+
};
|
33523
33540
|
return jsxs("div", {
|
33524
|
-
className: `ff-card-container ${status.toLowerCase()}`,
|
33541
|
+
className: `ff-card-container ${status.toLowerCase()} ${isToggled ? 'toggled' : ''}`,
|
33542
|
+
style: style,
|
33543
|
+
onClick: () => handleSelectStatus(status),
|
33525
33544
|
children: [jsxs("div", {
|
33526
33545
|
className: "ff-status-bar",
|
33527
33546
|
children: [jsx("div", {
|
@@ -33534,7 +33553,6 @@ const StatusCard = ({
|
|
33534
33553
|
}), jsx(Typography, {
|
33535
33554
|
fontWeight: "semi-bold",
|
33536
33555
|
fontSize: "10px",
|
33537
|
-
color: "var(--ff-status-card-text-color)",
|
33538
33556
|
textAlign: "center",
|
33539
33557
|
lineHeight: "15px",
|
33540
33558
|
className: "ff-status-text",
|
@@ -33548,13 +33566,14 @@ const StatusCard = ({
|
|
33548
33566
|
fontSize: "24px",
|
33549
33567
|
className: "ff-number",
|
33550
33568
|
lineHeight: "36px",
|
33569
|
+
color: isToggled ? 'var(--base-bg-color)' : '',
|
33551
33570
|
children: count
|
33552
33571
|
}), jsx(Typography, {
|
33553
33572
|
fontWeight: "regular",
|
33554
33573
|
fontSize: "10px",
|
33555
33574
|
className: "ff-text",
|
33556
33575
|
lineHeight: "15px",
|
33557
|
-
color:
|
33576
|
+
color: isToggled ? 'var(--base-bg-color)' : 'var(--ff-card-status-text-color)',
|
33558
33577
|
children: text
|
33559
33578
|
})]
|
33560
33579
|
})]
|
@@ -39615,7 +39634,8 @@ const BarChart = ({
|
|
39615
39634
|
icons = [],
|
39616
39635
|
iconSize,
|
39617
39636
|
legendPosition = 'bottom',
|
39618
|
-
legendGap = 5
|
39637
|
+
legendGap = 5,
|
39638
|
+
onSelectedBar = _label => {}
|
39619
39639
|
}) => {
|
39620
39640
|
const [tooltip, setTooltip] = useState({
|
39621
39641
|
visible: false,
|
@@ -39673,6 +39693,9 @@ const BarChart = ({
|
|
39673
39693
|
borderColor: 'transparent'
|
39674
39694
|
});
|
39675
39695
|
};
|
39696
|
+
const handleSelectLabel = label => {
|
39697
|
+
onSelectedBar(label);
|
39698
|
+
};
|
39676
39699
|
return jsxs("div", {
|
39677
39700
|
className: "ff-bar-chart-container",
|
39678
39701
|
style: {
|
@@ -39747,7 +39770,8 @@ const BarChart = ({
|
|
39747
39770
|
ry: barBorderRadius,
|
39748
39771
|
onMouseEnter: e => handleMouseEnter(e, item.label, item.value, getBorderColor(index)),
|
39749
39772
|
onMouseMove: handleMouseMove,
|
39750
|
-
onMouseLeave: handleMouseLeave
|
39773
|
+
onMouseLeave: handleMouseLeave,
|
39774
|
+
onClick: () => handleSelectLabel(item.label)
|
39751
39775
|
}), showXAxisLabels && jsx("text", {
|
39752
39776
|
x: barX + barWidth / 2,
|
39753
39777
|
y: height + topPadding + 15,
|