@epam/uui 5.12.1 → 5.14.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/styles/index.scss +0 -4
- package/components/buttons/IconButton.d.ts.map +1 -1
- package/components/datePickers/Calendar.d.ts.map +1 -1
- package/components/datePickers/RangeDatePicker.d.ts.map +1 -1
- package/components/datePickers/types.d.ts +1 -0
- package/components/datePickers/types.d.ts.map +1 -1
- package/components/filters/FilterNumericBody.d.ts.map +1 -1
- package/components/filters/FilterPanelItemToggler.d.ts +1 -1
- package/components/filters/FilterPickerBody.d.ts +1 -2
- package/components/filters/FilterPickerBody.d.ts.map +1 -1
- package/components/filters/FiltersPanel.d.ts +4 -1
- package/components/filters/FiltersPanel.d.ts.map +1 -1
- package/components/layout/FlexItems/FlexRow.d.ts.map +1 -1
- package/components/navigation/MainMenu/MainMenuAvatar.d.ts +2 -2
- package/components/navigation/MainMenu/MainMenuAvatar.d.ts.map +1 -1
- package/components/navigation/MainMenu/MainMenuButton.d.ts.map +1 -1
- package/components/navigation/MainMenu/MainMenuDropdown.d.ts.map +1 -1
- package/components/overlays/DropdownMenu.d.ts +1 -1
- package/components/overlays/DropdownMenu.d.ts.map +1 -1
- package/components/overlays/NotificationCard.d.ts.map +1 -1
- package/components/pickers/DataPickerBody.d.ts.map +1 -1
- package/components/pickers/PickerInput.d.ts +4 -2
- package/components/pickers/PickerInput.d.ts.map +1 -1
- package/components/typography/RichTextView.d.ts.map +1 -1
- package/index.esm.js +571 -555
- package/index.esm.js.map +1 -1
- package/index.js +571 -555
- package/index.js.map +1 -1
- package/package.json +6 -6
- package/settings.d.ts.map +1 -1
- package/settings.types.d.ts +7 -0
- package/settings.types.d.ts.map +1 -1
- package/stats.html +1 -1
- package/styles.css +2573 -2610
- package/styles.css.map +1 -1
- package/assets/styles/buttonLayout.scss +0 -70
- package/assets/styles/controlLayout.scss +0 -28
- package/assets/styles/icons.scss +0 -55
- package/assets/styles/text-size.scss +0 -42
package/index.js
CHANGED
|
@@ -322,9 +322,12 @@ const settings = {
|
|
|
322
322
|
button: '36',
|
|
323
323
|
checkbox: '18',
|
|
324
324
|
countIndicator: '24',
|
|
325
|
+
flexRow: '36',
|
|
326
|
+
filtersPanel: '36',
|
|
325
327
|
linkButton: '36',
|
|
326
328
|
numericInput: '36',
|
|
327
329
|
radioInput: '18',
|
|
330
|
+
richTextView: '14',
|
|
328
331
|
switch: '18',
|
|
329
332
|
tabButton: '48',
|
|
330
333
|
tag: '36',
|
|
@@ -344,6 +347,9 @@ const settings = {
|
|
|
344
347
|
48: '30',
|
|
345
348
|
},
|
|
346
349
|
},
|
|
350
|
+
notificationCard: {
|
|
351
|
+
action: '30',
|
|
352
|
+
},
|
|
347
353
|
tag: {
|
|
348
354
|
countIndicator: {
|
|
349
355
|
18: '12',
|
|
@@ -622,7 +628,7 @@ const settings = {
|
|
|
622
628
|
},
|
|
623
629
|
};
|
|
624
630
|
|
|
625
|
-
var css$1y = {"uui-typography":"
|
|
631
|
+
var css$1y = {"uui-typography":"BxVSfM","uuiTypography":"BxVSfM","hero-header":"v2j3Fi","heroHeader":"v2j3Fi","promo-header":"ZYwa5j","promoHeader":"ZYwa5j","uui-critical":"bikZJm","uuiCritical":"bikZJm","uui-info":"_337-o8","uuiInfo":"_337-o8","uui-success":"w-Iljh","uuiSuccess":"w-Iljh","uui-warning":"S2i7Tl","uuiWarning":"S2i7Tl","uui-highlight":"vUeKnF","uuiHighlight":"vUeKnF","uui-typography-size-12":"Uuaujp","uuiTypographySize12":"Uuaujp","uui-typography-size-14":"LBX21x","uuiTypographySize14":"LBX21x","uui-typography-size-16":"LCUWJt","uuiTypographySize16":"LCUWJt","root":"oJurr-"};
|
|
626
632
|
|
|
627
633
|
function applyButtonMods(mods) {
|
|
628
634
|
return [
|
|
@@ -640,7 +646,7 @@ const Button = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Button,
|
|
|
640
646
|
};
|
|
641
647
|
});
|
|
642
648
|
|
|
643
|
-
var css$1x = {"root":"
|
|
649
|
+
var css$1x = {"root":"pACCop"};
|
|
644
650
|
|
|
645
651
|
function applyIconButtonMods(props) {
|
|
646
652
|
return ['uui-icon_button', `uui-color-${props.color || 'neutral'}`, css$1x.root];
|
|
@@ -677,7 +683,7 @@ function getIconClass(props) {
|
|
|
677
683
|
return [classList['has-left-icon'] ? 'uui-has-left-icon' : 'uui-no-left-icon', classList['has-right-icon'] ? 'uui-has-right-icon' : 'uui-no-right-icon'];
|
|
678
684
|
}
|
|
679
685
|
|
|
680
|
-
var css$1w = {"uui-typography":"
|
|
686
|
+
var css$1w = {"uui-typography":"_9JtiGA","uuiTypography":"_9JtiGA","hero-header":"_4sCMyU","heroHeader":"_4sCMyU","promo-header":"ud9sqv","promoHeader":"ud9sqv","uui-critical":"jCjGqG","uuiCritical":"jCjGqG","uui-info":"tlNKLb","uuiInfo":"tlNKLb","uui-success":"xBjHx-","uuiSuccess":"xBjHx-","uui-warning":"c-bBbX","uuiWarning":"c-bBbX","uui-highlight":"_-3n5XS","uuiHighlight":"_-3n5XS","uui-typography-size-12":"yESo6b","uuiTypographySize12":"yESo6b","uui-typography-size-14":"ct8kP7","uuiTypographySize14":"ct8kP7","uui-typography-size-16":"JQkd-k","uuiTypographySize16":"JQkd-k","root":"CaLDSv"};
|
|
681
687
|
|
|
682
688
|
const DEFAULT_COLOR = 'primary';
|
|
683
689
|
const DEFAULT_WEIGHT = 'semibold';
|
|
@@ -701,14 +707,14 @@ const LinkButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
|
701
707
|
];
|
|
702
708
|
const captionStyles = cx__default.default(uuiCore.uuiElement.caption, props.underline && `uui-underline-${props.underline}`, `uui-link-button-weight-${props.weight || DEFAULT_WEIGHT}`);
|
|
703
709
|
const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : systemIcons.foldingArrow;
|
|
704
|
-
return (React__namespace.createElement(uuiComponents.Clickable,
|
|
710
|
+
return (React__namespace.createElement(uuiComponents.Clickable, { ...props, type: "button", cx: rootStyles, ref: ref },
|
|
705
711
|
props.icon && props.iconPosition !== 'right' && (React__namespace.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
|
|
706
712
|
props.caption && (React__namespace.createElement("div", { className: captionStyles }, props.caption)),
|
|
707
713
|
props.icon && props.iconPosition === 'right' && (React__namespace.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
|
|
708
714
|
props.isDropdown && (React__namespace.createElement(uuiComponents.IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
|
|
709
715
|
});
|
|
710
716
|
|
|
711
|
-
var css$1v = {"root":"
|
|
717
|
+
var css$1v = {"root":"E5oITR"};
|
|
712
718
|
|
|
713
719
|
const CountIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
|
|
714
720
|
return (React__namespace.default.createElement("div", { ref: ref, className: cx__default.default([
|
|
@@ -720,7 +726,7 @@ const CountIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
|
|
|
720
726
|
]) }, props.caption));
|
|
721
727
|
});
|
|
722
728
|
|
|
723
|
-
var css$1u = {"uui-typography":"
|
|
729
|
+
var css$1u = {"uui-typography":"gIceca","uuiTypography":"gIceca","hero-header":"asTGYp","heroHeader":"asTGYp","promo-header":"trsecL","promoHeader":"trsecL","uui-critical":"_8-T74h","uuiCritical":"_8-T74h","uui-info":"_5ZNXuT","uuiInfo":"_5ZNXuT","uui-success":"RSJQXw","uuiSuccess":"RSJQXw","uui-warning":"qdNLSe","uuiWarning":"qdNLSe","uui-highlight":"aEpXJr","uuiHighlight":"aEpXJr","uui-typography-size-12":"xYwGrt","uuiTypographySize12":"xYwGrt","uui-typography-size-14":"Bn9Ykw","uuiTypographySize14":"Bn9Ykw","uui-typography-size-16":"KCG0U7","uuiTypographySize16":"KCG0U7","root":"V6ye1G","withNotify":"uldSJh"};
|
|
724
730
|
|
|
725
731
|
const TabButton = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
|
|
726
732
|
const styles = [
|
|
@@ -732,7 +738,12 @@ const TabButton = /* @__PURE__ */React__namespace.default.forwardRef((props, ref
|
|
|
732
738
|
];
|
|
733
739
|
const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : systemIcons.foldingArrow;
|
|
734
740
|
const ClearIcon = props.clearIcon ? props.clearIcon : systemIcons.clear;
|
|
735
|
-
return (React__namespace.default.createElement(uuiComponents.Clickable,
|
|
741
|
+
return (React__namespace.default.createElement(uuiComponents.Clickable, { ...props, rawProps: {
|
|
742
|
+
role: 'tab',
|
|
743
|
+
'aria-haspopup': props.isDropdown,
|
|
744
|
+
'aria-expanded': props.isOpen,
|
|
745
|
+
...props.rawProps,
|
|
746
|
+
}, cx: styles, ref: ref },
|
|
736
747
|
props.icon && props.iconPosition !== 'right' && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
|
|
737
748
|
(props.caption || props.withNotify) && (React__namespace.default.createElement("div", { className: uuiCore.cx(uuiCore.uuiElement.caption) },
|
|
738
749
|
props.caption,
|
|
@@ -743,7 +754,7 @@ const TabButton = /* @__PURE__ */React__namespace.default.forwardRef((props, ref
|
|
|
743
754
|
props.onClear && !props.isDisabled && (React__namespace.default.createElement(uuiComponents.IconContainer, { cx: uuiCore.uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
|
|
744
755
|
});
|
|
745
756
|
|
|
746
|
-
var css$1t = {"uui-typography":"
|
|
757
|
+
var css$1t = {"uui-typography":"_2Bb0KD","uuiTypography":"_2Bb0KD","hero-header":"SZ8utT","heroHeader":"SZ8utT","promo-header":"aU5LPU","promoHeader":"aU5LPU","uui-critical":"_58nZr7","uuiCritical":"_58nZr7","uui-info":"npTySD","uuiInfo":"npTySD","uui-success":"PPqIFl","uuiSuccess":"PPqIFl","uui-warning":"UqYNlP","uuiWarning":"UqYNlP","uui-highlight":"_4kb4e-","uuiHighlight":"_4kb4e-","uui-typography-size-12":"EGRcHY","uuiTypographySize12":"EGRcHY","uui-typography-size-14":"Z9LG4E","uuiTypographySize14":"Z9LG4E","uui-typography-size-16":"SxsGWp","uuiTypographySize16":"SxsGWp","root":"ylnw9n"};
|
|
747
758
|
|
|
748
759
|
function applyVerticalTabButtonMods() {
|
|
749
760
|
return [css$1t.root, 'uui-vertical-tab-button'];
|
|
@@ -765,7 +776,7 @@ var SvgContentMinusOutline = function SvgContentMinusOutline(props, ref) {
|
|
|
765
776
|
};
|
|
766
777
|
var ForwardRef$C = /*#__PURE__*/React.forwardRef(SvgContentMinusOutline);
|
|
767
778
|
|
|
768
|
-
var css$1s = {"uui-typography":"
|
|
779
|
+
var css$1s = {"uui-typography":"_30GgUR","uuiTypography":"_30GgUR","hero-header":"ucbYAv","heroHeader":"ucbYAv","promo-header":"q-A2LH","promoHeader":"q-A2LH","uui-critical":"CNxN1F","uuiCritical":"CNxN1F","uui-info":"vSS8Im","uuiInfo":"vSS8Im","uui-success":"_0vTg54","uuiSuccess":"_0vTg54","uui-warning":"dLvklV","uuiWarning":"dLvklV","uui-highlight":"M0j3Ak","uuiHighlight":"M0j3Ak","uui-typography-size-12":"jl3d-r","uuiTypographySize12":"jl3d-r","uui-typography-size-14":"YiB0Fl","uuiTypographySize14":"YiB0Fl","uui-typography-size-16":"w8ZG-h","uuiTypographySize16":"w8ZG-h","root":"kpCvpo","mode-cell":"_8rLBew","modeCell":"_8rLBew"};
|
|
769
780
|
|
|
770
781
|
function applyCheckboxMods(mods) {
|
|
771
782
|
return [
|
|
@@ -800,7 +811,7 @@ var SvgRadioDotFill = function SvgRadioDotFill(props, ref) {
|
|
|
800
811
|
};
|
|
801
812
|
var ForwardRef$B = /*#__PURE__*/React.forwardRef(SvgRadioDotFill);
|
|
802
813
|
|
|
803
|
-
var css$1r = {"uui-typography":"
|
|
814
|
+
var css$1r = {"uui-typography":"qvk7q0","uuiTypography":"qvk7q0","hero-header":"JPaP-O","heroHeader":"JPaP-O","promo-header":"znvySk","promoHeader":"znvySk","uui-critical":"OXYllz","uuiCritical":"OXYllz","uui-info":"_6QiNvJ","uuiInfo":"_6QiNvJ","uui-success":"cI7so5","uuiSuccess":"cI7so5","uui-warning":"NyyBWq","uuiWarning":"NyyBWq","uui-highlight":"Nd5fJR","uuiHighlight":"Nd5fJR","uui-typography-size-12":"LgXqsQ","uuiTypographySize12":"LgXqsQ","uui-typography-size-14":"rCPTYN","uuiTypographySize14":"rCPTYN","uui-typography-size-16":"_45cfAG","uuiTypographySize16":"_45cfAG","root":"YHrYwa"};
|
|
804
815
|
|
|
805
816
|
function applyRadioInputMods(mods) {
|
|
806
817
|
return [
|
|
@@ -812,7 +823,7 @@ function applyRadioInputMods(mods) {
|
|
|
812
823
|
}
|
|
813
824
|
const RadioInput = /* @__PURE__ */uuiCore.withMods(uuiComponents.RadioInput, applyRadioInputMods, (props) => ({ icon: props.icon ? props.icon : ForwardRef$B }));
|
|
814
825
|
|
|
815
|
-
var css$1q = {"root":"
|
|
826
|
+
var css$1q = {"root":"bMXx1M"};
|
|
816
827
|
|
|
817
828
|
function applySwitchMods(mods) {
|
|
818
829
|
return [
|
|
@@ -823,50 +834,6 @@ function applySwitchMods(mods) {
|
|
|
823
834
|
}
|
|
824
835
|
const Switch = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Switch, applySwitchMods);
|
|
825
836
|
|
|
826
|
-
/******************************************************************************
|
|
827
|
-
Copyright (c) Microsoft Corporation.
|
|
828
|
-
|
|
829
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
830
|
-
purpose with or without fee is hereby granted.
|
|
831
|
-
|
|
832
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
833
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
834
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
835
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
836
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
837
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
838
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
839
|
-
***************************************************************************** */
|
|
840
|
-
/* global Reflect, Promise, SuppressedError, Symbol */
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
function __rest(s, e) {
|
|
844
|
-
var t = {};
|
|
845
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
846
|
-
t[p] = s[p];
|
|
847
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
848
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
849
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
850
|
-
t[p[i]] = s[p[i]];
|
|
851
|
-
}
|
|
852
|
-
return t;
|
|
853
|
-
}
|
|
854
|
-
|
|
855
|
-
function __awaiter(thisArg, _arguments, P, generator) {
|
|
856
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
857
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
858
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
859
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
860
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
861
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
862
|
-
});
|
|
863
|
-
}
|
|
864
|
-
|
|
865
|
-
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
866
|
-
var e = new Error(message);
|
|
867
|
-
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
868
|
-
};
|
|
869
|
-
|
|
870
837
|
/**
|
|
871
838
|
* Defines the different edit modes.
|
|
872
839
|
*/
|
|
@@ -880,7 +847,7 @@ var EditMode;
|
|
|
880
847
|
EditMode["INLINE"] = "inline";
|
|
881
848
|
})(EditMode || (EditMode = {}));
|
|
882
849
|
|
|
883
|
-
var textInputCss = {"uui-typography":"
|
|
850
|
+
var textInputCss = {"uui-typography":"f-TQHl","uuiTypography":"f-TQHl","hero-header":"EgaOGP","heroHeader":"EgaOGP","promo-header":"yHxVeD","promoHeader":"yHxVeD","uui-critical":"h-hUtL","uuiCritical":"h-hUtL","uui-info":"Gxds1P","uuiInfo":"Gxds1P","uui-success":"zkPTKp","uuiSuccess":"zkPTKp","uui-warning":"_4gHeaJ","uuiWarning":"_4gHeaJ","uui-highlight":"a2qRo4","uuiHighlight":"a2qRo4","uui-typography-size-12":"MrfIZO","uuiTypographySize12":"MrfIZO","uui-typography-size-14":"cV3wFz","uuiTypographySize14":"cV3wFz","uui-typography-size-16":"zF-hZF","uuiTypographySize16":"zF-hZF","root":"unsKZ7","mode-form":"Lr-Rvl","modeForm":"Lr-Rvl","mode-inline":"UvGGX5","modeInline":"UvGGX5","mode-cell":"w6GVvK","modeCell":"w6GVvK"};
|
|
884
851
|
|
|
885
852
|
const DEFAULT_MODE$3 = EditMode.FORM;
|
|
886
853
|
function applyTextInputMods(mods) {
|
|
@@ -897,25 +864,31 @@ const TextInput = /* @__PURE__ */uuiCore.withMods(uuiComponents.TextInput, apply
|
|
|
897
864
|
}));
|
|
898
865
|
const SearchInput = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
|
|
899
866
|
// analytics events are sending in IEditableDebouncer, so we need to avoid sending events in TextInput
|
|
900
|
-
const textInputProps =
|
|
867
|
+
const { ...textInputProps } = props;
|
|
901
868
|
delete textInputProps.getValueChangeAnalyticsEvent;
|
|
902
|
-
return (React__namespace.default.createElement(uuiCore.IEditableDebouncer,
|
|
903
|
-
var _a;
|
|
869
|
+
return (React__namespace.default.createElement(uuiCore.IEditableDebouncer, { ...props, render: (iEditable) => {
|
|
904
870
|
const defaultOnCancel = () => iEditable.onValueChange('');
|
|
905
|
-
return (React__namespace.default.createElement(TextInput,
|
|
906
|
-
} }))
|
|
871
|
+
return (React__namespace.default.createElement(TextInput, { icon: systemIcons.search, onCancel: props.onCancel ?? defaultOnCancel, type: "search", inputMode: "search", ref: ref, ...textInputProps, ...iEditable }));
|
|
872
|
+
} }));
|
|
907
873
|
});
|
|
908
874
|
|
|
909
|
-
var css$1p = {"root":"
|
|
875
|
+
var css$1p = {"root":"z-HBZ-"};
|
|
910
876
|
|
|
911
877
|
const ControlGroup = /* @__PURE__ */uuiCore.withMods(uuiComponents.ControlGroup, () => [css$1p.root, 'uui-control-group']);
|
|
912
878
|
|
|
913
879
|
function MultiSwitchComponent(props, ref) {
|
|
914
|
-
return (React__namespace.createElement(ControlGroup, { ref: ref, rawProps:
|
|
880
|
+
return (React__namespace.createElement(ControlGroup, { ref: ref, rawProps: {
|
|
881
|
+
...props.rawProps,
|
|
882
|
+
role: 'tablist',
|
|
883
|
+
'aria-invalid': props.isInvalid,
|
|
884
|
+
'aria-required': props.isRequired,
|
|
885
|
+
'aria-disabled': props.isDisabled,
|
|
886
|
+
'aria-readonly': props.isReadonly,
|
|
887
|
+
} }, props.items.map((item, index) => (React__namespace.createElement(Button, { ...props, ...item, isDisabled: props.isDisabled, key: index + '-' + item.id, onClick: () => props.onValueChange(item.id), fill: props.value === item.id ? 'solid' : 'outline', color: props.color, size: props.size, rawProps: { 'aria-current': props.value === item.id, role: 'tab' } })))));
|
|
915
888
|
}
|
|
916
889
|
const MultiSwitch = /* @__PURE__ */React__namespace.forwardRef(MultiSwitchComponent);
|
|
917
890
|
|
|
918
|
-
var css$1o = {"uui-typography":"
|
|
891
|
+
var css$1o = {"uui-typography":"xgifaP","uuiTypography":"xgifaP","hero-header":"Nq1-MR","heroHeader":"Nq1-MR","promo-header":"_9VRwFg","promoHeader":"_9VRwFg","uui-critical":"AgR3Av","uuiCritical":"AgR3Av","uui-info":"Bts1pp","uuiInfo":"Bts1pp","uui-success":"d-dULs","uuiSuccess":"d-dULs","uui-warning":"x1JfbH","uuiWarning":"x1JfbH","uui-highlight":"C8-QQ1","uuiHighlight":"C8-QQ1","uui-typography-size-12":"ilf8Bb","uuiTypographySize12":"ilf8Bb","uui-typography-size-14":"Ge67Sl","uuiTypographySize14":"Ge67Sl","uui-typography-size-16":"BK9iWe","uuiTypographySize16":"BK9iWe","root":"VblDiw","mode-form":"_2alu6s","modeForm":"_2alu6s","mode-cell":"UmhnnI","modeCell":"UmhnnI"};
|
|
919
892
|
|
|
920
893
|
const DEFAULT_MODE$2 = EditMode.FORM;
|
|
921
894
|
function applyNumericInputMods(mods) {
|
|
@@ -927,16 +900,15 @@ function applyNumericInputMods(mods) {
|
|
|
927
900
|
];
|
|
928
901
|
}
|
|
929
902
|
const NumericInput = /* @__PURE__ */uuiCore.withMods(uuiComponents.NumericInput, applyNumericInputMods, (props) => {
|
|
930
|
-
var _a, _b;
|
|
931
903
|
return {
|
|
932
904
|
upIcon: systemIcons.foldingArrow,
|
|
933
905
|
downIcon: systemIcons.foldingArrow,
|
|
934
|
-
align:
|
|
935
|
-
disableArrows:
|
|
906
|
+
align: props.align ?? (props.mode === 'cell' ? 'right' : 'left'),
|
|
907
|
+
disableArrows: props.disableArrows ?? props.mode === 'cell',
|
|
936
908
|
};
|
|
937
909
|
});
|
|
938
910
|
|
|
939
|
-
var css$1n = {"uui-typography":"
|
|
911
|
+
var css$1n = {"uui-typography":"ClsqnT","uuiTypography":"ClsqnT","hero-header":"TpUjt2","heroHeader":"TpUjt2","promo-header":"_52ocSD","promoHeader":"_52ocSD","uui-critical":"n6ZtH3","uuiCritical":"n6ZtH3","uui-info":"PbcuPS","uuiInfo":"PbcuPS","uui-success":"T7ZhYL","uuiSuccess":"T7ZhYL","uui-warning":"Otka0q","uuiWarning":"Otka0q","uui-highlight":"U3LRBm","uuiHighlight":"U3LRBm","uui-typography-size-12":"_7tEilr","uuiTypographySize12":"_7tEilr","uui-typography-size-14":"gDA-et","uuiTypographySize14":"gDA-et","uui-typography-size-16":"UygcqK","uuiTypographySize16":"UygcqK","root":"ZAeJwg","mode-form":"IyS74M","modeForm":"IyS74M","mode-cell":"UuHcnY","modeCell":"UuHcnY","mode-inline":"QT3Bmi","modeInline":"QT3Bmi"};
|
|
940
912
|
|
|
941
913
|
const DEFAULT_MODE$1 = EditMode.FORM;
|
|
942
914
|
function applyTextAreaMods(mods) {
|
|
@@ -1037,9 +1009,9 @@ var SvgNotificationInfoFill = function SvgNotificationInfoFill(props, ref) {
|
|
|
1037
1009
|
};
|
|
1038
1010
|
var ForwardRef$x = /*#__PURE__*/React.forwardRef(SvgNotificationInfoFill);
|
|
1039
1011
|
|
|
1040
|
-
var css$1m = {"uui-typography":"
|
|
1012
|
+
var css$1m = {"uui-typography":"-y2sNC","uuiTypography":"-y2sNC","hero-header":"UCYswi","heroHeader":"UCYswi","promo-header":"K14fst","promoHeader":"K14fst","uui-critical":"xHZfNj","uuiCritical":"xHZfNj","uui-info":"_89R8C3","uuiInfo":"_89R8C3","uui-success":"_8eiMmp","uuiSuccess":"_8eiMmp","uui-warning":"CC7jP6","uuiWarning":"CC7jP6","uui-highlight":"tC3oQc","uuiHighlight":"tC3oQc","uui-typography-size-12":"o-fF8y","uuiTypographySize12":"o-fF8y","uui-typography-size-14":"hr--CY","uuiTypographySize14":"hr--CY","uui-typography-size-16":"z7bSyf","uuiTypographySize16":"z7bSyf","root":"_5uAGDW","main-path":"V23QHk","mainPath":"V23QHk","content-wrapper":"KI6tN4","contentWrapper":"KI6tN4","content":"Crz1MD","action-wrapper":"PBVbEV","actionWrapper":"PBVbEV","icon-wrapper":"IwMP4M","iconWrapper":"IwMP4M","icon":"nnb-vH","close-icon":"ZrkwuB","closeIcon":"ZrkwuB"};
|
|
1041
1013
|
|
|
1042
|
-
const Alert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("div",
|
|
1014
|
+
const Alert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("div", { role: "alert", ref: ref, className: cx__default.default('uui-alert', css$1m.root, props.color && `uui-color-${props.color}`, props.cx, `uui-size-${props.size || settings.sizes.defaults.alert}`), ...props.rawProps },
|
|
1043
1015
|
React__namespace.createElement("div", { className: css$1m.mainPath },
|
|
1044
1016
|
React__namespace.createElement("div", { className: css$1m.contentWrapper },
|
|
1045
1017
|
props.icon && (React__namespace.createElement("div", { className: css$1m.iconWrapper },
|
|
@@ -1048,14 +1020,14 @@ const Alert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React_
|
|
|
1048
1020
|
props.children,
|
|
1049
1021
|
props.actions && (React__namespace.createElement("div", { className: css$1m.actionWrapper }, props.actions.map((action) => (React__namespace.createElement(LinkButton, { caption: action.name, onClick: action.action, key: action.name, cx: css$1m.actionLink, size: settings.sizes.alert.action[props.size || settings.sizes.defaults.alert] }))))))),
|
|
1050
1022
|
props.onClose && React__namespace.createElement(IconButton, { icon: ForwardRef$R, color: "neutral", onClick: props.onClose, cx: css$1m.closeIcon })))));
|
|
1051
|
-
const WarningAlert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert,
|
|
1052
|
-
const SuccessAlert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert,
|
|
1053
|
-
const HintAlert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert,
|
|
1054
|
-
const ErrorAlert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert,
|
|
1023
|
+
const WarningAlert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, { icon: ForwardRef$z, color: "warning", ref: ref, ...props }));
|
|
1024
|
+
const SuccessAlert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, { icon: ForwardRef$A, color: "success", ref: ref, ...props }));
|
|
1025
|
+
const HintAlert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, { icon: ForwardRef$x, color: "info", ref: ref, ...props }));
|
|
1026
|
+
const ErrorAlert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, { icon: ForwardRef$y, color: "error", ref: ref, ...props }));
|
|
1055
1027
|
|
|
1056
1028
|
const Dropdown = /* @__PURE__ */uuiCore.withMods(uuiComponents.Dropdown);
|
|
1057
1029
|
|
|
1058
|
-
var css$1l = {"root":"
|
|
1030
|
+
var css$1l = {"root":"xxkRoE"};
|
|
1059
1031
|
|
|
1060
1032
|
function applyDropdownContainerMods(mods) {
|
|
1061
1033
|
return [
|
|
@@ -1066,7 +1038,7 @@ function applyDropdownContainerMods(mods) {
|
|
|
1066
1038
|
}
|
|
1067
1039
|
const DropdownContainer = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.DropdownContainer, applyDropdownContainerMods);
|
|
1068
1040
|
|
|
1069
|
-
var css$1k = {"uui-typography":"
|
|
1041
|
+
var css$1k = {"uui-typography":"ldKZo1","uuiTypography":"ldKZo1","hero-header":"l87kBe","heroHeader":"l87kBe","promo-header":"bwPTht","promoHeader":"bwPTht","uui-critical":"ciTvCD","uuiCritical":"ciTvCD","uui-info":"_9sEoyd","uuiInfo":"_9sEoyd","uui-success":"x5qmnw","uuiSuccess":"x5qmnw","uui-warning":"CABWNO","uuiWarning":"CABWNO","uui-highlight":"-igZrt","uuiHighlight":"-igZrt","uui-typography-size-12":"BqgHSj","uuiTypographySize12":"BqgHSj","uui-typography-size-14":"e1Xad7","uuiTypographySize14":"e1Xad7","uui-typography-size-16":"-QjEdT","uuiTypographySize16":"-QjEdT","submenu-root-item-rtl":"nkWATN","submenuRootItemRtl":"nkWATN","icon-after":"ywrKSn","iconAfter":"ywrKSn","submenu-root-item":"umZ867","submenuRootItem":"umZ867","icon-check":"Hh5Q-Z","iconCheck":"Hh5Q-Z","splitter-root":"yBz9Wp","splitterRoot":"yBz9Wp","splitter":"nzAQE1","header-root":"_1XBTP0","headerRoot":"_1XBTP0","item-root":"hZOnwX","itemRoot":"hZOnwX","icon":"h2aza6","link":"N2KBz8","indent":"_1hFf-t","selected-mark":"sWDucY","selectedMark":"sWDucY"};
|
|
1070
1042
|
|
|
1071
1043
|
exports.IDropdownControlKeys = void 0;
|
|
1072
1044
|
(function (IDropdownControlKeys) {
|
|
@@ -1102,10 +1074,10 @@ function DropdownMenuContainer(props) {
|
|
|
1102
1074
|
props.onClose();
|
|
1103
1075
|
}
|
|
1104
1076
|
};
|
|
1105
|
-
return (React__namespace.default.createElement(DropdownContainer,
|
|
1077
|
+
return (React__namespace.default.createElement(DropdownContainer, { ...props, rawProps: { ...props.rawProps, role: 'menu' }, ref: menuRef, width: props.minWidth, lockProps: { onKeyDown: handleArrowKeys }, cx: [props.cx] }));
|
|
1106
1078
|
}
|
|
1107
1079
|
const DropdownMenuBody = /* @__PURE__ */uuiCore.withMods(DropdownMenuContainer, () => ['uui-dropdownMenu-body'], (props) => {
|
|
1108
|
-
return (
|
|
1080
|
+
return ({ closeOnKey: exports.IDropdownControlKeys.ESCAPE, ...props });
|
|
1109
1081
|
});
|
|
1110
1082
|
const DropdownMenuButton = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
|
|
1111
1083
|
const context = React.useContext(uuiCore.UuiContext);
|
|
@@ -1172,11 +1144,8 @@ function DropdownSubMenu(props) {
|
|
|
1172
1144
|
},
|
|
1173
1145
|
},
|
|
1174
1146
|
];
|
|
1175
|
-
const isRtl =
|
|
1176
|
-
return (React__namespace.default.createElement(uuiComponents.Dropdown, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", openDelay: 400, closeDelay: 400, placement: isRtl ? 'left-start' : 'right-start', modifiers: subMenuModifiers, renderBody: (dropdownProps) => !props.isDisabled && (React__namespace.default.createElement(DropdownMenuBody,
|
|
1177
|
-
var { toggleDropdownOpening } = _a, targetProps = __rest(_a, ["toggleDropdownOpening"]);
|
|
1178
|
-
return (React__namespace.default.createElement(DropdownMenuButton, Object.assign({ cx: uuiCore.cx(isRtl ? css$1k.submenuRootItemRtl : css$1k.submenuRootItem), icon: systemIcons.foldingArrow, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening }, props, targetProps)));
|
|
1179
|
-
} }));
|
|
1147
|
+
const isRtl = window?.document.dir === 'rtl';
|
|
1148
|
+
return (React__namespace.default.createElement(uuiComponents.Dropdown, { openOnHover: props.openOnHover || true, closeOnMouseLeave: "boundary", openDelay: 400, closeDelay: 400, placement: isRtl ? 'left-start' : 'right-start', modifiers: subMenuModifiers, renderBody: (dropdownProps) => !props.isDisabled && (React__namespace.default.createElement(DropdownMenuBody, { closeOnKey: exports.IDropdownControlKeys.LEFT_ARROW, ...props, ...dropdownProps })), renderTarget: ({ toggleDropdownOpening, ...targetProps }) => (React__namespace.default.createElement(DropdownMenuButton, { cx: uuiCore.cx(isRtl ? css$1k.submenuRootItemRtl : css$1k.submenuRootItem), icon: systemIcons.foldingArrow, iconPosition: "right", isDropdown: true, toggleDropdownOpening: toggleDropdownOpening, ...props, ...targetProps })) }));
|
|
1180
1149
|
}
|
|
1181
1150
|
function DropdownMenuSwitchButton(props) {
|
|
1182
1151
|
const context = React.useContext(uuiCore.UuiContext);
|
|
@@ -1199,7 +1168,7 @@ function DropdownMenuSwitchButton(props) {
|
|
|
1199
1168
|
React__namespace.default.createElement(Switch, { value: isSelected, tabIndex: -1, onValueChange: onHandleValueChange })));
|
|
1200
1169
|
}
|
|
1201
1170
|
|
|
1202
|
-
var css$1j = {"uui-typography":"
|
|
1171
|
+
var css$1j = {"uui-typography":"xLeQ6A","uuiTypography":"xLeQ6A","hero-header":"B7T9iu","heroHeader":"B7T9iu","promo-header":"DozF8b","promoHeader":"DozF8b","uui-critical":"_7XsXRp","uuiCritical":"_7XsXRp","uui-info":"VNPUMO","uuiInfo":"VNPUMO","uui-success":"-yyP5J","uuiSuccess":"-yyP5J","uui-warning":"b9XMVZ","uuiWarning":"b9XMVZ","uui-highlight":"ut0-PM","uuiHighlight":"ut0-PM","uui-typography-size-12":"n9oHNn","uuiTypographySize12":"n9oHNn","uui-typography-size-14":"FSITU5","uuiTypographySize14":"FSITU5","uui-typography-size-16":"SCPYan","uuiTypographySize16":"SCPYan","root":"fEipts","mode-block":"RAx6KN","modeBlock":"RAx6KN","mode-inline":"BhcUut","modeInline":"BhcUut","padding-0":"CesDLL","padding0":"CesDLL","padding-6":"prWMXS","padding6":"prWMXS","padding-12":"_1adp4A","padding12":"_1adp4A","padding-18":"TLAPMG","padding18":"TLAPMG"};
|
|
1203
1172
|
|
|
1204
1173
|
function applyAccordionMods(mods) {
|
|
1205
1174
|
return [
|
|
@@ -1212,7 +1181,7 @@ const Accordion = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Accor
|
|
|
1212
1181
|
dropdownIcon: mods.dropdownIcon !== null && systemIcons.foldingArrow,
|
|
1213
1182
|
}));
|
|
1214
1183
|
|
|
1215
|
-
var css$1i = {"uui-typography":"
|
|
1184
|
+
var css$1i = {"uui-typography":"hYnPjH","uuiTypography":"hYnPjH","hero-header":"Dj6w3u","heroHeader":"Dj6w3u","promo-header":"OBklvO","promoHeader":"OBklvO","uui-critical":"bkN-vV","uuiCritical":"bkN-vV","uui-info":"bmTF0K","uuiInfo":"bmTF0K","uui-success":"X7XhzC","uuiSuccess":"X7XhzC","uui-warning":"_6ZsOqd","uuiWarning":"_6ZsOqd","uui-highlight":"a70o5O","uuiHighlight":"a70o5O","uui-typography-size-12":"LXZzQT","uuiTypographySize12":"LXZzQT","uui-typography-size-14":"nOyQGP","uuiTypographySize14":"nOyQGP","uui-typography-size-16":"-tA--w","uuiTypographySize16":"-tA--w","root":"c-O-SF","border-top":"qDo7pK","borderTop":"qDo7pK","border-bottom":"MRf3AQ","borderBottom":"MRf3AQ","top-shadow":"KShzPY","topShadow":"KShzPY","padding-6":"_3AKRP7","padding6":"_3AKRP7","padding-12":"_1Y0skw","padding12":"_1Y0skw","padding-18":"ZxGeQE","padding18":"ZxGeQE","padding-24":"FdT-7U","padding24":"FdT-7U","margin-24":"T43dwX","margin24":"T43dwX","margin-12":"OHdpd-","margin12":"OHdpd-","vPadding-12":"OErEoG","vPadding12":"OErEoG","vPadding-18":"wQSAg-","vPadding18":"wQSAg-","vPadding-24":"dJJiKd","vPadding24":"dJJiKd","vPadding-36":"i53Wcl","vPadding36":"i53Wcl","vPadding-48":"X5-NDi","vPadding48":"X5-NDi","spacing-6":"UL3q5r","spacing6":"UL3q5r","spacing-12":"_0n-boz","spacing12":"_0n-boz","spacing-18":"QT2snz","spacing18":"QT2snz","uui-surface-main":"L7iaGV","uuiSurfaceMain":"L7iaGV"};
|
|
1216
1185
|
|
|
1217
1186
|
const FlexCell = /* @__PURE__ */uuiCore.withMods(uuiComponents.FlexCell, () => [css$1i.flexCell]);
|
|
1218
1187
|
|
|
@@ -1224,7 +1193,7 @@ const FlexRow = /* @__PURE__ */uuiCore.withMods(uuiComponents.FlexRow, (props) =
|
|
|
1224
1193
|
}
|
|
1225
1194
|
return [
|
|
1226
1195
|
css$1i.root,
|
|
1227
|
-
props.size !== null && 'uui-size-' + (props.size ||
|
|
1196
|
+
props.size !== null && 'uui-size-' + (props.size || settings.sizes.defaults.flexRow),
|
|
1228
1197
|
props.padding && css$1i['padding-' + props.padding],
|
|
1229
1198
|
props.vPadding && css$1i['vPadding-' + props.vPadding],
|
|
1230
1199
|
props.margin && css$1i['margin-' + props.margin],
|
|
@@ -1236,7 +1205,7 @@ const FlexRow = /* @__PURE__ */uuiCore.withMods(uuiComponents.FlexRow, (props) =
|
|
|
1236
1205
|
];
|
|
1237
1206
|
});
|
|
1238
1207
|
|
|
1239
|
-
var css$1h = {"root":"
|
|
1208
|
+
var css$1h = {"root":"R8jLhn","margin-24":"HYRTkQ","margin24":"HYRTkQ","padding-12":"cYbU1i","padding12":"cYbU1i","padding-24":"Y5MAvD","padding24":"Y5MAvD","shadow":"BpzT37","uui-surface-main":"tFCvnH","uuiSurfaceMain":"tFCvnH"};
|
|
1240
1209
|
|
|
1241
1210
|
const Panel = /* @__PURE__ */uuiCore.withMods(uuiComponents.VPanel, (props) => [
|
|
1242
1211
|
'uui-panel',
|
|
@@ -1246,7 +1215,7 @@ const Panel = /* @__PURE__ */uuiCore.withMods(uuiComponents.VPanel, (props) => [
|
|
|
1246
1215
|
props.background && css$1h[`uui-${props.background}`],
|
|
1247
1216
|
]);
|
|
1248
1217
|
|
|
1249
|
-
var css$1g = {"root":"
|
|
1218
|
+
var css$1g = {"root":"qMGWOH"};
|
|
1250
1219
|
|
|
1251
1220
|
function applyTooltipMods(mods) {
|
|
1252
1221
|
return [
|
|
@@ -1256,7 +1225,7 @@ function applyTooltipMods(mods) {
|
|
|
1256
1225
|
}
|
|
1257
1226
|
const Tooltip = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Tooltip, applyTooltipMods);
|
|
1258
1227
|
|
|
1259
|
-
var css$1f = {"uui-typography":"
|
|
1228
|
+
var css$1f = {"uui-typography":"vJNIsV","uuiTypography":"vJNIsV","hero-header":"N5Xnyd","heroHeader":"N5Xnyd","promo-header":"JquOji","promoHeader":"JquOji","uui-critical":"Pq7LcG","uuiCritical":"Pq7LcG","uui-info":"oD9hBv","uuiInfo":"oD9hBv","uui-success":"YxmhRj","uuiSuccess":"YxmhRj","uui-warning":"tLa-pa","uuiWarning":"tLa-pa","uui-highlight":"knpLhD","uuiHighlight":"knpLhD","uui-typography-size-12":"_7PgaXt","uuiTypographySize12":"_7PgaXt","uui-typography-size-14":"L3nem9","uuiTypographySize14":"L3nem9","uui-typography-size-16":"SDn02K","uuiTypographySize16":"SDn02K","root":"_12npG6"};
|
|
1260
1229
|
|
|
1261
1230
|
function applyLabeledInputMods(mods) {
|
|
1262
1231
|
return [
|
|
@@ -1270,7 +1239,7 @@ const LabeledInput = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.La
|
|
|
1270
1239
|
infoIcon: props.infoIcon || (settings.sizes.labeledInput.fillIcon.includes(props.size) ? ForwardRef$x : ForwardRef$M),
|
|
1271
1240
|
}));
|
|
1272
1241
|
|
|
1273
|
-
var css$1e = {"root":"
|
|
1242
|
+
var css$1e = {"root":"EDNS1f"};
|
|
1274
1243
|
|
|
1275
1244
|
function RadioGroup(props) {
|
|
1276
1245
|
const direction = props.direction || 'vertical';
|
|
@@ -1279,13 +1248,13 @@ function RadioGroup(props) {
|
|
|
1279
1248
|
props.onValueChange(newVal);
|
|
1280
1249
|
}
|
|
1281
1250
|
};
|
|
1282
|
-
return (React__namespace.createElement("fieldset",
|
|
1283
|
-
const
|
|
1284
|
-
return (React__namespace.createElement(RadioInput,
|
|
1251
|
+
return (React__namespace.createElement("fieldset", { ref: props.forwardedRef, className: uuiCore.cx(css$1e.root, uuiCore.directionMode[direction], props.cx), onFocus: props.onFocus, onBlur: props.onBlur, ...props.rawProps }, props.items.map((i) => {
|
|
1252
|
+
const { id, name, renderName, ...restItemProps } = i;
|
|
1253
|
+
return (React__namespace.createElement(RadioInput, { name: props.name, renderLabel: i.renderName ? i.renderName : () => i.name, value: props.value === i.id, onValueChange: () => handleChange(i.id), isDisabled: props.isDisabled || i.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, isRequired: props.isRequired, key: i.id.toString(), size: props.size || i.size, ...restItemProps }));
|
|
1285
1254
|
})));
|
|
1286
1255
|
}
|
|
1287
1256
|
|
|
1288
|
-
var css$1d = {"root":"
|
|
1257
|
+
var css$1d = {"root":"vTRG1l"};
|
|
1289
1258
|
|
|
1290
1259
|
function applyScrollBarsMods() {
|
|
1291
1260
|
return [
|
|
@@ -1294,13 +1263,13 @@ function applyScrollBarsMods() {
|
|
|
1294
1263
|
}
|
|
1295
1264
|
const ScrollBars = /* @__PURE__ */uuiCore.withMods(uuiComponents.ScrollBars, applyScrollBarsMods);
|
|
1296
1265
|
|
|
1297
|
-
var css$1c = {"scroll-container":"
|
|
1266
|
+
var css$1c = {"scroll-container":"OTdxwc","scrollContainer":"OTdxwc","list-container":"mlqys2","listContainer":"mlqys2"};
|
|
1298
1267
|
|
|
1299
|
-
var css$1b = {"root":"
|
|
1268
|
+
var css$1b = {"root":"eTyaVK"};
|
|
1300
1269
|
|
|
1301
1270
|
const AvatarStack = /* @__PURE__ */uuiCore.withMods(uuiComponents.AvatarStack, () => [css$1b.root]);
|
|
1302
1271
|
|
|
1303
|
-
var css$1a = {"uui-typography":"
|
|
1272
|
+
var css$1a = {"uui-typography":"zqlhYe","uuiTypography":"zqlhYe","hero-header":"_3GvzwV","heroHeader":"_3GvzwV","promo-header":"itb2zy","promoHeader":"itb2zy","uui-critical":"IBFSR4","uuiCritical":"IBFSR4","uui-info":"TzXAo2","uuiInfo":"TzXAo2","uui-success":"_5taKYW","uuiSuccess":"_5taKYW","uui-warning":"_37qX-v","uuiWarning":"_37qX-v","uui-highlight":"_871AeR","uuiHighlight":"_871AeR","uui-typography-size-12":"AxrAwO","uuiTypographySize12":"AxrAwO","uui-typography-size-14":"Gy-56-","uuiTypographySize14":"Gy-56-","uui-typography-size-16":"mgPB-8","uuiTypographySize16":"mgPB-8","root":"n0P6HQ"};
|
|
1304
1273
|
|
|
1305
1274
|
const DEFAULT_FILL = 'solid';
|
|
1306
1275
|
function applyBadgeMods(mods) {
|
|
@@ -1315,7 +1284,11 @@ function applyBadgeMods(mods) {
|
|
|
1315
1284
|
const Badge = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
|
|
1316
1285
|
const styles = [applyBadgeMods(props), props.cx];
|
|
1317
1286
|
const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : systemIcons.foldingArrow;
|
|
1318
|
-
return (React__namespace.default.createElement(uuiComponents.Clickable,
|
|
1287
|
+
return (React__namespace.default.createElement(uuiComponents.Clickable, { ...props, rawProps: {
|
|
1288
|
+
'aria-haspopup': props.isDropdown,
|
|
1289
|
+
'aria-expanded': props.isOpen,
|
|
1290
|
+
...props.rawProps,
|
|
1291
|
+
}, cx: styles, ref: ref },
|
|
1319
1292
|
(props.indicator && props.fill === 'outline') && (React__namespace.default.createElement("div", { className: "uui-indicator" })),
|
|
1320
1293
|
props.icon && props.iconPosition !== 'right' && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
|
|
1321
1294
|
props.caption && (React__namespace.default.createElement("div", { className: uuiCore.uuiElement.caption }, props.caption)),
|
|
@@ -1324,7 +1297,7 @@ const Badge = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) =>
|
|
|
1324
1297
|
props.isDropdown && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
|
|
1325
1298
|
});
|
|
1326
1299
|
|
|
1327
|
-
var css$19 = {"uui-typography":"
|
|
1300
|
+
var css$19 = {"uui-typography":"_5S-apH","uuiTypography":"_5S-apH","hero-header":"wDJAWq","heroHeader":"wDJAWq","promo-header":"_7f1YDr","promoHeader":"_7f1YDr","uui-critical":"_1tHijE","uuiCritical":"_1tHijE","uui-info":"AxubfL","uuiInfo":"AxubfL","uui-success":"_0HXlPL","uuiSuccess":"_0HXlPL","uui-warning":"Ezgw3N","uuiWarning":"Ezgw3N","uui-highlight":"xwaUPi","uuiHighlight":"xwaUPi","uui-typography-size-12":"q2YhEN","uuiTypographySize12":"q2YhEN","uui-typography-size-14":"_7Y6i-z","uuiTypographySize14":"_7Y6i-z","uui-typography-size-16":"_3L9CP0","uuiTypographySize16":"_3L9CP0","root":"aZOusA"};
|
|
1328
1301
|
|
|
1329
1302
|
function applyTagMods(props) {
|
|
1330
1303
|
return [
|
|
@@ -1339,7 +1312,11 @@ const Tag = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
|
|
|
1339
1312
|
const styles = [applyTagMods(props), props.cx];
|
|
1340
1313
|
const ClearIcon = props.clearIcon ? props.clearIcon : systemIcons.clear;
|
|
1341
1314
|
const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : systemIcons.foldingArrow;
|
|
1342
|
-
return (React__namespace.default.createElement(uuiComponents.Clickable,
|
|
1315
|
+
return (React__namespace.default.createElement(uuiComponents.Clickable, { ...props, rawProps: {
|
|
1316
|
+
'aria-haspopup': props.isDropdown,
|
|
1317
|
+
'aria-expanded': props.isOpen,
|
|
1318
|
+
...props.rawProps,
|
|
1319
|
+
}, cx: styles, ref: ref },
|
|
1343
1320
|
props.icon && props.iconPosition !== 'right' && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
|
|
1344
1321
|
props.caption && (React__namespace.default.createElement("div", { className: uuiCore.uuiElement.caption }, props.caption)),
|
|
1345
1322
|
props.count !== undefined && props.count !== null && (React__namespace.default.createElement(CountIndicator, { color: (!props.color || props.color === 'neutral') ? 'white' : props.color, size: settings.sizes.tag.countIndicator[(props.size || settings.sizes.defaults.tag)], caption: props.count })),
|
|
@@ -1348,7 +1325,7 @@ const Tag = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
|
|
|
1348
1325
|
props.onClear && !props.isDisabled && (React__namespace.default.createElement(uuiComponents.IconContainer, { cx: uuiCore.uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
|
|
1349
1326
|
});
|
|
1350
1327
|
|
|
1351
|
-
var css$18 = {"root":"
|
|
1328
|
+
var css$18 = {"root":"J3wPxu","uui-spinner":"_8tIFq4","uuiSpinner":"_8tIFq4"};
|
|
1352
1329
|
|
|
1353
1330
|
function applySpinnerMods() {
|
|
1354
1331
|
return [css$18.root, 'uui-spinner'];
|
|
@@ -1385,31 +1362,31 @@ var SvgNavigationChevronRightOutline = function SvgNavigationChevronRightOutline
|
|
|
1385
1362
|
};
|
|
1386
1363
|
var ForwardRef$v = /*#__PURE__*/React.forwardRef(SvgNavigationChevronRightOutline);
|
|
1387
1364
|
|
|
1388
|
-
var css$17 = {"root":"
|
|
1365
|
+
var css$17 = {"root":"CMrtz0","page":"NsLYQJ","spacer":"_5Df6NJ","mode-ghost":"GTeXSU","modeGhost":"GTeXSU"};
|
|
1389
1366
|
|
|
1390
1367
|
function Paginator(props) {
|
|
1391
|
-
const renderPaginator = (params) => (React__namespace.default.createElement("nav",
|
|
1368
|
+
const renderPaginator = (params) => (React__namespace.default.createElement("nav", { role: "navigation", className: cx__default.default(css$17.root, 'uui-paginator', `uui-size-${props.size || settings.sizes.defaults.paginator}`), ...params.rawProps },
|
|
1392
1369
|
React__namespace.default.createElement(Button, { size: props.size || settings.sizes.defaults.paginator, icon: ForwardRef$w, onClick: params.goToPrev, isDisabled: params.isFirst || props.isDisabled, fill: "outline", color: "secondary" }),
|
|
1393
1370
|
params.pages.map((page, index) => {
|
|
1394
1371
|
if (page.type === 'spacer') {
|
|
1395
1372
|
return (React__namespace.default.createElement(Button, { cx: cx__default.default(css$17.spacer, css$17.page), size: props.size || settings.sizes.defaults.paginator, key: `${index}_spacer`, caption: "...", fill: "ghost", color: "secondary", tabIndex: -1, isDisabled: props.isDisabled }));
|
|
1396
1373
|
}
|
|
1397
1374
|
else {
|
|
1398
|
-
return (React__namespace.default.createElement(Button, { cx: cx__default.default(css$17[`mode-${!page.isActive && 'ghost'}`], css$17.page), size: props.size || settings.sizes.defaults.paginator, key: page.pageNumber, caption: page.pageNumber, onClick: () =>
|
|
1375
|
+
return (React__namespace.default.createElement(Button, { cx: cx__default.default(css$17[`mode-${!page.isActive && 'ghost'}`], css$17.page), size: props.size || settings.sizes.defaults.paginator, key: page.pageNumber, caption: page.pageNumber, onClick: () => page.onClick?.(), rawProps: { 'aria-current': page.isActive }, fill: (page.isActive && 'outline') || 'ghost', color: "primary", isDisabled: props.isDisabled }));
|
|
1399
1376
|
}
|
|
1400
1377
|
}),
|
|
1401
1378
|
React__namespace.default.createElement(Button, { size: props.size || settings.sizes.defaults.paginator, icon: ForwardRef$v, onClick: params.goToNext, isDisabled: params.isLast || props.isDisabled, fill: "outline", color: "secondary" })));
|
|
1402
|
-
return React__namespace.default.createElement(uuiComponents.Paginator,
|
|
1379
|
+
return React__namespace.default.createElement(uuiComponents.Paginator, { ...props, render: renderPaginator });
|
|
1403
1380
|
}
|
|
1404
1381
|
|
|
1405
|
-
var css$16 = {"root":"
|
|
1382
|
+
var css$16 = {"root":"cyfgRL","progress-bar":"KkP0fa","progressBar":"KkP0fa","progressBar-indeterminate":"W2ISm2","progressBarIndeterminate":"W2ISm2","size-12":"_6b-rPO","size12":"_6b-rPO","size-18":"Jai7iq","size18":"Jai7iq","size-24":"dOh3S6","size24":"dOh3S6"};
|
|
1406
1383
|
|
|
1407
1384
|
const IndeterminateBar = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
1408
1385
|
return (React__namespace.createElement("div", { ref: ref, className: cx__default.default('uui-indeterminate_bar', props.cx, css$16.root, css$16[`size-${props.size || 12}`]) },
|
|
1409
1386
|
React__namespace.createElement("div", { className: cx__default.default(css$16.progressBar) })));
|
|
1410
1387
|
});
|
|
1411
1388
|
|
|
1412
|
-
var css$15 = {"root":"
|
|
1389
|
+
var css$15 = {"root":"KwJ53C","striped":"d52D-i","animate-stripes":"BWNGso","animateStripes":"BWNGso","size-12":"jlWhzf","size12":"jlWhzf","size-18":"_5Ll7BO","size18":"_5Ll7BO","size-24":"QinFkw","size24":"QinFkw"};
|
|
1413
1390
|
|
|
1414
1391
|
const DEFAULT_SIZE = '12';
|
|
1415
1392
|
function applyProgressBarMods(mods) {
|
|
@@ -1424,14 +1401,14 @@ const ProgressBar = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Pro
|
|
|
1424
1401
|
hideLabel: props.hideLabel || props.striped,
|
|
1425
1402
|
}));
|
|
1426
1403
|
|
|
1427
|
-
var css$14 = {"root":"
|
|
1404
|
+
var css$14 = {"root":"ypsRN7"};
|
|
1428
1405
|
|
|
1429
1406
|
const IndicatorBar = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
1430
1407
|
const { progress } = props;
|
|
1431
1408
|
return progress || progress === 0 ? (React__namespace.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx__default.default(css$14.root, props.cx), hideLabel: true })) : (React__namespace.createElement(IndeterminateBar, { ref: ref, cx: cx__default.default(css$14.root, props.cx) }));
|
|
1432
1409
|
});
|
|
1433
1410
|
|
|
1434
|
-
var css$13 = {"root":"
|
|
1411
|
+
var css$13 = {"root":"eaqlDL"};
|
|
1435
1412
|
|
|
1436
1413
|
const StatusIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
|
|
1437
1414
|
return (React__namespace.default.createElement("div", { ref: ref, className: cx__default.default([
|
|
@@ -1446,10 +1423,9 @@ const StatusIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
|
|
|
1446
1423
|
React__namespace.default.createElement("p", { className: "uui-status_indicator-caption" }, props.caption)));
|
|
1447
1424
|
});
|
|
1448
1425
|
|
|
1449
|
-
var css$12 = {"drag-handle":"
|
|
1426
|
+
var css$12 = {"drag-handle":"x6Pko4","dragHandle":"x6Pko4","icon-container":"Hm1ea5","iconContainer":"Hm1ea5"};
|
|
1450
1427
|
|
|
1451
1428
|
function DataRowAddons(props) {
|
|
1452
|
-
var _a, _b;
|
|
1453
1429
|
const row = props.rowProps;
|
|
1454
1430
|
const getIndent = () => {
|
|
1455
1431
|
return (row.indent - 1) * (settings.sizes.rowAddons.indentUnit[props.size] || settings.sizes.rowAddons.defaults.indentUnit);
|
|
@@ -1458,8 +1434,8 @@ function DataRowAddons(props) {
|
|
|
1458
1434
|
return settings.sizes.rowAddons.indentWidth[props.size] || settings.sizes.rowAddons.defaults.indentWidth;
|
|
1459
1435
|
};
|
|
1460
1436
|
return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
|
|
1461
|
-
|
|
1462
|
-
|
|
1437
|
+
row.dnd?.srcData && React__namespace.default.createElement(uuiComponents.DragHandle, { key: "dh", cx: css$12.dragHandle, rawProps: { ...props.eventHandlers } }),
|
|
1438
|
+
row?.checkbox?.isVisible && (React__namespace.default.createElement(Checkbox, { key: "cb", cx: "uui-dr_addons-checkbox", tabIndex: props.tabIndex, size: settings.sizes.rowAddons.checkbox[props.size], value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: () => row.onCheck?.(row), isDisabled: row.checkbox.isDisabled, isInvalid: row.checkbox.isInvalid })),
|
|
1463
1439
|
row.indent > 0 && (React__namespace.default.createElement("div", { key: "fold", className: cx__default.default('uui-dr_addons-indent', `uui-size-${props.size}`), style: { marginInlineStart: getIndent(), width: getWidth() } }, row.isFoldable && (React__namespace.default.createElement(uuiComponents.IconContainer, { rawProps: {
|
|
1464
1440
|
'aria-label': row.isFolded ? 'Unfold' : 'Fold',
|
|
1465
1441
|
role: 'button',
|
|
@@ -1468,7 +1444,7 @@ function DataRowAddons(props) {
|
|
|
1468
1444
|
], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row), size: settings.sizes.rowAddons.icon[props.size] || settings.sizes.rowAddons.defaults.icon }))))));
|
|
1469
1445
|
}
|
|
1470
1446
|
|
|
1471
|
-
var css$11 = {"root":"
|
|
1447
|
+
var css$11 = {"root":"CSycT4"};
|
|
1472
1448
|
|
|
1473
1449
|
const Blocker = /* @__PURE__ */uuiCore.withMods(uuiComponents.Blocker, () => [css$11.root], (cmpProps) => ({ renderSpinner: cmpProps.renderSpinner || (() => React__namespace.default.createElement(Spinner, null)) }));
|
|
1474
1450
|
|
|
@@ -1482,17 +1458,13 @@ const VirtualList = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
|
1482
1458
|
});
|
|
1483
1459
|
React__namespace.useImperativeHandle(ref, () => scrollContainerRef.current, [scrollContainerRef.current]);
|
|
1484
1460
|
const scrollShadows = uuiCore.useScrollShadows({ root: scrollContainerRef.current });
|
|
1485
|
-
const renderRows = () => {
|
|
1486
|
-
|
|
1487
|
-
|
|
1488
|
-
|
|
1489
|
-
})) || (React__namespace.createElement("div", { className: css$1c.listContainer, style: { minHeight: `${estimatedHeight}px` } },
|
|
1490
|
-
React__namespace.createElement("div", { ref: listContainerRef, role: props.role, style: { marginTop: offsetY } }, props.rows)));
|
|
1491
|
-
};
|
|
1461
|
+
const renderRows = () => props.renderRows?.({
|
|
1462
|
+
listContainerRef, estimatedHeight, offsetY, scrollShadows,
|
|
1463
|
+
}) || (React__namespace.createElement("div", { className: css$1c.listContainer, style: { minHeight: `${estimatedHeight}px` } },
|
|
1464
|
+
React__namespace.createElement("div", { ref: listContainerRef, role: props.role, style: { marginTop: offsetY } }, props.rows)));
|
|
1492
1465
|
const renderView = ({ style }) => (React__namespace.createElement(VirtualListView, { isLoading: props.isLoading, style: style, rawProps: props.rawProps }));
|
|
1493
1466
|
const scrollBarsRef = React__namespace.useCallback((scrollbars) => {
|
|
1494
|
-
|
|
1495
|
-
if (!((_a = scrollbars === null || scrollbars === void 0 ? void 0 : scrollbars.container) === null || _a === void 0 ? void 0 : _a.firstChild))
|
|
1467
|
+
if (!scrollbars?.container?.firstChild)
|
|
1496
1468
|
return;
|
|
1497
1469
|
scrollContainerRef.current = scrollbars.container.firstChild;
|
|
1498
1470
|
}, []);
|
|
@@ -1505,11 +1477,20 @@ const VirtualList = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
|
1505
1477
|
});
|
|
1506
1478
|
const VirtualListView = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
1507
1479
|
return (React__namespace.createElement(React__namespace.Fragment, null,
|
|
1508
|
-
React__namespace.createElement("div",
|
|
1480
|
+
React__namespace.createElement("div", { ...props.rawProps, style: {
|
|
1481
|
+
...props.style,
|
|
1482
|
+
position: 'relative',
|
|
1483
|
+
flex: '1 1 auto',
|
|
1484
|
+
display: 'flex',
|
|
1485
|
+
flexDirection: 'column',
|
|
1486
|
+
overflow: props.isLoading ? 'hidden' : 'scroll',
|
|
1487
|
+
marginRight: props.isLoading ? 0 : props.style.marginRight,
|
|
1488
|
+
marginBottom: props.isLoading ? 0 : props.style.marginBottom,
|
|
1489
|
+
}, ref: ref }, props.children),
|
|
1509
1490
|
React__namespace.createElement(Blocker, { isEnabled: props.isLoading })));
|
|
1510
1491
|
});
|
|
1511
1492
|
|
|
1512
|
-
var css$10 = {"root":"
|
|
1493
|
+
var css$10 = {"root":"pNV1hC"};
|
|
1513
1494
|
|
|
1514
1495
|
function CheckboxGroup(props) {
|
|
1515
1496
|
const currentValue = props.value || [];
|
|
@@ -1525,13 +1506,13 @@ function CheckboxGroup(props) {
|
|
|
1525
1506
|
}
|
|
1526
1507
|
props.onValueChange(newSelection);
|
|
1527
1508
|
};
|
|
1528
|
-
return (React__namespace.createElement("fieldset",
|
|
1529
|
-
const
|
|
1530
|
-
return (React__namespace.createElement(Checkbox,
|
|
1509
|
+
return (React__namespace.createElement("fieldset", { ref: props.forwardedRef, className: uuiCore.cx(css$10.root, uuiCore.directionMode[direction], props.cx), ...props.rawProps }, props.items.map((i) => {
|
|
1510
|
+
const { id, name, renderName, ...restItemProps } = i;
|
|
1511
|
+
return (React__namespace.createElement(Checkbox, { renderLabel: i.renderName ? i.renderName : () => i.name, value: currentValue.indexOf(i.id) !== -1, onValueChange: (selected) => handleChange(selected, i.id), isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, isRequired: props.isRequired, key: i.id.toString(), size: props.size || i.size, ...restItemProps }));
|
|
1531
1512
|
})));
|
|
1532
1513
|
}
|
|
1533
1514
|
|
|
1534
|
-
var css$$ = {"uui-typography":"
|
|
1515
|
+
var css$$ = {"uui-typography":"tzhWEj","uuiTypography":"tzhWEj","hero-header":"Ipxhnw","heroHeader":"Ipxhnw","promo-header":"Yl5rv4","promoHeader":"Yl5rv4","uui-critical":"_5nNXIg","uuiCritical":"_5nNXIg","uui-info":"ioEw5U","uuiInfo":"ioEw5U","uui-success":"Rwybbl","uuiSuccess":"Rwybbl","uui-warning":"_6tFSSs","uuiWarning":"_6tFSSs","uui-highlight":"VHqS1E","uuiHighlight":"VHqS1E","uui-typography-size-12":"sYUH8k","uuiTypographySize12":"sYUH8k","uui-typography-size-14":"_1jWzM9","uuiTypographySize14":"_1jWzM9","uui-typography-size-16":"W9VSp5","uuiTypographySize16":"W9VSp5","root":"_6-p7jO","modal-blocker":"irt6Up","modalBlocker":"irt6Up","animateModalBlocker":"EC5h0T","modal":"M0K8dr","modal-footer":"TFPRsQ","modalFooter":"TFPRsQ","modal-header":"d9bA-T","modalHeader":"d9bA-T"};
|
|
1535
1516
|
|
|
1536
1517
|
const ModalBlocker = /* @__PURE__ */uuiCore.withMods(uuiComponents.ModalBlocker, () => [css$$.modalBlocker]);
|
|
1537
1518
|
const ModalWindow = /* @__PURE__ */uuiCore.withMods(uuiComponents.ModalWindow, () => [css$$.root, css$$.modal], (props) => {
|
|
@@ -1539,9 +1520,12 @@ const ModalWindow = /* @__PURE__ */uuiCore.withMods(uuiComponents.ModalWindow, (
|
|
|
1539
1520
|
const height = props.height || 'auto';
|
|
1540
1521
|
const maxHeight = uuiCore.isMobile() ? '100dvh' : (props.maxHeight || '80dvh');
|
|
1541
1522
|
return {
|
|
1542
|
-
style:
|
|
1523
|
+
style: {
|
|
1524
|
+
...props.style,
|
|
1525
|
+
width,
|
|
1543
1526
|
height,
|
|
1544
|
-
maxHeight
|
|
1527
|
+
maxHeight,
|
|
1528
|
+
},
|
|
1545
1529
|
};
|
|
1546
1530
|
});
|
|
1547
1531
|
class ModalHeader extends React__namespace.default.Component {
|
|
@@ -1564,27 +1548,33 @@ class ModalFooter extends React__namespace.default.Component {
|
|
|
1564
1548
|
}
|
|
1565
1549
|
}
|
|
1566
1550
|
|
|
1567
|
-
const TREE_SHAKEABLE_INIT = () => (
|
|
1551
|
+
const TREE_SHAKEABLE_INIT = () => ({
|
|
1552
|
+
...uuiCore.i18n,
|
|
1553
|
+
dataPickerBody: {
|
|
1568
1554
|
searchPlaceholder: 'Search',
|
|
1569
1555
|
noRecordsMessage: 'No records found',
|
|
1570
1556
|
noRecordsSubTitle: 'Check your spelling, or search for a different keyword',
|
|
1571
1557
|
typeSearchToLoadMessage: 'Type search to load items',
|
|
1572
|
-
},
|
|
1558
|
+
},
|
|
1559
|
+
pickerModal: {
|
|
1573
1560
|
headerTitle: 'Please select',
|
|
1574
1561
|
searchPlaceholder: 'Type text for quick search',
|
|
1575
1562
|
cancelButton: 'Cancel',
|
|
1576
1563
|
selectButton: 'Select',
|
|
1577
1564
|
clearAllButton: 'CLEAR ALL',
|
|
1578
1565
|
selectAllButton: 'SELECT ALL',
|
|
1579
|
-
},
|
|
1566
|
+
},
|
|
1567
|
+
pickerInput: {
|
|
1580
1568
|
showOnlySelectedLabel: 'Show only selected',
|
|
1581
1569
|
clearSelectionButton: 'CLEAR ALL',
|
|
1582
1570
|
clearSelectionButtonSingle: 'CLEAR',
|
|
1583
1571
|
selectAllButton: 'SELECT ALL',
|
|
1584
1572
|
doneButton: 'DONE',
|
|
1585
|
-
},
|
|
1573
|
+
},
|
|
1574
|
+
notificationCard: {
|
|
1586
1575
|
closeAllNotificationsButton: 'CLOSE ALL NOTIFICATIONS',
|
|
1587
|
-
},
|
|
1576
|
+
},
|
|
1577
|
+
form: {
|
|
1588
1578
|
notifications: {
|
|
1589
1579
|
actionButtonCaption: 'Restore',
|
|
1590
1580
|
unsavedChangesMessage: 'You have unsaved changes. Click Restore button if you would like to recover the data',
|
|
@@ -1594,10 +1584,12 @@ const TREE_SHAKEABLE_INIT = () => (Object.assign(Object.assign({}, uuiCore.i18n)
|
|
|
1594
1584
|
discardButton: 'Discard',
|
|
1595
1585
|
saveButton: 'Save',
|
|
1596
1586
|
},
|
|
1597
|
-
},
|
|
1587
|
+
},
|
|
1588
|
+
rangeDatePicker: {
|
|
1598
1589
|
pickerPlaceholderFrom: 'From:',
|
|
1599
1590
|
pickerPlaceholderTo: 'To:',
|
|
1600
|
-
},
|
|
1591
|
+
},
|
|
1592
|
+
tables: {
|
|
1601
1593
|
noResultsBlock: {
|
|
1602
1594
|
title: 'No results found',
|
|
1603
1595
|
message: 'We can’t find any item matching your request',
|
|
@@ -1631,10 +1623,12 @@ const TREE_SHAKEABLE_INIT = () => (Object.assign(Object.assign({}, uuiCore.i18n)
|
|
|
1631
1623
|
collapseAllTooltip: 'Collapse All',
|
|
1632
1624
|
expandAllTooltip: 'Expand All',
|
|
1633
1625
|
},
|
|
1634
|
-
},
|
|
1626
|
+
},
|
|
1627
|
+
pickerFilterHeader: {
|
|
1635
1628
|
sortAscending: 'Sort Ascending',
|
|
1636
1629
|
sortDescending: 'Sort Descending',
|
|
1637
|
-
},
|
|
1630
|
+
},
|
|
1631
|
+
filterToolbar: {
|
|
1638
1632
|
addCaption: 'Add filter',
|
|
1639
1633
|
datePicker: {
|
|
1640
1634
|
placeholder: 'Select date',
|
|
@@ -1649,19 +1643,24 @@ const TREE_SHAKEABLE_INIT = () => (Object.assign(Object.assign({}, uuiCore.i18n)
|
|
|
1649
1643
|
pickerInput: {
|
|
1650
1644
|
itemsPlaceholder: 'items',
|
|
1651
1645
|
},
|
|
1652
|
-
},
|
|
1646
|
+
},
|
|
1647
|
+
presetPanel: {
|
|
1653
1648
|
addCaption: 'Add Preset',
|
|
1654
|
-
},
|
|
1649
|
+
},
|
|
1650
|
+
confirmationModal: {
|
|
1655
1651
|
discardButton: 'Discard',
|
|
1656
1652
|
saveButton: 'Save',
|
|
1657
|
-
},
|
|
1653
|
+
},
|
|
1654
|
+
fileUpload: {
|
|
1658
1655
|
labelStart: 'Drop files to attach or',
|
|
1659
1656
|
browse: 'browse',
|
|
1660
1657
|
labelEnd: 'your local files',
|
|
1661
|
-
},
|
|
1658
|
+
},
|
|
1659
|
+
fileCard: {
|
|
1662
1660
|
fileSizeProgress: ' of ',
|
|
1663
1661
|
failedUploadErrorMessage: 'Upload failed',
|
|
1664
|
-
},
|
|
1662
|
+
},
|
|
1663
|
+
errorHandler: {
|
|
1665
1664
|
errorPageConfig: {
|
|
1666
1665
|
notFound: {
|
|
1667
1666
|
title: 'Oooops! We couldn’t find this page',
|
|
@@ -1703,7 +1702,8 @@ const TREE_SHAKEABLE_INIT = () => (Object.assign(Object.assign({}, uuiCore.i18n)
|
|
|
1703
1702
|
},
|
|
1704
1703
|
},
|
|
1705
1704
|
supportMessage: undefined,
|
|
1706
|
-
}
|
|
1705
|
+
},
|
|
1706
|
+
});
|
|
1707
1707
|
const i18n = /* @__PURE__ */TREE_SHAKEABLE_INIT();
|
|
1708
1708
|
|
|
1709
1709
|
var _path$u;
|
|
@@ -1721,42 +1721,40 @@ var SvgNotificationHelpFill = function SvgNotificationHelpFill(props, ref) {
|
|
|
1721
1721
|
};
|
|
1722
1722
|
var ForwardRef$u = /*#__PURE__*/React.forwardRef(SvgNotificationHelpFill);
|
|
1723
1723
|
|
|
1724
|
-
var css$_ = {"uui-typography":"
|
|
1724
|
+
var css$_ = {"uui-typography":"Gt9SS8","uuiTypography":"Gt9SS8","hero-header":"_02l2ih","heroHeader":"_02l2ih","promo-header":"dTb7ro","promoHeader":"dTb7ro","uui-critical":"Sdi66j","uuiCritical":"Sdi66j","uui-info":"WwyBEo","uuiInfo":"WwyBEo","uui-success":"EUk49W","uuiSuccess":"EUk49W","uui-warning":"xA7UQP","uuiWarning":"xA7UQP","uui-highlight":"u-sLJu","uuiHighlight":"u-sLJu","uui-typography-size-12":"mWUMtG","uuiTypographySize12":"mWUMtG","uui-typography-size-14":"gRB44j","uuiTypographySize14":"gRB44j","uui-typography-size-16":"leU-1F","uuiTypographySize16":"leU-1F","root":"NikXlR","icon-wrapper":"aB0sfy","iconWrapper":"aB0sfy","action-wrapper":"_1gO-MY","actionWrapper":"_1gO-MY","action-link":"_1zFAyy","actionLink":"_1zFAyy","close-icon":"fr4B2G","closeIcon":"fr4B2G","main-path":"_4ugvzp","mainPath":"_4ugvzp","content":"tM9ovP","close-wrapper":"LWcf9e","closeWrapper":"LWcf9e","notification-wrapper":"k19tkt","notificationWrapper":"k19tkt","clear-button":"THoTCo","clearButton":"THoTCo"};
|
|
1725
1725
|
|
|
1726
1726
|
const NotificationCard = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
|
|
1727
1727
|
const notificationCardNode = React__namespace.default.useRef(null);
|
|
1728
1728
|
React__namespace.default.useImperativeHandle(ref, () => notificationCardNode.current, [notificationCardNode.current]);
|
|
1729
1729
|
React__namespace.default.useLayoutEffect(() => {
|
|
1730
|
-
|
|
1731
|
-
|
|
1732
|
-
(_b = notificationCardNode.current) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', props.refreshTimer);
|
|
1730
|
+
notificationCardNode.current?.addEventListener('mouseenter', props.clearTimer);
|
|
1731
|
+
notificationCardNode.current?.addEventListener('mouseleave', props.refreshTimer);
|
|
1733
1732
|
return () => {
|
|
1734
|
-
|
|
1735
|
-
|
|
1736
|
-
(_b = notificationCardNode.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', props.refreshTimer);
|
|
1733
|
+
notificationCardNode.current?.removeEventListener('mouseenter', props.clearTimer);
|
|
1734
|
+
notificationCardNode.current?.removeEventListener('mouseleave', props.refreshTimer);
|
|
1737
1735
|
};
|
|
1738
1736
|
}, []);
|
|
1739
|
-
return (React__namespace.default.createElement("div",
|
|
1737
|
+
return (React__namespace.default.createElement("div", { role: "alert", className: cx__default.default('uui-notification_card', props.color && `uui-color-${props.color}`, css$_.root, props.cx), ref: notificationCardNode, ...props.rawProps },
|
|
1740
1738
|
React__namespace.default.createElement("div", { className: css$_.mainPath },
|
|
1741
1739
|
props.icon && (React__namespace.default.createElement("div", { className: css$_.iconWrapper },
|
|
1742
1740
|
React__namespace.default.createElement(uuiComponents.IconContainer, { size: 24, icon: props.icon }))),
|
|
1743
1741
|
React__namespace.default.createElement("div", { className: css$_.content },
|
|
1744
1742
|
props.children,
|
|
1745
|
-
props.actions && (React__namespace.default.createElement("div", { className: css$_.actionWrapper }, props.actions.map((action) => (React__namespace.default.createElement(LinkButton, {
|
|
1743
|
+
props.actions && (React__namespace.default.createElement("div", { className: css$_.actionWrapper }, props.actions.map((action) => (React__namespace.default.createElement(LinkButton, { key: action.name, caption: action.name, onClick: action.action, cx: css$_.actionLink, size: settings.sizes.notificationCard.action, rawProps: action.rawProps })))))),
|
|
1746
1744
|
props.onClose && (React__namespace.default.createElement("div", { className: css$_.closeWrapper },
|
|
1747
1745
|
React__namespace.default.createElement(IconButton, { icon: ForwardRef$R, color: "neutral", onClick: props.onClose, cx: css$_.closeIcon }))))));
|
|
1748
1746
|
});
|
|
1749
|
-
const WarningNotification = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard,
|
|
1750
|
-
const SuccessNotification = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard,
|
|
1751
|
-
const HintNotification = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard,
|
|
1752
|
-
const ErrorNotification = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard,
|
|
1747
|
+
const WarningNotification = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, { icon: ForwardRef$z, color: "warning", ...props, ref: ref, cx: props.cx })));
|
|
1748
|
+
const SuccessNotification = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, { icon: ForwardRef$A, color: "success", ...props, ref: ref, cx: props.cx })));
|
|
1749
|
+
const HintNotification = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, { icon: ForwardRef$u, color: "info", ...props, ref: ref, cx: props.cx })));
|
|
1750
|
+
const ErrorNotification = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => (React__namespace.default.createElement(NotificationCard, { icon: ForwardRef$y, color: "error", ...props, ref: ref, cx: props.cx })));
|
|
1753
1751
|
function ClearNotification() {
|
|
1754
1752
|
const uuiCtx = uuiCore.useUuiContext();
|
|
1755
1753
|
return (React__namespace.default.createElement("div", { className: cx__default.default(css$_.notificationWrapper, css$_.clearButton) },
|
|
1756
1754
|
React__namespace.default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => uuiCtx.uuiNotifications.clearAll() })));
|
|
1757
1755
|
}
|
|
1758
1756
|
|
|
1759
|
-
var css$Z = {"footer":"
|
|
1757
|
+
var css$Z = {"footer":"zDTQ-W"};
|
|
1760
1758
|
|
|
1761
1759
|
class ConfirmationModal extends React__namespace.Component {
|
|
1762
1760
|
render() {
|
|
@@ -1764,7 +1762,7 @@ class ConfirmationModal extends React__namespace.Component {
|
|
|
1764
1762
|
if (this.props.bodyContent) {
|
|
1765
1763
|
bodyContent = React__namespace.createElement(Panel, { background: "surface-main", margin: "24" }, this.props.bodyContent);
|
|
1766
1764
|
}
|
|
1767
|
-
return (React__namespace.createElement(ModalBlocker,
|
|
1765
|
+
return (React__namespace.createElement(ModalBlocker, { ...this.props },
|
|
1768
1766
|
React__namespace.createElement(ModalWindow, { width: 420 },
|
|
1769
1767
|
React__namespace.createElement(ModalHeader, { borderBottom: true, title: this.props.caption, onClose: () => this.props.abort() }),
|
|
1770
1768
|
React__namespace.createElement(ScrollBars, null, bodyContent),
|
|
@@ -1798,7 +1796,7 @@ function useReliableForceUpdate() {
|
|
|
1798
1796
|
return red[1];
|
|
1799
1797
|
}
|
|
1800
1798
|
|
|
1801
|
-
var css$Y = {"root":"
|
|
1799
|
+
var css$Y = {"root":"OPiMq2","timepicker-input":"WVyBwA","timepickerInput":"WVyBwA","ltr-always":"zaTOH5","ltrAlways":"zaTOH5"};
|
|
1802
1800
|
|
|
1803
1801
|
const uuiTimePicker = {
|
|
1804
1802
|
container: 'uui-timepicker-container',
|
|
@@ -1837,7 +1835,7 @@ function TimePickerBody(props) {
|
|
|
1837
1835
|
const minutesToSubtract = value.minute() % minutesStep === 0 ? minutesStep : value.minute() % minutesStep;
|
|
1838
1836
|
onMinutesChange(value.subtract(minutesToSubtract, 'm').minute());
|
|
1839
1837
|
};
|
|
1840
|
-
return (React__namespace.createElement("div",
|
|
1838
|
+
return (React__namespace.createElement("div", { className: uuiCore.cx(css$Y.root, uuiTimePicker.container, props.cx), ref: props.forwardedRef, ...props.rawProps },
|
|
1841
1839
|
React__namespace.createElement("div", { className: css$Y.ltrAlways },
|
|
1842
1840
|
React__namespace.createElement("div", { className: uuiTimePicker.elementContainer },
|
|
1843
1841
|
React__namespace.createElement(uuiComponents.IconContainer, { size: 18, rawProps: { 'aria-label': 'Increment hours' }, cx: uuiTimePicker.iconUp, icon: ForwardRef$Q, onClick: () => onHoursChange(uuiDayjs.dayjs().set(props.value).add(1, 'h').hour()) }),
|
|
@@ -1919,7 +1917,11 @@ function TimePicker(props) {
|
|
|
1919
1917
|
React.useEffect(() => {
|
|
1920
1918
|
if (valueToTimeString(props.value, props.format) !== state.value) {
|
|
1921
1919
|
const stringValue = valueToTimeString(props.value, props.format);
|
|
1922
|
-
setState((prevState) => (
|
|
1920
|
+
setState((prevState) => ({
|
|
1921
|
+
...prevState,
|
|
1922
|
+
value: stringValue,
|
|
1923
|
+
inputValue: stringValue,
|
|
1924
|
+
}));
|
|
1923
1925
|
}
|
|
1924
1926
|
}, [props.value, props.format]);
|
|
1925
1927
|
const getFormat = () => props.format === 24 ? 'HH:mm' : 'hh:mm A';
|
|
@@ -1935,10 +1937,10 @@ function TimePicker(props) {
|
|
|
1935
1937
|
props.onValueChange(null);
|
|
1936
1938
|
};
|
|
1937
1939
|
const onToggle = (value) => {
|
|
1938
|
-
setState((prevState) => (
|
|
1940
|
+
setState((prevState) => ({ ...prevState, isOpen: value }));
|
|
1939
1941
|
};
|
|
1940
1942
|
const saveTime = (newTime) => {
|
|
1941
|
-
setState((prevState) => (
|
|
1943
|
+
setState((prevState) => ({ ...prevState, inputValue: newTime }));
|
|
1942
1944
|
props.onValueChange(formatStringTimeToObject(newTime));
|
|
1943
1945
|
};
|
|
1944
1946
|
const getTimeFromInputValue = (newValue) => {
|
|
@@ -1953,45 +1955,41 @@ function TimePicker(props) {
|
|
|
1953
1955
|
saveTime(inputValue);
|
|
1954
1956
|
};
|
|
1955
1957
|
const handleFocus = (e) => {
|
|
1956
|
-
var _a;
|
|
1957
1958
|
onToggle(true);
|
|
1958
|
-
|
|
1959
|
+
props.onFocus?.(e);
|
|
1959
1960
|
};
|
|
1960
1961
|
const handleInputChange = (newValue) => {
|
|
1961
|
-
setState((prevState) => (
|
|
1962
|
+
setState((prevState) => ({ ...prevState, inputValue: newValue }));
|
|
1962
1963
|
if (newValue) {
|
|
1963
1964
|
const result = getTimeFromInputValue(newValue);
|
|
1964
1965
|
if (isTimeValid(result)) {
|
|
1965
|
-
setState((prevState) => (
|
|
1966
|
+
setState((prevState) => ({ ...prevState, value: result }));
|
|
1966
1967
|
}
|
|
1967
1968
|
}
|
|
1968
1969
|
};
|
|
1969
1970
|
const handleBlur = (e) => {
|
|
1970
|
-
var _a;
|
|
1971
1971
|
if (uuiCore.isFocusReceiverInsideFocusLock(e))
|
|
1972
1972
|
return;
|
|
1973
1973
|
onToggle(false);
|
|
1974
|
-
|
|
1974
|
+
props.onBlur?.(e);
|
|
1975
1975
|
if (state.value === '' || state.inputValue === '') {
|
|
1976
1976
|
props.onValueChange(null);
|
|
1977
|
-
setState((prevState) => (
|
|
1977
|
+
setState((prevState) => ({ ...prevState, value: null, inputValue: null }));
|
|
1978
1978
|
}
|
|
1979
1979
|
state.value && state.inputValue && saveTime(state.value);
|
|
1980
1980
|
};
|
|
1981
1981
|
const renderInput = (inputProps) => {
|
|
1982
|
-
|
|
1983
|
-
return (React__namespace.default.createElement(TextInput, Object.assign({}, inputProps, { onClick: null, size: props.size || '36', isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, cx: [css$Y.root, css$Y.timepickerInput, props.inputCx], value: state.inputValue, onValueChange: handleInputChange, onCancel: !props.disableClear && onClear, onFocus: handleFocus, onBlur: handleBlur, isDropdown: false, placeholder: props.placeholder ? props.placeholder : getFormat(), mode: props.mode || DEFAULT_MODE, rawProps: (_a = props.rawProps) === null || _a === void 0 ? void 0 : _a.input })));
|
|
1982
|
+
return (React__namespace.default.createElement(TextInput, { ...inputProps, onClick: null, size: props.size || '36', isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, cx: [css$Y.root, css$Y.timepickerInput, props.inputCx], value: state.inputValue, onValueChange: handleInputChange, onCancel: !props.disableClear && onClear, onFocus: handleFocus, onBlur: handleBlur, isDropdown: false, placeholder: props.placeholder ? props.placeholder : getFormat(), mode: props.mode || DEFAULT_MODE, rawProps: props.rawProps?.input }));
|
|
1984
1983
|
};
|
|
1985
1984
|
const renderBody = (bodyProps) => {
|
|
1986
|
-
|
|
1987
|
-
|
|
1988
|
-
|
|
1989
|
-
React__namespace.default.createElement(TimePickerBody, Object.assign({}, timePickerBodyProps, { onValueChange: handleBodyValueChange, value: formatStringTimeToObject(state.value), rawProps: (_a = props.rawProps) === null || _a === void 0 ? void 0 : _a.body, cx: props.bodyCx })))));
|
|
1985
|
+
const { forwardedRef, onValueChange, ...timePickerBodyProps } = props;
|
|
1986
|
+
return (!props.isDisabled && !props.isReadonly && (React__namespace.default.createElement(DropdownContainer, { ...bodyProps, focusLock: false },
|
|
1987
|
+
React__namespace.default.createElement(TimePickerBody, { ...timePickerBodyProps, onValueChange: handleBodyValueChange, value: formatStringTimeToObject(state.value), rawProps: props.rawProps?.body, cx: props.bodyCx }))));
|
|
1990
1988
|
};
|
|
1991
1989
|
return (React__namespace.default.createElement(Dropdown, { renderTarget: (targetProps) => (props.renderTarget ? props.renderTarget(targetProps) : renderInput(targetProps)), renderBody: (bodyProps) => !props.isDisabled && !props.isReadonly && renderBody(bodyProps), onValueChange: !props.isDisabled && !props.isReadonly ? onToggle : null, value: state.isOpen, modifiers: [{ name: 'offset', options: { offset: [0, 6] } }], forwardedRef: props.forwardedRef }));
|
|
1992
1990
|
}
|
|
1993
1991
|
|
|
1994
|
-
var css$X = {"root":"
|
|
1992
|
+
var css$X = {"root":"_4sgZ8N"};
|
|
1995
1993
|
|
|
1996
1994
|
function applyInputAddonMods() {
|
|
1997
1995
|
return [
|
|
@@ -2000,7 +1998,7 @@ function applyInputAddonMods() {
|
|
|
2000
1998
|
}
|
|
2001
1999
|
const InputAddon = /* @__PURE__ */uuiCore.withMods(uuiComponents.InputAddon, applyInputAddonMods);
|
|
2002
2000
|
|
|
2003
|
-
var css$W = {"root":"
|
|
2001
|
+
var css$W = {"root":"ZLpNz7"};
|
|
2004
2002
|
|
|
2005
2003
|
function applySliderMods() {
|
|
2006
2004
|
return [css$W.root, 'uui-color-neutral'];
|
|
@@ -2023,7 +2021,7 @@ var SvgStarFilled = function SvgStarFilled(props, ref) {
|
|
|
2023
2021
|
};
|
|
2024
2022
|
var ForwardRef$t = /*#__PURE__*/React.forwardRef(SvgStarFilled);
|
|
2025
2023
|
|
|
2026
|
-
var css$V = {"root":"
|
|
2024
|
+
var css$V = {"root":"h1Mcnu","tooltip":"_0p8TPz"};
|
|
2027
2025
|
|
|
2028
2026
|
function applyRatingMods(mods) {
|
|
2029
2027
|
return [
|
|
@@ -2059,17 +2057,16 @@ const getMonthOnOpen = (selectedDate, focus) => {
|
|
|
2059
2057
|
return uuiDayjs.dayjs(selectedDate[focus]);
|
|
2060
2058
|
}
|
|
2061
2059
|
else if (selectedDate.from) {
|
|
2062
|
-
return uuiDayjs.dayjs(selectedDate
|
|
2060
|
+
return uuiDayjs.dayjs(selectedDate?.from);
|
|
2063
2061
|
}
|
|
2064
2062
|
else if (selectedDate.to) {
|
|
2065
|
-
return uuiDayjs.dayjs(selectedDate
|
|
2063
|
+
return uuiDayjs.dayjs(selectedDate?.to);
|
|
2066
2064
|
}
|
|
2067
2065
|
return uuiDayjs.dayjs();
|
|
2068
2066
|
};
|
|
2069
2067
|
const isValidDate = (input, format, filter) => {
|
|
2070
|
-
var _a, _b;
|
|
2071
2068
|
const parsedDate = uuiDayjs.dayjs(input, supportedDateFormats(format), true);
|
|
2072
|
-
return
|
|
2069
|
+
return parsedDate.isValid() ?? filter?.(parsedDate) ?? true;
|
|
2073
2070
|
};
|
|
2074
2071
|
const isValidRange = (range) => {
|
|
2075
2072
|
const from = uuiDayjs.dayjs(range.from);
|
|
@@ -2165,7 +2162,7 @@ const getNextYearsList = (currentDate) => {
|
|
|
2165
2162
|
return currentDate.add(16, 'year');
|
|
2166
2163
|
};
|
|
2167
2164
|
|
|
2168
|
-
var css$U = {"root":"
|
|
2165
|
+
var css$U = {"root":"_1hm209","container":"OXPn1F"};
|
|
2169
2166
|
|
|
2170
2167
|
const uuiHeader = {
|
|
2171
2168
|
container: 'uui-datepicker-header-container',
|
|
@@ -2249,14 +2246,14 @@ function DatePickerHeader({ navIconLeft, navIconRight, value: { month, view }, o
|
|
|
2249
2246
|
React__namespace.createElement(Button, { icon: navIconRight || ForwardRef$v, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: !isDisabled && (() => onRightNavigationArrow()), isDisabled: disableNext }))));
|
|
2250
2247
|
}
|
|
2251
2248
|
|
|
2252
|
-
var css$T = {"uui-typography":"
|
|
2249
|
+
var css$T = {"uui-typography":"EOtnYV","uuiTypography":"EOtnYV","hero-header":"ET7Lxi","heroHeader":"ET7Lxi","promo-header":"K84Wt2","promoHeader":"K84Wt2","uui-critical":"wvrfve","uuiCritical":"wvrfve","uui-info":"VtfHwd","uuiInfo":"VtfHwd","uui-success":"xzQHuh","uuiSuccess":"xzQHuh","uui-warning":"lxHRbO","uuiWarning":"lxHRbO","uui-highlight":"yK8yWc","uuiHighlight":"yK8yWc","uui-typography-size-12":"cIsloX","uuiTypographySize12":"cIsloX","uui-typography-size-14":"HQput1","uuiTypographySize14":"HQput1","uui-typography-size-16":"-nPSkp","uuiTypographySize16":"-nPSkp","root":"-rIouh"};
|
|
2253
2250
|
|
|
2254
2251
|
function applyDateSelectionMods() {
|
|
2255
2252
|
return [css$T.root, `uui-size-${settings.sizes.defaults.datePicker}`];
|
|
2256
2253
|
}
|
|
2257
2254
|
const Calendar = /* @__PURE__ */uuiCore.withMods(uuiComponents.Calendar, applyDateSelectionMods);
|
|
2258
2255
|
|
|
2259
|
-
var css$S = {"uui-typography":"
|
|
2256
|
+
var css$S = {"uui-typography":"WAE8ds","uuiTypography":"WAE8ds","hero-header":"cRSH9u","heroHeader":"cRSH9u","promo-header":"PDAJvQ","promoHeader":"PDAJvQ","uui-critical":"_93T7xf","uuiCritical":"_93T7xf","uui-info":"_9ijqS2","uuiInfo":"_9ijqS2","uui-success":"_9L6ZU9","uuiSuccess":"_9L6ZU9","uui-warning":"iYH3U3","uuiWarning":"iYH3U3","uui-highlight":"Z7IfpQ","uuiHighlight":"Z7IfpQ","uui-typography-size-12":"CQK-Wk","uuiTypographySize12":"CQK-Wk","uui-typography-size-14":"_97rGbs","uuiTypographySize14":"_97rGbs","uui-typography-size-16":"HJhR02","uuiTypographySize16":"HJhR02","root":"SJyVUO"};
|
|
2260
2257
|
|
|
2261
2258
|
const uuiDatePickerBody = {
|
|
2262
2259
|
wrapper: 'uui-datepicker-body-wrapper',
|
|
@@ -2271,7 +2268,7 @@ function DatePickerBodyComp(props, ref) {
|
|
|
2271
2268
|
setMonth(getNewMonth(value));
|
|
2272
2269
|
setView('DAY_SELECTION');
|
|
2273
2270
|
}, [value, setMonth]);
|
|
2274
|
-
return (React__namespace.default.createElement(StatelessDatePickerBody,
|
|
2271
|
+
return (React__namespace.default.createElement(StatelessDatePickerBody, { ref: ref, ...props, month: month, view: view, onValueChange: onValueChange, onMonthChange: (m) => setMonth(m), onViewChange: (v) => setView(v) }));
|
|
2275
2272
|
}
|
|
2276
2273
|
const StatelessDatePickerBody = /* @__PURE__ */React.forwardRef(StatelessDatePickerBodyComp);
|
|
2277
2274
|
function StatelessDatePickerBodyComp({ renderDay, isHoliday, cx: classes, filter, rawProps, value, month, view, onValueChange, onMonthChange, onViewChange, isDisabled, }, ref) {
|
|
@@ -2299,7 +2296,7 @@ function StatelessDatePickerBodyComp({ renderDay, isHoliday, cx: classes, filter
|
|
|
2299
2296
|
return (React__namespace.default.createElement(Calendar, { value: selectedDate, month: month, onValueChange: onDayClick, filter: filter, renderDay: renderDay, isHoliday: isHoliday, isDisabled: isDisabled }));
|
|
2300
2297
|
}
|
|
2301
2298
|
};
|
|
2302
|
-
return (React__namespace.default.createElement("div",
|
|
2299
|
+
return (React__namespace.default.createElement("div", { ref: ref, className: uuiCore.cx(uuiDatePickerBodyBase.container, `uui-size-${settings.sizes.defaults.datePicker}`, classes), ...rawProps },
|
|
2303
2300
|
React__namespace.default.createElement("div", { className: uuiCore.cx(css$S.root, uuiDatePickerBody.wrapper) },
|
|
2304
2301
|
React__namespace.default.createElement(DatePickerHeader, { value: {
|
|
2305
2302
|
view,
|
|
@@ -2317,7 +2314,7 @@ const modifiers$1 = [{
|
|
|
2317
2314
|
options: { offset: [0, 6] },
|
|
2318
2315
|
}];
|
|
2319
2316
|
function DatePickerComponent(props, ref) {
|
|
2320
|
-
const { format = defaultFormat, value } = props;
|
|
2317
|
+
const { format = defaultFormat, value, size = settings.sizes.defaults.datePicker } = props;
|
|
2321
2318
|
const context = uuiCore.useUuiContext();
|
|
2322
2319
|
const [inputValue, setInputValue] = React.useState(toCustomDateFormat(value, format));
|
|
2323
2320
|
const [isBodyOpen, setBodyIsOpen] = React.useState(false);
|
|
@@ -2339,8 +2336,7 @@ function DatePickerComponent(props, ref) {
|
|
|
2339
2336
|
setBodyIsOpen(false);
|
|
2340
2337
|
};
|
|
2341
2338
|
const onBlur = (e) => {
|
|
2342
|
-
|
|
2343
|
-
(_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
|
|
2339
|
+
props.onBlur?.(e);
|
|
2344
2340
|
if (isValidDate(inputValue, format, props.filter)) {
|
|
2345
2341
|
setInputValue(toCustomDateFormat(inputValue, format));
|
|
2346
2342
|
onValueChange(toValueDateFormat(inputValue, format));
|
|
@@ -2357,37 +2353,33 @@ function DatePickerComponent(props, ref) {
|
|
|
2357
2353
|
}
|
|
2358
2354
|
};
|
|
2359
2355
|
const renderInput = (renderProps) => {
|
|
2360
|
-
var _a;
|
|
2361
2356
|
const allowClear = !props.disableClear && !!inputValue;
|
|
2362
|
-
return (React__namespace.default.createElement(TextInput,
|
|
2357
|
+
return (React__namespace.default.createElement(TextInput, { ...renderProps, isDropdown: false, cx: uuiCore.cx(props.inputCx, isBodyOpen && uuiCore.uuiMod.focus), icon: props.mode !== EditMode.CELL && systemIcons.calendar ? systemIcons.calendar : undefined, iconPosition: props.iconPosition || 'left', placeholder: props.placeholder ? props.placeholder : format, size: size, value: inputValue || undefined, onValueChange: (v) => {
|
|
2363
2358
|
setInputValue(v || '');
|
|
2364
2359
|
}, onCancel: allowClear ? () => {
|
|
2365
2360
|
if (!props.disableClear && !!inputValue) {
|
|
2366
2361
|
onValueChange(null);
|
|
2367
2362
|
}
|
|
2368
2363
|
} : undefined, isInvalid: props.isInvalid, isDisabled: props.isDisabled, isReadonly: props.isReadonly, tabIndex: props.isReadonly || props.isDisabled ? -1 : 0, onFocus: (e) => {
|
|
2369
|
-
|
|
2370
|
-
|
|
2371
|
-
}, onKeyDown: onInputKeyDown, onBlur: onBlur, mode: props.mode || defaultMode$1, rawProps: (_a = props.rawProps) === null || _a === void 0 ? void 0 : _a.input, id: props.id })));
|
|
2364
|
+
props.onFocus?.(e);
|
|
2365
|
+
}, onKeyDown: onInputKeyDown, onBlur: onBlur, mode: props.mode || defaultMode$1, rawProps: props.rawProps?.input, id: props.id }));
|
|
2372
2366
|
};
|
|
2373
2367
|
const renderBody = (renderProps) => {
|
|
2374
|
-
|
|
2375
|
-
|
|
2376
|
-
|
|
2377
|
-
_b.call(props)));
|
|
2368
|
+
return (React__namespace.default.createElement(DropdownContainer, { ...renderProps },
|
|
2369
|
+
React__namespace.default.createElement(DatePickerBody, { value: value, onValueChange: onBodyValueChange, cx: uuiCore.cx(props.bodyCx), filter: props.filter, isHoliday: props.isHoliday, renderDay: props.renderDay, rawProps: props.rawProps?.body }),
|
|
2370
|
+
props.renderFooter?.()));
|
|
2378
2371
|
};
|
|
2379
2372
|
return (React__namespace.default.createElement(uuiComponents.Dropdown, { value: isBodyOpen, modifiers: modifiers$1, placement: props.placement, forwardedRef: ref, onValueChange: (v) => {
|
|
2380
2373
|
setBodyIsOpen(v);
|
|
2381
2374
|
}, renderTarget: (renderProps) => {
|
|
2382
|
-
|
|
2383
|
-
return ((_a = props.renderTarget) === null || _a === void 0 ? void 0 : _a.call(props, renderProps)) || renderInput(renderProps);
|
|
2375
|
+
return props.renderTarget?.(renderProps) || renderInput(renderProps);
|
|
2384
2376
|
}, renderBody: (renderProps) => {
|
|
2385
2377
|
return renderBody(renderProps);
|
|
2386
2378
|
} }));
|
|
2387
2379
|
}
|
|
2388
2380
|
const DatePicker = /* @__PURE__ */React__namespace.default.forwardRef(DatePickerComponent);
|
|
2389
2381
|
|
|
2390
|
-
var css$R = {"uui-typography":"
|
|
2382
|
+
var css$R = {"uui-typography":"BkL79b","uuiTypography":"BkL79b","hero-header":"_13uVSp","heroHeader":"_13uVSp","promo-header":"_6ZmjrH","promoHeader":"_6ZmjrH","uui-critical":"OP489O","uuiCritical":"OP489O","uui-info":"_1-pda5","uuiInfo":"_1-pda5","uui-success":"n9ZbaR","uuiSuccess":"n9ZbaR","uui-warning":"nQogdv","uuiWarning":"nQogdv","uui-highlight":"WG3IBv","uuiHighlight":"WG3IBv","uui-typography-size-12":"C-YqC6","uuiTypographySize12":"C-YqC6","uui-typography-size-14":"Z1RNxQ","uuiTypographySize14":"Z1RNxQ","uui-typography-size-16":"LvnqKR","uuiTypographySize16":"LvnqKR","date-input":"vLAvGR","dateInput":"vLAvGR","root":"GjFccn","separator":"_0cvkqX","mode-form":"LYcuL2","modeForm":"LYcuL2","mode-cell":"oF2hS4","modeCell":"oF2hS4"};
|
|
2391
2383
|
|
|
2392
2384
|
const RangeDatePickerInput = /* @__PURE__ */React.forwardRef(({ isDisabled, isInvalid, isReadonly, size, disableClear, rawProps, value, inFocus, format, onValueChange, onFocusInput, onBlurInput, onClick, getPlaceholder, filter, onKeyDown, id, cx: classes, }, ref) => {
|
|
2393
2385
|
const [inputValue, setInputValue] = React.useState(toCustomDateRangeFormat(value, format));
|
|
@@ -2395,21 +2387,30 @@ const RangeDatePickerInput = /* @__PURE__ */React.forwardRef(({ isDisabled, isIn
|
|
|
2395
2387
|
setInputValue(toCustomDateRangeFormat(value, format));
|
|
2396
2388
|
}, [format, value, setInputValue]);
|
|
2397
2389
|
const onInputChange = (newValue, inputType) => {
|
|
2398
|
-
setInputValue(
|
|
2390
|
+
setInputValue({
|
|
2391
|
+
...inputValue,
|
|
2392
|
+
[inputType]: newValue,
|
|
2393
|
+
});
|
|
2399
2394
|
};
|
|
2400
2395
|
const handleFocus = (event, inputType) => {
|
|
2401
2396
|
onFocusInput(event, inputType);
|
|
2402
2397
|
};
|
|
2403
2398
|
const handleBlur = (event, inputType) => {
|
|
2404
|
-
onBlurInput
|
|
2399
|
+
onBlurInput?.(event, inputType);
|
|
2405
2400
|
const selectedDate = toValueDateRangeFormat(inputValue, format);
|
|
2406
2401
|
if (isValidRange(selectedDate) && (!filter || filter(uuiDayjs.dayjs(selectedDate[inputType])))) {
|
|
2407
2402
|
setInputValue(toCustomDateRangeFormat(selectedDate, format));
|
|
2408
2403
|
onValueChange(selectedDate);
|
|
2409
2404
|
}
|
|
2410
2405
|
else {
|
|
2411
|
-
setInputValue(
|
|
2412
|
-
|
|
2406
|
+
setInputValue({
|
|
2407
|
+
...inputValue,
|
|
2408
|
+
[inputType]: null,
|
|
2409
|
+
});
|
|
2410
|
+
onValueChange({
|
|
2411
|
+
...selectedDate,
|
|
2412
|
+
[inputType]: null,
|
|
2413
|
+
});
|
|
2413
2414
|
}
|
|
2414
2415
|
};
|
|
2415
2416
|
const onInputKeyDown = (e) => {
|
|
@@ -2422,14 +2423,14 @@ const RangeDatePickerInput = /* @__PURE__ */React.forwardRef(({ isDisabled, isIn
|
|
|
2422
2423
|
return (
|
|
2423
2424
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
2424
2425
|
React__namespace.default.createElement("div", { ref: ref, className: uuiCore.cx(`uui-size-${size || settings.sizes.defaults.rangeDatePicker}`, 'uui-range-date-picker', classes, css$R.root, isDisabled && uuiCore.uuiMod.disabled, isReadonly && uuiCore.uuiMod.readonly, isInvalid && uuiCore.uuiMod.invalid, inFocus && uuiCore.uuiMod.focus), onKeyDown: onKeyDown },
|
|
2425
|
-
React__namespace.default.createElement(TextInput, { icon: systemIcons.calendar, cx: uuiCore.cx(css$R.dateInput, inFocus === 'from' && uuiCore.uuiMod.focus), size: size || settings.sizes.defaults.rangeDatePicker, placeholder: getPlaceholder ? getPlaceholder('from') : i18n.rangeDatePicker.pickerPlaceholderFrom, value: inputValue.from || undefined, onValueChange: (v) => onInputChange(v || '', 'from'), onFocus: (event) => handleFocus(event, 'from'), onBlur: (event) => handleBlur(event, 'from'), isInvalid: isInvalid, isDisabled: isDisabled, isReadonly: isReadonly, isDropdown: false, rawProps: rawProps
|
|
2426
|
+
React__namespace.default.createElement(TextInput, { icon: systemIcons.calendar, cx: uuiCore.cx(css$R.dateInput, inFocus === 'from' && uuiCore.uuiMod.focus), size: size || settings.sizes.defaults.rangeDatePicker, placeholder: getPlaceholder ? getPlaceholder('from') : i18n.rangeDatePicker.pickerPlaceholderFrom, value: inputValue.from || undefined, onValueChange: (v) => onInputChange(v || '', 'from'), onFocus: (event) => handleFocus(event, 'from'), onBlur: (event) => handleBlur(event, 'from'), isInvalid: isInvalid, isDisabled: isDisabled, isReadonly: isReadonly, isDropdown: false, rawProps: rawProps?.from, onClick: onClick, onKeyDown: onInputKeyDown, id: id }),
|
|
2426
2427
|
React__namespace.default.createElement("div", { className: css$R.separator }),
|
|
2427
2428
|
React__namespace.default.createElement(TextInput, { cx: uuiCore.cx(css$R.dateInput, inFocus === 'to' && uuiCore.uuiMod.focus), placeholder: getPlaceholder ? getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo, size: size || settings.sizes.defaults.rangeDatePicker, value: inputValue.to || undefined, onCancel: clearAllowed ? () => {
|
|
2428
2429
|
onValueChange(defaultRangeValue);
|
|
2429
|
-
} : undefined, onValueChange: (v) => onInputChange(v || '', 'to'), onFocus: (e) => handleFocus(e, 'to'), onBlur: (e) => handleBlur(e, 'to'), isInvalid: isInvalid, isDisabled: isDisabled, isReadonly: isReadonly, isDropdown: false, rawProps: rawProps
|
|
2430
|
+
} : undefined, onValueChange: (v) => onInputChange(v || '', 'to'), onFocus: (e) => handleFocus(e, 'to'), onBlur: (e) => handleBlur(e, 'to'), isInvalid: isInvalid, isDisabled: isDisabled, isReadonly: isReadonly, isDropdown: false, rawProps: rawProps?.to, onClick: onClick, onKeyDown: onInputKeyDown })));
|
|
2430
2431
|
});
|
|
2431
2432
|
|
|
2432
|
-
var css$Q = {"uui-typography":"
|
|
2433
|
+
var css$Q = {"uui-typography":"aKMPv2","uuiTypography":"aKMPv2","hero-header":"DVAVTF","heroHeader":"DVAVTF","promo-header":"_8LdXQ2","promoHeader":"_8LdXQ2","uui-critical":"cZUiVU","uuiCritical":"cZUiVU","uui-info":"-rGsc4","uuiInfo":"-rGsc4","uui-success":"D9ahuw","uuiSuccess":"D9ahuw","uui-warning":"tUGB8H","uuiWarning":"tUGB8H","uui-highlight":"_7eczJW","uuiHighlight":"_7eczJW","uui-typography-size-12":"TWShcg","uuiTypographySize12":"TWShcg","uui-typography-size-14":"qPqW0g","uuiTypographySize14":"qPqW0g","uui-typography-size-16":"ApVwQ7","uuiTypographySize16":"ApVwQ7","root":"Aox5rF"};
|
|
2433
2434
|
|
|
2434
2435
|
const uuiPresets = {
|
|
2435
2436
|
container: 'uui-presets-container',
|
|
@@ -2437,15 +2438,19 @@ const uuiPresets = {
|
|
|
2437
2438
|
item: 'uui-presets-item',
|
|
2438
2439
|
};
|
|
2439
2440
|
const getPresets = (presets) => {
|
|
2440
|
-
return Object.keys(presets).map((key) => (
|
|
2441
|
+
return Object.keys(presets).map((key) => ({
|
|
2442
|
+
...presets[key].getRange(),
|
|
2443
|
+
name: presets[key].name,
|
|
2444
|
+
key,
|
|
2445
|
+
})).sort((a, b) => a.order - b.order);
|
|
2441
2446
|
};
|
|
2442
2447
|
function CalendarPresets(props) {
|
|
2443
|
-
return (React__namespace.createElement("div",
|
|
2448
|
+
return (React__namespace.createElement("div", { ref: props.forwardedRef, className: uuiCore.cx(uuiPresets.container, css$Q.root, props.cx), ...props.rawProps },
|
|
2444
2449
|
React__namespace.createElement("div", { className: uuiPresets.header }, "Presets"),
|
|
2445
2450
|
getPresets(props.presets).map((item) => (React__namespace.createElement(LinkButton, { key: item.key, caption: item.name, onClick: () => props.onPresetSet(item), size: "24" })))));
|
|
2446
2451
|
}
|
|
2447
2452
|
|
|
2448
|
-
var css$P = {"uui-typography":"
|
|
2453
|
+
var css$P = {"uui-typography":"GJL03A","uuiTypography":"GJL03A","hero-header":"nqQ9YN","heroHeader":"nqQ9YN","promo-header":"ektPMD","promoHeader":"ektPMD","uui-critical":"-I4kxZ","uuiCritical":"-I4kxZ","uui-info":"bWM30a","uuiInfo":"bWM30a","uui-success":"wQRgAa","uuiSuccess":"wQRgAa","uui-warning":"_7yLZQ6","uuiWarning":"_7yLZQ6","uui-highlight":"pB7qnj","uuiHighlight":"pB7qnj","uui-typography-size-12":"Wus-0s","uuiTypographySize12":"Wus-0s","uui-typography-size-14":"Wq8khN","uuiTypographySize14":"Wq8khN","uui-typography-size-16":"_2w3ugW","uuiTypographySize16":"_2w3ugW","root":"VZX6-F","container":"MEKRPh","day-selection":"OO-quB","daySelection":"OO-quB","from-picker":"-uaY0w","fromPicker":"-uaY0w","to-picker":"UqQCKB","toPicker":"UqQCKB","bodes-wrapper":"D23g4B","bodesWrapper":"D23g4B","blocker":"_0xMMMt"};
|
|
2449
2454
|
|
|
2450
2455
|
const uuiRangeDatePickerBody = {
|
|
2451
2456
|
inRange: 'uui-range-datepicker-in-range',
|
|
@@ -2543,8 +2548,8 @@ function RangeDatePickerBodyComp(props, ref) {
|
|
|
2543
2548
|
// selectedDate can be null, other params should always have values
|
|
2544
2549
|
const newRange = v ? getRange(v) : selectedDate;
|
|
2545
2550
|
let newInFocus = null;
|
|
2546
|
-
const fromChanged = selectedDate.from !==
|
|
2547
|
-
const toChanged = selectedDate.to !==
|
|
2551
|
+
const fromChanged = selectedDate.from !== newRange?.from;
|
|
2552
|
+
const toChanged = selectedDate.to !== newRange?.to;
|
|
2548
2553
|
if (inFocus === 'from' && fromChanged) {
|
|
2549
2554
|
newInFocus = 'to';
|
|
2550
2555
|
}
|
|
@@ -2554,11 +2559,11 @@ function RangeDatePickerBodyComp(props, ref) {
|
|
|
2554
2559
|
setActiveMonth(part);
|
|
2555
2560
|
props.onValueChange({
|
|
2556
2561
|
selectedDate: newRange ? newRange : selectedDate,
|
|
2557
|
-
inFocus: newInFocus
|
|
2562
|
+
inFocus: newInFocus ?? inFocus,
|
|
2558
2563
|
});
|
|
2559
2564
|
};
|
|
2560
2565
|
const renderDay = (renderProps) => {
|
|
2561
|
-
return (React__namespace.default.createElement(uuiComponents.Day,
|
|
2566
|
+
return (React__namespace.default.createElement(uuiComponents.Day, { ...renderProps, cx: getDayCX(renderProps.value, selectedDate) }));
|
|
2562
2567
|
};
|
|
2563
2568
|
const from = {
|
|
2564
2569
|
month,
|
|
@@ -2586,17 +2591,17 @@ function RangeDatePickerBodyComp(props, ref) {
|
|
|
2586
2591
|
});
|
|
2587
2592
|
}, presets: presets })));
|
|
2588
2593
|
};
|
|
2589
|
-
return (React__namespace.default.createElement("div",
|
|
2594
|
+
return (React__namespace.default.createElement("div", { ref: ref, className: uuiCore.cx(css$P.root, uuiDatePickerBodyBase.container, props.cx), ...props.rawProps },
|
|
2590
2595
|
React__namespace.default.createElement(FlexRow, { cx: [view === 'DAY_SELECTION' && css$P.daySelection, css$P.container], alignItems: "top" },
|
|
2591
2596
|
React__namespace.default.createElement(FlexCell, { width: "auto" },
|
|
2592
2597
|
React__namespace.default.createElement(FlexRow, null,
|
|
2593
2598
|
React__namespace.default.createElement(FlexRow, { cx: css$P.bodesWrapper, alignItems: "top" },
|
|
2594
|
-
React__namespace.default.createElement(StatelessDatePickerBody,
|
|
2599
|
+
React__namespace.default.createElement(StatelessDatePickerBody, { key: "date-picker-body-left", cx: uuiCore.cx(css$P.fromPicker), ...from, onValueChange: (v) => onBodyValueChange(v, 'from'), onMonthChange: (m) => {
|
|
2595
2600
|
setMonth(m);
|
|
2596
|
-
}, onViewChange: (v) => setView(v), filter: props.filter, isHoliday: props.isHoliday, renderDay: props.renderDay || renderDay, isDisabled: view !== 'DAY_SELECTION' && activeMonth === 'to' })
|
|
2597
|
-
React__namespace.default.createElement(StatelessDatePickerBody,
|
|
2601
|
+
}, onViewChange: (v) => setView(v), filter: props.filter, isHoliday: props.isHoliday, renderDay: props.renderDay || renderDay, isDisabled: view !== 'DAY_SELECTION' && activeMonth === 'to' }),
|
|
2602
|
+
React__namespace.default.createElement(StatelessDatePickerBody, { key: "date-picker-body-right", cx: uuiCore.cx(css$P.toPicker), ...to, onValueChange: (v) => onBodyValueChange(v, 'to'), onMonthChange: (m) => {
|
|
2598
2603
|
setMonth(m.subtract(1, 'month'));
|
|
2599
|
-
}, onViewChange: (v) => setView(v), filter: props.filter, renderDay: props.renderDay || renderDay, isHoliday: props.isHoliday, isDisabled: view !== 'DAY_SELECTION' && activeMonth === 'from' })
|
|
2604
|
+
}, onViewChange: (v) => setView(v), filter: props.filter, renderDay: props.renderDay || renderDay, isHoliday: props.isHoliday, isDisabled: view !== 'DAY_SELECTION' && activeMonth === 'from' }),
|
|
2600
2605
|
view !== 'DAY_SELECTION' && (React__namespace.default.createElement("div", { style: {
|
|
2601
2606
|
left: activeMonth === 'from' ? '50%' : undefined,
|
|
2602
2607
|
right: activeMonth === 'to' ? '50%' : undefined,
|
|
@@ -2606,9 +2611,9 @@ function RangeDatePickerBodyComp(props, ref) {
|
|
|
2606
2611
|
}
|
|
2607
2612
|
const getDayCX = (day, selectedDate) => {
|
|
2608
2613
|
const dayValue = day.valueOf();
|
|
2609
|
-
const fromValue =
|
|
2614
|
+
const fromValue = selectedDate?.from
|
|
2610
2615
|
? uuiDayjs.dayjs(selectedDate.from).valueOf() : null;
|
|
2611
|
-
const toValue =
|
|
2616
|
+
const toValue = selectedDate?.to
|
|
2612
2617
|
? uuiDayjs.dayjs(selectedDate.to).valueOf() : null;
|
|
2613
2618
|
const inRange = fromValue
|
|
2614
2619
|
&& toValue
|
|
@@ -2620,22 +2625,22 @@ const getDayCX = (day, selectedDate) => {
|
|
|
2620
2625
|
return [uuiCore.cx(inRange && uuiRangeDatePickerBody.inRange, isFirst && uuiRangeDatePickerBody.firstDayInRangeWrapper, !inRange && isFirst && uuiRangeDatePickerBody.lastDayInRangeWrapper, isLast && uuiRangeDatePickerBody.lastDayInRangeWrapper, !inRange && isLast && uuiRangeDatePickerBody.firstDayInRangeWrapper, (dayValue === fromValue || dayValue === toValue) && uuiComponents.uuiDaySelection.selectedDay)];
|
|
2621
2626
|
};
|
|
2622
2627
|
|
|
2623
|
-
var css$O = {"dropdown-container":"
|
|
2628
|
+
var css$O = {"dropdown-container":"HbqhCF","dropdownContainer":"HbqhCF"};
|
|
2624
2629
|
|
|
2625
2630
|
const modifiers = [{
|
|
2626
2631
|
name: 'offset',
|
|
2627
2632
|
options: { offset: [0, 6] },
|
|
2628
2633
|
}];
|
|
2629
2634
|
function RangeDatePickerComponent(props, ref) {
|
|
2630
|
-
const { value: _value, format = defaultFormat } = props;
|
|
2635
|
+
const { value: _value, format = defaultFormat, size = settings.sizes.defaults.rangeDatePicker } = props;
|
|
2631
2636
|
const value = _value || defaultRangeValue; // also handles null in comparison to default value
|
|
2632
2637
|
const context = uuiCore.useUuiContext();
|
|
2633
2638
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
2634
2639
|
const [inFocus, setInFocus] = React.useState(null);
|
|
2635
2640
|
const targetRef = React__namespace.default.useRef(null);
|
|
2636
2641
|
const onValueChange = (newValue) => {
|
|
2637
|
-
const fromChanged =
|
|
2638
|
-
const toChanged =
|
|
2642
|
+
const fromChanged = value?.from !== newValue?.from;
|
|
2643
|
+
const toChanged = value?.to !== newValue?.to;
|
|
2639
2644
|
if (fromChanged || toChanged) {
|
|
2640
2645
|
props.onValueChange(newValue);
|
|
2641
2646
|
if (props.getValueChangeAnalyticsEvent) {
|
|
@@ -2645,17 +2650,15 @@ function RangeDatePickerComponent(props, ref) {
|
|
|
2645
2650
|
}
|
|
2646
2651
|
};
|
|
2647
2652
|
const onOpenChange = (newIsOpen) => {
|
|
2648
|
-
var _a;
|
|
2649
2653
|
setIsOpen(newIsOpen);
|
|
2650
|
-
|
|
2654
|
+
props.onOpenChange?.(newIsOpen);
|
|
2651
2655
|
if (!inFocus && newIsOpen) {
|
|
2652
2656
|
setInFocus('from');
|
|
2653
2657
|
targetRef.current.querySelector('.uui-input').focus();
|
|
2654
2658
|
}
|
|
2655
2659
|
};
|
|
2656
2660
|
const onBodyValueChange = (newValue) => {
|
|
2657
|
-
|
|
2658
|
-
setInFocus((_a = newValue.inFocus) !== null && _a !== void 0 ? _a : inFocus);
|
|
2661
|
+
setInFocus(newValue.inFocus ?? inFocus);
|
|
2659
2662
|
onValueChange(newValue.selectedDate);
|
|
2660
2663
|
const toChanged = value.to !== newValue.selectedDate.to;
|
|
2661
2664
|
const closeBody = newValue.selectedDate.from && newValue.selectedDate.to
|
|
@@ -2666,19 +2669,14 @@ function RangeDatePickerComponent(props, ref) {
|
|
|
2666
2669
|
}
|
|
2667
2670
|
};
|
|
2668
2671
|
const renderBody = (renderProps) => {
|
|
2669
|
-
|
|
2670
|
-
return (React__namespace.default.createElement(DropdownContainer, Object.assign({}, renderProps, { cx: cx__default.default(css$O.dropdownContainer), shards: [targetRef], returnFocus: (node) => {
|
|
2671
|
-
console.log('lock', node);
|
|
2672
|
-
return true;
|
|
2673
|
-
} }),
|
|
2672
|
+
return (React__namespace.default.createElement(DropdownContainer, { ...renderProps, cx: cx__default.default(css$O.dropdownContainer), shards: [targetRef], returnFocus: true },
|
|
2674
2673
|
React__namespace.default.createElement(FlexRow, null,
|
|
2675
2674
|
React__namespace.default.createElement(RangeDatePickerBody, { cx: cx__default.default(props.bodyCx), value: {
|
|
2676
2675
|
selectedDate: _value,
|
|
2677
2676
|
inFocus,
|
|
2678
2677
|
}, onValueChange: onBodyValueChange, filter: props.filter, presets: props.presets, renderDay: props.renderDay, renderFooter: () => {
|
|
2679
|
-
|
|
2680
|
-
|
|
2681
|
-
}, isHoliday: props.isHoliday, rawProps: (_a = props.rawProps) === null || _a === void 0 ? void 0 : _a.body }))));
|
|
2678
|
+
return props.renderFooter?.(value);
|
|
2679
|
+
}, isHoliday: props.isHoliday, rawProps: props.rawProps?.body }))));
|
|
2682
2680
|
};
|
|
2683
2681
|
const handleEscape = (e) => {
|
|
2684
2682
|
if (e.key === 'Escape' && isOpen) {
|
|
@@ -2687,17 +2685,15 @@ function RangeDatePickerComponent(props, ref) {
|
|
|
2687
2685
|
}
|
|
2688
2686
|
};
|
|
2689
2687
|
return (React__namespace.default.createElement(uuiComponents.Dropdown, { renderTarget: (renderProps) => {
|
|
2690
|
-
|
|
2691
|
-
|
|
2692
|
-
var _a;
|
|
2693
|
-
(_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e, type);
|
|
2688
|
+
return props.renderTarget?.(renderProps) || (React__namespace.default.createElement(RangeDatePickerInput, { id: props.id, ref: (node) => { renderProps.ref(node); targetRef.current = node; }, cx: props.inputCx, onClick: () => renderProps.toggleDropdownOpening(true), isDisabled: props.isDisabled, isInvalid: props.isInvalid, isReadonly: props.isReadonly, size: size, getPlaceholder: props.getPlaceholder, disableClear: props.disableClear, rawProps: props.rawProps, inFocus: inFocus, value: value, format: format, onValueChange: onValueChange, onFocusInput: (e, type) => {
|
|
2689
|
+
props.onFocus?.(e, type);
|
|
2694
2690
|
setInFocus(type);
|
|
2695
|
-
}, onBlurInput: (e, type) => {
|
|
2691
|
+
}, onBlurInput: (e, type) => { props.onBlur?.(e, type); !isOpen && setInFocus(null); }, onKeyDown: handleEscape }));
|
|
2696
2692
|
}, renderBody: (renderProps) => renderBody(renderProps), onValueChange: (v) => onOpenChange(v), value: isOpen, modifiers: modifiers, placement: props.placement, forwardedRef: ref }));
|
|
2697
2693
|
}
|
|
2698
2694
|
const RangeDatePicker = /* @__PURE__ */React__namespace.default.forwardRef(RangeDatePickerComponent);
|
|
2699
2695
|
|
|
2700
|
-
var css$N = {"root":"
|
|
2696
|
+
var css$N = {"root":"r770-s","blocker":"Rxk1cT","marker":"aUVXuk","top":"-pU3st","bottom":"xqhEC6","left":"zuU0it","right":"sJDsTK","inside":"mwqolr"};
|
|
2701
2697
|
|
|
2702
2698
|
function DropMarker(props) {
|
|
2703
2699
|
return props.isDndInProgress
|
|
@@ -2707,12 +2703,12 @@ function DropMarker(props) {
|
|
|
2707
2703
|
css$N.root,
|
|
2708
2704
|
css$N.marker,
|
|
2709
2705
|
css$N[props.position],
|
|
2710
|
-
props
|
|
2706
|
+
props?.cx,
|
|
2711
2707
|
]) })))
|
|
2712
2708
|
: null;
|
|
2713
2709
|
}
|
|
2714
2710
|
|
|
2715
|
-
var css$M = {"root":"
|
|
2711
|
+
var css$M = {"root":"nRxydU","line-height":"TNNoPW","lineHeight":"TNNoPW","font-size":"A4sNLT","fontSize":"A4sNLT"};
|
|
2716
2712
|
|
|
2717
2713
|
function applyTextMods(mods) {
|
|
2718
2714
|
return [
|
|
@@ -2728,16 +2724,18 @@ function applyTextMods(mods) {
|
|
|
2728
2724
|
];
|
|
2729
2725
|
}
|
|
2730
2726
|
const Text = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Text, applyTextMods, (props) => {
|
|
2731
|
-
|
|
2732
|
-
const style = ((_a = props === null || props === void 0 ? void 0 : props.rawProps) === null || _a === void 0 ? void 0 : _a.style) || {};
|
|
2727
|
+
const style = props?.rawProps?.style || {};
|
|
2733
2728
|
props.fontSize && (style['--uui-text-font-size'] = `${props.fontSize}px`);
|
|
2734
2729
|
props.lineHeight && (style['--uui-text-line-height'] = `${props.lineHeight}px`);
|
|
2735
2730
|
return {
|
|
2736
|
-
rawProps:
|
|
2731
|
+
rawProps: {
|
|
2732
|
+
...props?.rawProps,
|
|
2733
|
+
style: style,
|
|
2734
|
+
},
|
|
2737
2735
|
};
|
|
2738
2736
|
});
|
|
2739
2737
|
|
|
2740
|
-
var css$L = {"root":"
|
|
2738
|
+
var css$L = {"root":"BhTsOJ","loading-word":"_9u9irQ","loadingWord":"_9u9irQ","animated-loading":"p-R-41","animatedLoading":"p-R-41","skeleton_loading":"mtCOaR","skeletonLoading":"mtCOaR"};
|
|
2741
2739
|
|
|
2742
2740
|
const TextPlaceholder = (props) => {
|
|
2743
2741
|
const pattern = ' ';
|
|
@@ -2749,20 +2747,20 @@ const TextPlaceholder = (props) => {
|
|
|
2749
2747
|
}
|
|
2750
2748
|
return words;
|
|
2751
2749
|
}, [props.wordsCount]);
|
|
2752
|
-
return (React__namespace.createElement("div",
|
|
2750
|
+
return (React__namespace.createElement("div", { "aria-busy": true, className: cx__default.default(css$L.root, 'uui-text-placeholder'), ...props.rawProps }, text.map((it, index) => (React__namespace.createElement("span", { key: index, className: cx__default.default([
|
|
2753
2751
|
props.cx, css$L.loadingWord, !props.isNotAnimated && css$L.animatedLoading,
|
|
2754
2752
|
]), dangerouslySetInnerHTML: { __html: it } })))));
|
|
2755
2753
|
};
|
|
2756
2754
|
|
|
2757
|
-
const RichTextView = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.RichTextView, (mods) => ['uui-typography', `uui-typography-size-${mods.size ||
|
|
2755
|
+
const RichTextView = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.RichTextView, (mods) => ['uui-typography', `uui-typography-size-${mods.size || settings.sizes.defaults.richTextView}`]);
|
|
2758
2756
|
|
|
2759
|
-
var css$K = {"uui-typography":"
|
|
2757
|
+
var css$K = {"uui-typography":"HxDx9i","uuiTypography":"HxDx9i","hero-header":"_5VKSx5","heroHeader":"_5VKSx5","promo-header":"_9DfNxC","promoHeader":"_9DfNxC","uui-critical":"_0zi0mL","uuiCritical":"_0zi0mL","uui-info":"CAz27P","uuiInfo":"CAz27P","uui-success":"hUHlcf","uuiSuccess":"hUHlcf","uui-warning":"rd4B66","uuiWarning":"rd4B66","uui-highlight":"nud0ey","uuiHighlight":"nud0ey","uui-typography-size-12":"vGMHV5","uuiTypographySize12":"vGMHV5","uui-typography-size-14":"_1oV-F-","uuiTypographySize14":"_1oV-F-","uui-typography-size-16":"pBt5IQ","uuiTypographySize16":"pBt5IQ","modal":"JZp-zC","search-wrapper":"MC-RfA","searchWrapper":"MC-RfA","no-data":"ehup4C","noData":"ehup4C","type-search-to-load-size-24":"QuDh0j","typeSearchToLoadSize24":"QuDh0j"};
|
|
2760
2758
|
|
|
2761
2759
|
class DataPickerBody extends uuiComponents.PickerBodyBase {
|
|
2762
2760
|
constructor() {
|
|
2763
2761
|
super(...arguments);
|
|
2764
2762
|
this.lens = uuiCore.Lens.onEditableComponent(this);
|
|
2765
|
-
this.searchLens = this.lens.prop('search');
|
|
2763
|
+
this.searchLens = this.lens.prop('search').default('');
|
|
2766
2764
|
this.getSearchSize = () => (uuiCore.isMobile() ? settings.sizes.pickerInput.body.mobile.searchInput : this.props.searchSize);
|
|
2767
2765
|
}
|
|
2768
2766
|
renderEmpty() {
|
|
@@ -2799,12 +2797,12 @@ class DataPickerBody extends uuiComponents.PickerBodyBase {
|
|
|
2799
2797
|
return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
|
|
2800
2798
|
this.showSearch() && (React__namespace.default.createElement("div", { key: "search", className: css$K.searchWrapper },
|
|
2801
2799
|
React__namespace.default.createElement(uuiComponents.FlexCell, { grow: 1 },
|
|
2802
|
-
React__namespace.default.createElement(SearchInput,
|
|
2803
|
-
React__namespace.default.createElement(FlexRow, { key: "body", cx: uuiCore.cx('uui-picker_input-body', css$K[this.props.editMode], css$K[this.props.selectionMode]), rawProps: { style: { maxHeight: this.props.maxHeight, maxWidth: this.props.maxWidth } } }, this.props.rows.length > 0 ? (React__namespace.default.createElement(VirtualList,
|
|
2800
|
+
React__namespace.default.createElement(SearchInput, { ref: this.searchRef, placeholder: i18n.dataPickerBody.searchPlaceholder, ...this.searchLens.toProps(), onKeyDown: this.searchKeyDown, size: searchSize, debounceDelay: this.props.searchDebounceDelay, rawProps: { dir: 'auto' } })))),
|
|
2801
|
+
React__namespace.default.createElement(FlexRow, { key: "body", cx: uuiCore.cx('uui-picker_input-body', css$K[this.props.editMode], css$K[this.props.selectionMode]), rawProps: { style: { maxHeight: this.props.maxHeight, maxWidth: this.props.maxWidth } } }, this.props.rows.length > 0 ? (React__namespace.default.createElement(VirtualList, { ...this.lens.toProps(), rows: this.props.rows, rawProps: this.props.rawProps, rowsCount: this.props.rowsCount, isLoading: this.props.isReloading })) : this.renderEmpty())));
|
|
2804
2802
|
}
|
|
2805
2803
|
}
|
|
2806
2804
|
|
|
2807
|
-
var css$J = {"footer":"
|
|
2805
|
+
var css$J = {"footer":"sozOQb"};
|
|
2808
2806
|
|
|
2809
2807
|
function DataPickerFooterImpl(props) {
|
|
2810
2808
|
const { search, clearSelection, view, showSelected, selectionMode, isSearchTooShort, } = props;
|
|
@@ -2815,11 +2813,12 @@ function DataPickerFooterImpl(props) {
|
|
|
2815
2813
|
const clearAllText = i18n.pickerInput.clearSelectionButton;
|
|
2816
2814
|
const clearSingleText = i18n.pickerInput.clearSelectionButtonSingle;
|
|
2817
2815
|
const selectAllText = i18n.pickerInput.selectAllButton;
|
|
2818
|
-
const isSearching = search
|
|
2819
|
-
const hideFooter =
|
|
2816
|
+
const isSearching = search?.length;
|
|
2817
|
+
const hideFooter = (rowsCount === 0 && !hasSelection) || isSearching || (isSinglePicker && props.disableClear);
|
|
2820
2818
|
const showClear = !props.disableClear && (isSinglePicker ? true : (!view.selectAll || hasSelection));
|
|
2821
2819
|
return !hideFooter && (React__namespace.default.createElement(FlexRow, { cx: css$J.footer },
|
|
2822
|
-
!isSinglePicker && (
|
|
2820
|
+
!isSinglePicker && !isSearchTooShort && ( // Show this switch only for multi mode and when some rows rendered
|
|
2821
|
+
React__namespace.default.createElement(Switch, { size: settings.sizes.pickerInput.body.dropdown.footer.switch[props.size], value: showSelected.value, isDisabled: !hasSelection, onValueChange: showSelected.onValueChange, label: i18n.pickerInput.showOnlySelectedLabel })),
|
|
2823
2822
|
React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
|
|
2824
2823
|
React__namespace.default.createElement(FlexCell, { width: "auto", alignSelf: "center" },
|
|
2825
2824
|
view.selectAll && !hasSelection && (React__namespace.default.createElement(LinkButton, { key: "SelectAll/ClearAll" // We use the same key for these buttons, because we need to leave focus on it after click, so we need to react doesn't remount it.
|
|
@@ -2829,13 +2828,13 @@ function DataPickerFooterImpl(props) {
|
|
|
2829
2828
|
}
|
|
2830
2829
|
const DataPickerFooter = /* @__PURE__ */React__namespace.default.memo(DataPickerFooterImpl);
|
|
2831
2830
|
|
|
2832
|
-
var css$I = {"header":"
|
|
2831
|
+
var css$I = {"header":"wMZ-WZ","title":"YlL16p","close":"xQZv6j"};
|
|
2833
2832
|
|
|
2834
2833
|
const DataPickerHeaderImpl = (props) => {
|
|
2835
2834
|
const title = props.title && typeof props.title === 'string' ? props.title.charAt(0).toUpperCase() + props.title.slice(1) : '';
|
|
2836
2835
|
return (React__namespace.default.createElement(FlexRow, { alignItems: "center", borderBottom: true, cx: css$I.header },
|
|
2837
2836
|
React__namespace.default.createElement(Text, { size: settings.sizes.pickerInput.body.mobile.header.titleSize, cx: css$I.title }, title),
|
|
2838
|
-
React__namespace.default.createElement(IconButton, { icon: ForwardRef$R, onClick: () =>
|
|
2837
|
+
React__namespace.default.createElement(IconButton, { icon: ForwardRef$R, onClick: () => props.close?.(), cx: css$I.close })));
|
|
2839
2838
|
};
|
|
2840
2839
|
const DataPickerHeader = /* @__PURE__ */React__namespace.default.memo(DataPickerHeaderImpl);
|
|
2841
2840
|
|
|
@@ -2854,7 +2853,7 @@ var SvgNotificationDoneFill = function SvgNotificationDoneFill(props, ref) {
|
|
|
2854
2853
|
};
|
|
2855
2854
|
var ForwardRef$s = /*#__PURE__*/React.forwardRef(SvgNotificationDoneFill);
|
|
2856
2855
|
|
|
2857
|
-
var css$H = {"uui-typography":"
|
|
2856
|
+
var css$H = {"uui-typography":"ABRSP8","uuiTypography":"ABRSP8","hero-header":"wRZybC","heroHeader":"wRZybC","promo-header":"asiE9V","promoHeader":"asiE9V","uui-critical":"AsmwAs","uuiCritical":"AsmwAs","uui-info":"-uBWvQ","uuiInfo":"-uBWvQ","uui-success":"_2kj7aE","uuiSuccess":"_2kj7aE","uui-warning":"bewLAK","uuiWarning":"bewLAK","uui-highlight":"IqY4-t","uuiHighlight":"IqY4-t","uui-typography-size-12":"KCX5pw","uuiTypographySize12":"KCX5pw","uui-typography-size-14":"mqV-mo","uuiTypographySize14":"mqV-mo","uui-typography-size-16":"UzBgBP","uuiTypographySize16":"UzBgBP","root":"_1G6IGo","align-widgets-top":"bIoXk-","alignWidgetsTop":"bIoXk-","align-widgets-center":"cBkJ7a","alignWidgetsCenter":"cBkJ7a","icon-container":"_8FqDvc","iconContainer":"_8FqDvc","loading-cell":"MsFp0B","loadingCell":"MsFp0B","content-wrapper":"_0qKHT-","contentWrapper":"_0qKHT-","render-item":"ZTQ4-q","renderItem":"ZTQ4-q","icon-wrapper":"JxtiW2","iconWrapper":"JxtiW2","icon-default":"llubGF","iconDefault":"llubGF","selected-mark":"_0YHkYX","selectedMark":"_0YHkYX"};
|
|
2858
2857
|
|
|
2859
2858
|
function DataPickerCell(props) {
|
|
2860
2859
|
const ref = React__namespace.useRef();
|
|
@@ -2887,11 +2886,11 @@ function DataPickerCell(props) {
|
|
|
2887
2886
|
], style: props.padding && {
|
|
2888
2887
|
'--uui-data_picker_cell-horizontal-padding': `${props.padding}px`,
|
|
2889
2888
|
} },
|
|
2890
|
-
React__namespace.createElement(DataRowAddons,
|
|
2889
|
+
React__namespace.createElement(DataRowAddons, { size: props.size, ...props, tabIndex: -1 }),
|
|
2891
2890
|
getWrappedContent()));
|
|
2892
2891
|
}
|
|
2893
2892
|
|
|
2894
|
-
var css$G = {"uui-typography":"
|
|
2893
|
+
var css$G = {"uui-typography":"_1nkYG0","uuiTypography":"_1nkYG0","hero-header":"dimCXO","heroHeader":"dimCXO","promo-header":"qyq6VH","promoHeader":"qyq6VH","uui-critical":"B8CkH4","uuiCritical":"B8CkH4","uui-info":"CoyrHT","uuiInfo":"CoyrHT","uui-success":"JPkeQW","uuiSuccess":"JPkeQW","uui-warning":"aDToIv","uuiWarning":"aDToIv","uui-highlight":"ofwnxv","uuiHighlight":"ofwnxv","uui-typography-size-12":"F8-r3S","uuiTypographySize12":"F8-r3S","uui-typography-size-14":"_3vbTHX","uuiTypographySize14":"_3vbTHX","uui-typography-size-16":"_6AdfbZ","uuiTypographySize16":"_6AdfbZ","picker-row":"vfEsYk","pickerRow":"vfEsYk"};
|
|
2895
2894
|
|
|
2896
2895
|
class DataPickerRow extends React__namespace.Component {
|
|
2897
2896
|
constructor() {
|
|
@@ -2901,20 +2900,20 @@ class DataPickerRow extends React__namespace.Component {
|
|
|
2901
2900
|
};
|
|
2902
2901
|
}
|
|
2903
2902
|
render() {
|
|
2904
|
-
return (React__namespace.createElement(uuiComponents.DataPickerRow,
|
|
2903
|
+
return (React__namespace.createElement(uuiComponents.DataPickerRow, { ...this.props, cx: [css$G.pickerRow, this.props.cx], renderContent: this.renderContent }));
|
|
2905
2904
|
}
|
|
2906
2905
|
}
|
|
2907
2906
|
|
|
2908
|
-
var css$F = {"uui-typography":"
|
|
2907
|
+
var css$F = {"uui-typography":"_9CDQzT","uuiTypography":"_9CDQzT","hero-header":"jMK-oa","heroHeader":"jMK-oa","promo-header":"hdyb-c","promoHeader":"hdyb-c","uui-critical":"rtAyKJ","uuiCritical":"rtAyKJ","uui-info":"rH6cmC","uuiInfo":"rH6cmC","uui-success":"Lz-pJ9","uuiSuccess":"Lz-pJ9","uui-warning":"YEj-aM","uuiWarning":"YEj-aM","uui-highlight":"_9p7pDl","uuiHighlight":"_9p7pDl","uui-typography-size-12":"jT2yqX","uuiTypographySize12":"jT2yqX","uui-typography-size-14":"qY5H4D","uuiTypographySize14":"qY5H4D","uui-typography-size-16":"sOWLqQ","uuiTypographySize16":"sOWLqQ","done":"s3y5zt","container":"pB1d1t"};
|
|
2909
2908
|
|
|
2910
2909
|
const PickerBodyMobileView = (props) => {
|
|
2911
2910
|
const isMobileView = uuiCore.isMobile();
|
|
2912
2911
|
const maxWidth = isMobileView ? 'auto' : props.maxWidth;
|
|
2913
2912
|
const maxHeight = isMobileView ? 'auto' : props.maxHeight;
|
|
2914
|
-
return (React__namespace.default.createElement(DropdownContainer,
|
|
2913
|
+
return (React__namespace.default.createElement(DropdownContainer, { ...props, maxWidth: maxWidth, maxHeight: maxHeight, cx: [css$F.container, props.cx], autoFocus: true },
|
|
2915
2914
|
isMobileView && React__namespace.default.createElement(DataPickerHeader, { title: props.title, close: props.onClose }),
|
|
2916
2915
|
props.children,
|
|
2917
|
-
isMobileView && React__namespace.default.createElement(LinkButton, { caption: i18n.pickerInput.doneButton, onClick: () =>
|
|
2916
|
+
isMobileView && React__namespace.default.createElement(LinkButton, { caption: i18n.pickerInput.doneButton, onClick: () => props.onClose?.(), cx: css$F.done, size: settings.sizes.pickerInput.body.mobile.footer.linkButton })));
|
|
2918
2917
|
};
|
|
2919
2918
|
|
|
2920
2919
|
var _path$r, _path2$4;
|
|
@@ -2939,20 +2938,20 @@ var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
|
|
|
2939
2938
|
};
|
|
2940
2939
|
var ForwardRef$r = /*#__PURE__*/React.forwardRef(SvgSearchWithBackground);
|
|
2941
2940
|
|
|
2942
|
-
var css$E = {"uui-typography":"
|
|
2941
|
+
var css$E = {"uui-typography":"g19Aaf","uuiTypography":"g19Aaf","hero-header":"MRSVr3","heroHeader":"MRSVr3","promo-header":"_5-cyyu","promoHeader":"_5-cyyu","uui-critical":"v3ZeyL","uuiCritical":"v3ZeyL","uui-info":"N0DO5V","uuiInfo":"N0DO5V","uui-success":"_0ISLjj","uuiSuccess":"_0ISLjj","uui-warning":"z7SJuL","uuiWarning":"z7SJuL","uui-highlight":"swu-iL","uuiHighlight":"swu-iL","uui-typography-size-12":"_22dH7X","uuiTypographySize12":"_22dH7X","uui-typography-size-14":"rnaj4I","uuiTypographySize14":"rnaj4I","uui-typography-size-16":"_8ojcMS","uuiTypographySize16":"_8ojcMS","sub-header-wrapper":"AtSLRH","subHeaderWrapper":"AtSLRH","switch":"uhMYYA","no-found-modal-container":"KO0IAv","noFoundModalContainer":"KO0IAv","no-found-modal-container-icon":"nDcD5x","noFoundModalContainerIcon":"nDcD5x","no-found-modal-container-text":"_2jZsix","noFoundModalContainerText":"_2jZsix"};
|
|
2943
2942
|
|
|
2944
2943
|
const mergeHighlightRanges = (ranges) => {
|
|
2945
2944
|
const mergedRanges = [];
|
|
2946
2945
|
ranges.forEach((range) => {
|
|
2947
2946
|
if (!mergedRanges.length) {
|
|
2948
|
-
mergedRanges.push(
|
|
2947
|
+
mergedRanges.push({ ...range, isHighlighted: true });
|
|
2949
2948
|
}
|
|
2950
2949
|
const lastRange = mergedRanges[mergedRanges.length - 1];
|
|
2951
2950
|
if (range.from >= lastRange.from && range.from <= lastRange.to && range.to > lastRange.to) {
|
|
2952
2951
|
lastRange.to = range.to;
|
|
2953
2952
|
}
|
|
2954
2953
|
if (lastRange.to < range.from) {
|
|
2955
|
-
mergedRanges.push(
|
|
2954
|
+
mergedRanges.push({ ...range, isHighlighted: true });
|
|
2956
2955
|
}
|
|
2957
2956
|
});
|
|
2958
2957
|
return mergedRanges;
|
|
@@ -2993,7 +2992,7 @@ const getHighlightRanges = (str, search) => {
|
|
|
2993
2992
|
};
|
|
2994
2993
|
const getDecoratedText = (str, ranges) => ranges.map((range, index) => {
|
|
2995
2994
|
const rangeStr = str.substring(range.from, range.to);
|
|
2996
|
-
return (React__namespace.default.createElement("span",
|
|
2995
|
+
return (React__namespace.default.createElement("span", { key: `${rangeStr}-${index}`, ...(range.isHighlighted ? { className: 'uui-highlight' } : {}) }, rangeStr));
|
|
2997
2996
|
});
|
|
2998
2997
|
const getHighlightedSearchMatches = (str, search) => {
|
|
2999
2998
|
if (!search || !str) {
|
|
@@ -3006,14 +3005,13 @@ const getHighlightedSearchMatches = (str, search) => {
|
|
|
3006
3005
|
return getDecoratedText(str, ranges);
|
|
3007
3006
|
};
|
|
3008
3007
|
|
|
3009
|
-
var css$D = {"root":"
|
|
3008
|
+
var css$D = {"root":"xn0B4y","column-gap":"tkXQjV","columnGap":"tkXQjV","multiline":"TLoOEr","text":"hhdFZN"};
|
|
3010
3009
|
|
|
3011
3010
|
function PickerItem(props) {
|
|
3012
|
-
var _a;
|
|
3013
3011
|
const { highlightSearchMatches = true, size, avatarUrl, isLoading, isDisabled, icon, cx, } = props;
|
|
3014
3012
|
const itemSize = size || settings.sizes.pickerInput.body.dropdown.row.cell.item.default;
|
|
3015
3013
|
const isMultiline = !!(props.title && props.subtitle);
|
|
3016
|
-
const { search } =
|
|
3014
|
+
const { search } = props.dataSourceState ?? {};
|
|
3017
3015
|
const title = highlightSearchMatches ? getHighlightedSearchMatches(props.title, search) : props.title;
|
|
3018
3016
|
const subtitle = highlightSearchMatches ? getHighlightedSearchMatches(props.subtitle, search) : props.subtitle;
|
|
3019
3017
|
return (React__namespace.createElement(FlexCell, { width: "auto", cx: [css$D.root, 'uui-typography', cx] },
|
|
@@ -3040,10 +3038,10 @@ function PickerModal(props) {
|
|
|
3040
3038
|
};
|
|
3041
3039
|
const renderItem = (item, rowProps, dsState) => {
|
|
3042
3040
|
const { flattenSearchResults } = view.getConfig();
|
|
3043
|
-
return (React__namespace.default.createElement(PickerItem,
|
|
3041
|
+
return (React__namespace.default.createElement(PickerItem, { title: getName(item), size: "36", dataSourceState: dsState, ...(flattenSearchResults ? { subtitle: getSubtitle(rowProps, dataSourceState) } : {}), ...rowProps }));
|
|
3044
3042
|
};
|
|
3045
3043
|
const renderRow = (rowProps) => {
|
|
3046
|
-
return props.renderRow ? (props.renderRow(rowProps, dataSourceState)) : (React__namespace.default.createElement(DataPickerRow,
|
|
3044
|
+
return props.renderRow ? (props.renderRow(rowProps, dataSourceState)) : (React__namespace.default.createElement(DataPickerRow, { ...rowProps, key: rowProps.rowKey, padding: "24", size: "36", renderItem: (item, itemProps) => renderItem(item, itemProps, dataSourceState) }));
|
|
3047
3045
|
};
|
|
3048
3046
|
const renderFooter = () => {
|
|
3049
3047
|
const hasSelection = view.getSelectedRowsCount() > 0;
|
|
@@ -3063,40 +3061,44 @@ function PickerModal(props) {
|
|
|
3063
3061
|
};
|
|
3064
3062
|
const dataRows = getRows();
|
|
3065
3063
|
const rows = dataRows.map((row) => renderRow(row));
|
|
3066
|
-
return (React__namespace.default.createElement(ModalBlocker,
|
|
3064
|
+
return (React__namespace.default.createElement(ModalBlocker, { ...props },
|
|
3067
3065
|
React__namespace.default.createElement(ModalWindow, { width: 600, height: 700 },
|
|
3068
3066
|
React__namespace.default.createElement(ModalHeader, { title: props.caption || i18n.pickerModal.headerTitle, onClose: () => props.abort() }),
|
|
3069
3067
|
React__namespace.default.createElement(FlexCell, { cx: css$E.subHeaderWrapper },
|
|
3070
3068
|
React__namespace.default.createElement(FlexRow, { vPadding: "24" },
|
|
3071
|
-
React__namespace.default.createElement(SearchInput,
|
|
3069
|
+
React__namespace.default.createElement(SearchInput, { ...dataSourceStateLens.prop('search').toProps(), onKeyDown: (e) => uuiComponents.handleDataSourceKeyboard({
|
|
3072
3070
|
value: getDataSourceState(),
|
|
3073
3071
|
onValueChange: handleDataSourceValueChange,
|
|
3074
3072
|
listView: view,
|
|
3075
3073
|
rows: dataRows,
|
|
3076
3074
|
searchPosition: 'body',
|
|
3077
|
-
}, e), autoFocus: true, placeholder: i18n.pickerModal.searchPlaceholder, rawProps: { dir: 'auto' } }))
|
|
3078
|
-
!isSingleSelect() && (React__namespace.default.createElement(Switch,
|
|
3075
|
+
}, e), autoFocus: true, placeholder: i18n.pickerModal.searchPlaceholder, rawProps: { dir: 'auto' } })),
|
|
3076
|
+
!isSingleSelect() && (React__namespace.default.createElement(Switch, { cx: css$E.switch, size: "18", ...getFooterProps().showSelected, isDisabled: view.getSelectedRowsCount() < 1, label: "Show only selected" })),
|
|
3079
3077
|
props.renderFilter && React__namespace.default.createElement(FlexCell, { grow: 2 }, props.renderFilter(dataSourceStateLens.prop('filter').toProps()))),
|
|
3080
|
-
React__namespace.default.createElement(DataPickerBody,
|
|
3078
|
+
React__namespace.default.createElement(DataPickerBody, { ...getListProps(), value: getDataSourceState(), onValueChange: handleDataSourceValueChange, search: dataSourceStateLens.prop('search').toProps(), showSearch: false, rows: rows, renderNotFound: renderNotFound, editMode: "modal" }),
|
|
3081
3079
|
React__namespace.default.createElement(ModalFooter, { padding: "24", vPadding: "24" }, props.renderFooter ? props.renderFooter(getFooterProps()) : renderFooter()))));
|
|
3082
3080
|
}
|
|
3083
3081
|
|
|
3084
|
-
var css$C = {"tooltip":"
|
|
3082
|
+
var css$C = {"tooltip":"oeiAeF"};
|
|
3085
3083
|
|
|
3086
3084
|
const PickerTogglerTag = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
3087
|
-
|
|
3088
|
-
|
|
3085
|
+
const tagProps = {
|
|
3086
|
+
...props,
|
|
3087
|
+
tabIndex: -1,
|
|
3088
|
+
size: settings.sizes.pickerInput.toggler.tag[props.size],
|
|
3089
|
+
caption: props.rowProps?.isLoading ? React__namespace.createElement(TextPlaceholder, null) : props.caption,
|
|
3090
|
+
};
|
|
3089
3091
|
if (props.isCollapsed) {
|
|
3090
3092
|
const collapsedRows = props.collapsedRows.map((row) => props.getName(row.value)).join(', ');
|
|
3091
3093
|
return (React__namespace.createElement(Tooltip, { key: "selected", content: collapsedRows, closeDelay: 150, closeOnMouseLeave: "boundary", cx: css$C.tooltip },
|
|
3092
|
-
React__namespace.createElement(Tag,
|
|
3094
|
+
React__namespace.createElement(Tag, { ref: ref, rawProps: { role: 'option' }, ...tagProps })));
|
|
3093
3095
|
}
|
|
3094
3096
|
else {
|
|
3095
|
-
return React__namespace.createElement(Tag,
|
|
3097
|
+
return React__namespace.createElement(Tag, { ref: ref, rawProps: { role: 'option' }, ...tagProps });
|
|
3096
3098
|
}
|
|
3097
3099
|
});
|
|
3098
3100
|
|
|
3099
|
-
var css$B = {"uui-typography":"
|
|
3101
|
+
var css$B = {"uui-typography":"_61h-lG","uuiTypography":"_61h-lG","hero-header":"QjuHFI","heroHeader":"QjuHFI","promo-header":"usIHqQ","promoHeader":"usIHqQ","uui-critical":"_1LrhgT","uuiCritical":"_1LrhgT","uui-info":"ZPA-7Y","uuiInfo":"ZPA-7Y","uui-success":"WDM4jS","uuiSuccess":"WDM4jS","uui-warning":"nDtAw1","uuiWarning":"nDtAw1","uui-highlight":"T6a-7R","uuiHighlight":"T6a-7R","uui-typography-size-12":"pCKbJ8","uuiTypographySize12":"pCKbJ8","uui-typography-size-14":"BpN-lv","uuiTypographySize14":"BpN-lv","uui-typography-size-16":"-Wsuxg","uuiTypographySize16":"-Wsuxg","root":"u3iEav","mode-form":"DO4phm","modeForm":"DO4phm","mode-cell":"_8I-T6N","modeCell":"_8I-T6N","mode-inline":"_0dGFxs","modeInline":"_0dGFxs"};
|
|
3100
3102
|
|
|
3101
3103
|
const defaultMode = EditMode.FORM;
|
|
3102
3104
|
function applyPickerTogglerMods(mods) {
|
|
@@ -3109,28 +3111,27 @@ function applyPickerTogglerMods(mods) {
|
|
|
3109
3111
|
}
|
|
3110
3112
|
function PickerTogglerComponent(props, ref) {
|
|
3111
3113
|
const renderItem = (itemProps) => {
|
|
3112
|
-
const itemPropsWithSize =
|
|
3114
|
+
const itemPropsWithSize = { ...itemProps, size: (props.size || settings.sizes.pickerInput.toggler.defaults.tag) };
|
|
3113
3115
|
if (!!props.renderItem) {
|
|
3114
3116
|
return props.renderItem(itemPropsWithSize);
|
|
3115
3117
|
}
|
|
3116
|
-
return (React__namespace.createElement(PickerTogglerTag,
|
|
3118
|
+
return (React__namespace.createElement(PickerTogglerTag, { ...itemPropsWithSize, getName: props.getName }));
|
|
3117
3119
|
};
|
|
3118
|
-
return (React__namespace.createElement(uuiComponents.PickerToggler,
|
|
3120
|
+
return (React__namespace.createElement(uuiComponents.PickerToggler, { ...props, ref: ref, cx: [applyPickerTogglerMods(props), props.cx], renderItem: renderItem, getName: props.getName, cancelIcon: systemIcons.clear, dropdownIcon: systemIcons.foldingArrow }));
|
|
3119
3121
|
}
|
|
3120
3122
|
const PickerToggler = /* @__PURE__ */React__namespace.forwardRef(PickerTogglerComponent);
|
|
3121
3123
|
|
|
3122
|
-
function PickerInputComponent(
|
|
3123
|
-
var { highlightSearchMatches = true } = _a, props = __rest(_a, ["highlightSearchMatches"]);
|
|
3124
|
+
function PickerInputComponent({ highlightSearchMatches = true, ...props }, ref) {
|
|
3124
3125
|
const toggleModalOpening = () => {
|
|
3125
|
-
const { renderFooter, rawProps
|
|
3126
|
+
const { renderFooter, rawProps, ...restProps } = props;
|
|
3126
3127
|
context.uuiModals
|
|
3127
|
-
.show((modalProps) => (React__namespace.default.createElement(PickerModal,
|
|
3128
|
+
.show((modalProps) => (React__namespace.default.createElement(PickerModal, { ...restProps, rawProps: rawProps?.body, ...modalProps, caption: getPlaceholder(), initialValue: props.value, renderRow: renderRow, selectionMode: props.selectionMode, valueType: props.valueType })))
|
|
3128
3129
|
.then((newSelection) => {
|
|
3129
3130
|
handleSelectionValueChange(newSelection);
|
|
3130
3131
|
})
|
|
3131
3132
|
.catch(() => { });
|
|
3132
3133
|
};
|
|
3133
|
-
const { view, context, popperModifiers, getName, getPlaceholder, handleSelectionValueChange, getTogglerProps, getRows, handleTogglerSearchChange, toggleBodyOpening, dataSourceState, getFooterProps, getPickerBodyProps, getListProps, shouldShowBody, getSearchPosition, closePickerBody, openPickerBody, handlePickerInputKeyboard, } = uuiComponents.usePickerInput(
|
|
3134
|
+
const { view, context, popperModifiers, getName, getPlaceholder, handleSelectionValueChange, getTogglerProps, getRows, handleTogglerSearchChange, toggleBodyOpening, dataSourceState, getFooterProps, getPickerBodyProps, getListProps, shouldShowBody, getSearchPosition, closePickerBody, openPickerBody, handlePickerInputKeyboard, } = uuiComponents.usePickerInput({ ...props, toggleModalOpening });
|
|
3134
3135
|
const dropdownRef = React.useRef(null);
|
|
3135
3136
|
React.useImperativeHandle(ref, () => {
|
|
3136
3137
|
if (dropdownRef.current) {
|
|
@@ -3146,12 +3147,17 @@ function PickerInputComponent(_a, ref) {
|
|
|
3146
3147
|
};
|
|
3147
3148
|
};
|
|
3148
3149
|
const renderTarget = (targetProps) => {
|
|
3149
|
-
const renderTargetFn = props.renderToggler || ((props) => React__namespace.default.createElement(PickerToggler,
|
|
3150
|
-
return (React__namespace.default.createElement(uuiCore.IEditableDebouncer, { value: targetProps.value, onValueChange: handleTogglerSearchChange, debounceDelay: props.searchDebounceDelay, render: (editableProps) => renderTargetFn(
|
|
3150
|
+
const renderTargetFn = props.renderToggler || ((props) => React__namespace.default.createElement(PickerToggler, { ...props }));
|
|
3151
|
+
return (React__namespace.default.createElement(uuiCore.IEditableDebouncer, { value: targetProps.value, onValueChange: handleTogglerSearchChange, debounceDelay: props.searchDebounceDelay, render: (editableProps) => renderTargetFn({
|
|
3152
|
+
...getTogglerMods(),
|
|
3153
|
+
...targetProps,
|
|
3154
|
+
...editableProps,
|
|
3155
|
+
onKeyDown: (e) => handlePickerInputKeyboard(rows, e, editableProps.value),
|
|
3156
|
+
}) }));
|
|
3151
3157
|
};
|
|
3152
3158
|
const renderFooter = () => {
|
|
3153
3159
|
const footerProps = getFooterProps();
|
|
3154
|
-
return props.renderFooter ? props.renderFooter(footerProps) : React__namespace.default.createElement(DataPickerFooter,
|
|
3160
|
+
return props.renderFooter ? props.renderFooter(footerProps) : React__namespace.default.createElement(DataPickerFooter, { ...footerProps, size: props.size });
|
|
3155
3161
|
};
|
|
3156
3162
|
const getRowSize = () => {
|
|
3157
3163
|
if (uuiCore.isMobile()) {
|
|
@@ -3171,32 +3177,31 @@ function PickerInputComponent(_a, ref) {
|
|
|
3171
3177
|
};
|
|
3172
3178
|
const renderRowItem = (item, rowProps, dsState) => {
|
|
3173
3179
|
const { flattenSearchResults } = view.getConfig();
|
|
3174
|
-
return (React__namespace.default.createElement(PickerItem,
|
|
3180
|
+
return (React__namespace.default.createElement(PickerItem, { title: getName(item), size: getRowSize(), dataSourceState: dsState, highlightSearchMatches: highlightSearchMatches, ...(flattenSearchResults ? { subtitle: getSubtitle(rowProps, dataSourceState) } : {}), ...rowProps }));
|
|
3175
3181
|
};
|
|
3176
3182
|
const renderRow = (rowProps, dsState) => {
|
|
3177
|
-
return props.renderRow ? (props.renderRow(rowProps, dsState)) : (React__namespace.default.createElement(DataPickerRow,
|
|
3183
|
+
return props.renderRow ? (props.renderRow(rowProps, dsState)) : (React__namespace.default.createElement(DataPickerRow, { ...rowProps, key: rowProps.rowKey, size: getRowSize(), padding: (props.editMode === 'modal' ? settings.sizes.pickerInput.body.modal.padding : settings.sizes.pickerInput.body.dropdown.padding), renderItem: (item, itemProps) => renderRowItem(item, itemProps, dsState) }));
|
|
3178
3184
|
};
|
|
3179
3185
|
const renderBody = (bodyProps, rows) => {
|
|
3180
3186
|
const renderedDataRows = rows.map((row) => renderRow(row, dataSourceState));
|
|
3181
3187
|
const bodyHeight = uuiCore.isMobile() ? document.documentElement.clientHeight : props.dropdownHeight || settings.sizes.pickerInput.body.dropdown.height;
|
|
3182
3188
|
const minBodyWidth = props.minBodyWidth || settings.sizes.pickerInput.body.dropdown.width;
|
|
3183
3189
|
return (React__namespace.default.createElement(PickerBodyMobileView, { title: props.entityName, onClose: () => toggleBodyOpening(false), cx: [props.bodyCx], onKeyDown: bodyProps.onKeyDown, width: bodyProps.togglerWidth > minBodyWidth ? bodyProps.togglerWidth : minBodyWidth, focusLock: getSearchPosition() === 'body' },
|
|
3184
|
-
React__namespace.default.createElement(DataPickerBody,
|
|
3190
|
+
React__namespace.default.createElement(DataPickerBody, { ...bodyProps, rows: renderedDataRows, maxHeight: bodyHeight, searchSize: props.size, editMode: "dropdown", selectionMode: props.selectionMode }),
|
|
3185
3191
|
renderFooter()));
|
|
3186
3192
|
};
|
|
3187
3193
|
const rows = getRows();
|
|
3188
3194
|
const renderItem = props.renderTag ? props.renderTag : null;
|
|
3189
3195
|
return (React__namespace.default.createElement(Dropdown, { renderTarget: (dropdownProps) => {
|
|
3190
3196
|
const targetProps = getTogglerProps();
|
|
3191
|
-
return renderTarget(
|
|
3192
|
-
}, renderBody: (bodyProps) => renderBody(
|
|
3197
|
+
return renderTarget({ ...dropdownProps, ...targetProps, renderItem });
|
|
3198
|
+
}, renderBody: (bodyProps) => renderBody({ ...bodyProps, ...getPickerBodyProps(rows), ...getListProps() }, rows), value: shouldShowBody(), onValueChange: !props.isDisabled && toggleBodyOpening, placement: props.dropdownPlacement, modifiers: popperModifiers, closeBodyOnTogglerHidden: !uuiCore.isMobile(), portalTarget: props.portalTarget, ref: dropdownRef }));
|
|
3193
3199
|
}
|
|
3194
3200
|
const PickerInput = /* @__PURE__ */React__namespace.default.forwardRef(PickerInputComponent);
|
|
3195
3201
|
|
|
3196
|
-
var css$A = {"row":"
|
|
3202
|
+
var css$A = {"row":"jF1NuQ"};
|
|
3197
3203
|
|
|
3198
3204
|
function PickerListItem(props) {
|
|
3199
|
-
var _a;
|
|
3200
3205
|
let label;
|
|
3201
3206
|
if (props.isLoading) {
|
|
3202
3207
|
label = React__namespace.default.createElement(TextPlaceholder, { wordsCount: 2 });
|
|
@@ -3206,31 +3211,31 @@ function PickerListItem(props) {
|
|
|
3206
3211
|
}
|
|
3207
3212
|
let component;
|
|
3208
3213
|
if (props.checkbox) {
|
|
3209
|
-
component = (React__namespace.default.createElement(Checkbox,
|
|
3214
|
+
component = (React__namespace.default.createElement(Checkbox, { ...props.checkbox, isDisabled: props.isLoading || props.checkbox.isDisabled || props.isDisabled, label: label, value: props.isChecked, onValueChange: () => props.onCheck(props) }));
|
|
3210
3215
|
}
|
|
3211
3216
|
else {
|
|
3212
3217
|
component = (React__namespace.default.createElement(RadioInput, { label: label, value: props.isSelected, isDisabled: props.isLoading || !props.isSelectable || props.isDisabled, onValueChange: () => props.onSelect(props) }));
|
|
3213
3218
|
}
|
|
3214
|
-
return (React__namespace.default.createElement("div",
|
|
3219
|
+
return (React__namespace.default.createElement("div", { role: "option", "aria-selected": props.isSelectable ? props.isSelected : undefined, "aria-busy": props.isLoading, "aria-posinset": props.index + 1, ...(props.checkbox?.isVisible && { 'aria-checked': props.isChecked }), className: css$A.row }, component));
|
|
3215
3220
|
}
|
|
3216
3221
|
|
|
3217
|
-
var css$z = {"root":"
|
|
3222
|
+
var css$z = {"root":"_6Zwmy-"};
|
|
3218
3223
|
|
|
3219
3224
|
function PickerList(props) {
|
|
3220
3225
|
const { context, view, onlySelectedView, getName, getEntityName, appendLastSelected, getSelectedIdsArray, buildRowsList, getMaxDefaultItems, dataSourceState, getModalTogglerCaption, } = uuiComponents.usePickerList(props);
|
|
3221
3226
|
const defaultRenderRow = (row) => {
|
|
3222
|
-
return React__namespace.default.createElement(PickerListItem,
|
|
3227
|
+
return React__namespace.default.createElement(PickerListItem, { getName: (item) => getName(item), ...row, key: row.rowKey });
|
|
3223
3228
|
};
|
|
3224
3229
|
const handleShowPicker = () => {
|
|
3225
3230
|
context.uuiModals
|
|
3226
|
-
.show((modalProps) => (React__namespace.default.createElement(PickerModal,
|
|
3231
|
+
.show((modalProps) => (React__namespace.default.createElement(PickerModal, { ...modalProps, ...props, caption: props.placeholder || `Please select ${getEntityName() ? getEntityName() : ''}`, initialValue: props.value, selectionMode: props.selectionMode, valueType: props.valueType })))
|
|
3227
3232
|
.then((value) => {
|
|
3228
3233
|
appendLastSelected([...getSelectedIdsArray(value)]);
|
|
3229
3234
|
props.onValueChange(value);
|
|
3230
3235
|
})
|
|
3231
3236
|
.catch(() => { });
|
|
3232
3237
|
};
|
|
3233
|
-
const defaultRenderToggler = (props) => React__namespace.default.createElement(LinkButton,
|
|
3238
|
+
const defaultRenderToggler = (props) => React__namespace.default.createElement(LinkButton, { caption: "Show all", ...props });
|
|
3234
3239
|
const viewProps = view.getListProps();
|
|
3235
3240
|
const selectedRows = onlySelectedView.getVisibleRows();
|
|
3236
3241
|
const rows = buildRowsList();
|
|
@@ -3240,7 +3245,7 @@ function PickerList(props) {
|
|
|
3240
3245
|
return (React__namespace.default.createElement("div", { className: cx__default.default('uui-picker-list', css$z.root) },
|
|
3241
3246
|
!rows.length
|
|
3242
3247
|
&& (props.noOptionsMessage || (React__namespace.default.createElement(Text, { color: "secondary", size: props.size }, "No options available"))),
|
|
3243
|
-
rows.map((row) => renderRow(
|
|
3248
|
+
rows.map((row) => renderRow({ ...row, isDisabled: props.isDisabled }, dataSourceState)),
|
|
3244
3249
|
showPicker
|
|
3245
3250
|
&& renderToggler({
|
|
3246
3251
|
onClick: handleShowPicker,
|
|
@@ -3249,19 +3254,19 @@ function PickerList(props) {
|
|
|
3249
3254
|
}, selectedRows)));
|
|
3250
3255
|
}
|
|
3251
3256
|
|
|
3252
|
-
var css$y = {"uui-typography":"
|
|
3257
|
+
var css$y = {"uui-typography":"a6JNIj","uuiTypography":"a6JNIj","hero-header":"ZZBy0i","heroHeader":"ZZBy0i","promo-header":"atAVtU","promoHeader":"atAVtU","uui-critical":"QFudLM","uuiCritical":"QFudLM","uui-info":"DlH5L8","uuiInfo":"DlH5L8","uui-success":"PYeP89","uuiSuccess":"PYeP89","uui-warning":"kTbmsf","uuiWarning":"kTbmsf","uui-highlight":"_2IK4G7","uuiHighlight":"_2IK4G7","uui-typography-size-12":"wlzL-L","uuiTypographySize12":"wlzL-L","uui-typography-size-14":"CX18dp","uuiTypographySize14":"CX18dp","uui-typography-size-16":"JPl2ua","uuiTypographySize16":"JPl2ua","root":"vKPXcO","wrapper":"w9joLA","align-widgets-top":"_7HduvY","alignWidgetsTop":"_7HduvY","align-widgets-center":"AwP4aF","alignWidgetsCenter":"AwP4aF"};
|
|
3253
3258
|
|
|
3254
3259
|
function DataTableCell(initialProps) {
|
|
3255
|
-
const props =
|
|
3260
|
+
const props = { ...initialProps };
|
|
3256
3261
|
if (props.isFirstColumn) {
|
|
3257
|
-
props.addons = React__namespace.createElement(DataRowAddons,
|
|
3262
|
+
props.addons = React__namespace.createElement(DataRowAddons, { size: props.size, ...props });
|
|
3258
3263
|
}
|
|
3259
3264
|
props.renderPlaceholder = props.renderPlaceholder
|
|
3260
3265
|
|| (() => (React__namespace.createElement(Text, { key: "t", size: settings.sizes.dataTable.body.row.cell.text[props.size] },
|
|
3261
3266
|
React__namespace.createElement(TextPlaceholder, { isNotAnimated: true }))));
|
|
3262
3267
|
props.renderUnknown = props.renderUnknown
|
|
3263
3268
|
|| (() => (React__namespace.createElement(Text, { key: "t", size: settings.sizes.dataTable.body.row.cell.text[props.size] }, "Unknown")));
|
|
3264
|
-
props.renderTooltip = (tooltipProps) => React__namespace.createElement(Tooltip,
|
|
3269
|
+
props.renderTooltip = (tooltipProps) => React__namespace.createElement(Tooltip, { color: "critical", ...tooltipProps });
|
|
3265
3270
|
const isEditable = !!props.onValueChange;
|
|
3266
3271
|
const getLeftPadding = () => {
|
|
3267
3272
|
const { rowProps: { isLoading }, columnsGap, isFirstColumn } = props;
|
|
@@ -3295,18 +3300,18 @@ function DataTableCell(initialProps) {
|
|
|
3295
3300
|
'--uui-dt-cell-padding-start': `${getLeftPadding()}px`,
|
|
3296
3301
|
'--uui-dt-cell-padding-end': `${getRightPadding()}px`,
|
|
3297
3302
|
};
|
|
3298
|
-
return React__namespace.createElement(uuiComponents.DataTableCell,
|
|
3303
|
+
return React__namespace.createElement(uuiComponents.DataTableCell, { ...props });
|
|
3299
3304
|
}
|
|
3300
3305
|
|
|
3301
|
-
var css$x = {"uui-typography":"
|
|
3306
|
+
var css$x = {"uui-typography":"mzI6wR","uuiTypography":"mzI6wR","hero-header":"yX8Lag","heroHeader":"yX8Lag","promo-header":"qPAQ-B","promoHeader":"qPAQ-B","uui-critical":"Q2ztmy","uuiCritical":"Q2ztmy","uui-info":"rC4eUf","uuiInfo":"rC4eUf","uui-success":"YRTLXR","uuiSuccess":"YRTLXR","uui-warning":"Gxgxk0","uuiWarning":"Gxgxk0","uui-highlight":"_4fsWBg","uuiHighlight":"_4fsWBg","uui-typography-size-12":"hbBzqE","uuiTypographySize12":"hbBzqE","uui-typography-size-14":"_3A9T-D","uuiTypographySize14":"_3A9T-D","uui-typography-size-16":"_9exhAl","uuiTypographySize16":"_9exhAl","root":"K3uSqu"};
|
|
3302
3307
|
|
|
3303
3308
|
// Here we define a single instance of the renderCell function to make DataTableRow#shouldComponentUpdate work.
|
|
3304
3309
|
// As we need our mods to style the cell properly, we extract them from DataTableCellProps.rowProps, which is a hack, but it's reliable enough.
|
|
3305
3310
|
const renderCell = (props) => {
|
|
3306
3311
|
const mods = props.rowProps;
|
|
3307
|
-
return React__namespace.createElement(DataTableCell,
|
|
3312
|
+
return React__namespace.createElement(DataTableCell, { ...props, key: props.key, size: mods.size, columnsGap: mods.columnsGap });
|
|
3308
3313
|
};
|
|
3309
|
-
const renderDropMarkers = (props) => React__namespace.createElement(DropMarker,
|
|
3314
|
+
const renderDropMarkers = (props) => React__namespace.createElement(DropMarker, { ...props, enableBlocker: true });
|
|
3310
3315
|
const propsMods = { renderCell, renderDropMarkers };
|
|
3311
3316
|
const DataTableRow = /* @__PURE__ */uuiCore.withMods(uuiComponents.DataTableRow, ({ borderBottom = true, size }) => {
|
|
3312
3317
|
return [
|
|
@@ -3314,7 +3319,7 @@ const DataTableRow = /* @__PURE__ */uuiCore.withMods(uuiComponents.DataTableRow,
|
|
|
3314
3319
|
];
|
|
3315
3320
|
}, () => propsMods);
|
|
3316
3321
|
|
|
3317
|
-
var css$w = {"uui-typography":"
|
|
3322
|
+
var css$w = {"uui-typography":"_4iFPr4","uuiTypography":"_4iFPr4","hero-header":"JYXhhW","heroHeader":"JYXhhW","promo-header":"KQ4Blj","promoHeader":"KQ4Blj","uui-critical":"_5n5WWd","uuiCritical":"_5n5WWd","uui-info":"y4H3NR","uuiInfo":"y4H3NR","uui-success":"ho88Nc","uuiSuccess":"ho88Nc","uui-warning":"cFeEl8","uuiWarning":"cFeEl8","uui-highlight":"yVvK0A","uuiHighlight":"yVvK0A","uui-typography-size-12":"FZ-fs2","uuiTypographySize12":"FZ-fs2","uui-typography-size-14":"N8-jZu","uuiTypographySize14":"N8-jZu","uui-typography-size-16":"sra5UV","uuiTypographySize16":"sra5UV","sorting-panel-container":"_1EABRs","sortingPanelContainer":"_1EABRs"};
|
|
3318
3323
|
|
|
3319
3324
|
var _path$q;
|
|
3320
3325
|
function _extends$q() { return _extends$q = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$q.apply(null, arguments); }
|
|
@@ -3444,7 +3449,7 @@ var SvgNavigationExpandAllOutline = function SvgNavigationExpandAllOutline(props
|
|
|
3444
3449
|
};
|
|
3445
3450
|
var ForwardRef$k = /*#__PURE__*/React.forwardRef(SvgNavigationExpandAllOutline);
|
|
3446
3451
|
|
|
3447
|
-
var css$v = {"uui-typography":"
|
|
3452
|
+
var css$v = {"uui-typography":"_21XfQY","uuiTypography":"_21XfQY","hero-header":"BRi-jX","heroHeader":"BRi-jX","promo-header":"zKmBJD","promoHeader":"zKmBJD","uui-critical":"RvVhOS","uuiCritical":"RvVhOS","uui-info":"yAPwo5","uuiInfo":"yAPwo5","uui-success":"OiLmjn","uuiSuccess":"OiLmjn","uui-warning":"_3QIjZ7","uuiWarning":"_3QIjZ7","uui-highlight":"_425xqK","uuiHighlight":"_425xqK","uui-typography-size-12":"cGQ5CJ","uuiTypographySize12":"cGQ5CJ","uui-typography-size-14":"O21yvw","uuiTypographySize14":"O21yvw","uui-typography-size-16":"NOsklh","uuiTypographySize16":"NOsklh","root":"zwUlOn","caption-wrapper":"YhIv3o","captionWrapper":"YhIv3o","sort-icon":"iem-b8","sortIcon":"iem-b8","dropdown-icon":"Fh5Euk","dropdownIcon":"Fh5Euk","infoIcon":"tMUXHs","resizable":"_8Nll-G","align-right":"v5CDlb","alignRight":"v5CDlb","align-center":"_0Zw-c8","alignCenter":"_0Zw-c8","caption":"_4cqmmN","truncate":"ppHOIR","checkbox":"UiLcKV","icon":"mYB1tY","fold-all-icon":"-HoBAF","foldAllIcon":"-HoBAF","cell-tooltip":"_8LG9NN","cellTooltip":"_8LG9NN","upper-case":"HrP98p","upperCase":"HrP98p","resizing-marker":"H4CLqN","resizingMarker":"H4CLqN","pinned-right":"Q5qWTE","pinnedRight":"Q5qWTE","draggable":"CZzUqz","ghost":"sdCpXo","is-dragged-out":"LqGzpo","isDraggedOut":"LqGzpo","dnd-marker-left":"jtLjQo","dndMarkerLeft":"jtLjQo","dnd-marker-right":"KyAQN8","dndMarkerRight":"KyAQN8","cell-tooltip-wrapper":"FGEqUV","cellTooltipWrapper":"FGEqUV","cell-tooltip-text":"YDMeQd","cellTooltipText":"YDMeQd","tooltip-caption":"jIm71m","tooltipCaption":"jIm71m","tooltip-info":"-cgNXl","tooltipInfo":"-cgNXl"};
|
|
3448
3453
|
|
|
3449
3454
|
class DataTableHeaderCell extends React__namespace.Component {
|
|
3450
3455
|
constructor() {
|
|
@@ -3472,7 +3477,7 @@ class DataTableHeaderCell extends React__namespace.Component {
|
|
|
3472
3477
|
};
|
|
3473
3478
|
this.renderHeaderCheckbox = () => {
|
|
3474
3479
|
if (this.props.selectAll && this.props.isFirstColumn) {
|
|
3475
|
-
return (React__namespace.createElement(Checkbox,
|
|
3480
|
+
return (React__namespace.createElement(Checkbox, { size: settings.sizes.dataTable.header.row.cell.checkbox[this.props.size], ...this.props.selectAll, cx: uuiCore.cx(css$v.checkbox, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCheckbox) }));
|
|
3476
3481
|
}
|
|
3477
3482
|
};
|
|
3478
3483
|
this.renderFoldAllIcon = () => {
|
|
@@ -3506,9 +3511,8 @@ class DataTableHeaderCell extends React__namespace.Component {
|
|
|
3506
3511
|
return columnsGap ? +columnsGap / 2 : settings.sizes.dataTable.header.row.cell.defaults.resizeMarker;
|
|
3507
3512
|
};
|
|
3508
3513
|
this.renderCellContent = (props, dropdownProps) => {
|
|
3509
|
-
|
|
3510
|
-
const
|
|
3511
|
-
const onClickEvent = !props.isResizing && (!this.props.column.renderFilter ? props.toggleSort : dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.onClick);
|
|
3514
|
+
const isResizable = this.props.column.allowResizing ?? this.props.allowColumnsResizing;
|
|
3515
|
+
const onClickEvent = !props.isResizing && (!this.props.column.renderFilter ? props.toggleSort : dropdownProps?.onClick);
|
|
3512
3516
|
const computeStyles = {
|
|
3513
3517
|
'--uui-dt-header-cell-icon-size': `${settings.sizes.dataTable.header.row.cell.iconSize[this.props.size || settings.sizes.dataTable.header.row.cell.defaults.size]}px`,
|
|
3514
3518
|
'--uui-dt-header-cell-padding-start': `${this.getLeftPadding()}px`,
|
|
@@ -3516,10 +3520,13 @@ class DataTableHeaderCell extends React__namespace.Component {
|
|
|
3516
3520
|
'--uui-dt-header-cell-resizing-marker-width': `${this.getResizingMarkerWidth()}px`,
|
|
3517
3521
|
};
|
|
3518
3522
|
return (React__namespace.createElement(uuiComponents.DataTableCellContainer, { column: this.props.column, ref: (ref) => {
|
|
3519
|
-
var _a;
|
|
3520
3523
|
props.ref(ref);
|
|
3521
|
-
|
|
3522
|
-
}, cx: uuiCore.cx(uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCell, (this.props.column.isSortable || this.props.isDropdown) && uuiCore.uuiMarkers.clickable, css$v.root, `uui-size-${this.props.size || settings.sizes.dataTable.header.row.cell.defaults.size}`, this.props.isFirstColumn && 'uui-dt-header-first-column', this.props.isLastColumn && 'uui-dt-header-last-column', this.props.column.fix && css$v['pinned-' + this.props.column.fix], isResizable && css$v.resizable, props.isDraggable && css$v.draggable, props.isDragGhost && css$v.ghost, props.isDraggedOut && css$v.isDraggedOut, props.isDndInProgress && css$v['dnd-marker-' + props.position]), onClick: onClickEvent, rawProps:
|
|
3524
|
+
dropdownProps?.ref?.(ref);
|
|
3525
|
+
}, cx: uuiCore.cx(uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCell, (this.props.column.isSortable || this.props.isDropdown) && uuiCore.uuiMarkers.clickable, css$v.root, `uui-size-${this.props.size || settings.sizes.dataTable.header.row.cell.defaults.size}`, this.props.isFirstColumn && 'uui-dt-header-first-column', this.props.isLastColumn && 'uui-dt-header-last-column', this.props.column.fix && css$v['pinned-' + this.props.column.fix], isResizable && css$v.resizable, props.isDraggable && css$v.draggable, props.isDragGhost && css$v.ghost, props.isDraggedOut && css$v.isDraggedOut, props.isDndInProgress && css$v['dnd-marker-' + props.position]), onClick: onClickEvent, rawProps: {
|
|
3526
|
+
role: 'columnheader',
|
|
3527
|
+
'aria-sort': this.props.sortDirection === 'asc' ? 'ascending' : this.props.sortDirection ? 'descending' : 'none',
|
|
3528
|
+
...props.eventHandlers,
|
|
3529
|
+
}, style: computeStyles },
|
|
3523
3530
|
this.renderHeaderCheckbox(),
|
|
3524
3531
|
this.renderFoldAllIcon(),
|
|
3525
3532
|
this.getColumnCaption(),
|
|
@@ -3531,7 +3538,7 @@ class DataTableHeaderCell extends React__namespace.Component {
|
|
|
3531
3538
|
if (this.props.column.renderHeaderCell) {
|
|
3532
3539
|
return this.props.column.renderHeaderCell(this.props);
|
|
3533
3540
|
}
|
|
3534
|
-
return (React__namespace.createElement(uuiComponents.DataTableHeaderCell,
|
|
3541
|
+
return (React__namespace.createElement(uuiComponents.DataTableHeaderCell, { ...this.props, renderCellContent: this.props.column.renderFilter ? this.renderCellWithFilter : this.renderCellContent }));
|
|
3535
3542
|
}
|
|
3536
3543
|
}
|
|
3537
3544
|
|
|
@@ -3550,9 +3557,9 @@ var SvgActionSettingsFill = function SvgActionSettingsFill(props, ref) {
|
|
|
3550
3557
|
};
|
|
3551
3558
|
var ForwardRef$j = /*#__PURE__*/React.forwardRef(SvgActionSettingsFill);
|
|
3552
3559
|
|
|
3553
|
-
var css$u = {"uui-typography":"
|
|
3560
|
+
var css$u = {"uui-typography":"MFsB3e","uuiTypography":"MFsB3e","hero-header":"TSC2bI","heroHeader":"TSC2bI","promo-header":"uORLhC","promoHeader":"uORLhC","uui-critical":"d-N7AT","uuiCritical":"d-N7AT","uui-info":"IzNorL","uuiInfo":"IzNorL","uui-success":"Fb-Zr1","uuiSuccess":"Fb-Zr1","uui-warning":"QJimvB","uuiWarning":"QJimvB","uui-highlight":"vxbRed","uuiHighlight":"vxbRed","uui-typography-size-12":"KRMN2u","uuiTypographySize12":"KRMN2u","uui-typography-size-14":"DPyrb-","uuiTypographySize14":"DPyrb-","uui-typography-size-16":"vIlT-c","uuiTypographySize16":"vIlT-c","root":"lfaot6"};
|
|
3554
3561
|
|
|
3555
|
-
var css$t = {"uui-typography":"
|
|
3562
|
+
var css$t = {"uui-typography":"JW01Xq","uuiTypography":"JW01Xq","hero-header":"mj0zrx","heroHeader":"mj0zrx","promo-header":"_03vzNU","promoHeader":"_03vzNU","uui-critical":"OG-ZWJ","uuiCritical":"OG-ZWJ","uui-info":"oEYqhR","uuiInfo":"oEYqhR","uui-success":"Kdt98F","uuiSuccess":"Kdt98F","uui-warning":"_7HKxLi","uuiWarning":"_7HKxLi","uui-highlight":"ZoRWZA","uuiHighlight":"ZoRWZA","uui-typography-size-12":"XYkKpa","uuiTypographySize12":"XYkKpa","uui-typography-size-14":"fdJ6JY","uuiTypographySize14":"fdJ6JY","uui-typography-size-16":"nmxA58","uuiTypographySize16":"nmxA58","root":"CNR9Zt","caption-wrapper":"_380w5T","captionWrapper":"_380w5T","align-center":"lj76LJ","alignCenter":"lj76LJ","caption":"_6IjNY3","truncate":"_0cPStP","group-cell-tooltip":"Z7SQvc","groupCellTooltip":"Z7SQvc","upper-case":"QlGSpH","upperCase":"QlGSpH","group-cell-tooltip-wrapper":"f14w42","groupCellTooltipWrapper":"f14w42","group-cell-tooltip-text":"_7gcF6-","groupCellTooltipText":"_7gcF6-","tooltip-caption":"cfvDIt","tooltipCaption":"cfvDIt","tooltip-info":"l5d9Fa","tooltipInfo":"l5d9Fa"};
|
|
3556
3563
|
|
|
3557
3564
|
class DataTableHeaderGroupCell extends React__namespace.Component {
|
|
3558
3565
|
constructor() {
|
|
@@ -3591,7 +3598,10 @@ class DataTableHeaderGroupCell extends React__namespace.Component {
|
|
|
3591
3598
|
};
|
|
3592
3599
|
return (React__namespace.createElement(uuiComponents.DataTableCellContainer, { column: this.props.group, ref: (ref) => {
|
|
3593
3600
|
props.ref(ref);
|
|
3594
|
-
}, cx: uuiCore.cx(uuiCore.uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCell, css$t.root, `uui-size-${this.props.size || settings.sizes.dataTable.header.row.groupCell.defaults.size}`, this.props.isFirstCell && 'uui-dt-header-first-column', this.props.isLastCell && 'uui-dt-header-last-column'), rawProps:
|
|
3601
|
+
}, cx: uuiCore.cx(uuiCore.uuiDataTableHeaderGroupCell.uuiTableHeaderGroupCell, css$t.root, `uui-size-${this.props.size || settings.sizes.dataTable.header.row.groupCell.defaults.size}`, this.props.isFirstCell && 'uui-dt-header-first-column', this.props.isLastCell && 'uui-dt-header-last-column'), rawProps: {
|
|
3602
|
+
role: 'columnheader',
|
|
3603
|
+
...props.eventHandlers,
|
|
3604
|
+
}, style: computeStyles }, this.getColumnCaption()));
|
|
3595
3605
|
};
|
|
3596
3606
|
}
|
|
3597
3607
|
render() {
|
|
@@ -3607,8 +3617,8 @@ class DataTableHeaderGroupCell extends React__namespace.Component {
|
|
|
3607
3617
|
}
|
|
3608
3618
|
|
|
3609
3619
|
const DataTableHeaderRow = /* @__PURE__ */uuiCore.withMods(uuiComponents.DataTableHeaderRow, () => [css$u.root, 'uui-dt-vars'], (mods) => ({
|
|
3610
|
-
renderCell: (props) => (React__namespace.createElement(DataTableHeaderCell,
|
|
3611
|
-
renderGroupCell: (props) => (React__namespace.createElement(DataTableHeaderGroupCell,
|
|
3620
|
+
renderCell: (props) => (React__namespace.createElement(DataTableHeaderCell, { ...props, size: mods.size, textCase: mods.textCase || 'normal', key: props.column.key, columnsGap: mods.columnsGap })),
|
|
3621
|
+
renderGroupCell: (props) => (React__namespace.createElement(DataTableHeaderGroupCell, { ...props, size: mods.size, textCase: mods.textCase || 'normal', key: props.key, columnsGap: mods.columnsGap })),
|
|
3612
3622
|
renderConfigButton: () => (React__namespace.createElement(IconButton, { key: "configuration", onClick: mods.onConfigButtonClick, cx: ['config-icon', `uui-size-${settings.sizes.dataTable.header.row.cell.iconSize[mods.size || settings.sizes.dataTable.header.row.default]}`], color: "neutral", icon: ForwardRef$j })),
|
|
3613
3623
|
}));
|
|
3614
3624
|
|
|
@@ -3617,16 +3627,15 @@ const UUI_FILTERS_PANEL_ADD_BUTTON_BODY = 'uui-filters-panel-add-button-body';
|
|
|
3617
3627
|
const UUI_FILTERS_PANEL_ITEM_BODY = 'uui-filters-panel-item-body';
|
|
3618
3628
|
const UUI_FILTERS_PANEL_ITEM_TOGGLER = 'uui-filters-panel-item-toggler';
|
|
3619
3629
|
|
|
3620
|
-
var css$s = {"uui-typography":"
|
|
3630
|
+
var css$s = {"uui-typography":"X6MzLT","uuiTypography":"X6MzLT","hero-header":"rcsq--","heroHeader":"rcsq--","promo-header":"-Q753K","promoHeader":"-Q753K","uui-critical":"SYsk9T","uuiCritical":"SYsk9T","uui-info":"ThFMpJ","uuiInfo":"ThFMpJ","uui-success":"GOXlfv","uuiSuccess":"GOXlfv","uui-warning":"knJDW4","uuiWarning":"knJDW4","uui-highlight":"fVYgMv","uuiHighlight":"fVYgMv","uui-typography-size-12":"Ksi-lU","uuiTypographySize12":"Ksi-lU","uui-typography-size-14":"Lfgohn","uuiTypographySize14":"Lfgohn","uui-typography-size-16":"LUr0uH","uuiTypographySize16":"LUr0uH","root":"lq2-jO","title-wrapper":"_8jrXXQ","titleWrapper":"_8jrXXQ","title":"-Xbe5H","text-wrapper":"RhaHkf","textWrapper":"RhaHkf","selection":"ZJ30bO","postfix":"CR2td5","selected":"_7U8TBU"};
|
|
3621
3631
|
|
|
3622
3632
|
const defaultSize = '36';
|
|
3623
3633
|
const FilterPanelItemToggler = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
3624
3634
|
const togglerPickerOpened = (e) => {
|
|
3625
|
-
var _a;
|
|
3626
3635
|
if (props.isDisabled)
|
|
3627
3636
|
return;
|
|
3628
3637
|
e.preventDefault();
|
|
3629
|
-
|
|
3638
|
+
props.onClick?.();
|
|
3630
3639
|
};
|
|
3631
3640
|
const onKeyDownHandler = (e) => {
|
|
3632
3641
|
if (props.isDisabled)
|
|
@@ -3644,12 +3653,12 @@ const FilterPanelItemToggler = /* @__PURE__ */React__namespace.forwardRef((props
|
|
|
3644
3653
|
const getSelectionText = () => props.selection.map((i, index) => (React__namespace.createElement(React__namespace.Fragment, { key: `${i}${index}` },
|
|
3645
3654
|
React__namespace.createElement(Text, { color: "primary", size: props.size, cx: css$s.selection }, i),
|
|
3646
3655
|
(props.postfix || index !== props.selection.length - 1) && React__namespace.createElement("span", null, ",\u00A0"))));
|
|
3647
|
-
return (React__namespace.createElement(uuiComponents.FlexRow,
|
|
3656
|
+
return (React__namespace.createElement(uuiComponents.FlexRow, { ...props, rawProps: {
|
|
3648
3657
|
style: { maxWidth: `${props.maxWidth ? props.maxWidth + 'px' : 'auto'}` },
|
|
3649
3658
|
role: 'button',
|
|
3650
3659
|
tabIndex: props.isDisabled ? -1 : 0,
|
|
3651
3660
|
onKeyDown: onKeyDownHandler,
|
|
3652
|
-
}, cx: cx__default.default(UUI_FILTERS_PANEL_ITEM_TOGGLER, css$s.root, uuiCore.uuiElement.inputBox, uuiCore.uuiMarkers.clickable, props.isOpen && uuiCore.uuiMod.opened, `size-${props.size || defaultSize}`, props.cx), onClick: togglerPickerOpened, ref: ref }
|
|
3661
|
+
}, cx: cx__default.default(UUI_FILTERS_PANEL_ITEM_TOGGLER, css$s.root, uuiCore.uuiElement.inputBox, uuiCore.uuiMarkers.clickable, props.isOpen && uuiCore.uuiMod.opened, `uui-size-${props.size || defaultSize}`, props.cx), onClick: togglerPickerOpened, ref: ref },
|
|
3653
3662
|
React__namespace.createElement(uuiComponents.FlexRow, { cx: css$s.titleWrapper },
|
|
3654
3663
|
React__namespace.createElement(Text, { size: props.size, cx: css$s.title }, getTitle),
|
|
3655
3664
|
props.selection && (React__namespace.createElement("div", { className: css$s.textWrapper },
|
|
@@ -3659,12 +3668,10 @@ const FilterPanelItemToggler = /* @__PURE__ */React__namespace.forwardRef((props
|
|
|
3659
3668
|
});
|
|
3660
3669
|
|
|
3661
3670
|
const pickerHeight = 300;
|
|
3662
|
-
function FilterPickerBody(
|
|
3663
|
-
|
|
3664
|
-
var { highlightSearchMatches = true } = _a, restProps = __rest(_a, ["highlightSearchMatches"]);
|
|
3665
|
-
const props = Object.assign(Object.assign({}, restProps), { highlightSearchMatches });
|
|
3671
|
+
function FilterPickerBody({ highlightSearchMatches = true, ...restProps }) {
|
|
3672
|
+
const props = { ...restProps, highlightSearchMatches };
|
|
3666
3673
|
const shouldShowBody = () => props.isOpen;
|
|
3667
|
-
const { view, getName, isSingleSelect, getRows, dataSourceState, getFooterProps, getPickerBodyProps, getListProps, handleDataSourceValueChange, } = uuiComponents.usePickerInput(
|
|
3674
|
+
const { view, getName, isSingleSelect, getRows, dataSourceState, getFooterProps, getPickerBodyProps, getListProps, handleDataSourceValueChange, } = uuiComponents.usePickerInput({ ...props, shouldShowBody });
|
|
3668
3675
|
const prevValue = uuiCore.usePrevious(props.value);
|
|
3669
3676
|
const prevOpened = uuiCore.usePrevious(props.isOpen);
|
|
3670
3677
|
React__namespace.useLayoutEffect(() => {
|
|
@@ -3684,45 +3691,44 @@ function FilterPickerBody(_a) {
|
|
|
3684
3691
|
};
|
|
3685
3692
|
const renderItem = (item, rowProps, dsState) => {
|
|
3686
3693
|
const { flattenSearchResults } = view.getConfig();
|
|
3687
|
-
return (React__namespace.createElement(PickerItem,
|
|
3694
|
+
return (React__namespace.createElement(PickerItem, { title: getName(item), highlightSearchMatches: highlightSearchMatches, ...(flattenSearchResults ? { subtitle: getSubtitle(rowProps, dsState) } : {}), dataSourceState: dsState, size: settings.sizes.filtersPanel.pickerInput.body.default, ...rowProps }));
|
|
3688
3695
|
};
|
|
3689
3696
|
const onSelect = (row) => {
|
|
3690
|
-
handleDataSourceValueChange((currentDataSourceState) => (
|
|
3697
|
+
handleDataSourceValueChange((currentDataSourceState) => ({ ...currentDataSourceState, search: '', selectedId: row.id }));
|
|
3691
3698
|
};
|
|
3692
3699
|
const renderRow = (rowProps, dsState) => {
|
|
3693
3700
|
if (rowProps.isSelectable && isSingleSelect() && props.editMode !== 'modal') {
|
|
3694
3701
|
rowProps.onSelect = onSelect;
|
|
3695
3702
|
}
|
|
3696
|
-
return props.renderRow ? (props.renderRow(rowProps, dataSourceState)) : (React__namespace.createElement(DataPickerRow,
|
|
3703
|
+
return props.renderRow ? (props.renderRow(rowProps, dataSourceState)) : (React__namespace.createElement(DataPickerRow, { ...rowProps, key: rowProps.rowKey, size: settings.sizes.filtersPanel.pickerInput.body.default, padding: "12", renderItem: (item, itemProps) => renderItem(item, itemProps, dsState) }));
|
|
3697
3704
|
};
|
|
3698
3705
|
const renderFooter = () => {
|
|
3699
|
-
|
|
3706
|
+
const footerProps = getFooterProps();
|
|
3707
|
+
return props.renderFooter ? props.renderFooter(footerProps) : React__namespace.createElement(DataPickerFooter, { ...footerProps, size: settings.sizes.filtersPanel.pickerInput.body.default });
|
|
3700
3708
|
};
|
|
3701
3709
|
const renderBody = (bodyProps, rows) => {
|
|
3702
3710
|
const renderedDataRows = rows.map((props) => renderRow(props, dataSourceState));
|
|
3703
3711
|
const maxHeight = uuiCore.isMobile() ? document.documentElement.clientHeight : props.maxBodyHeight || pickerHeight;
|
|
3704
3712
|
const maxWidth = uuiCore.isMobile() ? undefined : 360;
|
|
3705
3713
|
return (React__namespace.createElement(React__namespace.Fragment, null,
|
|
3706
|
-
React__namespace.createElement(DataPickerBody,
|
|
3714
|
+
React__namespace.createElement(DataPickerBody, { ...bodyProps, selectionMode: props.selectionMode, rows: renderedDataRows, maxHeight: maxHeight, maxWidth: maxWidth, searchSize: settings.sizes.filtersPanel.pickerInput.body.default, editMode: "dropdown" }),
|
|
3707
3715
|
renderFooter()));
|
|
3708
3716
|
};
|
|
3709
3717
|
const rows = getRows();
|
|
3710
|
-
return renderBody(
|
|
3718
|
+
return renderBody({ ...getPickerBodyProps(rows), ...getListProps(), showSearch: props.showSearch ?? true }, rows);
|
|
3711
3719
|
}
|
|
3712
3720
|
|
|
3713
3721
|
function FilterDatePickerBody(props) {
|
|
3714
|
-
var _a;
|
|
3715
3722
|
const { value } = props;
|
|
3716
3723
|
const context = uuiCore.useUuiContext();
|
|
3717
3724
|
const handleValueChange = (newValue) => {
|
|
3718
|
-
var _a;
|
|
3719
3725
|
props.onValueChange(newValue);
|
|
3720
3726
|
if (props.getValueChangeAnalyticsEvent) {
|
|
3721
3727
|
const event = props.getValueChangeAnalyticsEvent(newValue, value);
|
|
3722
3728
|
context.uuiAnalytics.sendEvent(event);
|
|
3723
3729
|
}
|
|
3724
3730
|
if (newValue) {
|
|
3725
|
-
|
|
3731
|
+
props.onClose?.();
|
|
3726
3732
|
}
|
|
3727
3733
|
};
|
|
3728
3734
|
const handleBodyChange = (newValue) => {
|
|
@@ -3732,7 +3738,7 @@ function FilterDatePickerBody(props) {
|
|
|
3732
3738
|
};
|
|
3733
3739
|
return (React__namespace.default.createElement(React.Fragment, null,
|
|
3734
3740
|
React__namespace.default.createElement(FlexRow, { borderBottom: true },
|
|
3735
|
-
React__namespace.default.createElement(DatePickerBody, { filter: props.filter, value: value, onValueChange: handleBodyChange, renderDay: props.renderDay, isHoliday: props.isHoliday, rawProps:
|
|
3741
|
+
React__namespace.default.createElement(DatePickerBody, { filter: props.filter, value: value, onValueChange: handleBodyChange, renderDay: props.renderDay, isHoliday: props.isHoliday, rawProps: props.rawProps?.body })),
|
|
3736
3742
|
React__namespace.default.createElement(FlexCell, { alignSelf: "stretch" },
|
|
3737
3743
|
React__namespace.default.createElement(FlexRow, { padding: "24", vPadding: "12" },
|
|
3738
3744
|
React__namespace.default.createElement(Text, null, value ? uuiDayjs.dayjs(value).format('MMM DD, YYYY') : ''),
|
|
@@ -3747,16 +3753,15 @@ function FilterRangeDatePickerBody(props) {
|
|
|
3747
3753
|
const value = _value || defaultRangeValue; // also handles null in comparison to default value
|
|
3748
3754
|
const context = uuiCore.useUuiContext();
|
|
3749
3755
|
const onOpenChange = (newIsOpen) => {
|
|
3750
|
-
var _a, _b;
|
|
3751
3756
|
{
|
|
3752
|
-
|
|
3757
|
+
props.onClose?.();
|
|
3753
3758
|
}
|
|
3754
|
-
|
|
3759
|
+
props.onOpenChange?.(newIsOpen);
|
|
3755
3760
|
};
|
|
3756
3761
|
const [inFocus, setInFocus] = React.useState('from');
|
|
3757
3762
|
const onValueChange = (newValue) => {
|
|
3758
|
-
const fromChanged =
|
|
3759
|
-
const toChanged =
|
|
3763
|
+
const fromChanged = value?.from !== newValue?.from;
|
|
3764
|
+
const toChanged = value?.to !== newValue?.to;
|
|
3760
3765
|
if (fromChanged || toChanged) {
|
|
3761
3766
|
props.onValueChange(newValue);
|
|
3762
3767
|
if (props.getValueChangeAnalyticsEvent) {
|
|
@@ -3766,8 +3771,7 @@ function FilterRangeDatePickerBody(props) {
|
|
|
3766
3771
|
}
|
|
3767
3772
|
};
|
|
3768
3773
|
const onBodyValueChange = (newValue) => {
|
|
3769
|
-
|
|
3770
|
-
setInFocus((_a = newValue.inFocus) !== null && _a !== void 0 ? _a : inFocus);
|
|
3774
|
+
setInFocus(newValue.inFocus ?? inFocus);
|
|
3771
3775
|
onValueChange(newValue.selectedDate);
|
|
3772
3776
|
const toChanged = value.to !== newValue.selectedDate.to;
|
|
3773
3777
|
const closeBody = newValue.selectedDate.from && newValue.selectedDate.to
|
|
@@ -3795,30 +3799,28 @@ function FilterRangeDatePickerBody(props) {
|
|
|
3795
3799
|
React__namespace.default.createElement(LinkButton, { isDisabled: !value.from && !value.to, caption: i18n.pickerModal.clearAllButton, onClick: () => onValueChange(defaultRangeValue) })))));
|
|
3796
3800
|
}
|
|
3797
3801
|
|
|
3798
|
-
var css$r = {"container":"
|
|
3802
|
+
var css$r = {"container":"_9CqI-K"};
|
|
3799
3803
|
|
|
3800
3804
|
function FilterNumericBody(props) {
|
|
3801
|
-
|
|
3802
|
-
const isInRangePredicate = (props === null || props === void 0 ? void 0 : props.selectedPredicate) === 'inRange' || (props === null || props === void 0 ? void 0 : props.selectedPredicate) === 'notInRange';
|
|
3805
|
+
const isInRangePredicate = props?.selectedPredicate === 'inRange' || props?.selectedPredicate === 'notInRange';
|
|
3803
3806
|
const isWrongRange = (from, to) => {
|
|
3804
3807
|
if (!to && to !== 0)
|
|
3805
3808
|
return false;
|
|
3806
3809
|
return from > to;
|
|
3807
3810
|
};
|
|
3808
3811
|
const rangeValueHandler = (type) => (val) => {
|
|
3809
|
-
var _a, _b;
|
|
3810
3812
|
const value = props.value;
|
|
3811
3813
|
switch (type) {
|
|
3812
3814
|
case 'from': {
|
|
3813
3815
|
props.onValueChange({
|
|
3814
3816
|
from: val,
|
|
3815
|
-
to:
|
|
3817
|
+
to: value?.to ?? null,
|
|
3816
3818
|
});
|
|
3817
3819
|
break;
|
|
3818
3820
|
}
|
|
3819
3821
|
case 'to': {
|
|
3820
3822
|
props.onValueChange({
|
|
3821
|
-
from:
|
|
3823
|
+
from: value?.from ?? null,
|
|
3822
3824
|
to: val,
|
|
3823
3825
|
});
|
|
3824
3826
|
break;
|
|
@@ -3849,30 +3851,30 @@ function FilterNumericBody(props) {
|
|
|
3849
3851
|
return (React__namespace.default.createElement("div", null,
|
|
3850
3852
|
React__namespace.default.createElement(FlexRow, { padding: "12", alignItems: "center", spacing: "12", borderBottom: true, cx: css$r.container },
|
|
3851
3853
|
React__namespace.default.createElement(FlexCell, { width: "100%" },
|
|
3852
|
-
React__namespace.default.createElement(NumericInput, { value:
|
|
3854
|
+
React__namespace.default.createElement(NumericInput, { value: value?.from ?? null, onValueChange: rangeValueHandler('from'), placeholder: "Min", formatOptions: { maximumFractionDigits: 2 } })),
|
|
3853
3855
|
React__namespace.default.createElement(FlexCell, { width: "100%" },
|
|
3854
|
-
React__namespace.default.createElement(NumericInput, { value:
|
|
3856
|
+
React__namespace.default.createElement(NumericInput, { value: value?.to ?? null, onValueChange: rangeValueHandler('to'), placeholder: "Max", formatOptions: { maximumFractionDigits: 2 }, isInvalid: isWrongRange(value?.from, value?.to) }))),
|
|
3855
3857
|
renderFooter()));
|
|
3856
3858
|
}
|
|
3857
3859
|
return (React__namespace.default.createElement("div", null,
|
|
3858
3860
|
React__namespace.default.createElement(FlexRow, { padding: "12", alignItems: "center", borderBottom: true, cx: css$r.container },
|
|
3859
3861
|
React__namespace.default.createElement(FlexCell, { width: 130 },
|
|
3860
|
-
React__namespace.default.createElement(NumericInput, { value: typeof props.value === 'number' ? props.value : null, onValueChange: props.onValueChange,
|
|
3862
|
+
React__namespace.default.createElement(NumericInput, { value: typeof props.value === 'number' ? props.value : null, onValueChange: props.onValueChange, placeholder: "Enter a number", formatOptions: { maximumFractionDigits: 2 } }))),
|
|
3861
3863
|
renderFooter()));
|
|
3862
3864
|
}
|
|
3863
3865
|
|
|
3864
3866
|
function FilterItemBody(props) {
|
|
3865
3867
|
switch (props.type) {
|
|
3866
3868
|
case 'singlePicker':
|
|
3867
|
-
return React__namespace.default.createElement(FilterPickerBody,
|
|
3869
|
+
return React__namespace.default.createElement(FilterPickerBody, { ...props, selectionMode: "single", valueType: "id" });
|
|
3868
3870
|
case 'numeric':
|
|
3869
|
-
return React__namespace.default.createElement(FilterNumericBody,
|
|
3871
|
+
return React__namespace.default.createElement(FilterNumericBody, { ...props });
|
|
3870
3872
|
case 'multiPicker':
|
|
3871
|
-
return React__namespace.default.createElement(FilterPickerBody,
|
|
3873
|
+
return React__namespace.default.createElement(FilterPickerBody, { ...props, selectionMode: "multi", valueType: "id" });
|
|
3872
3874
|
case 'datePicker':
|
|
3873
|
-
return React__namespace.default.createElement(FilterDatePickerBody,
|
|
3875
|
+
return React__namespace.default.createElement(FilterDatePickerBody, { ...props, format: props.format || 'DD/MM/YYYY' });
|
|
3874
3876
|
case 'rangeDatePicker':
|
|
3875
|
-
return React__namespace.default.createElement(FilterRangeDatePickerBody,
|
|
3877
|
+
return React__namespace.default.createElement(FilterRangeDatePickerBody, { ...props, format: props.format || 'DD/MM/YYYY', value: props.value || { from: null, to: null } });
|
|
3876
3878
|
case 'custom':
|
|
3877
3879
|
return props.render(props);
|
|
3878
3880
|
}
|
|
@@ -3893,7 +3895,7 @@ var SvgActionDeleteOutline = function SvgActionDeleteOutline(props, ref) {
|
|
|
3893
3895
|
};
|
|
3894
3896
|
var ForwardRef$i = /*#__PURE__*/React.forwardRef(SvgActionDeleteOutline);
|
|
3895
3897
|
|
|
3896
|
-
var css$q = {"uui-typography":"
|
|
3898
|
+
var css$q = {"uui-typography":"YW50B4","uuiTypography":"YW50B4","hero-header":"fRkN0X","heroHeader":"fRkN0X","promo-header":"uDWlk5","promoHeader":"uDWlk5","uui-critical":"dgWam0","uuiCritical":"dgWam0","uui-info":"GwnWr5","uuiInfo":"GwnWr5","uui-success":"V14vZQ","uuiSuccess":"V14vZQ","uui-warning":"_2QeDQw","uuiWarning":"_2QeDQw","uui-highlight":"_5jlXDM","uuiHighlight":"_5jlXDM","uui-typography-size-12":"Vvdr02","uuiTypographySize12":"Vvdr02","uui-typography-size-14":"UsrvAY","uuiTypographySize14":"UsrvAY","uui-typography-size-16":"aTq-mv","uuiTypographySize16":"aTq-mv","header":"J4Li8l","removeButton":"_-3WpJT","with-search":"UdYSMf","withSearch":"UdYSMf"};
|
|
3897
3899
|
|
|
3898
3900
|
function useView(props, value) {
|
|
3899
3901
|
const forceUpdate = uuiCore.useForceUpdate();
|
|
@@ -3908,11 +3910,11 @@ function useView(props, value) {
|
|
|
3908
3910
|
dataSourceState.checked = value;
|
|
3909
3911
|
}
|
|
3910
3912
|
}
|
|
3911
|
-
return useViewFn
|
|
3913
|
+
return useViewFn?.(dataSourceState, forceUpdate, { showSelectedOnly: true });
|
|
3912
3914
|
}
|
|
3913
3915
|
function FiltersToolbarItemImpl(props) {
|
|
3914
3916
|
const { maxCount = 2 } = props;
|
|
3915
|
-
const isPickersType =
|
|
3917
|
+
const isPickersType = props?.type === 'multiPicker' || props?.type === 'singlePicker';
|
|
3916
3918
|
const isMobileScreen = uuiCore.isMobile();
|
|
3917
3919
|
const popperModifiers = React.useMemo(() => {
|
|
3918
3920
|
const modifiers = [
|
|
@@ -3935,11 +3937,10 @@ function FiltersToolbarItemImpl(props) {
|
|
|
3935
3937
|
return modifiers;
|
|
3936
3938
|
}, [isPickersType]);
|
|
3937
3939
|
const getDefaultPredicate = () => {
|
|
3938
|
-
var _a, _b;
|
|
3939
3940
|
if (!props.predicates) {
|
|
3940
3941
|
return null;
|
|
3941
3942
|
}
|
|
3942
|
-
return Object.keys(props.value || {})[0] ||
|
|
3943
|
+
return Object.keys(props.value || {})[0] || props.predicates.find((i) => i.isDefault)?.predicate || props.predicates?.[0].predicate;
|
|
3943
3944
|
};
|
|
3944
3945
|
const [isOpen, isOpenChange] = React.useState(props.autoFocus);
|
|
3945
3946
|
const [predicate, setPredicate] = React.useState(getDefaultPredicate());
|
|
@@ -3981,23 +3982,19 @@ function FiltersToolbarItemImpl(props) {
|
|
|
3981
3982
|
}
|
|
3982
3983
|
setPredicate(val);
|
|
3983
3984
|
};
|
|
3984
|
-
const renderHeader = (hideTitle) => {
|
|
3985
|
-
|
|
3986
|
-
|
|
3987
|
-
props.predicates ? (React__namespace.default.createElement(MultiSwitch, { items: props.predicates.map((i) => ({ id: i.predicate, caption: i.name })), value: predicate, onValueChange: changePredicate, size: "24" })) : (!hideTitle && (React__namespace.default.createElement(Text, { color: "secondary", size: "24", fontSize: "14" }, props.title))),
|
|
3988
|
-
!(props === null || props === void 0 ? void 0 : props.isAlwaysVisible) && (React__namespace.default.createElement(LinkButton, { cx: css$q.removeButton, caption: i18n.filterToolbar.datePicker.removeCaption, onClick: removeOnclickHandler, size: "24", icon: ForwardRef$i }))));
|
|
3989
|
-
};
|
|
3985
|
+
const renderHeader = (hideTitle) => (React__namespace.default.createElement("div", { className: cx__default.default(css$q.header, isPickersType && (props.showSearch ?? css$q.withSearch)) },
|
|
3986
|
+
props.predicates ? (React__namespace.default.createElement(MultiSwitch, { items: props.predicates.map((i) => ({ id: i.predicate, caption: i.name })), value: predicate, onValueChange: changePredicate, size: "24" })) : (!hideTitle && (React__namespace.default.createElement(Text, { color: "secondary", size: "24", fontSize: "14" }, props.title))),
|
|
3987
|
+
!props?.isAlwaysVisible && (React__namespace.default.createElement(LinkButton, { cx: css$q.removeButton, caption: i18n.filterToolbar.datePicker.removeCaption, onClick: removeOnclickHandler, size: "24", icon: ForwardRef$i }))));
|
|
3990
3988
|
const renderBody = (dropdownProps) => {
|
|
3991
3989
|
const hideHeaderTitle = isPickersType && isMobileScreen;
|
|
3992
|
-
return isPickersType ? (React__namespace.default.createElement(PickerBodyMobileView,
|
|
3990
|
+
return isPickersType ? (React__namespace.default.createElement(PickerBodyMobileView, { ...dropdownProps, cx: UUI_FILTERS_PANEL_ITEM_BODY, title: props.title, width: 360, onClose: () => isOpenChange(false) },
|
|
3993
3991
|
renderHeader(hideHeaderTitle),
|
|
3994
|
-
React__namespace.default.createElement(FilterItemBody,
|
|
3992
|
+
React__namespace.default.createElement(FilterItemBody, { ...props, ...dropdownProps, selectedPredicate: predicate, value: getValue(), onValueChange: onValueChange }))) : (React__namespace.default.createElement(DropdownContainer, { cx: UUI_FILTERS_PANEL_ITEM_BODY, ...dropdownProps },
|
|
3995
3993
|
renderHeader(hideHeaderTitle),
|
|
3996
|
-
React__namespace.default.createElement(FilterItemBody,
|
|
3994
|
+
React__namespace.default.createElement(FilterItemBody, { ...props, ...dropdownProps, selectedPredicate: predicate, value: getValue(), onValueChange: onValueChange })));
|
|
3997
3995
|
};
|
|
3998
3996
|
const getValue = () => {
|
|
3999
|
-
|
|
4000
|
-
return predicate ? (_a = props.value) === null || _a === void 0 ? void 0 : _a[predicate] : props.value;
|
|
3997
|
+
return predicate ? props.value?.[predicate] : props.value;
|
|
4001
3998
|
};
|
|
4002
3999
|
const getPickerItemName = (item, config) => {
|
|
4003
4000
|
if (item.isLoading) {
|
|
@@ -4016,13 +4013,13 @@ function FiltersToolbarItemImpl(props) {
|
|
|
4016
4013
|
case 'multiPicker': {
|
|
4017
4014
|
let isLoading = false;
|
|
4018
4015
|
const selection = currentValue
|
|
4019
|
-
? currentValue
|
|
4016
|
+
? currentValue?.slice(0, maxCount).map((i) => {
|
|
4020
4017
|
const item = view.getById(i, null);
|
|
4021
|
-
isLoading = item
|
|
4018
|
+
isLoading = item?.isLoading;
|
|
4022
4019
|
return getPickerItemName(item, props);
|
|
4023
4020
|
})
|
|
4024
4021
|
: currentValue;
|
|
4025
|
-
const postfix = (!isLoading &&
|
|
4022
|
+
const postfix = (!isLoading && currentValue?.length > maxCount) ? ` +${(currentValue.length - maxCount).toString()} ${i18n.filterToolbar.pickerInput.itemsPlaceholder}` : null;
|
|
4026
4023
|
return { selection, postfix };
|
|
4027
4024
|
}
|
|
4028
4025
|
case 'numeric': {
|
|
@@ -4032,7 +4029,7 @@ function FiltersToolbarItemImpl(props) {
|
|
|
4032
4029
|
return { selection: undefined };
|
|
4033
4030
|
}
|
|
4034
4031
|
const selection = isRangePredicate
|
|
4035
|
-
? `${!
|
|
4032
|
+
? `${!currentValue?.from && currentValue?.from !== 0 ? 'Min' : decimalFormat(currentValue?.from)} - ${!currentValue?.to && currentValue?.to !== 0 ? 'Max' : decimalFormat(currentValue?.to)}`
|
|
4036
4033
|
: `${!currentValue && currentValue !== 0 ? 'ALL' : decimalFormat(currentValue)}`;
|
|
4037
4034
|
return { selection: [selection] };
|
|
4038
4035
|
}
|
|
@@ -4051,11 +4048,11 @@ function FiltersToolbarItemImpl(props) {
|
|
|
4051
4048
|
if (!currentValue || (!currentValue.from && !currentValue.to)) {
|
|
4052
4049
|
return { selection: undefined };
|
|
4053
4050
|
}
|
|
4054
|
-
const currentValueFrom =
|
|
4055
|
-
? uuiDayjs.dayjs(currentValue
|
|
4051
|
+
const currentValueFrom = currentValue?.from
|
|
4052
|
+
? uuiDayjs.dayjs(currentValue?.from).format(props.format || defaultFormat)
|
|
4056
4053
|
: i18n.filterToolbar.rangeDatePicker.emptyPlaceholderFrom;
|
|
4057
|
-
const currentValueTo =
|
|
4058
|
-
? uuiDayjs.dayjs(currentValue
|
|
4054
|
+
const currentValueTo = currentValue?.to
|
|
4055
|
+
? uuiDayjs.dayjs(currentValue?.to).format(props.format || defaultFormat)
|
|
4059
4056
|
: i18n.filterToolbar.rangeDatePicker.emptyPlaceholderTo;
|
|
4060
4057
|
const selection = `${currentValueFrom} - ${currentValueTo}`;
|
|
4061
4058
|
return { selection: [selection] };
|
|
@@ -4071,7 +4068,7 @@ function FiltersToolbarItemImpl(props) {
|
|
|
4071
4068
|
return props.togglerWidth;
|
|
4072
4069
|
return props.type === 'datePicker' || props.type === 'rangeDatePicker' ? null : 300;
|
|
4073
4070
|
};
|
|
4074
|
-
const renderTarget = (dropdownProps) => (React__namespace.default.createElement(FilterPanelItemToggler,
|
|
4071
|
+
const renderTarget = (dropdownProps) => (React__namespace.default.createElement(FilterPanelItemToggler, { ...dropdownProps, ...getTogglerValue(), title: props.title, predicateName: props.value ? predicateName : null, maxWidth: getTogglerWidth(), size: props.size }));
|
|
4075
4072
|
return (React__namespace.default.createElement(uuiComponents.Dropdown, { renderTarget: renderTarget, renderBody: renderBody, closeBodyOnTogglerHidden: !uuiCore.isMobile(), value: isOpen, onValueChange: isOpenChange, modifiers: popperModifiers }));
|
|
4076
4073
|
}
|
|
4077
4074
|
const FiltersPanelItem = /* @__PURE__ */React__namespace.default.memo(FiltersToolbarItemImpl);
|
|
@@ -4130,7 +4127,7 @@ const normalizeFilterWithPredicates = (filter) => {
|
|
|
4130
4127
|
return result;
|
|
4131
4128
|
};
|
|
4132
4129
|
function FiltersToolbarImpl(props) {
|
|
4133
|
-
const { filters, tableState, setTableState } = props;
|
|
4130
|
+
const { filters, tableState, setTableState, size = settings.sizes.defaults.filtersPanel } = props;
|
|
4134
4131
|
const [newFilterId, setNewFilterId] = React.useState(null);
|
|
4135
4132
|
const pickerInputRef = React.useRef(null);
|
|
4136
4133
|
const dataSource = uuiCore.useArrayDataSource({
|
|
@@ -4138,15 +4135,13 @@ function FiltersToolbarImpl(props) {
|
|
|
4138
4135
|
getId: (item) => item.field,
|
|
4139
4136
|
}, []);
|
|
4140
4137
|
const onFiltersChange = (updatedFilters) => {
|
|
4141
|
-
var _a, _b;
|
|
4142
4138
|
const newConfig = {};
|
|
4143
4139
|
const newFilter = {};
|
|
4144
|
-
const filtersConfig = Object.values(
|
|
4140
|
+
const filtersConfig = Object.values(tableState.filtersConfig ?? {});
|
|
4145
4141
|
const sortedOrders = uuiCore.orderBy(filtersConfig, ({ order }) => order);
|
|
4146
|
-
let lastItemOrder =
|
|
4142
|
+
let lastItemOrder = sortedOrders?.length ? sortedOrders[sortedOrders.length - 1]?.order : null;
|
|
4147
4143
|
updatedFilters.forEach((filter) => {
|
|
4148
|
-
|
|
4149
|
-
let order = (_b = (_a = tableState === null || tableState === void 0 ? void 0 : tableState.filtersConfig) === null || _a === void 0 ? void 0 : _a[filter === null || filter === void 0 ? void 0 : filter.field]) === null || _b === void 0 ? void 0 : _b.order;
|
|
4144
|
+
let order = tableState?.filtersConfig?.[filter?.field]?.order;
|
|
4150
4145
|
if (!order) {
|
|
4151
4146
|
order = uuiCore.getOrderBetween(lastItemOrder, null);
|
|
4152
4147
|
lastItemOrder = order;
|
|
@@ -4157,31 +4152,42 @@ function FiltersToolbarImpl(props) {
|
|
|
4157
4152
|
newFilter[filter.field] = tableState.filter[filter.field];
|
|
4158
4153
|
}
|
|
4159
4154
|
});
|
|
4160
|
-
setTableState(
|
|
4155
|
+
setTableState({
|
|
4156
|
+
...tableState,
|
|
4157
|
+
filtersConfig: newConfig,
|
|
4158
|
+
filter: newFilter,
|
|
4159
|
+
});
|
|
4161
4160
|
};
|
|
4162
4161
|
const handleFilterChange = (newFilter) => {
|
|
4163
|
-
const filter = normalizeFilterWithPredicates(
|
|
4164
|
-
setTableState(
|
|
4162
|
+
const filter = normalizeFilterWithPredicates({ ...tableState.filter, ...newFilter });
|
|
4163
|
+
setTableState({
|
|
4164
|
+
...tableState,
|
|
4165
|
+
filter: filter,
|
|
4166
|
+
});
|
|
4165
4167
|
};
|
|
4166
4168
|
const removeFilter = (field) => {
|
|
4167
|
-
const filterConfig =
|
|
4169
|
+
const filterConfig = { ...tableState.filtersConfig };
|
|
4168
4170
|
delete filterConfig[field];
|
|
4169
|
-
const filter =
|
|
4171
|
+
const filter = { ...tableState.filter };
|
|
4170
4172
|
delete filter[field];
|
|
4171
|
-
const newTableState =
|
|
4172
|
-
|
|
4173
|
+
const newTableState = {
|
|
4174
|
+
...tableState,
|
|
4175
|
+
filtersConfig: filterConfig,
|
|
4176
|
+
filter: filter,
|
|
4177
|
+
};
|
|
4178
|
+
setTableState({ ...newTableState });
|
|
4173
4179
|
};
|
|
4174
4180
|
const selectedFilters = React.useMemo(() => {
|
|
4175
4181
|
const filtersConfig = tableState.filtersConfig || {};
|
|
4176
4182
|
return filters.filter((filter) => {
|
|
4177
|
-
return filter.isAlwaysVisible || (filtersConfig[filter
|
|
4183
|
+
return filter.isAlwaysVisible || (filtersConfig[filter?.field] ? filtersConfig[filter?.field].isVisible : false);
|
|
4178
4184
|
});
|
|
4179
4185
|
}, [tableState.filtersConfig, filters]);
|
|
4180
4186
|
const sortedActiveFilters = React.useMemo(() => {
|
|
4181
|
-
return uuiCore.orderBy(selectedFilters, (f) =>
|
|
4187
|
+
return uuiCore.orderBy(selectedFilters, (f) => tableState.filtersConfig?.[f.field]?.order);
|
|
4182
4188
|
}, [filters, tableState.filtersConfig]);
|
|
4183
4189
|
const renderAddFilterToggler = React.useCallback((togglerProps) => {
|
|
4184
|
-
return (React__namespace.default.createElement(Button, { size:
|
|
4190
|
+
return (React__namespace.default.createElement(Button, { size: size, onClick: togglerProps.onClick, ref: togglerProps.ref, caption: i18n.filterToolbar.addCaption, icon: ForwardRef$h, iconPosition: "left", fill: "ghost", color: "primary", cx: UUI_FILTERS_PANEL_ADD_BUTTON }));
|
|
4185
4191
|
}, []);
|
|
4186
4192
|
const getRowOptions = React.useCallback((item) => ({
|
|
4187
4193
|
isDisabled: item.isAlwaysVisible,
|
|
@@ -4192,29 +4198,25 @@ function FiltersToolbarImpl(props) {
|
|
|
4192
4198
|
}), []);
|
|
4193
4199
|
const isAllFiltersAlwaysVisible = props.filters.every((i) => i.isAlwaysVisible);
|
|
4194
4200
|
React.useEffect(() => {
|
|
4195
|
-
var _a, _b;
|
|
4196
4201
|
if (sortedActiveFilters.length && newFilterId && sortedActiveFilters.find(({ field }) => field === newFilterId)) {
|
|
4197
4202
|
// PickerInput should be closed after filterId update and opening the filter's body.
|
|
4198
4203
|
// Otherwise, the focus will be not set in the search input of the filter's body.
|
|
4199
|
-
|
|
4204
|
+
pickerInputRef.current?.closePickerBody?.();
|
|
4200
4205
|
// Reset new filter id, after first render with autofocus
|
|
4201
4206
|
setNewFilterId(null);
|
|
4202
4207
|
}
|
|
4203
4208
|
}, [newFilterId, sortedActiveFilters]);
|
|
4204
4209
|
return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
|
|
4205
|
-
sortedActiveFilters.map((f) => {
|
|
4206
|
-
|
|
4207
|
-
|
|
4208
|
-
React__namespace.default.createElement(FiltersPanelItem, Object.assign({}, f, { value: (_a = tableState.filter) === null || _a === void 0 ? void 0 : _a[f.field], onValueChange: handleFilterChange, key: f.field, autoFocus: newFilterId === f.field, removeFilter: removeFilter, size: props.size }))));
|
|
4209
|
-
}),
|
|
4210
|
-
!isAllFiltersAlwaysVisible && (React__namespace.default.createElement(PickerInput, { dataSource: dataSource, value: selectedFilters, onValueChange: onFiltersChange, selectionMode: "multi", valueType: "entity", renderRow: (props) => (React__namespace.default.createElement(DataPickerRow, Object.assign({}, props, { padding: "12", key: props.key, onCheck: (row) => {
|
|
4210
|
+
sortedActiveFilters.map((f) => (React__namespace.default.createElement(uuiComponents.FlexCell, { width: "auto", key: f.field },
|
|
4211
|
+
React__namespace.default.createElement(FiltersPanelItem, { ...f, value: tableState.filter?.[f.field], onValueChange: handleFilterChange, key: f.field, autoFocus: newFilterId === f.field, removeFilter: removeFilter, size: size })))),
|
|
4212
|
+
!isAllFiltersAlwaysVisible && (React__namespace.default.createElement(PickerInput, { dataSource: dataSource, value: selectedFilters, onValueChange: onFiltersChange, selectionMode: "multi", valueType: "entity", renderRow: (props) => (React__namespace.default.createElement(DataPickerRow, { ...props, padding: "12", key: props.key, onCheck: (row) => {
|
|
4211
4213
|
props.onCheck && props.onCheck(row);
|
|
4212
4214
|
setNewFilterId(row.value.field);
|
|
4213
|
-
}, renderItem: (item, rowProps) => React__namespace.default.createElement(PickerItem,
|
|
4215
|
+
}, renderItem: (item, rowProps) => React__namespace.default.createElement(PickerItem, { ...rowProps, title: item.title }) })), getName: (i) => i.title, renderToggler: renderAddFilterToggler, emptyValue: [], getRowOptions: getRowOptions, fixedBodyPosition: true, size: size, bodyCx: UUI_FILTERS_PANEL_ADD_BUTTON_BODY, ref: pickerInputRef }))));
|
|
4214
4216
|
}
|
|
4215
4217
|
const FiltersPanel = /* @__PURE__ */React__namespace.default.memo(FiltersToolbarImpl);
|
|
4216
4218
|
|
|
4217
|
-
var css$p = {"divider":"
|
|
4219
|
+
var css$p = {"divider":"_17emL1","dropdownDeleteIcon":"Qz4p4E","presetsWrapper":"kIPjag","addPresetContainer":"QU13Tb","dropContainer":"_-6Q2lB"};
|
|
4218
4220
|
|
|
4219
4221
|
var _path$g;
|
|
4220
4222
|
function _extends$g() { return _extends$g = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$g.apply(null, arguments); }
|
|
@@ -4327,24 +4329,31 @@ var SvgContentLinkOutline = function SvgContentLinkOutline(props, ref) {
|
|
|
4327
4329
|
};
|
|
4328
4330
|
var ForwardRef$a = /*#__PURE__*/React.forwardRef(SvgContentLinkOutline);
|
|
4329
4331
|
|
|
4330
|
-
var css$o = {"delete-button":"
|
|
4332
|
+
var css$o = {"delete-button":"fBWN-v","deleteButton":"fBWN-v","tab-button":"KzG68N","tabButton":"KzG68N","targetOpen":"_90TTTS"};
|
|
4331
4333
|
|
|
4332
4334
|
function PresetActionsDropdown(props) {
|
|
4333
4335
|
const { uuiNotifications } = uuiCore.useUuiContext();
|
|
4334
|
-
const copyUrlToClipboard = React.useCallback(() =>
|
|
4335
|
-
|
|
4336
|
+
const copyUrlToClipboard = React.useCallback(async () => {
|
|
4337
|
+
await navigator.clipboard.writeText(props.getPresetLink(props.preset));
|
|
4336
4338
|
successNotificationHandler('Link copied!');
|
|
4337
|
-
}
|
|
4338
|
-
const saveInCurrent = React.useCallback((preset) =>
|
|
4339
|
-
const newPreset =
|
|
4340
|
-
|
|
4339
|
+
}, []);
|
|
4340
|
+
const saveInCurrent = React.useCallback(async (preset) => {
|
|
4341
|
+
const newPreset = {
|
|
4342
|
+
...preset,
|
|
4343
|
+
filter: props.tableState.filter,
|
|
4344
|
+
sorting: props.tableState.sorting,
|
|
4345
|
+
columnsConfig: props.tableState.columnsConfig,
|
|
4346
|
+
filtersConfig: props.tableState.filtersConfig,
|
|
4347
|
+
viewState: props.tableState.viewState,
|
|
4348
|
+
};
|
|
4349
|
+
await props.updatePreset(newPreset);
|
|
4341
4350
|
successNotificationHandler('Changes saved!');
|
|
4342
|
-
}
|
|
4351
|
+
}, [
|
|
4343
4352
|
props.tableState.filter, props.tableState.columnsConfig, props.tableState.filtersConfig,
|
|
4344
4353
|
]);
|
|
4345
4354
|
const successNotificationHandler = React.useCallback((text) => {
|
|
4346
4355
|
uuiNotifications
|
|
4347
|
-
.show((props) => (React__namespace.default.createElement(SuccessNotification,
|
|
4356
|
+
.show((props) => (React__namespace.default.createElement(SuccessNotification, { ...props },
|
|
4348
4357
|
React__namespace.default.createElement(Text, { size: "36", fontSize: "14" }, text))), { duration: 3 })
|
|
4349
4358
|
.catch(() => null);
|
|
4350
4359
|
}, []);
|
|
@@ -4357,16 +4366,16 @@ function PresetActionsDropdown(props) {
|
|
|
4357
4366
|
const duplicateHandler = React.useCallback(() => {
|
|
4358
4367
|
props.duplicatePreset(props.preset);
|
|
4359
4368
|
}, [props.preset]);
|
|
4360
|
-
const deleteHandler = React.useCallback(() =>
|
|
4361
|
-
|
|
4362
|
-
}
|
|
4369
|
+
const deleteHandler = React.useCallback(async () => {
|
|
4370
|
+
await props.deletePreset(props.preset);
|
|
4371
|
+
}, [
|
|
4363
4372
|
props.activePresetId, props.deletePreset, props.preset,
|
|
4364
4373
|
]);
|
|
4365
4374
|
const renderBody = (dropdownProps) => {
|
|
4366
4375
|
const isReadonlyPreset = props.preset.isReadonly;
|
|
4367
4376
|
const isPresetChanged = props.activePresetId === props.preset.id && props.hasPresetChanged(props.preset);
|
|
4368
4377
|
const isRenameAvailable = props.preset.id === props.activePresetId && !isReadonlyPreset;
|
|
4369
|
-
return (React__namespace.default.createElement(DropdownMenuBody,
|
|
4378
|
+
return (React__namespace.default.createElement(DropdownMenuBody, { ...dropdownProps },
|
|
4370
4379
|
isPresetChanged && (React__namespace.default.createElement(React__namespace.default.Fragment, null,
|
|
4371
4380
|
!isReadonlyPreset && (React__namespace.default.createElement(DropdownMenuButton, { key: `${props.preset.id}-save-in-current`, icon: ForwardRef$f, caption: "Save in current", onClick: () => { dropdownProps.onClose(); saveInCurrentHandler(); } })),
|
|
4372
4381
|
React__namespace.default.createElement(DropdownMenuButton, { key: `${props.preset.id}-save-as-new`, icon: ForwardRef$e, caption: "Save as new",
|
|
@@ -4382,12 +4391,12 @@ function PresetActionsDropdown(props) {
|
|
|
4382
4391
|
React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$i, caption: "Delete", cx: css$o.deleteButton, onClick: deleteHandler })))));
|
|
4383
4392
|
};
|
|
4384
4393
|
const renderTarget = React.useCallback((dropdownProps) => {
|
|
4385
|
-
return (React__namespace.default.createElement(IconButton,
|
|
4394
|
+
return (React__namespace.default.createElement(IconButton, { cx: [css$o.tabButton, dropdownProps.isOpen && css$o.targetOpen], color: props.preset.id === props.activePresetId ? 'primary' : 'neutral', ...dropdownProps, icon: ForwardRef$g, size: "18" }));
|
|
4386
4395
|
}, []);
|
|
4387
4396
|
return (React__namespace.default.createElement(Dropdown, { renderBody: renderBody, renderTarget: renderTarget, placement: "bottom-end", modifiers: [{ name: 'offset', options: { offset: [0, 22] } }] }));
|
|
4388
4397
|
}
|
|
4389
4398
|
|
|
4390
|
-
var css$n = {"preset-input-cell":"
|
|
4399
|
+
var css$n = {"preset-input-cell":"u-T7JY","presetInputCell":"u-T7JY","preset-input":"fheg1F","presetInput":"fheg1F"};
|
|
4391
4400
|
|
|
4392
4401
|
const UUI_PRESETS_PANEL_ADD_BUTTON = 'uui-presets-panel-add-button';
|
|
4393
4402
|
const UUI_PRESETS_PANEL_MORE_BUTTON = 'uui-presets-panel-more-button';
|
|
@@ -4395,21 +4404,20 @@ const UUI_PRESETS_PANEL_INPUT = 'uui-presets-panel-input';
|
|
|
4395
4404
|
const UUI_PRESETS_PANEL_PRESET = 'uui-presets-panel-preset';
|
|
4396
4405
|
|
|
4397
4406
|
function PresetInput(props) {
|
|
4398
|
-
|
|
4399
|
-
const [presetCaption, setPresetCaption] = React.useState(((_a = props.preset) === null || _a === void 0 ? void 0 : _a.name) || '');
|
|
4407
|
+
const [presetCaption, setPresetCaption] = React.useState(props.preset?.name || '');
|
|
4400
4408
|
const [readonly, setReadonly] = React.useState(false);
|
|
4401
4409
|
const cancelActionHandler = React.useCallback(() => {
|
|
4402
4410
|
setPresetCaption('');
|
|
4403
4411
|
props.onCancel();
|
|
4404
4412
|
}, [props.onCancel]);
|
|
4405
|
-
const acceptActionHandler = React.useCallback(() =>
|
|
4413
|
+
const acceptActionHandler = React.useCallback(async () => {
|
|
4406
4414
|
setReadonly(() => true);
|
|
4407
4415
|
if (presetCaption) {
|
|
4408
|
-
|
|
4416
|
+
await props.onSuccess(presetCaption);
|
|
4409
4417
|
}
|
|
4410
4418
|
props.onCancel();
|
|
4411
4419
|
setReadonly(() => false);
|
|
4412
|
-
}
|
|
4420
|
+
}, [presetCaption]);
|
|
4413
4421
|
const newPresetOnBlurHandler = React.useCallback(() => {
|
|
4414
4422
|
if (presetCaption.length) {
|
|
4415
4423
|
return;
|
|
@@ -4420,7 +4428,7 @@ function PresetInput(props) {
|
|
|
4420
4428
|
React__namespace.default.createElement(TextInput, { cx: css$n.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50, isReadonly: readonly })));
|
|
4421
4429
|
}
|
|
4422
4430
|
|
|
4423
|
-
var css$m = {"preset":"
|
|
4431
|
+
var css$m = {"preset":"aPdvJ3","activePreset":"rCT0O9"};
|
|
4424
4432
|
|
|
4425
4433
|
function Preset(props) {
|
|
4426
4434
|
const [isRenamePreset, setIsRenamePreset] = React.useState(false);
|
|
@@ -4434,11 +4442,14 @@ function Preset(props) {
|
|
|
4434
4442
|
}
|
|
4435
4443
|
}, []);
|
|
4436
4444
|
const handlePresetRename = React.useCallback((name) => {
|
|
4437
|
-
const newPreset =
|
|
4445
|
+
const newPreset = {
|
|
4446
|
+
...props.preset,
|
|
4447
|
+
name: name,
|
|
4448
|
+
};
|
|
4438
4449
|
return props.updatePreset(newPreset);
|
|
4439
4450
|
}, [props.preset]);
|
|
4440
4451
|
const isPresetActive = props.activePresetId === props.preset.id;
|
|
4441
|
-
const PresetActionsDropdownComponent = React.useCallback(() => React__namespace.default.createElement(PresetActionsDropdown,
|
|
4452
|
+
const PresetActionsDropdownComponent = React.useCallback(() => React__namespace.default.createElement(PresetActionsDropdown, { renamePreset: setPresetForRename, ...props }), [props.preset, props.tableState, props.activePresetId]);
|
|
4442
4453
|
return (React__namespace.default.createElement(FlexCell, { key: props.preset.id, alignSelf: "center", width: "auto" }, isRenamePreset ? (React__namespace.default.createElement(PresetInput, { onCancel: cancelRenamePreset, onSuccess: handlePresetRename, preset: props.preset })) : (React__namespace.default.createElement(TabButton, { caption: props.preset.name, onClick: !isPresetActive && choosePresetHandler, cx: [css$m.preset, isPresetActive && css$m.activePreset, UUI_PRESETS_PANEL_PRESET], size: "60", withNotify: isPresetActive && props.hasPresetChanged(props.preset), icon: PresetActionsDropdownComponent, iconPosition: "right", isLinkActive: isPresetActive }))));
|
|
4443
4454
|
}
|
|
4444
4455
|
|
|
@@ -4467,12 +4478,12 @@ function PresetsPanel(props) {
|
|
|
4467
4478
|
const cancelAddingPreset = React.useCallback(() => {
|
|
4468
4479
|
setIsAddingPreset(false);
|
|
4469
4480
|
}, []);
|
|
4470
|
-
const presetApi =
|
|
4481
|
+
const { presets, ...presetApi } = props;
|
|
4471
4482
|
const renderPreset = (preset) => {
|
|
4472
|
-
return React__namespace.default.createElement(Preset,
|
|
4483
|
+
return React__namespace.default.createElement(Preset, { key: preset.id, preset: preset, addPreset: setAddingPreset, ...presetApi });
|
|
4473
4484
|
};
|
|
4474
4485
|
const renderAddPresetButton = React.useCallback(() => {
|
|
4475
|
-
return (React__namespace.default.createElement("div", { key: "addingPresetBlock", className: css$p.addPresetContainer }, !isAddingPreset ? (React__namespace.default.createElement(Button, { cx: UUI_PRESETS_PANEL_ADD_BUTTON,
|
|
4486
|
+
return (React__namespace.default.createElement("div", { key: "addingPresetBlock", className: css$p.addPresetContainer }, !isAddingPreset ? (React__namespace.default.createElement(Button, { cx: UUI_PRESETS_PANEL_ADD_BUTTON, onClick: setAddingPreset, caption: i18n.presetPanel.addCaption, icon: ForwardRef$h, iconPosition: "left", fill: "ghost", color: "primary" })) : (React__namespace.default.createElement(PresetInput, { onCancel: cancelAddingPreset, onSuccess: props.createNewPreset }))));
|
|
4476
4487
|
}, [isAddingPreset]);
|
|
4477
4488
|
const onPresetDropdownSelect = (preset) => {
|
|
4478
4489
|
props.choosePreset(preset.preset);
|
|
@@ -4480,8 +4491,8 @@ function PresetsPanel(props) {
|
|
|
4480
4491
|
const renderMoreButtonDropdown = (item, hiddenItems) => {
|
|
4481
4492
|
return (React__namespace.default.createElement(Dropdown, { key: "more", renderTarget: (props) => (React__namespace.default.createElement(FlexRow, null,
|
|
4482
4493
|
React__namespace.default.createElement("div", { className: css$p.divider }),
|
|
4483
|
-
React__namespace.default.createElement(Button,
|
|
4484
|
-
React__namespace.default.createElement(
|
|
4494
|
+
React__namespace.default.createElement(Button, { cx: UUI_PRESETS_PANEL_MORE_BUTTON, fill: "ghost", color: "secondary", caption: `${hiddenItems?.length || ''} more`, ...props }))), renderBody: (propsBody) => (React__namespace.default.createElement(DropdownMenuBody, { minWidth: 230, maxHeight: 300, ...propsBody },
|
|
4495
|
+
React__namespace.default.createElement(ScrollBars, null, hiddenItems.map((hiddenItem) => (React__namespace.default.createElement(DropdownMenuButton, { key: hiddenItem.preset.id, onClick: () => onPresetDropdownSelect(hiddenItem), caption: hiddenItem.preset.name, icon: !hiddenItem.preset.isReadonly && ForwardRef$9, iconPosition: "right", cx: css$p.dropdownDeleteIcon, onIconClick: !hiddenItem.preset.isReadonly && (() => props.deletePreset(hiddenItem.preset)) })))))) }));
|
|
4485
4496
|
};
|
|
4486
4497
|
const getPresetPriority = (preset, index) => {
|
|
4487
4498
|
return preset.id === props.activePresetId ? 100499 : 1000 - index;
|
|
@@ -4516,18 +4527,21 @@ const defaultPredicates = {
|
|
|
4516
4527
|
|
|
4517
4528
|
const useColumnsWithFilters = (initialColumns, filters) => {
|
|
4518
4529
|
const makeFilterRenderCallback = React.useCallback((key) => function (filterLens, dropdownProps) {
|
|
4519
|
-
const filter = filters
|
|
4530
|
+
const filter = filters?.find((f) => f.columnKey === key);
|
|
4520
4531
|
if (!filter)
|
|
4521
4532
|
return null;
|
|
4522
4533
|
const props = filterLens.prop(filter.field).toProps();
|
|
4523
|
-
return React__namespace.default.createElement(FilterItemBody,
|
|
4534
|
+
return React__namespace.default.createElement(FilterItemBody, { ...props, ...filter, ...dropdownProps });
|
|
4524
4535
|
}, [filters]);
|
|
4525
4536
|
const columns = React.useMemo(() => {
|
|
4526
4537
|
if (filters) {
|
|
4527
4538
|
const filterKeys = filters.map((f) => f.columnKey);
|
|
4528
4539
|
const newColumns = (initialColumns.map((column) => {
|
|
4529
4540
|
if (filterKeys.includes(column.key)) {
|
|
4530
|
-
return
|
|
4541
|
+
return {
|
|
4542
|
+
...column,
|
|
4543
|
+
renderFilter: makeFilterRenderCallback(column.key),
|
|
4544
|
+
};
|
|
4531
4545
|
}
|
|
4532
4546
|
else {
|
|
4533
4547
|
return column;
|
|
@@ -4595,7 +4609,7 @@ var SvgTableGroupColumnRightFill = function SvgTableGroupColumnRightFill(props,
|
|
|
4595
4609
|
};
|
|
4596
4610
|
var ForwardRef$6 = /*#__PURE__*/React.forwardRef(SvgTableGroupColumnRightFill);
|
|
4597
4611
|
|
|
4598
|
-
var css$l = {"unpin-icon":"
|
|
4612
|
+
var css$l = {"unpin-icon":"NkzQUH","unpinIcon":"NkzQUH","pin-toggler-icon":"GAjuj2","pinTogglerIcon":"GAjuj2"};
|
|
4599
4613
|
|
|
4600
4614
|
function PinIconButton(props) {
|
|
4601
4615
|
const i18nLocal = i18n.tables.columnsConfigurationModal;
|
|
@@ -4654,7 +4668,7 @@ var SvgActionDragIndicator18 = function SvgActionDragIndicator18(props, ref) {
|
|
|
4654
4668
|
};
|
|
4655
4669
|
var ForwardRef$5 = /*#__PURE__*/React.forwardRef(SvgActionDragIndicator18);
|
|
4656
4670
|
|
|
4657
|
-
var css$k = {"uui-typography":"
|
|
4671
|
+
var css$k = {"uui-typography":"_32ixSS","uuiTypography":"_32ixSS","hero-header":"xdaUfA","heroHeader":"xdaUfA","promo-header":"WbqvVY","promoHeader":"WbqvVY","uui-critical":"Rym68P","uuiCritical":"Rym68P","uui-info":"r8xp12","uuiInfo":"r8xp12","uui-success":"nIhJwz","uuiSuccess":"nIhJwz","uui-warning":"QcW9FF","uuiWarning":"QcW9FF","uui-highlight":"_5OG25r","uuiHighlight":"_5OG25r","uui-typography-size-12":"sl-tXn","uuiTypographySize12":"sl-tXn","uui-typography-size-14":"SR3bzs","uuiTypographySize14":"SR3bzs","uui-typography-size-16":"p5UNBo","uuiTypographySize16":"p5UNBo","row-wrapper":"ZFnZ6M","rowWrapper":"ZFnZ6M","pin-icon-button":"_8VfQR0","pinIconButton":"_8VfQR0","not-pinned":"gr49Qr","notPinned":"gr49Qr","checkbox":"mVthc-","drag-handle":"_9U5uls","dragHandle":"_9U5uls","dnd-disabled":"EQiIt8","dndDisabled":"EQiIt8"};
|
|
4658
4672
|
|
|
4659
4673
|
const ColumnRow = /* @__PURE__ */React__namespace.memo(function ColumnRow(props) {
|
|
4660
4674
|
const { column } = props;
|
|
@@ -4665,19 +4679,19 @@ const ColumnRow = /* @__PURE__ */React__namespace.memo(function ColumnRow(props)
|
|
|
4665
4679
|
const data = { column, columnConfig };
|
|
4666
4680
|
const renderContent = (dndActorParams) => {
|
|
4667
4681
|
const wrapperClasses = uuiCore.cx(css$k.rowWrapper, !isPinned && css$k.notPinned, dndActorParams.isDragGhost && uuiCore.uuiDndState.dragGhost, 'uui-dt-columns-config-row');
|
|
4668
|
-
const
|
|
4669
|
-
const dndActorPropsWithoutRef =
|
|
4670
|
-
return (React__namespace.createElement(FlexRow, { size: settings.sizes.dataTable.columnsConfigurationModal.columnRow, cx: wrapperClasses, ref: dndActorParams.ref, rawProps:
|
|
4682
|
+
const { onTouchStart, onPointerDown, ...restEventHandlers } = dndActorParams.eventHandlers;
|
|
4683
|
+
const { ref, ...dndActorPropsWithoutRef } = dndActorParams;
|
|
4684
|
+
return (React__namespace.createElement(FlexRow, { size: settings.sizes.dataTable.columnsConfigurationModal.columnRow, cx: wrapperClasses, ref: dndActorParams.ref, rawProps: { ...restEventHandlers }, alignItems: "top" },
|
|
4671
4685
|
React__namespace.createElement(uuiComponents.DragHandle, { dragHandleIcon: ForwardRef$5, rawProps: { onTouchStart, onPointerDown }, isDisabled: !isDndAllowed, cx: uuiCore.cx(css$k.dragHandle, !isDndAllowed && css$k.dndDisabled) }),
|
|
4672
4686
|
React__namespace.createElement(Checkbox, { key: column.key, label: props.renderItem ? props.renderItem(props.column) : column.caption, value: isVisible, onValueChange: toggleVisibility, isReadonly: column.isAlwaysVisible || column.isLocked, cx: css$k.checkbox }),
|
|
4673
4687
|
React__namespace.createElement(FlexRow, { size: null, cx: css$k.pinIconButton },
|
|
4674
4688
|
React__namespace.createElement(PinIconButton, { pinPosition: pinPosition, canUnpin: !isPinnedAlways, onTogglePin: togglePin })),
|
|
4675
|
-
React__namespace.createElement(DropMarker,
|
|
4689
|
+
React__namespace.createElement(DropMarker, { ...dndActorPropsWithoutRef })));
|
|
4676
4690
|
};
|
|
4677
4691
|
return (React__namespace.createElement(uuiCore.DndActor, { key: column.key, srcData: isDndAllowed && data, dstData: data, canAcceptDrop: onCanAcceptDrop, onDrop: onDrop, render: renderContent }));
|
|
4678
4692
|
});
|
|
4679
4693
|
|
|
4680
|
-
var css$j = {"uui-typography":"
|
|
4694
|
+
var css$j = {"uui-typography":"MurWgC","uuiTypography":"MurWgC","hero-header":"gCcOHV","heroHeader":"gCcOHV","promo-header":"SgAxmi","promoHeader":"SgAxmi","uui-critical":"hymC2b","uuiCritical":"hymC2b","uui-info":"_02h1-C","uuiInfo":"_02h1-C","uui-success":"lZ8LD0","uuiSuccess":"lZ8LD0","uui-warning":"tUQxBR","uuiWarning":"tUQxBR","uui-highlight":"NYeV1h","uuiHighlight":"NYeV1h","uui-typography-size-12":"jmN8YS","uuiTypographySize12":"jmN8YS","uui-typography-size-14":"i-Fcsb","uuiTypographySize14":"i-Fcsb","uui-typography-size-16":"TIDdKp","uuiTypographySize16":"TIDdKp","root":"E-umN6","main-panel":"BEzv1w","mainPanel":"BEzv1w","group":"w3NF06","group-title":"UL3kDV","groupTitle":"UL3kDV","group-items":"RNJJj7","groupItems":"RNJJj7","no-data":"_1FbXS4","noData":"_1FbXS4","no-data-title":"ihe0TZ","noDataTitle":"ihe0TZ","no-data-sub-title":"tYJeDr","noDataSubTitle":"tYJeDr","h-divider":"GSmfBV","hDivider":"GSmfBV","search-area":"tRLyKt","searchArea":"tRLyKt","subgroup-accordion":"IiZoVx","subgroupAccordion":"IiZoVx","subgroup":"uyTtR4","subgroup-title":"HIuIhz","subgroupTitle":"HIuIhz"};
|
|
4681
4695
|
|
|
4682
4696
|
const renderGroupTitle = (title, amount) => (React__namespace.createElement(FlexRow, { cx: css$j.group },
|
|
4683
4697
|
React__namespace.createElement(Text, { size: "none", cx: css$j.groupTitle }, title),
|
|
@@ -4685,7 +4699,7 @@ const renderGroupTitle = (title, amount) => (React__namespace.createElement(Flex
|
|
|
4685
4699
|
React__namespace.createElement(uuiComponents.FlexSpacer, null)));
|
|
4686
4700
|
function ColumnsConfigurationModal(props) {
|
|
4687
4701
|
const i18n$1 = i18n.tables.columnsConfigurationModal;
|
|
4688
|
-
const { columns, columnsConfig: initialColumnsConfig, defaultConfig
|
|
4702
|
+
const { columns, columnsConfig: initialColumnsConfig, defaultConfig, ...modalProps } = props;
|
|
4689
4703
|
const { groupedColumns, searchValue, columnsConfig, reset, checkAll, uncheckAll, setSearchValue, hasAnySelectedColumns, } = uuiComponents.useColumnsConfiguration({
|
|
4690
4704
|
initialColumnsConfig,
|
|
4691
4705
|
columns,
|
|
@@ -4725,14 +4739,14 @@ function ColumnsConfigurationModal(props) {
|
|
|
4725
4739
|
React__namespace.createElement(SubGroup, { renderItem: props.renderItem, items: items })));
|
|
4726
4740
|
};
|
|
4727
4741
|
const applyButton = React__namespace.createElement(Button, { caption: i18n$1.applyButton, isDisabled: !hasAnySelectedColumns, color: "primary", onClick: apply });
|
|
4728
|
-
return (React__namespace.createElement(ModalBlocker,
|
|
4742
|
+
return (React__namespace.createElement(ModalBlocker, { ...modalProps },
|
|
4729
4743
|
React__namespace.createElement(ModalWindow, { cx: css$j.root, height: "95dvh", maxHeight: "95dvh", width: settings.sizes.dataTable.columnsConfigurationModal.width },
|
|
4730
4744
|
React__namespace.createElement(ModalHeader, { title: i18n$1.configureColumnsTitle, onClose: close }),
|
|
4731
4745
|
React__namespace.createElement(FlexRow, { borderBottom: true, cx: css$j.searchArea },
|
|
4732
4746
|
React__namespace.createElement(SearchInput, { size: settings.sizes.dataTable.columnsConfigurationModal.search, value: searchValue, onValueChange: setSearchValue, placeholder: i18n$1.searchPlaceholder }),
|
|
4733
4747
|
React__namespace.createElement(Dropdown, { closeOnTargetClick: true, renderBody: () => (React__namespace.createElement(DropdownMenuBody, { minWidth: 100 },
|
|
4734
4748
|
React__namespace.createElement(DropdownMenuButton, { caption: i18n$1.clearAllButton, onClick: uncheckAll }),
|
|
4735
|
-
React__namespace.createElement(DropdownMenuButton, { caption: i18n$1.selectAllButton, onClick: checkAll }))), renderTarget: (props) => (React__namespace.createElement(Button,
|
|
4749
|
+
React__namespace.createElement(DropdownMenuButton, { caption: i18n$1.selectAllButton, onClick: checkAll }))), renderTarget: (props) => (React__namespace.createElement(Button, { ...props, fill: "none", icon: ForwardRef$g, size: settings.sizes.dataTable.columnsConfigurationModal.search, color: "secondary", isDropdown: false })) })),
|
|
4736
4750
|
React__namespace.createElement(Panel, { background: "surface-main", cx: css$j.mainPanel },
|
|
4737
4751
|
React__namespace.createElement(ScrollBars, null,
|
|
4738
4752
|
renderVisible(),
|
|
@@ -4766,7 +4780,7 @@ function SubGroup(props) {
|
|
|
4766
4780
|
return null;
|
|
4767
4781
|
}
|
|
4768
4782
|
|
|
4769
|
-
var css$i = {"listContainer":"
|
|
4783
|
+
var css$i = {"listContainer":"WOkFve","header":"mvAB0v","group":"xI-P5S","stickyHeader":"xproOD"};
|
|
4770
4784
|
|
|
4771
4785
|
const getChildrenAndRest = (row, rows) => {
|
|
4772
4786
|
const firstNotChildIndex = rows.findIndex((other) => other.depth < row.depth || (row.depth === other.depth && other.isPinned));
|
|
@@ -4782,9 +4796,8 @@ const getChildrenAndRest = (row, rows) => {
|
|
|
4782
4796
|
};
|
|
4783
4797
|
|
|
4784
4798
|
function DataRowsGroup({ row, childRows, renderRow, top = 1, }) {
|
|
4785
|
-
var _a, _b;
|
|
4786
4799
|
const rowRef = React.useRef();
|
|
4787
|
-
const childrenPinnedTop = row.isPinned ? (top + (
|
|
4800
|
+
const childrenPinnedTop = row.isPinned ? (top + (rowRef.current?.clientHeight ?? 0)) : top;
|
|
4788
4801
|
return (React__namespace.default.createElement("div", { className: css$i.group, key: row.rowKey },
|
|
4789
4802
|
React__namespace.default.createElement("div", { className: row.isPinned ? css$i.stickyHeader : css$i.header,
|
|
4790
4803
|
// Gaps between pinned parents should be removed by -1 from top height.
|
|
@@ -4815,10 +4828,9 @@ function DataRowsGroups({ rows, renderRow, top = 1, }) {
|
|
|
4815
4828
|
}
|
|
4816
4829
|
|
|
4817
4830
|
function DataRowsContainer({ estimatedHeight, listContainerRef, offsetY, rows, renderRow, headerRef, }) {
|
|
4818
|
-
var _a;
|
|
4819
4831
|
return (React__namespace.default.createElement("div", { className: css$i.listContainer, style: { minHeight: `${estimatedHeight}px` } },
|
|
4820
4832
|
React__namespace.default.createElement("div", { ref: listContainerRef, role: "rowgroup", style: { marginTop: offsetY } },
|
|
4821
|
-
React__namespace.default.createElement(DataRowsGroups, { rows: rows, renderRow: renderRow, top:
|
|
4833
|
+
React__namespace.default.createElement(DataRowsGroups, { rows: rows, renderRow: renderRow, top: headerRef?.current?.clientHeight }))));
|
|
4822
4834
|
}
|
|
4823
4835
|
|
|
4824
4836
|
var _path$4, _path2, _path3, _path4, _path5, _path6, _g, _path7, _path8, _path9, _path10, _path11, _path12, _path13, _path14, _path15, _path16, _path17, _path18, _path19, _path20, _path21, _path22, _path23, _path24, _defs;
|
|
@@ -4832,7 +4844,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
|
|
|
4832
4844
|
xmlns: "http://www.w3.org/2000/svg",
|
|
4833
4845
|
ref: ref
|
|
4834
4846
|
}, props), /*#__PURE__*/React__namespace.createElement("g", {
|
|
4835
|
-
clipPath: "url(#
|
|
4847
|
+
clipPath: "url(#p2wmcu4bb72ds99dv_a)"
|
|
4836
4848
|
}, _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
4837
4849
|
d: "M150.585 1.535C49.483-11.495 27.481 61.805 45.725 97.481c10.581 20.69-39.64 70.792 17.744 81.468 27.538 5.123 36-13.341 62.433-10.655 35.4 3.6 148.167-4.73 88.349-78.915-31.713-39.335 1.026-79.506-63.666-87.844Z",
|
|
4838
4850
|
fill: "#F5F6FA"
|
|
@@ -4853,7 +4865,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
|
|
|
4853
4865
|
d: "M86.786 22.982c-2.55 0-4.965 2.07-4.965 4.552V120.6c0 2.484 2.4 4.572 4.965 4.572h88.101c2.582 0 4.986-2.089 4.986-4.572V27.534c0-2.464-2.418-4.552-4.986-4.552h-88.1Zm-5.793 4.552c0-3.022 2.874-5.38 5.793-5.38h88.101c2.935 0 5.814 2.374 5.814 5.38V120.6c0 3.021-2.86 5.4-5.814 5.4h-88.1c-2.94 0-5.794-2.381-5.794-5.4V27.534Z",
|
|
4854
4866
|
fill: "#1D1E26"
|
|
4855
4867
|
})), /*#__PURE__*/React__namespace.createElement("mask", {
|
|
4856
|
-
id: "
|
|
4868
|
+
id: "p2wmcurj6l4bp9djh_b",
|
|
4857
4869
|
style: {
|
|
4858
4870
|
maskType: "alpha"
|
|
4859
4871
|
},
|
|
@@ -4866,7 +4878,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
|
|
|
4866
4878
|
d: "M174.887 125.586h-88.1c-2.752 0-5.38-2.234-5.38-4.986V27.534c0-2.752 2.644-4.966 5.38-4.966h88.1c2.752 0 5.4 2.23 5.4 4.966V120.6c0 2.752-2.632 4.986-5.4 4.986Z",
|
|
4867
4879
|
fill: "#9BDEFF"
|
|
4868
4880
|
}))), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
|
|
4869
|
-
mask: "url(#
|
|
4881
|
+
mask: "url(#p2wmcurj6l4bp9djh_b)",
|
|
4870
4882
|
fillRule: "evenodd",
|
|
4871
4883
|
clipRule: "evenodd"
|
|
4872
4884
|
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -4952,7 +4964,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
|
|
|
4952
4964
|
d: "M24.73 96.184a.414.414 0 0 1 .581.06l48.646 59.751a.413.413 0 1 1-.642.523L24.67 96.766a.414.414 0 0 1 .06-.582Z",
|
|
4953
4965
|
fill: "#fff"
|
|
4954
4966
|
}))), _defs || (_defs = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
|
|
4955
|
-
id: "
|
|
4967
|
+
id: "p2wmcu4bb72ds99dv_a"
|
|
4956
4968
|
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
4957
4969
|
fill: "#fff",
|
|
4958
4970
|
transform: "translate(.552)",
|
|
@@ -4961,46 +4973,44 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
|
|
|
4961
4973
|
};
|
|
4962
4974
|
var ForwardRef$4 = /*#__PURE__*/React.forwardRef(SvgEmptyTable);
|
|
4963
4975
|
|
|
4964
|
-
var css$h = {"root":"
|
|
4976
|
+
var css$h = {"root":"fxV7Ca","sticky-header":"a1hkPt","stickyHeader":"a1hkPt","no-results":"_3U-Fuc","noResults":"_3U-Fuc","icon":"iy02DZ","title":"XN-V7s"};
|
|
4965
4977
|
|
|
4966
4978
|
function DataTable(props) {
|
|
4967
|
-
var _a, _b, _c, _d;
|
|
4968
4979
|
const { uuiModals } = uuiCore.useUuiContext();
|
|
4969
4980
|
const headerRef = React__namespace.useRef();
|
|
4970
4981
|
const columnsWithFilters = useColumnsWithFilters(props.columns, props.filters);
|
|
4971
|
-
const { columns, config, defaultConfig } = uuiCore.useColumnsConfig(columnsWithFilters,
|
|
4982
|
+
const { columns, config, defaultConfig } = uuiCore.useColumnsConfig(columnsWithFilters, props.value?.columnsConfig);
|
|
4972
4983
|
const defaultRenderRow = React__namespace.useCallback((rowProps) => {
|
|
4973
|
-
return (React__namespace.createElement(DataTableRow,
|
|
4984
|
+
return (React__namespace.createElement(DataTableRow, { size: props.size || settings.sizes.dataTable.body.row.default, columnsGap: props.columnsGap, borderBottom: props.border, ...rowProps, key: rowProps.rowKey, cx: css$h.cell }));
|
|
4974
4985
|
}, []);
|
|
4975
|
-
const renderRow = (row) =>
|
|
4976
|
-
const rows =
|
|
4986
|
+
const renderRow = (row) => (props.renderRow ?? defaultRenderRow)({ ...row, columns });
|
|
4987
|
+
const rows = props.getRows?.() ?? props.rows ?? [];
|
|
4977
4988
|
const renderNoResultsBlock = React__namespace.useCallback(() => {
|
|
4978
|
-
|
|
4979
|
-
return (React__namespace.createElement("div", { className: css$h.noResults }, props.renderNoResultsBlock ? ((_a = props.renderNoResultsBlock) === null || _a === void 0 ? void 0 : _a.call(props)) : (React__namespace.createElement(React__namespace.Fragment, null,
|
|
4989
|
+
return (React__namespace.createElement("div", { className: css$h.noResults }, props.renderNoResultsBlock ? (props.renderNoResultsBlock?.()) : (React__namespace.createElement(React__namespace.Fragment, null,
|
|
4980
4990
|
React__namespace.createElement(uuiComponents.IconContainer, { cx: css$h.icon, icon: ForwardRef$4 }),
|
|
4981
4991
|
React__namespace.createElement(Text, { cx: css$h.title, fontSize: "24", lineHeight: "30", color: "primary", fontWeight: "600" }, i18n.tables.noResultsBlock.title),
|
|
4982
4992
|
React__namespace.createElement(Text, { fontSize: "16", lineHeight: "24", color: "primary" }, i18n.tables.noResultsBlock.message)))));
|
|
4983
4993
|
}, [props.renderNoResultsBlock]);
|
|
4984
4994
|
const onConfigurationButtonClick = React__namespace.useCallback(() => {
|
|
4985
|
-
const configProps = { columns: props.columns, columnsConfig:
|
|
4995
|
+
const configProps = { columns: props.columns, columnsConfig: { ...config }, defaultConfig };
|
|
4986
4996
|
uuiModals
|
|
4987
4997
|
.show((modalProps) => {
|
|
4988
4998
|
return (props.renderColumnsConfigurationModal
|
|
4989
|
-
? props.renderColumnsConfigurationModal(
|
|
4990
|
-
: (React__namespace.createElement(ColumnsConfigurationModal,
|
|
4999
|
+
? props.renderColumnsConfigurationModal({ ...configProps, ...modalProps })
|
|
5000
|
+
: (React__namespace.createElement(ColumnsConfigurationModal, { ...modalProps, columns: props.columns, columnsConfig: config, defaultConfig: defaultConfig })));
|
|
4991
5001
|
})
|
|
4992
|
-
.then((columnsConfig) => props.onValueChange(
|
|
5002
|
+
.then((columnsConfig) => props.onValueChange({ ...props.value, columnsConfig }))
|
|
4993
5003
|
.catch(() => null);
|
|
4994
5004
|
}, [
|
|
4995
5005
|
props.columns, config, defaultConfig, props.value, props.onValueChange, props.renderColumnsConfigurationModal,
|
|
4996
5006
|
]);
|
|
4997
5007
|
const renderRowsContainer = React__namespace.useCallback(({ listContainerRef, estimatedHeight, offsetY, scrollShadows }) => (React__namespace.createElement(React__namespace.Fragment, null,
|
|
4998
5008
|
React__namespace.createElement("div", { className: css$h.stickyHeader, ref: headerRef },
|
|
4999
|
-
React__namespace.createElement(DataTableHeaderRow, { columns: columns, columnGroups: props.columnGroups, onConfigButtonClick: props.showColumnsConfig && onConfigurationButtonClick, selectAll: props.selectAll, size: props.headerSize || settings.sizes.dataTable.header.row.default, textCase: props.headerTextCase, allowColumnsReordering: props.allowColumnsReordering, allowColumnsResizing: props.allowColumnsResizing, showFoldAll: props.showFoldAll, value:
|
|
5009
|
+
React__namespace.createElement(DataTableHeaderRow, { columns: columns, columnGroups: props.columnGroups, onConfigButtonClick: props.showColumnsConfig && onConfigurationButtonClick, selectAll: props.selectAll, size: props.headerSize || settings.sizes.dataTable.header.row.default, textCase: props.headerTextCase, allowColumnsReordering: props.allowColumnsReordering, allowColumnsResizing: props.allowColumnsResizing, showFoldAll: props.showFoldAll, value: { ...props.value, columnsConfig: config }, onValueChange: props.onValueChange, columnsGap: props.columnsGap }),
|
|
5000
5010
|
React__namespace.createElement("div", { className: uuiCore.cx(uuiCore.uuiScrollShadows.top, {
|
|
5001
5011
|
[uuiCore.uuiScrollShadows.topVisible]: scrollShadows.verticalTop,
|
|
5002
5012
|
}) })),
|
|
5003
|
-
props.exactRowsCount !== 0 ? (React__namespace.createElement(DataRowsContainer, { headerRef: headerRef, listContainerRef: listContainerRef, estimatedHeight: estimatedHeight, offsetY: offsetY, scrollShadows: scrollShadows, renderRow: renderRow, rows: rows })) : (renderNoResultsBlock
|
|
5013
|
+
props.exactRowsCount !== 0 ? (React__namespace.createElement(DataRowsContainer, { headerRef: headerRef, listContainerRef: listContainerRef, estimatedHeight: estimatedHeight, offsetY: offsetY, scrollShadows: scrollShadows, renderRow: renderRow, rows: rows })) : (renderNoResultsBlock?.()))), [
|
|
5004
5014
|
props, columns, rows, renderNoResultsBlock, onConfigurationButtonClick,
|
|
5005
5015
|
]);
|
|
5006
5016
|
return (React__namespace.createElement(uuiComponents.DataTableSelectionProvider, { onCopy: props.onCopy, rows: rows, columns: columns },
|
|
@@ -5012,9 +5022,9 @@ function DataTable(props) {
|
|
|
5012
5022
|
} }))));
|
|
5013
5023
|
}
|
|
5014
5024
|
|
|
5015
|
-
var css$g = {"root":"
|
|
5025
|
+
var css$g = {"root":"_71r7Vw"};
|
|
5016
5026
|
|
|
5017
|
-
var css$f = {"root":"
|
|
5027
|
+
var css$f = {"root":"_9px-LU","burger-content":"_2exS6-","burgerContent":"_2exS6-"};
|
|
5018
5028
|
|
|
5019
5029
|
var _path$3;
|
|
5020
5030
|
function _extends$3() { return _extends$3 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$3.apply(null, arguments); }
|
|
@@ -5057,7 +5067,7 @@ var SvgNavigationArrowDownOutline = function SvgNavigationArrowDownOutline(props
|
|
|
5057
5067
|
};
|
|
5058
5068
|
var ForwardRef$2 = /*#__PURE__*/React.forwardRef(SvgNavigationArrowDownOutline);
|
|
5059
5069
|
|
|
5060
|
-
var css$e = {"uui-typography":"
|
|
5070
|
+
var css$e = {"uui-typography":"nmuj54","uuiTypography":"nmuj54","hero-header":"cS4g33","heroHeader":"cS4g33","promo-header":"UPjpLS","promoHeader":"UPjpLS","uui-critical":"oeDuSl","uuiCritical":"oeDuSl","uui-info":"a-g-Zg","uuiInfo":"a-g-Zg","uui-success":"GumRKQ","uuiSuccess":"GumRKQ","uui-warning":"SGK4h-","uuiWarning":"SGK4h-","uui-highlight":"MtkQYM","uuiHighlight":"MtkQYM","uui-typography-size-12":"_-3yaGh","uuiTypographySize12":"_-3yaGh","uui-typography-size-14":"gMJvM-","uuiTypographySize14":"gMJvM-","uui-typography-size-16":"b-fSgW","uuiTypographySize16":"b-fSgW","root":"xxU-SL","button-primary":"XKK6nU","buttonPrimary":"XKK6nU","button-secondary":"K7d13b","buttonSecondary":"K7d13b","hasIcon":"YjB09J","dropdown":"h6AffX"};
|
|
5061
5071
|
|
|
5062
5072
|
const BurgerButton = /* @__PURE__ */uuiCore.withMods(uuiComponents.Button, (props) => [
|
|
5063
5073
|
css$e.root,
|
|
@@ -5068,13 +5078,13 @@ const BurgerButton = /* @__PURE__ */uuiCore.withMods(uuiComponents.Button, (prop
|
|
|
5068
5078
|
props.icon && css$e.hasIcon,
|
|
5069
5079
|
], () => ({ dropdownIcon: ForwardRef$2, dropdownIconPosition: 'left', role: 'menuitem' }));
|
|
5070
5080
|
|
|
5071
|
-
var css$d = {"search-input":"
|
|
5081
|
+
var css$d = {"search-input":"B03jsb","searchInput":"B03jsb"};
|
|
5072
5082
|
|
|
5073
5083
|
function BurgerSearch(props) {
|
|
5074
5084
|
return (React__namespace.createElement(uuiComponents.TextInput, { cx: cx__default.default(css$d.searchInput, 'uui-main_menu-burger-search'), iconPosition: "left", icon: ForwardRef$O, placeholder: props.placeholder, value: props.value, onValueChange: props.onValueChange, onCancel: props.onCancel, cancelIcon: props.value && ForwardRef$R }));
|
|
5075
5085
|
}
|
|
5076
5086
|
|
|
5077
|
-
var css$c = {"root":"
|
|
5087
|
+
var css$c = {"root":"X-Obxd","group-header":"io9R7u","groupHeader":"io9R7u","group-name":"Sidt0s","groupName":"Sidt0s","line":"NY2vj5"};
|
|
5078
5088
|
|
|
5079
5089
|
function BurgerGroupHeader(props) {
|
|
5080
5090
|
return (React__namespace.createElement("div", { className: cx__default.default(css$c.root, css$c.groupHeader, 'uui-burger-group-header') },
|
|
@@ -5082,15 +5092,21 @@ function BurgerGroupHeader(props) {
|
|
|
5082
5092
|
React__namespace.createElement("span", { className: css$c.groupName }, props.caption)));
|
|
5083
5093
|
}
|
|
5084
5094
|
|
|
5085
|
-
var css$b = {"uui-typography":"
|
|
5095
|
+
var css$b = {"uui-typography":"pX80mn","uuiTypography":"pX80mn","hero-header":"KwGVz9","heroHeader":"KwGVz9","promo-header":"d3B-Zl","promoHeader":"d3B-Zl","uui-critical":"wTazlB","uuiCritical":"wTazlB","uui-info":"Gp6-PP","uuiInfo":"Gp6-PP","uui-success":"DsJSna","uuiSuccess":"DsJSna","uui-warning":"sQzarJ","uuiWarning":"sQzarJ","uui-highlight":"_0Olot5","uuiHighlight":"_0Olot5","uui-typography-size-12":"cC35hB","uuiTypographySize12":"cC35hB","uui-typography-size-14":"MEVcFB","uuiTypographySize14":"MEVcFB","uui-typography-size-16":"oBa-cm","uuiTypographySize16":"oBa-cm","root":"_9iJWU-","type-primary":"NTDtXn","typePrimary":"NTDtXn","type-secondary":"j3jc9U","typeSecondary":"j3jc9U"};
|
|
5086
5096
|
|
|
5087
5097
|
const MainMenuButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
5088
|
-
const { type
|
|
5089
|
-
return (React__namespace.createElement(uuiComponents.Clickable,
|
|
5098
|
+
const { type, ...clickableProps } = props;
|
|
5099
|
+
return (React__namespace.createElement(uuiComponents.Clickable, { ...clickableProps, rawProps: {
|
|
5100
|
+
'aria-expanded': props.isOpen,
|
|
5101
|
+
'aria-current': props.isLinkActive
|
|
5102
|
+
? 'page'
|
|
5103
|
+
: undefined,
|
|
5104
|
+
...props.rawProps,
|
|
5105
|
+
}, cx: [
|
|
5090
5106
|
css$b.root,
|
|
5091
5107
|
css$b['type-' + (type || 'primary')],
|
|
5092
5108
|
props.cx,
|
|
5093
|
-
], ref: ref }
|
|
5109
|
+
], ref: ref },
|
|
5094
5110
|
props.icon && props.iconPosition !== 'right' && (React__namespace.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: props.onIconClick })),
|
|
5095
5111
|
props.caption && (React__namespace.createElement("div", { className: uuiCore.uuiElement.caption }, props.caption)),
|
|
5096
5112
|
props.count !== undefined && props.count !== null && (React__namespace.createElement(CountIndicator, { caption: props.count, color: "neutral", size: "18" })),
|
|
@@ -5098,11 +5114,11 @@ const MainMenuButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) =
|
|
|
5098
5114
|
props.isDropdown && (React__namespace.createElement(uuiComponents.IconContainer, { icon: ForwardRef$Q, flipY: props.isOpen }))));
|
|
5099
5115
|
});
|
|
5100
5116
|
|
|
5101
|
-
var css$a = {"dropdown-body":"
|
|
5117
|
+
var css$a = {"dropdown-body":"NBSS22","dropdownBody":"NBSS22"};
|
|
5102
5118
|
|
|
5103
5119
|
class MainMenuDropdown extends React__namespace.Component {
|
|
5104
5120
|
render() {
|
|
5105
|
-
return (React__namespace.createElement(uuiComponents.Dropdown, { renderTarget: (props) => (React__namespace.createElement(MainMenuButton,
|
|
5121
|
+
return (React__namespace.createElement(uuiComponents.Dropdown, { renderTarget: (props) => (React__namespace.createElement(MainMenuButton, { caption: this.props.caption, ...props, rawProps: this.props.rawProps, isLinkActive: this.props.isLinkActive, isDropdown: true })), renderBody: (props) => {
|
|
5106
5122
|
const handleEscape = (e) => {
|
|
5107
5123
|
if (e.key === 'Escape' && props.isOpen) {
|
|
5108
5124
|
props.onClose();
|
|
@@ -5110,16 +5126,19 @@ class MainMenuDropdown extends React__namespace.Component {
|
|
|
5110
5126
|
};
|
|
5111
5127
|
return (React__namespace.createElement(FocusLock__default.default, { returnFocus: true, persistentFocus: true, lockProps: { onKeyDown: handleEscape } },
|
|
5112
5128
|
React__namespace.createElement("div", { className: cx__default.default(css$a.dropdownBody, 'uui-main_menu-dropdown') }, this.props.renderBody
|
|
5113
|
-
? this.props.renderBody(
|
|
5129
|
+
? this.props.renderBody({ ...props })
|
|
5114
5130
|
: React__namespace.Children.map(this.props.children, (item) => {
|
|
5115
5131
|
if (!item)
|
|
5116
5132
|
return item;
|
|
5117
|
-
return React__namespace.createElement(item.type,
|
|
5133
|
+
return React__namespace.createElement(item.type, {
|
|
5134
|
+
...item.props,
|
|
5135
|
+
onClick: item.props.onClick
|
|
5118
5136
|
? () => {
|
|
5119
5137
|
item.props.onClick();
|
|
5120
5138
|
props.onClose();
|
|
5121
5139
|
}
|
|
5122
|
-
: null
|
|
5140
|
+
: null,
|
|
5141
|
+
});
|
|
5123
5142
|
}))));
|
|
5124
5143
|
}, placement: "bottom-start" }));
|
|
5125
5144
|
}
|
|
@@ -5153,69 +5172,66 @@ var SvgNavigationGlobalMenuOutlineOutline = function SvgNavigationGlobalMenuOutl
|
|
|
5153
5172
|
};
|
|
5154
5173
|
var ForwardRef$1 = /*#__PURE__*/React.forwardRef(SvgNavigationGlobalMenuOutlineOutline);
|
|
5155
5174
|
|
|
5156
|
-
var css$9 = {"global-menu-btn":"
|
|
5175
|
+
var css$9 = {"global-menu-btn":"s2Kk-c","globalMenuBtn":"s2Kk-c","global-menu-icon":"d3ZLeB","globalMenuIcon":"d3ZLeB"};
|
|
5157
5176
|
|
|
5158
|
-
const GlobalMenu = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("button",
|
|
5177
|
+
const GlobalMenu = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("button", { ref: ref, id: "global_menu_toggle", className: cx__default.default(css$9.globalMenuBtn, props.cx), ...props.rawProps },
|
|
5159
5178
|
React__namespace.createElement(uuiComponents.IconContainer, { size: 36, icon: ForwardRef$1, cx: css$9.globalMenuIcon }))));
|
|
5160
5179
|
|
|
5161
|
-
var css$8 = {"container":"
|
|
5180
|
+
var css$8 = {"container":"Fo2XIf","open":"Jl6kPH","folding-arrow":"_0yKUTS","foldingArrow":"_0yKUTS"};
|
|
5162
5181
|
|
|
5163
|
-
const MainMenuAvatar = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("button", { ref: ref, className: cx__default.default(css$8.container, props.isDropdown && css$8.dropdown, props.isOpen && css$8.open, props.onClick && uuiCore.uuiMarkers.clickable, props.cx), onClick: props.onClick },
|
|
5182
|
+
const MainMenuAvatar = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("button", { ref: ref, className: cx__default.default(css$8.container, props.isDropdown && css$8.dropdown, props.isOpen && css$8.open, props.onClick && uuiCore.uuiMarkers.clickable, props.cx), onClick: props.onClick, ...props.rawProps },
|
|
5164
5183
|
React__namespace.createElement(uuiComponents.Avatar, { size: "36", img: props.avatarUrl }),
|
|
5165
5184
|
props.icon && React__namespace.createElement(uuiComponents.IconContainer, { icon: props.icon }),
|
|
5166
5185
|
props.isDropdown && (React__namespace.createElement("div", null,
|
|
5167
5186
|
React__namespace.createElement(uuiComponents.IconContainer, { size: 18, icon: ForwardRef$Q, flipY: props.isOpen, cx: css$8.foldingArrow }))))));
|
|
5168
5187
|
|
|
5169
|
-
var css$7 = {"search-input":"
|
|
5188
|
+
var css$7 = {"search-input":"qGIkEO","searchInput":"qGIkEO"};
|
|
5170
5189
|
|
|
5171
|
-
const MainMenuSearch = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement(uuiCore.IEditableDebouncer,
|
|
5172
|
-
var _a;
|
|
5173
|
-
return (React__namespace.createElement(uuiComponents.TextInput, Object.assign({ iconPosition: "left", icon: ForwardRef$O, cancelIcon: ((_a = props.value) === null || _a === void 0 ? void 0 : _a.length) > 0 && ForwardRef$R }, props, iEditable, { ref: ref, cx: uuiCore.cx(css$7.searchInput, props.cx) }, props.rawProps)));
|
|
5174
|
-
} }))));
|
|
5190
|
+
const MainMenuSearch = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement(uuiCore.IEditableDebouncer, { ...props, render: (iEditable) => (React__namespace.createElement(uuiComponents.TextInput, { iconPosition: "left", icon: ForwardRef$O, cancelIcon: props.value?.length > 0 && ForwardRef$R, ...props, ...iEditable, ref: ref, cx: uuiCore.cx(css$7.searchInput, props.cx), ...props.rawProps })) })));
|
|
5175
5191
|
|
|
5176
|
-
var css$6 = {"container":"
|
|
5192
|
+
var css$6 = {"container":"u3ZJx9"};
|
|
5177
5193
|
|
|
5178
|
-
const MainMenuIcon = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement(IconButton,
|
|
5194
|
+
const MainMenuIcon = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement(IconButton, { ref: ref, icon: props.icon, cx: uuiCore.cx(props.cx, css$6.container), ...props })));
|
|
5179
5195
|
|
|
5180
|
-
var css$5 = {"root":"
|
|
5196
|
+
var css$5 = {"root":"Tp56UK"};
|
|
5181
5197
|
|
|
5182
5198
|
const Anchor = /* @__PURE__ */uuiCore.withMods(uuiComponents.Anchor, () => [css$5.root]);
|
|
5183
5199
|
|
|
5184
5200
|
function Form(props) {
|
|
5185
5201
|
const context = uuiCore.useUuiContext();
|
|
5186
5202
|
const beforeLeave = React__namespace.useCallback(() => {
|
|
5187
|
-
return context.uuiModals.show((modalProps) => React__namespace.createElement(ConfirmationModal,
|
|
5203
|
+
return context.uuiModals.show((modalProps) => React__namespace.createElement(ConfirmationModal, { caption: i18n.form.modals.beforeLeaveMessage, ...modalProps }));
|
|
5188
5204
|
}, [context.uuiModals]);
|
|
5189
5205
|
const loadUnsavedChanges = () => {
|
|
5190
5206
|
return context.uuiNotifications
|
|
5191
|
-
.show((props) => (React__namespace.createElement(WarningNotification,
|
|
5207
|
+
.show((props) => (React__namespace.createElement(WarningNotification, { ...props, actions: [
|
|
5192
5208
|
{
|
|
5193
5209
|
name: i18n.form.notifications.actionButtonCaption,
|
|
5194
5210
|
action: props.onSuccess,
|
|
5195
5211
|
},
|
|
5196
|
-
] }
|
|
5212
|
+
] },
|
|
5197
5213
|
React__namespace.createElement(RichTextView, null,
|
|
5198
|
-
React__namespace.createElement(Text,
|
|
5214
|
+
React__namespace.createElement(Text, null, i18n.form.notifications.unsavedChangesMessage)))), { duration: 5, position: 'bot-left' });
|
|
5199
5215
|
};
|
|
5200
|
-
return React__namespace.createElement(uuiCore.Form,
|
|
5216
|
+
return React__namespace.createElement(uuiCore.Form, { loadUnsavedChanges: loadUnsavedChanges, beforeLeave: beforeLeave, ...props });
|
|
5201
5217
|
}
|
|
5202
5218
|
|
|
5203
5219
|
function useForm(props) {
|
|
5204
5220
|
const context = uuiCore.useUuiContext();
|
|
5205
5221
|
const beforeLeave = React.useCallback(() => {
|
|
5206
|
-
return context.uuiModals.show((modalProps) => React__namespace.default.createElement(ConfirmationModal,
|
|
5222
|
+
return context.uuiModals.show((modalProps) => React__namespace.default.createElement(ConfirmationModal, { caption: i18n.form.modals.beforeLeaveMessage, ...modalProps }));
|
|
5207
5223
|
}, [context.uuiModals]);
|
|
5208
5224
|
const loadUnsavedChanges = () => {
|
|
5209
|
-
return context.uuiNotifications.show((props) => (React__namespace.default.createElement(WarningNotification,
|
|
5225
|
+
return context.uuiNotifications.show((props) => (React__namespace.default.createElement(WarningNotification, { ...props, actions: [
|
|
5210
5226
|
{
|
|
5211
5227
|
name: i18n.form.notifications.actionButtonCaption,
|
|
5212
5228
|
action: props.onSuccess,
|
|
5213
5229
|
},
|
|
5214
|
-
] }
|
|
5230
|
+
] },
|
|
5215
5231
|
React__namespace.default.createElement(RichTextView, null,
|
|
5216
|
-
React__namespace.default.createElement(Text,
|
|
5232
|
+
React__namespace.default.createElement(Text, null, i18n.form.notifications.unsavedChangesMessage)))), { duration: 5, position: 'bot-left' });
|
|
5217
5233
|
};
|
|
5218
|
-
return uuiCore.useForm(
|
|
5234
|
+
return uuiCore.useForm({ beforeLeave, loadUnsavedChanges, ...props });
|
|
5219
5235
|
}
|
|
5220
5236
|
|
|
5221
5237
|
var _path;
|
|
@@ -5235,33 +5251,33 @@ var SvgFileCloudUploadFill = function SvgFileCloudUploadFill(props, ref) {
|
|
|
5235
5251
|
};
|
|
5236
5252
|
var ForwardRef = /*#__PURE__*/React.forwardRef(SvgFileCloudUploadFill);
|
|
5237
5253
|
|
|
5238
|
-
var css$4 = {"root":"
|
|
5254
|
+
var css$4 = {"root":"jvQYDn","drop-start":"BgBc8k","dropStart":"BgBc8k","drop-over":"RCYMhV","dropOver":"RCYMhV","link":"emzVc4","drop-area":"c10qcM","dropArea":"c10qcM","drop-caption":"HNz32q","dropCaption":"HNz32q","icon-blue":"aF-Nim","iconBlue":"aF-Nim"};
|
|
5239
5255
|
|
|
5240
5256
|
function DropSpot(props) {
|
|
5241
5257
|
const getInfoText = typeof props.infoText === 'string'
|
|
5242
|
-
? (React__namespace.createElement(Text, { lineHeight: "24", size: "24", fontSize: "14", color: "tertiary" }, props.infoText)) : props
|
|
5258
|
+
? (React__namespace.createElement(Text, { lineHeight: "24", size: "24", fontSize: "14", color: "tertiary" }, props.infoText)) : props?.infoText;
|
|
5243
5259
|
const renderAttachmentArea = (params) => {
|
|
5244
|
-
return (React__namespace.createElement("div",
|
|
5245
|
-
React__namespace.createElement("div",
|
|
5260
|
+
return (React__namespace.createElement("div", { className: uuiCore.cx(css$4.root, props.cx, params.isDragStart && css$4.dropStart, params.isDraggingOver && css$4.dropOver), ...props.rawProps },
|
|
5261
|
+
React__namespace.createElement("div", { ...params.eventHandlers, className: css$4.dropArea },
|
|
5246
5262
|
React__namespace.createElement(FlexRow, { size: "24" },
|
|
5247
5263
|
React__namespace.createElement(uuiComponents.IconContainer, { icon: ForwardRef, cx: css$4.iconBlue }),
|
|
5248
5264
|
React__namespace.createElement(Text, { lineHeight: "24", size: "24", fontSize: "14", cx: css$4.dropCaption }, i18n.fileUpload.labelStart),
|
|
5249
5265
|
React__namespace.createElement(uuiComponents.UploadFileToggler, { onFilesAdded: props.onUploadFiles, render: (props) => (React__namespace.createElement(RichTextView, null,
|
|
5250
|
-
React__namespace.createElement(LinkButton,
|
|
5266
|
+
React__namespace.createElement(LinkButton, { caption: i18n.fileUpload.browse, ...props, cx: css$4.link }))), accept: props.accept, single: props.single })),
|
|
5251
5267
|
getInfoText)));
|
|
5252
5268
|
};
|
|
5253
5269
|
return React__namespace.createElement(uuiComponents.DropSpot, { render: renderAttachmentArea, onFilesDropped: props.onUploadFiles });
|
|
5254
5270
|
}
|
|
5255
5271
|
|
|
5256
|
-
var css$3 = {"uui-typography":"
|
|
5272
|
+
var css$3 = {"uui-typography":"_7SSEm-","uuiTypography":"_7SSEm-","hero-header":"ExOPed","heroHeader":"ExOPed","promo-header":"oejPyI","promoHeader":"oejPyI","uui-critical":"pPhVLd","uuiCritical":"pPhVLd","uui-info":"zBUhlQ","uuiInfo":"zBUhlQ","uui-success":"tmEgyz","uuiSuccess":"tmEgyz","uui-warning":"J4ZZOy","uuiWarning":"J4ZZOy","uui-highlight":"WoZ9sf","uuiHighlight":"WoZ9sf","uui-typography-size-12":"-N-gQd","uuiTypographySize12":"-N-gQd","uui-typography-size-14":"_4QJK2A","uuiTypographySize14":"_4QJK2A","uui-typography-size-16":"-kADgb","uuiTypographySize16":"-kADgb","root":"wDYgGZ","file-name":"OPqaMz","fileName":"OPqaMz","default-color":"oc7SsP","defaultColor":"oc7SsP","doc-color":"DUYMpj","docColor":"DUYMpj","xls-color":"Y8MoGe","xlsColor":"Y8MoGe","pdf-color":"N0WK2I","pdfColor":"N0WK2I","movie-color":"lrWC8Y","movieColor":"lrWC8Y","img-color":"_2e5Eai","imgColor":"_2e5Eai","mov-color":"ipiVeK","movColor":"ipiVeK","error-block":"bEjOXk","errorBlock":"bEjOXk","icons-block":"_8wZfGG","iconsBlock":"_8wZfGG"};
|
|
5257
5273
|
|
|
5258
|
-
var css$2 = {"root":"
|
|
5274
|
+
var css$2 = {"root":"KFyvnu"};
|
|
5259
5275
|
|
|
5260
5276
|
const SvgCircleProgress = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
5261
5277
|
const outsetRadius = props.size / 2 - 1;
|
|
5262
5278
|
const insetRadius = props.size / 2 - 3;
|
|
5263
5279
|
const circumference = insetRadius * Math.PI;
|
|
5264
|
-
return (React__namespace.createElement("svg",
|
|
5280
|
+
return (React__namespace.createElement("svg", { className: css$2.root, width: props.size, height: props.size, ref: ref, ...props.rawProps },
|
|
5265
5281
|
React__namespace.createElement("circle", { strokeDasharray: circumference, strokeDashoffset: circumference - (props.progress / 100) * circumference, strokeWidth: insetRadius, fill: "transparent", r: insetRadius / 2, cx: props.size / 2, cy: props.size / 2 }),
|
|
5266
5282
|
React__namespace.createElement("circle", { strokeWidth: 1, fill: "transparent", r: outsetRadius, cx: props.size / 2, cy: props.size / 2 })));
|
|
5267
5283
|
});
|
|
@@ -5306,8 +5322,8 @@ const FileCard = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
|
5306
5322
|
}
|
|
5307
5323
|
};
|
|
5308
5324
|
const { cx: componentCx, width, file: { progress, size, name, extension, error, abortXHR, }, onClick, } = props;
|
|
5309
|
-
const fileExtension = extension ||
|
|
5310
|
-
const fileName = name
|
|
5325
|
+
const fileExtension = extension || name?.split('.').pop();
|
|
5326
|
+
const fileName = name?.split('.').slice(0, -1).join('');
|
|
5311
5327
|
const isLoading = progress < 100;
|
|
5312
5328
|
const isCrossShow = ((!isLoadingShow && isLoading) || !isLoading) && onClick;
|
|
5313
5329
|
const mouseLeaveHandler = (e) => {
|
|
@@ -5330,12 +5346,12 @@ const FileCard = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
|
5330
5346
|
progress && progress < 100 && abortXHR();
|
|
5331
5347
|
onClick();
|
|
5332
5348
|
};
|
|
5333
|
-
return (React__namespace.createElement(FlexCell, { ref: ref, cx: uuiCore.cx(css$3.root, 'uui-file_card', (isLoading ||
|
|
5334
|
-
React__namespace.createElement(FlexRow, {
|
|
5349
|
+
return (React__namespace.createElement(FlexCell, { ref: ref, cx: uuiCore.cx(css$3.root, 'uui-file_card', (isLoading || error?.isError) && uuiCore.uuiMod.loading, componentCx, error?.isError && uuiCore.uuiMod.error), minWidth: width, width: !width ? '100%' : undefined },
|
|
5350
|
+
React__namespace.createElement(FlexRow, { alignItems: "top", columnGap: "6" },
|
|
5335
5351
|
fileExtension && getIcon(fileExtension),
|
|
5336
5352
|
React__namespace.createElement(FlexCell, { width: "100%" },
|
|
5337
|
-
React__namespace.createElement(Text, { size: "18", fontSize: "14", lineHeight: "18", color: (progress < 100 ||
|
|
5338
|
-
|
|
5353
|
+
React__namespace.createElement(Text, { size: "18", fontSize: "14", lineHeight: "18", color: (progress < 100 || error?.isError) ? 'tertiary' : 'primary', cx: css$3.fileName }, fileName),
|
|
5354
|
+
error?.isError ? renderErrorContent() : renderSuccessfulContent()),
|
|
5339
5355
|
React__namespace.createElement("div", { className: uuiCore.cx(css$3.iconsBlock), onMouseEnter: mouseEnterHandler, onMouseLeave: mouseLeaveHandler },
|
|
5340
5356
|
isLoadingShow && isLoading && React__namespace.createElement(SvgCircleProgress, { progress: progress, size: 18 }),
|
|
5341
5357
|
isCrossShow && React__namespace.createElement(IconButton, { icon: ForwardRef$R, onClick: removeHandler })))));
|
|
@@ -5383,7 +5399,7 @@ const getErrorPageConfig = () => ({
|
|
|
5383
5399
|
},
|
|
5384
5400
|
});
|
|
5385
5401
|
|
|
5386
|
-
var css$1 = {"container":"
|
|
5402
|
+
var css$1 = {"container":"tW1P5U"};
|
|
5387
5403
|
|
|
5388
5404
|
const ErrorPage = (props) => {
|
|
5389
5405
|
const isMobileScreen = uuiCore.isMobile();
|
|
@@ -5392,10 +5408,10 @@ const ErrorPage = (props) => {
|
|
|
5392
5408
|
React__namespace.default.createElement("img", { className: "uui-error-image", src: isMobileScreen && props.mobileImageUrl ? props.mobileImageUrl : props.imageUrl, alt: "ERROR OCCURRED!" }),
|
|
5393
5409
|
React__namespace.default.createElement("div", { className: "uui-error-title" }, props.title),
|
|
5394
5410
|
React__namespace.default.createElement("div", { className: "uui-error-subtitle" }, props.subtitle),
|
|
5395
|
-
|
|
5411
|
+
props?.supportLink && React__namespace.default.createElement("div", { className: "uui-error-support-link" }, props?.supportLink))));
|
|
5396
5412
|
};
|
|
5397
5413
|
|
|
5398
|
-
var css = {"recovery-spinner":"
|
|
5414
|
+
var css = {"recovery-spinner":"ZvCzZ0","recoverySpinner":"ZvCzZ0","recovery-message":"JRjTr0","recoveryMessage":"JRjTr0","modal-blocker":"gm-GV8","modalBlocker":"gm-GV8","modalFadeIn":"MFGxj-"};
|
|
5399
5415
|
|
|
5400
5416
|
function ErrorHandler(props) {
|
|
5401
5417
|
const { uuiNotifications, uuiModals, uuiApi } = uuiCore.useUuiContext();
|
|
@@ -5410,8 +5426,8 @@ function ErrorHandler(props) {
|
|
|
5410
5426
|
props.onNotificationError(c);
|
|
5411
5427
|
}
|
|
5412
5428
|
else {
|
|
5413
|
-
uuiNotifications.show((notificationProps) => (React__namespace.default.createElement(ErrorNotification,
|
|
5414
|
-
React__namespace.default.createElement(Text,
|
|
5429
|
+
uuiNotifications.show((notificationProps) => (React__namespace.default.createElement(ErrorNotification, { ...notificationProps },
|
|
5430
|
+
React__namespace.default.createElement(Text, null, c.responseData && c.responseData.errorMessage))));
|
|
5415
5431
|
}
|
|
5416
5432
|
c.dismissError();
|
|
5417
5433
|
});
|
|
@@ -5422,7 +5438,7 @@ function ErrorHandler(props) {
|
|
|
5422
5438
|
React__namespace.default.createElement(ModalWindow, null,
|
|
5423
5439
|
React__namespace.default.createElement(ModalHeader, { borderBottom: true, title: title }),
|
|
5424
5440
|
React__namespace.default.createElement(Spinner, { cx: css.recoverySpinner }),
|
|
5425
|
-
React__namespace.default.createElement(FlexRow, {
|
|
5441
|
+
React__namespace.default.createElement(FlexRow, { cx: css.recoveryMessage },
|
|
5426
5442
|
React__namespace.default.createElement(FlexCell, { grow: 1 },
|
|
5427
5443
|
React__namespace.default.createElement(RichTextView, null, subtitle),
|
|
5428
5444
|
isAuthLost && (React__namespace.default.createElement(Text, { color: "tertiary" },
|
|
@@ -5432,7 +5448,7 @@ function ErrorHandler(props) {
|
|
|
5432
5448
|
".")))))));
|
|
5433
5449
|
};
|
|
5434
5450
|
const renderErrorPage = (errorInform) => {
|
|
5435
|
-
return React__namespace.default.createElement(ErrorPage,
|
|
5451
|
+
return React__namespace.default.createElement(ErrorPage, { cx: props.cx, ...errorInform });
|
|
5436
5452
|
};
|
|
5437
5453
|
if (errorType === 'error') {
|
|
5438
5454
|
uuiModals.closeAll();
|