@epam/uui 5.12.1 → 5.13.1
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/components/datePickers/RangeDatePicker.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/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/index.esm.js +560 -543
- package/index.esm.js.map +1 -1
- package/index.js +559 -542
- package/index.js.map +1 -1
- package/package.json +6 -6
- package/settings.d.ts.map +1 -1
- package/settings.types.d.ts +4 -0
- package/settings.types.d.ts.map +1 -1
- package/stats.html +1 -1
- package/styles.css +2536 -2531
- package/styles.css.map +1 -1
package/index.js
CHANGED
|
@@ -344,6 +344,9 @@ const settings = {
|
|
|
344
344
|
48: '30',
|
|
345
345
|
},
|
|
346
346
|
},
|
|
347
|
+
notificationCard: {
|
|
348
|
+
action: '30',
|
|
349
|
+
},
|
|
347
350
|
tag: {
|
|
348
351
|
countIndicator: {
|
|
349
352
|
18: '12',
|
|
@@ -622,7 +625,7 @@ const settings = {
|
|
|
622
625
|
},
|
|
623
626
|
};
|
|
624
627
|
|
|
625
|
-
var css$1y = {"uui-typography":"
|
|
628
|
+
var css$1y = {"uui-typography":"_7dibOv","uuiTypography":"_7dibOv","hero-header":"gZIFvf","heroHeader":"gZIFvf","promo-header":"moRTWZ","promoHeader":"moRTWZ","uui-critical":"MLpwgC","uuiCritical":"MLpwgC","uui-info":"pxwMwF","uuiInfo":"pxwMwF","uui-success":"S9TkLF","uuiSuccess":"S9TkLF","uui-warning":"CGEY2C","uuiWarning":"CGEY2C","uui-highlight":"_8G3qW7","uuiHighlight":"_8G3qW7","uui-typography-size-12":"TkLsvK","uuiTypographySize12":"TkLsvK","uui-typography-size-14":"TN1Exh","uuiTypographySize14":"TN1Exh","uui-typography-size-16":"IInzmy","uuiTypographySize16":"IInzmy","root":"MaGedW"};
|
|
626
629
|
|
|
627
630
|
function applyButtonMods(mods) {
|
|
628
631
|
return [
|
|
@@ -640,7 +643,7 @@ const Button = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Button,
|
|
|
640
643
|
};
|
|
641
644
|
});
|
|
642
645
|
|
|
643
|
-
var css$1x = {"root":"
|
|
646
|
+
var css$1x = {"root":"CskCVP"};
|
|
644
647
|
|
|
645
648
|
function applyIconButtonMods(props) {
|
|
646
649
|
return ['uui-icon_button', `uui-color-${props.color || 'neutral'}`, css$1x.root];
|
|
@@ -677,7 +680,7 @@ function getIconClass(props) {
|
|
|
677
680
|
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
681
|
}
|
|
679
682
|
|
|
680
|
-
var css$1w = {"uui-typography":"
|
|
683
|
+
var css$1w = {"uui-typography":"yAjTdB","uuiTypography":"yAjTdB","hero-header":"eiLbdk","heroHeader":"eiLbdk","promo-header":"JxSksD","promoHeader":"JxSksD","uui-critical":"_3wHQBN","uuiCritical":"_3wHQBN","uui-info":"Uo61eA","uuiInfo":"Uo61eA","uui-success":"rDa8-v","uuiSuccess":"rDa8-v","uui-warning":"_6hszJC","uuiWarning":"_6hszJC","uui-highlight":"lp8xIs","uuiHighlight":"lp8xIs","uui-typography-size-12":"fxpzPt","uuiTypographySize12":"fxpzPt","uui-typography-size-14":"_1fIcMa","uuiTypographySize14":"_1fIcMa","uui-typography-size-16":"bGw9xY","uuiTypographySize16":"bGw9xY","root":"_5OaFLf"};
|
|
681
684
|
|
|
682
685
|
const DEFAULT_COLOR = 'primary';
|
|
683
686
|
const DEFAULT_WEIGHT = 'semibold';
|
|
@@ -701,14 +704,14 @@ const LinkButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
|
701
704
|
];
|
|
702
705
|
const captionStyles = cx__default.default(uuiCore.uuiElement.caption, props.underline && `uui-underline-${props.underline}`, `uui-link-button-weight-${props.weight || DEFAULT_WEIGHT}`);
|
|
703
706
|
const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : systemIcons.foldingArrow;
|
|
704
|
-
return (React__namespace.createElement(uuiComponents.Clickable,
|
|
707
|
+
return (React__namespace.createElement(uuiComponents.Clickable, { ...props, type: "button", cx: rootStyles, ref: ref },
|
|
705
708
|
props.icon && props.iconPosition !== 'right' && (React__namespace.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
|
|
706
709
|
props.caption && (React__namespace.createElement("div", { className: captionStyles }, props.caption)),
|
|
707
710
|
props.icon && props.iconPosition === 'right' && (React__namespace.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
|
|
708
711
|
props.isDropdown && (React__namespace.createElement(uuiComponents.IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
|
|
709
712
|
});
|
|
710
713
|
|
|
711
|
-
var css$1v = {"root":"
|
|
714
|
+
var css$1v = {"root":"_9eu-hk"};
|
|
712
715
|
|
|
713
716
|
const CountIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
|
|
714
717
|
return (React__namespace.default.createElement("div", { ref: ref, className: cx__default.default([
|
|
@@ -720,7 +723,7 @@ const CountIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
|
|
|
720
723
|
]) }, props.caption));
|
|
721
724
|
});
|
|
722
725
|
|
|
723
|
-
var css$1u = {"uui-typography":"
|
|
726
|
+
var css$1u = {"uui-typography":"hAQQr7","uuiTypography":"hAQQr7","hero-header":"vz3CLE","heroHeader":"vz3CLE","promo-header":"u9izqG","promoHeader":"u9izqG","uui-critical":"stlt9a","uuiCritical":"stlt9a","uui-info":"R7oU0T","uuiInfo":"R7oU0T","uui-success":"eh7dnO","uuiSuccess":"eh7dnO","uui-warning":"_4clm04","uuiWarning":"_4clm04","uui-highlight":"_6LU4Yl","uuiHighlight":"_6LU4Yl","uui-typography-size-12":"pVRM0a","uuiTypographySize12":"pVRM0a","uui-typography-size-14":"L2XqCt","uuiTypographySize14":"L2XqCt","uui-typography-size-16":"GSfNBU","uuiTypographySize16":"GSfNBU","root":"PLiTrO","withNotify":"ZBJXWo"};
|
|
724
727
|
|
|
725
728
|
const TabButton = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
|
|
726
729
|
const styles = [
|
|
@@ -732,7 +735,12 @@ const TabButton = /* @__PURE__ */React__namespace.default.forwardRef((props, ref
|
|
|
732
735
|
];
|
|
733
736
|
const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : systemIcons.foldingArrow;
|
|
734
737
|
const ClearIcon = props.clearIcon ? props.clearIcon : systemIcons.clear;
|
|
735
|
-
return (React__namespace.default.createElement(uuiComponents.Clickable,
|
|
738
|
+
return (React__namespace.default.createElement(uuiComponents.Clickable, { ...props, rawProps: {
|
|
739
|
+
role: 'tab',
|
|
740
|
+
'aria-haspopup': props.isDropdown,
|
|
741
|
+
'aria-expanded': props.isOpen,
|
|
742
|
+
...props.rawProps,
|
|
743
|
+
}, cx: styles, ref: ref },
|
|
736
744
|
props.icon && props.iconPosition !== 'right' && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
|
|
737
745
|
(props.caption || props.withNotify) && (React__namespace.default.createElement("div", { className: uuiCore.cx(uuiCore.uuiElement.caption) },
|
|
738
746
|
props.caption,
|
|
@@ -743,7 +751,7 @@ const TabButton = /* @__PURE__ */React__namespace.default.forwardRef((props, ref
|
|
|
743
751
|
props.onClear && !props.isDisabled && (React__namespace.default.createElement(uuiComponents.IconContainer, { cx: uuiCore.uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
|
|
744
752
|
});
|
|
745
753
|
|
|
746
|
-
var css$1t = {"uui-typography":"
|
|
754
|
+
var css$1t = {"uui-typography":"xEAtNz","uuiTypography":"xEAtNz","hero-header":"hLFQfs","heroHeader":"hLFQfs","promo-header":"odFHXr","promoHeader":"odFHXr","uui-critical":"NFIL60","uuiCritical":"NFIL60","uui-info":"BTczt7","uuiInfo":"BTczt7","uui-success":"xqzoeJ","uuiSuccess":"xqzoeJ","uui-warning":"_7xxfXq","uuiWarning":"_7xxfXq","uui-highlight":"-YuGos","uuiHighlight":"-YuGos","uui-typography-size-12":"fej0KP","uuiTypographySize12":"fej0KP","uui-typography-size-14":"ie1R3W","uuiTypographySize14":"ie1R3W","uui-typography-size-16":"ljUF-F","uuiTypographySize16":"ljUF-F","root":"wDUf0r"};
|
|
747
755
|
|
|
748
756
|
function applyVerticalTabButtonMods() {
|
|
749
757
|
return [css$1t.root, 'uui-vertical-tab-button'];
|
|
@@ -765,7 +773,7 @@ var SvgContentMinusOutline = function SvgContentMinusOutline(props, ref) {
|
|
|
765
773
|
};
|
|
766
774
|
var ForwardRef$C = /*#__PURE__*/React.forwardRef(SvgContentMinusOutline);
|
|
767
775
|
|
|
768
|
-
var css$1s = {"uui-typography":"
|
|
776
|
+
var css$1s = {"uui-typography":"_1AlAFV","uuiTypography":"_1AlAFV","hero-header":"KOAXOO","heroHeader":"KOAXOO","promo-header":"_6ALMun","promoHeader":"_6ALMun","uui-critical":"fuTPAk","uuiCritical":"fuTPAk","uui-info":"_0jhg4n","uuiInfo":"_0jhg4n","uui-success":"_6h-eyE","uuiSuccess":"_6h-eyE","uui-warning":"dNu1iG","uuiWarning":"dNu1iG","uui-highlight":"f7dy9c","uuiHighlight":"f7dy9c","uui-typography-size-12":"Q8lukU","uuiTypographySize12":"Q8lukU","uui-typography-size-14":"BHb9GG","uuiTypographySize14":"BHb9GG","uui-typography-size-16":"zU0Mbv","uuiTypographySize16":"zU0Mbv","root":"febSRG","mode-cell":"FNtbGw","modeCell":"FNtbGw"};
|
|
769
777
|
|
|
770
778
|
function applyCheckboxMods(mods) {
|
|
771
779
|
return [
|
|
@@ -800,7 +808,7 @@ var SvgRadioDotFill = function SvgRadioDotFill(props, ref) {
|
|
|
800
808
|
};
|
|
801
809
|
var ForwardRef$B = /*#__PURE__*/React.forwardRef(SvgRadioDotFill);
|
|
802
810
|
|
|
803
|
-
var css$1r = {"uui-typography":"
|
|
811
|
+
var css$1r = {"uui-typography":"_8uVoO0","uuiTypography":"_8uVoO0","hero-header":"_5U3YGC","heroHeader":"_5U3YGC","promo-header":"aJr9b-","promoHeader":"aJr9b-","uui-critical":"Yr5VFM","uuiCritical":"Yr5VFM","uui-info":"VEBx6M","uuiInfo":"VEBx6M","uui-success":"VHbuBm","uuiSuccess":"VHbuBm","uui-warning":"iXhVRc","uuiWarning":"iXhVRc","uui-highlight":"_8vVIlz","uuiHighlight":"_8vVIlz","uui-typography-size-12":"ysKNvn","uuiTypographySize12":"ysKNvn","uui-typography-size-14":"Eh-sRw","uuiTypographySize14":"Eh-sRw","uui-typography-size-16":"edXBuN","uuiTypographySize16":"edXBuN","root":"g1-sdZ"};
|
|
804
812
|
|
|
805
813
|
function applyRadioInputMods(mods) {
|
|
806
814
|
return [
|
|
@@ -812,7 +820,7 @@ function applyRadioInputMods(mods) {
|
|
|
812
820
|
}
|
|
813
821
|
const RadioInput = /* @__PURE__ */uuiCore.withMods(uuiComponents.RadioInput, applyRadioInputMods, (props) => ({ icon: props.icon ? props.icon : ForwardRef$B }));
|
|
814
822
|
|
|
815
|
-
var css$1q = {"root":"
|
|
823
|
+
var css$1q = {"root":"m5yU-S"};
|
|
816
824
|
|
|
817
825
|
function applySwitchMods(mods) {
|
|
818
826
|
return [
|
|
@@ -823,50 +831,6 @@ function applySwitchMods(mods) {
|
|
|
823
831
|
}
|
|
824
832
|
const Switch = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Switch, applySwitchMods);
|
|
825
833
|
|
|
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
834
|
/**
|
|
871
835
|
* Defines the different edit modes.
|
|
872
836
|
*/
|
|
@@ -880,7 +844,7 @@ var EditMode;
|
|
|
880
844
|
EditMode["INLINE"] = "inline";
|
|
881
845
|
})(EditMode || (EditMode = {}));
|
|
882
846
|
|
|
883
|
-
var textInputCss = {"uui-typography":"
|
|
847
|
+
var textInputCss = {"uui-typography":"_7zR6D2","uuiTypography":"_7zR6D2","hero-header":"_6nT9qv","heroHeader":"_6nT9qv","promo-header":"z8E9te","promoHeader":"z8E9te","uui-critical":"EtwonQ","uuiCritical":"EtwonQ","uui-info":"r0U-l-","uuiInfo":"r0U-l-","uui-success":"KnkTH4","uuiSuccess":"KnkTH4","uui-warning":"lzioHg","uuiWarning":"lzioHg","uui-highlight":"kTscpN","uuiHighlight":"kTscpN","uui-typography-size-12":"u5Rxln","uuiTypographySize12":"u5Rxln","uui-typography-size-14":"_6m93Pa","uuiTypographySize14":"_6m93Pa","uui-typography-size-16":"fGaJKo","uuiTypographySize16":"fGaJKo","root":"wHZKXL","mode-form":"-G1W-o","modeForm":"-G1W-o","mode-inline":"L0eVsY","modeInline":"L0eVsY","mode-cell":"iQCtuQ","modeCell":"iQCtuQ"};
|
|
884
848
|
|
|
885
849
|
const DEFAULT_MODE$3 = EditMode.FORM;
|
|
886
850
|
function applyTextInputMods(mods) {
|
|
@@ -897,25 +861,31 @@ const TextInput = /* @__PURE__ */uuiCore.withMods(uuiComponents.TextInput, apply
|
|
|
897
861
|
}));
|
|
898
862
|
const SearchInput = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
|
|
899
863
|
// analytics events are sending in IEditableDebouncer, so we need to avoid sending events in TextInput
|
|
900
|
-
const textInputProps =
|
|
864
|
+
const { ...textInputProps } = props;
|
|
901
865
|
delete textInputProps.getValueChangeAnalyticsEvent;
|
|
902
|
-
return (React__namespace.default.createElement(uuiCore.IEditableDebouncer,
|
|
903
|
-
var _a;
|
|
866
|
+
return (React__namespace.default.createElement(uuiCore.IEditableDebouncer, { ...props, render: (iEditable) => {
|
|
904
867
|
const defaultOnCancel = () => iEditable.onValueChange('');
|
|
905
|
-
return (React__namespace.default.createElement(TextInput,
|
|
906
|
-
} }))
|
|
868
|
+
return (React__namespace.default.createElement(TextInput, { icon: systemIcons.search, onCancel: props.onCancel ?? defaultOnCancel, type: "search", inputMode: "search", ref: ref, ...textInputProps, ...iEditable }));
|
|
869
|
+
} }));
|
|
907
870
|
});
|
|
908
871
|
|
|
909
|
-
var css$1p = {"root":"
|
|
872
|
+
var css$1p = {"root":"wJ5meL"};
|
|
910
873
|
|
|
911
874
|
const ControlGroup = /* @__PURE__ */uuiCore.withMods(uuiComponents.ControlGroup, () => [css$1p.root, 'uui-control-group']);
|
|
912
875
|
|
|
913
876
|
function MultiSwitchComponent(props, ref) {
|
|
914
|
-
return (React__namespace.createElement(ControlGroup, { ref: ref, rawProps:
|
|
877
|
+
return (React__namespace.createElement(ControlGroup, { ref: ref, rawProps: {
|
|
878
|
+
...props.rawProps,
|
|
879
|
+
role: 'tablist',
|
|
880
|
+
'aria-invalid': props.isInvalid,
|
|
881
|
+
'aria-required': props.isRequired,
|
|
882
|
+
'aria-disabled': props.isDisabled,
|
|
883
|
+
'aria-readonly': props.isReadonly,
|
|
884
|
+
} }, 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
885
|
}
|
|
916
886
|
const MultiSwitch = /* @__PURE__ */React__namespace.forwardRef(MultiSwitchComponent);
|
|
917
887
|
|
|
918
|
-
var css$1o = {"uui-typography":"
|
|
888
|
+
var css$1o = {"uui-typography":"-MvPdM","uuiTypography":"-MvPdM","hero-header":"X2IXYc","heroHeader":"X2IXYc","promo-header":"TGF17H","promoHeader":"TGF17H","uui-critical":"IZ0A73","uuiCritical":"IZ0A73","uui-info":"_3CcWb9","uuiInfo":"_3CcWb9","uui-success":"LZ0NNH","uuiSuccess":"LZ0NNH","uui-warning":"dGhl24","uuiWarning":"dGhl24","uui-highlight":"_9CMJ6I","uuiHighlight":"_9CMJ6I","uui-typography-size-12":"_8PlM3T","uuiTypographySize12":"_8PlM3T","uui-typography-size-14":"InVOJB","uuiTypographySize14":"InVOJB","uui-typography-size-16":"tYLRHC","uuiTypographySize16":"tYLRHC","root":"wBW2nC","mode-form":"Is14Gs","modeForm":"Is14Gs","mode-cell":"lTSe5c","modeCell":"lTSe5c"};
|
|
919
889
|
|
|
920
890
|
const DEFAULT_MODE$2 = EditMode.FORM;
|
|
921
891
|
function applyNumericInputMods(mods) {
|
|
@@ -927,16 +897,15 @@ function applyNumericInputMods(mods) {
|
|
|
927
897
|
];
|
|
928
898
|
}
|
|
929
899
|
const NumericInput = /* @__PURE__ */uuiCore.withMods(uuiComponents.NumericInput, applyNumericInputMods, (props) => {
|
|
930
|
-
var _a, _b;
|
|
931
900
|
return {
|
|
932
901
|
upIcon: systemIcons.foldingArrow,
|
|
933
902
|
downIcon: systemIcons.foldingArrow,
|
|
934
|
-
align:
|
|
935
|
-
disableArrows:
|
|
903
|
+
align: props.align ?? (props.mode === 'cell' ? 'right' : 'left'),
|
|
904
|
+
disableArrows: props.disableArrows ?? props.mode === 'cell',
|
|
936
905
|
};
|
|
937
906
|
});
|
|
938
907
|
|
|
939
|
-
var css$1n = {"uui-typography":"
|
|
908
|
+
var css$1n = {"uui-typography":"evfrb5","uuiTypography":"evfrb5","hero-header":"_60uAzc","heroHeader":"_60uAzc","promo-header":"_9Gi--9","promoHeader":"_9Gi--9","uui-critical":"x3LG07","uuiCritical":"x3LG07","uui-info":"_4yuSUY","uuiInfo":"_4yuSUY","uui-success":"-NW5Xh","uuiSuccess":"-NW5Xh","uui-warning":"_0C0-Lq","uuiWarning":"_0C0-Lq","uui-highlight":"_89FZBw","uuiHighlight":"_89FZBw","uui-typography-size-12":"_4HY-tm","uuiTypographySize12":"_4HY-tm","uui-typography-size-14":"hLGEO8","uuiTypographySize14":"hLGEO8","uui-typography-size-16":"G0svc9","uuiTypographySize16":"G0svc9","root":"Uf-VvI","mode-form":"_5LiuSX","modeForm":"_5LiuSX","mode-cell":"VYPIYv","modeCell":"VYPIYv","mode-inline":"dsfAlY","modeInline":"dsfAlY"};
|
|
940
909
|
|
|
941
910
|
const DEFAULT_MODE$1 = EditMode.FORM;
|
|
942
911
|
function applyTextAreaMods(mods) {
|
|
@@ -1037,9 +1006,9 @@ var SvgNotificationInfoFill = function SvgNotificationInfoFill(props, ref) {
|
|
|
1037
1006
|
};
|
|
1038
1007
|
var ForwardRef$x = /*#__PURE__*/React.forwardRef(SvgNotificationInfoFill);
|
|
1039
1008
|
|
|
1040
|
-
var css$1m = {"uui-typography":"
|
|
1009
|
+
var css$1m = {"uui-typography":"RaWhd7","uuiTypography":"RaWhd7","hero-header":"nh86TR","heroHeader":"nh86TR","promo-header":"r5a-Ck","promoHeader":"r5a-Ck","uui-critical":"tZq3RN","uuiCritical":"tZq3RN","uui-info":"Wlc3cw","uuiInfo":"Wlc3cw","uui-success":"i0NuZD","uuiSuccess":"i0NuZD","uui-warning":"BqSxNq","uuiWarning":"BqSxNq","uui-highlight":"_2B9gEO","uuiHighlight":"_2B9gEO","uui-typography-size-12":"pbQEMF","uuiTypographySize12":"pbQEMF","uui-typography-size-14":"fZHeuG","uuiTypographySize14":"fZHeuG","uui-typography-size-16":"qqsJMo","uuiTypographySize16":"qqsJMo","root":"-GBCsp","main-path":"domvef","mainPath":"domvef","content-wrapper":"_2ZPPjg","contentWrapper":"_2ZPPjg","content":"xQKfV-","action-wrapper":"pPUonS","actionWrapper":"pPUonS","icon-wrapper":"p0UYKj","iconWrapper":"p0UYKj","icon":"ahF-TW","close-icon":"H4yNd9","closeIcon":"H4yNd9"};
|
|
1041
1010
|
|
|
1042
|
-
const Alert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("div",
|
|
1011
|
+
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
1012
|
React__namespace.createElement("div", { className: css$1m.mainPath },
|
|
1044
1013
|
React__namespace.createElement("div", { className: css$1m.contentWrapper },
|
|
1045
1014
|
props.icon && (React__namespace.createElement("div", { className: css$1m.iconWrapper },
|
|
@@ -1048,14 +1017,14 @@ const Alert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React_
|
|
|
1048
1017
|
props.children,
|
|
1049
1018
|
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
1019
|
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,
|
|
1020
|
+
const WarningAlert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, { icon: ForwardRef$z, color: "warning", ref: ref, ...props }));
|
|
1021
|
+
const SuccessAlert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, { icon: ForwardRef$A, color: "success", ref: ref, ...props }));
|
|
1022
|
+
const HintAlert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, { icon: ForwardRef$x, color: "info", ref: ref, ...props }));
|
|
1023
|
+
const ErrorAlert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => React__namespace.createElement(Alert, { icon: ForwardRef$y, color: "error", ref: ref, ...props }));
|
|
1055
1024
|
|
|
1056
1025
|
const Dropdown = /* @__PURE__ */uuiCore.withMods(uuiComponents.Dropdown);
|
|
1057
1026
|
|
|
1058
|
-
var css$1l = {"root":"
|
|
1027
|
+
var css$1l = {"root":"dK8qJe"};
|
|
1059
1028
|
|
|
1060
1029
|
function applyDropdownContainerMods(mods) {
|
|
1061
1030
|
return [
|
|
@@ -1066,7 +1035,7 @@ function applyDropdownContainerMods(mods) {
|
|
|
1066
1035
|
}
|
|
1067
1036
|
const DropdownContainer = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.DropdownContainer, applyDropdownContainerMods);
|
|
1068
1037
|
|
|
1069
|
-
var css$1k = {"uui-typography":"
|
|
1038
|
+
var css$1k = {"uui-typography":"_6SAVBf","uuiTypography":"_6SAVBf","hero-header":"lBRI1A","heroHeader":"lBRI1A","promo-header":"cPyLf8","promoHeader":"cPyLf8","uui-critical":"leyaXM","uuiCritical":"leyaXM","uui-info":"_7GGF1f","uuiInfo":"_7GGF1f","uui-success":"K5TYKc","uuiSuccess":"K5TYKc","uui-warning":"_8P-jBG","uuiWarning":"_8P-jBG","uui-highlight":"_3-7Fc1","uuiHighlight":"_3-7Fc1","uui-typography-size-12":"gpTvUH","uuiTypographySize12":"gpTvUH","uui-typography-size-14":"_2w6tQ0","uuiTypographySize14":"_2w6tQ0","uui-typography-size-16":"_3p8JTb","uuiTypographySize16":"_3p8JTb","submenu-root-item-rtl":"-xE6Bc","submenuRootItemRtl":"-xE6Bc","icon-after":"Niwriw","iconAfter":"Niwriw","submenu-root-item":"tqWplg","submenuRootItem":"tqWplg","icon-check":"f7-k8O","iconCheck":"f7-k8O","splitter-root":"FN7VYl","splitterRoot":"FN7VYl","splitter":"PJ-DqM","header-root":"_2t0vXM","headerRoot":"_2t0vXM","item-root":"qwbSrg","itemRoot":"qwbSrg","icon":"uhubnI","link":"LqGoBn","indent":"UW-cv3","selected-mark":"HXNIDX","selectedMark":"HXNIDX"};
|
|
1070
1039
|
|
|
1071
1040
|
exports.IDropdownControlKeys = void 0;
|
|
1072
1041
|
(function (IDropdownControlKeys) {
|
|
@@ -1102,10 +1071,10 @@ function DropdownMenuContainer(props) {
|
|
|
1102
1071
|
props.onClose();
|
|
1103
1072
|
}
|
|
1104
1073
|
};
|
|
1105
|
-
return (React__namespace.default.createElement(DropdownContainer,
|
|
1074
|
+
return (React__namespace.default.createElement(DropdownContainer, { ...props, rawProps: { ...props.rawProps, role: 'menu' }, ref: menuRef, width: props.minWidth, lockProps: { onKeyDown: handleArrowKeys }, cx: [props.cx] }));
|
|
1106
1075
|
}
|
|
1107
1076
|
const DropdownMenuBody = /* @__PURE__ */uuiCore.withMods(DropdownMenuContainer, () => ['uui-dropdownMenu-body'], (props) => {
|
|
1108
|
-
return (
|
|
1077
|
+
return ({ closeOnKey: exports.IDropdownControlKeys.ESCAPE, ...props });
|
|
1109
1078
|
});
|
|
1110
1079
|
const DropdownMenuButton = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
|
|
1111
1080
|
const context = React.useContext(uuiCore.UuiContext);
|
|
@@ -1122,6 +1091,10 @@ const DropdownMenuButton = /* @__PURE__ */React__namespace.default.forwardRef((p
|
|
|
1122
1091
|
}
|
|
1123
1092
|
else if (event.key === exports.IDropdownControlKeys.ENTER && onClick) {
|
|
1124
1093
|
onClick(event);
|
|
1094
|
+
// Fix bug when click event is triggered after Enter key.
|
|
1095
|
+
// Tricky case when modal window is opened from dropdown menu and click on modal header cross is triggered, that leads to modal close.
|
|
1096
|
+
// https://github.com/epam/UUI/issues/2754
|
|
1097
|
+
event.preventDefault();
|
|
1125
1098
|
}
|
|
1126
1099
|
};
|
|
1127
1100
|
const getMenuButtonContent = () => {
|
|
@@ -1172,11 +1145,8 @@ function DropdownSubMenu(props) {
|
|
|
1172
1145
|
},
|
|
1173
1146
|
},
|
|
1174
1147
|
];
|
|
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
|
-
} }));
|
|
1148
|
+
const isRtl = uuiCore.getDir() === 'rtl';
|
|
1149
|
+
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
1150
|
}
|
|
1181
1151
|
function DropdownMenuSwitchButton(props) {
|
|
1182
1152
|
const context = React.useContext(uuiCore.UuiContext);
|
|
@@ -1199,7 +1169,7 @@ function DropdownMenuSwitchButton(props) {
|
|
|
1199
1169
|
React__namespace.default.createElement(Switch, { value: isSelected, tabIndex: -1, onValueChange: onHandleValueChange })));
|
|
1200
1170
|
}
|
|
1201
1171
|
|
|
1202
|
-
var css$1j = {"uui-typography":"
|
|
1172
|
+
var css$1j = {"uui-typography":"n2q1ix","uuiTypography":"n2q1ix","hero-header":"rkiAC6","heroHeader":"rkiAC6","promo-header":"BrL22Y","promoHeader":"BrL22Y","uui-critical":"hv0E1f","uuiCritical":"hv0E1f","uui-info":"akPG0b","uuiInfo":"akPG0b","uui-success":"MU69Q1","uuiSuccess":"MU69Q1","uui-warning":"g6so0E","uuiWarning":"g6so0E","uui-highlight":"k4dxEs","uuiHighlight":"k4dxEs","uui-typography-size-12":"tTD7mY","uuiTypographySize12":"tTD7mY","uui-typography-size-14":"DI6oWK","uuiTypographySize14":"DI6oWK","uui-typography-size-16":"wYjijH","uuiTypographySize16":"wYjijH","root":"Aj-P3r","mode-block":"GbKe8u","modeBlock":"GbKe8u","mode-inline":"oBRzeS","modeInline":"oBRzeS","padding-0":"nP2eBw","padding0":"nP2eBw","padding-6":"RECw5j","padding6":"RECw5j","padding-12":"Erpled","padding12":"Erpled","padding-18":"CfAnBc","padding18":"CfAnBc"};
|
|
1203
1173
|
|
|
1204
1174
|
function applyAccordionMods(mods) {
|
|
1205
1175
|
return [
|
|
@@ -1212,7 +1182,7 @@ const Accordion = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Accor
|
|
|
1212
1182
|
dropdownIcon: mods.dropdownIcon !== null && systemIcons.foldingArrow,
|
|
1213
1183
|
}));
|
|
1214
1184
|
|
|
1215
|
-
var css$1i = {"uui-typography":"
|
|
1185
|
+
var css$1i = {"uui-typography":"pp171X","uuiTypography":"pp171X","hero-header":"DMIhf0","heroHeader":"DMIhf0","promo-header":"msEITN","promoHeader":"msEITN","uui-critical":"AFDNiD","uuiCritical":"AFDNiD","uui-info":"i-9LNu","uuiInfo":"i-9LNu","uui-success":"yuI4De","uuiSuccess":"yuI4De","uui-warning":"S-aCNz","uuiWarning":"S-aCNz","uui-highlight":"DvCvNo","uuiHighlight":"DvCvNo","uui-typography-size-12":"pgy5S2","uuiTypographySize12":"pgy5S2","uui-typography-size-14":"PTkTVo","uuiTypographySize14":"PTkTVo","uui-typography-size-16":"ic2gis","uuiTypographySize16":"ic2gis","root":"sf8CGw","border-top":"AaxVnt","borderTop":"AaxVnt","border-bottom":"_8iSQRp","borderBottom":"_8iSQRp","top-shadow":"bE-pYh","topShadow":"bE-pYh","padding-6":"EUJtSo","padding6":"EUJtSo","padding-12":"fv2ERD","padding12":"fv2ERD","padding-18":"LT2Hnf","padding18":"LT2Hnf","padding-24":"EqM29k","padding24":"EqM29k","margin-24":"cDwiYs","margin24":"cDwiYs","margin-12":"QoTMlS","margin12":"QoTMlS","vPadding-12":"zAclLQ","vPadding12":"zAclLQ","vPadding-18":"By9D4e","vPadding18":"By9D4e","vPadding-24":"F5xSC-","vPadding24":"F5xSC-","vPadding-36":"dzKwku","vPadding36":"dzKwku","vPadding-48":"xqzxN6","vPadding48":"xqzxN6","spacing-6":"lZ3ljx","spacing6":"lZ3ljx","spacing-12":"qcG-ga","spacing12":"qcG-ga","spacing-18":"_0ccNe4","spacing18":"_0ccNe4","uui-surface-main":"niMg78","uuiSurfaceMain":"niMg78"};
|
|
1216
1186
|
|
|
1217
1187
|
const FlexCell = /* @__PURE__ */uuiCore.withMods(uuiComponents.FlexCell, () => [css$1i.flexCell]);
|
|
1218
1188
|
|
|
@@ -1236,7 +1206,7 @@ const FlexRow = /* @__PURE__ */uuiCore.withMods(uuiComponents.FlexRow, (props) =
|
|
|
1236
1206
|
];
|
|
1237
1207
|
});
|
|
1238
1208
|
|
|
1239
|
-
var css$1h = {"root":"
|
|
1209
|
+
var css$1h = {"root":"_4ir-Sd","margin-24":"CY630Z","margin24":"CY630Z","padding-12":"lY6v2K","padding12":"lY6v2K","padding-24":"_4JJWS1","padding24":"_4JJWS1","shadow":"PDmmV-","uui-surface-main":"vL-N-K","uuiSurfaceMain":"vL-N-K"};
|
|
1240
1210
|
|
|
1241
1211
|
const Panel = /* @__PURE__ */uuiCore.withMods(uuiComponents.VPanel, (props) => [
|
|
1242
1212
|
'uui-panel',
|
|
@@ -1246,7 +1216,7 @@ const Panel = /* @__PURE__ */uuiCore.withMods(uuiComponents.VPanel, (props) => [
|
|
|
1246
1216
|
props.background && css$1h[`uui-${props.background}`],
|
|
1247
1217
|
]);
|
|
1248
1218
|
|
|
1249
|
-
var css$1g = {"root":"
|
|
1219
|
+
var css$1g = {"root":"lnDOTK"};
|
|
1250
1220
|
|
|
1251
1221
|
function applyTooltipMods(mods) {
|
|
1252
1222
|
return [
|
|
@@ -1256,7 +1226,7 @@ function applyTooltipMods(mods) {
|
|
|
1256
1226
|
}
|
|
1257
1227
|
const Tooltip = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Tooltip, applyTooltipMods);
|
|
1258
1228
|
|
|
1259
|
-
var css$1f = {"uui-typography":"
|
|
1229
|
+
var css$1f = {"uui-typography":"_4xjaed","uuiTypography":"_4xjaed","hero-header":"vwPB7G","heroHeader":"vwPB7G","promo-header":"kp7Lw2","promoHeader":"kp7Lw2","uui-critical":"_2YbrOx","uuiCritical":"_2YbrOx","uui-info":"rFQfJK","uuiInfo":"rFQfJK","uui-success":"tSEss0","uuiSuccess":"tSEss0","uui-warning":"sE1ohF","uuiWarning":"sE1ohF","uui-highlight":"EwevZg","uuiHighlight":"EwevZg","uui-typography-size-12":"XOJDCB","uuiTypographySize12":"XOJDCB","uui-typography-size-14":"IhBu0o","uuiTypographySize14":"IhBu0o","uui-typography-size-16":"bo43Q6","uuiTypographySize16":"bo43Q6","root":"TmqS92"};
|
|
1260
1230
|
|
|
1261
1231
|
function applyLabeledInputMods(mods) {
|
|
1262
1232
|
return [
|
|
@@ -1270,7 +1240,7 @@ const LabeledInput = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.La
|
|
|
1270
1240
|
infoIcon: props.infoIcon || (settings.sizes.labeledInput.fillIcon.includes(props.size) ? ForwardRef$x : ForwardRef$M),
|
|
1271
1241
|
}));
|
|
1272
1242
|
|
|
1273
|
-
var css$1e = {"root":"
|
|
1243
|
+
var css$1e = {"root":"_5fYq2b"};
|
|
1274
1244
|
|
|
1275
1245
|
function RadioGroup(props) {
|
|
1276
1246
|
const direction = props.direction || 'vertical';
|
|
@@ -1279,13 +1249,13 @@ function RadioGroup(props) {
|
|
|
1279
1249
|
props.onValueChange(newVal);
|
|
1280
1250
|
}
|
|
1281
1251
|
};
|
|
1282
|
-
return (React__namespace.createElement("fieldset",
|
|
1283
|
-
const
|
|
1284
|
-
return (React__namespace.createElement(RadioInput,
|
|
1252
|
+
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) => {
|
|
1253
|
+
const { id, name, renderName, ...restItemProps } = i;
|
|
1254
|
+
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
1255
|
})));
|
|
1286
1256
|
}
|
|
1287
1257
|
|
|
1288
|
-
var css$1d = {"root":"
|
|
1258
|
+
var css$1d = {"root":"BcC8q-"};
|
|
1289
1259
|
|
|
1290
1260
|
function applyScrollBarsMods() {
|
|
1291
1261
|
return [
|
|
@@ -1294,13 +1264,13 @@ function applyScrollBarsMods() {
|
|
|
1294
1264
|
}
|
|
1295
1265
|
const ScrollBars = /* @__PURE__ */uuiCore.withMods(uuiComponents.ScrollBars, applyScrollBarsMods);
|
|
1296
1266
|
|
|
1297
|
-
var css$1c = {"scroll-container":"
|
|
1267
|
+
var css$1c = {"scroll-container":"jmgO1M","scrollContainer":"jmgO1M","list-container":"bxUvkw","listContainer":"bxUvkw"};
|
|
1298
1268
|
|
|
1299
|
-
var css$1b = {"root":"
|
|
1269
|
+
var css$1b = {"root":"VY3sn2"};
|
|
1300
1270
|
|
|
1301
1271
|
const AvatarStack = /* @__PURE__ */uuiCore.withMods(uuiComponents.AvatarStack, () => [css$1b.root]);
|
|
1302
1272
|
|
|
1303
|
-
var css$1a = {"uui-typography":"
|
|
1273
|
+
var css$1a = {"uui-typography":"xIlPVQ","uuiTypography":"xIlPVQ","hero-header":"MzZCK1","heroHeader":"MzZCK1","promo-header":"hbKsWN","promoHeader":"hbKsWN","uui-critical":"b-nnwg","uuiCritical":"b-nnwg","uui-info":"_98ZbRH","uuiInfo":"_98ZbRH","uui-success":"FtDqz3","uuiSuccess":"FtDqz3","uui-warning":"allxpt","uuiWarning":"allxpt","uui-highlight":"lVjaZg","uuiHighlight":"lVjaZg","uui-typography-size-12":"xE6yc7","uuiTypographySize12":"xE6yc7","uui-typography-size-14":"jBKr0r","uuiTypographySize14":"jBKr0r","uui-typography-size-16":"_800qeG","uuiTypographySize16":"_800qeG","root":"e6wCXG"};
|
|
1304
1274
|
|
|
1305
1275
|
const DEFAULT_FILL = 'solid';
|
|
1306
1276
|
function applyBadgeMods(mods) {
|
|
@@ -1315,7 +1285,11 @@ function applyBadgeMods(mods) {
|
|
|
1315
1285
|
const Badge = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
|
|
1316
1286
|
const styles = [applyBadgeMods(props), props.cx];
|
|
1317
1287
|
const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : systemIcons.foldingArrow;
|
|
1318
|
-
return (React__namespace.default.createElement(uuiComponents.Clickable,
|
|
1288
|
+
return (React__namespace.default.createElement(uuiComponents.Clickable, { ...props, rawProps: {
|
|
1289
|
+
'aria-haspopup': props.isDropdown,
|
|
1290
|
+
'aria-expanded': props.isOpen,
|
|
1291
|
+
...props.rawProps,
|
|
1292
|
+
}, cx: styles, ref: ref },
|
|
1319
1293
|
(props.indicator && props.fill === 'outline') && (React__namespace.default.createElement("div", { className: "uui-indicator" })),
|
|
1320
1294
|
props.icon && props.iconPosition !== 'right' && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
|
|
1321
1295
|
props.caption && (React__namespace.default.createElement("div", { className: uuiCore.uuiElement.caption }, props.caption)),
|
|
@@ -1324,7 +1298,7 @@ const Badge = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) =>
|
|
|
1324
1298
|
props.isDropdown && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
|
|
1325
1299
|
});
|
|
1326
1300
|
|
|
1327
|
-
var css$19 = {"uui-typography":"
|
|
1301
|
+
var css$19 = {"uui-typography":"wq4ucq","uuiTypography":"wq4ucq","hero-header":"KqwlHI","heroHeader":"KqwlHI","promo-header":"LTLeKb","promoHeader":"LTLeKb","uui-critical":"_07E-pu","uuiCritical":"_07E-pu","uui-info":"J3LXbi","uuiInfo":"J3LXbi","uui-success":"LgKXpt","uuiSuccess":"LgKXpt","uui-warning":"_2kGhrB","uuiWarning":"_2kGhrB","uui-highlight":"wdGk3P","uuiHighlight":"wdGk3P","uui-typography-size-12":"sd3cvI","uuiTypographySize12":"sd3cvI","uui-typography-size-14":"rVHw-0","uuiTypographySize14":"rVHw-0","uui-typography-size-16":"wywUg7","uuiTypographySize16":"wywUg7","root":"oJXgnE"};
|
|
1328
1302
|
|
|
1329
1303
|
function applyTagMods(props) {
|
|
1330
1304
|
return [
|
|
@@ -1339,7 +1313,11 @@ const Tag = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
|
|
|
1339
1313
|
const styles = [applyTagMods(props), props.cx];
|
|
1340
1314
|
const ClearIcon = props.clearIcon ? props.clearIcon : systemIcons.clear;
|
|
1341
1315
|
const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : systemIcons.foldingArrow;
|
|
1342
|
-
return (React__namespace.default.createElement(uuiComponents.Clickable,
|
|
1316
|
+
return (React__namespace.default.createElement(uuiComponents.Clickable, { ...props, rawProps: {
|
|
1317
|
+
'aria-haspopup': props.isDropdown,
|
|
1318
|
+
'aria-expanded': props.isOpen,
|
|
1319
|
+
...props.rawProps,
|
|
1320
|
+
}, cx: styles, ref: ref },
|
|
1343
1321
|
props.icon && props.iconPosition !== 'right' && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
|
|
1344
1322
|
props.caption && (React__namespace.default.createElement("div", { className: uuiCore.uuiElement.caption }, props.caption)),
|
|
1345
1323
|
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 +1326,7 @@ const Tag = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
|
|
|
1348
1326
|
props.onClear && !props.isDisabled && (React__namespace.default.createElement(uuiComponents.IconContainer, { cx: uuiCore.uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
|
|
1349
1327
|
});
|
|
1350
1328
|
|
|
1351
|
-
var css$18 = {"root":"
|
|
1329
|
+
var css$18 = {"root":"_5cQV3h","uui-spinner":"HICEMs","uuiSpinner":"HICEMs"};
|
|
1352
1330
|
|
|
1353
1331
|
function applySpinnerMods() {
|
|
1354
1332
|
return [css$18.root, 'uui-spinner'];
|
|
@@ -1385,31 +1363,31 @@ var SvgNavigationChevronRightOutline = function SvgNavigationChevronRightOutline
|
|
|
1385
1363
|
};
|
|
1386
1364
|
var ForwardRef$v = /*#__PURE__*/React.forwardRef(SvgNavigationChevronRightOutline);
|
|
1387
1365
|
|
|
1388
|
-
var css$17 = {"root":"
|
|
1366
|
+
var css$17 = {"root":"rfZ1MR","page":"iaPjDd","spacer":"dhT8Rd","mode-ghost":"HXewTQ","modeGhost":"HXewTQ"};
|
|
1389
1367
|
|
|
1390
1368
|
function Paginator(props) {
|
|
1391
|
-
const renderPaginator = (params) => (React__namespace.default.createElement("nav",
|
|
1369
|
+
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
1370
|
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
1371
|
params.pages.map((page, index) => {
|
|
1394
1372
|
if (page.type === 'spacer') {
|
|
1395
1373
|
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
1374
|
}
|
|
1397
1375
|
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: () =>
|
|
1376
|
+
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
1377
|
}
|
|
1400
1378
|
}),
|
|
1401
1379
|
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,
|
|
1380
|
+
return React__namespace.default.createElement(uuiComponents.Paginator, { ...props, render: renderPaginator });
|
|
1403
1381
|
}
|
|
1404
1382
|
|
|
1405
|
-
var css$16 = {"root":"
|
|
1383
|
+
var css$16 = {"root":"L8W6Et","progress-bar":"ey-Qki","progressBar":"ey-Qki","progressBar-indeterminate":"bGc9Dj","progressBarIndeterminate":"bGc9Dj","size-12":"-P49J8","size12":"-P49J8","size-18":"Fff-59","size18":"Fff-59","size-24":"X7MK5L","size24":"X7MK5L"};
|
|
1406
1384
|
|
|
1407
1385
|
const IndeterminateBar = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
1408
1386
|
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
1387
|
React__namespace.createElement("div", { className: cx__default.default(css$16.progressBar) })));
|
|
1410
1388
|
});
|
|
1411
1389
|
|
|
1412
|
-
var css$15 = {"root":"
|
|
1390
|
+
var css$15 = {"root":"dm6Lsw","striped":"QToOI8","animate-stripes":"RZ-aJ6","animateStripes":"RZ-aJ6","size-12":"lIzCJ3","size12":"lIzCJ3","size-18":"m5OxAN","size18":"m5OxAN","size-24":"_8csY9n","size24":"_8csY9n"};
|
|
1413
1391
|
|
|
1414
1392
|
const DEFAULT_SIZE = '12';
|
|
1415
1393
|
function applyProgressBarMods(mods) {
|
|
@@ -1424,14 +1402,14 @@ const ProgressBar = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Pro
|
|
|
1424
1402
|
hideLabel: props.hideLabel || props.striped,
|
|
1425
1403
|
}));
|
|
1426
1404
|
|
|
1427
|
-
var css$14 = {"root":"
|
|
1405
|
+
var css$14 = {"root":"Mx4t5x"};
|
|
1428
1406
|
|
|
1429
1407
|
const IndicatorBar = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
1430
1408
|
const { progress } = props;
|
|
1431
1409
|
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
1410
|
});
|
|
1433
1411
|
|
|
1434
|
-
var css$13 = {"root":"
|
|
1412
|
+
var css$13 = {"root":"jSRuJE"};
|
|
1435
1413
|
|
|
1436
1414
|
const StatusIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
|
|
1437
1415
|
return (React__namespace.default.createElement("div", { ref: ref, className: cx__default.default([
|
|
@@ -1446,10 +1424,9 @@ const StatusIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
|
|
|
1446
1424
|
React__namespace.default.createElement("p", { className: "uui-status_indicator-caption" }, props.caption)));
|
|
1447
1425
|
});
|
|
1448
1426
|
|
|
1449
|
-
var css$12 = {"drag-handle":"
|
|
1427
|
+
var css$12 = {"drag-handle":"kGciVq","dragHandle":"kGciVq","icon-container":"K6hEge","iconContainer":"K6hEge"};
|
|
1450
1428
|
|
|
1451
1429
|
function DataRowAddons(props) {
|
|
1452
|
-
var _a, _b;
|
|
1453
1430
|
const row = props.rowProps;
|
|
1454
1431
|
const getIndent = () => {
|
|
1455
1432
|
return (row.indent - 1) * (settings.sizes.rowAddons.indentUnit[props.size] || settings.sizes.rowAddons.defaults.indentUnit);
|
|
@@ -1458,8 +1435,8 @@ function DataRowAddons(props) {
|
|
|
1458
1435
|
return settings.sizes.rowAddons.indentWidth[props.size] || settings.sizes.rowAddons.defaults.indentWidth;
|
|
1459
1436
|
};
|
|
1460
1437
|
return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
|
|
1461
|
-
|
|
1462
|
-
|
|
1438
|
+
row.dnd?.srcData && React__namespace.default.createElement(uuiComponents.DragHandle, { key: "dh", cx: css$12.dragHandle, rawProps: { ...props.eventHandlers } }),
|
|
1439
|
+
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
1440
|
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
1441
|
'aria-label': row.isFolded ? 'Unfold' : 'Fold',
|
|
1465
1442
|
role: 'button',
|
|
@@ -1468,7 +1445,7 @@ function DataRowAddons(props) {
|
|
|
1468
1445
|
], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row), size: settings.sizes.rowAddons.icon[props.size] || settings.sizes.rowAddons.defaults.icon }))))));
|
|
1469
1446
|
}
|
|
1470
1447
|
|
|
1471
|
-
var css$11 = {"root":"
|
|
1448
|
+
var css$11 = {"root":"gGlBtQ"};
|
|
1472
1449
|
|
|
1473
1450
|
const Blocker = /* @__PURE__ */uuiCore.withMods(uuiComponents.Blocker, () => [css$11.root], (cmpProps) => ({ renderSpinner: cmpProps.renderSpinner || (() => React__namespace.default.createElement(Spinner, null)) }));
|
|
1474
1451
|
|
|
@@ -1482,17 +1459,13 @@ const VirtualList = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
|
1482
1459
|
});
|
|
1483
1460
|
React__namespace.useImperativeHandle(ref, () => scrollContainerRef.current, [scrollContainerRef.current]);
|
|
1484
1461
|
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
|
-
};
|
|
1462
|
+
const renderRows = () => props.renderRows?.({
|
|
1463
|
+
listContainerRef, estimatedHeight, offsetY, scrollShadows,
|
|
1464
|
+
}) || (React__namespace.createElement("div", { className: css$1c.listContainer, style: { minHeight: `${estimatedHeight}px` } },
|
|
1465
|
+
React__namespace.createElement("div", { ref: listContainerRef, role: props.role, style: { marginTop: offsetY } }, props.rows)));
|
|
1492
1466
|
const renderView = ({ style }) => (React__namespace.createElement(VirtualListView, { isLoading: props.isLoading, style: style, rawProps: props.rawProps }));
|
|
1493
1467
|
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))
|
|
1468
|
+
if (!scrollbars?.container?.firstChild)
|
|
1496
1469
|
return;
|
|
1497
1470
|
scrollContainerRef.current = scrollbars.container.firstChild;
|
|
1498
1471
|
}, []);
|
|
@@ -1505,11 +1478,20 @@ const VirtualList = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
|
1505
1478
|
});
|
|
1506
1479
|
const VirtualListView = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
1507
1480
|
return (React__namespace.createElement(React__namespace.Fragment, null,
|
|
1508
|
-
React__namespace.createElement("div",
|
|
1481
|
+
React__namespace.createElement("div", { ...props.rawProps, style: {
|
|
1482
|
+
...props.style,
|
|
1483
|
+
position: 'relative',
|
|
1484
|
+
flex: '1 1 auto',
|
|
1485
|
+
display: 'flex',
|
|
1486
|
+
flexDirection: 'column',
|
|
1487
|
+
overflow: props.isLoading ? 'hidden' : 'scroll',
|
|
1488
|
+
marginRight: props.isLoading ? 0 : props.style.marginRight,
|
|
1489
|
+
marginBottom: props.isLoading ? 0 : props.style.marginBottom,
|
|
1490
|
+
}, ref: ref }, props.children),
|
|
1509
1491
|
React__namespace.createElement(Blocker, { isEnabled: props.isLoading })));
|
|
1510
1492
|
});
|
|
1511
1493
|
|
|
1512
|
-
var css$10 = {"root":"
|
|
1494
|
+
var css$10 = {"root":"iIWMH2"};
|
|
1513
1495
|
|
|
1514
1496
|
function CheckboxGroup(props) {
|
|
1515
1497
|
const currentValue = props.value || [];
|
|
@@ -1525,13 +1507,13 @@ function CheckboxGroup(props) {
|
|
|
1525
1507
|
}
|
|
1526
1508
|
props.onValueChange(newSelection);
|
|
1527
1509
|
};
|
|
1528
|
-
return (React__namespace.createElement("fieldset",
|
|
1529
|
-
const
|
|
1530
|
-
return (React__namespace.createElement(Checkbox,
|
|
1510
|
+
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) => {
|
|
1511
|
+
const { id, name, renderName, ...restItemProps } = i;
|
|
1512
|
+
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
1513
|
})));
|
|
1532
1514
|
}
|
|
1533
1515
|
|
|
1534
|
-
var css$$ = {"uui-typography":"
|
|
1516
|
+
var css$$ = {"uui-typography":"PcJCQU","uuiTypography":"PcJCQU","hero-header":"_2dspKn","heroHeader":"_2dspKn","promo-header":"e-MPJs","promoHeader":"e-MPJs","uui-critical":"Si06V4","uuiCritical":"Si06V4","uui-info":"iGFaU5","uuiInfo":"iGFaU5","uui-success":"lmdfBL","uuiSuccess":"lmdfBL","uui-warning":"i6Sy--","uuiWarning":"i6Sy--","uui-highlight":"twJORj","uuiHighlight":"twJORj","uui-typography-size-12":"HGWqh6","uuiTypographySize12":"HGWqh6","uui-typography-size-14":"R1PDhL","uuiTypographySize14":"R1PDhL","uui-typography-size-16":"GQzO78","uuiTypographySize16":"GQzO78","root":"zGnbSN","modal-blocker":"geWQuv","modalBlocker":"geWQuv","animateModalBlocker":"XwnSN7","modal":"XN51uG","modal-footer":"hEzuvJ","modalFooter":"hEzuvJ","modal-header":"_3vMpLJ","modalHeader":"_3vMpLJ"};
|
|
1535
1517
|
|
|
1536
1518
|
const ModalBlocker = /* @__PURE__ */uuiCore.withMods(uuiComponents.ModalBlocker, () => [css$$.modalBlocker]);
|
|
1537
1519
|
const ModalWindow = /* @__PURE__ */uuiCore.withMods(uuiComponents.ModalWindow, () => [css$$.root, css$$.modal], (props) => {
|
|
@@ -1539,9 +1521,12 @@ const ModalWindow = /* @__PURE__ */uuiCore.withMods(uuiComponents.ModalWindow, (
|
|
|
1539
1521
|
const height = props.height || 'auto';
|
|
1540
1522
|
const maxHeight = uuiCore.isMobile() ? '100dvh' : (props.maxHeight || '80dvh');
|
|
1541
1523
|
return {
|
|
1542
|
-
style:
|
|
1524
|
+
style: {
|
|
1525
|
+
...props.style,
|
|
1526
|
+
width,
|
|
1543
1527
|
height,
|
|
1544
|
-
maxHeight
|
|
1528
|
+
maxHeight,
|
|
1529
|
+
},
|
|
1545
1530
|
};
|
|
1546
1531
|
});
|
|
1547
1532
|
class ModalHeader extends React__namespace.default.Component {
|
|
@@ -1564,27 +1549,33 @@ class ModalFooter extends React__namespace.default.Component {
|
|
|
1564
1549
|
}
|
|
1565
1550
|
}
|
|
1566
1551
|
|
|
1567
|
-
const TREE_SHAKEABLE_INIT = () => (
|
|
1552
|
+
const TREE_SHAKEABLE_INIT = () => ({
|
|
1553
|
+
...uuiCore.i18n,
|
|
1554
|
+
dataPickerBody: {
|
|
1568
1555
|
searchPlaceholder: 'Search',
|
|
1569
1556
|
noRecordsMessage: 'No records found',
|
|
1570
1557
|
noRecordsSubTitle: 'Check your spelling, or search for a different keyword',
|
|
1571
1558
|
typeSearchToLoadMessage: 'Type search to load items',
|
|
1572
|
-
},
|
|
1559
|
+
},
|
|
1560
|
+
pickerModal: {
|
|
1573
1561
|
headerTitle: 'Please select',
|
|
1574
1562
|
searchPlaceholder: 'Type text for quick search',
|
|
1575
1563
|
cancelButton: 'Cancel',
|
|
1576
1564
|
selectButton: 'Select',
|
|
1577
1565
|
clearAllButton: 'CLEAR ALL',
|
|
1578
1566
|
selectAllButton: 'SELECT ALL',
|
|
1579
|
-
},
|
|
1567
|
+
},
|
|
1568
|
+
pickerInput: {
|
|
1580
1569
|
showOnlySelectedLabel: 'Show only selected',
|
|
1581
1570
|
clearSelectionButton: 'CLEAR ALL',
|
|
1582
1571
|
clearSelectionButtonSingle: 'CLEAR',
|
|
1583
1572
|
selectAllButton: 'SELECT ALL',
|
|
1584
1573
|
doneButton: 'DONE',
|
|
1585
|
-
},
|
|
1574
|
+
},
|
|
1575
|
+
notificationCard: {
|
|
1586
1576
|
closeAllNotificationsButton: 'CLOSE ALL NOTIFICATIONS',
|
|
1587
|
-
},
|
|
1577
|
+
},
|
|
1578
|
+
form: {
|
|
1588
1579
|
notifications: {
|
|
1589
1580
|
actionButtonCaption: 'Restore',
|
|
1590
1581
|
unsavedChangesMessage: 'You have unsaved changes. Click Restore button if you would like to recover the data',
|
|
@@ -1594,10 +1585,12 @@ const TREE_SHAKEABLE_INIT = () => (Object.assign(Object.assign({}, uuiCore.i18n)
|
|
|
1594
1585
|
discardButton: 'Discard',
|
|
1595
1586
|
saveButton: 'Save',
|
|
1596
1587
|
},
|
|
1597
|
-
},
|
|
1588
|
+
},
|
|
1589
|
+
rangeDatePicker: {
|
|
1598
1590
|
pickerPlaceholderFrom: 'From:',
|
|
1599
1591
|
pickerPlaceholderTo: 'To:',
|
|
1600
|
-
},
|
|
1592
|
+
},
|
|
1593
|
+
tables: {
|
|
1601
1594
|
noResultsBlock: {
|
|
1602
1595
|
title: 'No results found',
|
|
1603
1596
|
message: 'We can’t find any item matching your request',
|
|
@@ -1631,10 +1624,12 @@ const TREE_SHAKEABLE_INIT = () => (Object.assign(Object.assign({}, uuiCore.i18n)
|
|
|
1631
1624
|
collapseAllTooltip: 'Collapse All',
|
|
1632
1625
|
expandAllTooltip: 'Expand All',
|
|
1633
1626
|
},
|
|
1634
|
-
},
|
|
1627
|
+
},
|
|
1628
|
+
pickerFilterHeader: {
|
|
1635
1629
|
sortAscending: 'Sort Ascending',
|
|
1636
1630
|
sortDescending: 'Sort Descending',
|
|
1637
|
-
},
|
|
1631
|
+
},
|
|
1632
|
+
filterToolbar: {
|
|
1638
1633
|
addCaption: 'Add filter',
|
|
1639
1634
|
datePicker: {
|
|
1640
1635
|
placeholder: 'Select date',
|
|
@@ -1649,19 +1644,24 @@ const TREE_SHAKEABLE_INIT = () => (Object.assign(Object.assign({}, uuiCore.i18n)
|
|
|
1649
1644
|
pickerInput: {
|
|
1650
1645
|
itemsPlaceholder: 'items',
|
|
1651
1646
|
},
|
|
1652
|
-
},
|
|
1647
|
+
},
|
|
1648
|
+
presetPanel: {
|
|
1653
1649
|
addCaption: 'Add Preset',
|
|
1654
|
-
},
|
|
1650
|
+
},
|
|
1651
|
+
confirmationModal: {
|
|
1655
1652
|
discardButton: 'Discard',
|
|
1656
1653
|
saveButton: 'Save',
|
|
1657
|
-
},
|
|
1654
|
+
},
|
|
1655
|
+
fileUpload: {
|
|
1658
1656
|
labelStart: 'Drop files to attach or',
|
|
1659
1657
|
browse: 'browse',
|
|
1660
1658
|
labelEnd: 'your local files',
|
|
1661
|
-
},
|
|
1659
|
+
},
|
|
1660
|
+
fileCard: {
|
|
1662
1661
|
fileSizeProgress: ' of ',
|
|
1663
1662
|
failedUploadErrorMessage: 'Upload failed',
|
|
1664
|
-
},
|
|
1663
|
+
},
|
|
1664
|
+
errorHandler: {
|
|
1665
1665
|
errorPageConfig: {
|
|
1666
1666
|
notFound: {
|
|
1667
1667
|
title: 'Oooops! We couldn’t find this page',
|
|
@@ -1703,7 +1703,8 @@ const TREE_SHAKEABLE_INIT = () => (Object.assign(Object.assign({}, uuiCore.i18n)
|
|
|
1703
1703
|
},
|
|
1704
1704
|
},
|
|
1705
1705
|
supportMessage: undefined,
|
|
1706
|
-
}
|
|
1706
|
+
},
|
|
1707
|
+
});
|
|
1707
1708
|
const i18n = /* @__PURE__ */TREE_SHAKEABLE_INIT();
|
|
1708
1709
|
|
|
1709
1710
|
var _path$u;
|
|
@@ -1721,42 +1722,40 @@ var SvgNotificationHelpFill = function SvgNotificationHelpFill(props, ref) {
|
|
|
1721
1722
|
};
|
|
1722
1723
|
var ForwardRef$u = /*#__PURE__*/React.forwardRef(SvgNotificationHelpFill);
|
|
1723
1724
|
|
|
1724
|
-
var css$_ = {"uui-typography":"
|
|
1725
|
+
var css$_ = {"uui-typography":"CZAYFo","uuiTypography":"CZAYFo","hero-header":"BxKsc3","heroHeader":"BxKsc3","promo-header":"aQFW-U","promoHeader":"aQFW-U","uui-critical":"x8nMNl","uuiCritical":"x8nMNl","uui-info":"DC9aFq","uuiInfo":"DC9aFq","uui-success":"eolrUt","uuiSuccess":"eolrUt","uui-warning":"_8JmCho","uuiWarning":"_8JmCho","uui-highlight":"_7RuEUp","uuiHighlight":"_7RuEUp","uui-typography-size-12":"Ym1GH0","uuiTypographySize12":"Ym1GH0","uui-typography-size-14":"tCyaZ7","uuiTypographySize14":"tCyaZ7","uui-typography-size-16":"iyvxZb","uuiTypographySize16":"iyvxZb","root":"xvCO-c","icon-wrapper":"tPCcOO","iconWrapper":"tPCcOO","action-wrapper":"-RHRAY","actionWrapper":"-RHRAY","action-link":"_3Km2iv","actionLink":"_3Km2iv","close-icon":"BYkV9j","closeIcon":"BYkV9j","main-path":"_747uoN","mainPath":"_747uoN","content":"uCUgt3","close-wrapper":"qn3-6x","closeWrapper":"qn3-6x","notification-wrapper":"y40bAg","notificationWrapper":"y40bAg","clear-button":"C40jGK","clearButton":"C40jGK"};
|
|
1725
1726
|
|
|
1726
1727
|
const NotificationCard = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
|
|
1727
1728
|
const notificationCardNode = React__namespace.default.useRef(null);
|
|
1728
1729
|
React__namespace.default.useImperativeHandle(ref, () => notificationCardNode.current, [notificationCardNode.current]);
|
|
1729
1730
|
React__namespace.default.useLayoutEffect(() => {
|
|
1730
|
-
|
|
1731
|
-
|
|
1732
|
-
(_b = notificationCardNode.current) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', props.refreshTimer);
|
|
1731
|
+
notificationCardNode.current?.addEventListener('mouseenter', props.clearTimer);
|
|
1732
|
+
notificationCardNode.current?.addEventListener('mouseleave', props.refreshTimer);
|
|
1733
1733
|
return () => {
|
|
1734
|
-
|
|
1735
|
-
|
|
1736
|
-
(_b = notificationCardNode.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', props.refreshTimer);
|
|
1734
|
+
notificationCardNode.current?.removeEventListener('mouseenter', props.clearTimer);
|
|
1735
|
+
notificationCardNode.current?.removeEventListener('mouseleave', props.refreshTimer);
|
|
1737
1736
|
};
|
|
1738
1737
|
}, []);
|
|
1739
|
-
return (React__namespace.default.createElement("div",
|
|
1738
|
+
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
1739
|
React__namespace.default.createElement("div", { className: css$_.mainPath },
|
|
1741
1740
|
props.icon && (React__namespace.default.createElement("div", { className: css$_.iconWrapper },
|
|
1742
1741
|
React__namespace.default.createElement(uuiComponents.IconContainer, { size: 24, icon: props.icon }))),
|
|
1743
1742
|
React__namespace.default.createElement("div", { className: css$_.content },
|
|
1744
1743
|
props.children,
|
|
1745
|
-
props.actions && (React__namespace.default.createElement("div", { className: css$_.actionWrapper }, props.actions.map((action) => (React__namespace.default.createElement(LinkButton, {
|
|
1744
|
+
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
1745
|
props.onClose && (React__namespace.default.createElement("div", { className: css$_.closeWrapper },
|
|
1747
1746
|
React__namespace.default.createElement(IconButton, { icon: ForwardRef$R, color: "neutral", onClick: props.onClose, cx: css$_.closeIcon }))))));
|
|
1748
1747
|
});
|
|
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,
|
|
1748
|
+
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 })));
|
|
1749
|
+
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 })));
|
|
1750
|
+
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 })));
|
|
1751
|
+
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
1752
|
function ClearNotification() {
|
|
1754
1753
|
const uuiCtx = uuiCore.useUuiContext();
|
|
1755
1754
|
return (React__namespace.default.createElement("div", { className: cx__default.default(css$_.notificationWrapper, css$_.clearButton) },
|
|
1756
1755
|
React__namespace.default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => uuiCtx.uuiNotifications.clearAll() })));
|
|
1757
1756
|
}
|
|
1758
1757
|
|
|
1759
|
-
var css$Z = {"footer":"
|
|
1758
|
+
var css$Z = {"footer":"_4kWTPD"};
|
|
1760
1759
|
|
|
1761
1760
|
class ConfirmationModal extends React__namespace.Component {
|
|
1762
1761
|
render() {
|
|
@@ -1764,7 +1763,7 @@ class ConfirmationModal extends React__namespace.Component {
|
|
|
1764
1763
|
if (this.props.bodyContent) {
|
|
1765
1764
|
bodyContent = React__namespace.createElement(Panel, { background: "surface-main", margin: "24" }, this.props.bodyContent);
|
|
1766
1765
|
}
|
|
1767
|
-
return (React__namespace.createElement(ModalBlocker,
|
|
1766
|
+
return (React__namespace.createElement(ModalBlocker, { ...this.props },
|
|
1768
1767
|
React__namespace.createElement(ModalWindow, { width: 420 },
|
|
1769
1768
|
React__namespace.createElement(ModalHeader, { borderBottom: true, title: this.props.caption, onClose: () => this.props.abort() }),
|
|
1770
1769
|
React__namespace.createElement(ScrollBars, null, bodyContent),
|
|
@@ -1798,7 +1797,7 @@ function useReliableForceUpdate() {
|
|
|
1798
1797
|
return red[1];
|
|
1799
1798
|
}
|
|
1800
1799
|
|
|
1801
|
-
var css$Y = {"root":"
|
|
1800
|
+
var css$Y = {"root":"_4RM2CO","timepicker-input":"_1QeGxW","timepickerInput":"_1QeGxW","ltr-always":"panouP","ltrAlways":"panouP"};
|
|
1802
1801
|
|
|
1803
1802
|
const uuiTimePicker = {
|
|
1804
1803
|
container: 'uui-timepicker-container',
|
|
@@ -1837,7 +1836,7 @@ function TimePickerBody(props) {
|
|
|
1837
1836
|
const minutesToSubtract = value.minute() % minutesStep === 0 ? minutesStep : value.minute() % minutesStep;
|
|
1838
1837
|
onMinutesChange(value.subtract(minutesToSubtract, 'm').minute());
|
|
1839
1838
|
};
|
|
1840
|
-
return (React__namespace.createElement("div",
|
|
1839
|
+
return (React__namespace.createElement("div", { className: uuiCore.cx(css$Y.root, uuiTimePicker.container, props.cx), ref: props.forwardedRef, ...props.rawProps },
|
|
1841
1840
|
React__namespace.createElement("div", { className: css$Y.ltrAlways },
|
|
1842
1841
|
React__namespace.createElement("div", { className: uuiTimePicker.elementContainer },
|
|
1843
1842
|
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 +1918,11 @@ function TimePicker(props) {
|
|
|
1919
1918
|
React.useEffect(() => {
|
|
1920
1919
|
if (valueToTimeString(props.value, props.format) !== state.value) {
|
|
1921
1920
|
const stringValue = valueToTimeString(props.value, props.format);
|
|
1922
|
-
setState((prevState) => (
|
|
1921
|
+
setState((prevState) => ({
|
|
1922
|
+
...prevState,
|
|
1923
|
+
value: stringValue,
|
|
1924
|
+
inputValue: stringValue,
|
|
1925
|
+
}));
|
|
1923
1926
|
}
|
|
1924
1927
|
}, [props.value, props.format]);
|
|
1925
1928
|
const getFormat = () => props.format === 24 ? 'HH:mm' : 'hh:mm A';
|
|
@@ -1935,10 +1938,10 @@ function TimePicker(props) {
|
|
|
1935
1938
|
props.onValueChange(null);
|
|
1936
1939
|
};
|
|
1937
1940
|
const onToggle = (value) => {
|
|
1938
|
-
setState((prevState) => (
|
|
1941
|
+
setState((prevState) => ({ ...prevState, isOpen: value }));
|
|
1939
1942
|
};
|
|
1940
1943
|
const saveTime = (newTime) => {
|
|
1941
|
-
setState((prevState) => (
|
|
1944
|
+
setState((prevState) => ({ ...prevState, inputValue: newTime }));
|
|
1942
1945
|
props.onValueChange(formatStringTimeToObject(newTime));
|
|
1943
1946
|
};
|
|
1944
1947
|
const getTimeFromInputValue = (newValue) => {
|
|
@@ -1953,45 +1956,41 @@ function TimePicker(props) {
|
|
|
1953
1956
|
saveTime(inputValue);
|
|
1954
1957
|
};
|
|
1955
1958
|
const handleFocus = (e) => {
|
|
1956
|
-
var _a;
|
|
1957
1959
|
onToggle(true);
|
|
1958
|
-
|
|
1960
|
+
props.onFocus?.(e);
|
|
1959
1961
|
};
|
|
1960
1962
|
const handleInputChange = (newValue) => {
|
|
1961
|
-
setState((prevState) => (
|
|
1963
|
+
setState((prevState) => ({ ...prevState, inputValue: newValue }));
|
|
1962
1964
|
if (newValue) {
|
|
1963
1965
|
const result = getTimeFromInputValue(newValue);
|
|
1964
1966
|
if (isTimeValid(result)) {
|
|
1965
|
-
setState((prevState) => (
|
|
1967
|
+
setState((prevState) => ({ ...prevState, value: result }));
|
|
1966
1968
|
}
|
|
1967
1969
|
}
|
|
1968
1970
|
};
|
|
1969
1971
|
const handleBlur = (e) => {
|
|
1970
|
-
var _a;
|
|
1971
1972
|
if (uuiCore.isFocusReceiverInsideFocusLock(e))
|
|
1972
1973
|
return;
|
|
1973
1974
|
onToggle(false);
|
|
1974
|
-
|
|
1975
|
+
props.onBlur?.(e);
|
|
1975
1976
|
if (state.value === '' || state.inputValue === '') {
|
|
1976
1977
|
props.onValueChange(null);
|
|
1977
|
-
setState((prevState) => (
|
|
1978
|
+
setState((prevState) => ({ ...prevState, value: null, inputValue: null }));
|
|
1978
1979
|
}
|
|
1979
1980
|
state.value && state.inputValue && saveTime(state.value);
|
|
1980
1981
|
};
|
|
1981
1982
|
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 })));
|
|
1983
|
+
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
1984
|
};
|
|
1985
1985
|
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 })))));
|
|
1986
|
+
const { forwardedRef, onValueChange, ...timePickerBodyProps } = props;
|
|
1987
|
+
return (!props.isDisabled && !props.isReadonly && (React__namespace.default.createElement(DropdownContainer, { ...bodyProps, focusLock: false },
|
|
1988
|
+
React__namespace.default.createElement(TimePickerBody, { ...timePickerBodyProps, onValueChange: handleBodyValueChange, value: formatStringTimeToObject(state.value), rawProps: props.rawProps?.body, cx: props.bodyCx }))));
|
|
1990
1989
|
};
|
|
1991
1990
|
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
1991
|
}
|
|
1993
1992
|
|
|
1994
|
-
var css$X = {"root":"
|
|
1993
|
+
var css$X = {"root":"gL1sKD"};
|
|
1995
1994
|
|
|
1996
1995
|
function applyInputAddonMods() {
|
|
1997
1996
|
return [
|
|
@@ -2000,7 +1999,7 @@ function applyInputAddonMods() {
|
|
|
2000
1999
|
}
|
|
2001
2000
|
const InputAddon = /* @__PURE__ */uuiCore.withMods(uuiComponents.InputAddon, applyInputAddonMods);
|
|
2002
2001
|
|
|
2003
|
-
var css$W = {"root":"
|
|
2002
|
+
var css$W = {"root":"fxU8Fs"};
|
|
2004
2003
|
|
|
2005
2004
|
function applySliderMods() {
|
|
2006
2005
|
return [css$W.root, 'uui-color-neutral'];
|
|
@@ -2023,7 +2022,7 @@ var SvgStarFilled = function SvgStarFilled(props, ref) {
|
|
|
2023
2022
|
};
|
|
2024
2023
|
var ForwardRef$t = /*#__PURE__*/React.forwardRef(SvgStarFilled);
|
|
2025
2024
|
|
|
2026
|
-
var css$V = {"root":"
|
|
2025
|
+
var css$V = {"root":"lHLS0l","tooltip":"DgL4WT"};
|
|
2027
2026
|
|
|
2028
2027
|
function applyRatingMods(mods) {
|
|
2029
2028
|
return [
|
|
@@ -2059,17 +2058,16 @@ const getMonthOnOpen = (selectedDate, focus) => {
|
|
|
2059
2058
|
return uuiDayjs.dayjs(selectedDate[focus]);
|
|
2060
2059
|
}
|
|
2061
2060
|
else if (selectedDate.from) {
|
|
2062
|
-
return uuiDayjs.dayjs(selectedDate
|
|
2061
|
+
return uuiDayjs.dayjs(selectedDate?.from);
|
|
2063
2062
|
}
|
|
2064
2063
|
else if (selectedDate.to) {
|
|
2065
|
-
return uuiDayjs.dayjs(selectedDate
|
|
2064
|
+
return uuiDayjs.dayjs(selectedDate?.to);
|
|
2066
2065
|
}
|
|
2067
2066
|
return uuiDayjs.dayjs();
|
|
2068
2067
|
};
|
|
2069
2068
|
const isValidDate = (input, format, filter) => {
|
|
2070
|
-
var _a, _b;
|
|
2071
2069
|
const parsedDate = uuiDayjs.dayjs(input, supportedDateFormats(format), true);
|
|
2072
|
-
return
|
|
2070
|
+
return parsedDate.isValid() ?? filter?.(parsedDate) ?? true;
|
|
2073
2071
|
};
|
|
2074
2072
|
const isValidRange = (range) => {
|
|
2075
2073
|
const from = uuiDayjs.dayjs(range.from);
|
|
@@ -2165,7 +2163,7 @@ const getNextYearsList = (currentDate) => {
|
|
|
2165
2163
|
return currentDate.add(16, 'year');
|
|
2166
2164
|
};
|
|
2167
2165
|
|
|
2168
|
-
var css$U = {"root":"
|
|
2166
|
+
var css$U = {"root":"qJiRTX","container":"_0E-6Hm"};
|
|
2169
2167
|
|
|
2170
2168
|
const uuiHeader = {
|
|
2171
2169
|
container: 'uui-datepicker-header-container',
|
|
@@ -2249,14 +2247,14 @@ function DatePickerHeader({ navIconLeft, navIconRight, value: { month, view }, o
|
|
|
2249
2247
|
React__namespace.createElement(Button, { icon: navIconRight || ForwardRef$v, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: !isDisabled && (() => onRightNavigationArrow()), isDisabled: disableNext }))));
|
|
2250
2248
|
}
|
|
2251
2249
|
|
|
2252
|
-
var css$T = {"uui-typography":"
|
|
2250
|
+
var css$T = {"uui-typography":"Z0cI8G","uuiTypography":"Z0cI8G","hero-header":"UDgVzL","heroHeader":"UDgVzL","promo-header":"PIbyzs","promoHeader":"PIbyzs","uui-critical":"V18Gww","uuiCritical":"V18Gww","uui-info":"SoD5AR","uuiInfo":"SoD5AR","uui-success":"lJbLX6","uuiSuccess":"lJbLX6","uui-warning":"XynYGR","uuiWarning":"XynYGR","uui-highlight":"ONRFIU","uuiHighlight":"ONRFIU","uui-typography-size-12":"xpCIVi","uuiTypographySize12":"xpCIVi","uui-typography-size-14":"-puFet","uuiTypographySize14":"-puFet","uui-typography-size-16":"f9VjEs","uuiTypographySize16":"f9VjEs","root":"LFGtLd"};
|
|
2253
2251
|
|
|
2254
2252
|
function applyDateSelectionMods() {
|
|
2255
2253
|
return [css$T.root, `uui-size-${settings.sizes.defaults.datePicker}`];
|
|
2256
2254
|
}
|
|
2257
2255
|
const Calendar = /* @__PURE__ */uuiCore.withMods(uuiComponents.Calendar, applyDateSelectionMods);
|
|
2258
2256
|
|
|
2259
|
-
var css$S = {"uui-typography":"
|
|
2257
|
+
var css$S = {"uui-typography":"gJ9zSy","uuiTypography":"gJ9zSy","hero-header":"QWPvIb","heroHeader":"QWPvIb","promo-header":"KfRTte","promoHeader":"KfRTte","uui-critical":"dh-1ET","uuiCritical":"dh-1ET","uui-info":"Go0CjT","uuiInfo":"Go0CjT","uui-success":"RhjXWt","uuiSuccess":"RhjXWt","uui-warning":"-dkwvk","uuiWarning":"-dkwvk","uui-highlight":"lgqtsd","uuiHighlight":"lgqtsd","uui-typography-size-12":"j5Kfwd","uuiTypographySize12":"j5Kfwd","uui-typography-size-14":"PPqszV","uuiTypographySize14":"PPqszV","uui-typography-size-16":"CQxE2t","uuiTypographySize16":"CQxE2t","root":"IlD0DJ"};
|
|
2260
2258
|
|
|
2261
2259
|
const uuiDatePickerBody = {
|
|
2262
2260
|
wrapper: 'uui-datepicker-body-wrapper',
|
|
@@ -2271,7 +2269,7 @@ function DatePickerBodyComp(props, ref) {
|
|
|
2271
2269
|
setMonth(getNewMonth(value));
|
|
2272
2270
|
setView('DAY_SELECTION');
|
|
2273
2271
|
}, [value, setMonth]);
|
|
2274
|
-
return (React__namespace.default.createElement(StatelessDatePickerBody,
|
|
2272
|
+
return (React__namespace.default.createElement(StatelessDatePickerBody, { ref: ref, ...props, month: month, view: view, onValueChange: onValueChange, onMonthChange: (m) => setMonth(m), onViewChange: (v) => setView(v) }));
|
|
2275
2273
|
}
|
|
2276
2274
|
const StatelessDatePickerBody = /* @__PURE__ */React.forwardRef(StatelessDatePickerBodyComp);
|
|
2277
2275
|
function StatelessDatePickerBodyComp({ renderDay, isHoliday, cx: classes, filter, rawProps, value, month, view, onValueChange, onMonthChange, onViewChange, isDisabled, }, ref) {
|
|
@@ -2299,7 +2297,7 @@ function StatelessDatePickerBodyComp({ renderDay, isHoliday, cx: classes, filter
|
|
|
2299
2297
|
return (React__namespace.default.createElement(Calendar, { value: selectedDate, month: month, onValueChange: onDayClick, filter: filter, renderDay: renderDay, isHoliday: isHoliday, isDisabled: isDisabled }));
|
|
2300
2298
|
}
|
|
2301
2299
|
};
|
|
2302
|
-
return (React__namespace.default.createElement("div",
|
|
2300
|
+
return (React__namespace.default.createElement("div", { ref: ref, className: uuiCore.cx(uuiDatePickerBodyBase.container, `uui-size-${settings.sizes.defaults.datePicker}`, classes), ...rawProps },
|
|
2303
2301
|
React__namespace.default.createElement("div", { className: uuiCore.cx(css$S.root, uuiDatePickerBody.wrapper) },
|
|
2304
2302
|
React__namespace.default.createElement(DatePickerHeader, { value: {
|
|
2305
2303
|
view,
|
|
@@ -2339,8 +2337,7 @@ function DatePickerComponent(props, ref) {
|
|
|
2339
2337
|
setBodyIsOpen(false);
|
|
2340
2338
|
};
|
|
2341
2339
|
const onBlur = (e) => {
|
|
2342
|
-
|
|
2343
|
-
(_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
|
|
2340
|
+
props.onBlur?.(e);
|
|
2344
2341
|
if (isValidDate(inputValue, format, props.filter)) {
|
|
2345
2342
|
setInputValue(toCustomDateFormat(inputValue, format));
|
|
2346
2343
|
onValueChange(toValueDateFormat(inputValue, format));
|
|
@@ -2357,37 +2354,33 @@ function DatePickerComponent(props, ref) {
|
|
|
2357
2354
|
}
|
|
2358
2355
|
};
|
|
2359
2356
|
const renderInput = (renderProps) => {
|
|
2360
|
-
var _a;
|
|
2361
2357
|
const allowClear = !props.disableClear && !!inputValue;
|
|
2362
|
-
return (React__namespace.default.createElement(TextInput,
|
|
2358
|
+
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: props.size || settings.sizes.defaults.datePicker, value: inputValue || undefined, onValueChange: (v) => {
|
|
2363
2359
|
setInputValue(v || '');
|
|
2364
2360
|
}, onCancel: allowClear ? () => {
|
|
2365
2361
|
if (!props.disableClear && !!inputValue) {
|
|
2366
2362
|
onValueChange(null);
|
|
2367
2363
|
}
|
|
2368
2364
|
} : 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 })));
|
|
2365
|
+
props.onFocus?.(e);
|
|
2366
|
+
}, onKeyDown: onInputKeyDown, onBlur: onBlur, mode: props.mode || defaultMode$1, rawProps: props.rawProps?.input, id: props.id }));
|
|
2372
2367
|
};
|
|
2373
2368
|
const renderBody = (renderProps) => {
|
|
2374
|
-
|
|
2375
|
-
|
|
2376
|
-
|
|
2377
|
-
_b.call(props)));
|
|
2369
|
+
return (React__namespace.default.createElement(DropdownContainer, { ...renderProps },
|
|
2370
|
+
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 }),
|
|
2371
|
+
props.renderFooter?.()));
|
|
2378
2372
|
};
|
|
2379
2373
|
return (React__namespace.default.createElement(uuiComponents.Dropdown, { value: isBodyOpen, modifiers: modifiers$1, placement: props.placement, forwardedRef: ref, onValueChange: (v) => {
|
|
2380
2374
|
setBodyIsOpen(v);
|
|
2381
2375
|
}, renderTarget: (renderProps) => {
|
|
2382
|
-
|
|
2383
|
-
return ((_a = props.renderTarget) === null || _a === void 0 ? void 0 : _a.call(props, renderProps)) || renderInput(renderProps);
|
|
2376
|
+
return props.renderTarget?.(renderProps) || renderInput(renderProps);
|
|
2384
2377
|
}, renderBody: (renderProps) => {
|
|
2385
2378
|
return renderBody(renderProps);
|
|
2386
2379
|
} }));
|
|
2387
2380
|
}
|
|
2388
2381
|
const DatePicker = /* @__PURE__ */React__namespace.default.forwardRef(DatePickerComponent);
|
|
2389
2382
|
|
|
2390
|
-
var css$R = {"uui-typography":"
|
|
2383
|
+
var css$R = {"uui-typography":"_7MBEMg","uuiTypography":"_7MBEMg","hero-header":"-snyf3","heroHeader":"-snyf3","promo-header":"_096iuy","promoHeader":"_096iuy","uui-critical":"_53TpPX","uuiCritical":"_53TpPX","uui-info":"b88Fw2","uuiInfo":"b88Fw2","uui-success":"pxsrHI","uuiSuccess":"pxsrHI","uui-warning":"-gEboM","uuiWarning":"-gEboM","uui-highlight":"oTp6lu","uuiHighlight":"oTp6lu","uui-typography-size-12":"bvGb5l","uuiTypographySize12":"bvGb5l","uui-typography-size-14":"PPlk4K","uuiTypographySize14":"PPlk4K","uui-typography-size-16":"gcof0s","uuiTypographySize16":"gcof0s","date-input":"qjl16p","dateInput":"qjl16p","root":"hw63md","separator":"KOEopA","mode-form":"RImX4X","modeForm":"RImX4X","mode-cell":"vbvFko","modeCell":"vbvFko"};
|
|
2391
2384
|
|
|
2392
2385
|
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
2386
|
const [inputValue, setInputValue] = React.useState(toCustomDateRangeFormat(value, format));
|
|
@@ -2395,21 +2388,30 @@ const RangeDatePickerInput = /* @__PURE__ */React.forwardRef(({ isDisabled, isIn
|
|
|
2395
2388
|
setInputValue(toCustomDateRangeFormat(value, format));
|
|
2396
2389
|
}, [format, value, setInputValue]);
|
|
2397
2390
|
const onInputChange = (newValue, inputType) => {
|
|
2398
|
-
setInputValue(
|
|
2391
|
+
setInputValue({
|
|
2392
|
+
...inputValue,
|
|
2393
|
+
[inputType]: newValue,
|
|
2394
|
+
});
|
|
2399
2395
|
};
|
|
2400
2396
|
const handleFocus = (event, inputType) => {
|
|
2401
2397
|
onFocusInput(event, inputType);
|
|
2402
2398
|
};
|
|
2403
2399
|
const handleBlur = (event, inputType) => {
|
|
2404
|
-
onBlurInput
|
|
2400
|
+
onBlurInput?.(event, inputType);
|
|
2405
2401
|
const selectedDate = toValueDateRangeFormat(inputValue, format);
|
|
2406
2402
|
if (isValidRange(selectedDate) && (!filter || filter(uuiDayjs.dayjs(selectedDate[inputType])))) {
|
|
2407
2403
|
setInputValue(toCustomDateRangeFormat(selectedDate, format));
|
|
2408
2404
|
onValueChange(selectedDate);
|
|
2409
2405
|
}
|
|
2410
2406
|
else {
|
|
2411
|
-
setInputValue(
|
|
2412
|
-
|
|
2407
|
+
setInputValue({
|
|
2408
|
+
...inputValue,
|
|
2409
|
+
[inputType]: null,
|
|
2410
|
+
});
|
|
2411
|
+
onValueChange({
|
|
2412
|
+
...selectedDate,
|
|
2413
|
+
[inputType]: null,
|
|
2414
|
+
});
|
|
2413
2415
|
}
|
|
2414
2416
|
};
|
|
2415
2417
|
const onInputKeyDown = (e) => {
|
|
@@ -2422,14 +2424,14 @@ const RangeDatePickerInput = /* @__PURE__ */React.forwardRef(({ isDisabled, isIn
|
|
|
2422
2424
|
return (
|
|
2423
2425
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
2424
2426
|
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
|
|
2427
|
+
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
2428
|
React__namespace.default.createElement("div", { className: css$R.separator }),
|
|
2427
2429
|
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
2430
|
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
|
|
2431
|
+
} : 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
2432
|
});
|
|
2431
2433
|
|
|
2432
|
-
var css$Q = {"uui-typography":"
|
|
2434
|
+
var css$Q = {"uui-typography":"qGiMQ3","uuiTypography":"qGiMQ3","hero-header":"_7BHSDp","heroHeader":"_7BHSDp","promo-header":"oBkLyU","promoHeader":"oBkLyU","uui-critical":"Df10aj","uuiCritical":"Df10aj","uui-info":"yVwrk2","uuiInfo":"yVwrk2","uui-success":"lqRL02","uuiSuccess":"lqRL02","uui-warning":"TZbnPf","uuiWarning":"TZbnPf","uui-highlight":"NzA8-I","uuiHighlight":"NzA8-I","uui-typography-size-12":"vdBLxF","uuiTypographySize12":"vdBLxF","uui-typography-size-14":"wCrKFk","uuiTypographySize14":"wCrKFk","uui-typography-size-16":"f7jjTT","uuiTypographySize16":"f7jjTT","root":"xzvvfF"};
|
|
2433
2435
|
|
|
2434
2436
|
const uuiPresets = {
|
|
2435
2437
|
container: 'uui-presets-container',
|
|
@@ -2437,15 +2439,19 @@ const uuiPresets = {
|
|
|
2437
2439
|
item: 'uui-presets-item',
|
|
2438
2440
|
};
|
|
2439
2441
|
const getPresets = (presets) => {
|
|
2440
|
-
return Object.keys(presets).map((key) => (
|
|
2442
|
+
return Object.keys(presets).map((key) => ({
|
|
2443
|
+
...presets[key].getRange(),
|
|
2444
|
+
name: presets[key].name,
|
|
2445
|
+
key,
|
|
2446
|
+
})).sort((a, b) => a.order - b.order);
|
|
2441
2447
|
};
|
|
2442
2448
|
function CalendarPresets(props) {
|
|
2443
|
-
return (React__namespace.createElement("div",
|
|
2449
|
+
return (React__namespace.createElement("div", { ref: props.forwardedRef, className: uuiCore.cx(uuiPresets.container, css$Q.root, props.cx), ...props.rawProps },
|
|
2444
2450
|
React__namespace.createElement("div", { className: uuiPresets.header }, "Presets"),
|
|
2445
2451
|
getPresets(props.presets).map((item) => (React__namespace.createElement(LinkButton, { key: item.key, caption: item.name, onClick: () => props.onPresetSet(item), size: "24" })))));
|
|
2446
2452
|
}
|
|
2447
2453
|
|
|
2448
|
-
var css$P = {"uui-typography":"
|
|
2454
|
+
var css$P = {"uui-typography":"gw-vJC","uuiTypography":"gw-vJC","hero-header":"C3yLSv","heroHeader":"C3yLSv","promo-header":"L-qEqQ","promoHeader":"L-qEqQ","uui-critical":"hbT472","uuiCritical":"hbT472","uui-info":"oShiq5","uuiInfo":"oShiq5","uui-success":"vm8ATp","uuiSuccess":"vm8ATp","uui-warning":"lfDUer","uuiWarning":"lfDUer","uui-highlight":"DUWKBA","uuiHighlight":"DUWKBA","uui-typography-size-12":"pu8wpX","uuiTypographySize12":"pu8wpX","uui-typography-size-14":"XAoAZc","uuiTypographySize14":"XAoAZc","uui-typography-size-16":"LWVgDa","uuiTypographySize16":"LWVgDa","root":"iAXGQj","container":"yOZGvB","day-selection":"Gv8DYV","daySelection":"Gv8DYV","from-picker":"_0Zj3Kr","fromPicker":"_0Zj3Kr","to-picker":"DpxWFp","toPicker":"DpxWFp","bodes-wrapper":"H1G-0z","bodesWrapper":"H1G-0z","blocker":"_9MZGNA"};
|
|
2449
2455
|
|
|
2450
2456
|
const uuiRangeDatePickerBody = {
|
|
2451
2457
|
inRange: 'uui-range-datepicker-in-range',
|
|
@@ -2543,8 +2549,8 @@ function RangeDatePickerBodyComp(props, ref) {
|
|
|
2543
2549
|
// selectedDate can be null, other params should always have values
|
|
2544
2550
|
const newRange = v ? getRange(v) : selectedDate;
|
|
2545
2551
|
let newInFocus = null;
|
|
2546
|
-
const fromChanged = selectedDate.from !==
|
|
2547
|
-
const toChanged = selectedDate.to !==
|
|
2552
|
+
const fromChanged = selectedDate.from !== newRange?.from;
|
|
2553
|
+
const toChanged = selectedDate.to !== newRange?.to;
|
|
2548
2554
|
if (inFocus === 'from' && fromChanged) {
|
|
2549
2555
|
newInFocus = 'to';
|
|
2550
2556
|
}
|
|
@@ -2554,11 +2560,11 @@ function RangeDatePickerBodyComp(props, ref) {
|
|
|
2554
2560
|
setActiveMonth(part);
|
|
2555
2561
|
props.onValueChange({
|
|
2556
2562
|
selectedDate: newRange ? newRange : selectedDate,
|
|
2557
|
-
inFocus: newInFocus
|
|
2563
|
+
inFocus: newInFocus ?? inFocus,
|
|
2558
2564
|
});
|
|
2559
2565
|
};
|
|
2560
2566
|
const renderDay = (renderProps) => {
|
|
2561
|
-
return (React__namespace.default.createElement(uuiComponents.Day,
|
|
2567
|
+
return (React__namespace.default.createElement(uuiComponents.Day, { ...renderProps, cx: getDayCX(renderProps.value, selectedDate) }));
|
|
2562
2568
|
};
|
|
2563
2569
|
const from = {
|
|
2564
2570
|
month,
|
|
@@ -2586,17 +2592,17 @@ function RangeDatePickerBodyComp(props, ref) {
|
|
|
2586
2592
|
});
|
|
2587
2593
|
}, presets: presets })));
|
|
2588
2594
|
};
|
|
2589
|
-
return (React__namespace.default.createElement("div",
|
|
2595
|
+
return (React__namespace.default.createElement("div", { ref: ref, className: uuiCore.cx(css$P.root, uuiDatePickerBodyBase.container, props.cx), ...props.rawProps },
|
|
2590
2596
|
React__namespace.default.createElement(FlexRow, { cx: [view === 'DAY_SELECTION' && css$P.daySelection, css$P.container], alignItems: "top" },
|
|
2591
2597
|
React__namespace.default.createElement(FlexCell, { width: "auto" },
|
|
2592
2598
|
React__namespace.default.createElement(FlexRow, null,
|
|
2593
2599
|
React__namespace.default.createElement(FlexRow, { cx: css$P.bodesWrapper, alignItems: "top" },
|
|
2594
|
-
React__namespace.default.createElement(StatelessDatePickerBody,
|
|
2600
|
+
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
2601
|
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,
|
|
2602
|
+
}, onViewChange: (v) => setView(v), filter: props.filter, isHoliday: props.isHoliday, renderDay: props.renderDay || renderDay, isDisabled: view !== 'DAY_SELECTION' && activeMonth === 'to' }),
|
|
2603
|
+
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
2604
|
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' })
|
|
2605
|
+
}, onViewChange: (v) => setView(v), filter: props.filter, renderDay: props.renderDay || renderDay, isHoliday: props.isHoliday, isDisabled: view !== 'DAY_SELECTION' && activeMonth === 'from' }),
|
|
2600
2606
|
view !== 'DAY_SELECTION' && (React__namespace.default.createElement("div", { style: {
|
|
2601
2607
|
left: activeMonth === 'from' ? '50%' : undefined,
|
|
2602
2608
|
right: activeMonth === 'to' ? '50%' : undefined,
|
|
@@ -2606,9 +2612,9 @@ function RangeDatePickerBodyComp(props, ref) {
|
|
|
2606
2612
|
}
|
|
2607
2613
|
const getDayCX = (day, selectedDate) => {
|
|
2608
2614
|
const dayValue = day.valueOf();
|
|
2609
|
-
const fromValue =
|
|
2615
|
+
const fromValue = selectedDate?.from
|
|
2610
2616
|
? uuiDayjs.dayjs(selectedDate.from).valueOf() : null;
|
|
2611
|
-
const toValue =
|
|
2617
|
+
const toValue = selectedDate?.to
|
|
2612
2618
|
? uuiDayjs.dayjs(selectedDate.to).valueOf() : null;
|
|
2613
2619
|
const inRange = fromValue
|
|
2614
2620
|
&& toValue
|
|
@@ -2620,7 +2626,7 @@ const getDayCX = (day, selectedDate) => {
|
|
|
2620
2626
|
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
2627
|
};
|
|
2622
2628
|
|
|
2623
|
-
var css$O = {"dropdown-container":"
|
|
2629
|
+
var css$O = {"dropdown-container":"PaTp3E","dropdownContainer":"PaTp3E"};
|
|
2624
2630
|
|
|
2625
2631
|
const modifiers = [{
|
|
2626
2632
|
name: 'offset',
|
|
@@ -2634,8 +2640,8 @@ function RangeDatePickerComponent(props, ref) {
|
|
|
2634
2640
|
const [inFocus, setInFocus] = React.useState(null);
|
|
2635
2641
|
const targetRef = React__namespace.default.useRef(null);
|
|
2636
2642
|
const onValueChange = (newValue) => {
|
|
2637
|
-
const fromChanged =
|
|
2638
|
-
const toChanged =
|
|
2643
|
+
const fromChanged = value?.from !== newValue?.from;
|
|
2644
|
+
const toChanged = value?.to !== newValue?.to;
|
|
2639
2645
|
if (fromChanged || toChanged) {
|
|
2640
2646
|
props.onValueChange(newValue);
|
|
2641
2647
|
if (props.getValueChangeAnalyticsEvent) {
|
|
@@ -2645,17 +2651,15 @@ function RangeDatePickerComponent(props, ref) {
|
|
|
2645
2651
|
}
|
|
2646
2652
|
};
|
|
2647
2653
|
const onOpenChange = (newIsOpen) => {
|
|
2648
|
-
var _a;
|
|
2649
2654
|
setIsOpen(newIsOpen);
|
|
2650
|
-
|
|
2655
|
+
props.onOpenChange?.(newIsOpen);
|
|
2651
2656
|
if (!inFocus && newIsOpen) {
|
|
2652
2657
|
setInFocus('from');
|
|
2653
2658
|
targetRef.current.querySelector('.uui-input').focus();
|
|
2654
2659
|
}
|
|
2655
2660
|
};
|
|
2656
2661
|
const onBodyValueChange = (newValue) => {
|
|
2657
|
-
|
|
2658
|
-
setInFocus((_a = newValue.inFocus) !== null && _a !== void 0 ? _a : inFocus);
|
|
2662
|
+
setInFocus(newValue.inFocus ?? inFocus);
|
|
2659
2663
|
onValueChange(newValue.selectedDate);
|
|
2660
2664
|
const toChanged = value.to !== newValue.selectedDate.to;
|
|
2661
2665
|
const closeBody = newValue.selectedDate.from && newValue.selectedDate.to
|
|
@@ -2666,19 +2670,14 @@ function RangeDatePickerComponent(props, ref) {
|
|
|
2666
2670
|
}
|
|
2667
2671
|
};
|
|
2668
2672
|
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
|
-
} }),
|
|
2673
|
+
return (React__namespace.default.createElement(DropdownContainer, { ...renderProps, cx: cx__default.default(css$O.dropdownContainer), shards: [targetRef], returnFocus: true },
|
|
2674
2674
|
React__namespace.default.createElement(FlexRow, null,
|
|
2675
2675
|
React__namespace.default.createElement(RangeDatePickerBody, { cx: cx__default.default(props.bodyCx), value: {
|
|
2676
2676
|
selectedDate: _value,
|
|
2677
2677
|
inFocus,
|
|
2678
2678
|
}, 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 }))));
|
|
2679
|
+
return props.renderFooter?.(value);
|
|
2680
|
+
}, isHoliday: props.isHoliday, rawProps: props.rawProps?.body }))));
|
|
2682
2681
|
};
|
|
2683
2682
|
const handleEscape = (e) => {
|
|
2684
2683
|
if (e.key === 'Escape' && isOpen) {
|
|
@@ -2687,17 +2686,15 @@ function RangeDatePickerComponent(props, ref) {
|
|
|
2687
2686
|
}
|
|
2688
2687
|
};
|
|
2689
2688
|
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);
|
|
2689
|
+
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: props.size, getPlaceholder: props.getPlaceholder, disableClear: props.disableClear, rawProps: props.rawProps, inFocus: inFocus, value: value, format: format, onValueChange: onValueChange, onFocusInput: (e, type) => {
|
|
2690
|
+
props.onFocus?.(e, type);
|
|
2694
2691
|
setInFocus(type);
|
|
2695
|
-
}, onBlurInput: (e, type) => {
|
|
2692
|
+
}, onBlurInput: (e, type) => { props.onBlur?.(e, type); !isOpen && setInFocus(null); }, onKeyDown: handleEscape }));
|
|
2696
2693
|
}, renderBody: (renderProps) => renderBody(renderProps), onValueChange: (v) => onOpenChange(v), value: isOpen, modifiers: modifiers, placement: props.placement, forwardedRef: ref }));
|
|
2697
2694
|
}
|
|
2698
2695
|
const RangeDatePicker = /* @__PURE__ */React__namespace.default.forwardRef(RangeDatePickerComponent);
|
|
2699
2696
|
|
|
2700
|
-
var css$N = {"root":"
|
|
2697
|
+
var css$N = {"root":"GeuyW6","blocker":"jekCpR","marker":"qVhmyB","top":"GRZRJd","bottom":"Ecl2i6","left":"_4NM3Hs","right":"pUD5qQ","inside":"_5C8svd"};
|
|
2701
2698
|
|
|
2702
2699
|
function DropMarker(props) {
|
|
2703
2700
|
return props.isDndInProgress
|
|
@@ -2707,12 +2704,12 @@ function DropMarker(props) {
|
|
|
2707
2704
|
css$N.root,
|
|
2708
2705
|
css$N.marker,
|
|
2709
2706
|
css$N[props.position],
|
|
2710
|
-
props
|
|
2707
|
+
props?.cx,
|
|
2711
2708
|
]) })))
|
|
2712
2709
|
: null;
|
|
2713
2710
|
}
|
|
2714
2711
|
|
|
2715
|
-
var css$M = {"root":"
|
|
2712
|
+
var css$M = {"root":"FMk1Jo","line-height":"hoLW7V","lineHeight":"hoLW7V","font-size":"sm2HPY","fontSize":"sm2HPY"};
|
|
2716
2713
|
|
|
2717
2714
|
function applyTextMods(mods) {
|
|
2718
2715
|
return [
|
|
@@ -2728,16 +2725,18 @@ function applyTextMods(mods) {
|
|
|
2728
2725
|
];
|
|
2729
2726
|
}
|
|
2730
2727
|
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) || {};
|
|
2728
|
+
const style = props?.rawProps?.style || {};
|
|
2733
2729
|
props.fontSize && (style['--uui-text-font-size'] = `${props.fontSize}px`);
|
|
2734
2730
|
props.lineHeight && (style['--uui-text-line-height'] = `${props.lineHeight}px`);
|
|
2735
2731
|
return {
|
|
2736
|
-
rawProps:
|
|
2732
|
+
rawProps: {
|
|
2733
|
+
...props?.rawProps,
|
|
2734
|
+
style: style,
|
|
2735
|
+
},
|
|
2737
2736
|
};
|
|
2738
2737
|
});
|
|
2739
2738
|
|
|
2740
|
-
var css$L = {"root":"
|
|
2739
|
+
var css$L = {"root":"-YuIl6","loading-word":"gp-qVO","loadingWord":"gp-qVO","animated-loading":"qO6G0E","animatedLoading":"qO6G0E","skeleton_loading":"rRA0VP","skeletonLoading":"rRA0VP"};
|
|
2741
2740
|
|
|
2742
2741
|
const TextPlaceholder = (props) => {
|
|
2743
2742
|
const pattern = ' ';
|
|
@@ -2749,20 +2748,20 @@ const TextPlaceholder = (props) => {
|
|
|
2749
2748
|
}
|
|
2750
2749
|
return words;
|
|
2751
2750
|
}, [props.wordsCount]);
|
|
2752
|
-
return (React__namespace.createElement("div",
|
|
2751
|
+
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
2752
|
props.cx, css$L.loadingWord, !props.isNotAnimated && css$L.animatedLoading,
|
|
2754
2753
|
]), dangerouslySetInnerHTML: { __html: it } })))));
|
|
2755
2754
|
};
|
|
2756
2755
|
|
|
2757
2756
|
const RichTextView = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.RichTextView, (mods) => ['uui-typography', `uui-typography-size-${mods.size || '14'}`]);
|
|
2758
2757
|
|
|
2759
|
-
var css$K = {"uui-typography":"
|
|
2758
|
+
var css$K = {"uui-typography":"H8P-el","uuiTypography":"H8P-el","hero-header":"_369Gmm","heroHeader":"_369Gmm","promo-header":"RHd-3h","promoHeader":"RHd-3h","uui-critical":"HKgtQ9","uuiCritical":"HKgtQ9","uui-info":"SsbzfT","uuiInfo":"SsbzfT","uui-success":"OKhjTf","uuiSuccess":"OKhjTf","uui-warning":"DNrfA3","uuiWarning":"DNrfA3","uui-highlight":"_84Jrwx","uuiHighlight":"_84Jrwx","uui-typography-size-12":"Az-TdB","uuiTypographySize12":"Az-TdB","uui-typography-size-14":"bRUgKB","uuiTypographySize14":"bRUgKB","uui-typography-size-16":"IdwXWV","uuiTypographySize16":"IdwXWV","modal":"KHF89-","search-wrapper":"z8VD9Q","searchWrapper":"z8VD9Q","no-data":"Uh2n4V","noData":"Uh2n4V","type-search-to-load-size-24":"yfxsh1","typeSearchToLoadSize24":"yfxsh1"};
|
|
2760
2759
|
|
|
2761
2760
|
class DataPickerBody extends uuiComponents.PickerBodyBase {
|
|
2762
2761
|
constructor() {
|
|
2763
2762
|
super(...arguments);
|
|
2764
2763
|
this.lens = uuiCore.Lens.onEditableComponent(this);
|
|
2765
|
-
this.searchLens = this.lens.prop('search');
|
|
2764
|
+
this.searchLens = this.lens.prop('search').default('');
|
|
2766
2765
|
this.getSearchSize = () => (uuiCore.isMobile() ? settings.sizes.pickerInput.body.mobile.searchInput : this.props.searchSize);
|
|
2767
2766
|
}
|
|
2768
2767
|
renderEmpty() {
|
|
@@ -2799,12 +2798,12 @@ class DataPickerBody extends uuiComponents.PickerBodyBase {
|
|
|
2799
2798
|
return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
|
|
2800
2799
|
this.showSearch() && (React__namespace.default.createElement("div", { key: "search", className: css$K.searchWrapper },
|
|
2801
2800
|
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,
|
|
2801
|
+
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' } })))),
|
|
2802
|
+
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
2803
|
}
|
|
2805
2804
|
}
|
|
2806
2805
|
|
|
2807
|
-
var css$J = {"footer":"
|
|
2806
|
+
var css$J = {"footer":"eh6i7N"};
|
|
2808
2807
|
|
|
2809
2808
|
function DataPickerFooterImpl(props) {
|
|
2810
2809
|
const { search, clearSelection, view, showSelected, selectionMode, isSearchTooShort, } = props;
|
|
@@ -2815,11 +2814,12 @@ function DataPickerFooterImpl(props) {
|
|
|
2815
2814
|
const clearAllText = i18n.pickerInput.clearSelectionButton;
|
|
2816
2815
|
const clearSingleText = i18n.pickerInput.clearSelectionButtonSingle;
|
|
2817
2816
|
const selectAllText = i18n.pickerInput.selectAllButton;
|
|
2818
|
-
const isSearching = search
|
|
2819
|
-
const hideFooter =
|
|
2817
|
+
const isSearching = search?.length;
|
|
2818
|
+
const hideFooter = (rowsCount === 0 && !hasSelection) || isSearching || (isSinglePicker && props.disableClear);
|
|
2820
2819
|
const showClear = !props.disableClear && (isSinglePicker ? true : (!view.selectAll || hasSelection));
|
|
2821
2820
|
return !hideFooter && (React__namespace.default.createElement(FlexRow, { cx: css$J.footer },
|
|
2822
|
-
!isSinglePicker && (
|
|
2821
|
+
!isSinglePicker && !isSearchTooShort && ( // Show this switch only for multi mode and when some rows rendered
|
|
2822
|
+
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
2823
|
React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
|
|
2824
2824
|
React__namespace.default.createElement(FlexCell, { width: "auto", alignSelf: "center" },
|
|
2825
2825
|
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 +2829,13 @@ function DataPickerFooterImpl(props) {
|
|
|
2829
2829
|
}
|
|
2830
2830
|
const DataPickerFooter = /* @__PURE__ */React__namespace.default.memo(DataPickerFooterImpl);
|
|
2831
2831
|
|
|
2832
|
-
var css$I = {"header":"
|
|
2832
|
+
var css$I = {"header":"sd3L4n","title":"_2GU9gH","close":"PTRWJB"};
|
|
2833
2833
|
|
|
2834
2834
|
const DataPickerHeaderImpl = (props) => {
|
|
2835
2835
|
const title = props.title && typeof props.title === 'string' ? props.title.charAt(0).toUpperCase() + props.title.slice(1) : '';
|
|
2836
2836
|
return (React__namespace.default.createElement(FlexRow, { alignItems: "center", borderBottom: true, cx: css$I.header },
|
|
2837
2837
|
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: () =>
|
|
2838
|
+
React__namespace.default.createElement(IconButton, { icon: ForwardRef$R, onClick: () => props.close?.(), cx: css$I.close })));
|
|
2839
2839
|
};
|
|
2840
2840
|
const DataPickerHeader = /* @__PURE__ */React__namespace.default.memo(DataPickerHeaderImpl);
|
|
2841
2841
|
|
|
@@ -2854,7 +2854,7 @@ var SvgNotificationDoneFill = function SvgNotificationDoneFill(props, ref) {
|
|
|
2854
2854
|
};
|
|
2855
2855
|
var ForwardRef$s = /*#__PURE__*/React.forwardRef(SvgNotificationDoneFill);
|
|
2856
2856
|
|
|
2857
|
-
var css$H = {"uui-typography":"
|
|
2857
|
+
var css$H = {"uui-typography":"nZLxt8","uuiTypography":"nZLxt8","hero-header":"c47uWQ","heroHeader":"c47uWQ","promo-header":"DoBQEr","promoHeader":"DoBQEr","uui-critical":"_9c0hUT","uuiCritical":"_9c0hUT","uui-info":"_-4bQEn","uuiInfo":"_-4bQEn","uui-success":"pHdvzU","uuiSuccess":"pHdvzU","uui-warning":"kWLp6c","uuiWarning":"kWLp6c","uui-highlight":"eaT4JV","uuiHighlight":"eaT4JV","uui-typography-size-12":"G-vVZ6","uuiTypographySize12":"G-vVZ6","uui-typography-size-14":"Pj65KI","uuiTypographySize14":"Pj65KI","uui-typography-size-16":"qkrHKG","uuiTypographySize16":"qkrHKG","root":"uGbvFu","align-widgets-top":"udnOpy","alignWidgetsTop":"udnOpy","align-widgets-center":"a65f-b","alignWidgetsCenter":"a65f-b","icon-container":"h4EFFt","iconContainer":"h4EFFt","loading-cell":"vNy3k9","loadingCell":"vNy3k9","content-wrapper":"VXTTYN","contentWrapper":"VXTTYN","render-item":"yByDq3","renderItem":"yByDq3","icon-wrapper":"ftmw4J","iconWrapper":"ftmw4J","icon-default":"nzyyNz","iconDefault":"nzyyNz","selected-mark":"uJYoBg","selectedMark":"uJYoBg"};
|
|
2858
2858
|
|
|
2859
2859
|
function DataPickerCell(props) {
|
|
2860
2860
|
const ref = React__namespace.useRef();
|
|
@@ -2887,11 +2887,11 @@ function DataPickerCell(props) {
|
|
|
2887
2887
|
], style: props.padding && {
|
|
2888
2888
|
'--uui-data_picker_cell-horizontal-padding': `${props.padding}px`,
|
|
2889
2889
|
} },
|
|
2890
|
-
React__namespace.createElement(DataRowAddons,
|
|
2890
|
+
React__namespace.createElement(DataRowAddons, { size: props.size, ...props, tabIndex: -1 }),
|
|
2891
2891
|
getWrappedContent()));
|
|
2892
2892
|
}
|
|
2893
2893
|
|
|
2894
|
-
var css$G = {"uui-typography":"
|
|
2894
|
+
var css$G = {"uui-typography":"h5N0M3","uuiTypography":"h5N0M3","hero-header":"xF-2-8","heroHeader":"xF-2-8","promo-header":"u-ZkfT","promoHeader":"u-ZkfT","uui-critical":"V-Xxf6","uuiCritical":"V-Xxf6","uui-info":"tN4oHp","uuiInfo":"tN4oHp","uui-success":"Pt9FhS","uuiSuccess":"Pt9FhS","uui-warning":"vuLe7V","uuiWarning":"vuLe7V","uui-highlight":"sRfCZu","uuiHighlight":"sRfCZu","uui-typography-size-12":"KCnMPp","uuiTypographySize12":"KCnMPp","uui-typography-size-14":"ff5AVt","uuiTypographySize14":"ff5AVt","uui-typography-size-16":"DLyS-u","uuiTypographySize16":"DLyS-u","picker-row":"Zgke1W","pickerRow":"Zgke1W"};
|
|
2895
2895
|
|
|
2896
2896
|
class DataPickerRow extends React__namespace.Component {
|
|
2897
2897
|
constructor() {
|
|
@@ -2901,20 +2901,20 @@ class DataPickerRow extends React__namespace.Component {
|
|
|
2901
2901
|
};
|
|
2902
2902
|
}
|
|
2903
2903
|
render() {
|
|
2904
|
-
return (React__namespace.createElement(uuiComponents.DataPickerRow,
|
|
2904
|
+
return (React__namespace.createElement(uuiComponents.DataPickerRow, { ...this.props, cx: [css$G.pickerRow, this.props.cx], renderContent: this.renderContent }));
|
|
2905
2905
|
}
|
|
2906
2906
|
}
|
|
2907
2907
|
|
|
2908
|
-
var css$F = {"uui-typography":"
|
|
2908
|
+
var css$F = {"uui-typography":"OHm-7l","uuiTypography":"OHm-7l","hero-header":"f9VrIb","heroHeader":"f9VrIb","promo-header":"YRAMM7","promoHeader":"YRAMM7","uui-critical":"BuiCOy","uuiCritical":"BuiCOy","uui-info":"IPiWwe","uuiInfo":"IPiWwe","uui-success":"xH-e30","uuiSuccess":"xH-e30","uui-warning":"QTAajf","uuiWarning":"QTAajf","uui-highlight":"Dpdv2R","uuiHighlight":"Dpdv2R","uui-typography-size-12":"j-wmxt","uuiTypographySize12":"j-wmxt","uui-typography-size-14":"_7nMdaq","uuiTypographySize14":"_7nMdaq","uui-typography-size-16":"lWfNTz","uuiTypographySize16":"lWfNTz","done":"-P4K4a","container":"f2Dkny"};
|
|
2909
2909
|
|
|
2910
2910
|
const PickerBodyMobileView = (props) => {
|
|
2911
2911
|
const isMobileView = uuiCore.isMobile();
|
|
2912
2912
|
const maxWidth = isMobileView ? 'auto' : props.maxWidth;
|
|
2913
2913
|
const maxHeight = isMobileView ? 'auto' : props.maxHeight;
|
|
2914
|
-
return (React__namespace.default.createElement(DropdownContainer,
|
|
2914
|
+
return (React__namespace.default.createElement(DropdownContainer, { ...props, maxWidth: maxWidth, maxHeight: maxHeight, cx: [css$F.container, props.cx], autoFocus: true },
|
|
2915
2915
|
isMobileView && React__namespace.default.createElement(DataPickerHeader, { title: props.title, close: props.onClose }),
|
|
2916
2916
|
props.children,
|
|
2917
|
-
isMobileView && React__namespace.default.createElement(LinkButton, { caption: i18n.pickerInput.doneButton, onClick: () =>
|
|
2917
|
+
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
2918
|
};
|
|
2919
2919
|
|
|
2920
2920
|
var _path$r, _path2$4;
|
|
@@ -2939,20 +2939,20 @@ var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
|
|
|
2939
2939
|
};
|
|
2940
2940
|
var ForwardRef$r = /*#__PURE__*/React.forwardRef(SvgSearchWithBackground);
|
|
2941
2941
|
|
|
2942
|
-
var css$E = {"uui-typography":"
|
|
2942
|
+
var css$E = {"uui-typography":"gszaPU","uuiTypography":"gszaPU","hero-header":"zK6cV-","heroHeader":"zK6cV-","promo-header":"QDJ8bh","promoHeader":"QDJ8bh","uui-critical":"xSPJ-b","uuiCritical":"xSPJ-b","uui-info":"OfygXC","uuiInfo":"OfygXC","uui-success":"PzOvjJ","uuiSuccess":"PzOvjJ","uui-warning":"_4vvIX1","uuiWarning":"_4vvIX1","uui-highlight":"iRuFt8","uuiHighlight":"iRuFt8","uui-typography-size-12":"p0C-nl","uuiTypographySize12":"p0C-nl","uui-typography-size-14":"NTpycR","uuiTypographySize14":"NTpycR","uui-typography-size-16":"VGare-","uuiTypographySize16":"VGare-","sub-header-wrapper":"FGF1g9","subHeaderWrapper":"FGF1g9","switch":"UO9j9i","no-found-modal-container":"_3TdJxp","noFoundModalContainer":"_3TdJxp","no-found-modal-container-icon":"QvwIRh","noFoundModalContainerIcon":"QvwIRh","no-found-modal-container-text":"PN7apx","noFoundModalContainerText":"PN7apx"};
|
|
2943
2943
|
|
|
2944
2944
|
const mergeHighlightRanges = (ranges) => {
|
|
2945
2945
|
const mergedRanges = [];
|
|
2946
2946
|
ranges.forEach((range) => {
|
|
2947
2947
|
if (!mergedRanges.length) {
|
|
2948
|
-
mergedRanges.push(
|
|
2948
|
+
mergedRanges.push({ ...range, isHighlighted: true });
|
|
2949
2949
|
}
|
|
2950
2950
|
const lastRange = mergedRanges[mergedRanges.length - 1];
|
|
2951
2951
|
if (range.from >= lastRange.from && range.from <= lastRange.to && range.to > lastRange.to) {
|
|
2952
2952
|
lastRange.to = range.to;
|
|
2953
2953
|
}
|
|
2954
2954
|
if (lastRange.to < range.from) {
|
|
2955
|
-
mergedRanges.push(
|
|
2955
|
+
mergedRanges.push({ ...range, isHighlighted: true });
|
|
2956
2956
|
}
|
|
2957
2957
|
});
|
|
2958
2958
|
return mergedRanges;
|
|
@@ -2993,7 +2993,7 @@ const getHighlightRanges = (str, search) => {
|
|
|
2993
2993
|
};
|
|
2994
2994
|
const getDecoratedText = (str, ranges) => ranges.map((range, index) => {
|
|
2995
2995
|
const rangeStr = str.substring(range.from, range.to);
|
|
2996
|
-
return (React__namespace.default.createElement("span",
|
|
2996
|
+
return (React__namespace.default.createElement("span", { key: `${rangeStr}-${index}`, ...(range.isHighlighted ? { className: 'uui-highlight' } : {}) }, rangeStr));
|
|
2997
2997
|
});
|
|
2998
2998
|
const getHighlightedSearchMatches = (str, search) => {
|
|
2999
2999
|
if (!search || !str) {
|
|
@@ -3006,14 +3006,13 @@ const getHighlightedSearchMatches = (str, search) => {
|
|
|
3006
3006
|
return getDecoratedText(str, ranges);
|
|
3007
3007
|
};
|
|
3008
3008
|
|
|
3009
|
-
var css$D = {"root":"
|
|
3009
|
+
var css$D = {"root":"VtRLRH","column-gap":"-zzsUj","columnGap":"-zzsUj","multiline":"FgXwgK","text":"A1fk8n"};
|
|
3010
3010
|
|
|
3011
3011
|
function PickerItem(props) {
|
|
3012
|
-
var _a;
|
|
3013
3012
|
const { highlightSearchMatches = true, size, avatarUrl, isLoading, isDisabled, icon, cx, } = props;
|
|
3014
3013
|
const itemSize = size || settings.sizes.pickerInput.body.dropdown.row.cell.item.default;
|
|
3015
3014
|
const isMultiline = !!(props.title && props.subtitle);
|
|
3016
|
-
const { search } =
|
|
3015
|
+
const { search } = props.dataSourceState ?? {};
|
|
3017
3016
|
const title = highlightSearchMatches ? getHighlightedSearchMatches(props.title, search) : props.title;
|
|
3018
3017
|
const subtitle = highlightSearchMatches ? getHighlightedSearchMatches(props.subtitle, search) : props.subtitle;
|
|
3019
3018
|
return (React__namespace.createElement(FlexCell, { width: "auto", cx: [css$D.root, 'uui-typography', cx] },
|
|
@@ -3040,10 +3039,10 @@ function PickerModal(props) {
|
|
|
3040
3039
|
};
|
|
3041
3040
|
const renderItem = (item, rowProps, dsState) => {
|
|
3042
3041
|
const { flattenSearchResults } = view.getConfig();
|
|
3043
|
-
return (React__namespace.default.createElement(PickerItem,
|
|
3042
|
+
return (React__namespace.default.createElement(PickerItem, { title: getName(item), size: "36", dataSourceState: dsState, ...(flattenSearchResults ? { subtitle: getSubtitle(rowProps, dataSourceState) } : {}), ...rowProps }));
|
|
3044
3043
|
};
|
|
3045
3044
|
const renderRow = (rowProps) => {
|
|
3046
|
-
return props.renderRow ? (props.renderRow(rowProps, dataSourceState)) : (React__namespace.default.createElement(DataPickerRow,
|
|
3045
|
+
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
3046
|
};
|
|
3048
3047
|
const renderFooter = () => {
|
|
3049
3048
|
const hasSelection = view.getSelectedRowsCount() > 0;
|
|
@@ -3063,40 +3062,44 @@ function PickerModal(props) {
|
|
|
3063
3062
|
};
|
|
3064
3063
|
const dataRows = getRows();
|
|
3065
3064
|
const rows = dataRows.map((row) => renderRow(row));
|
|
3066
|
-
return (React__namespace.default.createElement(ModalBlocker,
|
|
3065
|
+
return (React__namespace.default.createElement(ModalBlocker, { ...props },
|
|
3067
3066
|
React__namespace.default.createElement(ModalWindow, { width: 600, height: 700 },
|
|
3068
3067
|
React__namespace.default.createElement(ModalHeader, { title: props.caption || i18n.pickerModal.headerTitle, onClose: () => props.abort() }),
|
|
3069
3068
|
React__namespace.default.createElement(FlexCell, { cx: css$E.subHeaderWrapper },
|
|
3070
3069
|
React__namespace.default.createElement(FlexRow, { vPadding: "24" },
|
|
3071
|
-
React__namespace.default.createElement(SearchInput,
|
|
3070
|
+
React__namespace.default.createElement(SearchInput, { ...dataSourceStateLens.prop('search').toProps(), onKeyDown: (e) => uuiComponents.handleDataSourceKeyboard({
|
|
3072
3071
|
value: getDataSourceState(),
|
|
3073
3072
|
onValueChange: handleDataSourceValueChange,
|
|
3074
3073
|
listView: view,
|
|
3075
3074
|
rows: dataRows,
|
|
3076
3075
|
searchPosition: 'body',
|
|
3077
|
-
}, e), autoFocus: true, placeholder: i18n.pickerModal.searchPlaceholder, rawProps: { dir: 'auto' } }))
|
|
3078
|
-
!isSingleSelect() && (React__namespace.default.createElement(Switch,
|
|
3076
|
+
}, e), autoFocus: true, placeholder: i18n.pickerModal.searchPlaceholder, rawProps: { dir: 'auto' } })),
|
|
3077
|
+
!isSingleSelect() && (React__namespace.default.createElement(Switch, { cx: css$E.switch, size: "18", ...getFooterProps().showSelected, isDisabled: view.getSelectedRowsCount() < 1, label: "Show only selected" })),
|
|
3079
3078
|
props.renderFilter && React__namespace.default.createElement(FlexCell, { grow: 2 }, props.renderFilter(dataSourceStateLens.prop('filter').toProps()))),
|
|
3080
|
-
React__namespace.default.createElement(DataPickerBody,
|
|
3079
|
+
React__namespace.default.createElement(DataPickerBody, { ...getListProps(), value: getDataSourceState(), onValueChange: handleDataSourceValueChange, search: dataSourceStateLens.prop('search').toProps(), showSearch: false, rows: rows, renderNotFound: renderNotFound, editMode: "modal" }),
|
|
3081
3080
|
React__namespace.default.createElement(ModalFooter, { padding: "24", vPadding: "24" }, props.renderFooter ? props.renderFooter(getFooterProps()) : renderFooter()))));
|
|
3082
3081
|
}
|
|
3083
3082
|
|
|
3084
|
-
var css$C = {"tooltip":"
|
|
3083
|
+
var css$C = {"tooltip":"_4LbSbc"};
|
|
3085
3084
|
|
|
3086
3085
|
const PickerTogglerTag = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
3087
|
-
|
|
3088
|
-
|
|
3086
|
+
const tagProps = {
|
|
3087
|
+
...props,
|
|
3088
|
+
tabIndex: -1,
|
|
3089
|
+
size: settings.sizes.pickerInput.toggler.tag[props.size],
|
|
3090
|
+
caption: props.rowProps?.isLoading ? React__namespace.createElement(TextPlaceholder, null) : props.caption,
|
|
3091
|
+
};
|
|
3089
3092
|
if (props.isCollapsed) {
|
|
3090
3093
|
const collapsedRows = props.collapsedRows.map((row) => props.getName(row.value)).join(', ');
|
|
3091
3094
|
return (React__namespace.createElement(Tooltip, { key: "selected", content: collapsedRows, closeDelay: 150, closeOnMouseLeave: "boundary", cx: css$C.tooltip },
|
|
3092
|
-
React__namespace.createElement(Tag,
|
|
3095
|
+
React__namespace.createElement(Tag, { ref: ref, rawProps: { role: 'option' }, ...tagProps })));
|
|
3093
3096
|
}
|
|
3094
3097
|
else {
|
|
3095
|
-
return React__namespace.createElement(Tag,
|
|
3098
|
+
return React__namespace.createElement(Tag, { ref: ref, rawProps: { role: 'option' }, ...tagProps });
|
|
3096
3099
|
}
|
|
3097
3100
|
});
|
|
3098
3101
|
|
|
3099
|
-
var css$B = {"uui-typography":"
|
|
3102
|
+
var css$B = {"uui-typography":"ntrG-0","uuiTypography":"ntrG-0","hero-header":"nwFaEC","heroHeader":"nwFaEC","promo-header":"vBm5Qu","promoHeader":"vBm5Qu","uui-critical":"eJIYxi","uuiCritical":"eJIYxi","uui-info":"fPTung","uuiInfo":"fPTung","uui-success":"Bqhc06","uuiSuccess":"Bqhc06","uui-warning":"ZdM0rr","uuiWarning":"ZdM0rr","uui-highlight":"f9BpYm","uuiHighlight":"f9BpYm","uui-typography-size-12":"w69eg5","uuiTypographySize12":"w69eg5","uui-typography-size-14":"Osaw0i","uuiTypographySize14":"Osaw0i","uui-typography-size-16":"JJjDWa","uuiTypographySize16":"JJjDWa","root":"_8fzsek","mode-form":"sWdmpe","modeForm":"sWdmpe","mode-cell":"jMLHqz","modeCell":"jMLHqz","mode-inline":"_9uO5b9","modeInline":"_9uO5b9"};
|
|
3100
3103
|
|
|
3101
3104
|
const defaultMode = EditMode.FORM;
|
|
3102
3105
|
function applyPickerTogglerMods(mods) {
|
|
@@ -3109,28 +3112,27 @@ function applyPickerTogglerMods(mods) {
|
|
|
3109
3112
|
}
|
|
3110
3113
|
function PickerTogglerComponent(props, ref) {
|
|
3111
3114
|
const renderItem = (itemProps) => {
|
|
3112
|
-
const itemPropsWithSize =
|
|
3115
|
+
const itemPropsWithSize = { ...itemProps, size: (props.size || settings.sizes.pickerInput.toggler.defaults.tag) };
|
|
3113
3116
|
if (!!props.renderItem) {
|
|
3114
3117
|
return props.renderItem(itemPropsWithSize);
|
|
3115
3118
|
}
|
|
3116
|
-
return (React__namespace.createElement(PickerTogglerTag,
|
|
3119
|
+
return (React__namespace.createElement(PickerTogglerTag, { ...itemPropsWithSize, getName: props.getName }));
|
|
3117
3120
|
};
|
|
3118
|
-
return (React__namespace.createElement(uuiComponents.PickerToggler,
|
|
3121
|
+
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
3122
|
}
|
|
3120
3123
|
const PickerToggler = /* @__PURE__ */React__namespace.forwardRef(PickerTogglerComponent);
|
|
3121
3124
|
|
|
3122
|
-
function PickerInputComponent(
|
|
3123
|
-
var { highlightSearchMatches = true } = _a, props = __rest(_a, ["highlightSearchMatches"]);
|
|
3125
|
+
function PickerInputComponent({ highlightSearchMatches = true, ...props }, ref) {
|
|
3124
3126
|
const toggleModalOpening = () => {
|
|
3125
|
-
const { renderFooter, rawProps
|
|
3127
|
+
const { renderFooter, rawProps, ...restProps } = props;
|
|
3126
3128
|
context.uuiModals
|
|
3127
|
-
.show((modalProps) => (React__namespace.default.createElement(PickerModal,
|
|
3129
|
+
.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
3130
|
.then((newSelection) => {
|
|
3129
3131
|
handleSelectionValueChange(newSelection);
|
|
3130
3132
|
})
|
|
3131
3133
|
.catch(() => { });
|
|
3132
3134
|
};
|
|
3133
|
-
const { view, context, popperModifiers, getName, getPlaceholder, handleSelectionValueChange, getTogglerProps, getRows, handleTogglerSearchChange, toggleBodyOpening, dataSourceState, getFooterProps, getPickerBodyProps, getListProps, shouldShowBody, getSearchPosition, closePickerBody, openPickerBody, handlePickerInputKeyboard, } = uuiComponents.usePickerInput(
|
|
3135
|
+
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
3136
|
const dropdownRef = React.useRef(null);
|
|
3135
3137
|
React.useImperativeHandle(ref, () => {
|
|
3136
3138
|
if (dropdownRef.current) {
|
|
@@ -3146,12 +3148,17 @@ function PickerInputComponent(_a, ref) {
|
|
|
3146
3148
|
};
|
|
3147
3149
|
};
|
|
3148
3150
|
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(
|
|
3151
|
+
const renderTargetFn = props.renderToggler || ((props) => React__namespace.default.createElement(PickerToggler, { ...props }));
|
|
3152
|
+
return (React__namespace.default.createElement(uuiCore.IEditableDebouncer, { value: targetProps.value, onValueChange: handleTogglerSearchChange, debounceDelay: props.searchDebounceDelay, render: (editableProps) => renderTargetFn({
|
|
3153
|
+
...getTogglerMods(),
|
|
3154
|
+
...targetProps,
|
|
3155
|
+
...editableProps,
|
|
3156
|
+
onKeyDown: (e) => handlePickerInputKeyboard(rows, e, editableProps.value),
|
|
3157
|
+
}) }));
|
|
3151
3158
|
};
|
|
3152
3159
|
const renderFooter = () => {
|
|
3153
3160
|
const footerProps = getFooterProps();
|
|
3154
|
-
return props.renderFooter ? props.renderFooter(footerProps) : React__namespace.default.createElement(DataPickerFooter,
|
|
3161
|
+
return props.renderFooter ? props.renderFooter(footerProps) : React__namespace.default.createElement(DataPickerFooter, { ...footerProps, size: props.size });
|
|
3155
3162
|
};
|
|
3156
3163
|
const getRowSize = () => {
|
|
3157
3164
|
if (uuiCore.isMobile()) {
|
|
@@ -3171,32 +3178,31 @@ function PickerInputComponent(_a, ref) {
|
|
|
3171
3178
|
};
|
|
3172
3179
|
const renderRowItem = (item, rowProps, dsState) => {
|
|
3173
3180
|
const { flattenSearchResults } = view.getConfig();
|
|
3174
|
-
return (React__namespace.default.createElement(PickerItem,
|
|
3181
|
+
return (React__namespace.default.createElement(PickerItem, { title: getName(item), size: getRowSize(), dataSourceState: dsState, highlightSearchMatches: highlightSearchMatches, ...(flattenSearchResults ? { subtitle: getSubtitle(rowProps, dataSourceState) } : {}), ...rowProps }));
|
|
3175
3182
|
};
|
|
3176
3183
|
const renderRow = (rowProps, dsState) => {
|
|
3177
|
-
return props.renderRow ? (props.renderRow(rowProps, dsState)) : (React__namespace.default.createElement(DataPickerRow,
|
|
3184
|
+
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
3185
|
};
|
|
3179
3186
|
const renderBody = (bodyProps, rows) => {
|
|
3180
3187
|
const renderedDataRows = rows.map((row) => renderRow(row, dataSourceState));
|
|
3181
3188
|
const bodyHeight = uuiCore.isMobile() ? document.documentElement.clientHeight : props.dropdownHeight || settings.sizes.pickerInput.body.dropdown.height;
|
|
3182
3189
|
const minBodyWidth = props.minBodyWidth || settings.sizes.pickerInput.body.dropdown.width;
|
|
3183
3190
|
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,
|
|
3191
|
+
React__namespace.default.createElement(DataPickerBody, { ...bodyProps, rows: renderedDataRows, maxHeight: bodyHeight, searchSize: props.size, editMode: "dropdown", selectionMode: props.selectionMode }),
|
|
3185
3192
|
renderFooter()));
|
|
3186
3193
|
};
|
|
3187
3194
|
const rows = getRows();
|
|
3188
3195
|
const renderItem = props.renderTag ? props.renderTag : null;
|
|
3189
3196
|
return (React__namespace.default.createElement(Dropdown, { renderTarget: (dropdownProps) => {
|
|
3190
3197
|
const targetProps = getTogglerProps();
|
|
3191
|
-
return renderTarget(
|
|
3192
|
-
}, renderBody: (bodyProps) => renderBody(
|
|
3198
|
+
return renderTarget({ ...dropdownProps, ...targetProps, renderItem });
|
|
3199
|
+
}, 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
3200
|
}
|
|
3194
3201
|
const PickerInput = /* @__PURE__ */React__namespace.default.forwardRef(PickerInputComponent);
|
|
3195
3202
|
|
|
3196
|
-
var css$A = {"row":"
|
|
3203
|
+
var css$A = {"row":"Mc8U6v"};
|
|
3197
3204
|
|
|
3198
3205
|
function PickerListItem(props) {
|
|
3199
|
-
var _a;
|
|
3200
3206
|
let label;
|
|
3201
3207
|
if (props.isLoading) {
|
|
3202
3208
|
label = React__namespace.default.createElement(TextPlaceholder, { wordsCount: 2 });
|
|
@@ -3206,31 +3212,31 @@ function PickerListItem(props) {
|
|
|
3206
3212
|
}
|
|
3207
3213
|
let component;
|
|
3208
3214
|
if (props.checkbox) {
|
|
3209
|
-
component = (React__namespace.default.createElement(Checkbox,
|
|
3215
|
+
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
3216
|
}
|
|
3211
3217
|
else {
|
|
3212
3218
|
component = (React__namespace.default.createElement(RadioInput, { label: label, value: props.isSelected, isDisabled: props.isLoading || !props.isSelectable || props.isDisabled, onValueChange: () => props.onSelect(props) }));
|
|
3213
3219
|
}
|
|
3214
|
-
return (React__namespace.default.createElement("div",
|
|
3220
|
+
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
3221
|
}
|
|
3216
3222
|
|
|
3217
|
-
var css$z = {"root":"
|
|
3223
|
+
var css$z = {"root":"_6ZoVho"};
|
|
3218
3224
|
|
|
3219
3225
|
function PickerList(props) {
|
|
3220
3226
|
const { context, view, onlySelectedView, getName, getEntityName, appendLastSelected, getSelectedIdsArray, buildRowsList, getMaxDefaultItems, dataSourceState, getModalTogglerCaption, } = uuiComponents.usePickerList(props);
|
|
3221
3227
|
const defaultRenderRow = (row) => {
|
|
3222
|
-
return React__namespace.default.createElement(PickerListItem,
|
|
3228
|
+
return React__namespace.default.createElement(PickerListItem, { getName: (item) => getName(item), ...row, key: row.rowKey });
|
|
3223
3229
|
};
|
|
3224
3230
|
const handleShowPicker = () => {
|
|
3225
3231
|
context.uuiModals
|
|
3226
|
-
.show((modalProps) => (React__namespace.default.createElement(PickerModal,
|
|
3232
|
+
.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
3233
|
.then((value) => {
|
|
3228
3234
|
appendLastSelected([...getSelectedIdsArray(value)]);
|
|
3229
3235
|
props.onValueChange(value);
|
|
3230
3236
|
})
|
|
3231
3237
|
.catch(() => { });
|
|
3232
3238
|
};
|
|
3233
|
-
const defaultRenderToggler = (props) => React__namespace.default.createElement(LinkButton,
|
|
3239
|
+
const defaultRenderToggler = (props) => React__namespace.default.createElement(LinkButton, { caption: "Show all", ...props });
|
|
3234
3240
|
const viewProps = view.getListProps();
|
|
3235
3241
|
const selectedRows = onlySelectedView.getVisibleRows();
|
|
3236
3242
|
const rows = buildRowsList();
|
|
@@ -3240,7 +3246,7 @@ function PickerList(props) {
|
|
|
3240
3246
|
return (React__namespace.default.createElement("div", { className: cx__default.default('uui-picker-list', css$z.root) },
|
|
3241
3247
|
!rows.length
|
|
3242
3248
|
&& (props.noOptionsMessage || (React__namespace.default.createElement(Text, { color: "secondary", size: props.size }, "No options available"))),
|
|
3243
|
-
rows.map((row) => renderRow(
|
|
3249
|
+
rows.map((row) => renderRow({ ...row, isDisabled: props.isDisabled }, dataSourceState)),
|
|
3244
3250
|
showPicker
|
|
3245
3251
|
&& renderToggler({
|
|
3246
3252
|
onClick: handleShowPicker,
|
|
@@ -3249,19 +3255,19 @@ function PickerList(props) {
|
|
|
3249
3255
|
}, selectedRows)));
|
|
3250
3256
|
}
|
|
3251
3257
|
|
|
3252
|
-
var css$y = {"uui-typography":"
|
|
3258
|
+
var css$y = {"uui-typography":"PMzyjx","uuiTypography":"PMzyjx","hero-header":"_26w-DM","heroHeader":"_26w-DM","promo-header":"w0jmtN","promoHeader":"w0jmtN","uui-critical":"_1jJZzl","uuiCritical":"_1jJZzl","uui-info":"EUPKZb","uuiInfo":"EUPKZb","uui-success":"HJ7yEx","uuiSuccess":"HJ7yEx","uui-warning":"xlQRy0","uuiWarning":"xlQRy0","uui-highlight":"lfaZ2N","uuiHighlight":"lfaZ2N","uui-typography-size-12":"nNrQf0","uuiTypographySize12":"nNrQf0","uui-typography-size-14":"AB4Y0x","uuiTypographySize14":"AB4Y0x","uui-typography-size-16":"Xjdz-E","uuiTypographySize16":"Xjdz-E","root":"fd-udR","wrapper":"UjEmod","align-widgets-top":"C0wrPg","alignWidgetsTop":"C0wrPg","align-widgets-center":"cAOHlQ","alignWidgetsCenter":"cAOHlQ"};
|
|
3253
3259
|
|
|
3254
3260
|
function DataTableCell(initialProps) {
|
|
3255
|
-
const props =
|
|
3261
|
+
const props = { ...initialProps };
|
|
3256
3262
|
if (props.isFirstColumn) {
|
|
3257
|
-
props.addons = React__namespace.createElement(DataRowAddons,
|
|
3263
|
+
props.addons = React__namespace.createElement(DataRowAddons, { size: props.size, ...props });
|
|
3258
3264
|
}
|
|
3259
3265
|
props.renderPlaceholder = props.renderPlaceholder
|
|
3260
3266
|
|| (() => (React__namespace.createElement(Text, { key: "t", size: settings.sizes.dataTable.body.row.cell.text[props.size] },
|
|
3261
3267
|
React__namespace.createElement(TextPlaceholder, { isNotAnimated: true }))));
|
|
3262
3268
|
props.renderUnknown = props.renderUnknown
|
|
3263
3269
|
|| (() => (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,
|
|
3270
|
+
props.renderTooltip = (tooltipProps) => React__namespace.createElement(Tooltip, { color: "critical", ...tooltipProps });
|
|
3265
3271
|
const isEditable = !!props.onValueChange;
|
|
3266
3272
|
const getLeftPadding = () => {
|
|
3267
3273
|
const { rowProps: { isLoading }, columnsGap, isFirstColumn } = props;
|
|
@@ -3295,18 +3301,18 @@ function DataTableCell(initialProps) {
|
|
|
3295
3301
|
'--uui-dt-cell-padding-start': `${getLeftPadding()}px`,
|
|
3296
3302
|
'--uui-dt-cell-padding-end': `${getRightPadding()}px`,
|
|
3297
3303
|
};
|
|
3298
|
-
return React__namespace.createElement(uuiComponents.DataTableCell,
|
|
3304
|
+
return React__namespace.createElement(uuiComponents.DataTableCell, { ...props });
|
|
3299
3305
|
}
|
|
3300
3306
|
|
|
3301
|
-
var css$x = {"uui-typography":"
|
|
3307
|
+
var css$x = {"uui-typography":"bxxf--","uuiTypography":"bxxf--","hero-header":"ExGzo3","heroHeader":"ExGzo3","promo-header":"EJZNeg","promoHeader":"EJZNeg","uui-critical":"HVz-Lo","uuiCritical":"HVz-Lo","uui-info":"GHc0jr","uuiInfo":"GHc0jr","uui-success":"kIlzDu","uuiSuccess":"kIlzDu","uui-warning":"pKwli4","uuiWarning":"pKwli4","uui-highlight":"-vDuKz","uuiHighlight":"-vDuKz","uui-typography-size-12":"u2fa0f","uuiTypographySize12":"u2fa0f","uui-typography-size-14":"vHwIE6","uuiTypographySize14":"vHwIE6","uui-typography-size-16":"b5Sd87","uuiTypographySize16":"b5Sd87","root":"Uq7RaL"};
|
|
3302
3308
|
|
|
3303
3309
|
// Here we define a single instance of the renderCell function to make DataTableRow#shouldComponentUpdate work.
|
|
3304
3310
|
// 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
3311
|
const renderCell = (props) => {
|
|
3306
3312
|
const mods = props.rowProps;
|
|
3307
|
-
return React__namespace.createElement(DataTableCell,
|
|
3313
|
+
return React__namespace.createElement(DataTableCell, { ...props, key: props.key, size: mods.size, columnsGap: mods.columnsGap });
|
|
3308
3314
|
};
|
|
3309
|
-
const renderDropMarkers = (props) => React__namespace.createElement(DropMarker,
|
|
3315
|
+
const renderDropMarkers = (props) => React__namespace.createElement(DropMarker, { ...props, enableBlocker: true });
|
|
3310
3316
|
const propsMods = { renderCell, renderDropMarkers };
|
|
3311
3317
|
const DataTableRow = /* @__PURE__ */uuiCore.withMods(uuiComponents.DataTableRow, ({ borderBottom = true, size }) => {
|
|
3312
3318
|
return [
|
|
@@ -3314,7 +3320,7 @@ const DataTableRow = /* @__PURE__ */uuiCore.withMods(uuiComponents.DataTableRow,
|
|
|
3314
3320
|
];
|
|
3315
3321
|
}, () => propsMods);
|
|
3316
3322
|
|
|
3317
|
-
var css$w = {"uui-typography":"
|
|
3323
|
+
var css$w = {"uui-typography":"cFRTw8","uuiTypography":"cFRTw8","hero-header":"LQy-1t","heroHeader":"LQy-1t","promo-header":"MJDqnA","promoHeader":"MJDqnA","uui-critical":"IypTCN","uuiCritical":"IypTCN","uui-info":"ufkSue","uuiInfo":"ufkSue","uui-success":"IxmMXw","uuiSuccess":"IxmMXw","uui-warning":"zuGVsW","uuiWarning":"zuGVsW","uui-highlight":"H9OGSF","uuiHighlight":"H9OGSF","uui-typography-size-12":"_4G7iBd","uuiTypographySize12":"_4G7iBd","uui-typography-size-14":"Odwz48","uuiTypographySize14":"Odwz48","uui-typography-size-16":"QQxNqK","uuiTypographySize16":"QQxNqK","sorting-panel-container":"OntJF0","sortingPanelContainer":"OntJF0"};
|
|
3318
3324
|
|
|
3319
3325
|
var _path$q;
|
|
3320
3326
|
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 +3450,7 @@ var SvgNavigationExpandAllOutline = function SvgNavigationExpandAllOutline(props
|
|
|
3444
3450
|
};
|
|
3445
3451
|
var ForwardRef$k = /*#__PURE__*/React.forwardRef(SvgNavigationExpandAllOutline);
|
|
3446
3452
|
|
|
3447
|
-
var css$v = {"uui-typography":"
|
|
3453
|
+
var css$v = {"uui-typography":"bfNiMz","uuiTypography":"bfNiMz","hero-header":"Ix2R6l","heroHeader":"Ix2R6l","promo-header":"I7Ftdd","promoHeader":"I7Ftdd","uui-critical":"NXPIpj","uuiCritical":"NXPIpj","uui-info":"ND3jIx","uuiInfo":"ND3jIx","uui-success":"UJb7ky","uuiSuccess":"UJb7ky","uui-warning":"UtqHT0","uuiWarning":"UtqHT0","uui-highlight":"w4k5pe","uuiHighlight":"w4k5pe","uui-typography-size-12":"OHP904","uuiTypographySize12":"OHP904","uui-typography-size-14":"POdB4-","uuiTypographySize14":"POdB4-","uui-typography-size-16":"y3l3Q-","uuiTypographySize16":"y3l3Q-","root":"NMiTae","caption-wrapper":"WlSFtz","captionWrapper":"WlSFtz","sort-icon":"CsY6Ed","sortIcon":"CsY6Ed","dropdown-icon":"_93W2nm","dropdownIcon":"_93W2nm","infoIcon":"Evaw8Z","resizable":"pSaiNl","align-right":"U3zCYb","alignRight":"U3zCYb","align-center":"_68-NAF","alignCenter":"_68-NAF","caption":"R-EItv","truncate":"LNd8KZ","checkbox":"hMfPqw","icon":"dg9TUY","fold-all-icon":"aTtwBq","foldAllIcon":"aTtwBq","cell-tooltip":"m2DLAt","cellTooltip":"m2DLAt","upper-case":"gnKB7Y","upperCase":"gnKB7Y","resizing-marker":"HN6sWw","resizingMarker":"HN6sWw","pinned-right":"SyH0bm","pinnedRight":"SyH0bm","draggable":"eb9XB1","ghost":"EB4HYG","is-dragged-out":"PpEB00","isDraggedOut":"PpEB00","dnd-marker-left":"YX8tYV","dndMarkerLeft":"YX8tYV","dnd-marker-right":"_5GBIv0","dndMarkerRight":"_5GBIv0","cell-tooltip-wrapper":"T2cE-J","cellTooltipWrapper":"T2cE-J","cell-tooltip-text":"lAfcdU","cellTooltipText":"lAfcdU","tooltip-caption":"rx4MAN","tooltipCaption":"rx4MAN","tooltip-info":"bvcblW","tooltipInfo":"bvcblW"};
|
|
3448
3454
|
|
|
3449
3455
|
class DataTableHeaderCell extends React__namespace.Component {
|
|
3450
3456
|
constructor() {
|
|
@@ -3472,7 +3478,7 @@ class DataTableHeaderCell extends React__namespace.Component {
|
|
|
3472
3478
|
};
|
|
3473
3479
|
this.renderHeaderCheckbox = () => {
|
|
3474
3480
|
if (this.props.selectAll && this.props.isFirstColumn) {
|
|
3475
|
-
return (React__namespace.createElement(Checkbox,
|
|
3481
|
+
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
3482
|
}
|
|
3477
3483
|
};
|
|
3478
3484
|
this.renderFoldAllIcon = () => {
|
|
@@ -3506,9 +3512,8 @@ class DataTableHeaderCell extends React__namespace.Component {
|
|
|
3506
3512
|
return columnsGap ? +columnsGap / 2 : settings.sizes.dataTable.header.row.cell.defaults.resizeMarker;
|
|
3507
3513
|
};
|
|
3508
3514
|
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);
|
|
3515
|
+
const isResizable = this.props.column.allowResizing ?? this.props.allowColumnsResizing;
|
|
3516
|
+
const onClickEvent = !props.isResizing && (!this.props.column.renderFilter ? props.toggleSort : dropdownProps?.onClick);
|
|
3512
3517
|
const computeStyles = {
|
|
3513
3518
|
'--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
3519
|
'--uui-dt-header-cell-padding-start': `${this.getLeftPadding()}px`,
|
|
@@ -3516,10 +3521,13 @@ class DataTableHeaderCell extends React__namespace.Component {
|
|
|
3516
3521
|
'--uui-dt-header-cell-resizing-marker-width': `${this.getResizingMarkerWidth()}px`,
|
|
3517
3522
|
};
|
|
3518
3523
|
return (React__namespace.createElement(uuiComponents.DataTableCellContainer, { column: this.props.column, ref: (ref) => {
|
|
3519
|
-
var _a;
|
|
3520
3524
|
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:
|
|
3525
|
+
dropdownProps?.ref?.(ref);
|
|
3526
|
+
}, 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: {
|
|
3527
|
+
role: 'columnheader',
|
|
3528
|
+
'aria-sort': this.props.sortDirection === 'asc' ? 'ascending' : this.props.sortDirection ? 'descending' : 'none',
|
|
3529
|
+
...props.eventHandlers,
|
|
3530
|
+
}, style: computeStyles },
|
|
3523
3531
|
this.renderHeaderCheckbox(),
|
|
3524
3532
|
this.renderFoldAllIcon(),
|
|
3525
3533
|
this.getColumnCaption(),
|
|
@@ -3531,7 +3539,7 @@ class DataTableHeaderCell extends React__namespace.Component {
|
|
|
3531
3539
|
if (this.props.column.renderHeaderCell) {
|
|
3532
3540
|
return this.props.column.renderHeaderCell(this.props);
|
|
3533
3541
|
}
|
|
3534
|
-
return (React__namespace.createElement(uuiComponents.DataTableHeaderCell,
|
|
3542
|
+
return (React__namespace.createElement(uuiComponents.DataTableHeaderCell, { ...this.props, renderCellContent: this.props.column.renderFilter ? this.renderCellWithFilter : this.renderCellContent }));
|
|
3535
3543
|
}
|
|
3536
3544
|
}
|
|
3537
3545
|
|
|
@@ -3550,9 +3558,9 @@ var SvgActionSettingsFill = function SvgActionSettingsFill(props, ref) {
|
|
|
3550
3558
|
};
|
|
3551
3559
|
var ForwardRef$j = /*#__PURE__*/React.forwardRef(SvgActionSettingsFill);
|
|
3552
3560
|
|
|
3553
|
-
var css$u = {"uui-typography":"
|
|
3561
|
+
var css$u = {"uui-typography":"mgWXfz","uuiTypography":"mgWXfz","hero-header":"C-s3P6","heroHeader":"C-s3P6","promo-header":"aV9ZCl","promoHeader":"aV9ZCl","uui-critical":"_7I-a9f","uuiCritical":"_7I-a9f","uui-info":"AwKlW2","uuiInfo":"AwKlW2","uui-success":"zUE5dc","uuiSuccess":"zUE5dc","uui-warning":"-t1PMm","uuiWarning":"-t1PMm","uui-highlight":"_23-0XK","uuiHighlight":"_23-0XK","uui-typography-size-12":"kV0K28","uuiTypographySize12":"kV0K28","uui-typography-size-14":"US-ZYr","uuiTypographySize14":"US-ZYr","uui-typography-size-16":"_9bsjZe","uuiTypographySize16":"_9bsjZe","root":"xI4lWO"};
|
|
3554
3562
|
|
|
3555
|
-
var css$t = {"uui-typography":"
|
|
3563
|
+
var css$t = {"uui-typography":"QwffB3","uuiTypography":"QwffB3","hero-header":"gHZLap","heroHeader":"gHZLap","promo-header":"VE7asY","promoHeader":"VE7asY","uui-critical":"_9cBO8t","uuiCritical":"_9cBO8t","uui-info":"XAIsUC","uuiInfo":"XAIsUC","uui-success":"dPeMLF","uuiSuccess":"dPeMLF","uui-warning":"x2CQ-1","uuiWarning":"x2CQ-1","uui-highlight":"y0-8Ck","uuiHighlight":"y0-8Ck","uui-typography-size-12":"FwLHq0","uuiTypographySize12":"FwLHq0","uui-typography-size-14":"FsNrN3","uuiTypographySize14":"FsNrN3","uui-typography-size-16":"L27Q-U","uuiTypographySize16":"L27Q-U","root":"j9rnvX","caption-wrapper":"i50--m","captionWrapper":"i50--m","align-center":"oLZu6X","alignCenter":"oLZu6X","caption":"R3o1y9","truncate":"FkiOLs","group-cell-tooltip":"WZApoA","groupCellTooltip":"WZApoA","upper-case":"NeqCQ2","upperCase":"NeqCQ2","group-cell-tooltip-wrapper":"RV716h","groupCellTooltipWrapper":"RV716h","group-cell-tooltip-text":"U-6LLl","groupCellTooltipText":"U-6LLl","tooltip-caption":"v8mL3U","tooltipCaption":"v8mL3U","tooltip-info":"_3mJoOx","tooltipInfo":"_3mJoOx"};
|
|
3556
3564
|
|
|
3557
3565
|
class DataTableHeaderGroupCell extends React__namespace.Component {
|
|
3558
3566
|
constructor() {
|
|
@@ -3591,7 +3599,10 @@ class DataTableHeaderGroupCell extends React__namespace.Component {
|
|
|
3591
3599
|
};
|
|
3592
3600
|
return (React__namespace.createElement(uuiComponents.DataTableCellContainer, { column: this.props.group, ref: (ref) => {
|
|
3593
3601
|
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:
|
|
3602
|
+
}, 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: {
|
|
3603
|
+
role: 'columnheader',
|
|
3604
|
+
...props.eventHandlers,
|
|
3605
|
+
}, style: computeStyles }, this.getColumnCaption()));
|
|
3595
3606
|
};
|
|
3596
3607
|
}
|
|
3597
3608
|
render() {
|
|
@@ -3607,8 +3618,8 @@ class DataTableHeaderGroupCell extends React__namespace.Component {
|
|
|
3607
3618
|
}
|
|
3608
3619
|
|
|
3609
3620
|
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,
|
|
3621
|
+
renderCell: (props) => (React__namespace.createElement(DataTableHeaderCell, { ...props, size: mods.size, textCase: mods.textCase || 'normal', key: props.column.key, columnsGap: mods.columnsGap })),
|
|
3622
|
+
renderGroupCell: (props) => (React__namespace.createElement(DataTableHeaderGroupCell, { ...props, size: mods.size, textCase: mods.textCase || 'normal', key: props.key, columnsGap: mods.columnsGap })),
|
|
3612
3623
|
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
3624
|
}));
|
|
3614
3625
|
|
|
@@ -3617,16 +3628,15 @@ const UUI_FILTERS_PANEL_ADD_BUTTON_BODY = 'uui-filters-panel-add-button-body';
|
|
|
3617
3628
|
const UUI_FILTERS_PANEL_ITEM_BODY = 'uui-filters-panel-item-body';
|
|
3618
3629
|
const UUI_FILTERS_PANEL_ITEM_TOGGLER = 'uui-filters-panel-item-toggler';
|
|
3619
3630
|
|
|
3620
|
-
var css$s = {"uui-typography":"
|
|
3631
|
+
var css$s = {"uui-typography":"Pq6E-m","uuiTypography":"Pq6E-m","hero-header":"qL10cY","heroHeader":"qL10cY","promo-header":"PRe8D8","promoHeader":"PRe8D8","uui-critical":"_6PO9uq","uuiCritical":"_6PO9uq","uui-info":"LK-ia1","uuiInfo":"LK-ia1","uui-success":"t-lku7","uuiSuccess":"t-lku7","uui-warning":"uZvSoz","uuiWarning":"uZvSoz","uui-highlight":"srwnNe","uuiHighlight":"srwnNe","uui-typography-size-12":"uJiE8w","uuiTypographySize12":"uJiE8w","uui-typography-size-14":"_9xSTmy","uuiTypographySize14":"_9xSTmy","uui-typography-size-16":"SeZ5S8","uuiTypographySize16":"SeZ5S8","root":"Fj4oQ-","title-wrapper":"G2i95t","titleWrapper":"G2i95t","title":"J4tXOQ","text-wrapper":"b8MhHd","textWrapper":"b8MhHd","selection":"CMuJMW","postfix":"Z5jYWg","selected":"SB8Nkx"};
|
|
3621
3632
|
|
|
3622
3633
|
const defaultSize = '36';
|
|
3623
3634
|
const FilterPanelItemToggler = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
3624
3635
|
const togglerPickerOpened = (e) => {
|
|
3625
|
-
var _a;
|
|
3626
3636
|
if (props.isDisabled)
|
|
3627
3637
|
return;
|
|
3628
3638
|
e.preventDefault();
|
|
3629
|
-
|
|
3639
|
+
props.onClick?.();
|
|
3630
3640
|
};
|
|
3631
3641
|
const onKeyDownHandler = (e) => {
|
|
3632
3642
|
if (props.isDisabled)
|
|
@@ -3644,12 +3654,12 @@ const FilterPanelItemToggler = /* @__PURE__ */React__namespace.forwardRef((props
|
|
|
3644
3654
|
const getSelectionText = () => props.selection.map((i, index) => (React__namespace.createElement(React__namespace.Fragment, { key: `${i}${index}` },
|
|
3645
3655
|
React__namespace.createElement(Text, { color: "primary", size: props.size, cx: css$s.selection }, i),
|
|
3646
3656
|
(props.postfix || index !== props.selection.length - 1) && React__namespace.createElement("span", null, ",\u00A0"))));
|
|
3647
|
-
return (React__namespace.createElement(uuiComponents.FlexRow,
|
|
3657
|
+
return (React__namespace.createElement(uuiComponents.FlexRow, { ...props, rawProps: {
|
|
3648
3658
|
style: { maxWidth: `${props.maxWidth ? props.maxWidth + 'px' : 'auto'}` },
|
|
3649
3659
|
role: 'button',
|
|
3650
3660
|
tabIndex: props.isDisabled ? -1 : 0,
|
|
3651
3661
|
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 }
|
|
3662
|
+
}, 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 },
|
|
3653
3663
|
React__namespace.createElement(uuiComponents.FlexRow, { cx: css$s.titleWrapper },
|
|
3654
3664
|
React__namespace.createElement(Text, { size: props.size, cx: css$s.title }, getTitle),
|
|
3655
3665
|
props.selection && (React__namespace.createElement("div", { className: css$s.textWrapper },
|
|
@@ -3659,12 +3669,10 @@ const FilterPanelItemToggler = /* @__PURE__ */React__namespace.forwardRef((props
|
|
|
3659
3669
|
});
|
|
3660
3670
|
|
|
3661
3671
|
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 });
|
|
3672
|
+
function FilterPickerBody({ highlightSearchMatches = true, ...restProps }) {
|
|
3673
|
+
const props = { ...restProps, highlightSearchMatches };
|
|
3666
3674
|
const shouldShowBody = () => props.isOpen;
|
|
3667
|
-
const { view, getName, isSingleSelect, getRows, dataSourceState, getFooterProps, getPickerBodyProps, getListProps, handleDataSourceValueChange, } = uuiComponents.usePickerInput(
|
|
3675
|
+
const { view, getName, isSingleSelect, getRows, dataSourceState, getFooterProps, getPickerBodyProps, getListProps, handleDataSourceValueChange, } = uuiComponents.usePickerInput({ ...props, shouldShowBody });
|
|
3668
3676
|
const prevValue = uuiCore.usePrevious(props.value);
|
|
3669
3677
|
const prevOpened = uuiCore.usePrevious(props.isOpen);
|
|
3670
3678
|
React__namespace.useLayoutEffect(() => {
|
|
@@ -3684,45 +3692,44 @@ function FilterPickerBody(_a) {
|
|
|
3684
3692
|
};
|
|
3685
3693
|
const renderItem = (item, rowProps, dsState) => {
|
|
3686
3694
|
const { flattenSearchResults } = view.getConfig();
|
|
3687
|
-
return (React__namespace.createElement(PickerItem,
|
|
3695
|
+
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
3696
|
};
|
|
3689
3697
|
const onSelect = (row) => {
|
|
3690
|
-
handleDataSourceValueChange((currentDataSourceState) => (
|
|
3698
|
+
handleDataSourceValueChange((currentDataSourceState) => ({ ...currentDataSourceState, search: '', selectedId: row.id }));
|
|
3691
3699
|
};
|
|
3692
3700
|
const renderRow = (rowProps, dsState) => {
|
|
3693
3701
|
if (rowProps.isSelectable && isSingleSelect() && props.editMode !== 'modal') {
|
|
3694
3702
|
rowProps.onSelect = onSelect;
|
|
3695
3703
|
}
|
|
3696
|
-
return props.renderRow ? (props.renderRow(rowProps, dataSourceState)) : (React__namespace.createElement(DataPickerRow,
|
|
3704
|
+
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
3705
|
};
|
|
3698
3706
|
const renderFooter = () => {
|
|
3699
|
-
|
|
3707
|
+
const footerProps = getFooterProps();
|
|
3708
|
+
return props.renderFooter ? props.renderFooter(footerProps) : React__namespace.createElement(DataPickerFooter, { ...footerProps, size: settings.sizes.filtersPanel.pickerInput.body.default });
|
|
3700
3709
|
};
|
|
3701
3710
|
const renderBody = (bodyProps, rows) => {
|
|
3702
3711
|
const renderedDataRows = rows.map((props) => renderRow(props, dataSourceState));
|
|
3703
3712
|
const maxHeight = uuiCore.isMobile() ? document.documentElement.clientHeight : props.maxBodyHeight || pickerHeight;
|
|
3704
3713
|
const maxWidth = uuiCore.isMobile() ? undefined : 360;
|
|
3705
3714
|
return (React__namespace.createElement(React__namespace.Fragment, null,
|
|
3706
|
-
React__namespace.createElement(DataPickerBody,
|
|
3715
|
+
React__namespace.createElement(DataPickerBody, { ...bodyProps, selectionMode: props.selectionMode, rows: renderedDataRows, maxHeight: maxHeight, maxWidth: maxWidth, searchSize: settings.sizes.filtersPanel.pickerInput.body.default, editMode: "dropdown" }),
|
|
3707
3716
|
renderFooter()));
|
|
3708
3717
|
};
|
|
3709
3718
|
const rows = getRows();
|
|
3710
|
-
return renderBody(
|
|
3719
|
+
return renderBody({ ...getPickerBodyProps(rows), ...getListProps(), showSearch: props.showSearch ?? true }, rows);
|
|
3711
3720
|
}
|
|
3712
3721
|
|
|
3713
3722
|
function FilterDatePickerBody(props) {
|
|
3714
|
-
var _a;
|
|
3715
3723
|
const { value } = props;
|
|
3716
3724
|
const context = uuiCore.useUuiContext();
|
|
3717
3725
|
const handleValueChange = (newValue) => {
|
|
3718
|
-
var _a;
|
|
3719
3726
|
props.onValueChange(newValue);
|
|
3720
3727
|
if (props.getValueChangeAnalyticsEvent) {
|
|
3721
3728
|
const event = props.getValueChangeAnalyticsEvent(newValue, value);
|
|
3722
3729
|
context.uuiAnalytics.sendEvent(event);
|
|
3723
3730
|
}
|
|
3724
3731
|
if (newValue) {
|
|
3725
|
-
|
|
3732
|
+
props.onClose?.();
|
|
3726
3733
|
}
|
|
3727
3734
|
};
|
|
3728
3735
|
const handleBodyChange = (newValue) => {
|
|
@@ -3732,7 +3739,7 @@ function FilterDatePickerBody(props) {
|
|
|
3732
3739
|
};
|
|
3733
3740
|
return (React__namespace.default.createElement(React.Fragment, null,
|
|
3734
3741
|
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:
|
|
3742
|
+
React__namespace.default.createElement(DatePickerBody, { filter: props.filter, value: value, onValueChange: handleBodyChange, renderDay: props.renderDay, isHoliday: props.isHoliday, rawProps: props.rawProps?.body })),
|
|
3736
3743
|
React__namespace.default.createElement(FlexCell, { alignSelf: "stretch" },
|
|
3737
3744
|
React__namespace.default.createElement(FlexRow, { padding: "24", vPadding: "12" },
|
|
3738
3745
|
React__namespace.default.createElement(Text, null, value ? uuiDayjs.dayjs(value).format('MMM DD, YYYY') : ''),
|
|
@@ -3747,16 +3754,15 @@ function FilterRangeDatePickerBody(props) {
|
|
|
3747
3754
|
const value = _value || defaultRangeValue; // also handles null in comparison to default value
|
|
3748
3755
|
const context = uuiCore.useUuiContext();
|
|
3749
3756
|
const onOpenChange = (newIsOpen) => {
|
|
3750
|
-
var _a, _b;
|
|
3751
3757
|
{
|
|
3752
|
-
|
|
3758
|
+
props.onClose?.();
|
|
3753
3759
|
}
|
|
3754
|
-
|
|
3760
|
+
props.onOpenChange?.(newIsOpen);
|
|
3755
3761
|
};
|
|
3756
3762
|
const [inFocus, setInFocus] = React.useState('from');
|
|
3757
3763
|
const onValueChange = (newValue) => {
|
|
3758
|
-
const fromChanged =
|
|
3759
|
-
const toChanged =
|
|
3764
|
+
const fromChanged = value?.from !== newValue?.from;
|
|
3765
|
+
const toChanged = value?.to !== newValue?.to;
|
|
3760
3766
|
if (fromChanged || toChanged) {
|
|
3761
3767
|
props.onValueChange(newValue);
|
|
3762
3768
|
if (props.getValueChangeAnalyticsEvent) {
|
|
@@ -3766,8 +3772,7 @@ function FilterRangeDatePickerBody(props) {
|
|
|
3766
3772
|
}
|
|
3767
3773
|
};
|
|
3768
3774
|
const onBodyValueChange = (newValue) => {
|
|
3769
|
-
|
|
3770
|
-
setInFocus((_a = newValue.inFocus) !== null && _a !== void 0 ? _a : inFocus);
|
|
3775
|
+
setInFocus(newValue.inFocus ?? inFocus);
|
|
3771
3776
|
onValueChange(newValue.selectedDate);
|
|
3772
3777
|
const toChanged = value.to !== newValue.selectedDate.to;
|
|
3773
3778
|
const closeBody = newValue.selectedDate.from && newValue.selectedDate.to
|
|
@@ -3795,30 +3800,28 @@ function FilterRangeDatePickerBody(props) {
|
|
|
3795
3800
|
React__namespace.default.createElement(LinkButton, { isDisabled: !value.from && !value.to, caption: i18n.pickerModal.clearAllButton, onClick: () => onValueChange(defaultRangeValue) })))));
|
|
3796
3801
|
}
|
|
3797
3802
|
|
|
3798
|
-
var css$r = {"container":"
|
|
3803
|
+
var css$r = {"container":"s3c6dE"};
|
|
3799
3804
|
|
|
3800
3805
|
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';
|
|
3806
|
+
const isInRangePredicate = props?.selectedPredicate === 'inRange' || props?.selectedPredicate === 'notInRange';
|
|
3803
3807
|
const isWrongRange = (from, to) => {
|
|
3804
3808
|
if (!to && to !== 0)
|
|
3805
3809
|
return false;
|
|
3806
3810
|
return from > to;
|
|
3807
3811
|
};
|
|
3808
3812
|
const rangeValueHandler = (type) => (val) => {
|
|
3809
|
-
var _a, _b;
|
|
3810
3813
|
const value = props.value;
|
|
3811
3814
|
switch (type) {
|
|
3812
3815
|
case 'from': {
|
|
3813
3816
|
props.onValueChange({
|
|
3814
3817
|
from: val,
|
|
3815
|
-
to:
|
|
3818
|
+
to: value?.to ?? null,
|
|
3816
3819
|
});
|
|
3817
3820
|
break;
|
|
3818
3821
|
}
|
|
3819
3822
|
case 'to': {
|
|
3820
3823
|
props.onValueChange({
|
|
3821
|
-
from:
|
|
3824
|
+
from: value?.from ?? null,
|
|
3822
3825
|
to: val,
|
|
3823
3826
|
});
|
|
3824
3827
|
break;
|
|
@@ -3849,9 +3852,9 @@ function FilterNumericBody(props) {
|
|
|
3849
3852
|
return (React__namespace.default.createElement("div", null,
|
|
3850
3853
|
React__namespace.default.createElement(FlexRow, { padding: "12", alignItems: "center", spacing: "12", borderBottom: true, cx: css$r.container },
|
|
3851
3854
|
React__namespace.default.createElement(FlexCell, { width: "100%" },
|
|
3852
|
-
React__namespace.default.createElement(NumericInput, { value:
|
|
3855
|
+
React__namespace.default.createElement(NumericInput, { value: value?.from ?? null, onValueChange: rangeValueHandler('from'), size: "36", placeholder: "Min", formatOptions: { maximumFractionDigits: 2 } })),
|
|
3853
3856
|
React__namespace.default.createElement(FlexCell, { width: "100%" },
|
|
3854
|
-
React__namespace.default.createElement(NumericInput, { value:
|
|
3857
|
+
React__namespace.default.createElement(NumericInput, { value: value?.to ?? null, onValueChange: rangeValueHandler('to'), size: "36", placeholder: "Max", formatOptions: { maximumFractionDigits: 2 }, isInvalid: isWrongRange(value?.from, value?.to) }))),
|
|
3855
3858
|
renderFooter()));
|
|
3856
3859
|
}
|
|
3857
3860
|
return (React__namespace.default.createElement("div", null,
|
|
@@ -3864,15 +3867,15 @@ function FilterNumericBody(props) {
|
|
|
3864
3867
|
function FilterItemBody(props) {
|
|
3865
3868
|
switch (props.type) {
|
|
3866
3869
|
case 'singlePicker':
|
|
3867
|
-
return React__namespace.default.createElement(FilterPickerBody,
|
|
3870
|
+
return React__namespace.default.createElement(FilterPickerBody, { ...props, selectionMode: "single", valueType: "id" });
|
|
3868
3871
|
case 'numeric':
|
|
3869
|
-
return React__namespace.default.createElement(FilterNumericBody,
|
|
3872
|
+
return React__namespace.default.createElement(FilterNumericBody, { ...props });
|
|
3870
3873
|
case 'multiPicker':
|
|
3871
|
-
return React__namespace.default.createElement(FilterPickerBody,
|
|
3874
|
+
return React__namespace.default.createElement(FilterPickerBody, { ...props, selectionMode: "multi", valueType: "id" });
|
|
3872
3875
|
case 'datePicker':
|
|
3873
|
-
return React__namespace.default.createElement(FilterDatePickerBody,
|
|
3876
|
+
return React__namespace.default.createElement(FilterDatePickerBody, { ...props, format: props.format || 'DD/MM/YYYY' });
|
|
3874
3877
|
case 'rangeDatePicker':
|
|
3875
|
-
return React__namespace.default.createElement(FilterRangeDatePickerBody,
|
|
3878
|
+
return React__namespace.default.createElement(FilterRangeDatePickerBody, { ...props, format: props.format || 'DD/MM/YYYY', value: props.value || { from: null, to: null } });
|
|
3876
3879
|
case 'custom':
|
|
3877
3880
|
return props.render(props);
|
|
3878
3881
|
}
|
|
@@ -3893,7 +3896,7 @@ var SvgActionDeleteOutline = function SvgActionDeleteOutline(props, ref) {
|
|
|
3893
3896
|
};
|
|
3894
3897
|
var ForwardRef$i = /*#__PURE__*/React.forwardRef(SvgActionDeleteOutline);
|
|
3895
3898
|
|
|
3896
|
-
var css$q = {"uui-typography":"
|
|
3899
|
+
var css$q = {"uui-typography":"HakE-i","uuiTypography":"HakE-i","hero-header":"_3-VTBu","heroHeader":"_3-VTBu","promo-header":"Ya1V7L","promoHeader":"Ya1V7L","uui-critical":"_0yMGTM","uuiCritical":"_0yMGTM","uui-info":"sHo-4T","uuiInfo":"sHo-4T","uui-success":"V8yETW","uuiSuccess":"V8yETW","uui-warning":"NOd84J","uuiWarning":"NOd84J","uui-highlight":"yPUKhm","uuiHighlight":"yPUKhm","uui-typography-size-12":"MR-Eo4","uuiTypographySize12":"MR-Eo4","uui-typography-size-14":"_6J06ot","uuiTypographySize14":"_6J06ot","uui-typography-size-16":"wekIyY","uuiTypographySize16":"wekIyY","header":"DJtr-t","removeButton":"_7ImrsI","with-search":"OlhP3z","withSearch":"OlhP3z"};
|
|
3897
3900
|
|
|
3898
3901
|
function useView(props, value) {
|
|
3899
3902
|
const forceUpdate = uuiCore.useForceUpdate();
|
|
@@ -3908,11 +3911,11 @@ function useView(props, value) {
|
|
|
3908
3911
|
dataSourceState.checked = value;
|
|
3909
3912
|
}
|
|
3910
3913
|
}
|
|
3911
|
-
return useViewFn
|
|
3914
|
+
return useViewFn?.(dataSourceState, forceUpdate, { showSelectedOnly: true });
|
|
3912
3915
|
}
|
|
3913
3916
|
function FiltersToolbarItemImpl(props) {
|
|
3914
3917
|
const { maxCount = 2 } = props;
|
|
3915
|
-
const isPickersType =
|
|
3918
|
+
const isPickersType = props?.type === 'multiPicker' || props?.type === 'singlePicker';
|
|
3916
3919
|
const isMobileScreen = uuiCore.isMobile();
|
|
3917
3920
|
const popperModifiers = React.useMemo(() => {
|
|
3918
3921
|
const modifiers = [
|
|
@@ -3935,11 +3938,10 @@ function FiltersToolbarItemImpl(props) {
|
|
|
3935
3938
|
return modifiers;
|
|
3936
3939
|
}, [isPickersType]);
|
|
3937
3940
|
const getDefaultPredicate = () => {
|
|
3938
|
-
var _a, _b;
|
|
3939
3941
|
if (!props.predicates) {
|
|
3940
3942
|
return null;
|
|
3941
3943
|
}
|
|
3942
|
-
return Object.keys(props.value || {})[0] ||
|
|
3944
|
+
return Object.keys(props.value || {})[0] || props.predicates.find((i) => i.isDefault)?.predicate || props.predicates?.[0].predicate;
|
|
3943
3945
|
};
|
|
3944
3946
|
const [isOpen, isOpenChange] = React.useState(props.autoFocus);
|
|
3945
3947
|
const [predicate, setPredicate] = React.useState(getDefaultPredicate());
|
|
@@ -3981,23 +3983,19 @@ function FiltersToolbarItemImpl(props) {
|
|
|
3981
3983
|
}
|
|
3982
3984
|
setPredicate(val);
|
|
3983
3985
|
};
|
|
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
|
-
};
|
|
3986
|
+
const renderHeader = (hideTitle) => (React__namespace.default.createElement("div", { className: cx__default.default(css$q.header, isPickersType && (props.showSearch ?? css$q.withSearch)) },
|
|
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?.isAlwaysVisible && (React__namespace.default.createElement(LinkButton, { cx: css$q.removeButton, caption: i18n.filterToolbar.datePicker.removeCaption, onClick: removeOnclickHandler, size: "24", icon: ForwardRef$i }))));
|
|
3990
3989
|
const renderBody = (dropdownProps) => {
|
|
3991
3990
|
const hideHeaderTitle = isPickersType && isMobileScreen;
|
|
3992
|
-
return isPickersType ? (React__namespace.default.createElement(PickerBodyMobileView,
|
|
3991
|
+
return isPickersType ? (React__namespace.default.createElement(PickerBodyMobileView, { ...dropdownProps, cx: UUI_FILTERS_PANEL_ITEM_BODY, title: props.title, width: 360, onClose: () => isOpenChange(false) },
|
|
3993
3992
|
renderHeader(hideHeaderTitle),
|
|
3994
|
-
React__namespace.default.createElement(FilterItemBody,
|
|
3993
|
+
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
3994
|
renderHeader(hideHeaderTitle),
|
|
3996
|
-
React__namespace.default.createElement(FilterItemBody,
|
|
3995
|
+
React__namespace.default.createElement(FilterItemBody, { ...props, ...dropdownProps, selectedPredicate: predicate, value: getValue(), onValueChange: onValueChange })));
|
|
3997
3996
|
};
|
|
3998
3997
|
const getValue = () => {
|
|
3999
|
-
|
|
4000
|
-
return predicate ? (_a = props.value) === null || _a === void 0 ? void 0 : _a[predicate] : props.value;
|
|
3998
|
+
return predicate ? props.value?.[predicate] : props.value;
|
|
4001
3999
|
};
|
|
4002
4000
|
const getPickerItemName = (item, config) => {
|
|
4003
4001
|
if (item.isLoading) {
|
|
@@ -4016,13 +4014,13 @@ function FiltersToolbarItemImpl(props) {
|
|
|
4016
4014
|
case 'multiPicker': {
|
|
4017
4015
|
let isLoading = false;
|
|
4018
4016
|
const selection = currentValue
|
|
4019
|
-
? currentValue
|
|
4017
|
+
? currentValue?.slice(0, maxCount).map((i) => {
|
|
4020
4018
|
const item = view.getById(i, null);
|
|
4021
|
-
isLoading = item
|
|
4019
|
+
isLoading = item?.isLoading;
|
|
4022
4020
|
return getPickerItemName(item, props);
|
|
4023
4021
|
})
|
|
4024
4022
|
: currentValue;
|
|
4025
|
-
const postfix = (!isLoading &&
|
|
4023
|
+
const postfix = (!isLoading && currentValue?.length > maxCount) ? ` +${(currentValue.length - maxCount).toString()} ${i18n.filterToolbar.pickerInput.itemsPlaceholder}` : null;
|
|
4026
4024
|
return { selection, postfix };
|
|
4027
4025
|
}
|
|
4028
4026
|
case 'numeric': {
|
|
@@ -4032,7 +4030,7 @@ function FiltersToolbarItemImpl(props) {
|
|
|
4032
4030
|
return { selection: undefined };
|
|
4033
4031
|
}
|
|
4034
4032
|
const selection = isRangePredicate
|
|
4035
|
-
? `${!
|
|
4033
|
+
? `${!currentValue?.from && currentValue?.from !== 0 ? 'Min' : decimalFormat(currentValue?.from)} - ${!currentValue?.to && currentValue?.to !== 0 ? 'Max' : decimalFormat(currentValue?.to)}`
|
|
4036
4034
|
: `${!currentValue && currentValue !== 0 ? 'ALL' : decimalFormat(currentValue)}`;
|
|
4037
4035
|
return { selection: [selection] };
|
|
4038
4036
|
}
|
|
@@ -4051,11 +4049,11 @@ function FiltersToolbarItemImpl(props) {
|
|
|
4051
4049
|
if (!currentValue || (!currentValue.from && !currentValue.to)) {
|
|
4052
4050
|
return { selection: undefined };
|
|
4053
4051
|
}
|
|
4054
|
-
const currentValueFrom =
|
|
4055
|
-
? uuiDayjs.dayjs(currentValue
|
|
4052
|
+
const currentValueFrom = currentValue?.from
|
|
4053
|
+
? uuiDayjs.dayjs(currentValue?.from).format(props.format || defaultFormat)
|
|
4056
4054
|
: i18n.filterToolbar.rangeDatePicker.emptyPlaceholderFrom;
|
|
4057
|
-
const currentValueTo =
|
|
4058
|
-
? uuiDayjs.dayjs(currentValue
|
|
4055
|
+
const currentValueTo = currentValue?.to
|
|
4056
|
+
? uuiDayjs.dayjs(currentValue?.to).format(props.format || defaultFormat)
|
|
4059
4057
|
: i18n.filterToolbar.rangeDatePicker.emptyPlaceholderTo;
|
|
4060
4058
|
const selection = `${currentValueFrom} - ${currentValueTo}`;
|
|
4061
4059
|
return { selection: [selection] };
|
|
@@ -4071,7 +4069,7 @@ function FiltersToolbarItemImpl(props) {
|
|
|
4071
4069
|
return props.togglerWidth;
|
|
4072
4070
|
return props.type === 'datePicker' || props.type === 'rangeDatePicker' ? null : 300;
|
|
4073
4071
|
};
|
|
4074
|
-
const renderTarget = (dropdownProps) => (React__namespace.default.createElement(FilterPanelItemToggler,
|
|
4072
|
+
const renderTarget = (dropdownProps) => (React__namespace.default.createElement(FilterPanelItemToggler, { ...dropdownProps, ...getTogglerValue(), title: props.title, predicateName: props.value ? predicateName : null, maxWidth: getTogglerWidth(), size: props.size }));
|
|
4075
4073
|
return (React__namespace.default.createElement(uuiComponents.Dropdown, { renderTarget: renderTarget, renderBody: renderBody, closeBodyOnTogglerHidden: !uuiCore.isMobile(), value: isOpen, onValueChange: isOpenChange, modifiers: popperModifiers }));
|
|
4076
4074
|
}
|
|
4077
4075
|
const FiltersPanelItem = /* @__PURE__ */React__namespace.default.memo(FiltersToolbarItemImpl);
|
|
@@ -4138,15 +4136,13 @@ function FiltersToolbarImpl(props) {
|
|
|
4138
4136
|
getId: (item) => item.field,
|
|
4139
4137
|
}, []);
|
|
4140
4138
|
const onFiltersChange = (updatedFilters) => {
|
|
4141
|
-
var _a, _b;
|
|
4142
4139
|
const newConfig = {};
|
|
4143
4140
|
const newFilter = {};
|
|
4144
|
-
const filtersConfig = Object.values(
|
|
4141
|
+
const filtersConfig = Object.values(tableState.filtersConfig ?? {});
|
|
4145
4142
|
const sortedOrders = uuiCore.orderBy(filtersConfig, ({ order }) => order);
|
|
4146
|
-
let lastItemOrder =
|
|
4143
|
+
let lastItemOrder = sortedOrders?.length ? sortedOrders[sortedOrders.length - 1]?.order : null;
|
|
4147
4144
|
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;
|
|
4145
|
+
let order = tableState?.filtersConfig?.[filter?.field]?.order;
|
|
4150
4146
|
if (!order) {
|
|
4151
4147
|
order = uuiCore.getOrderBetween(lastItemOrder, null);
|
|
4152
4148
|
lastItemOrder = order;
|
|
@@ -4157,28 +4153,39 @@ function FiltersToolbarImpl(props) {
|
|
|
4157
4153
|
newFilter[filter.field] = tableState.filter[filter.field];
|
|
4158
4154
|
}
|
|
4159
4155
|
});
|
|
4160
|
-
setTableState(
|
|
4156
|
+
setTableState({
|
|
4157
|
+
...tableState,
|
|
4158
|
+
filtersConfig: newConfig,
|
|
4159
|
+
filter: newFilter,
|
|
4160
|
+
});
|
|
4161
4161
|
};
|
|
4162
4162
|
const handleFilterChange = (newFilter) => {
|
|
4163
|
-
const filter = normalizeFilterWithPredicates(
|
|
4164
|
-
setTableState(
|
|
4163
|
+
const filter = normalizeFilterWithPredicates({ ...tableState.filter, ...newFilter });
|
|
4164
|
+
setTableState({
|
|
4165
|
+
...tableState,
|
|
4166
|
+
filter: filter,
|
|
4167
|
+
});
|
|
4165
4168
|
};
|
|
4166
4169
|
const removeFilter = (field) => {
|
|
4167
|
-
const filterConfig =
|
|
4170
|
+
const filterConfig = { ...tableState.filtersConfig };
|
|
4168
4171
|
delete filterConfig[field];
|
|
4169
|
-
const filter =
|
|
4172
|
+
const filter = { ...tableState.filter };
|
|
4170
4173
|
delete filter[field];
|
|
4171
|
-
const newTableState =
|
|
4172
|
-
|
|
4174
|
+
const newTableState = {
|
|
4175
|
+
...tableState,
|
|
4176
|
+
filtersConfig: filterConfig,
|
|
4177
|
+
filter: filter,
|
|
4178
|
+
};
|
|
4179
|
+
setTableState({ ...newTableState });
|
|
4173
4180
|
};
|
|
4174
4181
|
const selectedFilters = React.useMemo(() => {
|
|
4175
4182
|
const filtersConfig = tableState.filtersConfig || {};
|
|
4176
4183
|
return filters.filter((filter) => {
|
|
4177
|
-
return filter.isAlwaysVisible || (filtersConfig[filter
|
|
4184
|
+
return filter.isAlwaysVisible || (filtersConfig[filter?.field] ? filtersConfig[filter?.field].isVisible : false);
|
|
4178
4185
|
});
|
|
4179
4186
|
}, [tableState.filtersConfig, filters]);
|
|
4180
4187
|
const sortedActiveFilters = React.useMemo(() => {
|
|
4181
|
-
return uuiCore.orderBy(selectedFilters, (f) =>
|
|
4188
|
+
return uuiCore.orderBy(selectedFilters, (f) => tableState.filtersConfig?.[f.field]?.order);
|
|
4182
4189
|
}, [filters, tableState.filtersConfig]);
|
|
4183
4190
|
const renderAddFilterToggler = React.useCallback((togglerProps) => {
|
|
4184
4191
|
return (React__namespace.default.createElement(Button, { size: props.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 }));
|
|
@@ -4192,29 +4199,25 @@ function FiltersToolbarImpl(props) {
|
|
|
4192
4199
|
}), []);
|
|
4193
4200
|
const isAllFiltersAlwaysVisible = props.filters.every((i) => i.isAlwaysVisible);
|
|
4194
4201
|
React.useEffect(() => {
|
|
4195
|
-
var _a, _b;
|
|
4196
4202
|
if (sortedActiveFilters.length && newFilterId && sortedActiveFilters.find(({ field }) => field === newFilterId)) {
|
|
4197
4203
|
// PickerInput should be closed after filterId update and opening the filter's body.
|
|
4198
4204
|
// Otherwise, the focus will be not set in the search input of the filter's body.
|
|
4199
|
-
|
|
4205
|
+
pickerInputRef.current?.closePickerBody?.();
|
|
4200
4206
|
// Reset new filter id, after first render with autofocus
|
|
4201
4207
|
setNewFilterId(null);
|
|
4202
4208
|
}
|
|
4203
4209
|
}, [newFilterId, sortedActiveFilters]);
|
|
4204
4210
|
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) => {
|
|
4211
|
+
sortedActiveFilters.map((f) => (React__namespace.default.createElement(uuiComponents.FlexCell, { width: "auto", key: f.field },
|
|
4212
|
+
React__namespace.default.createElement(FiltersPanelItem, { ...f, value: tableState.filter?.[f.field], onValueChange: handleFilterChange, key: f.field, autoFocus: newFilterId === f.field, removeFilter: removeFilter, size: props.size })))),
|
|
4213
|
+
!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
4214
|
props.onCheck && props.onCheck(row);
|
|
4212
4215
|
setNewFilterId(row.value.field);
|
|
4213
|
-
}, renderItem: (item, rowProps) => React__namespace.default.createElement(PickerItem,
|
|
4216
|
+
}, renderItem: (item, rowProps) => React__namespace.default.createElement(PickerItem, { ...rowProps, title: item.title }) })), getName: (i) => i.title, renderToggler: renderAddFilterToggler, emptyValue: [], getRowOptions: getRowOptions, fixedBodyPosition: true, size: props.size, bodyCx: UUI_FILTERS_PANEL_ADD_BUTTON_BODY, ref: pickerInputRef }))));
|
|
4214
4217
|
}
|
|
4215
4218
|
const FiltersPanel = /* @__PURE__ */React__namespace.default.memo(FiltersToolbarImpl);
|
|
4216
4219
|
|
|
4217
|
-
var css$p = {"divider":"
|
|
4220
|
+
var css$p = {"divider":"NsY86Q","dropdownDeleteIcon":"gQGLLu","presetsWrapper":"BkKuEQ","addPresetContainer":"Avklsr","dropContainer":"buEpVj"};
|
|
4218
4221
|
|
|
4219
4222
|
var _path$g;
|
|
4220
4223
|
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 +4330,31 @@ var SvgContentLinkOutline = function SvgContentLinkOutline(props, ref) {
|
|
|
4327
4330
|
};
|
|
4328
4331
|
var ForwardRef$a = /*#__PURE__*/React.forwardRef(SvgContentLinkOutline);
|
|
4329
4332
|
|
|
4330
|
-
var css$o = {"delete-button":"
|
|
4333
|
+
var css$o = {"delete-button":"a7rcQx","deleteButton":"a7rcQx","tab-button":"s5vzEm","tabButton":"s5vzEm","targetOpen":"_3nKtqh"};
|
|
4331
4334
|
|
|
4332
4335
|
function PresetActionsDropdown(props) {
|
|
4333
4336
|
const { uuiNotifications } = uuiCore.useUuiContext();
|
|
4334
|
-
const copyUrlToClipboard = React.useCallback(() =>
|
|
4335
|
-
|
|
4337
|
+
const copyUrlToClipboard = React.useCallback(async () => {
|
|
4338
|
+
await navigator.clipboard.writeText(props.getPresetLink(props.preset));
|
|
4336
4339
|
successNotificationHandler('Link copied!');
|
|
4337
|
-
}
|
|
4338
|
-
const saveInCurrent = React.useCallback((preset) =>
|
|
4339
|
-
const newPreset =
|
|
4340
|
-
|
|
4340
|
+
}, []);
|
|
4341
|
+
const saveInCurrent = React.useCallback(async (preset) => {
|
|
4342
|
+
const newPreset = {
|
|
4343
|
+
...preset,
|
|
4344
|
+
filter: props.tableState.filter,
|
|
4345
|
+
sorting: props.tableState.sorting,
|
|
4346
|
+
columnsConfig: props.tableState.columnsConfig,
|
|
4347
|
+
filtersConfig: props.tableState.filtersConfig,
|
|
4348
|
+
viewState: props.tableState.viewState,
|
|
4349
|
+
};
|
|
4350
|
+
await props.updatePreset(newPreset);
|
|
4341
4351
|
successNotificationHandler('Changes saved!');
|
|
4342
|
-
}
|
|
4352
|
+
}, [
|
|
4343
4353
|
props.tableState.filter, props.tableState.columnsConfig, props.tableState.filtersConfig,
|
|
4344
4354
|
]);
|
|
4345
4355
|
const successNotificationHandler = React.useCallback((text) => {
|
|
4346
4356
|
uuiNotifications
|
|
4347
|
-
.show((props) => (React__namespace.default.createElement(SuccessNotification,
|
|
4357
|
+
.show((props) => (React__namespace.default.createElement(SuccessNotification, { ...props },
|
|
4348
4358
|
React__namespace.default.createElement(Text, { size: "36", fontSize: "14" }, text))), { duration: 3 })
|
|
4349
4359
|
.catch(() => null);
|
|
4350
4360
|
}, []);
|
|
@@ -4357,16 +4367,16 @@ function PresetActionsDropdown(props) {
|
|
|
4357
4367
|
const duplicateHandler = React.useCallback(() => {
|
|
4358
4368
|
props.duplicatePreset(props.preset);
|
|
4359
4369
|
}, [props.preset]);
|
|
4360
|
-
const deleteHandler = React.useCallback(() =>
|
|
4361
|
-
|
|
4362
|
-
}
|
|
4370
|
+
const deleteHandler = React.useCallback(async () => {
|
|
4371
|
+
await props.deletePreset(props.preset);
|
|
4372
|
+
}, [
|
|
4363
4373
|
props.activePresetId, props.deletePreset, props.preset,
|
|
4364
4374
|
]);
|
|
4365
4375
|
const renderBody = (dropdownProps) => {
|
|
4366
4376
|
const isReadonlyPreset = props.preset.isReadonly;
|
|
4367
4377
|
const isPresetChanged = props.activePresetId === props.preset.id && props.hasPresetChanged(props.preset);
|
|
4368
4378
|
const isRenameAvailable = props.preset.id === props.activePresetId && !isReadonlyPreset;
|
|
4369
|
-
return (React__namespace.default.createElement(DropdownMenuBody,
|
|
4379
|
+
return (React__namespace.default.createElement(DropdownMenuBody, { ...dropdownProps },
|
|
4370
4380
|
isPresetChanged && (React__namespace.default.createElement(React__namespace.default.Fragment, null,
|
|
4371
4381
|
!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
4382
|
React__namespace.default.createElement(DropdownMenuButton, { key: `${props.preset.id}-save-as-new`, icon: ForwardRef$e, caption: "Save as new",
|
|
@@ -4382,12 +4392,12 @@ function PresetActionsDropdown(props) {
|
|
|
4382
4392
|
React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$i, caption: "Delete", cx: css$o.deleteButton, onClick: deleteHandler })))));
|
|
4383
4393
|
};
|
|
4384
4394
|
const renderTarget = React.useCallback((dropdownProps) => {
|
|
4385
|
-
return (React__namespace.default.createElement(IconButton,
|
|
4395
|
+
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
4396
|
}, []);
|
|
4387
4397
|
return (React__namespace.default.createElement(Dropdown, { renderBody: renderBody, renderTarget: renderTarget, placement: "bottom-end", modifiers: [{ name: 'offset', options: { offset: [0, 22] } }] }));
|
|
4388
4398
|
}
|
|
4389
4399
|
|
|
4390
|
-
var css$n = {"preset-input-cell":"
|
|
4400
|
+
var css$n = {"preset-input-cell":"uc1qTY","presetInputCell":"uc1qTY","preset-input":"BESZSR","presetInput":"BESZSR"};
|
|
4391
4401
|
|
|
4392
4402
|
const UUI_PRESETS_PANEL_ADD_BUTTON = 'uui-presets-panel-add-button';
|
|
4393
4403
|
const UUI_PRESETS_PANEL_MORE_BUTTON = 'uui-presets-panel-more-button';
|
|
@@ -4395,21 +4405,20 @@ const UUI_PRESETS_PANEL_INPUT = 'uui-presets-panel-input';
|
|
|
4395
4405
|
const UUI_PRESETS_PANEL_PRESET = 'uui-presets-panel-preset';
|
|
4396
4406
|
|
|
4397
4407
|
function PresetInput(props) {
|
|
4398
|
-
|
|
4399
|
-
const [presetCaption, setPresetCaption] = React.useState(((_a = props.preset) === null || _a === void 0 ? void 0 : _a.name) || '');
|
|
4408
|
+
const [presetCaption, setPresetCaption] = React.useState(props.preset?.name || '');
|
|
4400
4409
|
const [readonly, setReadonly] = React.useState(false);
|
|
4401
4410
|
const cancelActionHandler = React.useCallback(() => {
|
|
4402
4411
|
setPresetCaption('');
|
|
4403
4412
|
props.onCancel();
|
|
4404
4413
|
}, [props.onCancel]);
|
|
4405
|
-
const acceptActionHandler = React.useCallback(() =>
|
|
4414
|
+
const acceptActionHandler = React.useCallback(async () => {
|
|
4406
4415
|
setReadonly(() => true);
|
|
4407
4416
|
if (presetCaption) {
|
|
4408
|
-
|
|
4417
|
+
await props.onSuccess(presetCaption);
|
|
4409
4418
|
}
|
|
4410
4419
|
props.onCancel();
|
|
4411
4420
|
setReadonly(() => false);
|
|
4412
|
-
}
|
|
4421
|
+
}, [presetCaption]);
|
|
4413
4422
|
const newPresetOnBlurHandler = React.useCallback(() => {
|
|
4414
4423
|
if (presetCaption.length) {
|
|
4415
4424
|
return;
|
|
@@ -4420,7 +4429,7 @@ function PresetInput(props) {
|
|
|
4420
4429
|
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
4430
|
}
|
|
4422
4431
|
|
|
4423
|
-
var css$m = {"preset":"
|
|
4432
|
+
var css$m = {"preset":"cL478P","activePreset":"Qdt70a"};
|
|
4424
4433
|
|
|
4425
4434
|
function Preset(props) {
|
|
4426
4435
|
const [isRenamePreset, setIsRenamePreset] = React.useState(false);
|
|
@@ -4434,11 +4443,14 @@ function Preset(props) {
|
|
|
4434
4443
|
}
|
|
4435
4444
|
}, []);
|
|
4436
4445
|
const handlePresetRename = React.useCallback((name) => {
|
|
4437
|
-
const newPreset =
|
|
4446
|
+
const newPreset = {
|
|
4447
|
+
...props.preset,
|
|
4448
|
+
name: name,
|
|
4449
|
+
};
|
|
4438
4450
|
return props.updatePreset(newPreset);
|
|
4439
4451
|
}, [props.preset]);
|
|
4440
4452
|
const isPresetActive = props.activePresetId === props.preset.id;
|
|
4441
|
-
const PresetActionsDropdownComponent = React.useCallback(() => React__namespace.default.createElement(PresetActionsDropdown,
|
|
4453
|
+
const PresetActionsDropdownComponent = React.useCallback(() => React__namespace.default.createElement(PresetActionsDropdown, { renamePreset: setPresetForRename, ...props }), [props.preset, props.tableState, props.activePresetId]);
|
|
4442
4454
|
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
4455
|
}
|
|
4444
4456
|
|
|
@@ -4467,9 +4479,9 @@ function PresetsPanel(props) {
|
|
|
4467
4479
|
const cancelAddingPreset = React.useCallback(() => {
|
|
4468
4480
|
setIsAddingPreset(false);
|
|
4469
4481
|
}, []);
|
|
4470
|
-
const presetApi =
|
|
4482
|
+
const { presets, ...presetApi } = props;
|
|
4471
4483
|
const renderPreset = (preset) => {
|
|
4472
|
-
return React__namespace.default.createElement(Preset,
|
|
4484
|
+
return React__namespace.default.createElement(Preset, { key: preset.id, preset: preset, addPreset: setAddingPreset, ...presetApi });
|
|
4473
4485
|
};
|
|
4474
4486
|
const renderAddPresetButton = React.useCallback(() => {
|
|
4475
4487
|
return (React__namespace.default.createElement("div", { key: "addingPresetBlock", className: css$p.addPresetContainer }, !isAddingPreset ? (React__namespace.default.createElement(Button, { cx: UUI_PRESETS_PANEL_ADD_BUTTON, size: "36", 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 }))));
|
|
@@ -4480,8 +4492,8 @@ function PresetsPanel(props) {
|
|
|
4480
4492
|
const renderMoreButtonDropdown = (item, hiddenItems) => {
|
|
4481
4493
|
return (React__namespace.default.createElement(Dropdown, { key: "more", renderTarget: (props) => (React__namespace.default.createElement(FlexRow, null,
|
|
4482
4494
|
React__namespace.default.createElement("div", { className: css$p.divider }),
|
|
4483
|
-
React__namespace.default.createElement(Button,
|
|
4484
|
-
React__namespace.default.createElement(
|
|
4495
|
+
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 },
|
|
4496
|
+
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
4497
|
};
|
|
4486
4498
|
const getPresetPriority = (preset, index) => {
|
|
4487
4499
|
return preset.id === props.activePresetId ? 100499 : 1000 - index;
|
|
@@ -4516,18 +4528,21 @@ const defaultPredicates = {
|
|
|
4516
4528
|
|
|
4517
4529
|
const useColumnsWithFilters = (initialColumns, filters) => {
|
|
4518
4530
|
const makeFilterRenderCallback = React.useCallback((key) => function (filterLens, dropdownProps) {
|
|
4519
|
-
const filter = filters
|
|
4531
|
+
const filter = filters?.find((f) => f.columnKey === key);
|
|
4520
4532
|
if (!filter)
|
|
4521
4533
|
return null;
|
|
4522
4534
|
const props = filterLens.prop(filter.field).toProps();
|
|
4523
|
-
return React__namespace.default.createElement(FilterItemBody,
|
|
4535
|
+
return React__namespace.default.createElement(FilterItemBody, { ...props, ...filter, ...dropdownProps });
|
|
4524
4536
|
}, [filters]);
|
|
4525
4537
|
const columns = React.useMemo(() => {
|
|
4526
4538
|
if (filters) {
|
|
4527
4539
|
const filterKeys = filters.map((f) => f.columnKey);
|
|
4528
4540
|
const newColumns = (initialColumns.map((column) => {
|
|
4529
4541
|
if (filterKeys.includes(column.key)) {
|
|
4530
|
-
return
|
|
4542
|
+
return {
|
|
4543
|
+
...column,
|
|
4544
|
+
renderFilter: makeFilterRenderCallback(column.key),
|
|
4545
|
+
};
|
|
4531
4546
|
}
|
|
4532
4547
|
else {
|
|
4533
4548
|
return column;
|
|
@@ -4595,7 +4610,7 @@ var SvgTableGroupColumnRightFill = function SvgTableGroupColumnRightFill(props,
|
|
|
4595
4610
|
};
|
|
4596
4611
|
var ForwardRef$6 = /*#__PURE__*/React.forwardRef(SvgTableGroupColumnRightFill);
|
|
4597
4612
|
|
|
4598
|
-
var css$l = {"unpin-icon":"
|
|
4613
|
+
var css$l = {"unpin-icon":"NLUjnv","unpinIcon":"NLUjnv","pin-toggler-icon":"_0oH6AT","pinTogglerIcon":"_0oH6AT"};
|
|
4599
4614
|
|
|
4600
4615
|
function PinIconButton(props) {
|
|
4601
4616
|
const i18nLocal = i18n.tables.columnsConfigurationModal;
|
|
@@ -4654,7 +4669,7 @@ var SvgActionDragIndicator18 = function SvgActionDragIndicator18(props, ref) {
|
|
|
4654
4669
|
};
|
|
4655
4670
|
var ForwardRef$5 = /*#__PURE__*/React.forwardRef(SvgActionDragIndicator18);
|
|
4656
4671
|
|
|
4657
|
-
var css$k = {"uui-typography":"
|
|
4672
|
+
var css$k = {"uui-typography":"sXToSl","uuiTypography":"sXToSl","hero-header":"_2BrBlL","heroHeader":"_2BrBlL","promo-header":"u8UZYs","promoHeader":"u8UZYs","uui-critical":"YPzEL3","uuiCritical":"YPzEL3","uui-info":"_05SGTx","uuiInfo":"_05SGTx","uui-success":"tPe5fM","uuiSuccess":"tPe5fM","uui-warning":"_7ius3W","uuiWarning":"_7ius3W","uui-highlight":"L1opX1","uuiHighlight":"L1opX1","uui-typography-size-12":"HqYRCU","uuiTypographySize12":"HqYRCU","uui-typography-size-14":"HetW8-","uuiTypographySize14":"HetW8-","uui-typography-size-16":"_1q2qcr","uuiTypographySize16":"_1q2qcr","row-wrapper":"_9GM16k","rowWrapper":"_9GM16k","pin-icon-button":"o3JVi-","pinIconButton":"o3JVi-","not-pinned":"psb6FC","notPinned":"psb6FC","checkbox":"xJNPq6","drag-handle":"Nxk1sr","dragHandle":"Nxk1sr","dnd-disabled":"zg4smd","dndDisabled":"zg4smd"};
|
|
4658
4673
|
|
|
4659
4674
|
const ColumnRow = /* @__PURE__ */React__namespace.memo(function ColumnRow(props) {
|
|
4660
4675
|
const { column } = props;
|
|
@@ -4665,19 +4680,19 @@ const ColumnRow = /* @__PURE__ */React__namespace.memo(function ColumnRow(props)
|
|
|
4665
4680
|
const data = { column, columnConfig };
|
|
4666
4681
|
const renderContent = (dndActorParams) => {
|
|
4667
4682
|
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:
|
|
4683
|
+
const { onTouchStart, onPointerDown, ...restEventHandlers } = dndActorParams.eventHandlers;
|
|
4684
|
+
const { ref, ...dndActorPropsWithoutRef } = dndActorParams;
|
|
4685
|
+
return (React__namespace.createElement(FlexRow, { size: settings.sizes.dataTable.columnsConfigurationModal.columnRow, cx: wrapperClasses, ref: dndActorParams.ref, rawProps: { ...restEventHandlers }, alignItems: "top" },
|
|
4671
4686
|
React__namespace.createElement(uuiComponents.DragHandle, { dragHandleIcon: ForwardRef$5, rawProps: { onTouchStart, onPointerDown }, isDisabled: !isDndAllowed, cx: uuiCore.cx(css$k.dragHandle, !isDndAllowed && css$k.dndDisabled) }),
|
|
4672
4687
|
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
4688
|
React__namespace.createElement(FlexRow, { size: null, cx: css$k.pinIconButton },
|
|
4674
4689
|
React__namespace.createElement(PinIconButton, { pinPosition: pinPosition, canUnpin: !isPinnedAlways, onTogglePin: togglePin })),
|
|
4675
|
-
React__namespace.createElement(DropMarker,
|
|
4690
|
+
React__namespace.createElement(DropMarker, { ...dndActorPropsWithoutRef })));
|
|
4676
4691
|
};
|
|
4677
4692
|
return (React__namespace.createElement(uuiCore.DndActor, { key: column.key, srcData: isDndAllowed && data, dstData: data, canAcceptDrop: onCanAcceptDrop, onDrop: onDrop, render: renderContent }));
|
|
4678
4693
|
});
|
|
4679
4694
|
|
|
4680
|
-
var css$j = {"uui-typography":"
|
|
4695
|
+
var css$j = {"uui-typography":"O2CpAp","uuiTypography":"O2CpAp","hero-header":"_4bbgm6","heroHeader":"_4bbgm6","promo-header":"C6pBKC","promoHeader":"C6pBKC","uui-critical":"_4rDAwz","uuiCritical":"_4rDAwz","uui-info":"_55QnbU","uuiInfo":"_55QnbU","uui-success":"_--JUmf","uuiSuccess":"_--JUmf","uui-warning":"ikhNfn","uuiWarning":"ikhNfn","uui-highlight":"iIg0U2","uuiHighlight":"iIg0U2","uui-typography-size-12":"_4HriOF","uuiTypographySize12":"_4HriOF","uui-typography-size-14":"hvYwKp","uuiTypographySize14":"hvYwKp","uui-typography-size-16":"RLMulW","uuiTypographySize16":"RLMulW","root":"h7ZsgT","main-panel":"_9h-QAl","mainPanel":"_9h-QAl","group":"z0zAc-","group-title":"yDJlpd","groupTitle":"yDJlpd","group-items":"l1HqL-","groupItems":"l1HqL-","no-data":"gk7pn0","noData":"gk7pn0","no-data-title":"eEw7uz","noDataTitle":"eEw7uz","no-data-sub-title":"wS3M4l","noDataSubTitle":"wS3M4l","h-divider":"_0T56ny","hDivider":"_0T56ny","search-area":"_0Fd462","searchArea":"_0Fd462","subgroup-accordion":"jgr59q","subgroupAccordion":"jgr59q","subgroup":"D-l5JE","subgroup-title":"PNBwRx","subgroupTitle":"PNBwRx"};
|
|
4681
4696
|
|
|
4682
4697
|
const renderGroupTitle = (title, amount) => (React__namespace.createElement(FlexRow, { cx: css$j.group },
|
|
4683
4698
|
React__namespace.createElement(Text, { size: "none", cx: css$j.groupTitle }, title),
|
|
@@ -4685,7 +4700,7 @@ const renderGroupTitle = (title, amount) => (React__namespace.createElement(Flex
|
|
|
4685
4700
|
React__namespace.createElement(uuiComponents.FlexSpacer, null)));
|
|
4686
4701
|
function ColumnsConfigurationModal(props) {
|
|
4687
4702
|
const i18n$1 = i18n.tables.columnsConfigurationModal;
|
|
4688
|
-
const { columns, columnsConfig: initialColumnsConfig, defaultConfig
|
|
4703
|
+
const { columns, columnsConfig: initialColumnsConfig, defaultConfig, ...modalProps } = props;
|
|
4689
4704
|
const { groupedColumns, searchValue, columnsConfig, reset, checkAll, uncheckAll, setSearchValue, hasAnySelectedColumns, } = uuiComponents.useColumnsConfiguration({
|
|
4690
4705
|
initialColumnsConfig,
|
|
4691
4706
|
columns,
|
|
@@ -4725,14 +4740,14 @@ function ColumnsConfigurationModal(props) {
|
|
|
4725
4740
|
React__namespace.createElement(SubGroup, { renderItem: props.renderItem, items: items })));
|
|
4726
4741
|
};
|
|
4727
4742
|
const applyButton = React__namespace.createElement(Button, { caption: i18n$1.applyButton, isDisabled: !hasAnySelectedColumns, color: "primary", onClick: apply });
|
|
4728
|
-
return (React__namespace.createElement(ModalBlocker,
|
|
4743
|
+
return (React__namespace.createElement(ModalBlocker, { ...modalProps },
|
|
4729
4744
|
React__namespace.createElement(ModalWindow, { cx: css$j.root, height: "95dvh", maxHeight: "95dvh", width: settings.sizes.dataTable.columnsConfigurationModal.width },
|
|
4730
4745
|
React__namespace.createElement(ModalHeader, { title: i18n$1.configureColumnsTitle, onClose: close }),
|
|
4731
4746
|
React__namespace.createElement(FlexRow, { borderBottom: true, cx: css$j.searchArea },
|
|
4732
4747
|
React__namespace.createElement(SearchInput, { size: settings.sizes.dataTable.columnsConfigurationModal.search, value: searchValue, onValueChange: setSearchValue, placeholder: i18n$1.searchPlaceholder }),
|
|
4733
4748
|
React__namespace.createElement(Dropdown, { closeOnTargetClick: true, renderBody: () => (React__namespace.createElement(DropdownMenuBody, { minWidth: 100 },
|
|
4734
4749
|
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,
|
|
4750
|
+
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
4751
|
React__namespace.createElement(Panel, { background: "surface-main", cx: css$j.mainPanel },
|
|
4737
4752
|
React__namespace.createElement(ScrollBars, null,
|
|
4738
4753
|
renderVisible(),
|
|
@@ -4766,7 +4781,7 @@ function SubGroup(props) {
|
|
|
4766
4781
|
return null;
|
|
4767
4782
|
}
|
|
4768
4783
|
|
|
4769
|
-
var css$i = {"listContainer":"
|
|
4784
|
+
var css$i = {"listContainer":"CaJkL-","header":"-QOhAL","group":"lkVq7g","stickyHeader":"_6xC5Sm"};
|
|
4770
4785
|
|
|
4771
4786
|
const getChildrenAndRest = (row, rows) => {
|
|
4772
4787
|
const firstNotChildIndex = rows.findIndex((other) => other.depth < row.depth || (row.depth === other.depth && other.isPinned));
|
|
@@ -4782,9 +4797,8 @@ const getChildrenAndRest = (row, rows) => {
|
|
|
4782
4797
|
};
|
|
4783
4798
|
|
|
4784
4799
|
function DataRowsGroup({ row, childRows, renderRow, top = 1, }) {
|
|
4785
|
-
var _a, _b;
|
|
4786
4800
|
const rowRef = React.useRef();
|
|
4787
|
-
const childrenPinnedTop = row.isPinned ? (top + (
|
|
4801
|
+
const childrenPinnedTop = row.isPinned ? (top + (rowRef.current?.clientHeight ?? 0)) : top;
|
|
4788
4802
|
return (React__namespace.default.createElement("div", { className: css$i.group, key: row.rowKey },
|
|
4789
4803
|
React__namespace.default.createElement("div", { className: row.isPinned ? css$i.stickyHeader : css$i.header,
|
|
4790
4804
|
// Gaps between pinned parents should be removed by -1 from top height.
|
|
@@ -4815,10 +4829,9 @@ function DataRowsGroups({ rows, renderRow, top = 1, }) {
|
|
|
4815
4829
|
}
|
|
4816
4830
|
|
|
4817
4831
|
function DataRowsContainer({ estimatedHeight, listContainerRef, offsetY, rows, renderRow, headerRef, }) {
|
|
4818
|
-
var _a;
|
|
4819
4832
|
return (React__namespace.default.createElement("div", { className: css$i.listContainer, style: { minHeight: `${estimatedHeight}px` } },
|
|
4820
4833
|
React__namespace.default.createElement("div", { ref: listContainerRef, role: "rowgroup", style: { marginTop: offsetY } },
|
|
4821
|
-
React__namespace.default.createElement(DataRowsGroups, { rows: rows, renderRow: renderRow, top:
|
|
4834
|
+
React__namespace.default.createElement(DataRowsGroups, { rows: rows, renderRow: renderRow, top: headerRef?.current?.clientHeight }))));
|
|
4822
4835
|
}
|
|
4823
4836
|
|
|
4824
4837
|
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 +4845,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
|
|
|
4832
4845
|
xmlns: "http://www.w3.org/2000/svg",
|
|
4833
4846
|
ref: ref
|
|
4834
4847
|
}, props), /*#__PURE__*/React__namespace.createElement("g", {
|
|
4835
|
-
clipPath: "url(#
|
|
4848
|
+
clipPath: "url(#z7v0sbayvku4mc68_a)"
|
|
4836
4849
|
}, _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
4837
4850
|
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
4851
|
fill: "#F5F6FA"
|
|
@@ -4853,7 +4866,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
|
|
|
4853
4866
|
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
4867
|
fill: "#1D1E26"
|
|
4855
4868
|
})), /*#__PURE__*/React__namespace.createElement("mask", {
|
|
4856
|
-
id: "
|
|
4869
|
+
id: "z7v0sbjimnryz7b6_b",
|
|
4857
4870
|
style: {
|
|
4858
4871
|
maskType: "alpha"
|
|
4859
4872
|
},
|
|
@@ -4866,7 +4879,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
|
|
|
4866
4879
|
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
4880
|
fill: "#9BDEFF"
|
|
4868
4881
|
}))), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
|
|
4869
|
-
mask: "url(#
|
|
4882
|
+
mask: "url(#z7v0sbjimnryz7b6_b)",
|
|
4870
4883
|
fillRule: "evenodd",
|
|
4871
4884
|
clipRule: "evenodd"
|
|
4872
4885
|
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -4952,7 +4965,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
|
|
|
4952
4965
|
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
4966
|
fill: "#fff"
|
|
4954
4967
|
}))), _defs || (_defs = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
|
|
4955
|
-
id: "
|
|
4968
|
+
id: "z7v0sbayvku4mc68_a"
|
|
4956
4969
|
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
4957
4970
|
fill: "#fff",
|
|
4958
4971
|
transform: "translate(.552)",
|
|
@@ -4961,46 +4974,44 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
|
|
|
4961
4974
|
};
|
|
4962
4975
|
var ForwardRef$4 = /*#__PURE__*/React.forwardRef(SvgEmptyTable);
|
|
4963
4976
|
|
|
4964
|
-
var css$h = {"root":"
|
|
4977
|
+
var css$h = {"root":"Ap3iJD","sticky-header":"zj38ZK","stickyHeader":"zj38ZK","no-results":"Ka4hFf","noResults":"Ka4hFf","icon":"QQuNKx","title":"_43mbnv"};
|
|
4965
4978
|
|
|
4966
4979
|
function DataTable(props) {
|
|
4967
|
-
var _a, _b, _c, _d;
|
|
4968
4980
|
const { uuiModals } = uuiCore.useUuiContext();
|
|
4969
4981
|
const headerRef = React__namespace.useRef();
|
|
4970
4982
|
const columnsWithFilters = useColumnsWithFilters(props.columns, props.filters);
|
|
4971
|
-
const { columns, config, defaultConfig } = uuiCore.useColumnsConfig(columnsWithFilters,
|
|
4983
|
+
const { columns, config, defaultConfig } = uuiCore.useColumnsConfig(columnsWithFilters, props.value?.columnsConfig);
|
|
4972
4984
|
const defaultRenderRow = React__namespace.useCallback((rowProps) => {
|
|
4973
|
-
return (React__namespace.createElement(DataTableRow,
|
|
4985
|
+
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
4986
|
}, []);
|
|
4975
|
-
const renderRow = (row) =>
|
|
4976
|
-
const rows =
|
|
4987
|
+
const renderRow = (row) => (props.renderRow ?? defaultRenderRow)({ ...row, columns });
|
|
4988
|
+
const rows = props.getRows?.() ?? props.rows ?? [];
|
|
4977
4989
|
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,
|
|
4990
|
+
return (React__namespace.createElement("div", { className: css$h.noResults }, props.renderNoResultsBlock ? (props.renderNoResultsBlock?.()) : (React__namespace.createElement(React__namespace.Fragment, null,
|
|
4980
4991
|
React__namespace.createElement(uuiComponents.IconContainer, { cx: css$h.icon, icon: ForwardRef$4 }),
|
|
4981
4992
|
React__namespace.createElement(Text, { cx: css$h.title, fontSize: "24", lineHeight: "30", color: "primary", fontWeight: "600" }, i18n.tables.noResultsBlock.title),
|
|
4982
4993
|
React__namespace.createElement(Text, { fontSize: "16", lineHeight: "24", color: "primary" }, i18n.tables.noResultsBlock.message)))));
|
|
4983
4994
|
}, [props.renderNoResultsBlock]);
|
|
4984
4995
|
const onConfigurationButtonClick = React__namespace.useCallback(() => {
|
|
4985
|
-
const configProps = { columns: props.columns, columnsConfig:
|
|
4996
|
+
const configProps = { columns: props.columns, columnsConfig: { ...config }, defaultConfig };
|
|
4986
4997
|
uuiModals
|
|
4987
4998
|
.show((modalProps) => {
|
|
4988
4999
|
return (props.renderColumnsConfigurationModal
|
|
4989
|
-
? props.renderColumnsConfigurationModal(
|
|
4990
|
-
: (React__namespace.createElement(ColumnsConfigurationModal,
|
|
5000
|
+
? props.renderColumnsConfigurationModal({ ...configProps, ...modalProps })
|
|
5001
|
+
: (React__namespace.createElement(ColumnsConfigurationModal, { ...modalProps, columns: props.columns, columnsConfig: config, defaultConfig: defaultConfig })));
|
|
4991
5002
|
})
|
|
4992
|
-
.then((columnsConfig) => props.onValueChange(
|
|
5003
|
+
.then((columnsConfig) => props.onValueChange({ ...props.value, columnsConfig }))
|
|
4993
5004
|
.catch(() => null);
|
|
4994
5005
|
}, [
|
|
4995
5006
|
props.columns, config, defaultConfig, props.value, props.onValueChange, props.renderColumnsConfigurationModal,
|
|
4996
5007
|
]);
|
|
4997
5008
|
const renderRowsContainer = React__namespace.useCallback(({ listContainerRef, estimatedHeight, offsetY, scrollShadows }) => (React__namespace.createElement(React__namespace.Fragment, null,
|
|
4998
5009
|
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:
|
|
5010
|
+
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
5011
|
React__namespace.createElement("div", { className: uuiCore.cx(uuiCore.uuiScrollShadows.top, {
|
|
5001
5012
|
[uuiCore.uuiScrollShadows.topVisible]: scrollShadows.verticalTop,
|
|
5002
5013
|
}) })),
|
|
5003
|
-
props.exactRowsCount !== 0 ? (React__namespace.createElement(DataRowsContainer, { headerRef: headerRef, listContainerRef: listContainerRef, estimatedHeight: estimatedHeight, offsetY: offsetY, scrollShadows: scrollShadows, renderRow: renderRow, rows: rows })) : (renderNoResultsBlock
|
|
5014
|
+
props.exactRowsCount !== 0 ? (React__namespace.createElement(DataRowsContainer, { headerRef: headerRef, listContainerRef: listContainerRef, estimatedHeight: estimatedHeight, offsetY: offsetY, scrollShadows: scrollShadows, renderRow: renderRow, rows: rows })) : (renderNoResultsBlock?.()))), [
|
|
5004
5015
|
props, columns, rows, renderNoResultsBlock, onConfigurationButtonClick,
|
|
5005
5016
|
]);
|
|
5006
5017
|
return (React__namespace.createElement(uuiComponents.DataTableSelectionProvider, { onCopy: props.onCopy, rows: rows, columns: columns },
|
|
@@ -5012,9 +5023,9 @@ function DataTable(props) {
|
|
|
5012
5023
|
} }))));
|
|
5013
5024
|
}
|
|
5014
5025
|
|
|
5015
|
-
var css$g = {"root":"
|
|
5026
|
+
var css$g = {"root":"qNrCBP"};
|
|
5016
5027
|
|
|
5017
|
-
var css$f = {"root":"
|
|
5028
|
+
var css$f = {"root":"GmA-NF","burger-content":"wiKZVH","burgerContent":"wiKZVH"};
|
|
5018
5029
|
|
|
5019
5030
|
var _path$3;
|
|
5020
5031
|
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 +5068,7 @@ var SvgNavigationArrowDownOutline = function SvgNavigationArrowDownOutline(props
|
|
|
5057
5068
|
};
|
|
5058
5069
|
var ForwardRef$2 = /*#__PURE__*/React.forwardRef(SvgNavigationArrowDownOutline);
|
|
5059
5070
|
|
|
5060
|
-
var css$e = {"uui-typography":"
|
|
5071
|
+
var css$e = {"uui-typography":"G-gjIz","uuiTypography":"G-gjIz","hero-header":"KS3v4S","heroHeader":"KS3v4S","promo-header":"Bt7aAK","promoHeader":"Bt7aAK","uui-critical":"mdJ0At","uuiCritical":"mdJ0At","uui-info":"zWYLkM","uuiInfo":"zWYLkM","uui-success":"a5Az7k","uuiSuccess":"a5Az7k","uui-warning":"BnFRGB","uuiWarning":"BnFRGB","uui-highlight":"MlJQ5K","uuiHighlight":"MlJQ5K","uui-typography-size-12":"_6FTwDt","uuiTypographySize12":"_6FTwDt","uui-typography-size-14":"_0pAh99","uuiTypographySize14":"_0pAh99","uui-typography-size-16":"vq2bZE","uuiTypographySize16":"vq2bZE","root":"GrG3pu","button-primary":"_9pck7d","buttonPrimary":"_9pck7d","button-secondary":"a-Jlwn","buttonSecondary":"a-Jlwn","hasIcon":"OwESOc","dropdown":"uMCdLT"};
|
|
5061
5072
|
|
|
5062
5073
|
const BurgerButton = /* @__PURE__ */uuiCore.withMods(uuiComponents.Button, (props) => [
|
|
5063
5074
|
css$e.root,
|
|
@@ -5068,13 +5079,13 @@ const BurgerButton = /* @__PURE__ */uuiCore.withMods(uuiComponents.Button, (prop
|
|
|
5068
5079
|
props.icon && css$e.hasIcon,
|
|
5069
5080
|
], () => ({ dropdownIcon: ForwardRef$2, dropdownIconPosition: 'left', role: 'menuitem' }));
|
|
5070
5081
|
|
|
5071
|
-
var css$d = {"search-input":"
|
|
5082
|
+
var css$d = {"search-input":"rPOjPn","searchInput":"rPOjPn"};
|
|
5072
5083
|
|
|
5073
5084
|
function BurgerSearch(props) {
|
|
5074
5085
|
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
5086
|
}
|
|
5076
5087
|
|
|
5077
|
-
var css$c = {"root":"
|
|
5088
|
+
var css$c = {"root":"UF6aL1","group-header":"L9Cdn-","groupHeader":"L9Cdn-","group-name":"x-m6d8","groupName":"x-m6d8","line":"-xJC6j"};
|
|
5078
5089
|
|
|
5079
5090
|
function BurgerGroupHeader(props) {
|
|
5080
5091
|
return (React__namespace.createElement("div", { className: cx__default.default(css$c.root, css$c.groupHeader, 'uui-burger-group-header') },
|
|
@@ -5082,15 +5093,21 @@ function BurgerGroupHeader(props) {
|
|
|
5082
5093
|
React__namespace.createElement("span", { className: css$c.groupName }, props.caption)));
|
|
5083
5094
|
}
|
|
5084
5095
|
|
|
5085
|
-
var css$b = {"uui-typography":"
|
|
5096
|
+
var css$b = {"uui-typography":"_55QC3h","uuiTypography":"_55QC3h","hero-header":"KqCV6n","heroHeader":"KqCV6n","promo-header":"EOhurv","promoHeader":"EOhurv","uui-critical":"TrReJX","uuiCritical":"TrReJX","uui-info":"jNiZiI","uuiInfo":"jNiZiI","uui-success":"-l-4Zu","uuiSuccess":"-l-4Zu","uui-warning":"ISwuT0","uuiWarning":"ISwuT0","uui-highlight":"UXyA50","uuiHighlight":"UXyA50","uui-typography-size-12":"Vvupc0","uuiTypographySize12":"Vvupc0","uui-typography-size-14":"DnlfTU","uuiTypographySize14":"DnlfTU","uui-typography-size-16":"LMB-Dw","uuiTypographySize16":"LMB-Dw","root":"Q8fVtx","type-primary":"ECI7yt","typePrimary":"ECI7yt","type-secondary":"xjghv8","typeSecondary":"xjghv8"};
|
|
5086
5097
|
|
|
5087
5098
|
const MainMenuButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
5088
|
-
const { type
|
|
5089
|
-
return (React__namespace.createElement(uuiComponents.Clickable,
|
|
5099
|
+
const { type, ...clickableProps } = props;
|
|
5100
|
+
return (React__namespace.createElement(uuiComponents.Clickable, { ...clickableProps, rawProps: {
|
|
5101
|
+
'aria-expanded': props.isOpen,
|
|
5102
|
+
'aria-current': props.isLinkActive
|
|
5103
|
+
? 'page'
|
|
5104
|
+
: undefined,
|
|
5105
|
+
...props.rawProps,
|
|
5106
|
+
}, cx: [
|
|
5090
5107
|
css$b.root,
|
|
5091
5108
|
css$b['type-' + (type || 'primary')],
|
|
5092
5109
|
props.cx,
|
|
5093
|
-
], ref: ref }
|
|
5110
|
+
], ref: ref },
|
|
5094
5111
|
props.icon && props.iconPosition !== 'right' && (React__namespace.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: props.onIconClick })),
|
|
5095
5112
|
props.caption && (React__namespace.createElement("div", { className: uuiCore.uuiElement.caption }, props.caption)),
|
|
5096
5113
|
props.count !== undefined && props.count !== null && (React__namespace.createElement(CountIndicator, { caption: props.count, color: "neutral", size: "18" })),
|
|
@@ -5098,11 +5115,11 @@ const MainMenuButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) =
|
|
|
5098
5115
|
props.isDropdown && (React__namespace.createElement(uuiComponents.IconContainer, { icon: ForwardRef$Q, flipY: props.isOpen }))));
|
|
5099
5116
|
});
|
|
5100
5117
|
|
|
5101
|
-
var css$a = {"dropdown-body":"
|
|
5118
|
+
var css$a = {"dropdown-body":"QT6i-w","dropdownBody":"QT6i-w"};
|
|
5102
5119
|
|
|
5103
5120
|
class MainMenuDropdown extends React__namespace.Component {
|
|
5104
5121
|
render() {
|
|
5105
|
-
return (React__namespace.createElement(uuiComponents.Dropdown, { renderTarget: (props) => (React__namespace.createElement(MainMenuButton,
|
|
5122
|
+
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
5123
|
const handleEscape = (e) => {
|
|
5107
5124
|
if (e.key === 'Escape' && props.isOpen) {
|
|
5108
5125
|
props.onClose();
|
|
@@ -5110,16 +5127,19 @@ class MainMenuDropdown extends React__namespace.Component {
|
|
|
5110
5127
|
};
|
|
5111
5128
|
return (React__namespace.createElement(FocusLock__default.default, { returnFocus: true, persistentFocus: true, lockProps: { onKeyDown: handleEscape } },
|
|
5112
5129
|
React__namespace.createElement("div", { className: cx__default.default(css$a.dropdownBody, 'uui-main_menu-dropdown') }, this.props.renderBody
|
|
5113
|
-
? this.props.renderBody(
|
|
5130
|
+
? this.props.renderBody({ ...props })
|
|
5114
5131
|
: React__namespace.Children.map(this.props.children, (item) => {
|
|
5115
5132
|
if (!item)
|
|
5116
5133
|
return item;
|
|
5117
|
-
return React__namespace.createElement(item.type,
|
|
5134
|
+
return React__namespace.createElement(item.type, {
|
|
5135
|
+
...item.props,
|
|
5136
|
+
onClick: item.props.onClick
|
|
5118
5137
|
? () => {
|
|
5119
5138
|
item.props.onClick();
|
|
5120
5139
|
props.onClose();
|
|
5121
5140
|
}
|
|
5122
|
-
: null
|
|
5141
|
+
: null,
|
|
5142
|
+
});
|
|
5123
5143
|
}))));
|
|
5124
5144
|
}, placement: "bottom-start" }));
|
|
5125
5145
|
}
|
|
@@ -5153,69 +5173,66 @@ var SvgNavigationGlobalMenuOutlineOutline = function SvgNavigationGlobalMenuOutl
|
|
|
5153
5173
|
};
|
|
5154
5174
|
var ForwardRef$1 = /*#__PURE__*/React.forwardRef(SvgNavigationGlobalMenuOutlineOutline);
|
|
5155
5175
|
|
|
5156
|
-
var css$9 = {"global-menu-btn":"
|
|
5176
|
+
var css$9 = {"global-menu-btn":"UJFXPf","globalMenuBtn":"UJFXPf","global-menu-icon":"_0l1W2g","globalMenuIcon":"_0l1W2g"};
|
|
5157
5177
|
|
|
5158
|
-
const GlobalMenu = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("button",
|
|
5178
|
+
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
5179
|
React__namespace.createElement(uuiComponents.IconContainer, { size: 36, icon: ForwardRef$1, cx: css$9.globalMenuIcon }))));
|
|
5160
5180
|
|
|
5161
|
-
var css$8 = {"container":"
|
|
5181
|
+
var css$8 = {"container":"rx3dLP","open":"UksY06","folding-arrow":"Hmcc8U","foldingArrow":"Hmcc8U"};
|
|
5162
5182
|
|
|
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 },
|
|
5183
|
+
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
5184
|
React__namespace.createElement(uuiComponents.Avatar, { size: "36", img: props.avatarUrl }),
|
|
5165
5185
|
props.icon && React__namespace.createElement(uuiComponents.IconContainer, { icon: props.icon }),
|
|
5166
5186
|
props.isDropdown && (React__namespace.createElement("div", null,
|
|
5167
5187
|
React__namespace.createElement(uuiComponents.IconContainer, { size: 18, icon: ForwardRef$Q, flipY: props.isOpen, cx: css$8.foldingArrow }))))));
|
|
5168
5188
|
|
|
5169
|
-
var css$7 = {"search-input":"
|
|
5189
|
+
var css$7 = {"search-input":"-T8B-P","searchInput":"-T8B-P"};
|
|
5170
5190
|
|
|
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
|
-
} }))));
|
|
5191
|
+
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
5192
|
|
|
5176
|
-
var css$6 = {"container":"
|
|
5193
|
+
var css$6 = {"container":"pN452V"};
|
|
5177
5194
|
|
|
5178
|
-
const MainMenuIcon = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement(IconButton,
|
|
5195
|
+
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
5196
|
|
|
5180
|
-
var css$5 = {"root":"
|
|
5197
|
+
var css$5 = {"root":"MdxzMF"};
|
|
5181
5198
|
|
|
5182
5199
|
const Anchor = /* @__PURE__ */uuiCore.withMods(uuiComponents.Anchor, () => [css$5.root]);
|
|
5183
5200
|
|
|
5184
5201
|
function Form(props) {
|
|
5185
5202
|
const context = uuiCore.useUuiContext();
|
|
5186
5203
|
const beforeLeave = React__namespace.useCallback(() => {
|
|
5187
|
-
return context.uuiModals.show((modalProps) => React__namespace.createElement(ConfirmationModal,
|
|
5204
|
+
return context.uuiModals.show((modalProps) => React__namespace.createElement(ConfirmationModal, { caption: i18n.form.modals.beforeLeaveMessage, ...modalProps }));
|
|
5188
5205
|
}, [context.uuiModals]);
|
|
5189
5206
|
const loadUnsavedChanges = () => {
|
|
5190
5207
|
return context.uuiNotifications
|
|
5191
|
-
.show((props) => (React__namespace.createElement(WarningNotification,
|
|
5208
|
+
.show((props) => (React__namespace.createElement(WarningNotification, { ...props, actions: [
|
|
5192
5209
|
{
|
|
5193
5210
|
name: i18n.form.notifications.actionButtonCaption,
|
|
5194
5211
|
action: props.onSuccess,
|
|
5195
5212
|
},
|
|
5196
|
-
] }
|
|
5213
|
+
] },
|
|
5197
5214
|
React__namespace.createElement(RichTextView, null,
|
|
5198
5215
|
React__namespace.createElement(Text, { size: "36" }, i18n.form.notifications.unsavedChangesMessage)))), { duration: 5, position: 'bot-left' });
|
|
5199
5216
|
};
|
|
5200
|
-
return React__namespace.createElement(uuiCore.Form,
|
|
5217
|
+
return React__namespace.createElement(uuiCore.Form, { loadUnsavedChanges: loadUnsavedChanges, beforeLeave: beforeLeave, ...props });
|
|
5201
5218
|
}
|
|
5202
5219
|
|
|
5203
5220
|
function useForm(props) {
|
|
5204
5221
|
const context = uuiCore.useUuiContext();
|
|
5205
5222
|
const beforeLeave = React.useCallback(() => {
|
|
5206
|
-
return context.uuiModals.show((modalProps) => React__namespace.default.createElement(ConfirmationModal,
|
|
5223
|
+
return context.uuiModals.show((modalProps) => React__namespace.default.createElement(ConfirmationModal, { caption: i18n.form.modals.beforeLeaveMessage, ...modalProps }));
|
|
5207
5224
|
}, [context.uuiModals]);
|
|
5208
5225
|
const loadUnsavedChanges = () => {
|
|
5209
|
-
return context.uuiNotifications.show((props) => (React__namespace.default.createElement(WarningNotification,
|
|
5226
|
+
return context.uuiNotifications.show((props) => (React__namespace.default.createElement(WarningNotification, { ...props, actions: [
|
|
5210
5227
|
{
|
|
5211
5228
|
name: i18n.form.notifications.actionButtonCaption,
|
|
5212
5229
|
action: props.onSuccess,
|
|
5213
5230
|
},
|
|
5214
|
-
] }
|
|
5231
|
+
] },
|
|
5215
5232
|
React__namespace.default.createElement(RichTextView, null,
|
|
5216
5233
|
React__namespace.default.createElement(Text, { size: "36" }, i18n.form.notifications.unsavedChangesMessage)))), { duration: 5, position: 'bot-left' });
|
|
5217
5234
|
};
|
|
5218
|
-
return uuiCore.useForm(
|
|
5235
|
+
return uuiCore.useForm({ beforeLeave, loadUnsavedChanges, ...props });
|
|
5219
5236
|
}
|
|
5220
5237
|
|
|
5221
5238
|
var _path;
|
|
@@ -5235,33 +5252,33 @@ var SvgFileCloudUploadFill = function SvgFileCloudUploadFill(props, ref) {
|
|
|
5235
5252
|
};
|
|
5236
5253
|
var ForwardRef = /*#__PURE__*/React.forwardRef(SvgFileCloudUploadFill);
|
|
5237
5254
|
|
|
5238
|
-
var css$4 = {"root":"
|
|
5255
|
+
var css$4 = {"root":"leQoU9","drop-start":"i5rnty","dropStart":"i5rnty","drop-over":"xgmHnJ","dropOver":"xgmHnJ","link":"nBe4uS","drop-area":"e2ww3-","dropArea":"e2ww3-","drop-caption":"P4TAxl","dropCaption":"P4TAxl","icon-blue":"UhBcga","iconBlue":"UhBcga"};
|
|
5239
5256
|
|
|
5240
5257
|
function DropSpot(props) {
|
|
5241
5258
|
const getInfoText = typeof props.infoText === 'string'
|
|
5242
|
-
? (React__namespace.createElement(Text, { lineHeight: "24", size: "24", fontSize: "14", color: "tertiary" }, props.infoText)) : props
|
|
5259
|
+
? (React__namespace.createElement(Text, { lineHeight: "24", size: "24", fontSize: "14", color: "tertiary" }, props.infoText)) : props?.infoText;
|
|
5243
5260
|
const renderAttachmentArea = (params) => {
|
|
5244
|
-
return (React__namespace.createElement("div",
|
|
5245
|
-
React__namespace.createElement("div",
|
|
5261
|
+
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 },
|
|
5262
|
+
React__namespace.createElement("div", { ...params.eventHandlers, className: css$4.dropArea },
|
|
5246
5263
|
React__namespace.createElement(FlexRow, { size: "24" },
|
|
5247
5264
|
React__namespace.createElement(uuiComponents.IconContainer, { icon: ForwardRef, cx: css$4.iconBlue }),
|
|
5248
5265
|
React__namespace.createElement(Text, { lineHeight: "24", size: "24", fontSize: "14", cx: css$4.dropCaption }, i18n.fileUpload.labelStart),
|
|
5249
5266
|
React__namespace.createElement(uuiComponents.UploadFileToggler, { onFilesAdded: props.onUploadFiles, render: (props) => (React__namespace.createElement(RichTextView, null,
|
|
5250
|
-
React__namespace.createElement(LinkButton,
|
|
5267
|
+
React__namespace.createElement(LinkButton, { caption: i18n.fileUpload.browse, ...props, cx: css$4.link }))), accept: props.accept, single: props.single })),
|
|
5251
5268
|
getInfoText)));
|
|
5252
5269
|
};
|
|
5253
5270
|
return React__namespace.createElement(uuiComponents.DropSpot, { render: renderAttachmentArea, onFilesDropped: props.onUploadFiles });
|
|
5254
5271
|
}
|
|
5255
5272
|
|
|
5256
|
-
var css$3 = {"uui-typography":"
|
|
5273
|
+
var css$3 = {"uui-typography":"_2bw14-","uuiTypography":"_2bw14-","hero-header":"s0Qm5n","heroHeader":"s0Qm5n","promo-header":"l0njlQ","promoHeader":"l0njlQ","uui-critical":"i-9Umo","uuiCritical":"i-9Umo","uui-info":"hSUZZU","uuiInfo":"hSUZZU","uui-success":"j8dncP","uuiSuccess":"j8dncP","uui-warning":"p7YTPV","uuiWarning":"p7YTPV","uui-highlight":"gjTmkw","uuiHighlight":"gjTmkw","uui-typography-size-12":"qYxWlz","uuiTypographySize12":"qYxWlz","uui-typography-size-14":"SO-hGt","uuiTypographySize14":"SO-hGt","uui-typography-size-16":"mG33ir","uuiTypographySize16":"mG33ir","root":"ZvBlWq","file-name":"yqbE9j","fileName":"yqbE9j","default-color":"CyU4xD","defaultColor":"CyU4xD","doc-color":"fyg24B","docColor":"fyg24B","xls-color":"rJD9oz","xlsColor":"rJD9oz","pdf-color":"hYMeq2","pdfColor":"hYMeq2","movie-color":"eLz3Lf","movieColor":"eLz3Lf","img-color":"e2m2-r","imgColor":"e2m2-r","mov-color":"keKyJB","movColor":"keKyJB","error-block":"_5YZJ8S","errorBlock":"_5YZJ8S","icons-block":"_0RsVZ6","iconsBlock":"_0RsVZ6"};
|
|
5257
5274
|
|
|
5258
|
-
var css$2 = {"root":"
|
|
5275
|
+
var css$2 = {"root":"GD4eHq"};
|
|
5259
5276
|
|
|
5260
5277
|
const SvgCircleProgress = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
5261
5278
|
const outsetRadius = props.size / 2 - 1;
|
|
5262
5279
|
const insetRadius = props.size / 2 - 3;
|
|
5263
5280
|
const circumference = insetRadius * Math.PI;
|
|
5264
|
-
return (React__namespace.createElement("svg",
|
|
5281
|
+
return (React__namespace.createElement("svg", { className: css$2.root, width: props.size, height: props.size, ref: ref, ...props.rawProps },
|
|
5265
5282
|
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
5283
|
React__namespace.createElement("circle", { strokeWidth: 1, fill: "transparent", r: outsetRadius, cx: props.size / 2, cy: props.size / 2 })));
|
|
5267
5284
|
});
|
|
@@ -5306,8 +5323,8 @@ const FileCard = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
|
5306
5323
|
}
|
|
5307
5324
|
};
|
|
5308
5325
|
const { cx: componentCx, width, file: { progress, size, name, extension, error, abortXHR, }, onClick, } = props;
|
|
5309
|
-
const fileExtension = extension ||
|
|
5310
|
-
const fileName = name
|
|
5326
|
+
const fileExtension = extension || name?.split('.').pop();
|
|
5327
|
+
const fileName = name?.split('.').slice(0, -1).join('');
|
|
5311
5328
|
const isLoading = progress < 100;
|
|
5312
5329
|
const isCrossShow = ((!isLoadingShow && isLoading) || !isLoading) && onClick;
|
|
5313
5330
|
const mouseLeaveHandler = (e) => {
|
|
@@ -5330,12 +5347,12 @@ const FileCard = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
|
5330
5347
|
progress && progress < 100 && abortXHR();
|
|
5331
5348
|
onClick();
|
|
5332
5349
|
};
|
|
5333
|
-
return (React__namespace.createElement(FlexCell, { ref: ref, cx: uuiCore.cx(css$3.root, 'uui-file_card', (isLoading ||
|
|
5350
|
+
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 },
|
|
5334
5351
|
React__namespace.createElement(FlexRow, { size: "36", alignItems: "top", columnGap: "6" },
|
|
5335
5352
|
fileExtension && getIcon(fileExtension),
|
|
5336
5353
|
React__namespace.createElement(FlexCell, { width: "100%" },
|
|
5337
|
-
React__namespace.createElement(Text, { size: "18", fontSize: "14", lineHeight: "18", color: (progress < 100 ||
|
|
5338
|
-
|
|
5354
|
+
React__namespace.createElement(Text, { size: "18", fontSize: "14", lineHeight: "18", color: (progress < 100 || error?.isError) ? 'tertiary' : 'primary', cx: css$3.fileName }, fileName),
|
|
5355
|
+
error?.isError ? renderErrorContent() : renderSuccessfulContent()),
|
|
5339
5356
|
React__namespace.createElement("div", { className: uuiCore.cx(css$3.iconsBlock), onMouseEnter: mouseEnterHandler, onMouseLeave: mouseLeaveHandler },
|
|
5340
5357
|
isLoadingShow && isLoading && React__namespace.createElement(SvgCircleProgress, { progress: progress, size: 18 }),
|
|
5341
5358
|
isCrossShow && React__namespace.createElement(IconButton, { icon: ForwardRef$R, onClick: removeHandler })))));
|
|
@@ -5383,7 +5400,7 @@ const getErrorPageConfig = () => ({
|
|
|
5383
5400
|
},
|
|
5384
5401
|
});
|
|
5385
5402
|
|
|
5386
|
-
var css$1 = {"container":"
|
|
5403
|
+
var css$1 = {"container":"MM-FFC"};
|
|
5387
5404
|
|
|
5388
5405
|
const ErrorPage = (props) => {
|
|
5389
5406
|
const isMobileScreen = uuiCore.isMobile();
|
|
@@ -5392,10 +5409,10 @@ const ErrorPage = (props) => {
|
|
|
5392
5409
|
React__namespace.default.createElement("img", { className: "uui-error-image", src: isMobileScreen && props.mobileImageUrl ? props.mobileImageUrl : props.imageUrl, alt: "ERROR OCCURRED!" }),
|
|
5393
5410
|
React__namespace.default.createElement("div", { className: "uui-error-title" }, props.title),
|
|
5394
5411
|
React__namespace.default.createElement("div", { className: "uui-error-subtitle" }, props.subtitle),
|
|
5395
|
-
|
|
5412
|
+
props?.supportLink && React__namespace.default.createElement("div", { className: "uui-error-support-link" }, props?.supportLink))));
|
|
5396
5413
|
};
|
|
5397
5414
|
|
|
5398
|
-
var css = {"recovery-spinner":"
|
|
5415
|
+
var css = {"recovery-spinner":"YDnh-t","recoverySpinner":"YDnh-t","recovery-message":"z0nPRc","recoveryMessage":"z0nPRc","modal-blocker":"Rh2h7F","modalBlocker":"Rh2h7F","modalFadeIn":"Pj1DLO"};
|
|
5399
5416
|
|
|
5400
5417
|
function ErrorHandler(props) {
|
|
5401
5418
|
const { uuiNotifications, uuiModals, uuiApi } = uuiCore.useUuiContext();
|
|
@@ -5410,7 +5427,7 @@ function ErrorHandler(props) {
|
|
|
5410
5427
|
props.onNotificationError(c);
|
|
5411
5428
|
}
|
|
5412
5429
|
else {
|
|
5413
|
-
uuiNotifications.show((notificationProps) => (React__namespace.default.createElement(ErrorNotification,
|
|
5430
|
+
uuiNotifications.show((notificationProps) => (React__namespace.default.createElement(ErrorNotification, { ...notificationProps },
|
|
5414
5431
|
React__namespace.default.createElement(Text, { size: "36" }, c.responseData && c.responseData.errorMessage))));
|
|
5415
5432
|
}
|
|
5416
5433
|
c.dismissError();
|
|
@@ -5432,7 +5449,7 @@ function ErrorHandler(props) {
|
|
|
5432
5449
|
".")))))));
|
|
5433
5450
|
};
|
|
5434
5451
|
const renderErrorPage = (errorInform) => {
|
|
5435
|
-
return React__namespace.default.createElement(ErrorPage,
|
|
5452
|
+
return React__namespace.default.createElement(ErrorPage, { cx: props.cx, ...errorInform });
|
|
5436
5453
|
};
|
|
5437
5454
|
if (errorType === 'error') {
|
|
5438
5455
|
uuiModals.closeAll();
|