pixel-react 1.7.3 → 1.7.5
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/.yarn/install-state.gz +0 -0
- package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
- package/lib/components/StatusCard/types.d.ts +7 -1
- package/lib/components/TableTree/TableTree copy.d.ts +25 -0
- package/lib/index.d.ts +8 -1
- package/lib/index.esm.js +263 -150
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +263 -150
- package/lib/index.js.map +1 -1
- package/lib/tsconfig.tsbuildinfo +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/MenuOption/MenuOption.tsx +29 -20
- 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/1fb4472b34e4fe07.css +0 -1
- package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +0 -6
- package/lib/StyleGuide/Typography/Typography.stories.d.ts +0 -6
- package/lib/components/Accordion/Accordion.stories.d.ts +0 -6
- 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/AddResourceButton/AddButton.stories.d.ts +0 -8
- 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/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +0 -7
- package/lib/components/AppHeader/AppHeader.stories.d.ts +0 -7
- package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
- package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +0 -9
- package/lib/components/Avatar/Avatar.stories.d.ts +0 -10
- package/lib/components/Button/Button.stories.d.ts +0 -13
- package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
- package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +0 -7
- package/lib/components/Charts/DonutChart/DonutChart.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/Charts/PieChart/PieChart.stories.d.ts +0 -7
- package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +0 -6
- package/lib/components/Checkbox/Checkbox.stories.d.ts +0 -8
- package/lib/components/Chip/Chip.stories.d.ts +0 -14
- package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
- package/lib/components/DatePicker/DatePicker.stories.d.ts +0 -9
- package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +0 -6
- package/lib/components/Drawer/Drawer.stories.d.ts +0 -12
- package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
- package/lib/components/Editor/Editor.stories.d.ts +0 -6
- package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
- package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
- package/lib/components/ExcelFile/ColorBarSelector/ColorBarSelector.d.ts +0 -8
- package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +0 -4
- package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +0 -7
- package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +0 -4
- package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +0 -5
- package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +0 -5
- package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +0 -5
- package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +0 -8
- package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +0 -10
- package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +0 -5
- package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +0 -80
- package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +0 -174
- package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +0 -1
- package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +0 -8
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +0 -22
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +0 -17
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +0 -2
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +0 -21
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +0 -24
- package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +0 -13
- package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +0 -67
- package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +0 -22
- package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +0 -11
- package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +0 -27
- package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +0 -95
- package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +0 -178
- package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +0 -3
- package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +0 -44
- package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +0 -19
- package/lib/components/ExcelFile/ExcelFile.stories.d.ts +0 -6
- package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +0 -12
- package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +0 -15
- package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
- package/lib/components/ExcelFile/Types.d.ts +0 -129
- package/lib/components/ExcelFile/index.d.ts +0 -1
- package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +0 -7
- package/lib/components/FF_Captcha/captcha.stories.d.ts +0 -8
- package/lib/components/FileDropzone/FileDropzone.stories.d.ts +0 -8
- package/lib/components/Form/Form.stories.d.ts +0 -7
- package/lib/components/GridLayout/GridLayout.stories.d.ts +0 -8
- package/lib/components/HighlightText/HighlightText.stories.d.ts +0 -6
- package/lib/components/Icon/Icon.stories.d.ts +0 -8
- package/lib/components/IconButton/IconButton.stories.d.ts +0 -7
- package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +0 -7
- package/lib/components/Input/Input.stories.d.ts +0 -9
- package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +0 -9
- package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -13
- package/lib/components/LazyLoad/LazyLoad.stories.d.ts +0 -6
- package/lib/components/MachineInputField/MachineInputField.stories.d.ts +0 -6
- package/lib/components/MenuOption/MenuOption.stories.d.ts +0 -16
- package/lib/components/MiniModal/MiniModal.stories.d.ts +0 -10
- package/lib/components/Modal/Modal.stories.d.ts +0 -7
- package/lib/components/ModulesChip/ModuleChip.stories.d.ts +0 -6
- package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -11
- package/lib/components/NLPInput/NlpInput.stories.d.ts +0 -7
- package/lib/components/Paper/Paper.stories.d.ts +0 -11
- package/lib/components/RadioButton/RadioButton.stories.d.ts +0 -10
- package/lib/components/RadioGroup/RadioGroup.stories.d.ts +0 -9
- package/lib/components/Search/Search.stories.d.ts +0 -6
- package/lib/components/Select/Select.stories.d.ts +0 -14
- package/lib/components/Select/components/Dropdown/Dropdown.d.ts +0 -4
- package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +0 -17
- package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +0 -6
- package/lib/components/StateDropdown/StateDropdown.stories.d.ts +0 -10
- package/lib/components/StatusButton/StatusButton.stories.d.ts +0 -14
- package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
- package/lib/components/Table/Table.stories.d.ts +0 -13
- package/lib/components/TableTree/TableTree.stories.d.ts +0 -7
- package/lib/components/Tabs/Tabs.stories.d.ts +0 -9
- package/lib/components/TextArea/Textarea.stories.d.ts +0 -9
- package/lib/components/Toast/Toast.stories.d.ts +0 -6
- package/lib/components/Toastify/Toastify.stories.d.ts +0 -6
- package/lib/components/Toggle/Toggle.stories.d.ts +0 -12
- package/lib/components/Tooltip/Tooltip.stories.d.ts +0 -15
- package/lib/components/Typography/Typography.stories.d.ts +0 -10
- package/lib/components/VariableInput/VariableInput.stories.d.ts +0 -6
- package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +0 -6
- package/lib/utils/compareArrays/compareArrays.stories.d.ts +0 -6
- package/lib/utils/compareObjects/compareObjects.stories.d.ts +0 -6
- package/lib/utils/debounce/debounce.stories.d.ts +0 -6
- package/lib/utils/ffID/ffID.stories.d.ts +0 -6
- package/lib/utils/find/findAndInsert.d.ts +0 -7
- package/lib/utils/find/findAndInsert.stories.d.ts +0 -7
- package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +0 -7
- package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +0 -6
- package/lib/utils/getExtension/getExtension.stories.d.ts +0 -6
- package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
- package/lib/utils/throttle/throttle.stories.d.ts +0 -6
- package/lib/utils/truncateText/truncateText.stories.d.ts +0 -6
package/lib/index.esm.js
CHANGED
@@ -3180,9 +3180,9 @@ const OptionCard = ({
|
|
3180
3180
|
const optionCardRef = useRef(null);
|
3181
3181
|
useEffect(() => {
|
3182
3182
|
if (optionCardRef?.current) {
|
3183
|
-
const rect = optionCardRef
|
3184
|
-
setOptionsHeight(rect
|
3185
|
-
setOptionsWidth(rect
|
3183
|
+
const rect = optionCardRef.current.getBoundingClientRect();
|
3184
|
+
setOptionsHeight(rect.height);
|
3185
|
+
setOptionsWidth(rect.width);
|
3186
3186
|
}
|
3187
3187
|
}, []);
|
3188
3188
|
useClickOutside(menuRef, closeDropdown, [optionCardRef]);
|
@@ -3195,7 +3195,7 @@ const OptionCard = ({
|
|
3195
3195
|
};
|
3196
3196
|
case 'down':
|
3197
3197
|
return {
|
3198
|
-
top: menuPosition.top +
|
3198
|
+
top: menuPosition.top + menuPosition.height + 7,
|
3199
3199
|
left: menuPosition.left - 4
|
3200
3200
|
};
|
3201
3201
|
case 'left':
|
@@ -3206,23 +3206,25 @@ const OptionCard = ({
|
|
3206
3206
|
case 'right':
|
3207
3207
|
return {
|
3208
3208
|
top: menuPosition.top - 4,
|
3209
|
-
left: menuPosition.left + 20
|
3209
|
+
left: menuPosition.left + menuPosition.height + 20
|
3210
3210
|
};
|
3211
3211
|
default:
|
3212
3212
|
return {
|
3213
|
-
top: menuPosition.
|
3214
|
-
left: menuPosition.
|
3213
|
+
top: menuPosition.top,
|
3214
|
+
left: menuPosition.left
|
3215
3215
|
};
|
3216
3216
|
}
|
3217
3217
|
})();
|
3218
|
+
const adjustedStyle = {
|
3219
|
+
top: Math.min(Math.max(style.top, 0), window.innerHeight - optionsHeight),
|
3220
|
+
left: Math.min(Math.max(style.left, 0), window.innerWidth - optionsWidth),
|
3221
|
+
zIndex
|
3222
|
+
};
|
3218
3223
|
return /*#__PURE__*/createPortal(jsx("div", {
|
3219
3224
|
className: classNames('ff-option-card', [{
|
3220
3225
|
'ff-option-card--primary': variant === 'primary'
|
3221
3226
|
}], currentTheme),
|
3222
|
-
style:
|
3223
|
-
...style,
|
3224
|
-
zIndex
|
3225
|
-
},
|
3227
|
+
style: adjustedStyle,
|
3226
3228
|
ref: optionCardRef,
|
3227
3229
|
children: options.map(opt => jsx(Option$1, {
|
3228
3230
|
option: opt,
|
@@ -3256,26 +3258,28 @@ const MenuOption = ({
|
|
3256
3258
|
right: 0
|
3257
3259
|
});
|
3258
3260
|
const closeDropDown = () => setIsClicked(false);
|
3259
|
-
const onIconClickHandler = () => {
|
3260
|
-
onClick();
|
3261
|
-
calculateDims();
|
3262
|
-
setIsClicked(prev => !prev);
|
3263
|
-
};
|
3264
|
-
const handleOptionClick = option => {
|
3265
|
-
onOptionClick(option);
|
3266
|
-
closeDropDown();
|
3267
|
-
};
|
3268
3261
|
const calculateDims = () => {
|
3269
3262
|
if (targetRef?.current) {
|
3270
3263
|
const rect = targetRef.current.getBoundingClientRect();
|
3264
|
+
const containerScrollTop = targetRef.current?.offsetParent?.scrollTop || 0;
|
3265
|
+
const containerScrollLeft = targetRef.current?.offsetParent?.scrollLeft || 0;
|
3271
3266
|
setMenuPosition({
|
3272
|
-
top: rect.top + window.scrollY,
|
3273
|
-
left: rect.left + window.scrollX,
|
3267
|
+
top: rect.top + window.scrollY - containerScrollTop,
|
3268
|
+
left: rect.left + window.scrollX - containerScrollLeft,
|
3274
3269
|
height: rect.height,
|
3275
3270
|
right: rect.right
|
3276
3271
|
});
|
3277
3272
|
}
|
3278
3273
|
};
|
3274
|
+
const onIconClickHandler = () => {
|
3275
|
+
onClick();
|
3276
|
+
calculateDims();
|
3277
|
+
setIsClicked(prev => !prev);
|
3278
|
+
};
|
3279
|
+
const handleOptionClick = option => {
|
3280
|
+
onOptionClick(option);
|
3281
|
+
closeDropDown();
|
3282
|
+
};
|
3279
3283
|
return jsxs("div", {
|
3280
3284
|
className: "ff-menu-option-container",
|
3281
3285
|
ref: menuRef,
|
@@ -7982,7 +7986,7 @@ function createFormControl(props = {}) {
|
|
7982
7986
|
timer = setTimeout(callback, wait);
|
7983
7987
|
};
|
7984
7988
|
const _updateValid = async (shouldUpdateValid) => {
|
7985
|
-
if (!
|
7989
|
+
if (!_options.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
|
7986
7990
|
const isValid = _options.resolver
|
7987
7991
|
? isEmptyObject((await _executeSchema()).errors)
|
7988
7992
|
: await executeBuiltInValidation(_fields, true);
|
@@ -7994,7 +7998,7 @@ function createFormControl(props = {}) {
|
|
7994
7998
|
}
|
7995
7999
|
};
|
7996
8000
|
const _updateIsValidating = (names, isValidating) => {
|
7997
|
-
if (!
|
8001
|
+
if (!_options.disabled &&
|
7998
8002
|
(_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
|
7999
8003
|
(names || Array.from(_names.mount)).forEach((name) => {
|
8000
8004
|
if (name) {
|
@@ -8010,7 +8014,7 @@ function createFormControl(props = {}) {
|
|
8010
8014
|
}
|
8011
8015
|
};
|
8012
8016
|
const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
|
8013
|
-
if (args && method && !
|
8017
|
+
if (args && method && !_options.disabled) {
|
8014
8018
|
_state.action = true;
|
8015
8019
|
if (shouldUpdateFieldsAndState && Array.isArray(get$1(_fields, name))) {
|
8016
8020
|
const fieldValues = method(get$1(_fields, name), args.argA, args.argB);
|
@@ -8074,7 +8078,7 @@ function createFormControl(props = {}) {
|
|
8074
8078
|
const output = {
|
8075
8079
|
name,
|
8076
8080
|
};
|
8077
|
-
if (!
|
8081
|
+
if (!_options.disabled) {
|
8078
8082
|
const disabledField = !!(get$1(_fields, name) &&
|
8079
8083
|
get$1(_fields, name)._f &&
|
8080
8084
|
get$1(_fields, name)._f.disabled);
|
@@ -8210,7 +8214,7 @@ function createFormControl(props = {}) {
|
|
8210
8214
|
}
|
8211
8215
|
_names.unMount = new Set();
|
8212
8216
|
};
|
8213
|
-
const _getDirty = (name, data) => !
|
8217
|
+
const _getDirty = (name, data) => !_options.disabled &&
|
8214
8218
|
(name && data && set$1(_formValues, name, data),
|
8215
8219
|
!deepEqual(getValues(), _defaultValues));
|
8216
8220
|
const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
|
@@ -8526,7 +8530,7 @@ function createFormControl(props = {}) {
|
|
8526
8530
|
};
|
8527
8531
|
const register = (name, options = {}) => {
|
8528
8532
|
let field = get$1(_fields, name);
|
8529
|
-
const disabledIsDefined = isBoolean(options.disabled) || isBoolean(
|
8533
|
+
const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
|
8530
8534
|
set$1(_fields, name, {
|
8531
8535
|
...(field || {}),
|
8532
8536
|
_f: {
|
@@ -8542,7 +8546,7 @@ function createFormControl(props = {}) {
|
|
8542
8546
|
field,
|
8543
8547
|
disabled: isBoolean(options.disabled)
|
8544
8548
|
? options.disabled
|
8545
|
-
:
|
8549
|
+
: _options.disabled,
|
8546
8550
|
name,
|
8547
8551
|
value: options.value,
|
8548
8552
|
});
|
@@ -8552,7 +8556,7 @@ function createFormControl(props = {}) {
|
|
8552
8556
|
}
|
8553
8557
|
return {
|
8554
8558
|
...(disabledIsDefined
|
8555
|
-
? { disabled: options.disabled ||
|
8559
|
+
? { disabled: options.disabled || _options.disabled }
|
8556
8560
|
: {}),
|
8557
8561
|
...(_options.progressive
|
8558
8562
|
? {
|
@@ -8636,6 +8640,12 @@ function createFormControl(props = {}) {
|
|
8636
8640
|
e.preventDefault && e.preventDefault();
|
8637
8641
|
e.persist && e.persist();
|
8638
8642
|
}
|
8643
|
+
if (_options.disabled) {
|
8644
|
+
if (onInvalid) {
|
8645
|
+
await onInvalid({ ..._formState.errors }, e);
|
8646
|
+
}
|
8647
|
+
return;
|
8648
|
+
}
|
8639
8649
|
let fieldValues = cloneObject(_formValues);
|
8640
8650
|
_subjects.state.next({
|
8641
8651
|
isSubmitting: true,
|
@@ -8814,7 +8824,9 @@ function createFormControl(props = {}) {
|
|
8814
8824
|
: fieldReference.ref;
|
8815
8825
|
if (fieldRef.focus) {
|
8816
8826
|
fieldRef.focus();
|
8817
|
-
options.shouldSelect &&
|
8827
|
+
options.shouldSelect &&
|
8828
|
+
isFunction$1(fieldRef.select) &&
|
8829
|
+
fieldRef.select();
|
8818
8830
|
}
|
8819
8831
|
}
|
8820
8832
|
};
|
@@ -9015,11 +9027,6 @@ function useForm(props = {}) {
|
|
9015
9027
|
values: control._getWatch(),
|
9016
9028
|
});
|
9017
9029
|
}, [props.shouldUnregister, control]);
|
9018
|
-
React__default.useEffect(() => {
|
9019
|
-
if (_formControl.current) {
|
9020
|
-
_formControl.current.watch = _formControl.current.watch.bind({});
|
9021
|
-
}
|
9022
|
-
}, [formState]);
|
9023
9030
|
_formControl.current.formState = getProxyFormState(formState, control);
|
9024
9031
|
return _formControl.current;
|
9025
9032
|
}
|
@@ -13232,6 +13239,53 @@ function setYear(date, year, options) {
|
|
13232
13239
|
return date_;
|
13233
13240
|
}
|
13234
13241
|
|
13242
|
+
const FIVE_WEEKS = 5;
|
13243
|
+
const FOUR_WEEKS = 4;
|
13244
|
+
/**
|
13245
|
+
* Return the number of weeks to display in the broadcast calendar.
|
13246
|
+
*
|
13247
|
+
* @since 9.4.0
|
13248
|
+
*/
|
13249
|
+
function getBroadcastWeeksInMonth(month, dateLib) {
|
13250
|
+
// Get the first day of the month
|
13251
|
+
const firstDayOfMonth = dateLib.startOfMonth(month);
|
13252
|
+
// Get the day of the week for the first day of the month (1-7, where 1 is Monday)
|
13253
|
+
const firstDayOfWeek = firstDayOfMonth.getDay() > 0 ? firstDayOfMonth.getDay() : 7;
|
13254
|
+
const broadcastStartDate = dateLib.addDays(month, -firstDayOfWeek + 1);
|
13255
|
+
const lastDateOfLastWeek = dateLib.addDays(broadcastStartDate, FIVE_WEEKS * 7 - 1);
|
13256
|
+
const numberOfWeeks = month.getMonth() === lastDateOfLastWeek.getMonth() ? FIVE_WEEKS : FOUR_WEEKS;
|
13257
|
+
return numberOfWeeks;
|
13258
|
+
}
|
13259
|
+
|
13260
|
+
/**
|
13261
|
+
* Return the start date of the week in the broadcast calendar.
|
13262
|
+
*
|
13263
|
+
* @since 9.4.0
|
13264
|
+
*/
|
13265
|
+
function startOfBroadcastWeek(date, dateLib) {
|
13266
|
+
const firstOfMonth = dateLib.startOfMonth(date);
|
13267
|
+
const dayOfWeek = firstOfMonth.getDay();
|
13268
|
+
if (dayOfWeek === 1) {
|
13269
|
+
return firstOfMonth;
|
13270
|
+
} else if (dayOfWeek === 0) {
|
13271
|
+
return dateLib.addDays(firstOfMonth, -1 * 6);
|
13272
|
+
} else {
|
13273
|
+
return dateLib.addDays(firstOfMonth, -1 * (dayOfWeek - 1));
|
13274
|
+
}
|
13275
|
+
}
|
13276
|
+
|
13277
|
+
/**
|
13278
|
+
* Return the end date of the week in the broadcast calendar.
|
13279
|
+
*
|
13280
|
+
* @since 9.4.0
|
13281
|
+
*/
|
13282
|
+
function endOfBroadcastWeek(date, dateLib) {
|
13283
|
+
const startDate = startOfBroadcastWeek(date, dateLib);
|
13284
|
+
const numberOfWeeks = getBroadcastWeeksInMonth(date, dateLib);
|
13285
|
+
const endDate = dateLib.addDays(startDate, numberOfWeeks * 7 - 1);
|
13286
|
+
return endDate;
|
13287
|
+
}
|
13288
|
+
|
13235
13289
|
/**
|
13236
13290
|
* A wrapper class around [date-fns](http://date-fns.org) sharing the same
|
13237
13291
|
* options. Methods of this class can be overridden using the
|
@@ -13312,6 +13366,15 @@ class DateLib {
|
|
13312
13366
|
this.differenceInCalendarMonths = (dateLeft, dateRight) => {
|
13313
13367
|
return this.overrides?.differenceInCalendarMonths ? this.overrides.differenceInCalendarMonths(dateLeft, dateRight) : differenceInCalendarMonths(dateLeft, dateRight);
|
13314
13368
|
};
|
13369
|
+
/**
|
13370
|
+
* Returns the end of the broadcast week for the given date.
|
13371
|
+
*
|
13372
|
+
* @param date The original date.
|
13373
|
+
* @returns The end of the broadcast week.
|
13374
|
+
*/
|
13375
|
+
this.endOfBroadcastWeek = date => {
|
13376
|
+
return this.overrides?.endOfBroadcastWeek ? this.overrides.endOfBroadcastWeek(date, this) : endOfBroadcastWeek(date, this);
|
13377
|
+
};
|
13315
13378
|
/**
|
13316
13379
|
* Returns the end of the ISO week for the given date.
|
13317
13380
|
*
|
@@ -13473,6 +13536,15 @@ class DateLib {
|
|
13473
13536
|
this.setYear = (date, year) => {
|
13474
13537
|
return this.overrides?.setYear ? this.overrides.setYear(date, year) : setYear(date, year);
|
13475
13538
|
};
|
13539
|
+
/**
|
13540
|
+
* Returns the start of the broadcast week for the given date.
|
13541
|
+
*
|
13542
|
+
* @param date The original date.
|
13543
|
+
* @returns The start of the broadcast week.
|
13544
|
+
*/
|
13545
|
+
this.startOfBroadcastWeek = date => {
|
13546
|
+
return this.overrides?.startOfBroadcastWeek ? this.overrides.startOfBroadcastWeek(date, this) : startOfBroadcastWeek(date, this);
|
13547
|
+
};
|
13476
13548
|
/**
|
13477
13549
|
* Returns the start of the day for the given date.
|
13478
13550
|
*
|
@@ -14058,7 +14130,8 @@ function getDataAttributes(props) {
|
|
14058
14130
|
"data-mode": props.mode ?? undefined,
|
14059
14131
|
"data-required": "required" in props ? props.required : undefined,
|
14060
14132
|
"data-multiple-months": props.numberOfMonths && props.numberOfMonths > 1 || undefined,
|
14061
|
-
"data-week-numbers": props.showWeekNumber || undefined
|
14133
|
+
"data-week-numbers": props.showWeekNumber || undefined,
|
14134
|
+
"data-broadcast-calendar": props.broadcastCalendar || undefined
|
14062
14135
|
};
|
14063
14136
|
Object.entries(props).forEach(([key, val]) => {
|
14064
14137
|
if (key.startsWith("data-")) {
|
@@ -14124,7 +14197,7 @@ function formatDay(date, options, dateLib) {
|
|
14124
14197
|
*/
|
14125
14198
|
function formatMonthDropdown(/** The month number to format. */
|
14126
14199
|
monthNumber, /** The locale to use for formatting. */
|
14127
|
-
locale
|
14200
|
+
locale) {
|
14128
14201
|
return locale.localize?.month(monthNumber);
|
14129
14202
|
}
|
14130
14203
|
|
@@ -14228,7 +14301,7 @@ function getMonthOptions(displayMonth, navStart, navEnd, formatters, dateLib) {
|
|
14228
14301
|
return a - b;
|
14229
14302
|
});
|
14230
14303
|
const options = sortedMonths.map(value => {
|
14231
|
-
const label = formatters.formatMonthDropdown(value, dateLib.options.locale);
|
14304
|
+
const label = formatters.formatMonthDropdown(value, dateLib.options.locale ?? enUS);
|
14232
14305
|
const month = dateLib.Date ? new dateLib.Date(year, value) : new Date(year, value);
|
14233
14306
|
const disabled = navStart && month < startOfMonth(navStart) || navEnd && month > startOfMonth(navEnd) || false;
|
14234
14307
|
return {
|
@@ -14603,7 +14676,8 @@ function tzName(tz, date) {
|
|
14603
14676
|
*/
|
14604
14677
|
function getWeekdays(/** The date library. */
|
14605
14678
|
dateLib, /** Use ISOWeek instead of locale/ */
|
14606
|
-
ISOWeek, timeZone
|
14679
|
+
ISOWeek, timeZone, /** @since 9.4.0 */
|
14680
|
+
broadcastCalendar) {
|
14607
14681
|
const date = timeZone ? TZDate.tz(timeZone) : dateLib.Date ? new dateLib.Date() : new Date();
|
14608
14682
|
const start = ISOWeek ? dateLib.startOfISOWeek(date) : dateLib.startOfWeek(date);
|
14609
14683
|
const days = [];
|
@@ -14806,29 +14880,30 @@ var defaultLabels = /*#__PURE__*/Object.freeze({
|
|
14806
14880
|
labelYearDropdown: labelYearDropdown
|
14807
14881
|
});
|
14808
14882
|
|
14809
|
-
/** The number of days in a month when having 6 weeks. */
|
14810
|
-
const NrOfDaysWithFixedWeeks = 42;
|
14811
14883
|
/** Return all the dates to display in the calendar. */
|
14812
14884
|
function getDates(displayMonths, maxDate, props, dateLib) {
|
14813
14885
|
const firstMonth = displayMonths[0];
|
14814
14886
|
const lastMonth = displayMonths[displayMonths.length - 1];
|
14815
14887
|
const {
|
14816
14888
|
ISOWeek,
|
14817
|
-
fixedWeeks
|
14889
|
+
fixedWeeks,
|
14890
|
+
broadcastCalendar
|
14818
14891
|
} = props ?? {};
|
14819
14892
|
const {
|
14820
|
-
startOfWeek,
|
14821
|
-
endOfWeek,
|
14822
|
-
startOfISOWeek,
|
14823
|
-
endOfISOWeek,
|
14824
14893
|
addDays,
|
14825
14894
|
differenceInCalendarDays,
|
14826
14895
|
differenceInCalendarMonths,
|
14896
|
+
endOfBroadcastWeek,
|
14897
|
+
endOfISOWeek,
|
14898
|
+
endOfMonth,
|
14899
|
+
endOfWeek,
|
14827
14900
|
isAfter,
|
14828
|
-
|
14901
|
+
startOfBroadcastWeek,
|
14902
|
+
startOfISOWeek,
|
14903
|
+
startOfWeek
|
14829
14904
|
} = dateLib;
|
14830
|
-
const startWeekFirstDate = ISOWeek ? startOfISOWeek(firstMonth) : startOfWeek(firstMonth);
|
14831
|
-
const endWeekLastDate = ISOWeek ? endOfISOWeek(endOfMonth(lastMonth)) : endOfWeek(endOfMonth(lastMonth));
|
14905
|
+
const startWeekFirstDate = broadcastCalendar ? startOfBroadcastWeek(firstMonth, dateLib) : ISOWeek ? startOfISOWeek(firstMonth) : startOfWeek(firstMonth);
|
14906
|
+
const endWeekLastDate = broadcastCalendar ? endOfBroadcastWeek(lastMonth, dateLib) : ISOWeek ? endOfISOWeek(endOfMonth(lastMonth)) : endOfWeek(endOfMonth(lastMonth));
|
14832
14907
|
const nOfDays = differenceInCalendarDays(endWeekLastDate, startWeekFirstDate);
|
14833
14908
|
const nOfMonths = differenceInCalendarMonths(lastMonth, firstMonth) + 1;
|
14834
14909
|
const dates = [];
|
@@ -14840,9 +14915,11 @@ function getDates(displayMonths, maxDate, props, dateLib) {
|
|
14840
14915
|
dates.push(date);
|
14841
14916
|
}
|
14842
14917
|
// If fixed weeks is enabled, add the extra dates to the array
|
14843
|
-
const
|
14918
|
+
const nrOfDaysWithFixedWeeks = broadcastCalendar ? 35 : 42;
|
14919
|
+
const extraDates = nrOfDaysWithFixedWeeks * nOfMonths;
|
14844
14920
|
if (fixedWeeks && dates.length < extraDates) {
|
14845
|
-
|
14921
|
+
const daysToAdd = extraDates - dates.length;
|
14922
|
+
for (let i = 0; i < daysToAdd; i++) {
|
14846
14923
|
const date = addDays(dates[dates.length - 1], 1);
|
14847
14924
|
dates.push(date);
|
14848
14925
|
}
|
@@ -14953,25 +15030,29 @@ displayMonths, /** The dates to display in the calendar. */
|
|
14953
15030
|
dates, /** Options from the props context. */
|
14954
15031
|
props, dateLib) {
|
14955
15032
|
const {
|
14956
|
-
|
14957
|
-
|
14958
|
-
startOfISOWeek,
|
15033
|
+
addDays,
|
15034
|
+
endOfBroadcastWeek,
|
14959
15035
|
endOfISOWeek,
|
14960
15036
|
endOfMonth,
|
14961
|
-
|
15037
|
+
endOfWeek,
|
15038
|
+
getISOWeek,
|
14962
15039
|
getWeek,
|
14963
|
-
|
15040
|
+
startOfBroadcastWeek,
|
15041
|
+
startOfISOWeek,
|
15042
|
+
startOfWeek
|
14964
15043
|
} = dateLib;
|
14965
15044
|
const dayPickerMonths = displayMonths.reduce((months, month) => {
|
14966
|
-
const firstDateOfFirstWeek = props.ISOWeek ? startOfISOWeek(month) : startOfWeek(month);
|
14967
|
-
const lastDateOfLastWeek = props.ISOWeek ? endOfISOWeek(endOfMonth(month)) : endOfWeek(endOfMonth(month));
|
15045
|
+
const firstDateOfFirstWeek = props.broadcastCalendar ? startOfBroadcastWeek(month, dateLib) : props.ISOWeek ? startOfISOWeek(month) : startOfWeek(month);
|
15046
|
+
const lastDateOfLastWeek = props.broadcastCalendar ? endOfBroadcastWeek(month, dateLib) : props.ISOWeek ? endOfISOWeek(endOfMonth(month)) : endOfWeek(endOfMonth(month));
|
14968
15047
|
/** The dates to display in the month. */
|
14969
15048
|
const monthDates = dates.filter(date => {
|
14970
15049
|
return date >= firstDateOfFirstWeek && date <= lastDateOfLastWeek;
|
14971
15050
|
});
|
14972
|
-
|
15051
|
+
const nrOfDaysWithFixedWeeks = props.broadcastCalendar ? 35 : 42;
|
15052
|
+
if (props.fixedWeeks && monthDates.length < nrOfDaysWithFixedWeeks) {
|
14973
15053
|
const extraDates = dates.filter(date => {
|
14974
|
-
|
15054
|
+
const daysToAdd = nrOfDaysWithFixedWeeks - monthDates.length;
|
15055
|
+
return date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, daysToAdd);
|
14975
15056
|
});
|
14976
15057
|
monthDates.push(...extraDates);
|
14977
15058
|
}
|
@@ -15409,27 +15490,30 @@ function dateMatchModifiers(date, matchers, dateLib = defaultDateLib) {
|
|
15409
15490
|
/** Return the next date that should be focused. */
|
15410
15491
|
function getFocusableDate(moveBy, moveDir, refDate, navStart, navEnd, props, dateLib) {
|
15411
15492
|
const {
|
15412
|
-
ISOWeek
|
15493
|
+
ISOWeek,
|
15494
|
+
broadcastCalendar
|
15413
15495
|
} = props;
|
15414
15496
|
const {
|
15415
15497
|
addDays,
|
15416
15498
|
addMonths,
|
15417
|
-
addYears,
|
15418
15499
|
addWeeks,
|
15419
|
-
|
15500
|
+
addYears,
|
15501
|
+
endOfBroadcastWeek,
|
15420
15502
|
endOfISOWeek,
|
15421
|
-
startOfWeek,
|
15422
15503
|
endOfWeek,
|
15423
15504
|
max,
|
15424
|
-
min
|
15505
|
+
min,
|
15506
|
+
startOfBroadcastWeek,
|
15507
|
+
startOfISOWeek,
|
15508
|
+
startOfWeek
|
15425
15509
|
} = dateLib;
|
15426
15510
|
const moveFns = {
|
15427
15511
|
day: addDays,
|
15428
15512
|
week: addWeeks,
|
15429
15513
|
month: addMonths,
|
15430
15514
|
year: addYears,
|
15431
|
-
startOfWeek: date => ISOWeek ? startOfISOWeek(date) : startOfWeek(date),
|
15432
|
-
endOfWeek: date => ISOWeek ? endOfISOWeek(date) : endOfWeek(date)
|
15515
|
+
startOfWeek: date => broadcastCalendar ? startOfBroadcastWeek(date, dateLib) : ISOWeek ? startOfISOWeek(date) : startOfWeek(date),
|
15516
|
+
endOfWeek: date => broadcastCalendar ? endOfBroadcastWeek(date, dateLib) : ISOWeek ? endOfISOWeek(date) : endOfWeek(date)
|
15433
15517
|
};
|
15434
15518
|
let focusableDate = moveFns[moveBy](refDate, moveDir === "after" ? 1 : -1);
|
15435
15519
|
if (moveDir === "before" && navStart) {
|
@@ -15495,6 +15579,8 @@ function useFocus(props, calendar, getModifiers, isSelected, dateLib) {
|
|
15495
15579
|
/**
|
15496
15580
|
* Return a function to get the modifiers for a given day.
|
15497
15581
|
*
|
15582
|
+
* NOTE: this is not an hook, but a factory for `getModifiers`.
|
15583
|
+
*
|
15498
15584
|
* @private
|
15499
15585
|
*/
|
15500
15586
|
function useGetModifiers(days, props, dateLib) {
|
@@ -15503,12 +15589,19 @@ function useGetModifiers(days, props, dateLib) {
|
|
15503
15589
|
hidden,
|
15504
15590
|
modifiers,
|
15505
15591
|
showOutsideDays,
|
15592
|
+
broadcastCalendar,
|
15506
15593
|
today
|
15507
15594
|
} = props;
|
15508
15595
|
const {
|
15509
15596
|
isSameDay,
|
15510
|
-
isSameMonth
|
15597
|
+
isSameMonth,
|
15598
|
+
startOfMonth,
|
15599
|
+
isBefore,
|
15600
|
+
endOfMonth,
|
15601
|
+
isAfter
|
15511
15602
|
} = dateLib;
|
15603
|
+
const startMonth = props.startMonth && startOfMonth(props.startMonth);
|
15604
|
+
const endMonth = props.endMonth && endOfMonth(props.endMonth);
|
15512
15605
|
const internalModifiersMap = {
|
15513
15606
|
[DayFlag.focused]: [],
|
15514
15607
|
[DayFlag.outside]: [],
|
@@ -15517,20 +15610,18 @@ function useGetModifiers(days, props, dateLib) {
|
|
15517
15610
|
[DayFlag.today]: []
|
15518
15611
|
};
|
15519
15612
|
const customModifiersMap = {};
|
15520
|
-
const selectionModifiersMap = {
|
15521
|
-
[SelectionState.range_end]: [],
|
15522
|
-
[SelectionState.range_middle]: [],
|
15523
|
-
[SelectionState.range_start]: [],
|
15524
|
-
[SelectionState.selected]: []
|
15525
|
-
};
|
15526
15613
|
for (const day of days) {
|
15527
15614
|
const {
|
15528
15615
|
date,
|
15529
15616
|
displayMonth
|
15530
15617
|
} = day;
|
15531
15618
|
const isOutside = Boolean(displayMonth && !isSameMonth(date, displayMonth));
|
15619
|
+
const isBeforeStartMonth = Boolean(startMonth && isBefore(date, startMonth));
|
15620
|
+
const isAfterEndMonth = Boolean(endMonth && isAfter(date, endMonth));
|
15532
15621
|
const isDisabled = Boolean(disabled && dateMatchModifiers(date, disabled, dateLib));
|
15533
|
-
const isHidden = Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) ||
|
15622
|
+
const isHidden = Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) || isBeforeStartMonth || isAfterEndMonth ||
|
15623
|
+
// Broadcast calendar will show outside days as default
|
15624
|
+
!broadcastCalendar && !showOutsideDays && isOutside || broadcastCalendar && showOutsideDays === false && isOutside;
|
15534
15625
|
const isToday = isSameDay(date, today ?? (props.timeZone ? TZDate.tz(props.timeZone) : dateLib.Date ? new dateLib.Date() : new Date()));
|
15535
15626
|
if (isOutside) internalModifiersMap.outside.push(day);
|
15536
15627
|
if (isDisabled) internalModifiersMap.disabled.push(day);
|
@@ -15559,27 +15650,16 @@ function useGetModifiers(days, props, dateLib) {
|
|
15559
15650
|
[DayFlag.outside]: false,
|
15560
15651
|
[DayFlag.today]: false
|
15561
15652
|
};
|
15562
|
-
const selectionStates = {
|
15563
|
-
[SelectionState.range_end]: false,
|
15564
|
-
[SelectionState.range_middle]: false,
|
15565
|
-
[SelectionState.range_start]: false,
|
15566
|
-
[SelectionState.selected]: false
|
15567
|
-
};
|
15568
15653
|
const customModifiers = {};
|
15569
15654
|
// Find the modifiers for the given day
|
15570
15655
|
for (const name in internalModifiersMap) {
|
15571
15656
|
const days = internalModifiersMap[name];
|
15572
15657
|
dayFlags[name] = days.some(d => d === day);
|
15573
15658
|
}
|
15574
|
-
for (const name in selectionModifiersMap) {
|
15575
|
-
const days = selectionModifiersMap[name];
|
15576
|
-
selectionStates[name] = days.some(d => d === day);
|
15577
|
-
}
|
15578
15659
|
for (const name in customModifiersMap) {
|
15579
15660
|
customModifiers[name] = customModifiersMap[name].some(d => d === day);
|
15580
15661
|
}
|
15581
15662
|
return {
|
15582
|
-
...selectionStates,
|
15583
15663
|
...dayFlags,
|
15584
15664
|
// custom modifiers should override all the previous ones
|
15585
15665
|
...customModifiers
|
@@ -15984,7 +16064,7 @@ function DayPicker(props) {
|
|
15984
16064
|
};
|
15985
16065
|
const dateLib = new DateLib({
|
15986
16066
|
locale,
|
15987
|
-
weekStartsOn: props.weekStartsOn,
|
16067
|
+
weekStartsOn: props.broadcastCalendar ? 1 : props.weekStartsOn,
|
15988
16068
|
firstWeekContainsDate: props.firstWeekContainsDate,
|
15989
16069
|
useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
|
15990
16070
|
useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens
|
@@ -16003,7 +16083,7 @@ function DayPicker(props) {
|
|
16003
16083
|
...props.classNames
|
16004
16084
|
}
|
16005
16085
|
};
|
16006
|
-
}, [props.classNames, props.components, props.dateLib, props.firstWeekContainsDate, props.formatters, props.labels, props.locale, props.useAdditionalDayOfYearTokens, props.useAdditionalWeekYearTokens, props.weekStartsOn]);
|
16086
|
+
}, [props.classNames, props.components, props.dateLib, props.firstWeekContainsDate, props.formatters, props.labels, props.locale, props.useAdditionalDayOfYearTokens, props.useAdditionalWeekYearTokens, props.weekStartsOn, props.broadcastCalendar]);
|
16007
16087
|
const {
|
16008
16088
|
captionLayout,
|
16009
16089
|
mode,
|
@@ -18781,6 +18861,8 @@ function LiveRegion(_ref) {
|
|
18781
18861
|
// Hide element visually but keep it readable by screen readers
|
18782
18862
|
const visuallyHidden = {
|
18783
18863
|
position: 'fixed',
|
18864
|
+
top: 0,
|
18865
|
+
left: 0,
|
18784
18866
|
width: 1,
|
18785
18867
|
height: 1,
|
18786
18868
|
margin: -1,
|
@@ -20073,6 +20155,9 @@ class AbstractPointerSensor {
|
|
20073
20155
|
passive: false
|
20074
20156
|
});
|
20075
20157
|
this.listeners.add(events.end.name, this.handleEnd);
|
20158
|
+
if (events.cancel) {
|
20159
|
+
this.listeners.add(events.cancel.name, this.handleCancel);
|
20160
|
+
}
|
20076
20161
|
this.windowListeners.add(EventName.Resize, this.handleCancel);
|
20077
20162
|
this.windowListeners.add(EventName.DragStart, preventDefault);
|
20078
20163
|
this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
|
@@ -20192,6 +20277,9 @@ class AbstractPointerSensor {
|
|
20192
20277
|
}
|
20193
20278
|
}
|
20194
20279
|
const events = {
|
20280
|
+
cancel: {
|
20281
|
+
name: 'pointercancel'
|
20282
|
+
},
|
20195
20283
|
move: {
|
20196
20284
|
name: 'pointermove'
|
20197
20285
|
},
|
@@ -20264,6 +20352,9 @@ MouseSensor.activators = [{
|
|
20264
20352
|
}
|
20265
20353
|
}];
|
20266
20354
|
const events$2 = {
|
20355
|
+
cancel: {
|
20356
|
+
name: 'touchcancel'
|
20357
|
+
},
|
20267
20358
|
move: {
|
20268
20359
|
name: 'touchmove'
|
20269
20360
|
},
|
@@ -20465,11 +20556,11 @@ function useScrollIntent(_ref2) {
|
|
20465
20556
|
}, [disabled, delta, previousDelta]);
|
20466
20557
|
}
|
20467
20558
|
function useCachedNode(draggableNodes, id) {
|
20468
|
-
const draggableNode = id
|
20559
|
+
const draggableNode = id != null ? draggableNodes.get(id) : undefined;
|
20469
20560
|
const node = draggableNode ? draggableNode.node.current : null;
|
20470
20561
|
return useLazyMemo(cachedNode => {
|
20471
20562
|
var _ref;
|
20472
|
-
if (id
|
20563
|
+
if (id == null) {
|
20473
20564
|
return null;
|
20474
20565
|
} // In some cases, the draggable node can unmount while dragging
|
20475
20566
|
// This is the case for virtualized lists. In those situations,
|
@@ -20677,7 +20768,26 @@ function useRect(element, measure, fallbackRect) {
|
|
20677
20768
|
if (measure === void 0) {
|
20678
20769
|
measure = defaultMeasure;
|
20679
20770
|
}
|
20680
|
-
const [rect,
|
20771
|
+
const [rect, setRect] = useState(null);
|
20772
|
+
function measureRect() {
|
20773
|
+
setRect(currentRect => {
|
20774
|
+
if (!element) {
|
20775
|
+
return null;
|
20776
|
+
}
|
20777
|
+
if (element.isConnected === false) {
|
20778
|
+
var _ref;
|
20779
|
+
|
20780
|
+
// Fall back to last rect we measured if the element is
|
20781
|
+
// no longer connected to the DOM.
|
20782
|
+
return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
|
20783
|
+
}
|
20784
|
+
const newRect = measure(element);
|
20785
|
+
if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
|
20786
|
+
return currentRect;
|
20787
|
+
}
|
20788
|
+
return newRect;
|
20789
|
+
});
|
20790
|
+
}
|
20681
20791
|
const mutationObserver = useMutationObserver({
|
20682
20792
|
callback(records) {
|
20683
20793
|
if (!element) {
|
@@ -20712,23 +20822,6 @@ function useRect(element, measure, fallbackRect) {
|
|
20712
20822
|
}
|
20713
20823
|
}, [element]);
|
20714
20824
|
return rect;
|
20715
|
-
function reducer(currentRect) {
|
20716
|
-
if (!element) {
|
20717
|
-
return null;
|
20718
|
-
}
|
20719
|
-
if (element.isConnected === false) {
|
20720
|
-
var _ref;
|
20721
|
-
|
20722
|
-
// Fall back to last rect we measured if the element is
|
20723
|
-
// no longer connected to the DOM.
|
20724
|
-
return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
|
20725
|
-
}
|
20726
|
-
const newRect = measure(element);
|
20727
|
-
if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
|
20728
|
-
return currentRect;
|
20729
|
-
}
|
20730
|
-
return newRect;
|
20731
|
-
}
|
20732
20825
|
}
|
20733
20826
|
function useRectDelta(rect) {
|
20734
20827
|
const initialRect = useInitialValue(rect);
|
@@ -20874,28 +20967,24 @@ function useRects(elements, measure) {
|
|
20874
20967
|
}
|
20875
20968
|
const [firstElement] = elements;
|
20876
20969
|
const windowRect = useWindowRect(firstElement ? getWindow(firstElement) : null);
|
20877
|
-
const [rects,
|
20970
|
+
const [rects, setRects] = useState(defaultValue$2);
|
20971
|
+
function measureRects() {
|
20972
|
+
setRects(() => {
|
20973
|
+
if (!elements.length) {
|
20974
|
+
return defaultValue$2;
|
20975
|
+
}
|
20976
|
+
return elements.map(element => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
|
20977
|
+
});
|
20978
|
+
}
|
20878
20979
|
const resizeObserver = useResizeObserver({
|
20879
20980
|
callback: measureRects
|
20880
20981
|
});
|
20881
|
-
if (elements.length > 0 && rects === defaultValue$2) {
|
20882
|
-
measureRects();
|
20883
|
-
}
|
20884
20982
|
useIsomorphicLayoutEffect$1(() => {
|
20885
|
-
|
20886
|
-
|
20887
|
-
|
20888
|
-
resizeObserver == null ? void 0 : resizeObserver.disconnect();
|
20889
|
-
measureRects();
|
20890
|
-
}
|
20983
|
+
resizeObserver == null ? void 0 : resizeObserver.disconnect();
|
20984
|
+
measureRects();
|
20985
|
+
elements.forEach(element => resizeObserver == null ? void 0 : resizeObserver.observe(element));
|
20891
20986
|
}, [elements]);
|
20892
20987
|
return rects;
|
20893
|
-
function reducer() {
|
20894
|
-
if (!elements.length) {
|
20895
|
-
return defaultValue$2;
|
20896
|
-
}
|
20897
|
-
return elements.map(element => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
|
20898
|
-
}
|
20899
20988
|
}
|
20900
20989
|
function getMeasurableNode(node) {
|
20901
20990
|
if (!node) {
|
@@ -21062,7 +21151,7 @@ function reducer$1(state, action) {
|
|
21062
21151
|
}
|
21063
21152
|
};
|
21064
21153
|
case Action.DragMove:
|
21065
|
-
if (
|
21154
|
+
if (state.draggable.active == null) {
|
21066
21155
|
return state;
|
21067
21156
|
}
|
21068
21157
|
return {
|
@@ -21334,7 +21423,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
|
|
21334
21423
|
containers: droppableContainers
|
21335
21424
|
}
|
21336
21425
|
} = state;
|
21337
|
-
const node = activeId ? draggableNodes.get(activeId) : null;
|
21426
|
+
const node = activeId != null ? draggableNodes.get(activeId) : null;
|
21338
21427
|
const activeRects = useRef({
|
21339
21428
|
initial: null,
|
21340
21429
|
translated: null
|
@@ -21369,7 +21458,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
|
|
21369
21458
|
const autoScrollOptions = getAutoScrollerOptions();
|
21370
21459
|
const initialActiveNodeRect = useInitialRect(activeNode, measuringConfiguration.draggable.measure);
|
21371
21460
|
useLayoutShiftScrollCompensation({
|
21372
|
-
activeNode: activeId ? draggableNodes.get(activeId) : null,
|
21461
|
+
activeNode: activeId != null ? draggableNodes.get(activeId) : null,
|
21373
21462
|
config: autoScrollOptions.layoutShiftCompensation,
|
21374
21463
|
initialRect: initialActiveNodeRect,
|
21375
21464
|
measure: measuringConfiguration.draggable.measure
|
@@ -21447,6 +21536,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
|
|
21447
21536
|
|
21448
21537
|
const appliedTranslate = usesDragOverlay ? modifiedTranslate : add(modifiedTranslate, activeNodeScrollDelta);
|
21449
21538
|
const transform = adjustScale(appliedTranslate, (_over$rect = over == null ? void 0 : over.rect) != null ? _over$rect : null, activeNodeRect);
|
21539
|
+
const activeSensorRef = useRef(null);
|
21450
21540
|
const instantiateSensor = useCallback((event, _ref2) => {
|
21451
21541
|
let {
|
21452
21542
|
sensor: Sensor,
|
@@ -21481,6 +21571,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
|
|
21481
21571
|
onDragStart
|
21482
21572
|
} = latestProps.current;
|
21483
21573
|
const event = {
|
21574
|
+
activatorEvent,
|
21484
21575
|
active: {
|
21485
21576
|
id,
|
21486
21577
|
data: draggableNode.data,
|
@@ -21499,6 +21590,8 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
|
|
21499
21590
|
type: 'onDragStart',
|
21500
21591
|
event
|
21501
21592
|
});
|
21593
|
+
setActiveSensor(activeSensorRef.current);
|
21594
|
+
setActivatorEvent(activatorEvent);
|
21502
21595
|
});
|
21503
21596
|
},
|
21504
21597
|
onMove(coordinates) {
|
@@ -21510,10 +21603,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
|
|
21510
21603
|
onEnd: createHandler(Action.DragEnd),
|
21511
21604
|
onCancel: createHandler(Action.DragCancel)
|
21512
21605
|
});
|
21513
|
-
|
21514
|
-
setActiveSensor(sensorInstance);
|
21515
|
-
setActivatorEvent(event.nativeEvent);
|
21516
|
-
});
|
21606
|
+
activeSensorRef.current = sensorInstance;
|
21517
21607
|
function createHandler(type) {
|
21518
21608
|
return async function handler() {
|
21519
21609
|
const {
|
@@ -21550,6 +21640,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
|
|
21550
21640
|
setOver(null);
|
21551
21641
|
setActiveSensor(null);
|
21552
21642
|
setActivatorEvent(null);
|
21643
|
+
activeSensorRef.current = null;
|
21553
21644
|
const eventName = type === Action.DragEnd ? 'onDragEnd' : 'onDragCancel';
|
21554
21645
|
if (event) {
|
21555
21646
|
const handler = latestProps.current[eventName];
|
@@ -21771,7 +21862,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
|
|
21771
21862
|
});
|
21772
21863
|
const NullContext = /*#__PURE__*/createContext$1(null);
|
21773
21864
|
const defaultRole = 'button';
|
21774
|
-
const ID_PREFIX$1 = '
|
21865
|
+
const ID_PREFIX$1 = 'Draggable';
|
21775
21866
|
function useDraggable(_ref) {
|
21776
21867
|
let {
|
21777
21868
|
id,
|
@@ -21918,7 +22009,7 @@ function useDroppable(_ref) {
|
|
21918
22009
|
resizeObserverConnected.current = false;
|
21919
22010
|
resizeObserver.observe(nodeRef.current);
|
21920
22011
|
}, [nodeRef, resizeObserver]);
|
21921
|
-
|
22012
|
+
useEffect(() => {
|
21922
22013
|
dispatch({
|
21923
22014
|
type: Action.RegisterDroppable,
|
21924
22015
|
element: {
|
@@ -22333,6 +22424,7 @@ var DNDCore = /*#__PURE__*/Object.freeze({
|
|
22333
22424
|
defaultCoordinates: defaultCoordinates,
|
22334
22425
|
defaultDropAnimation: defaultDropAnimationConfiguration,
|
22335
22426
|
defaultDropAnimationSideEffects: defaultDropAnimationSideEffects,
|
22427
|
+
defaultKeyboardCoordinateGetter: defaultKeyboardCoordinateGetter,
|
22336
22428
|
defaultScreenReaderInstructions: defaultScreenReaderInstructions,
|
22337
22429
|
getClientRect: getClientRect,
|
22338
22430
|
getFirstCollision: getFirstCollision,
|
@@ -27229,7 +27321,8 @@ const Toastify = () => {
|
|
27229
27321
|
isOpen: toastProps.isOpen,
|
27230
27322
|
variant: toastProps.variant,
|
27231
27323
|
toastTitle: toastProps.toastTitle,
|
27232
|
-
toastMessage: toastProps.toastMessage
|
27324
|
+
toastMessage: toastProps.toastMessage,
|
27325
|
+
zIndex: 1000000000
|
27233
27326
|
});
|
27234
27327
|
};
|
27235
27328
|
// Utility to trigger toast messages outside of the Toastify component
|
@@ -31364,6 +31457,7 @@ const Row = props => jsx("tr", {
|
|
31364
31457
|
});
|
31365
31458
|
|
31366
31459
|
const HeaderRow = props => jsx("tr", {
|
31460
|
+
className: "ff-spreadsheet-row-header",
|
31367
31461
|
...props
|
31368
31462
|
});
|
31369
31463
|
|
@@ -31383,14 +31477,17 @@ const CornerIndicator = ({
|
|
31383
31477
|
onSelect();
|
31384
31478
|
}, [onSelect]);
|
31385
31479
|
return jsx("th", {
|
31386
|
-
className:
|
31387
|
-
'ff-spreadsheet-header--selected': selected
|
31388
|
-
}),
|
31480
|
+
className: 'ff-spreadsheet-corner-header',
|
31389
31481
|
onClick: handleClick,
|
31390
31482
|
tabIndex: 0,
|
31391
|
-
children: jsx(
|
31392
|
-
|
31393
|
-
|
31483
|
+
children: jsx("div", {
|
31484
|
+
className: classNames('corner-header', {
|
31485
|
+
'ff-spreadsheet-header--selected': selected
|
31486
|
+
}),
|
31487
|
+
children: jsx(Icon, {
|
31488
|
+
variant: selected ? 'dark' : 'light',
|
31489
|
+
name: "excel_corner_menu"
|
31490
|
+
})
|
31394
31491
|
})
|
31395
31492
|
});
|
31396
31493
|
};
|
@@ -31472,7 +31569,7 @@ const ColumnIndicator = ({
|
|
31472
31569
|
return jsxs("th", {
|
31473
31570
|
style: {
|
31474
31571
|
minWidth: `${columnWidth}px`,
|
31475
|
-
position: '
|
31572
|
+
position: 'sticky'
|
31476
31573
|
},
|
31477
31574
|
className: classNames('ff-spreadsheet-header', {
|
31478
31575
|
'ff-spreadsheet-header--selected': selected
|
@@ -32005,7 +32102,7 @@ const Copied = () => {
|
|
32005
32102
|
});
|
32006
32103
|
};
|
32007
32104
|
|
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
|
32105
|
+
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
32106
|
styleInject(css_248z$n);
|
32010
32107
|
|
32011
32108
|
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 +33608,28 @@ const AttachImage = ({
|
|
33511
33608
|
});
|
33512
33609
|
};
|
33513
33610
|
|
33514
|
-
var css_248z$f = ".ff-card-container {\n
|
33611
|
+
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
33612
|
styleInject(css_248z$f);
|
33516
33613
|
|
33517
33614
|
const StatusCard = ({
|
33518
33615
|
icon,
|
33519
33616
|
status,
|
33520
33617
|
count,
|
33521
|
-
text
|
33618
|
+
text,
|
33619
|
+
style = {
|
33620
|
+
width: '196.4px'
|
33621
|
+
},
|
33622
|
+
onSelectedStatus = _status => {}
|
33522
33623
|
}) => {
|
33624
|
+
const [isToggled, setIsToggled] = useState(false);
|
33625
|
+
const handleSelectStatus = status => {
|
33626
|
+
setIsToggled(true);
|
33627
|
+
onSelectedStatus(status);
|
33628
|
+
};
|
33523
33629
|
return jsxs("div", {
|
33524
|
-
className: `ff-card-container ${status.toLowerCase()}`,
|
33630
|
+
className: `ff-card-container ${status.toLowerCase()} ${isToggled ? 'toggled' : ''}`,
|
33631
|
+
style: style,
|
33632
|
+
onClick: () => handleSelectStatus(status),
|
33525
33633
|
children: [jsxs("div", {
|
33526
33634
|
className: "ff-status-bar",
|
33527
33635
|
children: [jsx("div", {
|
@@ -33534,7 +33642,6 @@ const StatusCard = ({
|
|
33534
33642
|
}), jsx(Typography, {
|
33535
33643
|
fontWeight: "semi-bold",
|
33536
33644
|
fontSize: "10px",
|
33537
|
-
color: "var(--ff-status-card-text-color)",
|
33538
33645
|
textAlign: "center",
|
33539
33646
|
lineHeight: "15px",
|
33540
33647
|
className: "ff-status-text",
|
@@ -33548,13 +33655,14 @@ const StatusCard = ({
|
|
33548
33655
|
fontSize: "24px",
|
33549
33656
|
className: "ff-number",
|
33550
33657
|
lineHeight: "36px",
|
33658
|
+
color: isToggled ? 'var(--base-bg-color)' : '',
|
33551
33659
|
children: count
|
33552
33660
|
}), jsx(Typography, {
|
33553
33661
|
fontWeight: "regular",
|
33554
33662
|
fontSize: "10px",
|
33555
33663
|
className: "ff-text",
|
33556
33664
|
lineHeight: "15px",
|
33557
|
-
color:
|
33665
|
+
color: isToggled ? 'var(--base-bg-color)' : 'var(--ff-card-status-text-color)',
|
33558
33666
|
children: text
|
33559
33667
|
})]
|
33560
33668
|
})]
|
@@ -39615,7 +39723,8 @@ const BarChart = ({
|
|
39615
39723
|
icons = [],
|
39616
39724
|
iconSize,
|
39617
39725
|
legendPosition = 'bottom',
|
39618
|
-
legendGap = 5
|
39726
|
+
legendGap = 5,
|
39727
|
+
onSelectedBar = _label => {}
|
39619
39728
|
}) => {
|
39620
39729
|
const [tooltip, setTooltip] = useState({
|
39621
39730
|
visible: false,
|
@@ -39673,6 +39782,9 @@ const BarChart = ({
|
|
39673
39782
|
borderColor: 'transparent'
|
39674
39783
|
});
|
39675
39784
|
};
|
39785
|
+
const handleSelectLabel = label => {
|
39786
|
+
onSelectedBar(label);
|
39787
|
+
};
|
39676
39788
|
return jsxs("div", {
|
39677
39789
|
className: "ff-bar-chart-container",
|
39678
39790
|
style: {
|
@@ -39747,7 +39859,8 @@ const BarChart = ({
|
|
39747
39859
|
ry: barBorderRadius,
|
39748
39860
|
onMouseEnter: e => handleMouseEnter(e, item.label, item.value, getBorderColor(index)),
|
39749
39861
|
onMouseMove: handleMouseMove,
|
39750
|
-
onMouseLeave: handleMouseLeave
|
39862
|
+
onMouseLeave: handleMouseLeave,
|
39863
|
+
onClick: () => handleSelectLabel(item.label)
|
39751
39864
|
}), showXAxisLabels && jsx("text", {
|
39752
39865
|
x: barX + barWidth / 2,
|
39753
39866
|
y: height + topPadding + 15,
|