@epam/uui 5.12.1 → 5.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/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 +555 -542
- package/index.esm.js.map +1 -1
- package/index.js +555 -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":"Sa-cTz","uuiTypography":"Sa-cTz","hero-header":"IRXXFf","heroHeader":"IRXXFf","promo-header":"SHCxw5","promoHeader":"SHCxw5","uui-critical":"OKgOoU","uuiCritical":"OKgOoU","uui-info":"OlzmxQ","uuiInfo":"OlzmxQ","uui-success":"xX-Hy-","uuiSuccess":"xX-Hy-","uui-warning":"YwDsDF","uuiWarning":"YwDsDF","uui-highlight":"j2RIro","uuiHighlight":"j2RIro","uui-typography-size-12":"UH-yOr","uuiTypographySize12":"UH-yOr","uui-typography-size-14":"bzlRD2","uuiTypographySize14":"bzlRD2","uui-typography-size-16":"lSIhFc","uuiTypographySize16":"lSIhFc","root":"HvMIHG"};
|
|
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":"AfKa9Z"};
|
|
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":"aG1yb4","uuiTypography":"aG1yb4","hero-header":"KZL7GZ","heroHeader":"KZL7GZ","promo-header":"AKFgJQ","promoHeader":"AKFgJQ","uui-critical":"Mpe6nw","uuiCritical":"Mpe6nw","uui-info":"_9X6SvV","uuiInfo":"_9X6SvV","uui-success":"hr7Ih8","uuiSuccess":"hr7Ih8","uui-warning":"xsvl9J","uuiWarning":"xsvl9J","uui-highlight":"_0utKAL","uuiHighlight":"_0utKAL","uui-typography-size-12":"mQXsLk","uuiTypographySize12":"mQXsLk","uui-typography-size-14":"mEYuVk","uuiTypographySize14":"mEYuVk","uui-typography-size-16":"vZsskA","uuiTypographySize16":"vZsskA","root":"_8LiVxE"};
|
|
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":"BHjFtp"};
|
|
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":"XgybYi","uuiTypography":"XgybYi","hero-header":"_--IdMl","heroHeader":"_--IdMl","promo-header":"zG-y2b","promoHeader":"zG-y2b","uui-critical":"HcFuw0","uuiCritical":"HcFuw0","uui-info":"z-5IS0","uuiInfo":"z-5IS0","uui-success":"gDjbEZ","uuiSuccess":"gDjbEZ","uui-warning":"_17p90c","uuiWarning":"_17p90c","uui-highlight":"CO-FJz","uuiHighlight":"CO-FJz","uui-typography-size-12":"TU0Qwg","uuiTypographySize12":"TU0Qwg","uui-typography-size-14":"C2oF-G","uuiTypographySize14":"C2oF-G","uui-typography-size-16":"maPK5D","uuiTypographySize16":"maPK5D","root":"jrYvx3","withNotify":"thcBak"};
|
|
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":"TwB5Mq","uuiTypography":"TwB5Mq","hero-header":"_-2C2rC","heroHeader":"_-2C2rC","promo-header":"r7JvNr","promoHeader":"r7JvNr","uui-critical":"HXS6Z3","uuiCritical":"HXS6Z3","uui-info":"cAsZDW","uuiInfo":"cAsZDW","uui-success":"xbCOkl","uuiSuccess":"xbCOkl","uui-warning":"SXT6JU","uuiWarning":"SXT6JU","uui-highlight":"_8SW1SU","uuiHighlight":"_8SW1SU","uui-typography-size-12":"K8Tj1g","uuiTypographySize12":"K8Tj1g","uui-typography-size-14":"ZaYLiI","uuiTypographySize14":"ZaYLiI","uui-typography-size-16":"eDWrT-","uuiTypographySize16":"eDWrT-","root":"TOEmn0"};
|
|
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":"qtMIOQ","uuiTypography":"qtMIOQ","hero-header":"dh8gE-","heroHeader":"dh8gE-","promo-header":"ULap8l","promoHeader":"ULap8l","uui-critical":"g4cEVM","uuiCritical":"g4cEVM","uui-info":"FZYaWn","uuiInfo":"FZYaWn","uui-success":"di-rDD","uuiSuccess":"di-rDD","uui-warning":"_1GUoTy","uuiWarning":"_1GUoTy","uui-highlight":"h8aXTP","uuiHighlight":"h8aXTP","uui-typography-size-12":"_9b0Xyb","uuiTypographySize12":"_9b0Xyb","uui-typography-size-14":"rT6uMb","uuiTypographySize14":"rT6uMb","uui-typography-size-16":"fViKtD","uuiTypographySize16":"fViKtD","root":"KUQaqG","mode-cell":"_--g61Q","modeCell":"_--g61Q"};
|
|
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":"_4TUpIr","uuiTypography":"_4TUpIr","hero-header":"gNpeVM","heroHeader":"gNpeVM","promo-header":"xe4NUR","promoHeader":"xe4NUR","uui-critical":"U6OefO","uuiCritical":"U6OefO","uui-info":"OQ7872","uuiInfo":"OQ7872","uui-success":"PQC9eD","uuiSuccess":"PQC9eD","uui-warning":"iED3zD","uuiWarning":"iED3zD","uui-highlight":"OgFxlm","uuiHighlight":"OgFxlm","uui-typography-size-12":"G0Gn4T","uuiTypographySize12":"G0Gn4T","uui-typography-size-14":"Xu9fEg","uuiTypographySize14":"Xu9fEg","uui-typography-size-16":"bjjW9O","uuiTypographySize16":"bjjW9O","root":"wAKIi5"};
|
|
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":"gH5Fqf"};
|
|
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":"zNZfXK","uuiTypography":"zNZfXK","hero-header":"dPMqL5","heroHeader":"dPMqL5","promo-header":"_-9rNHB","promoHeader":"_-9rNHB","uui-critical":"JSoiXR","uuiCritical":"JSoiXR","uui-info":"cjSNAr","uuiInfo":"cjSNAr","uui-success":"NpUtVh","uuiSuccess":"NpUtVh","uui-warning":"_7-8DUw","uuiWarning":"_7-8DUw","uui-highlight":"F-IVZ-","uuiHighlight":"F-IVZ-","uui-typography-size-12":"HHI3Fu","uuiTypographySize12":"HHI3Fu","uui-typography-size-14":"cxwqnl","uuiTypographySize14":"cxwqnl","uui-typography-size-16":"qFJqPp","uuiTypographySize16":"qFJqPp","root":"e6tX96","mode-form":"_15B2D0","modeForm":"_15B2D0","mode-inline":"nLXx2z","modeInline":"nLXx2z","mode-cell":"e4lC7n","modeCell":"e4lC7n"};
|
|
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":"pPad8U"};
|
|
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":"rMsYN8","uuiTypography":"rMsYN8","hero-header":"n04gOH","heroHeader":"n04gOH","promo-header":"WjExl1","promoHeader":"WjExl1","uui-critical":"_0ST-84","uuiCritical":"_0ST-84","uui-info":"_5UH-0x","uuiInfo":"_5UH-0x","uui-success":"oX-1tn","uuiSuccess":"oX-1tn","uui-warning":"uFjU02","uuiWarning":"uFjU02","uui-highlight":"NY6R1o","uuiHighlight":"NY6R1o","uui-typography-size-12":"ehAD-H","uuiTypographySize12":"ehAD-H","uui-typography-size-14":"emkF1s","uuiTypographySize14":"emkF1s","uui-typography-size-16":"H1xgt2","uuiTypographySize16":"H1xgt2","root":"_1CJBF9","mode-form":"iqOC6T","modeForm":"iqOC6T","mode-cell":"pXUx5n","modeCell":"pXUx5n"};
|
|
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":"_2cvTZo","uuiTypography":"_2cvTZo","hero-header":"lo8H-2","heroHeader":"lo8H-2","promo-header":"zbXpIF","promoHeader":"zbXpIF","uui-critical":"AeuuDQ","uuiCritical":"AeuuDQ","uui-info":"lPC3Mo","uuiInfo":"lPC3Mo","uui-success":"YA8xCI","uuiSuccess":"YA8xCI","uui-warning":"GAiOOz","uuiWarning":"GAiOOz","uui-highlight":"HlYYle","uuiHighlight":"HlYYle","uui-typography-size-12":"zWY1Xv","uuiTypographySize12":"zWY1Xv","uui-typography-size-14":"vInp5q","uuiTypographySize14":"vInp5q","uui-typography-size-16":"KeWRMd","uuiTypographySize16":"KeWRMd","root":"IPX66g","mode-form":"I4xYnV","modeForm":"I4xYnV","mode-cell":"Ji-49Z","modeCell":"Ji-49Z","mode-inline":"-dhg43","modeInline":"-dhg43"};
|
|
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":"jRaa8D","uuiTypography":"jRaa8D","hero-header":"_5zMClf","heroHeader":"_5zMClf","promo-header":"le1VyV","promoHeader":"le1VyV","uui-critical":"PtuEcv","uuiCritical":"PtuEcv","uui-info":"Wytrw3","uuiInfo":"Wytrw3","uui-success":"qz-JX9","uuiSuccess":"qz-JX9","uui-warning":"mp7hbs","uuiWarning":"mp7hbs","uui-highlight":"LpSm4-","uuiHighlight":"LpSm4-","uui-typography-size-12":"biN2HJ","uuiTypographySize12":"biN2HJ","uui-typography-size-14":"oBY-aw","uuiTypographySize14":"oBY-aw","uui-typography-size-16":"MzYqIi","uuiTypographySize16":"MzYqIi","root":"JkJJ3o","main-path":"Y9AcuA","mainPath":"Y9AcuA","content-wrapper":"_4S7Zwf","contentWrapper":"_4S7Zwf","content":"kC3V8O","action-wrapper":"JJsCnc","actionWrapper":"JJsCnc","icon-wrapper":"PYgP4U","iconWrapper":"PYgP4U","icon":"A71rtF","close-icon":"iXawI-","closeIcon":"iXawI-"};
|
|
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":"HWrqOp"};
|
|
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":"JxGk3r","uuiTypography":"JxGk3r","hero-header":"U6BWbg","heroHeader":"U6BWbg","promo-header":"TK2Rij","promoHeader":"TK2Rij","uui-critical":"P-1cNw","uuiCritical":"P-1cNw","uui-info":"i9sspi","uuiInfo":"i9sspi","uui-success":"a-xZje","uuiSuccess":"a-xZje","uui-warning":"_0brAkU","uuiWarning":"_0brAkU","uui-highlight":"BEpawL","uuiHighlight":"BEpawL","uui-typography-size-12":"kvpapd","uuiTypographySize12":"kvpapd","uui-typography-size-14":"_6tdfOc","uuiTypographySize14":"_6tdfOc","uui-typography-size-16":"F2vjmf","uuiTypographySize16":"F2vjmf","submenu-root-item-rtl":"PbLbKR","submenuRootItemRtl":"PbLbKR","icon-after":"Jc744p","iconAfter":"Jc744p","submenu-root-item":"nRHg76","submenuRootItem":"nRHg76","icon-check":"Hhxuku","iconCheck":"Hhxuku","splitter-root":"_5d7Zs5","splitterRoot":"_5d7Zs5","splitter":"h7w0bB","header-root":"qJutrj","headerRoot":"qJutrj","item-root":"_32NRSO","itemRoot":"_32NRSO","icon":"S-4M7l","link":"OdHTMp","indent":"nZtg3u","selected-mark":"m7urWr","selectedMark":"m7urWr"};
|
|
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);
|
|
@@ -1172,11 +1141,8 @@ function DropdownSubMenu(props) {
|
|
|
1172
1141
|
},
|
|
1173
1142
|
},
|
|
1174
1143
|
];
|
|
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
|
-
} }));
|
|
1144
|
+
const isRtl = window?.document.dir === 'rtl';
|
|
1145
|
+
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
1146
|
}
|
|
1181
1147
|
function DropdownMenuSwitchButton(props) {
|
|
1182
1148
|
const context = React.useContext(uuiCore.UuiContext);
|
|
@@ -1199,7 +1165,7 @@ function DropdownMenuSwitchButton(props) {
|
|
|
1199
1165
|
React__namespace.default.createElement(Switch, { value: isSelected, tabIndex: -1, onValueChange: onHandleValueChange })));
|
|
1200
1166
|
}
|
|
1201
1167
|
|
|
1202
|
-
var css$1j = {"uui-typography":"
|
|
1168
|
+
var css$1j = {"uui-typography":"CgKQYP","uuiTypography":"CgKQYP","hero-header":"_6vMJ6d","heroHeader":"_6vMJ6d","promo-header":"h1uEZP","promoHeader":"h1uEZP","uui-critical":"k-2Z6-","uuiCritical":"k-2Z6-","uui-info":"fhs9Z6","uuiInfo":"fhs9Z6","uui-success":"_6L8ufS","uuiSuccess":"_6L8ufS","uui-warning":"VSqlSE","uuiWarning":"VSqlSE","uui-highlight":"no1Rap","uuiHighlight":"no1Rap","uui-typography-size-12":"xUUQtO","uuiTypographySize12":"xUUQtO","uui-typography-size-14":"kygc6x","uuiTypographySize14":"kygc6x","uui-typography-size-16":"-HoNFq","uuiTypographySize16":"-HoNFq","root":"bU4gN9","mode-block":"yUUbQ5","modeBlock":"yUUbQ5","mode-inline":"fF4eBM","modeInline":"fF4eBM","padding-0":"Z6RG-t","padding0":"Z6RG-t","padding-6":"EaUPkb","padding6":"EaUPkb","padding-12":"wdBKKF","padding12":"wdBKKF","padding-18":"BhqqS9","padding18":"BhqqS9"};
|
|
1203
1169
|
|
|
1204
1170
|
function applyAccordionMods(mods) {
|
|
1205
1171
|
return [
|
|
@@ -1212,7 +1178,7 @@ const Accordion = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Accor
|
|
|
1212
1178
|
dropdownIcon: mods.dropdownIcon !== null && systemIcons.foldingArrow,
|
|
1213
1179
|
}));
|
|
1214
1180
|
|
|
1215
|
-
var css$1i = {"uui-typography":"
|
|
1181
|
+
var css$1i = {"uui-typography":"DhYBOW","uuiTypography":"DhYBOW","hero-header":"CiLuHB","heroHeader":"CiLuHB","promo-header":"qPtC9d","promoHeader":"qPtC9d","uui-critical":"r-aEUE","uuiCritical":"r-aEUE","uui-info":"FhZybS","uuiInfo":"FhZybS","uui-success":"Pq0aFN","uuiSuccess":"Pq0aFN","uui-warning":"_3j8-MJ","uuiWarning":"_3j8-MJ","uui-highlight":"TgJMmO","uuiHighlight":"TgJMmO","uui-typography-size-12":"-oK0HQ","uuiTypographySize12":"-oK0HQ","uui-typography-size-14":"vu-vgh","uuiTypographySize14":"vu-vgh","uui-typography-size-16":"_2H3leL","uuiTypographySize16":"_2H3leL","root":"Ao6Hj2","border-top":"_4AGh9j","borderTop":"_4AGh9j","border-bottom":"OR4zYF","borderBottom":"OR4zYF","top-shadow":"_59iuFU","topShadow":"_59iuFU","padding-6":"Dqy3gZ","padding6":"Dqy3gZ","padding-12":"-o0roY","padding12":"-o0roY","padding-18":"ktZsB1","padding18":"ktZsB1","padding-24":"f24kOU","padding24":"f24kOU","margin-24":"MSo0N4","margin24":"MSo0N4","margin-12":"HMlNWZ","margin12":"HMlNWZ","vPadding-12":"BDo3-H","vPadding12":"BDo3-H","vPadding-18":"c8nadH","vPadding18":"c8nadH","vPadding-24":"iGmDpH","vPadding24":"iGmDpH","vPadding-36":"JYko2M","vPadding36":"JYko2M","vPadding-48":"-z8W0G","vPadding48":"-z8W0G","spacing-6":"e99vvh","spacing6":"e99vvh","spacing-12":"bdbFDQ","spacing12":"bdbFDQ","spacing-18":"_9upTDQ","spacing18":"_9upTDQ","uui-surface-main":"wHDxmT","uuiSurfaceMain":"wHDxmT"};
|
|
1216
1182
|
|
|
1217
1183
|
const FlexCell = /* @__PURE__ */uuiCore.withMods(uuiComponents.FlexCell, () => [css$1i.flexCell]);
|
|
1218
1184
|
|
|
@@ -1236,7 +1202,7 @@ const FlexRow = /* @__PURE__ */uuiCore.withMods(uuiComponents.FlexRow, (props) =
|
|
|
1236
1202
|
];
|
|
1237
1203
|
});
|
|
1238
1204
|
|
|
1239
|
-
var css$1h = {"root":"
|
|
1205
|
+
var css$1h = {"root":"PNkdRB","margin-24":"eVud-x","margin24":"eVud-x","padding-12":"smITTc","padding12":"smITTc","padding-24":"BW0Ipq","padding24":"BW0Ipq","shadow":"xO3500","uui-surface-main":"uNofCb","uuiSurfaceMain":"uNofCb"};
|
|
1240
1206
|
|
|
1241
1207
|
const Panel = /* @__PURE__ */uuiCore.withMods(uuiComponents.VPanel, (props) => [
|
|
1242
1208
|
'uui-panel',
|
|
@@ -1246,7 +1212,7 @@ const Panel = /* @__PURE__ */uuiCore.withMods(uuiComponents.VPanel, (props) => [
|
|
|
1246
1212
|
props.background && css$1h[`uui-${props.background}`],
|
|
1247
1213
|
]);
|
|
1248
1214
|
|
|
1249
|
-
var css$1g = {"root":"
|
|
1215
|
+
var css$1g = {"root":"uWyvVx"};
|
|
1250
1216
|
|
|
1251
1217
|
function applyTooltipMods(mods) {
|
|
1252
1218
|
return [
|
|
@@ -1256,7 +1222,7 @@ function applyTooltipMods(mods) {
|
|
|
1256
1222
|
}
|
|
1257
1223
|
const Tooltip = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Tooltip, applyTooltipMods);
|
|
1258
1224
|
|
|
1259
|
-
var css$1f = {"uui-typography":"
|
|
1225
|
+
var css$1f = {"uui-typography":"T-igTl","uuiTypography":"T-igTl","hero-header":"sTcdmc","heroHeader":"sTcdmc","promo-header":"xk5tiS","promoHeader":"xk5tiS","uui-critical":"TWVDQ7","uuiCritical":"TWVDQ7","uui-info":"OQu6-W","uuiInfo":"OQu6-W","uui-success":"e98NNM","uuiSuccess":"e98NNM","uui-warning":"_9ljWtP","uuiWarning":"_9ljWtP","uui-highlight":"YxvD7c","uuiHighlight":"YxvD7c","uui-typography-size-12":"N7L-GS","uuiTypographySize12":"N7L-GS","uui-typography-size-14":"_3BhAIi","uuiTypographySize14":"_3BhAIi","uui-typography-size-16":"WZ-c7L","uuiTypographySize16":"WZ-c7L","root":"B3JRMb"};
|
|
1260
1226
|
|
|
1261
1227
|
function applyLabeledInputMods(mods) {
|
|
1262
1228
|
return [
|
|
@@ -1270,7 +1236,7 @@ const LabeledInput = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.La
|
|
|
1270
1236
|
infoIcon: props.infoIcon || (settings.sizes.labeledInput.fillIcon.includes(props.size) ? ForwardRef$x : ForwardRef$M),
|
|
1271
1237
|
}));
|
|
1272
1238
|
|
|
1273
|
-
var css$1e = {"root":"
|
|
1239
|
+
var css$1e = {"root":"YwQMzV"};
|
|
1274
1240
|
|
|
1275
1241
|
function RadioGroup(props) {
|
|
1276
1242
|
const direction = props.direction || 'vertical';
|
|
@@ -1279,13 +1245,13 @@ function RadioGroup(props) {
|
|
|
1279
1245
|
props.onValueChange(newVal);
|
|
1280
1246
|
}
|
|
1281
1247
|
};
|
|
1282
|
-
return (React__namespace.createElement("fieldset",
|
|
1283
|
-
const
|
|
1284
|
-
return (React__namespace.createElement(RadioInput,
|
|
1248
|
+
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) => {
|
|
1249
|
+
const { id, name, renderName, ...restItemProps } = i;
|
|
1250
|
+
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
1251
|
})));
|
|
1286
1252
|
}
|
|
1287
1253
|
|
|
1288
|
-
var css$1d = {"root":"
|
|
1254
|
+
var css$1d = {"root":"aGPEmM"};
|
|
1289
1255
|
|
|
1290
1256
|
function applyScrollBarsMods() {
|
|
1291
1257
|
return [
|
|
@@ -1294,13 +1260,13 @@ function applyScrollBarsMods() {
|
|
|
1294
1260
|
}
|
|
1295
1261
|
const ScrollBars = /* @__PURE__ */uuiCore.withMods(uuiComponents.ScrollBars, applyScrollBarsMods);
|
|
1296
1262
|
|
|
1297
|
-
var css$1c = {"scroll-container":"
|
|
1263
|
+
var css$1c = {"scroll-container":"vM3l-E","scrollContainer":"vM3l-E","list-container":"MjKIEF","listContainer":"MjKIEF"};
|
|
1298
1264
|
|
|
1299
|
-
var css$1b = {"root":"
|
|
1265
|
+
var css$1b = {"root":"-jHAxV"};
|
|
1300
1266
|
|
|
1301
1267
|
const AvatarStack = /* @__PURE__ */uuiCore.withMods(uuiComponents.AvatarStack, () => [css$1b.root]);
|
|
1302
1268
|
|
|
1303
|
-
var css$1a = {"uui-typography":"
|
|
1269
|
+
var css$1a = {"uui-typography":"wINWrT","uuiTypography":"wINWrT","hero-header":"LQQJsW","heroHeader":"LQQJsW","promo-header":"_2x23Ru","promoHeader":"_2x23Ru","uui-critical":"Typxix","uuiCritical":"Typxix","uui-info":"lWSRGr","uuiInfo":"lWSRGr","uui-success":"UCxqpD","uuiSuccess":"UCxqpD","uui-warning":"xY3Anp","uuiWarning":"xY3Anp","uui-highlight":"QiK4fR","uuiHighlight":"QiK4fR","uui-typography-size-12":"nLqPm6","uuiTypographySize12":"nLqPm6","uui-typography-size-14":"yqNKvM","uuiTypographySize14":"yqNKvM","uui-typography-size-16":"mN51M9","uuiTypographySize16":"mN51M9","root":"_3uD5XL"};
|
|
1304
1270
|
|
|
1305
1271
|
const DEFAULT_FILL = 'solid';
|
|
1306
1272
|
function applyBadgeMods(mods) {
|
|
@@ -1315,7 +1281,11 @@ function applyBadgeMods(mods) {
|
|
|
1315
1281
|
const Badge = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
|
|
1316
1282
|
const styles = [applyBadgeMods(props), props.cx];
|
|
1317
1283
|
const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : systemIcons.foldingArrow;
|
|
1318
|
-
return (React__namespace.default.createElement(uuiComponents.Clickable,
|
|
1284
|
+
return (React__namespace.default.createElement(uuiComponents.Clickable, { ...props, rawProps: {
|
|
1285
|
+
'aria-haspopup': props.isDropdown,
|
|
1286
|
+
'aria-expanded': props.isOpen,
|
|
1287
|
+
...props.rawProps,
|
|
1288
|
+
}, cx: styles, ref: ref },
|
|
1319
1289
|
(props.indicator && props.fill === 'outline') && (React__namespace.default.createElement("div", { className: "uui-indicator" })),
|
|
1320
1290
|
props.icon && props.iconPosition !== 'right' && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
|
|
1321
1291
|
props.caption && (React__namespace.default.createElement("div", { className: uuiCore.uuiElement.caption }, props.caption)),
|
|
@@ -1324,7 +1294,7 @@ const Badge = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) =>
|
|
|
1324
1294
|
props.isDropdown && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
|
|
1325
1295
|
});
|
|
1326
1296
|
|
|
1327
|
-
var css$19 = {"uui-typography":"
|
|
1297
|
+
var css$19 = {"uui-typography":"X4EVHt","uuiTypography":"X4EVHt","hero-header":"SZ-km2","heroHeader":"SZ-km2","promo-header":"Lod3FT","promoHeader":"Lod3FT","uui-critical":"TNUu3k","uuiCritical":"TNUu3k","uui-info":"DQUvgw","uuiInfo":"DQUvgw","uui-success":"RgQnnm","uuiSuccess":"RgQnnm","uui-warning":"jgpeRj","uuiWarning":"jgpeRj","uui-highlight":"GAndMe","uuiHighlight":"GAndMe","uui-typography-size-12":"Y0GVqS","uuiTypographySize12":"Y0GVqS","uui-typography-size-14":"d8ZFfU","uuiTypographySize14":"d8ZFfU","uui-typography-size-16":"lKeobP","uuiTypographySize16":"lKeobP","root":"hva0fm"};
|
|
1328
1298
|
|
|
1329
1299
|
function applyTagMods(props) {
|
|
1330
1300
|
return [
|
|
@@ -1339,7 +1309,11 @@ const Tag = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
|
|
|
1339
1309
|
const styles = [applyTagMods(props), props.cx];
|
|
1340
1310
|
const ClearIcon = props.clearIcon ? props.clearIcon : systemIcons.clear;
|
|
1341
1311
|
const DropdownIcon = props.dropdownIcon ? props.dropdownIcon : systemIcons.foldingArrow;
|
|
1342
|
-
return (React__namespace.default.createElement(uuiComponents.Clickable,
|
|
1312
|
+
return (React__namespace.default.createElement(uuiComponents.Clickable, { ...props, rawProps: {
|
|
1313
|
+
'aria-haspopup': props.isDropdown,
|
|
1314
|
+
'aria-expanded': props.isOpen,
|
|
1315
|
+
...props.rawProps,
|
|
1316
|
+
}, cx: styles, ref: ref },
|
|
1343
1317
|
props.icon && props.iconPosition !== 'right' && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: !props.isDisabled ? props.onIconClick : undefined })),
|
|
1344
1318
|
props.caption && (React__namespace.default.createElement("div", { className: uuiCore.uuiElement.caption }, props.caption)),
|
|
1345
1319
|
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 +1322,7 @@ const Tag = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
|
|
|
1348
1322
|
props.onClear && !props.isDisabled && (React__namespace.default.createElement(uuiComponents.IconContainer, { cx: uuiCore.uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
|
|
1349
1323
|
});
|
|
1350
1324
|
|
|
1351
|
-
var css$18 = {"root":"
|
|
1325
|
+
var css$18 = {"root":"_5-5FbO","uui-spinner":"UAl0TH","uuiSpinner":"UAl0TH"};
|
|
1352
1326
|
|
|
1353
1327
|
function applySpinnerMods() {
|
|
1354
1328
|
return [css$18.root, 'uui-spinner'];
|
|
@@ -1385,31 +1359,31 @@ var SvgNavigationChevronRightOutline = function SvgNavigationChevronRightOutline
|
|
|
1385
1359
|
};
|
|
1386
1360
|
var ForwardRef$v = /*#__PURE__*/React.forwardRef(SvgNavigationChevronRightOutline);
|
|
1387
1361
|
|
|
1388
|
-
var css$17 = {"root":"
|
|
1362
|
+
var css$17 = {"root":"eue7eI","page":"Lnfra2","spacer":"lUP1NV","mode-ghost":"_-3TcNM","modeGhost":"_-3TcNM"};
|
|
1389
1363
|
|
|
1390
1364
|
function Paginator(props) {
|
|
1391
|
-
const renderPaginator = (params) => (React__namespace.default.createElement("nav",
|
|
1365
|
+
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
1366
|
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
1367
|
params.pages.map((page, index) => {
|
|
1394
1368
|
if (page.type === 'spacer') {
|
|
1395
1369
|
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
1370
|
}
|
|
1397
1371
|
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: () =>
|
|
1372
|
+
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
1373
|
}
|
|
1400
1374
|
}),
|
|
1401
1375
|
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,
|
|
1376
|
+
return React__namespace.default.createElement(uuiComponents.Paginator, { ...props, render: renderPaginator });
|
|
1403
1377
|
}
|
|
1404
1378
|
|
|
1405
|
-
var css$16 = {"root":"
|
|
1379
|
+
var css$16 = {"root":"Ui04BQ","progress-bar":"t-pysN","progressBar":"t-pysN","progressBar-indeterminate":"_3UEyv9","progressBarIndeterminate":"_3UEyv9","size-12":"txgUvq","size12":"txgUvq","size-18":"y3ekno","size18":"y3ekno","size-24":"_3WWnkl","size24":"_3WWnkl"};
|
|
1406
1380
|
|
|
1407
1381
|
const IndeterminateBar = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
1408
1382
|
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
1383
|
React__namespace.createElement("div", { className: cx__default.default(css$16.progressBar) })));
|
|
1410
1384
|
});
|
|
1411
1385
|
|
|
1412
|
-
var css$15 = {"root":"
|
|
1386
|
+
var css$15 = {"root":"JKSAUm","striped":"_8Q78We","animate-stripes":"jMmjSz","animateStripes":"jMmjSz","size-12":"PWpZwo","size12":"PWpZwo","size-18":"_7C6N-Q","size18":"_7C6N-Q","size-24":"EIRvt2","size24":"EIRvt2"};
|
|
1413
1387
|
|
|
1414
1388
|
const DEFAULT_SIZE = '12';
|
|
1415
1389
|
function applyProgressBarMods(mods) {
|
|
@@ -1424,14 +1398,14 @@ const ProgressBar = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Pro
|
|
|
1424
1398
|
hideLabel: props.hideLabel || props.striped,
|
|
1425
1399
|
}));
|
|
1426
1400
|
|
|
1427
|
-
var css$14 = {"root":"
|
|
1401
|
+
var css$14 = {"root":"_1fYWrr"};
|
|
1428
1402
|
|
|
1429
1403
|
const IndicatorBar = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
1430
1404
|
const { progress } = props;
|
|
1431
1405
|
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
1406
|
});
|
|
1433
1407
|
|
|
1434
|
-
var css$13 = {"root":"
|
|
1408
|
+
var css$13 = {"root":"_1PMRxZ"};
|
|
1435
1409
|
|
|
1436
1410
|
const StatusIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
|
|
1437
1411
|
return (React__namespace.default.createElement("div", { ref: ref, className: cx__default.default([
|
|
@@ -1446,10 +1420,9 @@ const StatusIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
|
|
|
1446
1420
|
React__namespace.default.createElement("p", { className: "uui-status_indicator-caption" }, props.caption)));
|
|
1447
1421
|
});
|
|
1448
1422
|
|
|
1449
|
-
var css$12 = {"drag-handle":"
|
|
1423
|
+
var css$12 = {"drag-handle":"bVdnQg","dragHandle":"bVdnQg","icon-container":"lGy9jY","iconContainer":"lGy9jY"};
|
|
1450
1424
|
|
|
1451
1425
|
function DataRowAddons(props) {
|
|
1452
|
-
var _a, _b;
|
|
1453
1426
|
const row = props.rowProps;
|
|
1454
1427
|
const getIndent = () => {
|
|
1455
1428
|
return (row.indent - 1) * (settings.sizes.rowAddons.indentUnit[props.size] || settings.sizes.rowAddons.defaults.indentUnit);
|
|
@@ -1458,8 +1431,8 @@ function DataRowAddons(props) {
|
|
|
1458
1431
|
return settings.sizes.rowAddons.indentWidth[props.size] || settings.sizes.rowAddons.defaults.indentWidth;
|
|
1459
1432
|
};
|
|
1460
1433
|
return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
|
|
1461
|
-
|
|
1462
|
-
|
|
1434
|
+
row.dnd?.srcData && React__namespace.default.createElement(uuiComponents.DragHandle, { key: "dh", cx: css$12.dragHandle, rawProps: { ...props.eventHandlers } }),
|
|
1435
|
+
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
1436
|
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
1437
|
'aria-label': row.isFolded ? 'Unfold' : 'Fold',
|
|
1465
1438
|
role: 'button',
|
|
@@ -1468,7 +1441,7 @@ function DataRowAddons(props) {
|
|
|
1468
1441
|
], rotate: row.isFolded ? '90ccw' : '0', onClick: () => row.onFold(row), size: settings.sizes.rowAddons.icon[props.size] || settings.sizes.rowAddons.defaults.icon }))))));
|
|
1469
1442
|
}
|
|
1470
1443
|
|
|
1471
|
-
var css$11 = {"root":"
|
|
1444
|
+
var css$11 = {"root":"kni8YE"};
|
|
1472
1445
|
|
|
1473
1446
|
const Blocker = /* @__PURE__ */uuiCore.withMods(uuiComponents.Blocker, () => [css$11.root], (cmpProps) => ({ renderSpinner: cmpProps.renderSpinner || (() => React__namespace.default.createElement(Spinner, null)) }));
|
|
1474
1447
|
|
|
@@ -1482,17 +1455,13 @@ const VirtualList = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
|
1482
1455
|
});
|
|
1483
1456
|
React__namespace.useImperativeHandle(ref, () => scrollContainerRef.current, [scrollContainerRef.current]);
|
|
1484
1457
|
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
|
-
};
|
|
1458
|
+
const renderRows = () => props.renderRows?.({
|
|
1459
|
+
listContainerRef, estimatedHeight, offsetY, scrollShadows,
|
|
1460
|
+
}) || (React__namespace.createElement("div", { className: css$1c.listContainer, style: { minHeight: `${estimatedHeight}px` } },
|
|
1461
|
+
React__namespace.createElement("div", { ref: listContainerRef, role: props.role, style: { marginTop: offsetY } }, props.rows)));
|
|
1492
1462
|
const renderView = ({ style }) => (React__namespace.createElement(VirtualListView, { isLoading: props.isLoading, style: style, rawProps: props.rawProps }));
|
|
1493
1463
|
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))
|
|
1464
|
+
if (!scrollbars?.container?.firstChild)
|
|
1496
1465
|
return;
|
|
1497
1466
|
scrollContainerRef.current = scrollbars.container.firstChild;
|
|
1498
1467
|
}, []);
|
|
@@ -1505,11 +1474,20 @@ const VirtualList = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
|
1505
1474
|
});
|
|
1506
1475
|
const VirtualListView = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
1507
1476
|
return (React__namespace.createElement(React__namespace.Fragment, null,
|
|
1508
|
-
React__namespace.createElement("div",
|
|
1477
|
+
React__namespace.createElement("div", { ...props.rawProps, style: {
|
|
1478
|
+
...props.style,
|
|
1479
|
+
position: 'relative',
|
|
1480
|
+
flex: '1 1 auto',
|
|
1481
|
+
display: 'flex',
|
|
1482
|
+
flexDirection: 'column',
|
|
1483
|
+
overflow: props.isLoading ? 'hidden' : 'scroll',
|
|
1484
|
+
marginRight: props.isLoading ? 0 : props.style.marginRight,
|
|
1485
|
+
marginBottom: props.isLoading ? 0 : props.style.marginBottom,
|
|
1486
|
+
}, ref: ref }, props.children),
|
|
1509
1487
|
React__namespace.createElement(Blocker, { isEnabled: props.isLoading })));
|
|
1510
1488
|
});
|
|
1511
1489
|
|
|
1512
|
-
var css$10 = {"root":"
|
|
1490
|
+
var css$10 = {"root":"UL-aip"};
|
|
1513
1491
|
|
|
1514
1492
|
function CheckboxGroup(props) {
|
|
1515
1493
|
const currentValue = props.value || [];
|
|
@@ -1525,13 +1503,13 @@ function CheckboxGroup(props) {
|
|
|
1525
1503
|
}
|
|
1526
1504
|
props.onValueChange(newSelection);
|
|
1527
1505
|
};
|
|
1528
|
-
return (React__namespace.createElement("fieldset",
|
|
1529
|
-
const
|
|
1530
|
-
return (React__namespace.createElement(Checkbox,
|
|
1506
|
+
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) => {
|
|
1507
|
+
const { id, name, renderName, ...restItemProps } = i;
|
|
1508
|
+
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
1509
|
})));
|
|
1532
1510
|
}
|
|
1533
1511
|
|
|
1534
|
-
var css$$ = {"uui-typography":"
|
|
1512
|
+
var css$$ = {"uui-typography":"gInCGU","uuiTypography":"gInCGU","hero-header":"kpNzyJ","heroHeader":"kpNzyJ","promo-header":"pZiUIW","promoHeader":"pZiUIW","uui-critical":"_2Pf70a","uuiCritical":"_2Pf70a","uui-info":"anDNCg","uuiInfo":"anDNCg","uui-success":"y5vVHH","uuiSuccess":"y5vVHH","uui-warning":"t5K1lD","uuiWarning":"t5K1lD","uui-highlight":"Y9fjFK","uuiHighlight":"Y9fjFK","uui-typography-size-12":"qkK9KS","uuiTypographySize12":"qkK9KS","uui-typography-size-14":"wBCON0","uuiTypographySize14":"wBCON0","uui-typography-size-16":"_2AQwAM","uuiTypographySize16":"_2AQwAM","root":"sRlfwN","modal-blocker":"cQITcY","modalBlocker":"cQITcY","animateModalBlocker":"BzsLWR","modal":"a1vP52","modal-footer":"LOY06E","modalFooter":"LOY06E","modal-header":"_3FbyNZ","modalHeader":"_3FbyNZ"};
|
|
1535
1513
|
|
|
1536
1514
|
const ModalBlocker = /* @__PURE__ */uuiCore.withMods(uuiComponents.ModalBlocker, () => [css$$.modalBlocker]);
|
|
1537
1515
|
const ModalWindow = /* @__PURE__ */uuiCore.withMods(uuiComponents.ModalWindow, () => [css$$.root, css$$.modal], (props) => {
|
|
@@ -1539,9 +1517,12 @@ const ModalWindow = /* @__PURE__ */uuiCore.withMods(uuiComponents.ModalWindow, (
|
|
|
1539
1517
|
const height = props.height || 'auto';
|
|
1540
1518
|
const maxHeight = uuiCore.isMobile() ? '100dvh' : (props.maxHeight || '80dvh');
|
|
1541
1519
|
return {
|
|
1542
|
-
style:
|
|
1520
|
+
style: {
|
|
1521
|
+
...props.style,
|
|
1522
|
+
width,
|
|
1543
1523
|
height,
|
|
1544
|
-
maxHeight
|
|
1524
|
+
maxHeight,
|
|
1525
|
+
},
|
|
1545
1526
|
};
|
|
1546
1527
|
});
|
|
1547
1528
|
class ModalHeader extends React__namespace.default.Component {
|
|
@@ -1564,27 +1545,33 @@ class ModalFooter extends React__namespace.default.Component {
|
|
|
1564
1545
|
}
|
|
1565
1546
|
}
|
|
1566
1547
|
|
|
1567
|
-
const TREE_SHAKEABLE_INIT = () => (
|
|
1548
|
+
const TREE_SHAKEABLE_INIT = () => ({
|
|
1549
|
+
...uuiCore.i18n,
|
|
1550
|
+
dataPickerBody: {
|
|
1568
1551
|
searchPlaceholder: 'Search',
|
|
1569
1552
|
noRecordsMessage: 'No records found',
|
|
1570
1553
|
noRecordsSubTitle: 'Check your spelling, or search for a different keyword',
|
|
1571
1554
|
typeSearchToLoadMessage: 'Type search to load items',
|
|
1572
|
-
},
|
|
1555
|
+
},
|
|
1556
|
+
pickerModal: {
|
|
1573
1557
|
headerTitle: 'Please select',
|
|
1574
1558
|
searchPlaceholder: 'Type text for quick search',
|
|
1575
1559
|
cancelButton: 'Cancel',
|
|
1576
1560
|
selectButton: 'Select',
|
|
1577
1561
|
clearAllButton: 'CLEAR ALL',
|
|
1578
1562
|
selectAllButton: 'SELECT ALL',
|
|
1579
|
-
},
|
|
1563
|
+
},
|
|
1564
|
+
pickerInput: {
|
|
1580
1565
|
showOnlySelectedLabel: 'Show only selected',
|
|
1581
1566
|
clearSelectionButton: 'CLEAR ALL',
|
|
1582
1567
|
clearSelectionButtonSingle: 'CLEAR',
|
|
1583
1568
|
selectAllButton: 'SELECT ALL',
|
|
1584
1569
|
doneButton: 'DONE',
|
|
1585
|
-
},
|
|
1570
|
+
},
|
|
1571
|
+
notificationCard: {
|
|
1586
1572
|
closeAllNotificationsButton: 'CLOSE ALL NOTIFICATIONS',
|
|
1587
|
-
},
|
|
1573
|
+
},
|
|
1574
|
+
form: {
|
|
1588
1575
|
notifications: {
|
|
1589
1576
|
actionButtonCaption: 'Restore',
|
|
1590
1577
|
unsavedChangesMessage: 'You have unsaved changes. Click Restore button if you would like to recover the data',
|
|
@@ -1594,10 +1581,12 @@ const TREE_SHAKEABLE_INIT = () => (Object.assign(Object.assign({}, uuiCore.i18n)
|
|
|
1594
1581
|
discardButton: 'Discard',
|
|
1595
1582
|
saveButton: 'Save',
|
|
1596
1583
|
},
|
|
1597
|
-
},
|
|
1584
|
+
},
|
|
1585
|
+
rangeDatePicker: {
|
|
1598
1586
|
pickerPlaceholderFrom: 'From:',
|
|
1599
1587
|
pickerPlaceholderTo: 'To:',
|
|
1600
|
-
},
|
|
1588
|
+
},
|
|
1589
|
+
tables: {
|
|
1601
1590
|
noResultsBlock: {
|
|
1602
1591
|
title: 'No results found',
|
|
1603
1592
|
message: 'We can’t find any item matching your request',
|
|
@@ -1631,10 +1620,12 @@ const TREE_SHAKEABLE_INIT = () => (Object.assign(Object.assign({}, uuiCore.i18n)
|
|
|
1631
1620
|
collapseAllTooltip: 'Collapse All',
|
|
1632
1621
|
expandAllTooltip: 'Expand All',
|
|
1633
1622
|
},
|
|
1634
|
-
},
|
|
1623
|
+
},
|
|
1624
|
+
pickerFilterHeader: {
|
|
1635
1625
|
sortAscending: 'Sort Ascending',
|
|
1636
1626
|
sortDescending: 'Sort Descending',
|
|
1637
|
-
},
|
|
1627
|
+
},
|
|
1628
|
+
filterToolbar: {
|
|
1638
1629
|
addCaption: 'Add filter',
|
|
1639
1630
|
datePicker: {
|
|
1640
1631
|
placeholder: 'Select date',
|
|
@@ -1649,19 +1640,24 @@ const TREE_SHAKEABLE_INIT = () => (Object.assign(Object.assign({}, uuiCore.i18n)
|
|
|
1649
1640
|
pickerInput: {
|
|
1650
1641
|
itemsPlaceholder: 'items',
|
|
1651
1642
|
},
|
|
1652
|
-
},
|
|
1643
|
+
},
|
|
1644
|
+
presetPanel: {
|
|
1653
1645
|
addCaption: 'Add Preset',
|
|
1654
|
-
},
|
|
1646
|
+
},
|
|
1647
|
+
confirmationModal: {
|
|
1655
1648
|
discardButton: 'Discard',
|
|
1656
1649
|
saveButton: 'Save',
|
|
1657
|
-
},
|
|
1650
|
+
},
|
|
1651
|
+
fileUpload: {
|
|
1658
1652
|
labelStart: 'Drop files to attach or',
|
|
1659
1653
|
browse: 'browse',
|
|
1660
1654
|
labelEnd: 'your local files',
|
|
1661
|
-
},
|
|
1655
|
+
},
|
|
1656
|
+
fileCard: {
|
|
1662
1657
|
fileSizeProgress: ' of ',
|
|
1663
1658
|
failedUploadErrorMessage: 'Upload failed',
|
|
1664
|
-
},
|
|
1659
|
+
},
|
|
1660
|
+
errorHandler: {
|
|
1665
1661
|
errorPageConfig: {
|
|
1666
1662
|
notFound: {
|
|
1667
1663
|
title: 'Oooops! We couldn’t find this page',
|
|
@@ -1703,7 +1699,8 @@ const TREE_SHAKEABLE_INIT = () => (Object.assign(Object.assign({}, uuiCore.i18n)
|
|
|
1703
1699
|
},
|
|
1704
1700
|
},
|
|
1705
1701
|
supportMessage: undefined,
|
|
1706
|
-
}
|
|
1702
|
+
},
|
|
1703
|
+
});
|
|
1707
1704
|
const i18n = /* @__PURE__ */TREE_SHAKEABLE_INIT();
|
|
1708
1705
|
|
|
1709
1706
|
var _path$u;
|
|
@@ -1721,42 +1718,40 @@ var SvgNotificationHelpFill = function SvgNotificationHelpFill(props, ref) {
|
|
|
1721
1718
|
};
|
|
1722
1719
|
var ForwardRef$u = /*#__PURE__*/React.forwardRef(SvgNotificationHelpFill);
|
|
1723
1720
|
|
|
1724
|
-
var css$_ = {"uui-typography":"
|
|
1721
|
+
var css$_ = {"uui-typography":"hIDTgu","uuiTypography":"hIDTgu","hero-header":"_6j0JB-","heroHeader":"_6j0JB-","promo-header":"sXB-Yv","promoHeader":"sXB-Yv","uui-critical":"RgW8h-","uuiCritical":"RgW8h-","uui-info":"t2epvI","uuiInfo":"t2epvI","uui-success":"R-SQSB","uuiSuccess":"R-SQSB","uui-warning":"Ht8j3v","uuiWarning":"Ht8j3v","uui-highlight":"dBOGGa","uuiHighlight":"dBOGGa","uui-typography-size-12":"teIHWv","uuiTypographySize12":"teIHWv","uui-typography-size-14":"wYDCc2","uuiTypographySize14":"wYDCc2","uui-typography-size-16":"i4VmOh","uuiTypographySize16":"i4VmOh","root":"B0PdoA","icon-wrapper":"BNCRdh","iconWrapper":"BNCRdh","action-wrapper":"nmiJvO","actionWrapper":"nmiJvO","action-link":"eY4lkY","actionLink":"eY4lkY","close-icon":"_1z8-Su","closeIcon":"_1z8-Su","main-path":"UuWPyA","mainPath":"UuWPyA","content":"-NGeEP","close-wrapper":"e0-xaV","closeWrapper":"e0-xaV","notification-wrapper":"Q9jdIq","notificationWrapper":"Q9jdIq","clear-button":"iiR11n","clearButton":"iiR11n"};
|
|
1725
1722
|
|
|
1726
1723
|
const NotificationCard = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
|
|
1727
1724
|
const notificationCardNode = React__namespace.default.useRef(null);
|
|
1728
1725
|
React__namespace.default.useImperativeHandle(ref, () => notificationCardNode.current, [notificationCardNode.current]);
|
|
1729
1726
|
React__namespace.default.useLayoutEffect(() => {
|
|
1730
|
-
|
|
1731
|
-
|
|
1732
|
-
(_b = notificationCardNode.current) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', props.refreshTimer);
|
|
1727
|
+
notificationCardNode.current?.addEventListener('mouseenter', props.clearTimer);
|
|
1728
|
+
notificationCardNode.current?.addEventListener('mouseleave', props.refreshTimer);
|
|
1733
1729
|
return () => {
|
|
1734
|
-
|
|
1735
|
-
|
|
1736
|
-
(_b = notificationCardNode.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', props.refreshTimer);
|
|
1730
|
+
notificationCardNode.current?.removeEventListener('mouseenter', props.clearTimer);
|
|
1731
|
+
notificationCardNode.current?.removeEventListener('mouseleave', props.refreshTimer);
|
|
1737
1732
|
};
|
|
1738
1733
|
}, []);
|
|
1739
|
-
return (React__namespace.default.createElement("div",
|
|
1734
|
+
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
1735
|
React__namespace.default.createElement("div", { className: css$_.mainPath },
|
|
1741
1736
|
props.icon && (React__namespace.default.createElement("div", { className: css$_.iconWrapper },
|
|
1742
1737
|
React__namespace.default.createElement(uuiComponents.IconContainer, { size: 24, icon: props.icon }))),
|
|
1743
1738
|
React__namespace.default.createElement("div", { className: css$_.content },
|
|
1744
1739
|
props.children,
|
|
1745
|
-
props.actions && (React__namespace.default.createElement("div", { className: css$_.actionWrapper }, props.actions.map((action) => (React__namespace.default.createElement(LinkButton, {
|
|
1740
|
+
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
1741
|
props.onClose && (React__namespace.default.createElement("div", { className: css$_.closeWrapper },
|
|
1747
1742
|
React__namespace.default.createElement(IconButton, { icon: ForwardRef$R, color: "neutral", onClick: props.onClose, cx: css$_.closeIcon }))))));
|
|
1748
1743
|
});
|
|
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,
|
|
1744
|
+
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 })));
|
|
1745
|
+
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 })));
|
|
1746
|
+
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 })));
|
|
1747
|
+
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
1748
|
function ClearNotification() {
|
|
1754
1749
|
const uuiCtx = uuiCore.useUuiContext();
|
|
1755
1750
|
return (React__namespace.default.createElement("div", { className: cx__default.default(css$_.notificationWrapper, css$_.clearButton) },
|
|
1756
1751
|
React__namespace.default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => uuiCtx.uuiNotifications.clearAll() })));
|
|
1757
1752
|
}
|
|
1758
1753
|
|
|
1759
|
-
var css$Z = {"footer":"
|
|
1754
|
+
var css$Z = {"footer":"SCOYSK"};
|
|
1760
1755
|
|
|
1761
1756
|
class ConfirmationModal extends React__namespace.Component {
|
|
1762
1757
|
render() {
|
|
@@ -1764,7 +1759,7 @@ class ConfirmationModal extends React__namespace.Component {
|
|
|
1764
1759
|
if (this.props.bodyContent) {
|
|
1765
1760
|
bodyContent = React__namespace.createElement(Panel, { background: "surface-main", margin: "24" }, this.props.bodyContent);
|
|
1766
1761
|
}
|
|
1767
|
-
return (React__namespace.createElement(ModalBlocker,
|
|
1762
|
+
return (React__namespace.createElement(ModalBlocker, { ...this.props },
|
|
1768
1763
|
React__namespace.createElement(ModalWindow, { width: 420 },
|
|
1769
1764
|
React__namespace.createElement(ModalHeader, { borderBottom: true, title: this.props.caption, onClose: () => this.props.abort() }),
|
|
1770
1765
|
React__namespace.createElement(ScrollBars, null, bodyContent),
|
|
@@ -1798,7 +1793,7 @@ function useReliableForceUpdate() {
|
|
|
1798
1793
|
return red[1];
|
|
1799
1794
|
}
|
|
1800
1795
|
|
|
1801
|
-
var css$Y = {"root":"
|
|
1796
|
+
var css$Y = {"root":"_91UT88","timepicker-input":"_1cUq68","timepickerInput":"_1cUq68","ltr-always":"eHZE80","ltrAlways":"eHZE80"};
|
|
1802
1797
|
|
|
1803
1798
|
const uuiTimePicker = {
|
|
1804
1799
|
container: 'uui-timepicker-container',
|
|
@@ -1837,7 +1832,7 @@ function TimePickerBody(props) {
|
|
|
1837
1832
|
const minutesToSubtract = value.minute() % minutesStep === 0 ? minutesStep : value.minute() % minutesStep;
|
|
1838
1833
|
onMinutesChange(value.subtract(minutesToSubtract, 'm').minute());
|
|
1839
1834
|
};
|
|
1840
|
-
return (React__namespace.createElement("div",
|
|
1835
|
+
return (React__namespace.createElement("div", { className: uuiCore.cx(css$Y.root, uuiTimePicker.container, props.cx), ref: props.forwardedRef, ...props.rawProps },
|
|
1841
1836
|
React__namespace.createElement("div", { className: css$Y.ltrAlways },
|
|
1842
1837
|
React__namespace.createElement("div", { className: uuiTimePicker.elementContainer },
|
|
1843
1838
|
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 +1914,11 @@ function TimePicker(props) {
|
|
|
1919
1914
|
React.useEffect(() => {
|
|
1920
1915
|
if (valueToTimeString(props.value, props.format) !== state.value) {
|
|
1921
1916
|
const stringValue = valueToTimeString(props.value, props.format);
|
|
1922
|
-
setState((prevState) => (
|
|
1917
|
+
setState((prevState) => ({
|
|
1918
|
+
...prevState,
|
|
1919
|
+
value: stringValue,
|
|
1920
|
+
inputValue: stringValue,
|
|
1921
|
+
}));
|
|
1923
1922
|
}
|
|
1924
1923
|
}, [props.value, props.format]);
|
|
1925
1924
|
const getFormat = () => props.format === 24 ? 'HH:mm' : 'hh:mm A';
|
|
@@ -1935,10 +1934,10 @@ function TimePicker(props) {
|
|
|
1935
1934
|
props.onValueChange(null);
|
|
1936
1935
|
};
|
|
1937
1936
|
const onToggle = (value) => {
|
|
1938
|
-
setState((prevState) => (
|
|
1937
|
+
setState((prevState) => ({ ...prevState, isOpen: value }));
|
|
1939
1938
|
};
|
|
1940
1939
|
const saveTime = (newTime) => {
|
|
1941
|
-
setState((prevState) => (
|
|
1940
|
+
setState((prevState) => ({ ...prevState, inputValue: newTime }));
|
|
1942
1941
|
props.onValueChange(formatStringTimeToObject(newTime));
|
|
1943
1942
|
};
|
|
1944
1943
|
const getTimeFromInputValue = (newValue) => {
|
|
@@ -1953,45 +1952,41 @@ function TimePicker(props) {
|
|
|
1953
1952
|
saveTime(inputValue);
|
|
1954
1953
|
};
|
|
1955
1954
|
const handleFocus = (e) => {
|
|
1956
|
-
var _a;
|
|
1957
1955
|
onToggle(true);
|
|
1958
|
-
|
|
1956
|
+
props.onFocus?.(e);
|
|
1959
1957
|
};
|
|
1960
1958
|
const handleInputChange = (newValue) => {
|
|
1961
|
-
setState((prevState) => (
|
|
1959
|
+
setState((prevState) => ({ ...prevState, inputValue: newValue }));
|
|
1962
1960
|
if (newValue) {
|
|
1963
1961
|
const result = getTimeFromInputValue(newValue);
|
|
1964
1962
|
if (isTimeValid(result)) {
|
|
1965
|
-
setState((prevState) => (
|
|
1963
|
+
setState((prevState) => ({ ...prevState, value: result }));
|
|
1966
1964
|
}
|
|
1967
1965
|
}
|
|
1968
1966
|
};
|
|
1969
1967
|
const handleBlur = (e) => {
|
|
1970
|
-
var _a;
|
|
1971
1968
|
if (uuiCore.isFocusReceiverInsideFocusLock(e))
|
|
1972
1969
|
return;
|
|
1973
1970
|
onToggle(false);
|
|
1974
|
-
|
|
1971
|
+
props.onBlur?.(e);
|
|
1975
1972
|
if (state.value === '' || state.inputValue === '') {
|
|
1976
1973
|
props.onValueChange(null);
|
|
1977
|
-
setState((prevState) => (
|
|
1974
|
+
setState((prevState) => ({ ...prevState, value: null, inputValue: null }));
|
|
1978
1975
|
}
|
|
1979
1976
|
state.value && state.inputValue && saveTime(state.value);
|
|
1980
1977
|
};
|
|
1981
1978
|
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 })));
|
|
1979
|
+
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
1980
|
};
|
|
1985
1981
|
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 })))));
|
|
1982
|
+
const { forwardedRef, onValueChange, ...timePickerBodyProps } = props;
|
|
1983
|
+
return (!props.isDisabled && !props.isReadonly && (React__namespace.default.createElement(DropdownContainer, { ...bodyProps, focusLock: false },
|
|
1984
|
+
React__namespace.default.createElement(TimePickerBody, { ...timePickerBodyProps, onValueChange: handleBodyValueChange, value: formatStringTimeToObject(state.value), rawProps: props.rawProps?.body, cx: props.bodyCx }))));
|
|
1990
1985
|
};
|
|
1991
1986
|
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
1987
|
}
|
|
1993
1988
|
|
|
1994
|
-
var css$X = {"root":"
|
|
1989
|
+
var css$X = {"root":"TVTN3d"};
|
|
1995
1990
|
|
|
1996
1991
|
function applyInputAddonMods() {
|
|
1997
1992
|
return [
|
|
@@ -2000,7 +1995,7 @@ function applyInputAddonMods() {
|
|
|
2000
1995
|
}
|
|
2001
1996
|
const InputAddon = /* @__PURE__ */uuiCore.withMods(uuiComponents.InputAddon, applyInputAddonMods);
|
|
2002
1997
|
|
|
2003
|
-
var css$W = {"root":"
|
|
1998
|
+
var css$W = {"root":"cjkBkz"};
|
|
2004
1999
|
|
|
2005
2000
|
function applySliderMods() {
|
|
2006
2001
|
return [css$W.root, 'uui-color-neutral'];
|
|
@@ -2023,7 +2018,7 @@ var SvgStarFilled = function SvgStarFilled(props, ref) {
|
|
|
2023
2018
|
};
|
|
2024
2019
|
var ForwardRef$t = /*#__PURE__*/React.forwardRef(SvgStarFilled);
|
|
2025
2020
|
|
|
2026
|
-
var css$V = {"root":"
|
|
2021
|
+
var css$V = {"root":"NwwNlH","tooltip":"wT3YBf"};
|
|
2027
2022
|
|
|
2028
2023
|
function applyRatingMods(mods) {
|
|
2029
2024
|
return [
|
|
@@ -2059,17 +2054,16 @@ const getMonthOnOpen = (selectedDate, focus) => {
|
|
|
2059
2054
|
return uuiDayjs.dayjs(selectedDate[focus]);
|
|
2060
2055
|
}
|
|
2061
2056
|
else if (selectedDate.from) {
|
|
2062
|
-
return uuiDayjs.dayjs(selectedDate
|
|
2057
|
+
return uuiDayjs.dayjs(selectedDate?.from);
|
|
2063
2058
|
}
|
|
2064
2059
|
else if (selectedDate.to) {
|
|
2065
|
-
return uuiDayjs.dayjs(selectedDate
|
|
2060
|
+
return uuiDayjs.dayjs(selectedDate?.to);
|
|
2066
2061
|
}
|
|
2067
2062
|
return uuiDayjs.dayjs();
|
|
2068
2063
|
};
|
|
2069
2064
|
const isValidDate = (input, format, filter) => {
|
|
2070
|
-
var _a, _b;
|
|
2071
2065
|
const parsedDate = uuiDayjs.dayjs(input, supportedDateFormats(format), true);
|
|
2072
|
-
return
|
|
2066
|
+
return parsedDate.isValid() ?? filter?.(parsedDate) ?? true;
|
|
2073
2067
|
};
|
|
2074
2068
|
const isValidRange = (range) => {
|
|
2075
2069
|
const from = uuiDayjs.dayjs(range.from);
|
|
@@ -2165,7 +2159,7 @@ const getNextYearsList = (currentDate) => {
|
|
|
2165
2159
|
return currentDate.add(16, 'year');
|
|
2166
2160
|
};
|
|
2167
2161
|
|
|
2168
|
-
var css$U = {"root":"
|
|
2162
|
+
var css$U = {"root":"AS-ujT","container":"lYmM14"};
|
|
2169
2163
|
|
|
2170
2164
|
const uuiHeader = {
|
|
2171
2165
|
container: 'uui-datepicker-header-container',
|
|
@@ -2249,14 +2243,14 @@ function DatePickerHeader({ navIconLeft, navIconRight, value: { month, view }, o
|
|
|
2249
2243
|
React__namespace.createElement(Button, { icon: navIconRight || ForwardRef$v, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: !isDisabled && (() => onRightNavigationArrow()), isDisabled: disableNext }))));
|
|
2250
2244
|
}
|
|
2251
2245
|
|
|
2252
|
-
var css$T = {"uui-typography":"
|
|
2246
|
+
var css$T = {"uui-typography":"JlXZBE","uuiTypography":"JlXZBE","hero-header":"oJ4hJk","heroHeader":"oJ4hJk","promo-header":"WVMvTR","promoHeader":"WVMvTR","uui-critical":"iuVHDj","uuiCritical":"iuVHDj","uui-info":"Klq7cX","uuiInfo":"Klq7cX","uui-success":"_33KUGa","uuiSuccess":"_33KUGa","uui-warning":"IhoxV2","uuiWarning":"IhoxV2","uui-highlight":"_7Q7pXj","uuiHighlight":"_7Q7pXj","uui-typography-size-12":"gWL8X1","uuiTypographySize12":"gWL8X1","uui-typography-size-14":"W1WNEe","uuiTypographySize14":"W1WNEe","uui-typography-size-16":"-D6wjG","uuiTypographySize16":"-D6wjG","root":"DXjRI0"};
|
|
2253
2247
|
|
|
2254
2248
|
function applyDateSelectionMods() {
|
|
2255
2249
|
return [css$T.root, `uui-size-${settings.sizes.defaults.datePicker}`];
|
|
2256
2250
|
}
|
|
2257
2251
|
const Calendar = /* @__PURE__ */uuiCore.withMods(uuiComponents.Calendar, applyDateSelectionMods);
|
|
2258
2252
|
|
|
2259
|
-
var css$S = {"uui-typography":"
|
|
2253
|
+
var css$S = {"uui-typography":"HQEjX7","uuiTypography":"HQEjX7","hero-header":"d3rRM6","heroHeader":"d3rRM6","promo-header":"dpE7Fv","promoHeader":"dpE7Fv","uui-critical":"S80Nek","uuiCritical":"S80Nek","uui-info":"kpdxBN","uuiInfo":"kpdxBN","uui-success":"d337-U","uuiSuccess":"d337-U","uui-warning":"-QrFtX","uuiWarning":"-QrFtX","uui-highlight":"IfnHBu","uuiHighlight":"IfnHBu","uui-typography-size-12":"_1abHAd","uuiTypographySize12":"_1abHAd","uui-typography-size-14":"IwqACr","uuiTypographySize14":"IwqACr","uui-typography-size-16":"JQVZf7","uuiTypographySize16":"JQVZf7","root":"_2aGpDq"};
|
|
2260
2254
|
|
|
2261
2255
|
const uuiDatePickerBody = {
|
|
2262
2256
|
wrapper: 'uui-datepicker-body-wrapper',
|
|
@@ -2271,7 +2265,7 @@ function DatePickerBodyComp(props, ref) {
|
|
|
2271
2265
|
setMonth(getNewMonth(value));
|
|
2272
2266
|
setView('DAY_SELECTION');
|
|
2273
2267
|
}, [value, setMonth]);
|
|
2274
|
-
return (React__namespace.default.createElement(StatelessDatePickerBody,
|
|
2268
|
+
return (React__namespace.default.createElement(StatelessDatePickerBody, { ref: ref, ...props, month: month, view: view, onValueChange: onValueChange, onMonthChange: (m) => setMonth(m), onViewChange: (v) => setView(v) }));
|
|
2275
2269
|
}
|
|
2276
2270
|
const StatelessDatePickerBody = /* @__PURE__ */React.forwardRef(StatelessDatePickerBodyComp);
|
|
2277
2271
|
function StatelessDatePickerBodyComp({ renderDay, isHoliday, cx: classes, filter, rawProps, value, month, view, onValueChange, onMonthChange, onViewChange, isDisabled, }, ref) {
|
|
@@ -2299,7 +2293,7 @@ function StatelessDatePickerBodyComp({ renderDay, isHoliday, cx: classes, filter
|
|
|
2299
2293
|
return (React__namespace.default.createElement(Calendar, { value: selectedDate, month: month, onValueChange: onDayClick, filter: filter, renderDay: renderDay, isHoliday: isHoliday, isDisabled: isDisabled }));
|
|
2300
2294
|
}
|
|
2301
2295
|
};
|
|
2302
|
-
return (React__namespace.default.createElement("div",
|
|
2296
|
+
return (React__namespace.default.createElement("div", { ref: ref, className: uuiCore.cx(uuiDatePickerBodyBase.container, `uui-size-${settings.sizes.defaults.datePicker}`, classes), ...rawProps },
|
|
2303
2297
|
React__namespace.default.createElement("div", { className: uuiCore.cx(css$S.root, uuiDatePickerBody.wrapper) },
|
|
2304
2298
|
React__namespace.default.createElement(DatePickerHeader, { value: {
|
|
2305
2299
|
view,
|
|
@@ -2339,8 +2333,7 @@ function DatePickerComponent(props, ref) {
|
|
|
2339
2333
|
setBodyIsOpen(false);
|
|
2340
2334
|
};
|
|
2341
2335
|
const onBlur = (e) => {
|
|
2342
|
-
|
|
2343
|
-
(_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
|
|
2336
|
+
props.onBlur?.(e);
|
|
2344
2337
|
if (isValidDate(inputValue, format, props.filter)) {
|
|
2345
2338
|
setInputValue(toCustomDateFormat(inputValue, format));
|
|
2346
2339
|
onValueChange(toValueDateFormat(inputValue, format));
|
|
@@ -2357,37 +2350,33 @@ function DatePickerComponent(props, ref) {
|
|
|
2357
2350
|
}
|
|
2358
2351
|
};
|
|
2359
2352
|
const renderInput = (renderProps) => {
|
|
2360
|
-
var _a;
|
|
2361
2353
|
const allowClear = !props.disableClear && !!inputValue;
|
|
2362
|
-
return (React__namespace.default.createElement(TextInput,
|
|
2354
|
+
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
2355
|
setInputValue(v || '');
|
|
2364
2356
|
}, onCancel: allowClear ? () => {
|
|
2365
2357
|
if (!props.disableClear && !!inputValue) {
|
|
2366
2358
|
onValueChange(null);
|
|
2367
2359
|
}
|
|
2368
2360
|
} : 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 })));
|
|
2361
|
+
props.onFocus?.(e);
|
|
2362
|
+
}, onKeyDown: onInputKeyDown, onBlur: onBlur, mode: props.mode || defaultMode$1, rawProps: props.rawProps?.input, id: props.id }));
|
|
2372
2363
|
};
|
|
2373
2364
|
const renderBody = (renderProps) => {
|
|
2374
|
-
|
|
2375
|
-
|
|
2376
|
-
|
|
2377
|
-
_b.call(props)));
|
|
2365
|
+
return (React__namespace.default.createElement(DropdownContainer, { ...renderProps },
|
|
2366
|
+
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 }),
|
|
2367
|
+
props.renderFooter?.()));
|
|
2378
2368
|
};
|
|
2379
2369
|
return (React__namespace.default.createElement(uuiComponents.Dropdown, { value: isBodyOpen, modifiers: modifiers$1, placement: props.placement, forwardedRef: ref, onValueChange: (v) => {
|
|
2380
2370
|
setBodyIsOpen(v);
|
|
2381
2371
|
}, renderTarget: (renderProps) => {
|
|
2382
|
-
|
|
2383
|
-
return ((_a = props.renderTarget) === null || _a === void 0 ? void 0 : _a.call(props, renderProps)) || renderInput(renderProps);
|
|
2372
|
+
return props.renderTarget?.(renderProps) || renderInput(renderProps);
|
|
2384
2373
|
}, renderBody: (renderProps) => {
|
|
2385
2374
|
return renderBody(renderProps);
|
|
2386
2375
|
} }));
|
|
2387
2376
|
}
|
|
2388
2377
|
const DatePicker = /* @__PURE__ */React__namespace.default.forwardRef(DatePickerComponent);
|
|
2389
2378
|
|
|
2390
|
-
var css$R = {"uui-typography":"
|
|
2379
|
+
var css$R = {"uui-typography":"gGi85F","uuiTypography":"gGi85F","hero-header":"IgdOBu","heroHeader":"IgdOBu","promo-header":"A5L1GG","promoHeader":"A5L1GG","uui-critical":"iy2RzG","uuiCritical":"iy2RzG","uui-info":"d9EKQD","uuiInfo":"d9EKQD","uui-success":"exeSmj","uuiSuccess":"exeSmj","uui-warning":"IQlKk-","uuiWarning":"IQlKk-","uui-highlight":"LbIsFQ","uuiHighlight":"LbIsFQ","uui-typography-size-12":"KPQvWL","uuiTypographySize12":"KPQvWL","uui-typography-size-14":"c2sx6w","uuiTypographySize14":"c2sx6w","uui-typography-size-16":"MEV9BY","uuiTypographySize16":"MEV9BY","date-input":"zuz15H","dateInput":"zuz15H","root":"dSmm6U","separator":"_67c0TD","mode-form":"Py0BlD","modeForm":"Py0BlD","mode-cell":"cMERyF","modeCell":"cMERyF"};
|
|
2391
2380
|
|
|
2392
2381
|
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
2382
|
const [inputValue, setInputValue] = React.useState(toCustomDateRangeFormat(value, format));
|
|
@@ -2395,21 +2384,30 @@ const RangeDatePickerInput = /* @__PURE__ */React.forwardRef(({ isDisabled, isIn
|
|
|
2395
2384
|
setInputValue(toCustomDateRangeFormat(value, format));
|
|
2396
2385
|
}, [format, value, setInputValue]);
|
|
2397
2386
|
const onInputChange = (newValue, inputType) => {
|
|
2398
|
-
setInputValue(
|
|
2387
|
+
setInputValue({
|
|
2388
|
+
...inputValue,
|
|
2389
|
+
[inputType]: newValue,
|
|
2390
|
+
});
|
|
2399
2391
|
};
|
|
2400
2392
|
const handleFocus = (event, inputType) => {
|
|
2401
2393
|
onFocusInput(event, inputType);
|
|
2402
2394
|
};
|
|
2403
2395
|
const handleBlur = (event, inputType) => {
|
|
2404
|
-
onBlurInput
|
|
2396
|
+
onBlurInput?.(event, inputType);
|
|
2405
2397
|
const selectedDate = toValueDateRangeFormat(inputValue, format);
|
|
2406
2398
|
if (isValidRange(selectedDate) && (!filter || filter(uuiDayjs.dayjs(selectedDate[inputType])))) {
|
|
2407
2399
|
setInputValue(toCustomDateRangeFormat(selectedDate, format));
|
|
2408
2400
|
onValueChange(selectedDate);
|
|
2409
2401
|
}
|
|
2410
2402
|
else {
|
|
2411
|
-
setInputValue(
|
|
2412
|
-
|
|
2403
|
+
setInputValue({
|
|
2404
|
+
...inputValue,
|
|
2405
|
+
[inputType]: null,
|
|
2406
|
+
});
|
|
2407
|
+
onValueChange({
|
|
2408
|
+
...selectedDate,
|
|
2409
|
+
[inputType]: null,
|
|
2410
|
+
});
|
|
2413
2411
|
}
|
|
2414
2412
|
};
|
|
2415
2413
|
const onInputKeyDown = (e) => {
|
|
@@ -2422,14 +2420,14 @@ const RangeDatePickerInput = /* @__PURE__ */React.forwardRef(({ isDisabled, isIn
|
|
|
2422
2420
|
return (
|
|
2423
2421
|
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
|
|
2424
2422
|
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
|
|
2423
|
+
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
2424
|
React__namespace.default.createElement("div", { className: css$R.separator }),
|
|
2427
2425
|
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
2426
|
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
|
|
2427
|
+
} : 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
2428
|
});
|
|
2431
2429
|
|
|
2432
|
-
var css$Q = {"uui-typography":"
|
|
2430
|
+
var css$Q = {"uui-typography":"YZRUhG","uuiTypography":"YZRUhG","hero-header":"VsSK-V","heroHeader":"VsSK-V","promo-header":"exVwMJ","promoHeader":"exVwMJ","uui-critical":"aP02T9","uuiCritical":"aP02T9","uui-info":"FdyqHN","uuiInfo":"FdyqHN","uui-success":"Qg4D2i","uuiSuccess":"Qg4D2i","uui-warning":"O88rH-","uuiWarning":"O88rH-","uui-highlight":"j-FNZd","uuiHighlight":"j-FNZd","uui-typography-size-12":"dr8QLg","uuiTypographySize12":"dr8QLg","uui-typography-size-14":"x4g4cz","uuiTypographySize14":"x4g4cz","uui-typography-size-16":"_5oWBLO","uuiTypographySize16":"_5oWBLO","root":"_1e9V04"};
|
|
2433
2431
|
|
|
2434
2432
|
const uuiPresets = {
|
|
2435
2433
|
container: 'uui-presets-container',
|
|
@@ -2437,15 +2435,19 @@ const uuiPresets = {
|
|
|
2437
2435
|
item: 'uui-presets-item',
|
|
2438
2436
|
};
|
|
2439
2437
|
const getPresets = (presets) => {
|
|
2440
|
-
return Object.keys(presets).map((key) => (
|
|
2438
|
+
return Object.keys(presets).map((key) => ({
|
|
2439
|
+
...presets[key].getRange(),
|
|
2440
|
+
name: presets[key].name,
|
|
2441
|
+
key,
|
|
2442
|
+
})).sort((a, b) => a.order - b.order);
|
|
2441
2443
|
};
|
|
2442
2444
|
function CalendarPresets(props) {
|
|
2443
|
-
return (React__namespace.createElement("div",
|
|
2445
|
+
return (React__namespace.createElement("div", { ref: props.forwardedRef, className: uuiCore.cx(uuiPresets.container, css$Q.root, props.cx), ...props.rawProps },
|
|
2444
2446
|
React__namespace.createElement("div", { className: uuiPresets.header }, "Presets"),
|
|
2445
2447
|
getPresets(props.presets).map((item) => (React__namespace.createElement(LinkButton, { key: item.key, caption: item.name, onClick: () => props.onPresetSet(item), size: "24" })))));
|
|
2446
2448
|
}
|
|
2447
2449
|
|
|
2448
|
-
var css$P = {"uui-typography":"
|
|
2450
|
+
var css$P = {"uui-typography":"pxtxU-","uuiTypography":"pxtxU-","hero-header":"cjXZ-y","heroHeader":"cjXZ-y","promo-header":"b-scZm","promoHeader":"b-scZm","uui-critical":"NH5hfs","uuiCritical":"NH5hfs","uui-info":"RkAKYL","uuiInfo":"RkAKYL","uui-success":"D3veL8","uuiSuccess":"D3veL8","uui-warning":"SuPW6H","uuiWarning":"SuPW6H","uui-highlight":"lm2GRC","uuiHighlight":"lm2GRC","uui-typography-size-12":"N-19Fk","uuiTypographySize12":"N-19Fk","uui-typography-size-14":"TTQR9J","uuiTypographySize14":"TTQR9J","uui-typography-size-16":"F9kWoA","uuiTypographySize16":"F9kWoA","root":"ZI3bVF","container":"_1HgaOx","day-selection":"L2DvXA","daySelection":"L2DvXA","from-picker":"_56frkW","fromPicker":"_56frkW","to-picker":"bfxvrA","toPicker":"bfxvrA","bodes-wrapper":"KJ-thA","bodesWrapper":"KJ-thA","blocker":"sLX3dg"};
|
|
2449
2451
|
|
|
2450
2452
|
const uuiRangeDatePickerBody = {
|
|
2451
2453
|
inRange: 'uui-range-datepicker-in-range',
|
|
@@ -2543,8 +2545,8 @@ function RangeDatePickerBodyComp(props, ref) {
|
|
|
2543
2545
|
// selectedDate can be null, other params should always have values
|
|
2544
2546
|
const newRange = v ? getRange(v) : selectedDate;
|
|
2545
2547
|
let newInFocus = null;
|
|
2546
|
-
const fromChanged = selectedDate.from !==
|
|
2547
|
-
const toChanged = selectedDate.to !==
|
|
2548
|
+
const fromChanged = selectedDate.from !== newRange?.from;
|
|
2549
|
+
const toChanged = selectedDate.to !== newRange?.to;
|
|
2548
2550
|
if (inFocus === 'from' && fromChanged) {
|
|
2549
2551
|
newInFocus = 'to';
|
|
2550
2552
|
}
|
|
@@ -2554,11 +2556,11 @@ function RangeDatePickerBodyComp(props, ref) {
|
|
|
2554
2556
|
setActiveMonth(part);
|
|
2555
2557
|
props.onValueChange({
|
|
2556
2558
|
selectedDate: newRange ? newRange : selectedDate,
|
|
2557
|
-
inFocus: newInFocus
|
|
2559
|
+
inFocus: newInFocus ?? inFocus,
|
|
2558
2560
|
});
|
|
2559
2561
|
};
|
|
2560
2562
|
const renderDay = (renderProps) => {
|
|
2561
|
-
return (React__namespace.default.createElement(uuiComponents.Day,
|
|
2563
|
+
return (React__namespace.default.createElement(uuiComponents.Day, { ...renderProps, cx: getDayCX(renderProps.value, selectedDate) }));
|
|
2562
2564
|
};
|
|
2563
2565
|
const from = {
|
|
2564
2566
|
month,
|
|
@@ -2586,17 +2588,17 @@ function RangeDatePickerBodyComp(props, ref) {
|
|
|
2586
2588
|
});
|
|
2587
2589
|
}, presets: presets })));
|
|
2588
2590
|
};
|
|
2589
|
-
return (React__namespace.default.createElement("div",
|
|
2591
|
+
return (React__namespace.default.createElement("div", { ref: ref, className: uuiCore.cx(css$P.root, uuiDatePickerBodyBase.container, props.cx), ...props.rawProps },
|
|
2590
2592
|
React__namespace.default.createElement(FlexRow, { cx: [view === 'DAY_SELECTION' && css$P.daySelection, css$P.container], alignItems: "top" },
|
|
2591
2593
|
React__namespace.default.createElement(FlexCell, { width: "auto" },
|
|
2592
2594
|
React__namespace.default.createElement(FlexRow, null,
|
|
2593
2595
|
React__namespace.default.createElement(FlexRow, { cx: css$P.bodesWrapper, alignItems: "top" },
|
|
2594
|
-
React__namespace.default.createElement(StatelessDatePickerBody,
|
|
2596
|
+
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
2597
|
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,
|
|
2598
|
+
}, onViewChange: (v) => setView(v), filter: props.filter, isHoliday: props.isHoliday, renderDay: props.renderDay || renderDay, isDisabled: view !== 'DAY_SELECTION' && activeMonth === 'to' }),
|
|
2599
|
+
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
2600
|
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' })
|
|
2601
|
+
}, onViewChange: (v) => setView(v), filter: props.filter, renderDay: props.renderDay || renderDay, isHoliday: props.isHoliday, isDisabled: view !== 'DAY_SELECTION' && activeMonth === 'from' }),
|
|
2600
2602
|
view !== 'DAY_SELECTION' && (React__namespace.default.createElement("div", { style: {
|
|
2601
2603
|
left: activeMonth === 'from' ? '50%' : undefined,
|
|
2602
2604
|
right: activeMonth === 'to' ? '50%' : undefined,
|
|
@@ -2606,9 +2608,9 @@ function RangeDatePickerBodyComp(props, ref) {
|
|
|
2606
2608
|
}
|
|
2607
2609
|
const getDayCX = (day, selectedDate) => {
|
|
2608
2610
|
const dayValue = day.valueOf();
|
|
2609
|
-
const fromValue =
|
|
2611
|
+
const fromValue = selectedDate?.from
|
|
2610
2612
|
? uuiDayjs.dayjs(selectedDate.from).valueOf() : null;
|
|
2611
|
-
const toValue =
|
|
2613
|
+
const toValue = selectedDate?.to
|
|
2612
2614
|
? uuiDayjs.dayjs(selectedDate.to).valueOf() : null;
|
|
2613
2615
|
const inRange = fromValue
|
|
2614
2616
|
&& toValue
|
|
@@ -2620,7 +2622,7 @@ const getDayCX = (day, selectedDate) => {
|
|
|
2620
2622
|
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
2623
|
};
|
|
2622
2624
|
|
|
2623
|
-
var css$O = {"dropdown-container":"
|
|
2625
|
+
var css$O = {"dropdown-container":"KpYPSG","dropdownContainer":"KpYPSG"};
|
|
2624
2626
|
|
|
2625
2627
|
const modifiers = [{
|
|
2626
2628
|
name: 'offset',
|
|
@@ -2634,8 +2636,8 @@ function RangeDatePickerComponent(props, ref) {
|
|
|
2634
2636
|
const [inFocus, setInFocus] = React.useState(null);
|
|
2635
2637
|
const targetRef = React__namespace.default.useRef(null);
|
|
2636
2638
|
const onValueChange = (newValue) => {
|
|
2637
|
-
const fromChanged =
|
|
2638
|
-
const toChanged =
|
|
2639
|
+
const fromChanged = value?.from !== newValue?.from;
|
|
2640
|
+
const toChanged = value?.to !== newValue?.to;
|
|
2639
2641
|
if (fromChanged || toChanged) {
|
|
2640
2642
|
props.onValueChange(newValue);
|
|
2641
2643
|
if (props.getValueChangeAnalyticsEvent) {
|
|
@@ -2645,17 +2647,15 @@ function RangeDatePickerComponent(props, ref) {
|
|
|
2645
2647
|
}
|
|
2646
2648
|
};
|
|
2647
2649
|
const onOpenChange = (newIsOpen) => {
|
|
2648
|
-
var _a;
|
|
2649
2650
|
setIsOpen(newIsOpen);
|
|
2650
|
-
|
|
2651
|
+
props.onOpenChange?.(newIsOpen);
|
|
2651
2652
|
if (!inFocus && newIsOpen) {
|
|
2652
2653
|
setInFocus('from');
|
|
2653
2654
|
targetRef.current.querySelector('.uui-input').focus();
|
|
2654
2655
|
}
|
|
2655
2656
|
};
|
|
2656
2657
|
const onBodyValueChange = (newValue) => {
|
|
2657
|
-
|
|
2658
|
-
setInFocus((_a = newValue.inFocus) !== null && _a !== void 0 ? _a : inFocus);
|
|
2658
|
+
setInFocus(newValue.inFocus ?? inFocus);
|
|
2659
2659
|
onValueChange(newValue.selectedDate);
|
|
2660
2660
|
const toChanged = value.to !== newValue.selectedDate.to;
|
|
2661
2661
|
const closeBody = newValue.selectedDate.from && newValue.selectedDate.to
|
|
@@ -2666,19 +2666,14 @@ function RangeDatePickerComponent(props, ref) {
|
|
|
2666
2666
|
}
|
|
2667
2667
|
};
|
|
2668
2668
|
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
|
-
} }),
|
|
2669
|
+
return (React__namespace.default.createElement(DropdownContainer, { ...renderProps, cx: cx__default.default(css$O.dropdownContainer), shards: [targetRef], returnFocus: true },
|
|
2674
2670
|
React__namespace.default.createElement(FlexRow, null,
|
|
2675
2671
|
React__namespace.default.createElement(RangeDatePickerBody, { cx: cx__default.default(props.bodyCx), value: {
|
|
2676
2672
|
selectedDate: _value,
|
|
2677
2673
|
inFocus,
|
|
2678
2674
|
}, 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 }))));
|
|
2675
|
+
return props.renderFooter?.(value);
|
|
2676
|
+
}, isHoliday: props.isHoliday, rawProps: props.rawProps?.body }))));
|
|
2682
2677
|
};
|
|
2683
2678
|
const handleEscape = (e) => {
|
|
2684
2679
|
if (e.key === 'Escape' && isOpen) {
|
|
@@ -2687,17 +2682,15 @@ function RangeDatePickerComponent(props, ref) {
|
|
|
2687
2682
|
}
|
|
2688
2683
|
};
|
|
2689
2684
|
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);
|
|
2685
|
+
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) => {
|
|
2686
|
+
props.onFocus?.(e, type);
|
|
2694
2687
|
setInFocus(type);
|
|
2695
|
-
}, onBlurInput: (e, type) => {
|
|
2688
|
+
}, onBlurInput: (e, type) => { props.onBlur?.(e, type); !isOpen && setInFocus(null); }, onKeyDown: handleEscape }));
|
|
2696
2689
|
}, renderBody: (renderProps) => renderBody(renderProps), onValueChange: (v) => onOpenChange(v), value: isOpen, modifiers: modifiers, placement: props.placement, forwardedRef: ref }));
|
|
2697
2690
|
}
|
|
2698
2691
|
const RangeDatePicker = /* @__PURE__ */React__namespace.default.forwardRef(RangeDatePickerComponent);
|
|
2699
2692
|
|
|
2700
|
-
var css$N = {"root":"
|
|
2693
|
+
var css$N = {"root":"s39rzC","blocker":"qWTO0E","marker":"k65eme","top":"xwn4gn","bottom":"gqT8Pp","left":"wwolZT","right":"-sq0O5","inside":"Lu2MGv"};
|
|
2701
2694
|
|
|
2702
2695
|
function DropMarker(props) {
|
|
2703
2696
|
return props.isDndInProgress
|
|
@@ -2707,12 +2700,12 @@ function DropMarker(props) {
|
|
|
2707
2700
|
css$N.root,
|
|
2708
2701
|
css$N.marker,
|
|
2709
2702
|
css$N[props.position],
|
|
2710
|
-
props
|
|
2703
|
+
props?.cx,
|
|
2711
2704
|
]) })))
|
|
2712
2705
|
: null;
|
|
2713
2706
|
}
|
|
2714
2707
|
|
|
2715
|
-
var css$M = {"root":"
|
|
2708
|
+
var css$M = {"root":"eQWLok","line-height":"wJB92U","lineHeight":"wJB92U","font-size":"KXfmdz","fontSize":"KXfmdz"};
|
|
2716
2709
|
|
|
2717
2710
|
function applyTextMods(mods) {
|
|
2718
2711
|
return [
|
|
@@ -2728,16 +2721,18 @@ function applyTextMods(mods) {
|
|
|
2728
2721
|
];
|
|
2729
2722
|
}
|
|
2730
2723
|
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) || {};
|
|
2724
|
+
const style = props?.rawProps?.style || {};
|
|
2733
2725
|
props.fontSize && (style['--uui-text-font-size'] = `${props.fontSize}px`);
|
|
2734
2726
|
props.lineHeight && (style['--uui-text-line-height'] = `${props.lineHeight}px`);
|
|
2735
2727
|
return {
|
|
2736
|
-
rawProps:
|
|
2728
|
+
rawProps: {
|
|
2729
|
+
...props?.rawProps,
|
|
2730
|
+
style: style,
|
|
2731
|
+
},
|
|
2737
2732
|
};
|
|
2738
2733
|
});
|
|
2739
2734
|
|
|
2740
|
-
var css$L = {"root":"
|
|
2735
|
+
var css$L = {"root":"QHvxBJ","loading-word":"KzrlUD","loadingWord":"KzrlUD","animated-loading":"aqf8fw","animatedLoading":"aqf8fw","skeleton_loading":"bftHZw","skeletonLoading":"bftHZw"};
|
|
2741
2736
|
|
|
2742
2737
|
const TextPlaceholder = (props) => {
|
|
2743
2738
|
const pattern = ' ';
|
|
@@ -2749,20 +2744,20 @@ const TextPlaceholder = (props) => {
|
|
|
2749
2744
|
}
|
|
2750
2745
|
return words;
|
|
2751
2746
|
}, [props.wordsCount]);
|
|
2752
|
-
return (React__namespace.createElement("div",
|
|
2747
|
+
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
2748
|
props.cx, css$L.loadingWord, !props.isNotAnimated && css$L.animatedLoading,
|
|
2754
2749
|
]), dangerouslySetInnerHTML: { __html: it } })))));
|
|
2755
2750
|
};
|
|
2756
2751
|
|
|
2757
2752
|
const RichTextView = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.RichTextView, (mods) => ['uui-typography', `uui-typography-size-${mods.size || '14'}`]);
|
|
2758
2753
|
|
|
2759
|
-
var css$K = {"uui-typography":"
|
|
2754
|
+
var css$K = {"uui-typography":"GzEwGa","uuiTypography":"GzEwGa","hero-header":"mBTY-p","heroHeader":"mBTY-p","promo-header":"zSY6rk","promoHeader":"zSY6rk","uui-critical":"_4mMnc5","uuiCritical":"_4mMnc5","uui-info":"cENHCL","uuiInfo":"cENHCL","uui-success":"VGvm1N","uuiSuccess":"VGvm1N","uui-warning":"zrpOB-","uuiWarning":"zrpOB-","uui-highlight":"SaidTM","uuiHighlight":"SaidTM","uui-typography-size-12":"gVAKar","uuiTypographySize12":"gVAKar","uui-typography-size-14":"eJqLIV","uuiTypographySize14":"eJqLIV","uui-typography-size-16":"B3m5vL","uuiTypographySize16":"B3m5vL","modal":"KXp2Fv","search-wrapper":"IlzjuW","searchWrapper":"IlzjuW","no-data":"nBLknf","noData":"nBLknf","type-search-to-load-size-24":"GuxY9O","typeSearchToLoadSize24":"GuxY9O"};
|
|
2760
2755
|
|
|
2761
2756
|
class DataPickerBody extends uuiComponents.PickerBodyBase {
|
|
2762
2757
|
constructor() {
|
|
2763
2758
|
super(...arguments);
|
|
2764
2759
|
this.lens = uuiCore.Lens.onEditableComponent(this);
|
|
2765
|
-
this.searchLens = this.lens.prop('search');
|
|
2760
|
+
this.searchLens = this.lens.prop('search').default('');
|
|
2766
2761
|
this.getSearchSize = () => (uuiCore.isMobile() ? settings.sizes.pickerInput.body.mobile.searchInput : this.props.searchSize);
|
|
2767
2762
|
}
|
|
2768
2763
|
renderEmpty() {
|
|
@@ -2799,12 +2794,12 @@ class DataPickerBody extends uuiComponents.PickerBodyBase {
|
|
|
2799
2794
|
return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
|
|
2800
2795
|
this.showSearch() && (React__namespace.default.createElement("div", { key: "search", className: css$K.searchWrapper },
|
|
2801
2796
|
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,
|
|
2797
|
+
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' } })))),
|
|
2798
|
+
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
2799
|
}
|
|
2805
2800
|
}
|
|
2806
2801
|
|
|
2807
|
-
var css$J = {"footer":"
|
|
2802
|
+
var css$J = {"footer":"itU8zU"};
|
|
2808
2803
|
|
|
2809
2804
|
function DataPickerFooterImpl(props) {
|
|
2810
2805
|
const { search, clearSelection, view, showSelected, selectionMode, isSearchTooShort, } = props;
|
|
@@ -2815,11 +2810,12 @@ function DataPickerFooterImpl(props) {
|
|
|
2815
2810
|
const clearAllText = i18n.pickerInput.clearSelectionButton;
|
|
2816
2811
|
const clearSingleText = i18n.pickerInput.clearSelectionButtonSingle;
|
|
2817
2812
|
const selectAllText = i18n.pickerInput.selectAllButton;
|
|
2818
|
-
const isSearching = search
|
|
2819
|
-
const hideFooter =
|
|
2813
|
+
const isSearching = search?.length;
|
|
2814
|
+
const hideFooter = (rowsCount === 0 && !hasSelection) || isSearching || (isSinglePicker && props.disableClear);
|
|
2820
2815
|
const showClear = !props.disableClear && (isSinglePicker ? true : (!view.selectAll || hasSelection));
|
|
2821
2816
|
return !hideFooter && (React__namespace.default.createElement(FlexRow, { cx: css$J.footer },
|
|
2822
|
-
!isSinglePicker && (
|
|
2817
|
+
!isSinglePicker && !isSearchTooShort && ( // Show this switch only for multi mode and when some rows rendered
|
|
2818
|
+
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
2819
|
React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
|
|
2824
2820
|
React__namespace.default.createElement(FlexCell, { width: "auto", alignSelf: "center" },
|
|
2825
2821
|
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 +2825,13 @@ function DataPickerFooterImpl(props) {
|
|
|
2829
2825
|
}
|
|
2830
2826
|
const DataPickerFooter = /* @__PURE__ */React__namespace.default.memo(DataPickerFooterImpl);
|
|
2831
2827
|
|
|
2832
|
-
var css$I = {"header":"
|
|
2828
|
+
var css$I = {"header":"_3n-qfU","title":"h0Yzay","close":"Ubv-e5"};
|
|
2833
2829
|
|
|
2834
2830
|
const DataPickerHeaderImpl = (props) => {
|
|
2835
2831
|
const title = props.title && typeof props.title === 'string' ? props.title.charAt(0).toUpperCase() + props.title.slice(1) : '';
|
|
2836
2832
|
return (React__namespace.default.createElement(FlexRow, { alignItems: "center", borderBottom: true, cx: css$I.header },
|
|
2837
2833
|
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: () =>
|
|
2834
|
+
React__namespace.default.createElement(IconButton, { icon: ForwardRef$R, onClick: () => props.close?.(), cx: css$I.close })));
|
|
2839
2835
|
};
|
|
2840
2836
|
const DataPickerHeader = /* @__PURE__ */React__namespace.default.memo(DataPickerHeaderImpl);
|
|
2841
2837
|
|
|
@@ -2854,7 +2850,7 @@ var SvgNotificationDoneFill = function SvgNotificationDoneFill(props, ref) {
|
|
|
2854
2850
|
};
|
|
2855
2851
|
var ForwardRef$s = /*#__PURE__*/React.forwardRef(SvgNotificationDoneFill);
|
|
2856
2852
|
|
|
2857
|
-
var css$H = {"uui-typography":"
|
|
2853
|
+
var css$H = {"uui-typography":"_6hgF6R","uuiTypography":"_6hgF6R","hero-header":"ZeDzP9","heroHeader":"ZeDzP9","promo-header":"g6yqSL","promoHeader":"g6yqSL","uui-critical":"YnfZye","uuiCritical":"YnfZye","uui-info":"_9-XPH5","uuiInfo":"_9-XPH5","uui-success":"PsJWR0","uuiSuccess":"PsJWR0","uui-warning":"RM8EhK","uuiWarning":"RM8EhK","uui-highlight":"gm79d5","uuiHighlight":"gm79d5","uui-typography-size-12":"SzgSsd","uuiTypographySize12":"SzgSsd","uui-typography-size-14":"K8Zf-B","uuiTypographySize14":"K8Zf-B","uui-typography-size-16":"eP6uR2","uuiTypographySize16":"eP6uR2","root":"_5II2o4","align-widgets-top":"OnL4Jy","alignWidgetsTop":"OnL4Jy","align-widgets-center":"_0AyqS5","alignWidgetsCenter":"_0AyqS5","icon-container":"_78nVA6","iconContainer":"_78nVA6","loading-cell":"_8j5Wkr","loadingCell":"_8j5Wkr","content-wrapper":"jmw-rL","contentWrapper":"jmw-rL","render-item":"Ej70i1","renderItem":"Ej70i1","icon-wrapper":"_2Ptlir","iconWrapper":"_2Ptlir","icon-default":"RE0cha","iconDefault":"RE0cha","selected-mark":"N-Hbkk","selectedMark":"N-Hbkk"};
|
|
2858
2854
|
|
|
2859
2855
|
function DataPickerCell(props) {
|
|
2860
2856
|
const ref = React__namespace.useRef();
|
|
@@ -2887,11 +2883,11 @@ function DataPickerCell(props) {
|
|
|
2887
2883
|
], style: props.padding && {
|
|
2888
2884
|
'--uui-data_picker_cell-horizontal-padding': `${props.padding}px`,
|
|
2889
2885
|
} },
|
|
2890
|
-
React__namespace.createElement(DataRowAddons,
|
|
2886
|
+
React__namespace.createElement(DataRowAddons, { size: props.size, ...props, tabIndex: -1 }),
|
|
2891
2887
|
getWrappedContent()));
|
|
2892
2888
|
}
|
|
2893
2889
|
|
|
2894
|
-
var css$G = {"uui-typography":"
|
|
2890
|
+
var css$G = {"uui-typography":"TdkT8z","uuiTypography":"TdkT8z","hero-header":"s2mPsm","heroHeader":"s2mPsm","promo-header":"AG1vlN","promoHeader":"AG1vlN","uui-critical":"biNm3e","uuiCritical":"biNm3e","uui-info":"O2gZt0","uuiInfo":"O2gZt0","uui-success":"_1Peuck","uuiSuccess":"_1Peuck","uui-warning":"tPRKd-","uuiWarning":"tPRKd-","uui-highlight":"BzmLqY","uuiHighlight":"BzmLqY","uui-typography-size-12":"R-j-Tj","uuiTypographySize12":"R-j-Tj","uui-typography-size-14":"zQXGIH","uuiTypographySize14":"zQXGIH","uui-typography-size-16":"A-EV4y","uuiTypographySize16":"A-EV4y","picker-row":"_6ZMOvS","pickerRow":"_6ZMOvS"};
|
|
2895
2891
|
|
|
2896
2892
|
class DataPickerRow extends React__namespace.Component {
|
|
2897
2893
|
constructor() {
|
|
@@ -2901,20 +2897,20 @@ class DataPickerRow extends React__namespace.Component {
|
|
|
2901
2897
|
};
|
|
2902
2898
|
}
|
|
2903
2899
|
render() {
|
|
2904
|
-
return (React__namespace.createElement(uuiComponents.DataPickerRow,
|
|
2900
|
+
return (React__namespace.createElement(uuiComponents.DataPickerRow, { ...this.props, cx: [css$G.pickerRow, this.props.cx], renderContent: this.renderContent }));
|
|
2905
2901
|
}
|
|
2906
2902
|
}
|
|
2907
2903
|
|
|
2908
|
-
var css$F = {"uui-typography":"
|
|
2904
|
+
var css$F = {"uui-typography":"NFRbTo","uuiTypography":"NFRbTo","hero-header":"DE0BU7","heroHeader":"DE0BU7","promo-header":"zkKVJi","promoHeader":"zkKVJi","uui-critical":"zMu-e4","uuiCritical":"zMu-e4","uui-info":"xJic-z","uuiInfo":"xJic-z","uui-success":"n7DPEm","uuiSuccess":"n7DPEm","uui-warning":"HjlGV0","uuiWarning":"HjlGV0","uui-highlight":"GVNd-5","uuiHighlight":"GVNd-5","uui-typography-size-12":"Z3Or7J","uuiTypographySize12":"Z3Or7J","uui-typography-size-14":"ON3Hax","uuiTypographySize14":"ON3Hax","uui-typography-size-16":"FEI3pM","uuiTypographySize16":"FEI3pM","done":"cWHVY9","container":"_65JFOF"};
|
|
2909
2905
|
|
|
2910
2906
|
const PickerBodyMobileView = (props) => {
|
|
2911
2907
|
const isMobileView = uuiCore.isMobile();
|
|
2912
2908
|
const maxWidth = isMobileView ? 'auto' : props.maxWidth;
|
|
2913
2909
|
const maxHeight = isMobileView ? 'auto' : props.maxHeight;
|
|
2914
|
-
return (React__namespace.default.createElement(DropdownContainer,
|
|
2910
|
+
return (React__namespace.default.createElement(DropdownContainer, { ...props, maxWidth: maxWidth, maxHeight: maxHeight, cx: [css$F.container, props.cx], autoFocus: true },
|
|
2915
2911
|
isMobileView && React__namespace.default.createElement(DataPickerHeader, { title: props.title, close: props.onClose }),
|
|
2916
2912
|
props.children,
|
|
2917
|
-
isMobileView && React__namespace.default.createElement(LinkButton, { caption: i18n.pickerInput.doneButton, onClick: () =>
|
|
2913
|
+
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
2914
|
};
|
|
2919
2915
|
|
|
2920
2916
|
var _path$r, _path2$4;
|
|
@@ -2939,20 +2935,20 @@ var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
|
|
|
2939
2935
|
};
|
|
2940
2936
|
var ForwardRef$r = /*#__PURE__*/React.forwardRef(SvgSearchWithBackground);
|
|
2941
2937
|
|
|
2942
|
-
var css$E = {"uui-typography":"
|
|
2938
|
+
var css$E = {"uui-typography":"yEfbCP","uuiTypography":"yEfbCP","hero-header":"sF3tSK","heroHeader":"sF3tSK","promo-header":"RhUX8w","promoHeader":"RhUX8w","uui-critical":"WSyAjb","uuiCritical":"WSyAjb","uui-info":"JER2iI","uuiInfo":"JER2iI","uui-success":"bLn4e8","uuiSuccess":"bLn4e8","uui-warning":"U-gRRF","uuiWarning":"U-gRRF","uui-highlight":"QslQax","uuiHighlight":"QslQax","uui-typography-size-12":"E1-U8i","uuiTypographySize12":"E1-U8i","uui-typography-size-14":"CUMbQk","uuiTypographySize14":"CUMbQk","uui-typography-size-16":"ap4O-X","uuiTypographySize16":"ap4O-X","sub-header-wrapper":"qUWBHl","subHeaderWrapper":"qUWBHl","switch":"f6xCws","no-found-modal-container":"x8lKEp","noFoundModalContainer":"x8lKEp","no-found-modal-container-icon":"Dt5YDI","noFoundModalContainerIcon":"Dt5YDI","no-found-modal-container-text":"f3K28B","noFoundModalContainerText":"f3K28B"};
|
|
2943
2939
|
|
|
2944
2940
|
const mergeHighlightRanges = (ranges) => {
|
|
2945
2941
|
const mergedRanges = [];
|
|
2946
2942
|
ranges.forEach((range) => {
|
|
2947
2943
|
if (!mergedRanges.length) {
|
|
2948
|
-
mergedRanges.push(
|
|
2944
|
+
mergedRanges.push({ ...range, isHighlighted: true });
|
|
2949
2945
|
}
|
|
2950
2946
|
const lastRange = mergedRanges[mergedRanges.length - 1];
|
|
2951
2947
|
if (range.from >= lastRange.from && range.from <= lastRange.to && range.to > lastRange.to) {
|
|
2952
2948
|
lastRange.to = range.to;
|
|
2953
2949
|
}
|
|
2954
2950
|
if (lastRange.to < range.from) {
|
|
2955
|
-
mergedRanges.push(
|
|
2951
|
+
mergedRanges.push({ ...range, isHighlighted: true });
|
|
2956
2952
|
}
|
|
2957
2953
|
});
|
|
2958
2954
|
return mergedRanges;
|
|
@@ -2993,7 +2989,7 @@ const getHighlightRanges = (str, search) => {
|
|
|
2993
2989
|
};
|
|
2994
2990
|
const getDecoratedText = (str, ranges) => ranges.map((range, index) => {
|
|
2995
2991
|
const rangeStr = str.substring(range.from, range.to);
|
|
2996
|
-
return (React__namespace.default.createElement("span",
|
|
2992
|
+
return (React__namespace.default.createElement("span", { key: `${rangeStr}-${index}`, ...(range.isHighlighted ? { className: 'uui-highlight' } : {}) }, rangeStr));
|
|
2997
2993
|
});
|
|
2998
2994
|
const getHighlightedSearchMatches = (str, search) => {
|
|
2999
2995
|
if (!search || !str) {
|
|
@@ -3006,14 +3002,13 @@ const getHighlightedSearchMatches = (str, search) => {
|
|
|
3006
3002
|
return getDecoratedText(str, ranges);
|
|
3007
3003
|
};
|
|
3008
3004
|
|
|
3009
|
-
var css$D = {"root":"
|
|
3005
|
+
var css$D = {"root":"Bar58j","column-gap":"gXVnxb","columnGap":"gXVnxb","multiline":"BXvqf5","text":"BDIk9t"};
|
|
3010
3006
|
|
|
3011
3007
|
function PickerItem(props) {
|
|
3012
|
-
var _a;
|
|
3013
3008
|
const { highlightSearchMatches = true, size, avatarUrl, isLoading, isDisabled, icon, cx, } = props;
|
|
3014
3009
|
const itemSize = size || settings.sizes.pickerInput.body.dropdown.row.cell.item.default;
|
|
3015
3010
|
const isMultiline = !!(props.title && props.subtitle);
|
|
3016
|
-
const { search } =
|
|
3011
|
+
const { search } = props.dataSourceState ?? {};
|
|
3017
3012
|
const title = highlightSearchMatches ? getHighlightedSearchMatches(props.title, search) : props.title;
|
|
3018
3013
|
const subtitle = highlightSearchMatches ? getHighlightedSearchMatches(props.subtitle, search) : props.subtitle;
|
|
3019
3014
|
return (React__namespace.createElement(FlexCell, { width: "auto", cx: [css$D.root, 'uui-typography', cx] },
|
|
@@ -3040,10 +3035,10 @@ function PickerModal(props) {
|
|
|
3040
3035
|
};
|
|
3041
3036
|
const renderItem = (item, rowProps, dsState) => {
|
|
3042
3037
|
const { flattenSearchResults } = view.getConfig();
|
|
3043
|
-
return (React__namespace.default.createElement(PickerItem,
|
|
3038
|
+
return (React__namespace.default.createElement(PickerItem, { title: getName(item), size: "36", dataSourceState: dsState, ...(flattenSearchResults ? { subtitle: getSubtitle(rowProps, dataSourceState) } : {}), ...rowProps }));
|
|
3044
3039
|
};
|
|
3045
3040
|
const renderRow = (rowProps) => {
|
|
3046
|
-
return props.renderRow ? (props.renderRow(rowProps, dataSourceState)) : (React__namespace.default.createElement(DataPickerRow,
|
|
3041
|
+
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
3042
|
};
|
|
3048
3043
|
const renderFooter = () => {
|
|
3049
3044
|
const hasSelection = view.getSelectedRowsCount() > 0;
|
|
@@ -3063,40 +3058,44 @@ function PickerModal(props) {
|
|
|
3063
3058
|
};
|
|
3064
3059
|
const dataRows = getRows();
|
|
3065
3060
|
const rows = dataRows.map((row) => renderRow(row));
|
|
3066
|
-
return (React__namespace.default.createElement(ModalBlocker,
|
|
3061
|
+
return (React__namespace.default.createElement(ModalBlocker, { ...props },
|
|
3067
3062
|
React__namespace.default.createElement(ModalWindow, { width: 600, height: 700 },
|
|
3068
3063
|
React__namespace.default.createElement(ModalHeader, { title: props.caption || i18n.pickerModal.headerTitle, onClose: () => props.abort() }),
|
|
3069
3064
|
React__namespace.default.createElement(FlexCell, { cx: css$E.subHeaderWrapper },
|
|
3070
3065
|
React__namespace.default.createElement(FlexRow, { vPadding: "24" },
|
|
3071
|
-
React__namespace.default.createElement(SearchInput,
|
|
3066
|
+
React__namespace.default.createElement(SearchInput, { ...dataSourceStateLens.prop('search').toProps(), onKeyDown: (e) => uuiComponents.handleDataSourceKeyboard({
|
|
3072
3067
|
value: getDataSourceState(),
|
|
3073
3068
|
onValueChange: handleDataSourceValueChange,
|
|
3074
3069
|
listView: view,
|
|
3075
3070
|
rows: dataRows,
|
|
3076
3071
|
searchPosition: 'body',
|
|
3077
|
-
}, e), autoFocus: true, placeholder: i18n.pickerModal.searchPlaceholder, rawProps: { dir: 'auto' } }))
|
|
3078
|
-
!isSingleSelect() && (React__namespace.default.createElement(Switch,
|
|
3072
|
+
}, e), autoFocus: true, placeholder: i18n.pickerModal.searchPlaceholder, rawProps: { dir: 'auto' } })),
|
|
3073
|
+
!isSingleSelect() && (React__namespace.default.createElement(Switch, { cx: css$E.switch, size: "18", ...getFooterProps().showSelected, isDisabled: view.getSelectedRowsCount() < 1, label: "Show only selected" })),
|
|
3079
3074
|
props.renderFilter && React__namespace.default.createElement(FlexCell, { grow: 2 }, props.renderFilter(dataSourceStateLens.prop('filter').toProps()))),
|
|
3080
|
-
React__namespace.default.createElement(DataPickerBody,
|
|
3075
|
+
React__namespace.default.createElement(DataPickerBody, { ...getListProps(), value: getDataSourceState(), onValueChange: handleDataSourceValueChange, search: dataSourceStateLens.prop('search').toProps(), showSearch: false, rows: rows, renderNotFound: renderNotFound, editMode: "modal" }),
|
|
3081
3076
|
React__namespace.default.createElement(ModalFooter, { padding: "24", vPadding: "24" }, props.renderFooter ? props.renderFooter(getFooterProps()) : renderFooter()))));
|
|
3082
3077
|
}
|
|
3083
3078
|
|
|
3084
|
-
var css$C = {"tooltip":"
|
|
3079
|
+
var css$C = {"tooltip":"tOwKnj"};
|
|
3085
3080
|
|
|
3086
3081
|
const PickerTogglerTag = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
3087
|
-
|
|
3088
|
-
|
|
3082
|
+
const tagProps = {
|
|
3083
|
+
...props,
|
|
3084
|
+
tabIndex: -1,
|
|
3085
|
+
size: settings.sizes.pickerInput.toggler.tag[props.size],
|
|
3086
|
+
caption: props.rowProps?.isLoading ? React__namespace.createElement(TextPlaceholder, null) : props.caption,
|
|
3087
|
+
};
|
|
3089
3088
|
if (props.isCollapsed) {
|
|
3090
3089
|
const collapsedRows = props.collapsedRows.map((row) => props.getName(row.value)).join(', ');
|
|
3091
3090
|
return (React__namespace.createElement(Tooltip, { key: "selected", content: collapsedRows, closeDelay: 150, closeOnMouseLeave: "boundary", cx: css$C.tooltip },
|
|
3092
|
-
React__namespace.createElement(Tag,
|
|
3091
|
+
React__namespace.createElement(Tag, { ref: ref, rawProps: { role: 'option' }, ...tagProps })));
|
|
3093
3092
|
}
|
|
3094
3093
|
else {
|
|
3095
|
-
return React__namespace.createElement(Tag,
|
|
3094
|
+
return React__namespace.createElement(Tag, { ref: ref, rawProps: { role: 'option' }, ...tagProps });
|
|
3096
3095
|
}
|
|
3097
3096
|
});
|
|
3098
3097
|
|
|
3099
|
-
var css$B = {"uui-typography":"
|
|
3098
|
+
var css$B = {"uui-typography":"LK4Et4","uuiTypography":"LK4Et4","hero-header":"-eKS0N","heroHeader":"-eKS0N","promo-header":"_1OJbnM","promoHeader":"_1OJbnM","uui-critical":"_0-ntQT","uuiCritical":"_0-ntQT","uui-info":"V-xL2y","uuiInfo":"V-xL2y","uui-success":"MfLpwo","uuiSuccess":"MfLpwo","uui-warning":"QD50RW","uuiWarning":"QD50RW","uui-highlight":"pEfqsT","uuiHighlight":"pEfqsT","uui-typography-size-12":"qaP1hY","uuiTypographySize12":"qaP1hY","uui-typography-size-14":"_19EcGo","uuiTypographySize14":"_19EcGo","uui-typography-size-16":"d9Q-kW","uuiTypographySize16":"d9Q-kW","root":"_1O0y1J","mode-form":"Ree3EU","modeForm":"Ree3EU","mode-cell":"PUIRV6","modeCell":"PUIRV6","mode-inline":"i0-l5P","modeInline":"i0-l5P"};
|
|
3100
3099
|
|
|
3101
3100
|
const defaultMode = EditMode.FORM;
|
|
3102
3101
|
function applyPickerTogglerMods(mods) {
|
|
@@ -3109,28 +3108,27 @@ function applyPickerTogglerMods(mods) {
|
|
|
3109
3108
|
}
|
|
3110
3109
|
function PickerTogglerComponent(props, ref) {
|
|
3111
3110
|
const renderItem = (itemProps) => {
|
|
3112
|
-
const itemPropsWithSize =
|
|
3111
|
+
const itemPropsWithSize = { ...itemProps, size: (props.size || settings.sizes.pickerInput.toggler.defaults.tag) };
|
|
3113
3112
|
if (!!props.renderItem) {
|
|
3114
3113
|
return props.renderItem(itemPropsWithSize);
|
|
3115
3114
|
}
|
|
3116
|
-
return (React__namespace.createElement(PickerTogglerTag,
|
|
3115
|
+
return (React__namespace.createElement(PickerTogglerTag, { ...itemPropsWithSize, getName: props.getName }));
|
|
3117
3116
|
};
|
|
3118
|
-
return (React__namespace.createElement(uuiComponents.PickerToggler,
|
|
3117
|
+
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
3118
|
}
|
|
3120
3119
|
const PickerToggler = /* @__PURE__ */React__namespace.forwardRef(PickerTogglerComponent);
|
|
3121
3120
|
|
|
3122
|
-
function PickerInputComponent(
|
|
3123
|
-
var { highlightSearchMatches = true } = _a, props = __rest(_a, ["highlightSearchMatches"]);
|
|
3121
|
+
function PickerInputComponent({ highlightSearchMatches = true, ...props }, ref) {
|
|
3124
3122
|
const toggleModalOpening = () => {
|
|
3125
|
-
const { renderFooter, rawProps
|
|
3123
|
+
const { renderFooter, rawProps, ...restProps } = props;
|
|
3126
3124
|
context.uuiModals
|
|
3127
|
-
.show((modalProps) => (React__namespace.default.createElement(PickerModal,
|
|
3125
|
+
.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
3126
|
.then((newSelection) => {
|
|
3129
3127
|
handleSelectionValueChange(newSelection);
|
|
3130
3128
|
})
|
|
3131
3129
|
.catch(() => { });
|
|
3132
3130
|
};
|
|
3133
|
-
const { view, context, popperModifiers, getName, getPlaceholder, handleSelectionValueChange, getTogglerProps, getRows, handleTogglerSearchChange, toggleBodyOpening, dataSourceState, getFooterProps, getPickerBodyProps, getListProps, shouldShowBody, getSearchPosition, closePickerBody, openPickerBody, handlePickerInputKeyboard, } = uuiComponents.usePickerInput(
|
|
3131
|
+
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
3132
|
const dropdownRef = React.useRef(null);
|
|
3135
3133
|
React.useImperativeHandle(ref, () => {
|
|
3136
3134
|
if (dropdownRef.current) {
|
|
@@ -3146,12 +3144,17 @@ function PickerInputComponent(_a, ref) {
|
|
|
3146
3144
|
};
|
|
3147
3145
|
};
|
|
3148
3146
|
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(
|
|
3147
|
+
const renderTargetFn = props.renderToggler || ((props) => React__namespace.default.createElement(PickerToggler, { ...props }));
|
|
3148
|
+
return (React__namespace.default.createElement(uuiCore.IEditableDebouncer, { value: targetProps.value, onValueChange: handleTogglerSearchChange, debounceDelay: props.searchDebounceDelay, render: (editableProps) => renderTargetFn({
|
|
3149
|
+
...getTogglerMods(),
|
|
3150
|
+
...targetProps,
|
|
3151
|
+
...editableProps,
|
|
3152
|
+
onKeyDown: (e) => handlePickerInputKeyboard(rows, e, editableProps.value),
|
|
3153
|
+
}) }));
|
|
3151
3154
|
};
|
|
3152
3155
|
const renderFooter = () => {
|
|
3153
3156
|
const footerProps = getFooterProps();
|
|
3154
|
-
return props.renderFooter ? props.renderFooter(footerProps) : React__namespace.default.createElement(DataPickerFooter,
|
|
3157
|
+
return props.renderFooter ? props.renderFooter(footerProps) : React__namespace.default.createElement(DataPickerFooter, { ...footerProps, size: props.size });
|
|
3155
3158
|
};
|
|
3156
3159
|
const getRowSize = () => {
|
|
3157
3160
|
if (uuiCore.isMobile()) {
|
|
@@ -3171,32 +3174,31 @@ function PickerInputComponent(_a, ref) {
|
|
|
3171
3174
|
};
|
|
3172
3175
|
const renderRowItem = (item, rowProps, dsState) => {
|
|
3173
3176
|
const { flattenSearchResults } = view.getConfig();
|
|
3174
|
-
return (React__namespace.default.createElement(PickerItem,
|
|
3177
|
+
return (React__namespace.default.createElement(PickerItem, { title: getName(item), size: getRowSize(), dataSourceState: dsState, highlightSearchMatches: highlightSearchMatches, ...(flattenSearchResults ? { subtitle: getSubtitle(rowProps, dataSourceState) } : {}), ...rowProps }));
|
|
3175
3178
|
};
|
|
3176
3179
|
const renderRow = (rowProps, dsState) => {
|
|
3177
|
-
return props.renderRow ? (props.renderRow(rowProps, dsState)) : (React__namespace.default.createElement(DataPickerRow,
|
|
3180
|
+
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
3181
|
};
|
|
3179
3182
|
const renderBody = (bodyProps, rows) => {
|
|
3180
3183
|
const renderedDataRows = rows.map((row) => renderRow(row, dataSourceState));
|
|
3181
3184
|
const bodyHeight = uuiCore.isMobile() ? document.documentElement.clientHeight : props.dropdownHeight || settings.sizes.pickerInput.body.dropdown.height;
|
|
3182
3185
|
const minBodyWidth = props.minBodyWidth || settings.sizes.pickerInput.body.dropdown.width;
|
|
3183
3186
|
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,
|
|
3187
|
+
React__namespace.default.createElement(DataPickerBody, { ...bodyProps, rows: renderedDataRows, maxHeight: bodyHeight, searchSize: props.size, editMode: "dropdown", selectionMode: props.selectionMode }),
|
|
3185
3188
|
renderFooter()));
|
|
3186
3189
|
};
|
|
3187
3190
|
const rows = getRows();
|
|
3188
3191
|
const renderItem = props.renderTag ? props.renderTag : null;
|
|
3189
3192
|
return (React__namespace.default.createElement(Dropdown, { renderTarget: (dropdownProps) => {
|
|
3190
3193
|
const targetProps = getTogglerProps();
|
|
3191
|
-
return renderTarget(
|
|
3192
|
-
}, renderBody: (bodyProps) => renderBody(
|
|
3194
|
+
return renderTarget({ ...dropdownProps, ...targetProps, renderItem });
|
|
3195
|
+
}, 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
3196
|
}
|
|
3194
3197
|
const PickerInput = /* @__PURE__ */React__namespace.default.forwardRef(PickerInputComponent);
|
|
3195
3198
|
|
|
3196
|
-
var css$A = {"row":"
|
|
3199
|
+
var css$A = {"row":"TZIqhl"};
|
|
3197
3200
|
|
|
3198
3201
|
function PickerListItem(props) {
|
|
3199
|
-
var _a;
|
|
3200
3202
|
let label;
|
|
3201
3203
|
if (props.isLoading) {
|
|
3202
3204
|
label = React__namespace.default.createElement(TextPlaceholder, { wordsCount: 2 });
|
|
@@ -3206,31 +3208,31 @@ function PickerListItem(props) {
|
|
|
3206
3208
|
}
|
|
3207
3209
|
let component;
|
|
3208
3210
|
if (props.checkbox) {
|
|
3209
|
-
component = (React__namespace.default.createElement(Checkbox,
|
|
3211
|
+
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
3212
|
}
|
|
3211
3213
|
else {
|
|
3212
3214
|
component = (React__namespace.default.createElement(RadioInput, { label: label, value: props.isSelected, isDisabled: props.isLoading || !props.isSelectable || props.isDisabled, onValueChange: () => props.onSelect(props) }));
|
|
3213
3215
|
}
|
|
3214
|
-
return (React__namespace.default.createElement("div",
|
|
3216
|
+
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
3217
|
}
|
|
3216
3218
|
|
|
3217
|
-
var css$z = {"root":"
|
|
3219
|
+
var css$z = {"root":"LruoJN"};
|
|
3218
3220
|
|
|
3219
3221
|
function PickerList(props) {
|
|
3220
3222
|
const { context, view, onlySelectedView, getName, getEntityName, appendLastSelected, getSelectedIdsArray, buildRowsList, getMaxDefaultItems, dataSourceState, getModalTogglerCaption, } = uuiComponents.usePickerList(props);
|
|
3221
3223
|
const defaultRenderRow = (row) => {
|
|
3222
|
-
return React__namespace.default.createElement(PickerListItem,
|
|
3224
|
+
return React__namespace.default.createElement(PickerListItem, { getName: (item) => getName(item), ...row, key: row.rowKey });
|
|
3223
3225
|
};
|
|
3224
3226
|
const handleShowPicker = () => {
|
|
3225
3227
|
context.uuiModals
|
|
3226
|
-
.show((modalProps) => (React__namespace.default.createElement(PickerModal,
|
|
3228
|
+
.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
3229
|
.then((value) => {
|
|
3228
3230
|
appendLastSelected([...getSelectedIdsArray(value)]);
|
|
3229
3231
|
props.onValueChange(value);
|
|
3230
3232
|
})
|
|
3231
3233
|
.catch(() => { });
|
|
3232
3234
|
};
|
|
3233
|
-
const defaultRenderToggler = (props) => React__namespace.default.createElement(LinkButton,
|
|
3235
|
+
const defaultRenderToggler = (props) => React__namespace.default.createElement(LinkButton, { caption: "Show all", ...props });
|
|
3234
3236
|
const viewProps = view.getListProps();
|
|
3235
3237
|
const selectedRows = onlySelectedView.getVisibleRows();
|
|
3236
3238
|
const rows = buildRowsList();
|
|
@@ -3240,7 +3242,7 @@ function PickerList(props) {
|
|
|
3240
3242
|
return (React__namespace.default.createElement("div", { className: cx__default.default('uui-picker-list', css$z.root) },
|
|
3241
3243
|
!rows.length
|
|
3242
3244
|
&& (props.noOptionsMessage || (React__namespace.default.createElement(Text, { color: "secondary", size: props.size }, "No options available"))),
|
|
3243
|
-
rows.map((row) => renderRow(
|
|
3245
|
+
rows.map((row) => renderRow({ ...row, isDisabled: props.isDisabled }, dataSourceState)),
|
|
3244
3246
|
showPicker
|
|
3245
3247
|
&& renderToggler({
|
|
3246
3248
|
onClick: handleShowPicker,
|
|
@@ -3249,19 +3251,19 @@ function PickerList(props) {
|
|
|
3249
3251
|
}, selectedRows)));
|
|
3250
3252
|
}
|
|
3251
3253
|
|
|
3252
|
-
var css$y = {"uui-typography":"
|
|
3254
|
+
var css$y = {"uui-typography":"RYztsP","uuiTypography":"RYztsP","hero-header":"_5WHzNy","heroHeader":"_5WHzNy","promo-header":"mur3MX","promoHeader":"mur3MX","uui-critical":"ePSTR5","uuiCritical":"ePSTR5","uui-info":"_3bs9CC","uuiInfo":"_3bs9CC","uui-success":"tasW46","uuiSuccess":"tasW46","uui-warning":"cqv2S7","uuiWarning":"cqv2S7","uui-highlight":"-YG6mi","uuiHighlight":"-YG6mi","uui-typography-size-12":"qzeaAO","uuiTypographySize12":"qzeaAO","uui-typography-size-14":"A9W-Bn","uuiTypographySize14":"A9W-Bn","uui-typography-size-16":"nOPnNo","uuiTypographySize16":"nOPnNo","root":"weeM0b","wrapper":"_22ViS7","align-widgets-top":"QGEOCA","alignWidgetsTop":"QGEOCA","align-widgets-center":"bzBoSx","alignWidgetsCenter":"bzBoSx"};
|
|
3253
3255
|
|
|
3254
3256
|
function DataTableCell(initialProps) {
|
|
3255
|
-
const props =
|
|
3257
|
+
const props = { ...initialProps };
|
|
3256
3258
|
if (props.isFirstColumn) {
|
|
3257
|
-
props.addons = React__namespace.createElement(DataRowAddons,
|
|
3259
|
+
props.addons = React__namespace.createElement(DataRowAddons, { size: props.size, ...props });
|
|
3258
3260
|
}
|
|
3259
3261
|
props.renderPlaceholder = props.renderPlaceholder
|
|
3260
3262
|
|| (() => (React__namespace.createElement(Text, { key: "t", size: settings.sizes.dataTable.body.row.cell.text[props.size] },
|
|
3261
3263
|
React__namespace.createElement(TextPlaceholder, { isNotAnimated: true }))));
|
|
3262
3264
|
props.renderUnknown = props.renderUnknown
|
|
3263
3265
|
|| (() => (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,
|
|
3266
|
+
props.renderTooltip = (tooltipProps) => React__namespace.createElement(Tooltip, { color: "critical", ...tooltipProps });
|
|
3265
3267
|
const isEditable = !!props.onValueChange;
|
|
3266
3268
|
const getLeftPadding = () => {
|
|
3267
3269
|
const { rowProps: { isLoading }, columnsGap, isFirstColumn } = props;
|
|
@@ -3295,18 +3297,18 @@ function DataTableCell(initialProps) {
|
|
|
3295
3297
|
'--uui-dt-cell-padding-start': `${getLeftPadding()}px`,
|
|
3296
3298
|
'--uui-dt-cell-padding-end': `${getRightPadding()}px`,
|
|
3297
3299
|
};
|
|
3298
|
-
return React__namespace.createElement(uuiComponents.DataTableCell,
|
|
3300
|
+
return React__namespace.createElement(uuiComponents.DataTableCell, { ...props });
|
|
3299
3301
|
}
|
|
3300
3302
|
|
|
3301
|
-
var css$x = {"uui-typography":"
|
|
3303
|
+
var css$x = {"uui-typography":"jRF85f","uuiTypography":"jRF85f","hero-header":"hrpjqF","heroHeader":"hrpjqF","promo-header":"aXrZtG","promoHeader":"aXrZtG","uui-critical":"Switwu","uuiCritical":"Switwu","uui-info":"_6Zoy3q","uuiInfo":"_6Zoy3q","uui-success":"mEyab4","uuiSuccess":"mEyab4","uui-warning":"-rXh5T","uuiWarning":"-rXh5T","uui-highlight":"bE7yCn","uuiHighlight":"bE7yCn","uui-typography-size-12":"yjbcUX","uuiTypographySize12":"yjbcUX","uui-typography-size-14":"-OcZrI","uuiTypographySize14":"-OcZrI","uui-typography-size-16":"M9E1Qe","uuiTypographySize16":"M9E1Qe","root":"-ejH6-"};
|
|
3302
3304
|
|
|
3303
3305
|
// Here we define a single instance of the renderCell function to make DataTableRow#shouldComponentUpdate work.
|
|
3304
3306
|
// 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
3307
|
const renderCell = (props) => {
|
|
3306
3308
|
const mods = props.rowProps;
|
|
3307
|
-
return React__namespace.createElement(DataTableCell,
|
|
3309
|
+
return React__namespace.createElement(DataTableCell, { ...props, key: props.key, size: mods.size, columnsGap: mods.columnsGap });
|
|
3308
3310
|
};
|
|
3309
|
-
const renderDropMarkers = (props) => React__namespace.createElement(DropMarker,
|
|
3311
|
+
const renderDropMarkers = (props) => React__namespace.createElement(DropMarker, { ...props, enableBlocker: true });
|
|
3310
3312
|
const propsMods = { renderCell, renderDropMarkers };
|
|
3311
3313
|
const DataTableRow = /* @__PURE__ */uuiCore.withMods(uuiComponents.DataTableRow, ({ borderBottom = true, size }) => {
|
|
3312
3314
|
return [
|
|
@@ -3314,7 +3316,7 @@ const DataTableRow = /* @__PURE__ */uuiCore.withMods(uuiComponents.DataTableRow,
|
|
|
3314
3316
|
];
|
|
3315
3317
|
}, () => propsMods);
|
|
3316
3318
|
|
|
3317
|
-
var css$w = {"uui-typography":"
|
|
3319
|
+
var css$w = {"uui-typography":"n5KDWe","uuiTypography":"n5KDWe","hero-header":"qUkqiE","heroHeader":"qUkqiE","promo-header":"WAE5QM","promoHeader":"WAE5QM","uui-critical":"MO98l4","uuiCritical":"MO98l4","uui-info":"ERyTmB","uuiInfo":"ERyTmB","uui-success":"xCUi9A","uuiSuccess":"xCUi9A","uui-warning":"a1-iG9","uuiWarning":"a1-iG9","uui-highlight":"b0shby","uuiHighlight":"b0shby","uui-typography-size-12":"nfitxU","uuiTypographySize12":"nfitxU","uui-typography-size-14":"Y8UjXC","uuiTypographySize14":"Y8UjXC","uui-typography-size-16":"N6IEIJ","uuiTypographySize16":"N6IEIJ","sorting-panel-container":"dMznDn","sortingPanelContainer":"dMznDn"};
|
|
3318
3320
|
|
|
3319
3321
|
var _path$q;
|
|
3320
3322
|
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 +3446,7 @@ var SvgNavigationExpandAllOutline = function SvgNavigationExpandAllOutline(props
|
|
|
3444
3446
|
};
|
|
3445
3447
|
var ForwardRef$k = /*#__PURE__*/React.forwardRef(SvgNavigationExpandAllOutline);
|
|
3446
3448
|
|
|
3447
|
-
var css$v = {"uui-typography":"
|
|
3449
|
+
var css$v = {"uui-typography":"jUd3gW","uuiTypography":"jUd3gW","hero-header":"v8csVw","heroHeader":"v8csVw","promo-header":"NxS9a3","promoHeader":"NxS9a3","uui-critical":"voSD1D","uuiCritical":"voSD1D","uui-info":"cjjcwy","uuiInfo":"cjjcwy","uui-success":"_17NlmN","uuiSuccess":"_17NlmN","uui-warning":"_7GSqg2","uuiWarning":"_7GSqg2","uui-highlight":"gNHaer","uuiHighlight":"gNHaer","uui-typography-size-12":"BfXbkP","uuiTypographySize12":"BfXbkP","uui-typography-size-14":"Wy6K2D","uuiTypographySize14":"Wy6K2D","uui-typography-size-16":"zcFPUV","uuiTypographySize16":"zcFPUV","root":"_5pOK1a","caption-wrapper":"_8AxwSB","captionWrapper":"_8AxwSB","sort-icon":"TZrhNu","sortIcon":"TZrhNu","dropdown-icon":"NUgmJ8","dropdownIcon":"NUgmJ8","infoIcon":"CMz-VS","resizable":"n5h3N2","align-right":"gT8MDC","alignRight":"gT8MDC","align-center":"cQPcnl","alignCenter":"cQPcnl","caption":"hTJRh2","truncate":"xAkbxc","checkbox":"_6XfSvF","icon":"x15-9k","fold-all-icon":"FhD8Gn","foldAllIcon":"FhD8Gn","cell-tooltip":"QQGZJl","cellTooltip":"QQGZJl","upper-case":"-uF25u","upperCase":"-uF25u","resizing-marker":"KXgVWN","resizingMarker":"KXgVWN","pinned-right":"_2hx856","pinnedRight":"_2hx856","draggable":"GI-8fY","ghost":"MgLEzK","is-dragged-out":"cGgrxe","isDraggedOut":"cGgrxe","dnd-marker-left":"Hd-vmZ","dndMarkerLeft":"Hd-vmZ","dnd-marker-right":"kUY9Uv","dndMarkerRight":"kUY9Uv","cell-tooltip-wrapper":"Ox8-SU","cellTooltipWrapper":"Ox8-SU","cell-tooltip-text":"TYDUv3","cellTooltipText":"TYDUv3","tooltip-caption":"TAWCub","tooltipCaption":"TAWCub","tooltip-info":"Yf8ifB","tooltipInfo":"Yf8ifB"};
|
|
3448
3450
|
|
|
3449
3451
|
class DataTableHeaderCell extends React__namespace.Component {
|
|
3450
3452
|
constructor() {
|
|
@@ -3472,7 +3474,7 @@ class DataTableHeaderCell extends React__namespace.Component {
|
|
|
3472
3474
|
};
|
|
3473
3475
|
this.renderHeaderCheckbox = () => {
|
|
3474
3476
|
if (this.props.selectAll && this.props.isFirstColumn) {
|
|
3475
|
-
return (React__namespace.createElement(Checkbox,
|
|
3477
|
+
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
3478
|
}
|
|
3477
3479
|
};
|
|
3478
3480
|
this.renderFoldAllIcon = () => {
|
|
@@ -3506,9 +3508,8 @@ class DataTableHeaderCell extends React__namespace.Component {
|
|
|
3506
3508
|
return columnsGap ? +columnsGap / 2 : settings.sizes.dataTable.header.row.cell.defaults.resizeMarker;
|
|
3507
3509
|
};
|
|
3508
3510
|
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);
|
|
3511
|
+
const isResizable = this.props.column.allowResizing ?? this.props.allowColumnsResizing;
|
|
3512
|
+
const onClickEvent = !props.isResizing && (!this.props.column.renderFilter ? props.toggleSort : dropdownProps?.onClick);
|
|
3512
3513
|
const computeStyles = {
|
|
3513
3514
|
'--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
3515
|
'--uui-dt-header-cell-padding-start': `${this.getLeftPadding()}px`,
|
|
@@ -3516,10 +3517,13 @@ class DataTableHeaderCell extends React__namespace.Component {
|
|
|
3516
3517
|
'--uui-dt-header-cell-resizing-marker-width': `${this.getResizingMarkerWidth()}px`,
|
|
3517
3518
|
};
|
|
3518
3519
|
return (React__namespace.createElement(uuiComponents.DataTableCellContainer, { column: this.props.column, ref: (ref) => {
|
|
3519
|
-
var _a;
|
|
3520
3520
|
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:
|
|
3521
|
+
dropdownProps?.ref?.(ref);
|
|
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: {
|
|
3523
|
+
role: 'columnheader',
|
|
3524
|
+
'aria-sort': this.props.sortDirection === 'asc' ? 'ascending' : this.props.sortDirection ? 'descending' : 'none',
|
|
3525
|
+
...props.eventHandlers,
|
|
3526
|
+
}, style: computeStyles },
|
|
3523
3527
|
this.renderHeaderCheckbox(),
|
|
3524
3528
|
this.renderFoldAllIcon(),
|
|
3525
3529
|
this.getColumnCaption(),
|
|
@@ -3531,7 +3535,7 @@ class DataTableHeaderCell extends React__namespace.Component {
|
|
|
3531
3535
|
if (this.props.column.renderHeaderCell) {
|
|
3532
3536
|
return this.props.column.renderHeaderCell(this.props);
|
|
3533
3537
|
}
|
|
3534
|
-
return (React__namespace.createElement(uuiComponents.DataTableHeaderCell,
|
|
3538
|
+
return (React__namespace.createElement(uuiComponents.DataTableHeaderCell, { ...this.props, renderCellContent: this.props.column.renderFilter ? this.renderCellWithFilter : this.renderCellContent }));
|
|
3535
3539
|
}
|
|
3536
3540
|
}
|
|
3537
3541
|
|
|
@@ -3550,9 +3554,9 @@ var SvgActionSettingsFill = function SvgActionSettingsFill(props, ref) {
|
|
|
3550
3554
|
};
|
|
3551
3555
|
var ForwardRef$j = /*#__PURE__*/React.forwardRef(SvgActionSettingsFill);
|
|
3552
3556
|
|
|
3553
|
-
var css$u = {"uui-typography":"
|
|
3557
|
+
var css$u = {"uui-typography":"_0H9Mfl","uuiTypography":"_0H9Mfl","hero-header":"_8CcB94","heroHeader":"_8CcB94","promo-header":"_8cj8c1","promoHeader":"_8cj8c1","uui-critical":"x--iY8","uuiCritical":"x--iY8","uui-info":"DvdRbo","uuiInfo":"DvdRbo","uui-success":"fxD6Up","uuiSuccess":"fxD6Up","uui-warning":"dlD9z3","uuiWarning":"dlD9z3","uui-highlight":"Sh0wvV","uuiHighlight":"Sh0wvV","uui-typography-size-12":"_2PALh9","uuiTypographySize12":"_2PALh9","uui-typography-size-14":"LWpsIi","uuiTypographySize14":"LWpsIi","uui-typography-size-16":"Fg2aKP","uuiTypographySize16":"Fg2aKP","root":"xlG0jn"};
|
|
3554
3558
|
|
|
3555
|
-
var css$t = {"uui-typography":"
|
|
3559
|
+
var css$t = {"uui-typography":"_4lrUJF","uuiTypography":"_4lrUJF","hero-header":"efF-Jl","heroHeader":"efF-Jl","promo-header":"_5-Jjvl","promoHeader":"_5-Jjvl","uui-critical":"QNeqBC","uuiCritical":"QNeqBC","uui-info":"Aonphu","uuiInfo":"Aonphu","uui-success":"eYKVzR","uuiSuccess":"eYKVzR","uui-warning":"P1gIoD","uuiWarning":"P1gIoD","uui-highlight":"GgKXqq","uuiHighlight":"GgKXqq","uui-typography-size-12":"yZ6Al1","uuiTypographySize12":"yZ6Al1","uui-typography-size-14":"On9Fo4","uuiTypographySize14":"On9Fo4","uui-typography-size-16":"N99C40","uuiTypographySize16":"N99C40","root":"kOd20z","caption-wrapper":"_8UN4Ok","captionWrapper":"_8UN4Ok","align-center":"vmSpZz","alignCenter":"vmSpZz","caption":"jZuYog","truncate":"_8eTk5w","group-cell-tooltip":"k8sv-r","groupCellTooltip":"k8sv-r","upper-case":"RRjT-j","upperCase":"RRjT-j","group-cell-tooltip-wrapper":"_6kwC-y","groupCellTooltipWrapper":"_6kwC-y","group-cell-tooltip-text":"FXkRVd","groupCellTooltipText":"FXkRVd","tooltip-caption":"R7fiSf","tooltipCaption":"R7fiSf","tooltip-info":"_0QtDpn","tooltipInfo":"_0QtDpn"};
|
|
3556
3560
|
|
|
3557
3561
|
class DataTableHeaderGroupCell extends React__namespace.Component {
|
|
3558
3562
|
constructor() {
|
|
@@ -3591,7 +3595,10 @@ class DataTableHeaderGroupCell extends React__namespace.Component {
|
|
|
3591
3595
|
};
|
|
3592
3596
|
return (React__namespace.createElement(uuiComponents.DataTableCellContainer, { column: this.props.group, ref: (ref) => {
|
|
3593
3597
|
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:
|
|
3598
|
+
}, 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: {
|
|
3599
|
+
role: 'columnheader',
|
|
3600
|
+
...props.eventHandlers,
|
|
3601
|
+
}, style: computeStyles }, this.getColumnCaption()));
|
|
3595
3602
|
};
|
|
3596
3603
|
}
|
|
3597
3604
|
render() {
|
|
@@ -3607,8 +3614,8 @@ class DataTableHeaderGroupCell extends React__namespace.Component {
|
|
|
3607
3614
|
}
|
|
3608
3615
|
|
|
3609
3616
|
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,
|
|
3617
|
+
renderCell: (props) => (React__namespace.createElement(DataTableHeaderCell, { ...props, size: mods.size, textCase: mods.textCase || 'normal', key: props.column.key, columnsGap: mods.columnsGap })),
|
|
3618
|
+
renderGroupCell: (props) => (React__namespace.createElement(DataTableHeaderGroupCell, { ...props, size: mods.size, textCase: mods.textCase || 'normal', key: props.key, columnsGap: mods.columnsGap })),
|
|
3612
3619
|
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
3620
|
}));
|
|
3614
3621
|
|
|
@@ -3617,16 +3624,15 @@ const UUI_FILTERS_PANEL_ADD_BUTTON_BODY = 'uui-filters-panel-add-button-body';
|
|
|
3617
3624
|
const UUI_FILTERS_PANEL_ITEM_BODY = 'uui-filters-panel-item-body';
|
|
3618
3625
|
const UUI_FILTERS_PANEL_ITEM_TOGGLER = 'uui-filters-panel-item-toggler';
|
|
3619
3626
|
|
|
3620
|
-
var css$s = {"uui-typography":"
|
|
3627
|
+
var css$s = {"uui-typography":"HJEpVN","uuiTypography":"HJEpVN","hero-header":"BwhQKL","heroHeader":"BwhQKL","promo-header":"_0nBmPn","promoHeader":"_0nBmPn","uui-critical":"HsG0Ly","uuiCritical":"HsG0Ly","uui-info":"u3Tpna","uuiInfo":"u3Tpna","uui-success":"qVdo-O","uuiSuccess":"qVdo-O","uui-warning":"FfXuSa","uuiWarning":"FfXuSa","uui-highlight":"zK2rdC","uuiHighlight":"zK2rdC","uui-typography-size-12":"lbni6K","uuiTypographySize12":"lbni6K","uui-typography-size-14":"jlBJC-","uuiTypographySize14":"jlBJC-","uui-typography-size-16":"ptkloB","uuiTypographySize16":"ptkloB","root":"ybsbgK","title-wrapper":"bBq1kL","titleWrapper":"bBq1kL","title":"AawIVw","text-wrapper":"RwaX3E","textWrapper":"RwaX3E","selection":"_150n4z","postfix":"GrN49N","selected":"_93zBIG"};
|
|
3621
3628
|
|
|
3622
3629
|
const defaultSize = '36';
|
|
3623
3630
|
const FilterPanelItemToggler = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
3624
3631
|
const togglerPickerOpened = (e) => {
|
|
3625
|
-
var _a;
|
|
3626
3632
|
if (props.isDisabled)
|
|
3627
3633
|
return;
|
|
3628
3634
|
e.preventDefault();
|
|
3629
|
-
|
|
3635
|
+
props.onClick?.();
|
|
3630
3636
|
};
|
|
3631
3637
|
const onKeyDownHandler = (e) => {
|
|
3632
3638
|
if (props.isDisabled)
|
|
@@ -3644,12 +3650,12 @@ const FilterPanelItemToggler = /* @__PURE__ */React__namespace.forwardRef((props
|
|
|
3644
3650
|
const getSelectionText = () => props.selection.map((i, index) => (React__namespace.createElement(React__namespace.Fragment, { key: `${i}${index}` },
|
|
3645
3651
|
React__namespace.createElement(Text, { color: "primary", size: props.size, cx: css$s.selection }, i),
|
|
3646
3652
|
(props.postfix || index !== props.selection.length - 1) && React__namespace.createElement("span", null, ",\u00A0"))));
|
|
3647
|
-
return (React__namespace.createElement(uuiComponents.FlexRow,
|
|
3653
|
+
return (React__namespace.createElement(uuiComponents.FlexRow, { ...props, rawProps: {
|
|
3648
3654
|
style: { maxWidth: `${props.maxWidth ? props.maxWidth + 'px' : 'auto'}` },
|
|
3649
3655
|
role: 'button',
|
|
3650
3656
|
tabIndex: props.isDisabled ? -1 : 0,
|
|
3651
3657
|
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 }
|
|
3658
|
+
}, 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
3659
|
React__namespace.createElement(uuiComponents.FlexRow, { cx: css$s.titleWrapper },
|
|
3654
3660
|
React__namespace.createElement(Text, { size: props.size, cx: css$s.title }, getTitle),
|
|
3655
3661
|
props.selection && (React__namespace.createElement("div", { className: css$s.textWrapper },
|
|
@@ -3659,12 +3665,10 @@ const FilterPanelItemToggler = /* @__PURE__ */React__namespace.forwardRef((props
|
|
|
3659
3665
|
});
|
|
3660
3666
|
|
|
3661
3667
|
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 });
|
|
3668
|
+
function FilterPickerBody({ highlightSearchMatches = true, ...restProps }) {
|
|
3669
|
+
const props = { ...restProps, highlightSearchMatches };
|
|
3666
3670
|
const shouldShowBody = () => props.isOpen;
|
|
3667
|
-
const { view, getName, isSingleSelect, getRows, dataSourceState, getFooterProps, getPickerBodyProps, getListProps, handleDataSourceValueChange, } = uuiComponents.usePickerInput(
|
|
3671
|
+
const { view, getName, isSingleSelect, getRows, dataSourceState, getFooterProps, getPickerBodyProps, getListProps, handleDataSourceValueChange, } = uuiComponents.usePickerInput({ ...props, shouldShowBody });
|
|
3668
3672
|
const prevValue = uuiCore.usePrevious(props.value);
|
|
3669
3673
|
const prevOpened = uuiCore.usePrevious(props.isOpen);
|
|
3670
3674
|
React__namespace.useLayoutEffect(() => {
|
|
@@ -3684,45 +3688,44 @@ function FilterPickerBody(_a) {
|
|
|
3684
3688
|
};
|
|
3685
3689
|
const renderItem = (item, rowProps, dsState) => {
|
|
3686
3690
|
const { flattenSearchResults } = view.getConfig();
|
|
3687
|
-
return (React__namespace.createElement(PickerItem,
|
|
3691
|
+
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
3692
|
};
|
|
3689
3693
|
const onSelect = (row) => {
|
|
3690
|
-
handleDataSourceValueChange((currentDataSourceState) => (
|
|
3694
|
+
handleDataSourceValueChange((currentDataSourceState) => ({ ...currentDataSourceState, search: '', selectedId: row.id }));
|
|
3691
3695
|
};
|
|
3692
3696
|
const renderRow = (rowProps, dsState) => {
|
|
3693
3697
|
if (rowProps.isSelectable && isSingleSelect() && props.editMode !== 'modal') {
|
|
3694
3698
|
rowProps.onSelect = onSelect;
|
|
3695
3699
|
}
|
|
3696
|
-
return props.renderRow ? (props.renderRow(rowProps, dataSourceState)) : (React__namespace.createElement(DataPickerRow,
|
|
3700
|
+
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
3701
|
};
|
|
3698
3702
|
const renderFooter = () => {
|
|
3699
|
-
|
|
3703
|
+
const footerProps = getFooterProps();
|
|
3704
|
+
return props.renderFooter ? props.renderFooter(footerProps) : React__namespace.createElement(DataPickerFooter, { ...footerProps, size: settings.sizes.filtersPanel.pickerInput.body.default });
|
|
3700
3705
|
};
|
|
3701
3706
|
const renderBody = (bodyProps, rows) => {
|
|
3702
3707
|
const renderedDataRows = rows.map((props) => renderRow(props, dataSourceState));
|
|
3703
3708
|
const maxHeight = uuiCore.isMobile() ? document.documentElement.clientHeight : props.maxBodyHeight || pickerHeight;
|
|
3704
3709
|
const maxWidth = uuiCore.isMobile() ? undefined : 360;
|
|
3705
3710
|
return (React__namespace.createElement(React__namespace.Fragment, null,
|
|
3706
|
-
React__namespace.createElement(DataPickerBody,
|
|
3711
|
+
React__namespace.createElement(DataPickerBody, { ...bodyProps, selectionMode: props.selectionMode, rows: renderedDataRows, maxHeight: maxHeight, maxWidth: maxWidth, searchSize: settings.sizes.filtersPanel.pickerInput.body.default, editMode: "dropdown" }),
|
|
3707
3712
|
renderFooter()));
|
|
3708
3713
|
};
|
|
3709
3714
|
const rows = getRows();
|
|
3710
|
-
return renderBody(
|
|
3715
|
+
return renderBody({ ...getPickerBodyProps(rows), ...getListProps(), showSearch: props.showSearch ?? true }, rows);
|
|
3711
3716
|
}
|
|
3712
3717
|
|
|
3713
3718
|
function FilterDatePickerBody(props) {
|
|
3714
|
-
var _a;
|
|
3715
3719
|
const { value } = props;
|
|
3716
3720
|
const context = uuiCore.useUuiContext();
|
|
3717
3721
|
const handleValueChange = (newValue) => {
|
|
3718
|
-
var _a;
|
|
3719
3722
|
props.onValueChange(newValue);
|
|
3720
3723
|
if (props.getValueChangeAnalyticsEvent) {
|
|
3721
3724
|
const event = props.getValueChangeAnalyticsEvent(newValue, value);
|
|
3722
3725
|
context.uuiAnalytics.sendEvent(event);
|
|
3723
3726
|
}
|
|
3724
3727
|
if (newValue) {
|
|
3725
|
-
|
|
3728
|
+
props.onClose?.();
|
|
3726
3729
|
}
|
|
3727
3730
|
};
|
|
3728
3731
|
const handleBodyChange = (newValue) => {
|
|
@@ -3732,7 +3735,7 @@ function FilterDatePickerBody(props) {
|
|
|
3732
3735
|
};
|
|
3733
3736
|
return (React__namespace.default.createElement(React.Fragment, null,
|
|
3734
3737
|
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:
|
|
3738
|
+
React__namespace.default.createElement(DatePickerBody, { filter: props.filter, value: value, onValueChange: handleBodyChange, renderDay: props.renderDay, isHoliday: props.isHoliday, rawProps: props.rawProps?.body })),
|
|
3736
3739
|
React__namespace.default.createElement(FlexCell, { alignSelf: "stretch" },
|
|
3737
3740
|
React__namespace.default.createElement(FlexRow, { padding: "24", vPadding: "12" },
|
|
3738
3741
|
React__namespace.default.createElement(Text, null, value ? uuiDayjs.dayjs(value).format('MMM DD, YYYY') : ''),
|
|
@@ -3747,16 +3750,15 @@ function FilterRangeDatePickerBody(props) {
|
|
|
3747
3750
|
const value = _value || defaultRangeValue; // also handles null in comparison to default value
|
|
3748
3751
|
const context = uuiCore.useUuiContext();
|
|
3749
3752
|
const onOpenChange = (newIsOpen) => {
|
|
3750
|
-
var _a, _b;
|
|
3751
3753
|
{
|
|
3752
|
-
|
|
3754
|
+
props.onClose?.();
|
|
3753
3755
|
}
|
|
3754
|
-
|
|
3756
|
+
props.onOpenChange?.(newIsOpen);
|
|
3755
3757
|
};
|
|
3756
3758
|
const [inFocus, setInFocus] = React.useState('from');
|
|
3757
3759
|
const onValueChange = (newValue) => {
|
|
3758
|
-
const fromChanged =
|
|
3759
|
-
const toChanged =
|
|
3760
|
+
const fromChanged = value?.from !== newValue?.from;
|
|
3761
|
+
const toChanged = value?.to !== newValue?.to;
|
|
3760
3762
|
if (fromChanged || toChanged) {
|
|
3761
3763
|
props.onValueChange(newValue);
|
|
3762
3764
|
if (props.getValueChangeAnalyticsEvent) {
|
|
@@ -3766,8 +3768,7 @@ function FilterRangeDatePickerBody(props) {
|
|
|
3766
3768
|
}
|
|
3767
3769
|
};
|
|
3768
3770
|
const onBodyValueChange = (newValue) => {
|
|
3769
|
-
|
|
3770
|
-
setInFocus((_a = newValue.inFocus) !== null && _a !== void 0 ? _a : inFocus);
|
|
3771
|
+
setInFocus(newValue.inFocus ?? inFocus);
|
|
3771
3772
|
onValueChange(newValue.selectedDate);
|
|
3772
3773
|
const toChanged = value.to !== newValue.selectedDate.to;
|
|
3773
3774
|
const closeBody = newValue.selectedDate.from && newValue.selectedDate.to
|
|
@@ -3795,30 +3796,28 @@ function FilterRangeDatePickerBody(props) {
|
|
|
3795
3796
|
React__namespace.default.createElement(LinkButton, { isDisabled: !value.from && !value.to, caption: i18n.pickerModal.clearAllButton, onClick: () => onValueChange(defaultRangeValue) })))));
|
|
3796
3797
|
}
|
|
3797
3798
|
|
|
3798
|
-
var css$r = {"container":"
|
|
3799
|
+
var css$r = {"container":"c3JCJ4"};
|
|
3799
3800
|
|
|
3800
3801
|
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';
|
|
3802
|
+
const isInRangePredicate = props?.selectedPredicate === 'inRange' || props?.selectedPredicate === 'notInRange';
|
|
3803
3803
|
const isWrongRange = (from, to) => {
|
|
3804
3804
|
if (!to && to !== 0)
|
|
3805
3805
|
return false;
|
|
3806
3806
|
return from > to;
|
|
3807
3807
|
};
|
|
3808
3808
|
const rangeValueHandler = (type) => (val) => {
|
|
3809
|
-
var _a, _b;
|
|
3810
3809
|
const value = props.value;
|
|
3811
3810
|
switch (type) {
|
|
3812
3811
|
case 'from': {
|
|
3813
3812
|
props.onValueChange({
|
|
3814
3813
|
from: val,
|
|
3815
|
-
to:
|
|
3814
|
+
to: value?.to ?? null,
|
|
3816
3815
|
});
|
|
3817
3816
|
break;
|
|
3818
3817
|
}
|
|
3819
3818
|
case 'to': {
|
|
3820
3819
|
props.onValueChange({
|
|
3821
|
-
from:
|
|
3820
|
+
from: value?.from ?? null,
|
|
3822
3821
|
to: val,
|
|
3823
3822
|
});
|
|
3824
3823
|
break;
|
|
@@ -3849,9 +3848,9 @@ function FilterNumericBody(props) {
|
|
|
3849
3848
|
return (React__namespace.default.createElement("div", null,
|
|
3850
3849
|
React__namespace.default.createElement(FlexRow, { padding: "12", alignItems: "center", spacing: "12", borderBottom: true, cx: css$r.container },
|
|
3851
3850
|
React__namespace.default.createElement(FlexCell, { width: "100%" },
|
|
3852
|
-
React__namespace.default.createElement(NumericInput, { value:
|
|
3851
|
+
React__namespace.default.createElement(NumericInput, { value: value?.from ?? null, onValueChange: rangeValueHandler('from'), size: "36", placeholder: "Min", formatOptions: { maximumFractionDigits: 2 } })),
|
|
3853
3852
|
React__namespace.default.createElement(FlexCell, { width: "100%" },
|
|
3854
|
-
React__namespace.default.createElement(NumericInput, { value:
|
|
3853
|
+
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
3854
|
renderFooter()));
|
|
3856
3855
|
}
|
|
3857
3856
|
return (React__namespace.default.createElement("div", null,
|
|
@@ -3864,15 +3863,15 @@ function FilterNumericBody(props) {
|
|
|
3864
3863
|
function FilterItemBody(props) {
|
|
3865
3864
|
switch (props.type) {
|
|
3866
3865
|
case 'singlePicker':
|
|
3867
|
-
return React__namespace.default.createElement(FilterPickerBody,
|
|
3866
|
+
return React__namespace.default.createElement(FilterPickerBody, { ...props, selectionMode: "single", valueType: "id" });
|
|
3868
3867
|
case 'numeric':
|
|
3869
|
-
return React__namespace.default.createElement(FilterNumericBody,
|
|
3868
|
+
return React__namespace.default.createElement(FilterNumericBody, { ...props });
|
|
3870
3869
|
case 'multiPicker':
|
|
3871
|
-
return React__namespace.default.createElement(FilterPickerBody,
|
|
3870
|
+
return React__namespace.default.createElement(FilterPickerBody, { ...props, selectionMode: "multi", valueType: "id" });
|
|
3872
3871
|
case 'datePicker':
|
|
3873
|
-
return React__namespace.default.createElement(FilterDatePickerBody,
|
|
3872
|
+
return React__namespace.default.createElement(FilterDatePickerBody, { ...props, format: props.format || 'DD/MM/YYYY' });
|
|
3874
3873
|
case 'rangeDatePicker':
|
|
3875
|
-
return React__namespace.default.createElement(FilterRangeDatePickerBody,
|
|
3874
|
+
return React__namespace.default.createElement(FilterRangeDatePickerBody, { ...props, format: props.format || 'DD/MM/YYYY', value: props.value || { from: null, to: null } });
|
|
3876
3875
|
case 'custom':
|
|
3877
3876
|
return props.render(props);
|
|
3878
3877
|
}
|
|
@@ -3893,7 +3892,7 @@ var SvgActionDeleteOutline = function SvgActionDeleteOutline(props, ref) {
|
|
|
3893
3892
|
};
|
|
3894
3893
|
var ForwardRef$i = /*#__PURE__*/React.forwardRef(SvgActionDeleteOutline);
|
|
3895
3894
|
|
|
3896
|
-
var css$q = {"uui-typography":"
|
|
3895
|
+
var css$q = {"uui-typography":"qvu7Ns","uuiTypography":"qvu7Ns","hero-header":"ctH1L1","heroHeader":"ctH1L1","promo-header":"DquA5-","promoHeader":"DquA5-","uui-critical":"LkAlyc","uuiCritical":"LkAlyc","uui-info":"-I6QlJ","uuiInfo":"-I6QlJ","uui-success":"Lsv0K4","uuiSuccess":"Lsv0K4","uui-warning":"p4LhDx","uuiWarning":"p4LhDx","uui-highlight":"W9bDDe","uuiHighlight":"W9bDDe","uui-typography-size-12":"Q39pas","uuiTypographySize12":"Q39pas","uui-typography-size-14":"e8oAeF","uuiTypographySize14":"e8oAeF","uui-typography-size-16":"S2Sdma","uuiTypographySize16":"S2Sdma","header":"Arg8Tu","removeButton":"bOhBEq","with-search":"pp7nr1","withSearch":"pp7nr1"};
|
|
3897
3896
|
|
|
3898
3897
|
function useView(props, value) {
|
|
3899
3898
|
const forceUpdate = uuiCore.useForceUpdate();
|
|
@@ -3908,11 +3907,11 @@ function useView(props, value) {
|
|
|
3908
3907
|
dataSourceState.checked = value;
|
|
3909
3908
|
}
|
|
3910
3909
|
}
|
|
3911
|
-
return useViewFn
|
|
3910
|
+
return useViewFn?.(dataSourceState, forceUpdate, { showSelectedOnly: true });
|
|
3912
3911
|
}
|
|
3913
3912
|
function FiltersToolbarItemImpl(props) {
|
|
3914
3913
|
const { maxCount = 2 } = props;
|
|
3915
|
-
const isPickersType =
|
|
3914
|
+
const isPickersType = props?.type === 'multiPicker' || props?.type === 'singlePicker';
|
|
3916
3915
|
const isMobileScreen = uuiCore.isMobile();
|
|
3917
3916
|
const popperModifiers = React.useMemo(() => {
|
|
3918
3917
|
const modifiers = [
|
|
@@ -3935,11 +3934,10 @@ function FiltersToolbarItemImpl(props) {
|
|
|
3935
3934
|
return modifiers;
|
|
3936
3935
|
}, [isPickersType]);
|
|
3937
3936
|
const getDefaultPredicate = () => {
|
|
3938
|
-
var _a, _b;
|
|
3939
3937
|
if (!props.predicates) {
|
|
3940
3938
|
return null;
|
|
3941
3939
|
}
|
|
3942
|
-
return Object.keys(props.value || {})[0] ||
|
|
3940
|
+
return Object.keys(props.value || {})[0] || props.predicates.find((i) => i.isDefault)?.predicate || props.predicates?.[0].predicate;
|
|
3943
3941
|
};
|
|
3944
3942
|
const [isOpen, isOpenChange] = React.useState(props.autoFocus);
|
|
3945
3943
|
const [predicate, setPredicate] = React.useState(getDefaultPredicate());
|
|
@@ -3981,23 +3979,19 @@ function FiltersToolbarItemImpl(props) {
|
|
|
3981
3979
|
}
|
|
3982
3980
|
setPredicate(val);
|
|
3983
3981
|
};
|
|
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
|
-
};
|
|
3982
|
+
const renderHeader = (hideTitle) => (React__namespace.default.createElement("div", { className: cx__default.default(css$q.header, isPickersType && (props.showSearch ?? css$q.withSearch)) },
|
|
3983
|
+
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))),
|
|
3984
|
+
!props?.isAlwaysVisible && (React__namespace.default.createElement(LinkButton, { cx: css$q.removeButton, caption: i18n.filterToolbar.datePicker.removeCaption, onClick: removeOnclickHandler, size: "24", icon: ForwardRef$i }))));
|
|
3990
3985
|
const renderBody = (dropdownProps) => {
|
|
3991
3986
|
const hideHeaderTitle = isPickersType && isMobileScreen;
|
|
3992
|
-
return isPickersType ? (React__namespace.default.createElement(PickerBodyMobileView,
|
|
3987
|
+
return isPickersType ? (React__namespace.default.createElement(PickerBodyMobileView, { ...dropdownProps, cx: UUI_FILTERS_PANEL_ITEM_BODY, title: props.title, width: 360, onClose: () => isOpenChange(false) },
|
|
3993
3988
|
renderHeader(hideHeaderTitle),
|
|
3994
|
-
React__namespace.default.createElement(FilterItemBody,
|
|
3989
|
+
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
3990
|
renderHeader(hideHeaderTitle),
|
|
3996
|
-
React__namespace.default.createElement(FilterItemBody,
|
|
3991
|
+
React__namespace.default.createElement(FilterItemBody, { ...props, ...dropdownProps, selectedPredicate: predicate, value: getValue(), onValueChange: onValueChange })));
|
|
3997
3992
|
};
|
|
3998
3993
|
const getValue = () => {
|
|
3999
|
-
|
|
4000
|
-
return predicate ? (_a = props.value) === null || _a === void 0 ? void 0 : _a[predicate] : props.value;
|
|
3994
|
+
return predicate ? props.value?.[predicate] : props.value;
|
|
4001
3995
|
};
|
|
4002
3996
|
const getPickerItemName = (item, config) => {
|
|
4003
3997
|
if (item.isLoading) {
|
|
@@ -4016,13 +4010,13 @@ function FiltersToolbarItemImpl(props) {
|
|
|
4016
4010
|
case 'multiPicker': {
|
|
4017
4011
|
let isLoading = false;
|
|
4018
4012
|
const selection = currentValue
|
|
4019
|
-
? currentValue
|
|
4013
|
+
? currentValue?.slice(0, maxCount).map((i) => {
|
|
4020
4014
|
const item = view.getById(i, null);
|
|
4021
|
-
isLoading = item
|
|
4015
|
+
isLoading = item?.isLoading;
|
|
4022
4016
|
return getPickerItemName(item, props);
|
|
4023
4017
|
})
|
|
4024
4018
|
: currentValue;
|
|
4025
|
-
const postfix = (!isLoading &&
|
|
4019
|
+
const postfix = (!isLoading && currentValue?.length > maxCount) ? ` +${(currentValue.length - maxCount).toString()} ${i18n.filterToolbar.pickerInput.itemsPlaceholder}` : null;
|
|
4026
4020
|
return { selection, postfix };
|
|
4027
4021
|
}
|
|
4028
4022
|
case 'numeric': {
|
|
@@ -4032,7 +4026,7 @@ function FiltersToolbarItemImpl(props) {
|
|
|
4032
4026
|
return { selection: undefined };
|
|
4033
4027
|
}
|
|
4034
4028
|
const selection = isRangePredicate
|
|
4035
|
-
? `${!
|
|
4029
|
+
? `${!currentValue?.from && currentValue?.from !== 0 ? 'Min' : decimalFormat(currentValue?.from)} - ${!currentValue?.to && currentValue?.to !== 0 ? 'Max' : decimalFormat(currentValue?.to)}`
|
|
4036
4030
|
: `${!currentValue && currentValue !== 0 ? 'ALL' : decimalFormat(currentValue)}`;
|
|
4037
4031
|
return { selection: [selection] };
|
|
4038
4032
|
}
|
|
@@ -4051,11 +4045,11 @@ function FiltersToolbarItemImpl(props) {
|
|
|
4051
4045
|
if (!currentValue || (!currentValue.from && !currentValue.to)) {
|
|
4052
4046
|
return { selection: undefined };
|
|
4053
4047
|
}
|
|
4054
|
-
const currentValueFrom =
|
|
4055
|
-
? uuiDayjs.dayjs(currentValue
|
|
4048
|
+
const currentValueFrom = currentValue?.from
|
|
4049
|
+
? uuiDayjs.dayjs(currentValue?.from).format(props.format || defaultFormat)
|
|
4056
4050
|
: i18n.filterToolbar.rangeDatePicker.emptyPlaceholderFrom;
|
|
4057
|
-
const currentValueTo =
|
|
4058
|
-
? uuiDayjs.dayjs(currentValue
|
|
4051
|
+
const currentValueTo = currentValue?.to
|
|
4052
|
+
? uuiDayjs.dayjs(currentValue?.to).format(props.format || defaultFormat)
|
|
4059
4053
|
: i18n.filterToolbar.rangeDatePicker.emptyPlaceholderTo;
|
|
4060
4054
|
const selection = `${currentValueFrom} - ${currentValueTo}`;
|
|
4061
4055
|
return { selection: [selection] };
|
|
@@ -4071,7 +4065,7 @@ function FiltersToolbarItemImpl(props) {
|
|
|
4071
4065
|
return props.togglerWidth;
|
|
4072
4066
|
return props.type === 'datePicker' || props.type === 'rangeDatePicker' ? null : 300;
|
|
4073
4067
|
};
|
|
4074
|
-
const renderTarget = (dropdownProps) => (React__namespace.default.createElement(FilterPanelItemToggler,
|
|
4068
|
+
const renderTarget = (dropdownProps) => (React__namespace.default.createElement(FilterPanelItemToggler, { ...dropdownProps, ...getTogglerValue(), title: props.title, predicateName: props.value ? predicateName : null, maxWidth: getTogglerWidth(), size: props.size }));
|
|
4075
4069
|
return (React__namespace.default.createElement(uuiComponents.Dropdown, { renderTarget: renderTarget, renderBody: renderBody, closeBodyOnTogglerHidden: !uuiCore.isMobile(), value: isOpen, onValueChange: isOpenChange, modifiers: popperModifiers }));
|
|
4076
4070
|
}
|
|
4077
4071
|
const FiltersPanelItem = /* @__PURE__ */React__namespace.default.memo(FiltersToolbarItemImpl);
|
|
@@ -4138,15 +4132,13 @@ function FiltersToolbarImpl(props) {
|
|
|
4138
4132
|
getId: (item) => item.field,
|
|
4139
4133
|
}, []);
|
|
4140
4134
|
const onFiltersChange = (updatedFilters) => {
|
|
4141
|
-
var _a, _b;
|
|
4142
4135
|
const newConfig = {};
|
|
4143
4136
|
const newFilter = {};
|
|
4144
|
-
const filtersConfig = Object.values(
|
|
4137
|
+
const filtersConfig = Object.values(tableState.filtersConfig ?? {});
|
|
4145
4138
|
const sortedOrders = uuiCore.orderBy(filtersConfig, ({ order }) => order);
|
|
4146
|
-
let lastItemOrder =
|
|
4139
|
+
let lastItemOrder = sortedOrders?.length ? sortedOrders[sortedOrders.length - 1]?.order : null;
|
|
4147
4140
|
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;
|
|
4141
|
+
let order = tableState?.filtersConfig?.[filter?.field]?.order;
|
|
4150
4142
|
if (!order) {
|
|
4151
4143
|
order = uuiCore.getOrderBetween(lastItemOrder, null);
|
|
4152
4144
|
lastItemOrder = order;
|
|
@@ -4157,28 +4149,39 @@ function FiltersToolbarImpl(props) {
|
|
|
4157
4149
|
newFilter[filter.field] = tableState.filter[filter.field];
|
|
4158
4150
|
}
|
|
4159
4151
|
});
|
|
4160
|
-
setTableState(
|
|
4152
|
+
setTableState({
|
|
4153
|
+
...tableState,
|
|
4154
|
+
filtersConfig: newConfig,
|
|
4155
|
+
filter: newFilter,
|
|
4156
|
+
});
|
|
4161
4157
|
};
|
|
4162
4158
|
const handleFilterChange = (newFilter) => {
|
|
4163
|
-
const filter = normalizeFilterWithPredicates(
|
|
4164
|
-
setTableState(
|
|
4159
|
+
const filter = normalizeFilterWithPredicates({ ...tableState.filter, ...newFilter });
|
|
4160
|
+
setTableState({
|
|
4161
|
+
...tableState,
|
|
4162
|
+
filter: filter,
|
|
4163
|
+
});
|
|
4165
4164
|
};
|
|
4166
4165
|
const removeFilter = (field) => {
|
|
4167
|
-
const filterConfig =
|
|
4166
|
+
const filterConfig = { ...tableState.filtersConfig };
|
|
4168
4167
|
delete filterConfig[field];
|
|
4169
|
-
const filter =
|
|
4168
|
+
const filter = { ...tableState.filter };
|
|
4170
4169
|
delete filter[field];
|
|
4171
|
-
const newTableState =
|
|
4172
|
-
|
|
4170
|
+
const newTableState = {
|
|
4171
|
+
...tableState,
|
|
4172
|
+
filtersConfig: filterConfig,
|
|
4173
|
+
filter: filter,
|
|
4174
|
+
};
|
|
4175
|
+
setTableState({ ...newTableState });
|
|
4173
4176
|
};
|
|
4174
4177
|
const selectedFilters = React.useMemo(() => {
|
|
4175
4178
|
const filtersConfig = tableState.filtersConfig || {};
|
|
4176
4179
|
return filters.filter((filter) => {
|
|
4177
|
-
return filter.isAlwaysVisible || (filtersConfig[filter
|
|
4180
|
+
return filter.isAlwaysVisible || (filtersConfig[filter?.field] ? filtersConfig[filter?.field].isVisible : false);
|
|
4178
4181
|
});
|
|
4179
4182
|
}, [tableState.filtersConfig, filters]);
|
|
4180
4183
|
const sortedActiveFilters = React.useMemo(() => {
|
|
4181
|
-
return uuiCore.orderBy(selectedFilters, (f) =>
|
|
4184
|
+
return uuiCore.orderBy(selectedFilters, (f) => tableState.filtersConfig?.[f.field]?.order);
|
|
4182
4185
|
}, [filters, tableState.filtersConfig]);
|
|
4183
4186
|
const renderAddFilterToggler = React.useCallback((togglerProps) => {
|
|
4184
4187
|
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 +4195,25 @@ function FiltersToolbarImpl(props) {
|
|
|
4192
4195
|
}), []);
|
|
4193
4196
|
const isAllFiltersAlwaysVisible = props.filters.every((i) => i.isAlwaysVisible);
|
|
4194
4197
|
React.useEffect(() => {
|
|
4195
|
-
var _a, _b;
|
|
4196
4198
|
if (sortedActiveFilters.length && newFilterId && sortedActiveFilters.find(({ field }) => field === newFilterId)) {
|
|
4197
4199
|
// PickerInput should be closed after filterId update and opening the filter's body.
|
|
4198
4200
|
// Otherwise, the focus will be not set in the search input of the filter's body.
|
|
4199
|
-
|
|
4201
|
+
pickerInputRef.current?.closePickerBody?.();
|
|
4200
4202
|
// Reset new filter id, after first render with autofocus
|
|
4201
4203
|
setNewFilterId(null);
|
|
4202
4204
|
}
|
|
4203
4205
|
}, [newFilterId, sortedActiveFilters]);
|
|
4204
4206
|
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) => {
|
|
4207
|
+
sortedActiveFilters.map((f) => (React__namespace.default.createElement(uuiComponents.FlexCell, { width: "auto", key: f.field },
|
|
4208
|
+
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 })))),
|
|
4209
|
+
!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
4210
|
props.onCheck && props.onCheck(row);
|
|
4212
4211
|
setNewFilterId(row.value.field);
|
|
4213
|
-
}, renderItem: (item, rowProps) => React__namespace.default.createElement(PickerItem,
|
|
4212
|
+
}, 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
4213
|
}
|
|
4215
4214
|
const FiltersPanel = /* @__PURE__ */React__namespace.default.memo(FiltersToolbarImpl);
|
|
4216
4215
|
|
|
4217
|
-
var css$p = {"divider":"
|
|
4216
|
+
var css$p = {"divider":"_7iuoU9","dropdownDeleteIcon":"J817q0","presetsWrapper":"v-gzst","addPresetContainer":"tcsdlr","dropContainer":"ZCf6qC"};
|
|
4218
4217
|
|
|
4219
4218
|
var _path$g;
|
|
4220
4219
|
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 +4326,31 @@ var SvgContentLinkOutline = function SvgContentLinkOutline(props, ref) {
|
|
|
4327
4326
|
};
|
|
4328
4327
|
var ForwardRef$a = /*#__PURE__*/React.forwardRef(SvgContentLinkOutline);
|
|
4329
4328
|
|
|
4330
|
-
var css$o = {"delete-button":"
|
|
4329
|
+
var css$o = {"delete-button":"Y9lBdW","deleteButton":"Y9lBdW","tab-button":"rm6KAH","tabButton":"rm6KAH","targetOpen":"gzF18H"};
|
|
4331
4330
|
|
|
4332
4331
|
function PresetActionsDropdown(props) {
|
|
4333
4332
|
const { uuiNotifications } = uuiCore.useUuiContext();
|
|
4334
|
-
const copyUrlToClipboard = React.useCallback(() =>
|
|
4335
|
-
|
|
4333
|
+
const copyUrlToClipboard = React.useCallback(async () => {
|
|
4334
|
+
await navigator.clipboard.writeText(props.getPresetLink(props.preset));
|
|
4336
4335
|
successNotificationHandler('Link copied!');
|
|
4337
|
-
}
|
|
4338
|
-
const saveInCurrent = React.useCallback((preset) =>
|
|
4339
|
-
const newPreset =
|
|
4340
|
-
|
|
4336
|
+
}, []);
|
|
4337
|
+
const saveInCurrent = React.useCallback(async (preset) => {
|
|
4338
|
+
const newPreset = {
|
|
4339
|
+
...preset,
|
|
4340
|
+
filter: props.tableState.filter,
|
|
4341
|
+
sorting: props.tableState.sorting,
|
|
4342
|
+
columnsConfig: props.tableState.columnsConfig,
|
|
4343
|
+
filtersConfig: props.tableState.filtersConfig,
|
|
4344
|
+
viewState: props.tableState.viewState,
|
|
4345
|
+
};
|
|
4346
|
+
await props.updatePreset(newPreset);
|
|
4341
4347
|
successNotificationHandler('Changes saved!');
|
|
4342
|
-
}
|
|
4348
|
+
}, [
|
|
4343
4349
|
props.tableState.filter, props.tableState.columnsConfig, props.tableState.filtersConfig,
|
|
4344
4350
|
]);
|
|
4345
4351
|
const successNotificationHandler = React.useCallback((text) => {
|
|
4346
4352
|
uuiNotifications
|
|
4347
|
-
.show((props) => (React__namespace.default.createElement(SuccessNotification,
|
|
4353
|
+
.show((props) => (React__namespace.default.createElement(SuccessNotification, { ...props },
|
|
4348
4354
|
React__namespace.default.createElement(Text, { size: "36", fontSize: "14" }, text))), { duration: 3 })
|
|
4349
4355
|
.catch(() => null);
|
|
4350
4356
|
}, []);
|
|
@@ -4357,16 +4363,16 @@ function PresetActionsDropdown(props) {
|
|
|
4357
4363
|
const duplicateHandler = React.useCallback(() => {
|
|
4358
4364
|
props.duplicatePreset(props.preset);
|
|
4359
4365
|
}, [props.preset]);
|
|
4360
|
-
const deleteHandler = React.useCallback(() =>
|
|
4361
|
-
|
|
4362
|
-
}
|
|
4366
|
+
const deleteHandler = React.useCallback(async () => {
|
|
4367
|
+
await props.deletePreset(props.preset);
|
|
4368
|
+
}, [
|
|
4363
4369
|
props.activePresetId, props.deletePreset, props.preset,
|
|
4364
4370
|
]);
|
|
4365
4371
|
const renderBody = (dropdownProps) => {
|
|
4366
4372
|
const isReadonlyPreset = props.preset.isReadonly;
|
|
4367
4373
|
const isPresetChanged = props.activePresetId === props.preset.id && props.hasPresetChanged(props.preset);
|
|
4368
4374
|
const isRenameAvailable = props.preset.id === props.activePresetId && !isReadonlyPreset;
|
|
4369
|
-
return (React__namespace.default.createElement(DropdownMenuBody,
|
|
4375
|
+
return (React__namespace.default.createElement(DropdownMenuBody, { ...dropdownProps },
|
|
4370
4376
|
isPresetChanged && (React__namespace.default.createElement(React__namespace.default.Fragment, null,
|
|
4371
4377
|
!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
4378
|
React__namespace.default.createElement(DropdownMenuButton, { key: `${props.preset.id}-save-as-new`, icon: ForwardRef$e, caption: "Save as new",
|
|
@@ -4382,12 +4388,12 @@ function PresetActionsDropdown(props) {
|
|
|
4382
4388
|
React__namespace.default.createElement(DropdownMenuButton, { icon: ForwardRef$i, caption: "Delete", cx: css$o.deleteButton, onClick: deleteHandler })))));
|
|
4383
4389
|
};
|
|
4384
4390
|
const renderTarget = React.useCallback((dropdownProps) => {
|
|
4385
|
-
return (React__namespace.default.createElement(IconButton,
|
|
4391
|
+
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
4392
|
}, []);
|
|
4387
4393
|
return (React__namespace.default.createElement(Dropdown, { renderBody: renderBody, renderTarget: renderTarget, placement: "bottom-end", modifiers: [{ name: 'offset', options: { offset: [0, 22] } }] }));
|
|
4388
4394
|
}
|
|
4389
4395
|
|
|
4390
|
-
var css$n = {"preset-input-cell":"
|
|
4396
|
+
var css$n = {"preset-input-cell":"_4ZmOXl","presetInputCell":"_4ZmOXl","preset-input":"TBFX5G","presetInput":"TBFX5G"};
|
|
4391
4397
|
|
|
4392
4398
|
const UUI_PRESETS_PANEL_ADD_BUTTON = 'uui-presets-panel-add-button';
|
|
4393
4399
|
const UUI_PRESETS_PANEL_MORE_BUTTON = 'uui-presets-panel-more-button';
|
|
@@ -4395,21 +4401,20 @@ const UUI_PRESETS_PANEL_INPUT = 'uui-presets-panel-input';
|
|
|
4395
4401
|
const UUI_PRESETS_PANEL_PRESET = 'uui-presets-panel-preset';
|
|
4396
4402
|
|
|
4397
4403
|
function PresetInput(props) {
|
|
4398
|
-
|
|
4399
|
-
const [presetCaption, setPresetCaption] = React.useState(((_a = props.preset) === null || _a === void 0 ? void 0 : _a.name) || '');
|
|
4404
|
+
const [presetCaption, setPresetCaption] = React.useState(props.preset?.name || '');
|
|
4400
4405
|
const [readonly, setReadonly] = React.useState(false);
|
|
4401
4406
|
const cancelActionHandler = React.useCallback(() => {
|
|
4402
4407
|
setPresetCaption('');
|
|
4403
4408
|
props.onCancel();
|
|
4404
4409
|
}, [props.onCancel]);
|
|
4405
|
-
const acceptActionHandler = React.useCallback(() =>
|
|
4410
|
+
const acceptActionHandler = React.useCallback(async () => {
|
|
4406
4411
|
setReadonly(() => true);
|
|
4407
4412
|
if (presetCaption) {
|
|
4408
|
-
|
|
4413
|
+
await props.onSuccess(presetCaption);
|
|
4409
4414
|
}
|
|
4410
4415
|
props.onCancel();
|
|
4411
4416
|
setReadonly(() => false);
|
|
4412
|
-
}
|
|
4417
|
+
}, [presetCaption]);
|
|
4413
4418
|
const newPresetOnBlurHandler = React.useCallback(() => {
|
|
4414
4419
|
if (presetCaption.length) {
|
|
4415
4420
|
return;
|
|
@@ -4420,7 +4425,7 @@ function PresetInput(props) {
|
|
|
4420
4425
|
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
4426
|
}
|
|
4422
4427
|
|
|
4423
|
-
var css$m = {"preset":"
|
|
4428
|
+
var css$m = {"preset":"MiMUsH","activePreset":"Pcg6QT"};
|
|
4424
4429
|
|
|
4425
4430
|
function Preset(props) {
|
|
4426
4431
|
const [isRenamePreset, setIsRenamePreset] = React.useState(false);
|
|
@@ -4434,11 +4439,14 @@ function Preset(props) {
|
|
|
4434
4439
|
}
|
|
4435
4440
|
}, []);
|
|
4436
4441
|
const handlePresetRename = React.useCallback((name) => {
|
|
4437
|
-
const newPreset =
|
|
4442
|
+
const newPreset = {
|
|
4443
|
+
...props.preset,
|
|
4444
|
+
name: name,
|
|
4445
|
+
};
|
|
4438
4446
|
return props.updatePreset(newPreset);
|
|
4439
4447
|
}, [props.preset]);
|
|
4440
4448
|
const isPresetActive = props.activePresetId === props.preset.id;
|
|
4441
|
-
const PresetActionsDropdownComponent = React.useCallback(() => React__namespace.default.createElement(PresetActionsDropdown,
|
|
4449
|
+
const PresetActionsDropdownComponent = React.useCallback(() => React__namespace.default.createElement(PresetActionsDropdown, { renamePreset: setPresetForRename, ...props }), [props.preset, props.tableState, props.activePresetId]);
|
|
4442
4450
|
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
4451
|
}
|
|
4444
4452
|
|
|
@@ -4467,9 +4475,9 @@ function PresetsPanel(props) {
|
|
|
4467
4475
|
const cancelAddingPreset = React.useCallback(() => {
|
|
4468
4476
|
setIsAddingPreset(false);
|
|
4469
4477
|
}, []);
|
|
4470
|
-
const presetApi =
|
|
4478
|
+
const { presets, ...presetApi } = props;
|
|
4471
4479
|
const renderPreset = (preset) => {
|
|
4472
|
-
return React__namespace.default.createElement(Preset,
|
|
4480
|
+
return React__namespace.default.createElement(Preset, { key: preset.id, preset: preset, addPreset: setAddingPreset, ...presetApi });
|
|
4473
4481
|
};
|
|
4474
4482
|
const renderAddPresetButton = React.useCallback(() => {
|
|
4475
4483
|
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 +4488,8 @@ function PresetsPanel(props) {
|
|
|
4480
4488
|
const renderMoreButtonDropdown = (item, hiddenItems) => {
|
|
4481
4489
|
return (React__namespace.default.createElement(Dropdown, { key: "more", renderTarget: (props) => (React__namespace.default.createElement(FlexRow, null,
|
|
4482
4490
|
React__namespace.default.createElement("div", { className: css$p.divider }),
|
|
4483
|
-
React__namespace.default.createElement(Button,
|
|
4484
|
-
React__namespace.default.createElement(
|
|
4491
|
+
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 },
|
|
4492
|
+
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
4493
|
};
|
|
4486
4494
|
const getPresetPriority = (preset, index) => {
|
|
4487
4495
|
return preset.id === props.activePresetId ? 100499 : 1000 - index;
|
|
@@ -4516,18 +4524,21 @@ const defaultPredicates = {
|
|
|
4516
4524
|
|
|
4517
4525
|
const useColumnsWithFilters = (initialColumns, filters) => {
|
|
4518
4526
|
const makeFilterRenderCallback = React.useCallback((key) => function (filterLens, dropdownProps) {
|
|
4519
|
-
const filter = filters
|
|
4527
|
+
const filter = filters?.find((f) => f.columnKey === key);
|
|
4520
4528
|
if (!filter)
|
|
4521
4529
|
return null;
|
|
4522
4530
|
const props = filterLens.prop(filter.field).toProps();
|
|
4523
|
-
return React__namespace.default.createElement(FilterItemBody,
|
|
4531
|
+
return React__namespace.default.createElement(FilterItemBody, { ...props, ...filter, ...dropdownProps });
|
|
4524
4532
|
}, [filters]);
|
|
4525
4533
|
const columns = React.useMemo(() => {
|
|
4526
4534
|
if (filters) {
|
|
4527
4535
|
const filterKeys = filters.map((f) => f.columnKey);
|
|
4528
4536
|
const newColumns = (initialColumns.map((column) => {
|
|
4529
4537
|
if (filterKeys.includes(column.key)) {
|
|
4530
|
-
return
|
|
4538
|
+
return {
|
|
4539
|
+
...column,
|
|
4540
|
+
renderFilter: makeFilterRenderCallback(column.key),
|
|
4541
|
+
};
|
|
4531
4542
|
}
|
|
4532
4543
|
else {
|
|
4533
4544
|
return column;
|
|
@@ -4595,7 +4606,7 @@ var SvgTableGroupColumnRightFill = function SvgTableGroupColumnRightFill(props,
|
|
|
4595
4606
|
};
|
|
4596
4607
|
var ForwardRef$6 = /*#__PURE__*/React.forwardRef(SvgTableGroupColumnRightFill);
|
|
4597
4608
|
|
|
4598
|
-
var css$l = {"unpin-icon":"
|
|
4609
|
+
var css$l = {"unpin-icon":"LDl5-y","unpinIcon":"LDl5-y","pin-toggler-icon":"DGjIx-","pinTogglerIcon":"DGjIx-"};
|
|
4599
4610
|
|
|
4600
4611
|
function PinIconButton(props) {
|
|
4601
4612
|
const i18nLocal = i18n.tables.columnsConfigurationModal;
|
|
@@ -4654,7 +4665,7 @@ var SvgActionDragIndicator18 = function SvgActionDragIndicator18(props, ref) {
|
|
|
4654
4665
|
};
|
|
4655
4666
|
var ForwardRef$5 = /*#__PURE__*/React.forwardRef(SvgActionDragIndicator18);
|
|
4656
4667
|
|
|
4657
|
-
var css$k = {"uui-typography":"
|
|
4668
|
+
var css$k = {"uui-typography":"U04m0F","uuiTypography":"U04m0F","hero-header":"sB2zAD","heroHeader":"sB2zAD","promo-header":"gwQmVC","promoHeader":"gwQmVC","uui-critical":"dLxwal","uuiCritical":"dLxwal","uui-info":"_8jTknB","uuiInfo":"_8jTknB","uui-success":"o66GbS","uuiSuccess":"o66GbS","uui-warning":"V0maZO","uuiWarning":"V0maZO","uui-highlight":"YVTNhW","uuiHighlight":"YVTNhW","uui-typography-size-12":"_6Q59SA","uuiTypographySize12":"_6Q59SA","uui-typography-size-14":"_8UMwoC","uuiTypographySize14":"_8UMwoC","uui-typography-size-16":"_0bOgOV","uuiTypographySize16":"_0bOgOV","row-wrapper":"fBBHUL","rowWrapper":"fBBHUL","pin-icon-button":"OTgPp-","pinIconButton":"OTgPp-","not-pinned":"ofo2Lk","notPinned":"ofo2Lk","checkbox":"IjdU7K","drag-handle":"KWR0AF","dragHandle":"KWR0AF","dnd-disabled":"f2Zrv-","dndDisabled":"f2Zrv-"};
|
|
4658
4669
|
|
|
4659
4670
|
const ColumnRow = /* @__PURE__ */React__namespace.memo(function ColumnRow(props) {
|
|
4660
4671
|
const { column } = props;
|
|
@@ -4665,19 +4676,19 @@ const ColumnRow = /* @__PURE__ */React__namespace.memo(function ColumnRow(props)
|
|
|
4665
4676
|
const data = { column, columnConfig };
|
|
4666
4677
|
const renderContent = (dndActorParams) => {
|
|
4667
4678
|
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:
|
|
4679
|
+
const { onTouchStart, onPointerDown, ...restEventHandlers } = dndActorParams.eventHandlers;
|
|
4680
|
+
const { ref, ...dndActorPropsWithoutRef } = dndActorParams;
|
|
4681
|
+
return (React__namespace.createElement(FlexRow, { size: settings.sizes.dataTable.columnsConfigurationModal.columnRow, cx: wrapperClasses, ref: dndActorParams.ref, rawProps: { ...restEventHandlers }, alignItems: "top" },
|
|
4671
4682
|
React__namespace.createElement(uuiComponents.DragHandle, { dragHandleIcon: ForwardRef$5, rawProps: { onTouchStart, onPointerDown }, isDisabled: !isDndAllowed, cx: uuiCore.cx(css$k.dragHandle, !isDndAllowed && css$k.dndDisabled) }),
|
|
4672
4683
|
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
4684
|
React__namespace.createElement(FlexRow, { size: null, cx: css$k.pinIconButton },
|
|
4674
4685
|
React__namespace.createElement(PinIconButton, { pinPosition: pinPosition, canUnpin: !isPinnedAlways, onTogglePin: togglePin })),
|
|
4675
|
-
React__namespace.createElement(DropMarker,
|
|
4686
|
+
React__namespace.createElement(DropMarker, { ...dndActorPropsWithoutRef })));
|
|
4676
4687
|
};
|
|
4677
4688
|
return (React__namespace.createElement(uuiCore.DndActor, { key: column.key, srcData: isDndAllowed && data, dstData: data, canAcceptDrop: onCanAcceptDrop, onDrop: onDrop, render: renderContent }));
|
|
4678
4689
|
});
|
|
4679
4690
|
|
|
4680
|
-
var css$j = {"uui-typography":"
|
|
4691
|
+
var css$j = {"uui-typography":"eelq-2","uuiTypography":"eelq-2","hero-header":"TZtsWw","heroHeader":"TZtsWw","promo-header":"KL3GEw","promoHeader":"KL3GEw","uui-critical":"_3KP2oE","uuiCritical":"_3KP2oE","uui-info":"Syi-b1","uuiInfo":"Syi-b1","uui-success":"wX-iy-","uuiSuccess":"wX-iy-","uui-warning":"cN2MuR","uuiWarning":"cN2MuR","uui-highlight":"MOyWqf","uuiHighlight":"MOyWqf","uui-typography-size-12":"TJDeud","uuiTypographySize12":"TJDeud","uui-typography-size-14":"lAFwsI","uuiTypographySize14":"lAFwsI","uui-typography-size-16":"FxLMtM","uuiTypographySize16":"FxLMtM","root":"nyI3JQ","main-panel":"-PAc2A","mainPanel":"-PAc2A","group":"GOeTWI","group-title":"fyde8A","groupTitle":"fyde8A","group-items":"GLMD7D","groupItems":"GLMD7D","no-data":"gp8AIr","noData":"gp8AIr","no-data-title":"whpYJ-","noDataTitle":"whpYJ-","no-data-sub-title":"-srCJi","noDataSubTitle":"-srCJi","h-divider":"lldlY3","hDivider":"lldlY3","search-area":"cELzvQ","searchArea":"cELzvQ","subgroup-accordion":"ITMcnk","subgroupAccordion":"ITMcnk","subgroup":"RmYidO","subgroup-title":"dGRI4v","subgroupTitle":"dGRI4v"};
|
|
4681
4692
|
|
|
4682
4693
|
const renderGroupTitle = (title, amount) => (React__namespace.createElement(FlexRow, { cx: css$j.group },
|
|
4683
4694
|
React__namespace.createElement(Text, { size: "none", cx: css$j.groupTitle }, title),
|
|
@@ -4685,7 +4696,7 @@ const renderGroupTitle = (title, amount) => (React__namespace.createElement(Flex
|
|
|
4685
4696
|
React__namespace.createElement(uuiComponents.FlexSpacer, null)));
|
|
4686
4697
|
function ColumnsConfigurationModal(props) {
|
|
4687
4698
|
const i18n$1 = i18n.tables.columnsConfigurationModal;
|
|
4688
|
-
const { columns, columnsConfig: initialColumnsConfig, defaultConfig
|
|
4699
|
+
const { columns, columnsConfig: initialColumnsConfig, defaultConfig, ...modalProps } = props;
|
|
4689
4700
|
const { groupedColumns, searchValue, columnsConfig, reset, checkAll, uncheckAll, setSearchValue, hasAnySelectedColumns, } = uuiComponents.useColumnsConfiguration({
|
|
4690
4701
|
initialColumnsConfig,
|
|
4691
4702
|
columns,
|
|
@@ -4725,14 +4736,14 @@ function ColumnsConfigurationModal(props) {
|
|
|
4725
4736
|
React__namespace.createElement(SubGroup, { renderItem: props.renderItem, items: items })));
|
|
4726
4737
|
};
|
|
4727
4738
|
const applyButton = React__namespace.createElement(Button, { caption: i18n$1.applyButton, isDisabled: !hasAnySelectedColumns, color: "primary", onClick: apply });
|
|
4728
|
-
return (React__namespace.createElement(ModalBlocker,
|
|
4739
|
+
return (React__namespace.createElement(ModalBlocker, { ...modalProps },
|
|
4729
4740
|
React__namespace.createElement(ModalWindow, { cx: css$j.root, height: "95dvh", maxHeight: "95dvh", width: settings.sizes.dataTable.columnsConfigurationModal.width },
|
|
4730
4741
|
React__namespace.createElement(ModalHeader, { title: i18n$1.configureColumnsTitle, onClose: close }),
|
|
4731
4742
|
React__namespace.createElement(FlexRow, { borderBottom: true, cx: css$j.searchArea },
|
|
4732
4743
|
React__namespace.createElement(SearchInput, { size: settings.sizes.dataTable.columnsConfigurationModal.search, value: searchValue, onValueChange: setSearchValue, placeholder: i18n$1.searchPlaceholder }),
|
|
4733
4744
|
React__namespace.createElement(Dropdown, { closeOnTargetClick: true, renderBody: () => (React__namespace.createElement(DropdownMenuBody, { minWidth: 100 },
|
|
4734
4745
|
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,
|
|
4746
|
+
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
4747
|
React__namespace.createElement(Panel, { background: "surface-main", cx: css$j.mainPanel },
|
|
4737
4748
|
React__namespace.createElement(ScrollBars, null,
|
|
4738
4749
|
renderVisible(),
|
|
@@ -4766,7 +4777,7 @@ function SubGroup(props) {
|
|
|
4766
4777
|
return null;
|
|
4767
4778
|
}
|
|
4768
4779
|
|
|
4769
|
-
var css$i = {"listContainer":"
|
|
4780
|
+
var css$i = {"listContainer":"C0rsxR","header":"tMYAav","group":"_3xhDg7","stickyHeader":"_2vTwqy"};
|
|
4770
4781
|
|
|
4771
4782
|
const getChildrenAndRest = (row, rows) => {
|
|
4772
4783
|
const firstNotChildIndex = rows.findIndex((other) => other.depth < row.depth || (row.depth === other.depth && other.isPinned));
|
|
@@ -4782,9 +4793,8 @@ const getChildrenAndRest = (row, rows) => {
|
|
|
4782
4793
|
};
|
|
4783
4794
|
|
|
4784
4795
|
function DataRowsGroup({ row, childRows, renderRow, top = 1, }) {
|
|
4785
|
-
var _a, _b;
|
|
4786
4796
|
const rowRef = React.useRef();
|
|
4787
|
-
const childrenPinnedTop = row.isPinned ? (top + (
|
|
4797
|
+
const childrenPinnedTop = row.isPinned ? (top + (rowRef.current?.clientHeight ?? 0)) : top;
|
|
4788
4798
|
return (React__namespace.default.createElement("div", { className: css$i.group, key: row.rowKey },
|
|
4789
4799
|
React__namespace.default.createElement("div", { className: row.isPinned ? css$i.stickyHeader : css$i.header,
|
|
4790
4800
|
// Gaps between pinned parents should be removed by -1 from top height.
|
|
@@ -4815,10 +4825,9 @@ function DataRowsGroups({ rows, renderRow, top = 1, }) {
|
|
|
4815
4825
|
}
|
|
4816
4826
|
|
|
4817
4827
|
function DataRowsContainer({ estimatedHeight, listContainerRef, offsetY, rows, renderRow, headerRef, }) {
|
|
4818
|
-
var _a;
|
|
4819
4828
|
return (React__namespace.default.createElement("div", { className: css$i.listContainer, style: { minHeight: `${estimatedHeight}px` } },
|
|
4820
4829
|
React__namespace.default.createElement("div", { ref: listContainerRef, role: "rowgroup", style: { marginTop: offsetY } },
|
|
4821
|
-
React__namespace.default.createElement(DataRowsGroups, { rows: rows, renderRow: renderRow, top:
|
|
4830
|
+
React__namespace.default.createElement(DataRowsGroups, { rows: rows, renderRow: renderRow, top: headerRef?.current?.clientHeight }))));
|
|
4822
4831
|
}
|
|
4823
4832
|
|
|
4824
4833
|
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 +4841,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
|
|
|
4832
4841
|
xmlns: "http://www.w3.org/2000/svg",
|
|
4833
4842
|
ref: ref
|
|
4834
4843
|
}, props), /*#__PURE__*/React__namespace.createElement("g", {
|
|
4835
|
-
clipPath: "url(#
|
|
4844
|
+
clipPath: "url(#jh5qb18b7f57b0okg_a)"
|
|
4836
4845
|
}, _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
4837
4846
|
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
4847
|
fill: "#F5F6FA"
|
|
@@ -4853,7 +4862,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
|
|
|
4853
4862
|
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
4863
|
fill: "#1D1E26"
|
|
4855
4864
|
})), /*#__PURE__*/React__namespace.createElement("mask", {
|
|
4856
|
-
id: "
|
|
4865
|
+
id: "jh5qb10r5b9oczmaq_b",
|
|
4857
4866
|
style: {
|
|
4858
4867
|
maskType: "alpha"
|
|
4859
4868
|
},
|
|
@@ -4866,7 +4875,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
|
|
|
4866
4875
|
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
4876
|
fill: "#9BDEFF"
|
|
4868
4877
|
}))), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
|
|
4869
|
-
mask: "url(#
|
|
4878
|
+
mask: "url(#jh5qb10r5b9oczmaq_b)",
|
|
4870
4879
|
fillRule: "evenodd",
|
|
4871
4880
|
clipRule: "evenodd"
|
|
4872
4881
|
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -4952,7 +4961,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
|
|
|
4952
4961
|
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
4962
|
fill: "#fff"
|
|
4954
4963
|
}))), _defs || (_defs = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
|
|
4955
|
-
id: "
|
|
4964
|
+
id: "jh5qb18b7f57b0okg_a"
|
|
4956
4965
|
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
4957
4966
|
fill: "#fff",
|
|
4958
4967
|
transform: "translate(.552)",
|
|
@@ -4961,46 +4970,44 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
|
|
|
4961
4970
|
};
|
|
4962
4971
|
var ForwardRef$4 = /*#__PURE__*/React.forwardRef(SvgEmptyTable);
|
|
4963
4972
|
|
|
4964
|
-
var css$h = {"root":"
|
|
4973
|
+
var css$h = {"root":"ifknUI","sticky-header":"_8fg0PP","stickyHeader":"_8fg0PP","no-results":"_6tMOnw","noResults":"_6tMOnw","icon":"_5ka1G-","title":"Q-I1Hc"};
|
|
4965
4974
|
|
|
4966
4975
|
function DataTable(props) {
|
|
4967
|
-
var _a, _b, _c, _d;
|
|
4968
4976
|
const { uuiModals } = uuiCore.useUuiContext();
|
|
4969
4977
|
const headerRef = React__namespace.useRef();
|
|
4970
4978
|
const columnsWithFilters = useColumnsWithFilters(props.columns, props.filters);
|
|
4971
|
-
const { columns, config, defaultConfig } = uuiCore.useColumnsConfig(columnsWithFilters,
|
|
4979
|
+
const { columns, config, defaultConfig } = uuiCore.useColumnsConfig(columnsWithFilters, props.value?.columnsConfig);
|
|
4972
4980
|
const defaultRenderRow = React__namespace.useCallback((rowProps) => {
|
|
4973
|
-
return (React__namespace.createElement(DataTableRow,
|
|
4981
|
+
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
4982
|
}, []);
|
|
4975
|
-
const renderRow = (row) =>
|
|
4976
|
-
const rows =
|
|
4983
|
+
const renderRow = (row) => (props.renderRow ?? defaultRenderRow)({ ...row, columns });
|
|
4984
|
+
const rows = props.getRows?.() ?? props.rows ?? [];
|
|
4977
4985
|
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,
|
|
4986
|
+
return (React__namespace.createElement("div", { className: css$h.noResults }, props.renderNoResultsBlock ? (props.renderNoResultsBlock?.()) : (React__namespace.createElement(React__namespace.Fragment, null,
|
|
4980
4987
|
React__namespace.createElement(uuiComponents.IconContainer, { cx: css$h.icon, icon: ForwardRef$4 }),
|
|
4981
4988
|
React__namespace.createElement(Text, { cx: css$h.title, fontSize: "24", lineHeight: "30", color: "primary", fontWeight: "600" }, i18n.tables.noResultsBlock.title),
|
|
4982
4989
|
React__namespace.createElement(Text, { fontSize: "16", lineHeight: "24", color: "primary" }, i18n.tables.noResultsBlock.message)))));
|
|
4983
4990
|
}, [props.renderNoResultsBlock]);
|
|
4984
4991
|
const onConfigurationButtonClick = React__namespace.useCallback(() => {
|
|
4985
|
-
const configProps = { columns: props.columns, columnsConfig:
|
|
4992
|
+
const configProps = { columns: props.columns, columnsConfig: { ...config }, defaultConfig };
|
|
4986
4993
|
uuiModals
|
|
4987
4994
|
.show((modalProps) => {
|
|
4988
4995
|
return (props.renderColumnsConfigurationModal
|
|
4989
|
-
? props.renderColumnsConfigurationModal(
|
|
4990
|
-
: (React__namespace.createElement(ColumnsConfigurationModal,
|
|
4996
|
+
? props.renderColumnsConfigurationModal({ ...configProps, ...modalProps })
|
|
4997
|
+
: (React__namespace.createElement(ColumnsConfigurationModal, { ...modalProps, columns: props.columns, columnsConfig: config, defaultConfig: defaultConfig })));
|
|
4991
4998
|
})
|
|
4992
|
-
.then((columnsConfig) => props.onValueChange(
|
|
4999
|
+
.then((columnsConfig) => props.onValueChange({ ...props.value, columnsConfig }))
|
|
4993
5000
|
.catch(() => null);
|
|
4994
5001
|
}, [
|
|
4995
5002
|
props.columns, config, defaultConfig, props.value, props.onValueChange, props.renderColumnsConfigurationModal,
|
|
4996
5003
|
]);
|
|
4997
5004
|
const renderRowsContainer = React__namespace.useCallback(({ listContainerRef, estimatedHeight, offsetY, scrollShadows }) => (React__namespace.createElement(React__namespace.Fragment, null,
|
|
4998
5005
|
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:
|
|
5006
|
+
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
5007
|
React__namespace.createElement("div", { className: uuiCore.cx(uuiCore.uuiScrollShadows.top, {
|
|
5001
5008
|
[uuiCore.uuiScrollShadows.topVisible]: scrollShadows.verticalTop,
|
|
5002
5009
|
}) })),
|
|
5003
|
-
props.exactRowsCount !== 0 ? (React__namespace.createElement(DataRowsContainer, { headerRef: headerRef, listContainerRef: listContainerRef, estimatedHeight: estimatedHeight, offsetY: offsetY, scrollShadows: scrollShadows, renderRow: renderRow, rows: rows })) : (renderNoResultsBlock
|
|
5010
|
+
props.exactRowsCount !== 0 ? (React__namespace.createElement(DataRowsContainer, { headerRef: headerRef, listContainerRef: listContainerRef, estimatedHeight: estimatedHeight, offsetY: offsetY, scrollShadows: scrollShadows, renderRow: renderRow, rows: rows })) : (renderNoResultsBlock?.()))), [
|
|
5004
5011
|
props, columns, rows, renderNoResultsBlock, onConfigurationButtonClick,
|
|
5005
5012
|
]);
|
|
5006
5013
|
return (React__namespace.createElement(uuiComponents.DataTableSelectionProvider, { onCopy: props.onCopy, rows: rows, columns: columns },
|
|
@@ -5012,9 +5019,9 @@ function DataTable(props) {
|
|
|
5012
5019
|
} }))));
|
|
5013
5020
|
}
|
|
5014
5021
|
|
|
5015
|
-
var css$g = {"root":"
|
|
5022
|
+
var css$g = {"root":"biBVzu"};
|
|
5016
5023
|
|
|
5017
|
-
var css$f = {"root":"
|
|
5024
|
+
var css$f = {"root":"mQZNWd","burger-content":"sjQg4q","burgerContent":"sjQg4q"};
|
|
5018
5025
|
|
|
5019
5026
|
var _path$3;
|
|
5020
5027
|
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 +5064,7 @@ var SvgNavigationArrowDownOutline = function SvgNavigationArrowDownOutline(props
|
|
|
5057
5064
|
};
|
|
5058
5065
|
var ForwardRef$2 = /*#__PURE__*/React.forwardRef(SvgNavigationArrowDownOutline);
|
|
5059
5066
|
|
|
5060
|
-
var css$e = {"uui-typography":"
|
|
5067
|
+
var css$e = {"uui-typography":"oEMxeW","uuiTypography":"oEMxeW","hero-header":"_94sjry","heroHeader":"_94sjry","promo-header":"d3wHyu","promoHeader":"d3wHyu","uui-critical":"gAmL0l","uuiCritical":"gAmL0l","uui-info":"s0-Vzm","uuiInfo":"s0-Vzm","uui-success":"T0IT3z","uuiSuccess":"T0IT3z","uui-warning":"IIYlBt","uuiWarning":"IIYlBt","uui-highlight":"tlNybw","uuiHighlight":"tlNybw","uui-typography-size-12":"VGNF1l","uuiTypographySize12":"VGNF1l","uui-typography-size-14":"m342hq","uuiTypographySize14":"m342hq","uui-typography-size-16":"dxGluB","uuiTypographySize16":"dxGluB","root":"WzEXui","button-primary":"_-43jHC","buttonPrimary":"_-43jHC","button-secondary":"OdRVBc","buttonSecondary":"OdRVBc","hasIcon":"jYxpEj","dropdown":"MmiIdl"};
|
|
5061
5068
|
|
|
5062
5069
|
const BurgerButton = /* @__PURE__ */uuiCore.withMods(uuiComponents.Button, (props) => [
|
|
5063
5070
|
css$e.root,
|
|
@@ -5068,13 +5075,13 @@ const BurgerButton = /* @__PURE__ */uuiCore.withMods(uuiComponents.Button, (prop
|
|
|
5068
5075
|
props.icon && css$e.hasIcon,
|
|
5069
5076
|
], () => ({ dropdownIcon: ForwardRef$2, dropdownIconPosition: 'left', role: 'menuitem' }));
|
|
5070
5077
|
|
|
5071
|
-
var css$d = {"search-input":"
|
|
5078
|
+
var css$d = {"search-input":"vwBoI2","searchInput":"vwBoI2"};
|
|
5072
5079
|
|
|
5073
5080
|
function BurgerSearch(props) {
|
|
5074
5081
|
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
5082
|
}
|
|
5076
5083
|
|
|
5077
|
-
var css$c = {"root":"
|
|
5084
|
+
var css$c = {"root":"_3nOrn6","group-header":"d6Ib-6","groupHeader":"d6Ib-6","group-name":"jTPcEQ","groupName":"jTPcEQ","line":"M463wg"};
|
|
5078
5085
|
|
|
5079
5086
|
function BurgerGroupHeader(props) {
|
|
5080
5087
|
return (React__namespace.createElement("div", { className: cx__default.default(css$c.root, css$c.groupHeader, 'uui-burger-group-header') },
|
|
@@ -5082,15 +5089,21 @@ function BurgerGroupHeader(props) {
|
|
|
5082
5089
|
React__namespace.createElement("span", { className: css$c.groupName }, props.caption)));
|
|
5083
5090
|
}
|
|
5084
5091
|
|
|
5085
|
-
var css$b = {"uui-typography":"
|
|
5092
|
+
var css$b = {"uui-typography":"RS7dUA","uuiTypography":"RS7dUA","hero-header":"xljCqy","heroHeader":"xljCqy","promo-header":"AGIR-2","promoHeader":"AGIR-2","uui-critical":"jnsUE8","uuiCritical":"jnsUE8","uui-info":"_1lWxQi","uuiInfo":"_1lWxQi","uui-success":"eahP4f","uuiSuccess":"eahP4f","uui-warning":"SAIv2D","uuiWarning":"SAIv2D","uui-highlight":"_3VmznQ","uuiHighlight":"_3VmznQ","uui-typography-size-12":"PUv7b1","uuiTypographySize12":"PUv7b1","uui-typography-size-14":"hMdJHb","uuiTypographySize14":"hMdJHb","uui-typography-size-16":"zQZTre","uuiTypographySize16":"zQZTre","root":"nsSLaR","type-primary":"yVZmeU","typePrimary":"yVZmeU","type-secondary":"G0W34C","typeSecondary":"G0W34C"};
|
|
5086
5093
|
|
|
5087
5094
|
const MainMenuButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
5088
|
-
const { type
|
|
5089
|
-
return (React__namespace.createElement(uuiComponents.Clickable,
|
|
5095
|
+
const { type, ...clickableProps } = props;
|
|
5096
|
+
return (React__namespace.createElement(uuiComponents.Clickable, { ...clickableProps, rawProps: {
|
|
5097
|
+
'aria-expanded': props.isOpen,
|
|
5098
|
+
'aria-current': props.isLinkActive
|
|
5099
|
+
? 'page'
|
|
5100
|
+
: undefined,
|
|
5101
|
+
...props.rawProps,
|
|
5102
|
+
}, cx: [
|
|
5090
5103
|
css$b.root,
|
|
5091
5104
|
css$b['type-' + (type || 'primary')],
|
|
5092
5105
|
props.cx,
|
|
5093
|
-
], ref: ref }
|
|
5106
|
+
], ref: ref },
|
|
5094
5107
|
props.icon && props.iconPosition !== 'right' && (React__namespace.createElement(uuiComponents.IconContainer, { icon: props.icon, onClick: props.onIconClick })),
|
|
5095
5108
|
props.caption && (React__namespace.createElement("div", { className: uuiCore.uuiElement.caption }, props.caption)),
|
|
5096
5109
|
props.count !== undefined && props.count !== null && (React__namespace.createElement(CountIndicator, { caption: props.count, color: "neutral", size: "18" })),
|
|
@@ -5098,11 +5111,11 @@ const MainMenuButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) =
|
|
|
5098
5111
|
props.isDropdown && (React__namespace.createElement(uuiComponents.IconContainer, { icon: ForwardRef$Q, flipY: props.isOpen }))));
|
|
5099
5112
|
});
|
|
5100
5113
|
|
|
5101
|
-
var css$a = {"dropdown-body":"
|
|
5114
|
+
var css$a = {"dropdown-body":"sMjO5o","dropdownBody":"sMjO5o"};
|
|
5102
5115
|
|
|
5103
5116
|
class MainMenuDropdown extends React__namespace.Component {
|
|
5104
5117
|
render() {
|
|
5105
|
-
return (React__namespace.createElement(uuiComponents.Dropdown, { renderTarget: (props) => (React__namespace.createElement(MainMenuButton,
|
|
5118
|
+
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
5119
|
const handleEscape = (e) => {
|
|
5107
5120
|
if (e.key === 'Escape' && props.isOpen) {
|
|
5108
5121
|
props.onClose();
|
|
@@ -5110,16 +5123,19 @@ class MainMenuDropdown extends React__namespace.Component {
|
|
|
5110
5123
|
};
|
|
5111
5124
|
return (React__namespace.createElement(FocusLock__default.default, { returnFocus: true, persistentFocus: true, lockProps: { onKeyDown: handleEscape } },
|
|
5112
5125
|
React__namespace.createElement("div", { className: cx__default.default(css$a.dropdownBody, 'uui-main_menu-dropdown') }, this.props.renderBody
|
|
5113
|
-
? this.props.renderBody(
|
|
5126
|
+
? this.props.renderBody({ ...props })
|
|
5114
5127
|
: React__namespace.Children.map(this.props.children, (item) => {
|
|
5115
5128
|
if (!item)
|
|
5116
5129
|
return item;
|
|
5117
|
-
return React__namespace.createElement(item.type,
|
|
5130
|
+
return React__namespace.createElement(item.type, {
|
|
5131
|
+
...item.props,
|
|
5132
|
+
onClick: item.props.onClick
|
|
5118
5133
|
? () => {
|
|
5119
5134
|
item.props.onClick();
|
|
5120
5135
|
props.onClose();
|
|
5121
5136
|
}
|
|
5122
|
-
: null
|
|
5137
|
+
: null,
|
|
5138
|
+
});
|
|
5123
5139
|
}))));
|
|
5124
5140
|
}, placement: "bottom-start" }));
|
|
5125
5141
|
}
|
|
@@ -5153,69 +5169,66 @@ var SvgNavigationGlobalMenuOutlineOutline = function SvgNavigationGlobalMenuOutl
|
|
|
5153
5169
|
};
|
|
5154
5170
|
var ForwardRef$1 = /*#__PURE__*/React.forwardRef(SvgNavigationGlobalMenuOutlineOutline);
|
|
5155
5171
|
|
|
5156
|
-
var css$9 = {"global-menu-btn":"
|
|
5172
|
+
var css$9 = {"global-menu-btn":"S1-IiH","globalMenuBtn":"S1-IiH","global-menu-icon":"Mz6D1b","globalMenuIcon":"Mz6D1b"};
|
|
5157
5173
|
|
|
5158
|
-
const GlobalMenu = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("button",
|
|
5174
|
+
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
5175
|
React__namespace.createElement(uuiComponents.IconContainer, { size: 36, icon: ForwardRef$1, cx: css$9.globalMenuIcon }))));
|
|
5160
5176
|
|
|
5161
|
-
var css$8 = {"container":"
|
|
5177
|
+
var css$8 = {"container":"jjD6PH","open":"qAyc-j","folding-arrow":"e5DzUH","foldingArrow":"e5DzUH"};
|
|
5162
5178
|
|
|
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 },
|
|
5179
|
+
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
5180
|
React__namespace.createElement(uuiComponents.Avatar, { size: "36", img: props.avatarUrl }),
|
|
5165
5181
|
props.icon && React__namespace.createElement(uuiComponents.IconContainer, { icon: props.icon }),
|
|
5166
5182
|
props.isDropdown && (React__namespace.createElement("div", null,
|
|
5167
5183
|
React__namespace.createElement(uuiComponents.IconContainer, { size: 18, icon: ForwardRef$Q, flipY: props.isOpen, cx: css$8.foldingArrow }))))));
|
|
5168
5184
|
|
|
5169
|
-
var css$7 = {"search-input":"
|
|
5185
|
+
var css$7 = {"search-input":"IbLOaY","searchInput":"IbLOaY"};
|
|
5170
5186
|
|
|
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
|
-
} }))));
|
|
5187
|
+
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
5188
|
|
|
5176
|
-
var css$6 = {"container":"
|
|
5189
|
+
var css$6 = {"container":"_7WXFQI"};
|
|
5177
5190
|
|
|
5178
|
-
const MainMenuIcon = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement(IconButton,
|
|
5191
|
+
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
5192
|
|
|
5180
|
-
var css$5 = {"root":"
|
|
5193
|
+
var css$5 = {"root":"_0B5wW8"};
|
|
5181
5194
|
|
|
5182
5195
|
const Anchor = /* @__PURE__ */uuiCore.withMods(uuiComponents.Anchor, () => [css$5.root]);
|
|
5183
5196
|
|
|
5184
5197
|
function Form(props) {
|
|
5185
5198
|
const context = uuiCore.useUuiContext();
|
|
5186
5199
|
const beforeLeave = React__namespace.useCallback(() => {
|
|
5187
|
-
return context.uuiModals.show((modalProps) => React__namespace.createElement(ConfirmationModal,
|
|
5200
|
+
return context.uuiModals.show((modalProps) => React__namespace.createElement(ConfirmationModal, { caption: i18n.form.modals.beforeLeaveMessage, ...modalProps }));
|
|
5188
5201
|
}, [context.uuiModals]);
|
|
5189
5202
|
const loadUnsavedChanges = () => {
|
|
5190
5203
|
return context.uuiNotifications
|
|
5191
|
-
.show((props) => (React__namespace.createElement(WarningNotification,
|
|
5204
|
+
.show((props) => (React__namespace.createElement(WarningNotification, { ...props, actions: [
|
|
5192
5205
|
{
|
|
5193
5206
|
name: i18n.form.notifications.actionButtonCaption,
|
|
5194
5207
|
action: props.onSuccess,
|
|
5195
5208
|
},
|
|
5196
|
-
] }
|
|
5209
|
+
] },
|
|
5197
5210
|
React__namespace.createElement(RichTextView, null,
|
|
5198
5211
|
React__namespace.createElement(Text, { size: "36" }, i18n.form.notifications.unsavedChangesMessage)))), { duration: 5, position: 'bot-left' });
|
|
5199
5212
|
};
|
|
5200
|
-
return React__namespace.createElement(uuiCore.Form,
|
|
5213
|
+
return React__namespace.createElement(uuiCore.Form, { loadUnsavedChanges: loadUnsavedChanges, beforeLeave: beforeLeave, ...props });
|
|
5201
5214
|
}
|
|
5202
5215
|
|
|
5203
5216
|
function useForm(props) {
|
|
5204
5217
|
const context = uuiCore.useUuiContext();
|
|
5205
5218
|
const beforeLeave = React.useCallback(() => {
|
|
5206
|
-
return context.uuiModals.show((modalProps) => React__namespace.default.createElement(ConfirmationModal,
|
|
5219
|
+
return context.uuiModals.show((modalProps) => React__namespace.default.createElement(ConfirmationModal, { caption: i18n.form.modals.beforeLeaveMessage, ...modalProps }));
|
|
5207
5220
|
}, [context.uuiModals]);
|
|
5208
5221
|
const loadUnsavedChanges = () => {
|
|
5209
|
-
return context.uuiNotifications.show((props) => (React__namespace.default.createElement(WarningNotification,
|
|
5222
|
+
return context.uuiNotifications.show((props) => (React__namespace.default.createElement(WarningNotification, { ...props, actions: [
|
|
5210
5223
|
{
|
|
5211
5224
|
name: i18n.form.notifications.actionButtonCaption,
|
|
5212
5225
|
action: props.onSuccess,
|
|
5213
5226
|
},
|
|
5214
|
-
] }
|
|
5227
|
+
] },
|
|
5215
5228
|
React__namespace.default.createElement(RichTextView, null,
|
|
5216
5229
|
React__namespace.default.createElement(Text, { size: "36" }, i18n.form.notifications.unsavedChangesMessage)))), { duration: 5, position: 'bot-left' });
|
|
5217
5230
|
};
|
|
5218
|
-
return uuiCore.useForm(
|
|
5231
|
+
return uuiCore.useForm({ beforeLeave, loadUnsavedChanges, ...props });
|
|
5219
5232
|
}
|
|
5220
5233
|
|
|
5221
5234
|
var _path;
|
|
@@ -5235,33 +5248,33 @@ var SvgFileCloudUploadFill = function SvgFileCloudUploadFill(props, ref) {
|
|
|
5235
5248
|
};
|
|
5236
5249
|
var ForwardRef = /*#__PURE__*/React.forwardRef(SvgFileCloudUploadFill);
|
|
5237
5250
|
|
|
5238
|
-
var css$4 = {"root":"
|
|
5251
|
+
var css$4 = {"root":"PvmBQ0","drop-start":"Ld5H3f","dropStart":"Ld5H3f","drop-over":"fn0Ty8","dropOver":"fn0Ty8","link":"Yyk1uq","drop-area":"_4duI3R","dropArea":"_4duI3R","drop-caption":"ecL9CV","dropCaption":"ecL9CV","icon-blue":"xIhk4E","iconBlue":"xIhk4E"};
|
|
5239
5252
|
|
|
5240
5253
|
function DropSpot(props) {
|
|
5241
5254
|
const getInfoText = typeof props.infoText === 'string'
|
|
5242
|
-
? (React__namespace.createElement(Text, { lineHeight: "24", size: "24", fontSize: "14", color: "tertiary" }, props.infoText)) : props
|
|
5255
|
+
? (React__namespace.createElement(Text, { lineHeight: "24", size: "24", fontSize: "14", color: "tertiary" }, props.infoText)) : props?.infoText;
|
|
5243
5256
|
const renderAttachmentArea = (params) => {
|
|
5244
|
-
return (React__namespace.createElement("div",
|
|
5245
|
-
React__namespace.createElement("div",
|
|
5257
|
+
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 },
|
|
5258
|
+
React__namespace.createElement("div", { ...params.eventHandlers, className: css$4.dropArea },
|
|
5246
5259
|
React__namespace.createElement(FlexRow, { size: "24" },
|
|
5247
5260
|
React__namespace.createElement(uuiComponents.IconContainer, { icon: ForwardRef, cx: css$4.iconBlue }),
|
|
5248
5261
|
React__namespace.createElement(Text, { lineHeight: "24", size: "24", fontSize: "14", cx: css$4.dropCaption }, i18n.fileUpload.labelStart),
|
|
5249
5262
|
React__namespace.createElement(uuiComponents.UploadFileToggler, { onFilesAdded: props.onUploadFiles, render: (props) => (React__namespace.createElement(RichTextView, null,
|
|
5250
|
-
React__namespace.createElement(LinkButton,
|
|
5263
|
+
React__namespace.createElement(LinkButton, { caption: i18n.fileUpload.browse, ...props, cx: css$4.link }))), accept: props.accept, single: props.single })),
|
|
5251
5264
|
getInfoText)));
|
|
5252
5265
|
};
|
|
5253
5266
|
return React__namespace.createElement(uuiComponents.DropSpot, { render: renderAttachmentArea, onFilesDropped: props.onUploadFiles });
|
|
5254
5267
|
}
|
|
5255
5268
|
|
|
5256
|
-
var css$3 = {"uui-typography":"
|
|
5269
|
+
var css$3 = {"uui-typography":"i-o-9M","uuiTypography":"i-o-9M","hero-header":"-Gl1sO","heroHeader":"-Gl1sO","promo-header":"gGT8RD","promoHeader":"gGT8RD","uui-critical":"zhJADN","uuiCritical":"zhJADN","uui-info":"ORT7bI","uuiInfo":"ORT7bI","uui-success":"Gzi8-l","uuiSuccess":"Gzi8-l","uui-warning":"_3xQjpr","uuiWarning":"_3xQjpr","uui-highlight":"_60kiI9","uuiHighlight":"_60kiI9","uui-typography-size-12":"dVQO26","uuiTypographySize12":"dVQO26","uui-typography-size-14":"n7wFwa","uuiTypographySize14":"n7wFwa","uui-typography-size-16":"N1krOu","uuiTypographySize16":"N1krOu","root":"qUu7ZU","file-name":"WiU0ph","fileName":"WiU0ph","default-color":"I5UhjC","defaultColor":"I5UhjC","doc-color":"_96KZ3I","docColor":"_96KZ3I","xls-color":"z-n7Ym","xlsColor":"z-n7Ym","pdf-color":"knWl-9","pdfColor":"knWl-9","movie-color":"uauU51","movieColor":"uauU51","img-color":"XmgIYX","imgColor":"XmgIYX","mov-color":"RGIDw2","movColor":"RGIDw2","error-block":"NCZbfx","errorBlock":"NCZbfx","icons-block":"dI5Stv","iconsBlock":"dI5Stv"};
|
|
5257
5270
|
|
|
5258
|
-
var css$2 = {"root":"
|
|
5271
|
+
var css$2 = {"root":"eYf6C-"};
|
|
5259
5272
|
|
|
5260
5273
|
const SvgCircleProgress = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
5261
5274
|
const outsetRadius = props.size / 2 - 1;
|
|
5262
5275
|
const insetRadius = props.size / 2 - 3;
|
|
5263
5276
|
const circumference = insetRadius * Math.PI;
|
|
5264
|
-
return (React__namespace.createElement("svg",
|
|
5277
|
+
return (React__namespace.createElement("svg", { className: css$2.root, width: props.size, height: props.size, ref: ref, ...props.rawProps },
|
|
5265
5278
|
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
5279
|
React__namespace.createElement("circle", { strokeWidth: 1, fill: "transparent", r: outsetRadius, cx: props.size / 2, cy: props.size / 2 })));
|
|
5267
5280
|
});
|
|
@@ -5306,8 +5319,8 @@ const FileCard = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
|
5306
5319
|
}
|
|
5307
5320
|
};
|
|
5308
5321
|
const { cx: componentCx, width, file: { progress, size, name, extension, error, abortXHR, }, onClick, } = props;
|
|
5309
|
-
const fileExtension = extension ||
|
|
5310
|
-
const fileName = name
|
|
5322
|
+
const fileExtension = extension || name?.split('.').pop();
|
|
5323
|
+
const fileName = name?.split('.').slice(0, -1).join('');
|
|
5311
5324
|
const isLoading = progress < 100;
|
|
5312
5325
|
const isCrossShow = ((!isLoadingShow && isLoading) || !isLoading) && onClick;
|
|
5313
5326
|
const mouseLeaveHandler = (e) => {
|
|
@@ -5330,12 +5343,12 @@ const FileCard = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
|
5330
5343
|
progress && progress < 100 && abortXHR();
|
|
5331
5344
|
onClick();
|
|
5332
5345
|
};
|
|
5333
|
-
return (React__namespace.createElement(FlexCell, { ref: ref, cx: uuiCore.cx(css$3.root, 'uui-file_card', (isLoading ||
|
|
5346
|
+
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
5347
|
React__namespace.createElement(FlexRow, { size: "36", alignItems: "top", columnGap: "6" },
|
|
5335
5348
|
fileExtension && getIcon(fileExtension),
|
|
5336
5349
|
React__namespace.createElement(FlexCell, { width: "100%" },
|
|
5337
|
-
React__namespace.createElement(Text, { size: "18", fontSize: "14", lineHeight: "18", color: (progress < 100 ||
|
|
5338
|
-
|
|
5350
|
+
React__namespace.createElement(Text, { size: "18", fontSize: "14", lineHeight: "18", color: (progress < 100 || error?.isError) ? 'tertiary' : 'primary', cx: css$3.fileName }, fileName),
|
|
5351
|
+
error?.isError ? renderErrorContent() : renderSuccessfulContent()),
|
|
5339
5352
|
React__namespace.createElement("div", { className: uuiCore.cx(css$3.iconsBlock), onMouseEnter: mouseEnterHandler, onMouseLeave: mouseLeaveHandler },
|
|
5340
5353
|
isLoadingShow && isLoading && React__namespace.createElement(SvgCircleProgress, { progress: progress, size: 18 }),
|
|
5341
5354
|
isCrossShow && React__namespace.createElement(IconButton, { icon: ForwardRef$R, onClick: removeHandler })))));
|
|
@@ -5383,7 +5396,7 @@ const getErrorPageConfig = () => ({
|
|
|
5383
5396
|
},
|
|
5384
5397
|
});
|
|
5385
5398
|
|
|
5386
|
-
var css$1 = {"container":"
|
|
5399
|
+
var css$1 = {"container":"edU7GL"};
|
|
5387
5400
|
|
|
5388
5401
|
const ErrorPage = (props) => {
|
|
5389
5402
|
const isMobileScreen = uuiCore.isMobile();
|
|
@@ -5392,10 +5405,10 @@ const ErrorPage = (props) => {
|
|
|
5392
5405
|
React__namespace.default.createElement("img", { className: "uui-error-image", src: isMobileScreen && props.mobileImageUrl ? props.mobileImageUrl : props.imageUrl, alt: "ERROR OCCURRED!" }),
|
|
5393
5406
|
React__namespace.default.createElement("div", { className: "uui-error-title" }, props.title),
|
|
5394
5407
|
React__namespace.default.createElement("div", { className: "uui-error-subtitle" }, props.subtitle),
|
|
5395
|
-
|
|
5408
|
+
props?.supportLink && React__namespace.default.createElement("div", { className: "uui-error-support-link" }, props?.supportLink))));
|
|
5396
5409
|
};
|
|
5397
5410
|
|
|
5398
|
-
var css = {"recovery-spinner":"
|
|
5411
|
+
var css = {"recovery-spinner":"AT29bs","recoverySpinner":"AT29bs","recovery-message":"_3QYXFN","recoveryMessage":"_3QYXFN","modal-blocker":"z4Kp7l","modalBlocker":"z4Kp7l","modalFadeIn":"CbzFLT"};
|
|
5399
5412
|
|
|
5400
5413
|
function ErrorHandler(props) {
|
|
5401
5414
|
const { uuiNotifications, uuiModals, uuiApi } = uuiCore.useUuiContext();
|
|
@@ -5410,7 +5423,7 @@ function ErrorHandler(props) {
|
|
|
5410
5423
|
props.onNotificationError(c);
|
|
5411
5424
|
}
|
|
5412
5425
|
else {
|
|
5413
|
-
uuiNotifications.show((notificationProps) => (React__namespace.default.createElement(ErrorNotification,
|
|
5426
|
+
uuiNotifications.show((notificationProps) => (React__namespace.default.createElement(ErrorNotification, { ...notificationProps },
|
|
5414
5427
|
React__namespace.default.createElement(Text, { size: "36" }, c.responseData && c.responseData.errorMessage))));
|
|
5415
5428
|
}
|
|
5416
5429
|
c.dismissError();
|
|
@@ -5432,7 +5445,7 @@ function ErrorHandler(props) {
|
|
|
5432
5445
|
".")))))));
|
|
5433
5446
|
};
|
|
5434
5447
|
const renderErrorPage = (errorInform) => {
|
|
5435
|
-
return React__namespace.default.createElement(ErrorPage,
|
|
5448
|
+
return React__namespace.default.createElement(ErrorPage, { cx: props.cx, ...errorInform });
|
|
5436
5449
|
};
|
|
5437
5450
|
if (errorType === 'error') {
|
|
5438
5451
|
uuiModals.closeAll();
|