@epam/uui 6.4.2 → 6.4.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/styles/clickable.scss +26 -26
- package/assets/styles/dnd.scss +9 -9
- package/assets/styles/effects.scss +6 -6
- package/assets/styles/helpers.scss +12 -0
- package/assets/styles/index.scss +6 -6
- package/assets/styles/typography.scss +184 -184
- package/components/buttons/VerticalTabButton.d.ts.map +1 -1
- package/components/datePickers/DatePicker.d.ts.map +1 -1
- package/components/datePickers/RangeDatePickerInput.d.ts.map +1 -1
- package/components/filters/FilterNumericBody.d.ts +3 -3
- package/components/filters/FilterNumericBody.d.ts.map +1 -1
- package/components/filters/helpers/predicateHelpers.d.ts +11 -0
- package/components/filters/helpers/predicateHelpers.d.ts.map +1 -1
- package/components/inputs/timePicker/TimePicker.d.ts.map +1 -1
- package/components/inputs/timePicker/TimePickerBody.d.ts.map +1 -1
- package/components/layout/Blocker.d.ts +2 -1
- package/components/layout/Blocker.d.ts.map +1 -1
- package/components/layout/ScrollBars.d.ts +11 -1
- package/components/layout/ScrollBars.d.ts.map +1 -1
- package/components/layout/VirtualList.d.ts +1 -1
- package/components/layout/VirtualList.d.ts.map +1 -1
- package/components/overlays/DropdownMenu.d.ts +2 -2
- package/components/overlays/DropdownMenu.d.ts.map +1 -1
- package/components/pickers/DataPickerBody.d.ts.map +1 -1
- package/components/tables/ColumnHeaderDropdown/SortingPanel.d.ts.map +1 -1
- package/components/tables/DataTable.d.ts +3 -2
- package/components/tables/DataTable.d.ts.map +1 -1
- package/components/tables/DataTableHeaderCell.d.ts +2 -21
- package/components/tables/DataTableHeaderCell.d.ts.map +1 -1
- package/components/tables/columnsConfigurationModal/ColumnsConfigurationModal.d.ts +1 -1
- package/components/tables/columnsConfigurationModal/ColumnsConfigurationModal.d.ts.map +1 -1
- package/components/widgets/DataRowAddons.d.ts.map +1 -1
- package/i18n.d.ts +1 -0
- package/i18n.d.ts.map +1 -1
- package/index.esm.js +322 -242
- package/index.esm.js.map +1 -1
- package/index.js +320 -240
- package/index.js.map +1 -1
- package/package.json +5 -5
- package/readme.md +9 -9
- package/stats.html +1 -1
- package/styles.css +1043 -1024
- package/styles.css.map +1 -1
package/index.js
CHANGED
|
@@ -190,7 +190,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
|
|
|
190
190
|
xmlns: "http://www.w3.org/2000/svg",
|
|
191
191
|
ref: ref
|
|
192
192
|
}, props), /*#__PURE__*/React__namespace.createElement("g", {
|
|
193
|
-
clipPath: "url(#
|
|
193
|
+
clipPath: "url(#g3sdanswhqkvot7f_a)"
|
|
194
194
|
}, _path$I || (_path$I = /*#__PURE__*/React__namespace.createElement("path", {
|
|
195
195
|
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",
|
|
196
196
|
fill: "#F5F6FA"
|
|
@@ -211,7 +211,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
|
|
|
211
211
|
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",
|
|
212
212
|
fill: "#1D1E26"
|
|
213
213
|
})), /*#__PURE__*/React__namespace.createElement("mask", {
|
|
214
|
-
id: "
|
|
214
|
+
id: "g3sdancilj2tzyi46_b",
|
|
215
215
|
style: {
|
|
216
216
|
maskType: "alpha"
|
|
217
217
|
},
|
|
@@ -224,7 +224,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
|
|
|
224
224
|
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",
|
|
225
225
|
fill: "#9BDEFF"
|
|
226
226
|
}))), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
|
|
227
|
-
mask: "url(#
|
|
227
|
+
mask: "url(#g3sdancilj2tzyi46_b)",
|
|
228
228
|
fillRule: "evenodd",
|
|
229
229
|
clipRule: "evenodd"
|
|
230
230
|
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
@@ -310,7 +310,7 @@ var SvgEmptyTable = function SvgEmptyTable(props, ref) {
|
|
|
310
310
|
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",
|
|
311
311
|
fill: "#fff"
|
|
312
312
|
}))), _defs || (_defs = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
|
|
313
|
-
id: "
|
|
313
|
+
id: "g3sdanswhqkvot7f_a"
|
|
314
314
|
}, /*#__PURE__*/React__namespace.createElement("path", {
|
|
315
315
|
fill: "#fff",
|
|
316
316
|
transform: "translate(.552)",
|
|
@@ -961,14 +961,14 @@ var SvgSearchWithBackground = function SvgSearchWithBackground(props, ref) {
|
|
|
961
961
|
};
|
|
962
962
|
var ForwardRef$4 = /*#__PURE__*/React.forwardRef(SvgSearchWithBackground);
|
|
963
963
|
|
|
964
|
-
var css$1w = {"root":"
|
|
964
|
+
var css$1w = {"root":"UE27xC","uui-spinner":"JZ8Uv5","uuiSpinner":"JZ8Uv5"};
|
|
965
965
|
|
|
966
966
|
function applySpinnerMods() {
|
|
967
967
|
return [css$1w.root, 'uui-spinner'];
|
|
968
968
|
}
|
|
969
969
|
const Spinner = /* @__PURE__ */uuiCore.withMods(uuiComponents.Spinner, applySpinnerMods);
|
|
970
970
|
|
|
971
|
-
var css$1v = {"root":"
|
|
971
|
+
var css$1v = {"root":"vlgrhq","loading-word":"RxXHQu","loadingWord":"RxXHQu","animated-loading":"vIsykU","animatedLoading":"vIsykU","skeleton_loading":"MTpfbj","skeletonLoading":"MTpfbj"};
|
|
972
972
|
|
|
973
973
|
const TextPlaceholder = (props) => {
|
|
974
974
|
const pattern = ' ';
|
|
@@ -985,7 +985,7 @@ const TextPlaceholder = (props) => {
|
|
|
985
985
|
]), dangerouslySetInnerHTML: { __html: it } })))));
|
|
986
986
|
};
|
|
987
987
|
|
|
988
|
-
var css$1u = {"root":"
|
|
988
|
+
var css$1u = {"root":"GDTy8P","line-height":"uxBDY-","lineHeight":"uxBDY-","font-size":"Jfl4Kx","fontSize":"Jfl4Kx"};
|
|
989
989
|
|
|
990
990
|
function applyTextMods(mods) {
|
|
991
991
|
return [
|
|
@@ -1012,7 +1012,7 @@ const Text = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Text, appl
|
|
|
1012
1012
|
};
|
|
1013
1013
|
});
|
|
1014
1014
|
|
|
1015
|
-
var css$1t = {"root":"
|
|
1015
|
+
var css$1t = {"root":"tP39oV"};
|
|
1016
1016
|
|
|
1017
1017
|
const Blocker = /* @__PURE__ */uuiCore.withMods(uuiComponents.Blocker, () => [css$1t.root], () => ({ renderSpinner: settings.blocker.renderSpinner }));
|
|
1018
1018
|
|
|
@@ -1517,7 +1517,7 @@ const settings = {
|
|
|
1517
1517
|
textInput: textInputSettings,
|
|
1518
1518
|
};
|
|
1519
1519
|
|
|
1520
|
-
var css$1s = {"root":"
|
|
1520
|
+
var css$1s = {"root":"UngvQG"};
|
|
1521
1521
|
|
|
1522
1522
|
function applyButtonMods(mods) {
|
|
1523
1523
|
return [
|
|
@@ -1535,7 +1535,7 @@ const Button = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Button,
|
|
|
1535
1535
|
};
|
|
1536
1536
|
});
|
|
1537
1537
|
|
|
1538
|
-
var css$1r = {"root":"
|
|
1538
|
+
var css$1r = {"root":"WpOWm9"};
|
|
1539
1539
|
|
|
1540
1540
|
function applyIconButtonMods(props) {
|
|
1541
1541
|
return ['uui-icon_button', `uui-color-${props.color || 'neutral'}`, css$1r.root];
|
|
@@ -1572,7 +1572,7 @@ function getIconClass(props) {
|
|
|
1572
1572
|
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'];
|
|
1573
1573
|
}
|
|
1574
1574
|
|
|
1575
|
-
var css$1q = {"root":"
|
|
1575
|
+
var css$1q = {"root":"-wCqo3"};
|
|
1576
1576
|
|
|
1577
1577
|
const DEFAULT_COLOR = 'primary';
|
|
1578
1578
|
const LinkButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
@@ -1602,7 +1602,7 @@ const LinkButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
|
1602
1602
|
props.isDropdown && (React__namespace.createElement(uuiComponents.IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
|
|
1603
1603
|
});
|
|
1604
1604
|
|
|
1605
|
-
var css$1p = {"root":"
|
|
1605
|
+
var css$1p = {"root":"Nn9bGc"};
|
|
1606
1606
|
|
|
1607
1607
|
const CountIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
|
|
1608
1608
|
return (React__namespace.default.createElement("div", { ref: ref, className: cx__default.default([
|
|
@@ -1614,7 +1614,7 @@ const CountIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
|
|
|
1614
1614
|
]) }, props.caption));
|
|
1615
1615
|
});
|
|
1616
1616
|
|
|
1617
|
-
var css$1o = {"root":"
|
|
1617
|
+
var css$1o = {"root":"HB7Csf","withNotify":"_73xN8N"};
|
|
1618
1618
|
|
|
1619
1619
|
const TabButton = /* @__PURE__ */React__namespace.default.forwardRef((props, refExternal) => {
|
|
1620
1620
|
const refLocal = React__namespace.default.useRef(null);
|
|
@@ -1661,13 +1661,13 @@ const TabButton = /* @__PURE__ */React__namespace.default.forwardRef((props, ref
|
|
|
1661
1661
|
props.onClear && !props.isDisabled && (React__namespace.default.createElement(uuiComponents.IconContainer, { cx: uuiCore.uuiMarkers.clickable, icon: ClearIcon, onClick: props.onClear }))));
|
|
1662
1662
|
});
|
|
1663
1663
|
|
|
1664
|
-
var css$1n = {"root":"
|
|
1664
|
+
var css$1n = {"root":"DjEb16","noLeftPadding":"vFYbua","foldingArea":"d2FFaF","onlyFoldable":"F6gy36","captionWrapper":"_92Ln4t","withNotify":"tqso6T"};
|
|
1665
1665
|
|
|
1666
|
-
var css$1m = {"root":"
|
|
1666
|
+
var css$1m = {"root":"e0-jaV"};
|
|
1667
1667
|
|
|
1668
1668
|
const AvatarStack = /* @__PURE__ */uuiCore.withMods(uuiComponents.AvatarStack, () => [css$1m.root]);
|
|
1669
1669
|
|
|
1670
|
-
var css$1l = {"root":"
|
|
1670
|
+
var css$1l = {"root":"MoXaMB"};
|
|
1671
1671
|
|
|
1672
1672
|
const DEFAULT_FILL = 'solid';
|
|
1673
1673
|
function applyBadgeMods(mods) {
|
|
@@ -1695,7 +1695,7 @@ const Badge = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) =>
|
|
|
1695
1695
|
props.isDropdown && (React__namespace.default.createElement(uuiComponents.IconContainer, { icon: DropdownIcon, flipY: props.isOpen }))));
|
|
1696
1696
|
});
|
|
1697
1697
|
|
|
1698
|
-
var css$1k = {"root":"
|
|
1698
|
+
var css$1k = {"root":"EluYH6"};
|
|
1699
1699
|
|
|
1700
1700
|
function applyTagMods(props) {
|
|
1701
1701
|
return [
|
|
@@ -1728,7 +1728,7 @@ const Tag = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
|
|
|
1728
1728
|
} }))));
|
|
1729
1729
|
});
|
|
1730
1730
|
|
|
1731
|
-
var css$1j = {"root":"
|
|
1731
|
+
var css$1j = {"root":"dGyt7a","page":"Ir6nO6","spacer":"I3NMdL","mode-ghost":"_4xtqr6","modeGhost":"_4xtqr6"};
|
|
1732
1732
|
|
|
1733
1733
|
function Paginator(props) {
|
|
1734
1734
|
const renderPaginator = (params) => (React__namespace.default.createElement("nav", { role: "navigation", className: cx__default.default('uui-paginator', `uui-size-${props.size || settings.paginator.sizes.default}`), ...params.rawProps },
|
|
@@ -1754,14 +1754,14 @@ function Paginator(props) {
|
|
|
1754
1754
|
return React__namespace.default.createElement(uuiComponents.Paginator, { ...props, render: renderPaginator });
|
|
1755
1755
|
}
|
|
1756
1756
|
|
|
1757
|
-
var css$1i = {"root":"
|
|
1757
|
+
var css$1i = {"root":"C4JxUr","progress-bar":"nJiiRt","progressBar":"nJiiRt","progressBar-indeterminate":"Un-0I3","progressBarIndeterminate":"Un-0I3","size-12":"J-wweH","size12":"J-wweH","size-18":"YaxwGL","size18":"YaxwGL","size-24":"gljeGl","size24":"gljeGl"};
|
|
1758
1758
|
|
|
1759
1759
|
const IndeterminateBar = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
1760
1760
|
return (React__namespace.createElement("div", { ref: ref, className: cx__default.default('uui-indeterminate_bar', props.cx, css$1i.root, css$1i[`size-${props.size || 12}`]) },
|
|
1761
1761
|
React__namespace.createElement("div", { className: cx__default.default(css$1i.progressBar) })));
|
|
1762
1762
|
});
|
|
1763
1763
|
|
|
1764
|
-
var css$1h = {"root":"
|
|
1764
|
+
var css$1h = {"root":"ClOpVp","striped":"_8YBwrZ","animate-stripes":"-jpz57","animateStripes":"-jpz57","size-12":"tNDqAh","size12":"tNDqAh","size-18":"EolQHk","size18":"EolQHk","size-24":"JYY2Ik","size24":"JYY2Ik"};
|
|
1765
1765
|
|
|
1766
1766
|
const DEFAULT_SIZE = '12';
|
|
1767
1767
|
function applyProgressBarMods(mods) {
|
|
@@ -1776,14 +1776,14 @@ const ProgressBar = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Pro
|
|
|
1776
1776
|
hideLabel: props.hideLabel || props.striped,
|
|
1777
1777
|
}));
|
|
1778
1778
|
|
|
1779
|
-
var css$1g = {"root":"
|
|
1779
|
+
var css$1g = {"root":"_0mbooH"};
|
|
1780
1780
|
|
|
1781
1781
|
const IndicatorBar = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
1782
1782
|
const { progress } = props;
|
|
1783
1783
|
return progress || progress === 0 ? (React__namespace.createElement(ProgressBar, { ref: ref, progress: progress, cx: cx__default.default(css$1g.root, props.cx), hideLabel: true })) : (React__namespace.createElement(IndeterminateBar, { ref: ref, cx: cx__default.default(css$1g.root, props.cx) }));
|
|
1784
1784
|
});
|
|
1785
1785
|
|
|
1786
|
-
var css$1f = {"root":"
|
|
1786
|
+
var css$1f = {"root":"-Ez8OP"};
|
|
1787
1787
|
|
|
1788
1788
|
const StatusIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
|
|
1789
1789
|
return (React__namespace.default.createElement("div", { ref: ref, className: cx__default.default([
|
|
@@ -1798,7 +1798,7 @@ const StatusIndicator = /* @__PURE__ */React.forwardRef((props, ref) => {
|
|
|
1798
1798
|
React__namespace.default.createElement("p", { className: "uui-status_indicator-caption" }, props.caption)));
|
|
1799
1799
|
});
|
|
1800
1800
|
|
|
1801
|
-
var css$1e = {"root":"
|
|
1801
|
+
var css$1e = {"root":"ONuItu"};
|
|
1802
1802
|
|
|
1803
1803
|
function applyCheckboxMods(mods) {
|
|
1804
1804
|
return [
|
|
@@ -1816,7 +1816,7 @@ const applyUUICheckboxProps = (props) => {
|
|
|
1816
1816
|
};
|
|
1817
1817
|
const Checkbox = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Checkbox, applyCheckboxMods, applyUUICheckboxProps);
|
|
1818
1818
|
|
|
1819
|
-
var css$1d = {"root":"
|
|
1819
|
+
var css$1d = {"root":"JmMFgU"};
|
|
1820
1820
|
|
|
1821
1821
|
function applyRadioInputMods(mods) {
|
|
1822
1822
|
return [
|
|
@@ -1828,7 +1828,7 @@ function applyRadioInputMods(mods) {
|
|
|
1828
1828
|
}
|
|
1829
1829
|
const RadioInput = /* @__PURE__ */uuiCore.withMods(uuiComponents.RadioInput, applyRadioInputMods, (props) => ({ icon: props.icon ? props.icon : settings.radioInput.icons.dotIcon }));
|
|
1830
1830
|
|
|
1831
|
-
var css$1c = {"root":"
|
|
1831
|
+
var css$1c = {"root":"XQzutj"};
|
|
1832
1832
|
|
|
1833
1833
|
function applySwitchMods(mods) {
|
|
1834
1834
|
return [
|
|
@@ -1852,7 +1852,7 @@ var EditMode;
|
|
|
1852
1852
|
EditMode["INLINE"] = "inline";
|
|
1853
1853
|
})(EditMode || (EditMode = {}));
|
|
1854
1854
|
|
|
1855
|
-
var textInputCss = {"root":"
|
|
1855
|
+
var textInputCss = {"root":"hMCzBl"};
|
|
1856
1856
|
|
|
1857
1857
|
const DEFAULT_MODE$3 = EditMode.FORM;
|
|
1858
1858
|
function applyTextInputMods(mods) {
|
|
@@ -1877,7 +1877,7 @@ const SearchInput = /* @__PURE__ */React__namespace.default.forwardRef((props, r
|
|
|
1877
1877
|
} }));
|
|
1878
1878
|
});
|
|
1879
1879
|
|
|
1880
|
-
var css$1b = {"root":"
|
|
1880
|
+
var css$1b = {"root":"BPv3vl"};
|
|
1881
1881
|
|
|
1882
1882
|
const ControlGroup = /* @__PURE__ */uuiCore.withMods(uuiComponents.ControlGroup, () => [css$1b.root, 'uui-control-group']);
|
|
1883
1883
|
|
|
@@ -1893,7 +1893,7 @@ function MultiSwitchComponent(props, ref) {
|
|
|
1893
1893
|
}
|
|
1894
1894
|
const MultiSwitch = /* @__PURE__ */React__namespace.forwardRef(MultiSwitchComponent);
|
|
1895
1895
|
|
|
1896
|
-
var css$1a = {"root":"
|
|
1896
|
+
var css$1a = {"root":"MPAM05"};
|
|
1897
1897
|
|
|
1898
1898
|
const DEFAULT_MODE$2 = EditMode.FORM;
|
|
1899
1899
|
function applyNumericInputMods(mods) {
|
|
@@ -1913,7 +1913,7 @@ const NumericInput = /* @__PURE__ */uuiCore.withMods(uuiComponents.NumericInput,
|
|
|
1913
1913
|
};
|
|
1914
1914
|
});
|
|
1915
1915
|
|
|
1916
|
-
var css$19 = {"root":"
|
|
1916
|
+
var css$19 = {"root":"NvBVoj"};
|
|
1917
1917
|
|
|
1918
1918
|
const DEFAULT_MODE$1 = EditMode.FORM;
|
|
1919
1919
|
function applyTextAreaMods(mods) {
|
|
@@ -1954,7 +1954,7 @@ function TREE_SHAKEABLE_INIT$1() {
|
|
|
1954
1954
|
};
|
|
1955
1955
|
}
|
|
1956
1956
|
|
|
1957
|
-
var css$18 = {"root":"
|
|
1957
|
+
var css$18 = {"root":"wZvAB2"};
|
|
1958
1958
|
|
|
1959
1959
|
function applyDropdownContainerMods(mods) {
|
|
1960
1960
|
return [
|
|
@@ -1965,7 +1965,7 @@ function applyDropdownContainerMods(mods) {
|
|
|
1965
1965
|
}
|
|
1966
1966
|
const DropdownContainer = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.DropdownContainer, applyDropdownContainerMods);
|
|
1967
1967
|
|
|
1968
|
-
var css$17 = {"root":"
|
|
1968
|
+
var css$17 = {"root":"uQskY7","timepicker-input":"pyHstO","timepickerInput":"pyHstO","ltr-always":"wGaM07","ltrAlways":"wGaM07"};
|
|
1969
1969
|
|
|
1970
1970
|
const uuiTimePicker = {
|
|
1971
1971
|
container: 'uui-timepicker-container',
|
|
@@ -2010,11 +2010,11 @@ function TimePickerBody(props) {
|
|
|
2010
2010
|
React__namespace.createElement(uuiComponents.IconContainer, { size: 18, rawProps: { 'aria-label': 'Increment hours' }, cx: uuiTimePicker.iconUp, icon: ForwardRef$P, onClick: () => onHoursChange(uuiDayjs.dayjs().set(props.value).add(1, 'h').hour()) }),
|
|
2011
2011
|
React__namespace.createElement(uuiComponents.NumericInput, { cx: uuiTimePicker.input, onValueChange: onHoursChange, value: +(uuiDayjs.dayjs()
|
|
2012
2012
|
.set(props.value)
|
|
2013
|
-
.format(MAX_HOURS === FORMAT_12H ? 'hh' : 'HH')), isReadonly: true, min: MIN_HOURS, max: MAX_HOURS }),
|
|
2013
|
+
.format(MAX_HOURS === FORMAT_12H ? 'hh' : 'HH')), formatValue: (v) => String(v).padStart(2, '0'), isReadonly: true, min: MIN_HOURS, max: MAX_HOURS }),
|
|
2014
2014
|
React__namespace.createElement(uuiComponents.IconContainer, { size: 18, rawProps: { 'aria-label': 'Decrement hours' }, cx: uuiTimePicker.iconDown, icon: ForwardRef$P, onClick: () => onHoursChange(uuiDayjs.dayjs().set(props.value).subtract(1, 'h').hour()) })),
|
|
2015
2015
|
React__namespace.createElement("div", { className: uuiTimePicker.elementContainer },
|
|
2016
2016
|
React__namespace.createElement(uuiComponents.IconContainer, { size: 18, rawProps: { 'aria-label': 'Increment minutes' }, cx: uuiTimePicker.iconUp, icon: ForwardRef$P, onClick: handleMinutesUpClick }),
|
|
2017
|
-
React__namespace.createElement(uuiComponents.NumericInput, { cx: uuiTimePicker.input, onValueChange: onMinutesChange, value: +uuiDayjs.dayjs().set(props.value).format('m'), isReadonly: true, min: MIN_MINUTES, max: MAX_MINUTES }),
|
|
2017
|
+
React__namespace.createElement(uuiComponents.NumericInput, { cx: uuiTimePicker.input, onValueChange: onMinutesChange, value: +uuiDayjs.dayjs().set(props.value).format('m'), formatValue: (v) => String(v).padStart(2, '0'), isReadonly: true, min: MIN_MINUTES, max: MAX_MINUTES }),
|
|
2018
2018
|
React__namespace.createElement(uuiComponents.IconContainer, { size: 18, rawProps: { 'aria-label': 'Decrement minutes' }, cx: uuiTimePicker.iconDown, icon: ForwardRef$P, onClick: handleMinutesDownClick }))),
|
|
2019
2019
|
MAX_HOURS === FORMAT_12H && (React__namespace.createElement("div", { className: uuiTimePicker.elementContainer },
|
|
2020
2020
|
React__namespace.createElement(uuiComponents.IconContainer, { size: 18, cx: uuiTimePicker.iconUp, icon: ForwardRef$P, onClick: onTimeTypeChange }),
|
|
@@ -2138,11 +2138,15 @@ function TimePickerComponent(props, ref) {
|
|
|
2138
2138
|
if (isTimeValid(result)) {
|
|
2139
2139
|
setState((prevState) => ({ ...prevState, value: result }));
|
|
2140
2140
|
}
|
|
2141
|
+
// save time immediately if the input value is valid
|
|
2142
|
+
if (isTimeValid(newValue)) {
|
|
2143
|
+
saveTime(newValue);
|
|
2144
|
+
}
|
|
2141
2145
|
}
|
|
2142
2146
|
};
|
|
2143
2147
|
const handleBlur = (e) => {
|
|
2144
2148
|
props.onBlur?.(e);
|
|
2145
|
-
if (state.value === '' || state.inputValue === '') {
|
|
2149
|
+
if (state.value === '' || state.inputValue === '' || state.value === null) {
|
|
2146
2150
|
props.onValueChange(null);
|
|
2147
2151
|
setState((prevState) => ({ ...prevState, value: null, inputValue: null }));
|
|
2148
2152
|
}
|
|
@@ -2162,6 +2166,8 @@ function TimePickerComponent(props, ref) {
|
|
|
2162
2166
|
};
|
|
2163
2167
|
const renderInput = (inputProps) => {
|
|
2164
2168
|
return (React__namespace.default.createElement(TextInput, { ...inputProps, size: props.size, isDisabled: props.isDisabled, isReadonly: props.isReadonly, isInvalid: props.isInvalid, cx: [css$17.root, css$17.timepickerInput, props.inputCx], value: state.inputValue, onValueChange: handleInputChange, onCancel: !props.disableClear && onClear, onKeyDown: onKeyDown, onFocus: handleFocus, onBlur: handleBlur, isDropdown: false, placeholder: props.placeholder ? props.placeholder : getFormat(), mode: props.mode || DEFAULT_MODE, rawProps: props.rawProps?.input, ref: (node) => {
|
|
2169
|
+
if (!node)
|
|
2170
|
+
return;
|
|
2165
2171
|
targetRef.current = node;
|
|
2166
2172
|
if (typeof inputProps.ref === 'function') {
|
|
2167
2173
|
inputProps.ref(node);
|
|
@@ -2180,7 +2186,7 @@ function TimePickerComponent(props, ref) {
|
|
|
2180
2186
|
}
|
|
2181
2187
|
const TimePicker = /* @__PURE__ */React__namespace.default.forwardRef(TimePickerComponent);
|
|
2182
2188
|
|
|
2183
|
-
var css$16 = {"root":"
|
|
2189
|
+
var css$16 = {"root":"mSYQeQ"};
|
|
2184
2190
|
|
|
2185
2191
|
function applyInputAddonMods() {
|
|
2186
2192
|
return [
|
|
@@ -2189,14 +2195,14 @@ function applyInputAddonMods() {
|
|
|
2189
2195
|
}
|
|
2190
2196
|
const InputAddon = /* @__PURE__ */uuiCore.withMods(uuiComponents.InputAddon, applyInputAddonMods);
|
|
2191
2197
|
|
|
2192
|
-
var css$15 = {"root":"
|
|
2198
|
+
var css$15 = {"root":"_0T9jml"};
|
|
2193
2199
|
|
|
2194
2200
|
function applySliderMods() {
|
|
2195
2201
|
return [css$15.root, 'uui-color-neutral'];
|
|
2196
2202
|
}
|
|
2197
2203
|
const Slider = /* @__PURE__ */uuiCore.withMods(uuiComponents.Slider, applySliderMods);
|
|
2198
2204
|
|
|
2199
|
-
var css$14 = {"root":"
|
|
2205
|
+
var css$14 = {"root":"OySA86"};
|
|
2200
2206
|
|
|
2201
2207
|
function applyTooltipMods(mods) {
|
|
2202
2208
|
return [
|
|
@@ -2206,7 +2212,7 @@ function applyTooltipMods(mods) {
|
|
|
2206
2212
|
}
|
|
2207
2213
|
const Tooltip = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Tooltip, applyTooltipMods);
|
|
2208
2214
|
|
|
2209
|
-
var css$13 = {"root":"
|
|
2215
|
+
var css$13 = {"root":"OqYx-a","tooltip":"-VZob5"};
|
|
2210
2216
|
|
|
2211
2217
|
function applyRatingMods(mods) {
|
|
2212
2218
|
return [
|
|
@@ -2220,10 +2226,13 @@ const Rating = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Rating,
|
|
|
2220
2226
|
Tooltip,
|
|
2221
2227
|
}));
|
|
2222
2228
|
|
|
2223
|
-
var css$12 = {"drag-handle-wrapper":"
|
|
2229
|
+
var css$12 = {"drag-handle-wrapper":"RZxDvE","dragHandleWrapper":"RZxDvE","with-indent":"_6omlAl","withIndent":"_6omlAl","drag-handle":"qN7vvv","dragHandle":"qN7vvv","icon-container":"Y7UjiS","iconContainer":"Y7UjiS"};
|
|
2224
2230
|
|
|
2225
2231
|
function DataRowAddons(props) {
|
|
2226
2232
|
const row = props.rowProps;
|
|
2233
|
+
const checkboxSize = settings.dataTable.sizes.body.checkboxMap[props.size];
|
|
2234
|
+
const isCheckboxVisible = row?.checkbox?.isVisible;
|
|
2235
|
+
const reserveCheckboxSpace = row?.checkbox?.reserveSpace;
|
|
2227
2236
|
const getIndent = () => {
|
|
2228
2237
|
return (row.indent - 1) * settings.dataTable.sizes.body.indentUnitMap[props.size || settings.dataTable.sizes.body.row];
|
|
2229
2238
|
};
|
|
@@ -2244,7 +2253,8 @@ function DataRowAddons(props) {
|
|
|
2244
2253
|
};
|
|
2245
2254
|
return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
|
|
2246
2255
|
row.dnd?.srcData && renderDragHandle(),
|
|
2247
|
-
|
|
2256
|
+
isCheckboxVisible && (React__namespace.default.createElement(Checkbox, { key: "cb", cx: "uui-dr_addons-checkbox", tabIndex: props.tabIndex, size: checkboxSize, value: row.isChecked, indeterminate: !row.isChecked && row.isChildrenChecked, onValueChange: () => row.onCheck?.(row), isDisabled: row.checkbox.isDisabled, isInvalid: row.checkbox.isInvalid, rawProps: { 'aria-label': 'Select' } })),
|
|
2257
|
+
!isCheckboxVisible && reserveCheckboxSpace && (React__namespace.default.createElement("div", { key: "cb-spacer", className: cx__default.default('uui-checkbox-container', 'uui-dr_addons-checkbox-spacer', `uui-size-${checkboxSize}`), "aria-hidden": "true" })),
|
|
2248
2258
|
row.indent > 0 && (React__namespace.default.createElement("div", { key: "fold", className: cx__default.default('uui-dr_addons-indent', `uui-size-${props.size || settings.dataTable.sizes.body.row}`), style: { marginInlineStart: getIndent(), width: getWidth() } }, row.isFoldable && (React__namespace.default.createElement(uuiComponents.ControlIcon, { rawProps: {
|
|
2249
2259
|
'aria-label': row.isFolded ? 'Unfold' : 'Fold',
|
|
2250
2260
|
role: 'button',
|
|
@@ -2282,6 +2292,7 @@ function VerticalTabButtonComponent(props, ref) {
|
|
|
2282
2292
|
const ClearIcon = props.clearIcon ? props.clearIcon : settings.verticalTabButton.icons.clearIcon;
|
|
2283
2293
|
return (React__namespace.default.createElement(uuiComponents.Clickable, { ...props, onClick: props.onClick || props.onFold, rawProps: {
|
|
2284
2294
|
role: 'tab',
|
|
2295
|
+
'aria-selected': isActive,
|
|
2285
2296
|
...props.rawProps,
|
|
2286
2297
|
}, cx: styles, ref: ref },
|
|
2287
2298
|
props.indent > 0 && (React__namespace.default.createElement("div", { key: "fold", className: uuiCore.cx(css$1n.foldingArea, props.onFold && uuiCore.uuiMarkers.clickable), style: { '--uui-folding-indent': `${props.indent - 1}` }, onClick: props.onFold }, props.isFoldable && (React__namespace.default.createElement(uuiComponents.IconContainer, { rawProps: {
|
|
@@ -2302,7 +2313,7 @@ function VerticalTabButtonComponent(props, ref) {
|
|
|
2302
2313
|
}
|
|
2303
2314
|
const VerticalTabButton = /* @__PURE__ */React__namespace.default.forwardRef(VerticalTabButtonComponent);
|
|
2304
2315
|
|
|
2305
|
-
var css$11 = {"root":"
|
|
2316
|
+
var css$11 = {"root":"suPfV7","main-path":"GqksXy","mainPath":"GqksXy","content-wrapper":"-N7JSJ","contentWrapper":"-N7JSJ","content":"sn-tUw","action-wrapper":"pAzBw1","actionWrapper":"pAzBw1","icon-wrapper":"JdDOMV","iconWrapper":"JdDOMV","icon":"Bp4zdQ","close-icon":"sSZgE3","closeIcon":"sSZgE3"};
|
|
2306
2317
|
|
|
2307
2318
|
const Alert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => (React__namespace.createElement("div", { role: "alert", ref: ref, className: cx__default.default('uui-alert', css$11.root, props.color && `uui-color-${props.color}`, props.cx, `uui-size-${props.size || settings.alert.sizes.default}`), ...props.rawProps },
|
|
2308
2319
|
React__namespace.createElement("div", { className: css$11.mainPath },
|
|
@@ -2320,7 +2331,7 @@ const ErrorAlert = /* @__PURE__ */React__namespace.forwardRef((props, ref) => Re
|
|
|
2320
2331
|
|
|
2321
2332
|
const Dropdown = /* @__PURE__ */uuiCore.withMods(uuiComponents.Dropdown);
|
|
2322
2333
|
|
|
2323
|
-
var css$10 = {"submenu-root-item-rtl":"
|
|
2334
|
+
var css$10 = {"submenu-root-item-rtl":"_8sezyH","submenuRootItemRtl":"_8sezyH","icon-after":"_2tkap9","iconAfter":"_2tkap9","submenu-root-item":"_7b-9d4","submenuRootItem":"_7b-9d4","icon-check":"K4cfYl","iconCheck":"K4cfYl","splitter-root":"gUr7g6","splitterRoot":"gUr7g6","splitter":"A6ftY9","header-root":"_85nMHp","headerRoot":"_85nMHp","item-root":"m-YPSQ","itemRoot":"m-YPSQ","icon":"_0nKtmu","link":"nvd2aA","indent":"yJQ5rE","selected-mark":"T6eITy","selectedMark":"T6eITy"};
|
|
2324
2335
|
|
|
2325
2336
|
exports.IDropdownControlKeys = void 0;
|
|
2326
2337
|
(function (IDropdownControlKeys) {
|
|
@@ -2337,7 +2348,7 @@ function DropdownMenuContainer(props) {
|
|
|
2337
2348
|
const getMenuItems = () => {
|
|
2338
2349
|
if (!menuRef.current)
|
|
2339
2350
|
return [];
|
|
2340
|
-
return Array.from(menuRef.current.querySelectorAll(`[role
|
|
2351
|
+
return Array.from(menuRef.current.querySelectorAll(`[role^="menuitem"]:not(.${uuiCore.uuiMod.disabled})`));
|
|
2341
2352
|
};
|
|
2342
2353
|
const changeFocus = (nextFocusedIndex) => {
|
|
2343
2354
|
const menuItems = getMenuItems();
|
|
@@ -2404,7 +2415,7 @@ const DropdownMenuButton = /* @__PURE__ */React__namespace.default.forwardRef((p
|
|
|
2404
2415
|
};
|
|
2405
2416
|
const isAnchor = Boolean(link || href);
|
|
2406
2417
|
const itemClassNames = uuiCore.cx(props.cx, css$10.itemRoot, isDisabled && uuiCore.uuiMod.disabled, isActive && uuiCore.uuiMod.active, isOpen && uuiCore.uuiMod.opened, (!isDisabled && onClick) && uuiCore.uuiMarkers.clickable);
|
|
2407
|
-
return isAnchor ? (React__namespace.default.createElement(uuiComponents.Anchor, { cx: uuiCore.cx(css$10.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0 }, onClick: handleClick, isDisabled: isDisabled, target: target }, getMenuButtonContent())) : (React__namespace.default.createElement("div", { tabIndex: isDisabled ? -1 : 0, role: "menuitem", onKeyDown: isDisabled ? null : handleOpenDropdown, className: itemClassNames, onClick: handleClick, ref: ref },
|
|
2418
|
+
return isAnchor ? (React__namespace.default.createElement(uuiComponents.Anchor, { cx: uuiCore.cx(css$10.link, itemClassNames), link: link, href: href, rawProps: { role: 'menuitem', tabIndex: isDisabled ? -1 : 0, ...props.rawProps }, onClick: handleClick, isDisabled: isDisabled, target: target }, getMenuButtonContent())) : (React__namespace.default.createElement("div", { tabIndex: isDisabled ? -1 : 0, role: "menuitem", onKeyDown: isDisabled ? null : handleOpenDropdown, className: itemClassNames, onClick: handleClick, ref: ref, ...props.rawProps },
|
|
2408
2419
|
getMenuButtonContent(),
|
|
2409
2420
|
isSelected && (React__namespace.default.createElement(React__namespace.default.Fragment, null,
|
|
2410
2421
|
React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
|
|
@@ -2435,6 +2446,7 @@ function DropdownSubMenu(props) {
|
|
|
2435
2446
|
}
|
|
2436
2447
|
function DropdownMenuSwitchButton(props) {
|
|
2437
2448
|
const context = React.useContext(uuiCore.UuiContext);
|
|
2449
|
+
const switchRef = React.useRef(null);
|
|
2438
2450
|
const { icon, caption, isDisabled, isSelected, onValueChange, } = props;
|
|
2439
2451
|
const onHandleValueChange = (value) => {
|
|
2440
2452
|
if (isDisabled || !onValueChange)
|
|
@@ -2447,14 +2459,20 @@ function DropdownMenuSwitchButton(props) {
|
|
|
2447
2459
|
onHandleValueChange(!isSelected);
|
|
2448
2460
|
}
|
|
2449
2461
|
};
|
|
2450
|
-
|
|
2462
|
+
const handleClick = (event) => {
|
|
2463
|
+
const isSwitchClicked = switchRef.current?.contains(event.target);
|
|
2464
|
+
if (isSwitchClicked)
|
|
2465
|
+
return;
|
|
2466
|
+
onHandleValueChange(!isSelected);
|
|
2467
|
+
};
|
|
2468
|
+
return (React__namespace.default.createElement("div", { className: uuiCore.cx(props.cx, css$10.itemRoot, isDisabled && uuiCore.uuiMod.disabled, (!isDisabled || onValueChange) && uuiCore.uuiMarkers.clickable), onClick: handleClick, role: "menuitem", onKeyDown: handleKeySelect, tabIndex: isDisabled ? -1 : 0 },
|
|
2451
2469
|
icon && React__namespace.default.createElement(uuiComponents.IconContainer, { icon: icon, cx: css$10.iconBefore }),
|
|
2452
2470
|
React__namespace.default.createElement(uuiComponents.Text, null, caption),
|
|
2453
2471
|
React__namespace.default.createElement(uuiComponents.FlexSpacer, null),
|
|
2454
|
-
React__namespace.default.createElement(Switch, { value: isSelected, tabIndex: -1, onValueChange: onHandleValueChange })));
|
|
2472
|
+
React__namespace.default.createElement(Switch, { value: isSelected, tabIndex: -1, onValueChange: onHandleValueChange, ref: switchRef })));
|
|
2455
2473
|
}
|
|
2456
2474
|
|
|
2457
|
-
var css$$ = {"root":"
|
|
2475
|
+
var css$$ = {"root":"PcyFZ3","mode-block":"-hovKu","modeBlock":"-hovKu","mode-inline":"_7uG285","modeInline":"_7uG285","padding-0":"MsI11x","padding0":"MsI11x","padding-6":"xfO-1U","padding6":"xfO-1U","padding-12":"jQJc2I","padding12":"jQJc2I","padding-18":"dEVGd2","padding18":"dEVGd2"};
|
|
2458
2476
|
|
|
2459
2477
|
function applyAccordionMods(mods) {
|
|
2460
2478
|
return [
|
|
@@ -2467,7 +2485,7 @@ const Accordion = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.Accor
|
|
|
2467
2485
|
dropdownIcon: mods.dropdownIcon !== null && settings.accordion.icons.dropdownIcon,
|
|
2468
2486
|
}));
|
|
2469
2487
|
|
|
2470
|
-
var css$_ = {"root":"
|
|
2488
|
+
var css$_ = {"root":"ikdE6t","align-items":"NQh8KE","alignItems":"NQh8KE","justify-content":"_8UUkKu","justifyContent":"_8UUkKu","border-top":"E1eUd7","borderTop":"E1eUd7","border-bottom":"FpoPsZ","borderBottom":"FpoPsZ","top-shadow":"i8Vw0o","topShadow":"i8Vw0o","padding":"cbGu2X","margin":"OqFcqI","vPadding":"lcmsET","column-gap":"_4jB8Qh","columnGap":"_4jB8Qh","row-gap":"CNZhiF","rowGap":"CNZhiF","spacing":"TrD3JA"};
|
|
2471
2489
|
|
|
2472
2490
|
const FlexCell = /* @__PURE__ */uuiCore.withMods(uuiComponents.FlexCell, () => [css$_.flexCell]);
|
|
2473
2491
|
|
|
@@ -2519,7 +2537,7 @@ const FlexRow = /* @__PURE__ */React.forwardRef((props, ref) => {
|
|
|
2519
2537
|
} }, props.children));
|
|
2520
2538
|
});
|
|
2521
2539
|
|
|
2522
|
-
var css$Z = {"root":"
|
|
2540
|
+
var css$Z = {"root":"mdSWEE","margin-24":"_2nytQ-","margin24":"_2nytQ-","padding-12":"GMGJf2","padding12":"GMGJf2","padding-24":"u-TmU9","padding24":"u-TmU9","shadow":"GJha7t","uui-surface-main":"BHP0Yp","uuiSurfaceMain":"BHP0Yp"};
|
|
2523
2541
|
|
|
2524
2542
|
const Panel = /* @__PURE__ */uuiCore.withMods(uuiComponents.VPanel, (props) => [
|
|
2525
2543
|
'uui-panel',
|
|
@@ -2529,7 +2547,7 @@ const Panel = /* @__PURE__ */uuiCore.withMods(uuiComponents.VPanel, (props) => [
|
|
|
2529
2547
|
props.background && css$Z[`uui-${props.background}`],
|
|
2530
2548
|
]);
|
|
2531
2549
|
|
|
2532
|
-
var css$Y = {"root":"
|
|
2550
|
+
var css$Y = {"root":"a0b0i-"};
|
|
2533
2551
|
|
|
2534
2552
|
function applyLabeledInputMods(mods) {
|
|
2535
2553
|
return [
|
|
@@ -2551,7 +2569,7 @@ function applyLabeledInputProps(props) {
|
|
|
2551
2569
|
}
|
|
2552
2570
|
const LabeledInput = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.LabeledInput, applyLabeledInputMods, applyLabeledInputProps);
|
|
2553
2571
|
|
|
2554
|
-
var css$X = {"root":"
|
|
2572
|
+
var css$X = {"root":"cKPomo"};
|
|
2555
2573
|
|
|
2556
2574
|
function RadioGroup(props) {
|
|
2557
2575
|
const direction = props.direction || 'vertical';
|
|
@@ -2566,7 +2584,7 @@ function RadioGroup(props) {
|
|
|
2566
2584
|
})));
|
|
2567
2585
|
}
|
|
2568
2586
|
|
|
2569
|
-
var css$W = {"root":"
|
|
2587
|
+
var css$W = {"root":"Yc1hqI","viewport":"AR-rKK"};
|
|
2570
2588
|
|
|
2571
2589
|
var uuiScrollbars;
|
|
2572
2590
|
(function (uuiScrollbars) {
|
|
@@ -2576,16 +2594,25 @@ var uuiScrollbars;
|
|
|
2576
2594
|
uuiScrollbars["uuiLineBottom"] = "uui-line-bottom";
|
|
2577
2595
|
})(uuiScrollbars || (uuiScrollbars = {}));
|
|
2578
2596
|
const ScrollBars = /* @__PURE__ */React.forwardRef((props, ref) => {
|
|
2579
|
-
const { cx: outerCx, children, overflowTopEffect = 'none', overflowBottomEffect = 'none', onScroll, autoHide = 'never', autoHideDelay, rawProps, ...rest } = props;
|
|
2597
|
+
const { cx: outerCx, children, overflowTopEffect = 'none', overflowBottomEffect = 'none', onScroll, autoHide = 'never', autoHideDelay, elementEvents, rawProps, ...rest } = props;
|
|
2580
2598
|
const [shadowElements, setShadowElements] = React.useState({
|
|
2581
2599
|
host: null,
|
|
2582
2600
|
viewport: null,
|
|
2583
2601
|
});
|
|
2584
2602
|
const hostRef = React.useRef(null);
|
|
2585
2603
|
const viewportRef = React.useRef(null);
|
|
2586
|
-
const
|
|
2604
|
+
const elementEventsEffective = React.useMemo(() => {
|
|
2605
|
+
const result = [['img', 'load']]; // this is default
|
|
2606
|
+
if (elementEvents && elementEvents.length > 0) {
|
|
2607
|
+
result.push(...elementEvents);
|
|
2608
|
+
}
|
|
2609
|
+
return result;
|
|
2610
|
+
}, [elementEvents]);
|
|
2587
2611
|
const [initialize, osInstance] = overlayscrollbarsReact.useOverlayScrollbars({
|
|
2588
2612
|
options: {
|
|
2613
|
+
update: {
|
|
2614
|
+
elementEvents: elementEventsEffective,
|
|
2615
|
+
},
|
|
2589
2616
|
scrollbars: {
|
|
2590
2617
|
theme: 'uui-scroll-bars',
|
|
2591
2618
|
autoHide: autoHide,
|
|
@@ -2627,7 +2654,7 @@ const ScrollBars = /* @__PURE__ */React.forwardRef((props, ref) => {
|
|
|
2627
2654
|
uuiCore.useScrollShadows(shadowElements.host, shadowElements.viewport);
|
|
2628
2655
|
React.useImperativeHandle(ref, () => {
|
|
2629
2656
|
return {
|
|
2630
|
-
container:
|
|
2657
|
+
container: hostRef.current,
|
|
2631
2658
|
view: viewportRef.current,
|
|
2632
2659
|
};
|
|
2633
2660
|
}, []);
|
|
@@ -2636,7 +2663,7 @@ const ScrollBars = /* @__PURE__ */React.forwardRef((props, ref) => {
|
|
|
2636
2663
|
});
|
|
2637
2664
|
ScrollBars.displayName = 'ScrollBars';
|
|
2638
2665
|
|
|
2639
|
-
var css$V = {"scroll-container":"
|
|
2666
|
+
var css$V = {"scroll-container":"gugpxO","scrollContainer":"gugpxO","list-container":"DtcsB0","listContainer":"DtcsB0"};
|
|
2640
2667
|
|
|
2641
2668
|
const VirtualList = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
|
|
2642
2669
|
const { listContainerRef, offsetY, handleScroll, estimatedHeight, scrollContainerRef, } = uuiCore.useVirtualList({
|
|
@@ -2645,8 +2672,11 @@ const VirtualList = /* @__PURE__ */React__namespace.default.forwardRef((props, r
|
|
|
2645
2672
|
onScroll: props.onScroll,
|
|
2646
2673
|
rowsCount: props.rowsCount,
|
|
2647
2674
|
rowsSelector: props.rowsSelector,
|
|
2675
|
+
rowHeight: props.rowHeight,
|
|
2676
|
+
rowGap: props.rowGap,
|
|
2648
2677
|
});
|
|
2649
2678
|
React__namespace.default.useImperativeHandle(ref, () => scrollContainerRef.current, [scrollContainerRef.current]);
|
|
2679
|
+
const [blockerInset, setBlockerInset] = React__namespace.default.useState(null);
|
|
2650
2680
|
const renderRows = () => props.renderRows?.({
|
|
2651
2681
|
listContainerRef, estimatedHeight, offsetY,
|
|
2652
2682
|
}) || (React__namespace.default.createElement("div", { className: css$V.listContainer, style: { minHeight: `${estimatedHeight}px` } },
|
|
@@ -2656,9 +2686,28 @@ const VirtualList = /* @__PURE__ */React__namespace.default.forwardRef((props, r
|
|
|
2656
2686
|
return;
|
|
2657
2687
|
scrollContainerRef.current = scrollbars.view;
|
|
2658
2688
|
}, []);
|
|
2659
|
-
|
|
2689
|
+
const rawProps = React__namespace.default.useMemo(() => ({
|
|
2690
|
+
...(props.rawProps ?? {}),
|
|
2691
|
+
style: {
|
|
2692
|
+
...(props.rawProps?.style ?? {}),
|
|
2693
|
+
overflow: props.isLoading ? 'hidden' : props.rawProps?.style?.overflow,
|
|
2694
|
+
},
|
|
2695
|
+
}), [props.rawProps, props.isLoading]);
|
|
2696
|
+
const updateBlockerInset = React__namespace.default.useCallback(() => {
|
|
2697
|
+
const scrollContainer = scrollContainerRef.current;
|
|
2698
|
+
if (!scrollContainer)
|
|
2699
|
+
return;
|
|
2700
|
+
const { scrollTop, scrollLeft } = scrollContainer;
|
|
2701
|
+
setBlockerInset({ top: scrollTop, left: scrollLeft, right: -scrollLeft, bottom: -scrollTop });
|
|
2702
|
+
}, [setBlockerInset]);
|
|
2703
|
+
React__namespace.default.useEffect(() => {
|
|
2704
|
+
if (props.isLoading) {
|
|
2705
|
+
updateBlockerInset();
|
|
2706
|
+
}
|
|
2707
|
+
}, [props.isLoading, updateBlockerInset]);
|
|
2708
|
+
return (React__namespace.default.createElement(ScrollBars, { cx: uuiCore.cx(css$V.scrollContainer, props.cx), onScroll: handleScroll, ref: scrollBarsRef, rawProps: rawProps, overflowTopEffect: props.overflowTopEffect, overflowBottomEffect: props.overflowBottomEffect, autoHide: props.isLoading ? 'scroll' : undefined },
|
|
2660
2709
|
renderRows(),
|
|
2661
|
-
React__namespace.default.createElement(Blocker, { isEnabled: props.isLoading })));
|
|
2710
|
+
React__namespace.default.createElement(Blocker, { isEnabled: props.isLoading, inset: blockerInset })));
|
|
2662
2711
|
});
|
|
2663
2712
|
|
|
2664
2713
|
const RichTextView = /* @__PURE__ */uuiCore.withMods(uuiComponents__namespace.RichTextView, (mods) => ['uui-typography', `uui-typography-size-${mods.size || settings.richTextView.sizes.default}`]);
|
|
@@ -2689,7 +2738,7 @@ function Tree(props) {
|
|
|
2689
2738
|
return (React__namespace.createElement(VirtualList, { value: value, onValueChange: onValueChange, rowsCount: rowsCount, rows: renderedRows, cx: uuiCore.cx(propsCx), role: "tree" }));
|
|
2690
2739
|
}
|
|
2691
2740
|
|
|
2692
|
-
var css$U = {"root":"
|
|
2741
|
+
var css$U = {"root":"lMXYuJ"};
|
|
2693
2742
|
|
|
2694
2743
|
function CheckboxGroup(props) {
|
|
2695
2744
|
const currentValue = props.value || [];
|
|
@@ -2791,7 +2840,7 @@ const Tabs = /* @__PURE__ */React.forwardRef((props, ref) => {
|
|
|
2791
2840
|
});
|
|
2792
2841
|
Tabs.displayName = 'Tabs';
|
|
2793
2842
|
|
|
2794
|
-
var css$T = {"root":"
|
|
2843
|
+
var css$T = {"root":"_4yUjfz","modal-blocker":"TX5p8-","modalBlocker":"TX5p8-","animateModalBlocker":"qsInCo","modal":"_2Ks58T","modal-footer":"qmTu-7","modalFooter":"qmTu-7","border-top":"_6W15ve","borderTop":"_6W15ve","modal-header":"kBqnuN","modalHeader":"kBqnuN","border-bottom":"mGXFEu","borderBottom":"mGXFEu"};
|
|
2795
2844
|
|
|
2796
2845
|
const ModalBlocker = /* @__PURE__ */uuiCore.withMods(uuiComponents.ModalBlocker, () => [css$T.modalBlocker]);
|
|
2797
2846
|
const ModalWindow = /* @__PURE__ */uuiCore.withMods(uuiComponents.ModalWindow, () => [css$T.root, css$T.modal], (props) => {
|
|
@@ -2898,6 +2947,7 @@ const TREE_SHAKEABLE_INIT = () => ({
|
|
|
2898
2947
|
columnHeader: {
|
|
2899
2948
|
collapseAllTooltip: 'Collapse All',
|
|
2900
2949
|
expandAllTooltip: 'Expand All',
|
|
2950
|
+
filterActiveLabel: 'filter active',
|
|
2901
2951
|
},
|
|
2902
2952
|
},
|
|
2903
2953
|
pickerFilterHeader: {
|
|
@@ -2983,7 +3033,7 @@ const TREE_SHAKEABLE_INIT = () => ({
|
|
|
2983
3033
|
});
|
|
2984
3034
|
const i18n = /* @__PURE__ */TREE_SHAKEABLE_INIT();
|
|
2985
3035
|
|
|
2986
|
-
var css$S = {"root":"
|
|
3036
|
+
var css$S = {"root":"VCuR5k","icon-wrapper":"prqZvp","iconWrapper":"prqZvp","action-wrapper":"X-IzMp","actionWrapper":"X-IzMp","close-icon":"_3EZ22P","closeIcon":"_3EZ22P","main-path":"QDcskl","mainPath":"QDcskl","content":"J9j7nF","close-wrapper":"Cq64U-","closeWrapper":"Cq64U-","clear-notifications":"M5PhB8","clearNotifications":"M5PhB8"};
|
|
2987
3037
|
|
|
2988
3038
|
const NotificationCard = /* @__PURE__ */React__namespace.default.forwardRef((props, ref) => {
|
|
2989
3039
|
const notificationCardNode = React__namespace.default.useRef(null);
|
|
@@ -3016,7 +3066,7 @@ function ClearNotification() {
|
|
|
3016
3066
|
React__namespace.default.createElement(LinkButton, { caption: i18n.notificationCard.closeAllNotificationsButton, onClick: () => uuiCtx.uuiNotifications.clearAll() })));
|
|
3017
3067
|
}
|
|
3018
3068
|
|
|
3019
|
-
var css$R = {"footer":"
|
|
3069
|
+
var css$R = {"footer":"J56wd0"};
|
|
3020
3070
|
|
|
3021
3071
|
class ConfirmationModal extends React__namespace.Component {
|
|
3022
3072
|
render() {
|
|
@@ -3058,7 +3108,7 @@ function useReliableForceUpdate() {
|
|
|
3058
3108
|
return red[1];
|
|
3059
3109
|
}
|
|
3060
3110
|
|
|
3061
|
-
var css$Q = {"root":"
|
|
3111
|
+
var css$Q = {"root":"CGEeiF","container":"vi-Ish"};
|
|
3062
3112
|
|
|
3063
3113
|
const defaultFormat = 'MMM D, YYYY';
|
|
3064
3114
|
const valueFormat = 'YYYY-MM-DD';
|
|
@@ -3285,14 +3335,14 @@ function DatePickerHeader({ navIconLeft, navIconRight, value: { month, view }, o
|
|
|
3285
3335
|
React__namespace.createElement(Button, { icon: navIconRight || settings.datePicker.icons.body.nextIcon, color: "secondary", fill: "ghost", cx: uuiHeader.navIconRight, onClick: !isDisabled && (() => onRightNavigationArrow()), isDisabled: disableNext }))));
|
|
3286
3336
|
}
|
|
3287
3337
|
|
|
3288
|
-
var css$P = {"root":"
|
|
3338
|
+
var css$P = {"root":"EXKo7e"};
|
|
3289
3339
|
|
|
3290
3340
|
function applyDateSelectionMods() {
|
|
3291
3341
|
return [css$P.root, `uui-size-${settings.datePicker.sizes.body}`];
|
|
3292
3342
|
}
|
|
3293
3343
|
const Calendar = /* @__PURE__ */uuiCore.withMods(uuiComponents.Calendar, applyDateSelectionMods);
|
|
3294
3344
|
|
|
3295
|
-
var css$O = {"root":"
|
|
3345
|
+
var css$O = {"root":"fM4MRI"};
|
|
3296
3346
|
|
|
3297
3347
|
const uuiDatePickerBody = {
|
|
3298
3348
|
wrapper: 'uui-datepicker-body-wrapper',
|
|
@@ -3358,7 +3408,8 @@ function DatePickerComponent(props, ref) {
|
|
|
3358
3408
|
setInputValue(toCustomDateFormat(value, format));
|
|
3359
3409
|
}, [value, setInputValue]);
|
|
3360
3410
|
const onValueChange = (newValue) => {
|
|
3361
|
-
|
|
3411
|
+
const isValueChanged = (value || '') !== (newValue || '');
|
|
3412
|
+
if (isValueChanged) {
|
|
3362
3413
|
props.onValueChange(newValue);
|
|
3363
3414
|
if (props.getValueChangeAnalyticsEvent) {
|
|
3364
3415
|
const event = props.getValueChangeAnalyticsEvent(newValue, value);
|
|
@@ -3373,6 +3424,10 @@ function DatePickerComponent(props, ref) {
|
|
|
3373
3424
|
};
|
|
3374
3425
|
const onBlur = (e) => {
|
|
3375
3426
|
props.onBlur?.(e);
|
|
3427
|
+
const formattedValue = toCustomDateFormat(value, format);
|
|
3428
|
+
if (inputValue === formattedValue) {
|
|
3429
|
+
return; // No changes made to the field, skip validation
|
|
3430
|
+
}
|
|
3376
3431
|
if (isValidDate(inputValue, format, props.filter)) {
|
|
3377
3432
|
setInputValue(toCustomDateFormat(inputValue, format));
|
|
3378
3433
|
onValueChange(toValueDateFormat(inputValue, format));
|
|
@@ -3401,7 +3456,7 @@ function DatePickerComponent(props, ref) {
|
|
|
3401
3456
|
props.onFocus?.(e);
|
|
3402
3457
|
}, onKeyDown: onInputKeyDown, onBlur: onBlur, mode: props.mode || defaultMode$1, rawProps: props.rawProps?.input, id: props.id }));
|
|
3403
3458
|
};
|
|
3404
|
-
const renderBody = React.useMemo(() => (renderProps)
|
|
3459
|
+
const renderBody = React.useMemo(() => function (renderProps) {
|
|
3405
3460
|
return (React__namespace.default.createElement(DropdownContainer, { ...renderProps },
|
|
3406
3461
|
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, initialViewMonth: props.initialViewMonth }),
|
|
3407
3462
|
props.renderFooter?.()));
|
|
@@ -3414,7 +3469,7 @@ function DatePickerComponent(props, ref) {
|
|
|
3414
3469
|
}
|
|
3415
3470
|
const DatePicker = /* @__PURE__ */React__namespace.default.forwardRef(DatePickerComponent);
|
|
3416
3471
|
|
|
3417
|
-
var css$N = {"date-input":"
|
|
3472
|
+
var css$N = {"date-input":"f61-sG","dateInput":"f61-sG","root":"g7GnjG","separator":"awlDd6"};
|
|
3418
3473
|
|
|
3419
3474
|
const RangeDatePickerInput = /* @__PURE__ */React.forwardRef(({ isDisabled, isInvalid, isReadonly, size, disableClear, rawProps, value, inFocus, format, onValueChange, onFocusInput, onBlurInput, onClick, getPlaceholder, filter, onKeyDown, preventEmptyFromDate, preventEmptyToDate, id, cx: classes, }, ref) => {
|
|
3420
3475
|
const [inputValue, setInputValue] = React.useState(toCustomDateRangeFormat(value, format));
|
|
@@ -3437,6 +3492,10 @@ const RangeDatePickerInput = /* @__PURE__ */React.forwardRef(({ isDisabled, isIn
|
|
|
3437
3492
|
};
|
|
3438
3493
|
const handleBlur = (event, inputType) => {
|
|
3439
3494
|
onBlurInput?.(event, inputType);
|
|
3495
|
+
const formattedValue = toCustomDateRangeFormat(value, format);
|
|
3496
|
+
if (inputValue[inputType] === formattedValue[inputType]) {
|
|
3497
|
+
return; // No changes made to this field, skip validation
|
|
3498
|
+
}
|
|
3440
3499
|
const canBeEmpty = {
|
|
3441
3500
|
from: !preventEmptyFromDate,
|
|
3442
3501
|
to: !preventEmptyToDate,
|
|
@@ -3487,7 +3546,7 @@ const RangeDatePickerInput = /* @__PURE__ */React.forwardRef(({ isDisabled, isIn
|
|
|
3487
3546
|
React__namespace.default.createElement(TextInput, { cx: uuiCore.cx(css$N.dateInput, inFocus === 'to' && uuiCore.uuiMod.focus), placeholder: getPlaceholder ? getPlaceholder('to') : i18n.rangeDatePicker.pickerPlaceholderTo, size: size || settings.rangeDatePicker.sizes.default, value: inputValue.to || undefined, icon: clearAllowed && ForwardRef$Q, iconPosition: "right", iconLabel: "Clear selected date range", onIconClick: onClear, 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 })));
|
|
3488
3547
|
});
|
|
3489
3548
|
|
|
3490
|
-
var css$M = {"root":"
|
|
3549
|
+
var css$M = {"root":"FE5uLX"};
|
|
3491
3550
|
|
|
3492
3551
|
const uuiPresets = {
|
|
3493
3552
|
container: 'uui-presets-container',
|
|
@@ -3507,7 +3566,7 @@ function CalendarPresets(props) {
|
|
|
3507
3566
|
getPresets(props.presets).map((item) => (React__namespace.createElement(LinkButton, { key: item.key, caption: item.name, onClick: () => props.onPresetSet(item), size: settings.rangeDatePicker.sizes.preset })))));
|
|
3508
3567
|
}
|
|
3509
3568
|
|
|
3510
|
-
var css$L = {"root":"
|
|
3569
|
+
var css$L = {"root":"g-Uh-a","container":"chyhsa","day-selection":"o1UhI-","daySelection":"o1UhI-","from-picker":"_9tzbXn","fromPicker":"_9tzbXn","to-picker":"wJloKY","toPicker":"wJloKY","bodes-wrapper":"R7HbPd","bodesWrapper":"R7HbPd","blocker":"VyzdAJ"};
|
|
3511
3570
|
|
|
3512
3571
|
const uuiRangeDatePickerBody = {
|
|
3513
3572
|
inRange: 'uui-range-datepicker-in-range',
|
|
@@ -3709,7 +3768,7 @@ const getDayState = (day, selectedDate) => {
|
|
|
3709
3768
|
};
|
|
3710
3769
|
};
|
|
3711
3770
|
|
|
3712
|
-
var css$K = {"dropdown-container":"
|
|
3771
|
+
var css$K = {"dropdown-container":"uKTNuw","dropdownContainer":"uKTNuw"};
|
|
3713
3772
|
|
|
3714
3773
|
function RangeDatePickerComponent(props, ref) {
|
|
3715
3774
|
const { value: _value, format = defaultFormat, size = settings.rangeDatePicker.sizes.default } = props;
|
|
@@ -3777,7 +3836,7 @@ function RangeDatePickerComponent(props, ref) {
|
|
|
3777
3836
|
}
|
|
3778
3837
|
const RangeDatePicker = /* @__PURE__ */React__namespace.default.forwardRef(RangeDatePickerComponent);
|
|
3779
3838
|
|
|
3780
|
-
var css$J = {"root":"
|
|
3839
|
+
var css$J = {"root":"u7dZKH","blocker":"Uk3hQU","marker":"xeke1m","top":"B0TIVy","bottom":"_85B0uh","left":"ePl0zr","right":"_4R6YIi","inside":"gEBKHQ"};
|
|
3781
3840
|
|
|
3782
3841
|
function DropMarker(props) {
|
|
3783
3842
|
return props.isDndInProgress
|
|
@@ -3792,9 +3851,9 @@ function DropMarker(props) {
|
|
|
3792
3851
|
: null;
|
|
3793
3852
|
}
|
|
3794
3853
|
|
|
3795
|
-
var css$I = {"root":"
|
|
3854
|
+
var css$I = {"root":"tMJiQm","search-wrapper":"fhZFAT","searchWrapper":"fhZFAT","no-data":"WMkNix","noData":"WMkNix","empty-status-announcer":"bvtPB7","emptyStatusAnnouncer":"bvtPB7"};
|
|
3796
3855
|
|
|
3797
|
-
var css$H = {"picker-row":"
|
|
3856
|
+
var css$H = {"picker-row":"AznH1Z","pickerRow":"AznH1Z","align-widgets-top":"XPma4m","alignWidgetsTop":"XPma4m","row-content":"JwKtND","rowContent":"JwKtND","align-widgets-center":"JHmBNU","alignWidgetsCenter":"JHmBNU","icon-container":"oPKubC","iconContainer":"oPKubC","content-wrapper":"Pz-8SD","contentWrapper":"Pz-8SD","icon-wrapper":"lOXhs1","iconWrapper":"lOXhs1","icon-default":"zkdtCU","iconDefault":"zkdtCU","selected-mark":"Rfykaj","selectedMark":"Rfykaj"};
|
|
3798
3857
|
|
|
3799
3858
|
const mergeHighlightRanges = (ranges) => {
|
|
3800
3859
|
const mergedRanges = [];
|
|
@@ -3861,7 +3920,7 @@ const getHighlightedSearchMatches = (str, search) => {
|
|
|
3861
3920
|
return getDecoratedText(str, ranges);
|
|
3862
3921
|
};
|
|
3863
3922
|
|
|
3864
|
-
var css$G = {"root":"
|
|
3923
|
+
var css$G = {"root":"OpXQJD","column-gap":"_2jvmWR","columnGap":"_2jvmWR","title":"vhbNHi","subtitle":"BAV0Du","disabled":"-byJT0","multiline":"_7FoW3u"};
|
|
3865
3924
|
|
|
3866
3925
|
function PickerItem(props) {
|
|
3867
3926
|
const { highlightSearchMatches = true, size, avatarUrl, isLoading, isDisabled, icon, } = props;
|
|
@@ -3950,6 +4009,15 @@ function DataPickerBody({ highlightSearchMatches = true, autoFocusSearch = true,
|
|
|
3950
4009
|
const prevProps = uuiCore.usePrevious(props);
|
|
3951
4010
|
const showSearch = props.showSearch === 'auto' ? props.totalCount > 10 : Boolean(props.showSearch);
|
|
3952
4011
|
const [isKeyboardNavigation, setIsKeyboardNavigation] = React__namespace.default.useState(false);
|
|
4012
|
+
const [emptyMessage, setEmptyMessage] = React__namespace.default.useState('');
|
|
4013
|
+
// We need to also ensure that topIndex === 0, because we can have state were there is no rows but topIndex > 0, in case when we scrolled lover than we have rows
|
|
4014
|
+
// we fix this state on next render and shouldn't show empty state.
|
|
4015
|
+
const isEmptyList = props.rows.length === 0 && props.value.topIndex === 0;
|
|
4016
|
+
React.useEffect(() => {
|
|
4017
|
+
if (!isEmptyList) {
|
|
4018
|
+
setEmptyMessage('');
|
|
4019
|
+
}
|
|
4020
|
+
}, [isEmptyList]);
|
|
3953
4021
|
React.useEffect(() => {
|
|
3954
4022
|
if (props.rows.length !== prevProps?.rows.length || (!isEqual__default.default(prevProps?.value.checked, props.value.checked) && !props.fixedBodyPosition)) {
|
|
3955
4023
|
props.scheduleUpdate?.();
|
|
@@ -4039,12 +4107,11 @@ function DataPickerBody({ highlightSearchMatches = true, autoFocusSearch = true,
|
|
|
4039
4107
|
: settings.pickerInput.sizes.body.getSearchSize({ pickerSize: props.searchSize });
|
|
4040
4108
|
const renderedDataRows = React.useMemo(() => props.rows.map((row) => renderRow(row, props.value)), [props.rows, props.value, isKeyboardNavigation]);
|
|
4041
4109
|
return (React__namespace.default.createElement(React__namespace.default.Fragment, null,
|
|
4110
|
+
React__namespace.default.createElement("div", { className: css$I.emptyStatusAnnouncer, role: "status", "aria-live": "polite", "aria-atomic": "true" }, emptyMessage),
|
|
4042
4111
|
showSearch && (React__namespace.default.createElement("div", { key: "search", className: uuiCore.cx(css$I.searchWrapper, 'uui-picker_input-body-search') },
|
|
4043
4112
|
React__namespace.default.createElement(uuiComponents.FlexCell, { grow: 1 }, autoFocusSearch ? React__namespace.default.createElement(FocusLock.MoveFocusInside, null, renderSearchInput()) : renderSearchInput()))),
|
|
4044
|
-
React__namespace.default.createElement(FlexRow, { key: "body", cx: uuiCore.cx('uui-picker_input-body'), rawProps: { style: { maxHeight: props.maxHeight, maxWidth: props.maxWidth }, tabIndex: -1 } },
|
|
4045
|
-
|
|
4046
|
-
// we fix this state on next render and shouldn't show empty state.
|
|
4047
|
-
? renderEmpty() : (React__namespace.default.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, rows: renderedDataRows, role: "listbox", cx: css$I.root, rawProps: {
|
|
4113
|
+
React__namespace.default.createElement(FlexRow, { key: "body", cx: uuiCore.cx('uui-picker_input-body'), rawProps: { style: { maxHeight: props.maxHeight, maxWidth: props.maxWidth }, tabIndex: -1 } }, isEmptyList
|
|
4114
|
+
? (React__namespace.default.createElement("div", { ref: (el) => el && setEmptyMessage(el.textContent ?? '') }, renderEmpty())) : (React__namespace.default.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, rows: renderedDataRows, role: "listbox", cx: css$I.root, rawProps: {
|
|
4048
4115
|
'aria-multiselectable': props.selectionMode === 'multi' ? true : null,
|
|
4049
4116
|
'aria-orientation': 'vertical',
|
|
4050
4117
|
tabIndex: 0,
|
|
@@ -4079,7 +4146,7 @@ function DataPickerFooterImpl(props) {
|
|
|
4079
4146
|
}
|
|
4080
4147
|
const DataPickerFooter = /* @__PURE__ */React__namespace.default.memo(DataPickerFooterImpl);
|
|
4081
4148
|
|
|
4082
|
-
var css$F = {"header":"
|
|
4149
|
+
var css$F = {"header":"dcE--O","title":"KTqdQx","close":"ish9jy"};
|
|
4083
4150
|
|
|
4084
4151
|
const DataPickerMobileHeaderImpl = (props) => {
|
|
4085
4152
|
const title = props.title && typeof props.title === 'string' ? props.title.charAt(0).toUpperCase() + props.title.slice(1) : '';
|
|
@@ -4089,7 +4156,7 @@ const DataPickerMobileHeaderImpl = (props) => {
|
|
|
4089
4156
|
};
|
|
4090
4157
|
const DataPickerMobileHeader = /* @__PURE__ */React__namespace.default.memo(DataPickerMobileHeaderImpl);
|
|
4091
4158
|
|
|
4092
|
-
var css$E = {"done":"
|
|
4159
|
+
var css$E = {"done":"zlooV9","container":"_4TbYLa"};
|
|
4093
4160
|
|
|
4094
4161
|
const PickerBodyMobileView = (props) => {
|
|
4095
4162
|
const isMobileView = uuiCore.isMobile();
|
|
@@ -4101,7 +4168,7 @@ const PickerBodyMobileView = (props) => {
|
|
|
4101
4168
|
isMobileView && (React__namespace.default.createElement(LinkButton, { caption: i18n.pickerInput.doneButton, onClick: () => props.onClose?.(), cx: css$E.done, size: settings.pickerInput.sizes.body.mobileFooterLinkButton }))));
|
|
4102
4169
|
};
|
|
4103
4170
|
|
|
4104
|
-
var css$D = {"sub-header-wrapper":"
|
|
4171
|
+
var css$D = {"sub-header-wrapper":"DctblX","subHeaderWrapper":"DctblX","switch":"nxAIRh","search":"gA8hqk","no-found-modal-container":"OK1ls2","noFoundModalContainer":"OK1ls2","no-found-modal-container-icon":"OkqEpQ","noFoundModalContainerIcon":"OkqEpQ","no-found-modal-container-text":"AHOgpq","noFoundModalContainerText":"AHOgpq","body":"aioejM"};
|
|
4105
4172
|
|
|
4106
4173
|
function PickerModal(props) {
|
|
4107
4174
|
const { view, selection, dataSourceStateLens, dataSourceState, getName, clearSelection, getRows, getListProps, getFooterProps, isSingleSelect, handleDataSourceValueChange, } = uuiComponents.usePickerModal(props);
|
|
@@ -4162,7 +4229,7 @@ function PickerModal(props) {
|
|
|
4162
4229
|
React__namespace.default.createElement(ModalFooter, null, props.renderFooter ? props.renderFooter(getFooterProps()) : renderFooter()))));
|
|
4163
4230
|
}
|
|
4164
4231
|
|
|
4165
|
-
var css$C = {"tooltip":"
|
|
4232
|
+
var css$C = {"tooltip":"_4Treuu","noShrink":"rR7TvO"};
|
|
4166
4233
|
|
|
4167
4234
|
const PickerTogglerTag = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
4168
4235
|
const tagProps = {
|
|
@@ -4181,7 +4248,7 @@ const PickerTogglerTag = /* @__PURE__ */React__namespace.forwardRef((props, ref)
|
|
|
4181
4248
|
}
|
|
4182
4249
|
});
|
|
4183
4250
|
|
|
4184
|
-
var css$B = {"root":"
|
|
4251
|
+
var css$B = {"root":"QGtLbJ"};
|
|
4185
4252
|
|
|
4186
4253
|
const defaultMode = EditMode.FORM;
|
|
4187
4254
|
function applyPickerTogglerMods(mods) {
|
|
@@ -4263,7 +4330,7 @@ function PickerInputComponent(props, ref) {
|
|
|
4263
4330
|
}
|
|
4264
4331
|
const PickerInput = /* @__PURE__ */React__namespace.default.forwardRef(PickerInputComponent);
|
|
4265
4332
|
|
|
4266
|
-
var css$A = {"row":"
|
|
4333
|
+
var css$A = {"row":"hWRm8c"};
|
|
4267
4334
|
|
|
4268
4335
|
function PickerListRow(props) {
|
|
4269
4336
|
let label;
|
|
@@ -4283,7 +4350,7 @@ function PickerListRow(props) {
|
|
|
4283
4350
|
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));
|
|
4284
4351
|
}
|
|
4285
4352
|
|
|
4286
|
-
var css$z = {"root":"
|
|
4353
|
+
var css$z = {"root":"BM9No7"};
|
|
4287
4354
|
|
|
4288
4355
|
function PickerList(props) {
|
|
4289
4356
|
const { context, view, onlySelectedView, getName, getEntityName, appendLastSelected, getSelectedIdsArray, buildRowsList, getMaxDefaultItems, getModalTogglerCaption, } = uuiComponents.usePickerList(props);
|
|
@@ -4318,7 +4385,7 @@ function PickerList(props) {
|
|
|
4318
4385
|
}, selectedRows)));
|
|
4319
4386
|
}
|
|
4320
4387
|
|
|
4321
|
-
var css$y = {"root":"
|
|
4388
|
+
var css$y = {"root":"djeBSr","wrapper":"_2xF4NN","align-widgets-top":"-mnZme","alignWidgetsTop":"-mnZme","align-widgets-center":"DCXMuu","alignWidgetsCenter":"DCXMuu"};
|
|
4322
4389
|
|
|
4323
4390
|
function DataTableCell(initialProps) {
|
|
4324
4391
|
const props = { ...initialProps };
|
|
@@ -4368,7 +4435,7 @@ function DataTableCell(initialProps) {
|
|
|
4368
4435
|
return React__namespace.createElement(uuiComponents.DataTableCell, { ...props });
|
|
4369
4436
|
}
|
|
4370
4437
|
|
|
4371
|
-
var css$x = {"root":"
|
|
4438
|
+
var css$x = {"root":"_-58jb7"};
|
|
4372
4439
|
|
|
4373
4440
|
// Here we define a single instance of the renderCell function to make DataTableRow#shouldComponentUpdate work.
|
|
4374
4441
|
// 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.
|
|
@@ -4384,14 +4451,16 @@ const DataTableRow = /* @__PURE__ */uuiCore.withMods(uuiComponents.DataTableRow,
|
|
|
4384
4451
|
];
|
|
4385
4452
|
}, () => propsMods);
|
|
4386
4453
|
|
|
4387
|
-
var css$w = {"sorting-panel-container":"
|
|
4454
|
+
var css$w = {"sorting-panel-container":"vLpv8O","sortingPanelContainer":"vLpv8O"};
|
|
4388
4455
|
|
|
4389
4456
|
const SortingPanelImpl = ({ sortDirection, onSort }) => {
|
|
4390
4457
|
const sortAsc = React.useCallback(() => onSort(sortDirection === 'asc' ? undefined : 'asc'), [onSort]);
|
|
4391
4458
|
const sortDesc = React.useCallback(() => onSort(sortDirection === 'desc' ? undefined : 'desc'), [onSort]);
|
|
4459
|
+
const isAscSelected = sortDirection === 'asc';
|
|
4460
|
+
const isDescSelected = sortDirection === 'desc';
|
|
4392
4461
|
return (React__namespace.default.createElement(FlexCell, { cx: uuiCore.cx(css$w.sortingPanelContainer, 'uui-dropdownMenu-body') },
|
|
4393
|
-
React__namespace.default.createElement(DropdownMenuButton, { isActive:
|
|
4394
|
-
React__namespace.default.createElement(DropdownMenuButton, { isActive:
|
|
4462
|
+
React__namespace.default.createElement(DropdownMenuButton, { isActive: isAscSelected, caption: i18n.pickerFilterHeader.sortAscending, icon: settings.dataTable.icons.header.ascSortIcon, onClick: sortAsc, rawProps: { role: 'menuitemradio', 'aria-checked': isAscSelected } }),
|
|
4463
|
+
React__namespace.default.createElement(DropdownMenuButton, { isActive: isDescSelected, caption: i18n.pickerFilterHeader.sortDescending, icon: settings.dataTable.icons.header.descSortIcon, onClick: sortDesc, rawProps: { role: 'menuitemradio', 'aria-checked': isDescSelected } })));
|
|
4395
4464
|
};
|
|
4396
4465
|
const SortingPanel = /* @__PURE__ */React__namespace.default.memo(SortingPanelImpl);
|
|
4397
4466
|
|
|
@@ -4404,113 +4473,114 @@ const ColumnHeaderDropdownImpl = (props) => {
|
|
|
4404
4473
|
};
|
|
4405
4474
|
const ColumnHeaderDropdown = /* @__PURE__ */React__namespace.default.memo(ColumnHeaderDropdownImpl);
|
|
4406
4475
|
|
|
4407
|
-
var css$v = {"root":"
|
|
4476
|
+
var css$v = {"root":"MlPbCS","caption-wrapper":"NiopQP","captionWrapper":"NiopQP","sort-icon":"UO6JkM","sortIcon":"UO6JkM","dropdown-icon":"iRU0zZ","dropdownIcon":"iRU0zZ","infoIcon":"L7egmt","sortInActive":"gfP7KI","align-right":"uk9YRV","alignRight":"uk9YRV","align-center":"hOepfI","alignCenter":"hOepfI","caption":"iW3U6O","truncate":"_7SBpJX","upper-case":"ub6mi-","upperCase":"ub6mi-","checkbox":"NO-b1J","icon":"GFDAeS","fold-all-icon":"x5NQJW","foldAllIcon":"x5NQJW","cell-tooltip":"FZW2AN","cellTooltip":"FZW2AN","resizing-marker":"w8Dc-z","resizingMarker":"w8Dc-z","pinned-right":"_3OcRs0","pinnedRight":"_3OcRs0","draggable":"z-n-KL","ghost":"nSsP-w","is-dragged-out":"n7UC4E","isDraggedOut":"n7UC4E","dnd-marker-left":"iYrgv0","dndMarkerLeft":"iYrgv0","dnd-marker-right":"dx-azV","dndMarkerRight":"dx-azV","cell-tooltip-wrapper":"PGSC1n","cellTooltipWrapper":"PGSC1n","cell-tooltip-text":"h3gfus","cellTooltipText":"h3gfus","tooltip-caption":"ChZNkP","tooltipCaption":"ChZNkP","tooltip-info":"hMScDw","tooltipInfo":"hMScDw"};
|
|
4408
4477
|
|
|
4409
|
-
|
|
4410
|
-
|
|
4411
|
-
|
|
4412
|
-
|
|
4413
|
-
|
|
4414
|
-
|
|
4415
|
-
|
|
4416
|
-
|
|
4417
|
-
|
|
4418
|
-
|
|
4419
|
-
|
|
4420
|
-
|
|
4421
|
-
|
|
4422
|
-
|
|
4423
|
-
|
|
4424
|
-
|
|
4425
|
-
|
|
4426
|
-
|
|
4427
|
-
|
|
4428
|
-
|
|
4429
|
-
|
|
4430
|
-
|
|
4431
|
-
|
|
4432
|
-
|
|
4433
|
-
|
|
4434
|
-
|
|
4435
|
-
props.toggleSort(e);
|
|
4436
|
-
e.preventDefault();
|
|
4437
|
-
}
|
|
4438
|
-
};
|
|
4439
|
-
return (React__namespace.createElement("div", { className: uuiCore.cx(css$v.captionWrapper, css$v['align-' + this.props.column.textAlign], uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCaptionWrapper) },
|
|
4440
|
-
React__namespace.createElement(Tooltip, { placement: "top", color: "inverted", content: renderTooltip(this.props.column), cx: [css$v.cellTooltip, 'uui-dt-header-tooltip'], openDelay: 600, closeOnMouseLeave: "boundary" },
|
|
4441
|
-
React__namespace.createElement("div", { key: "text", className: captionCx }, this.props.column.caption)),
|
|
4442
|
-
this.props.column.isSortable && (!this.props.column.renderFilter || this.props.sortDirection) && (React__namespace.createElement(uuiComponents.ControlIcon, { key: "sort", cx: uuiCore.cx(css$v.icon, css$v.sortIcon, !this.props.sortDirection && css$v.sortInActive, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderSortIcon), icon: settings.dataTable.icons.header[this.props.sortDirection === 'desc' ? 'descSortIcon' : this.props.sortDirection === 'asc' ? 'ascSortIcon' : 'defaultSortIcon'], onKeyDown: !this.props.column.renderFilter ? handleSort : undefined })),
|
|
4443
|
-
this.props.isFilterActive && (React__namespace.createElement(IconButton, { key: "filter", cx: uuiCore.cx(css$v.icon, !this.props.sortDirection && css$v.filterIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderFilterIcon), color: "neutral", icon: settings.dataTable.icons.header.filterIcon })),
|
|
4444
|
-
this.props.column.renderFilter && (React__namespace.createElement(uuiComponents.ControlIcon, { key: "dropdown", cx: uuiCore.cx(css$v.icon, css$v.dropdownIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderDropdownIcon), icon: settings.dataTable.icons.header[this.state.isDropdownOpen ? 'openedDropdownIcon' : 'dropdownIcon'], onKeyDown: handleFilterOpen }))));
|
|
4445
|
-
};
|
|
4446
|
-
this.renderHeaderCheckbox = () => {
|
|
4447
|
-
if (this.props.selectAll && this.props.isFirstColumn) {
|
|
4448
|
-
return (React__namespace.createElement(Checkbox, { size: settings.dataTable.sizes.body.checkboxMap[this.props.size], rawProps: { 'aria-label': 'Select All' }, ...this.props.selectAll, cx: uuiCore.cx(css$v.checkbox, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCheckbox) }));
|
|
4478
|
+
function DefaultTooltipContent(column) {
|
|
4479
|
+
return (React__namespace.default.createElement("div", { className: uuiCore.cx(css$v.cellTooltipWrapper, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCaptionTooltip) },
|
|
4480
|
+
React__namespace.default.createElement(Text, { cx: [css$v.cellTooltipText, css$v.tooltipCaption] }, column.caption),
|
|
4481
|
+
column.info && (React__namespace.default.createElement(Text, { cx: [css$v.cellTooltipText, css$v.tooltipInfo] }, column.info))));
|
|
4482
|
+
}
|
|
4483
|
+
function DataTableHeaderCell(props) {
|
|
4484
|
+
const [isDropdownOpen, setIsDropdownOpen] = React.useState(null);
|
|
4485
|
+
const id = React.useId();
|
|
4486
|
+
const captionId = `uui-dt-header-caption-${id}-${props.column.key}`;
|
|
4487
|
+
const captionAriaProps = {
|
|
4488
|
+
'aria-labelledby': captionId,
|
|
4489
|
+
'aria-description': props.isFilterActive ? i18n.tables.columnHeader.filterActiveLabel : undefined,
|
|
4490
|
+
};
|
|
4491
|
+
const getColumnCaption = (contentProps, dropdownProps) => {
|
|
4492
|
+
const renderTooltip = props.column.renderTooltip || DefaultTooltipContent;
|
|
4493
|
+
const captionCx = uuiCore.cx([
|
|
4494
|
+
css$v.caption,
|
|
4495
|
+
props.textCase === 'upper' && css$v.upperCase,
|
|
4496
|
+
uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCaption,
|
|
4497
|
+
'uui-typography-inline',
|
|
4498
|
+
props.size >= '48' && css$v.truncate,
|
|
4499
|
+
]);
|
|
4500
|
+
const handleFilterOpen = (e) => {
|
|
4501
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
4502
|
+
dropdownProps.onClick(e);
|
|
4503
|
+
e.preventDefault();
|
|
4449
4504
|
}
|
|
4450
4505
|
};
|
|
4451
|
-
|
|
4452
|
-
if (
|
|
4453
|
-
|
|
4454
|
-
|
|
4455
|
-
: i18n.tables.columnHeader.collapseAllTooltip },
|
|
4456
|
-
React__namespace.createElement(uuiComponents.ControlIcon, { cx: uuiCore.cx(css$v.icon, css$v.foldAllIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderFoldAllIcon), icon: settings.dataTable.icons.header[this.props.areAllFolded ? 'unfoldIcon' : 'foldIcon'], onClick: this.props.onFoldAll, rawProps: {
|
|
4457
|
-
'aria-label': this.props.areAllFolded ? 'Expand All' : 'Collapse All',
|
|
4458
|
-
'aria-expanded': !!this.props.areAllFolded,
|
|
4459
|
-
} })));
|
|
4506
|
+
const handleSort = (e) => {
|
|
4507
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
4508
|
+
contentProps.toggleSort(e);
|
|
4509
|
+
e.preventDefault();
|
|
4460
4510
|
}
|
|
4461
4511
|
};
|
|
4462
|
-
|
|
4463
|
-
|
|
4464
|
-
|
|
4465
|
-
|
|
4466
|
-
|
|
4467
|
-
|
|
4468
|
-
|
|
4469
|
-
|
|
4470
|
-
|
|
4471
|
-
|
|
4472
|
-
const { columnsGap, isLastColumn } = this.props;
|
|
4473
|
-
if (columnsGap)
|
|
4474
|
-
return isLastColumn ? `${columnsGap}px` : `${+columnsGap / 2}px`;
|
|
4475
|
-
return `var(--uui-dt-header-cell-padding${isLastColumn ? '-edge' : ''})`;
|
|
4476
|
-
};
|
|
4477
|
-
this.getResizingMarkerWidth = () => {
|
|
4478
|
-
const { columnsGap } = this.props;
|
|
4479
|
-
return columnsGap ? `${+columnsGap / 2}px` : 'var(--uui-resize-marker-width)';
|
|
4480
|
-
};
|
|
4481
|
-
this.renderCellContent = (props, dropdownProps) => {
|
|
4482
|
-
const isResizable = this.props.column.allowResizing ?? this.props.allowColumnsResizing;
|
|
4483
|
-
const onClickEvent = !props.isResizing && (!this.props.column.renderFilter ? props.toggleSort : dropdownProps?.onClick);
|
|
4484
|
-
const computeStyles = {
|
|
4485
|
-
'--uui-dt-header-cell-icon-size': `${settings.dataTable.sizes.header.iconMap[this.props.size || settings.dataTable.sizes.header.row]}px`,
|
|
4486
|
-
'--uui-dt-header-cell-padding-start': this.getLeftPadding(),
|
|
4487
|
-
'--uui-dt-header-cell-padding-end': this.getRightPadding(),
|
|
4488
|
-
'--uui-dt-header-cell-resizing-marker-width': this.getResizingMarkerWidth(),
|
|
4489
|
-
};
|
|
4490
|
-
return (React__namespace.createElement(uuiComponents.DataTableCellContainer, { column: this.props.column, ref: (ref) => {
|
|
4491
|
-
props.ref(ref);
|
|
4492
|
-
dropdownProps?.ref?.(ref);
|
|
4493
|
-
}, 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.dataTable.sizes.header.row}`, 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 && uuiCore.uuiMarkers.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: {
|
|
4494
|
-
role: 'columnheader',
|
|
4495
|
-
'aria-sort': this.props.sortDirection === 'asc' ? 'ascending' : this.props.sortDirection ? 'descending' : 'none',
|
|
4496
|
-
...props.eventHandlers,
|
|
4497
|
-
}, style: computeStyles },
|
|
4498
|
-
this.renderHeaderCheckbox(),
|
|
4499
|
-
this.renderFoldAllIcon(),
|
|
4500
|
-
this.getColumnCaption(props, dropdownProps),
|
|
4501
|
-
isResizable && this.renderResizingMarker(props)));
|
|
4502
|
-
};
|
|
4503
|
-
this.renderCellWithFilter = (props) => (React__namespace.createElement(ColumnHeaderDropdown, { isOpen: this.state.isDropdownOpen, isSortable: this.props.column.isSortable, renderTarget: (dropdownProps) => this.renderCellContent(props, dropdownProps), renderFilter: this.props.renderFilter, onSort: this.props.onSort, sortDirection: this.props.sortDirection, onOpenChange: (isDropdownOpen) => this.setState({ isDropdownOpen }), title: this.props.column.caption }));
|
|
4504
|
-
}
|
|
4505
|
-
render() {
|
|
4506
|
-
if (this.props.column.renderHeaderCell) {
|
|
4507
|
-
return this.props.column.renderHeaderCell(this.props);
|
|
4512
|
+
return (React__namespace.default.createElement("div", { className: uuiCore.cx(css$v.captionWrapper, css$v['align-' + props.column.textAlign], uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCaptionWrapper) },
|
|
4513
|
+
React__namespace.default.createElement(Tooltip, { placement: "top", color: "inverted", content: renderTooltip(props.column), cx: [css$v.cellTooltip, 'uui-dt-header-tooltip'], openDelay: 600, closeOnMouseLeave: "boundary" },
|
|
4514
|
+
React__namespace.default.createElement("div", { key: "text", id: captionId, className: captionCx }, props.column.caption)),
|
|
4515
|
+
props.column.isSortable && (!props.column.renderFilter || props.sortDirection) && (React__namespace.default.createElement(uuiComponents.ControlIcon, { key: "sort", cx: uuiCore.cx(css$v.icon, css$v.sortIcon, !props.sortDirection && css$v.sortInActive, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderSortIcon), icon: settings.dataTable.icons.header[props.sortDirection === 'desc' ? 'descSortIcon' : props.sortDirection === 'asc' ? 'ascSortIcon' : 'defaultSortIcon'], onKeyDown: !props.column.renderFilter ? handleSort : undefined, rawProps: { ...captionAriaProps, 'aria-hidden': !!props.column.renderFilter } })),
|
|
4516
|
+
props.isFilterActive && (React__namespace.default.createElement(IconButton, { key: "filter", cx: uuiCore.cx(css$v.icon, !props.sortDirection && css$v.filterIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderFilterIcon), color: "neutral", icon: settings.dataTable.icons.header.filterIcon, rawProps: { 'aria-hidden': true } })),
|
|
4517
|
+
props.column.renderFilter && (React__namespace.default.createElement(uuiComponents.ControlIcon, { key: "dropdown", cx: uuiCore.cx(css$v.icon, css$v.dropdownIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderDropdownIcon), icon: settings.dataTable.icons.header[isDropdownOpen ? 'openedDropdownIcon' : 'dropdownIcon'], onKeyDown: handleFilterOpen, rawProps: captionAriaProps }))));
|
|
4518
|
+
};
|
|
4519
|
+
const renderHeaderCheckbox = () => {
|
|
4520
|
+
if (props.selectAll && props.isFirstColumn) {
|
|
4521
|
+
return (React__namespace.default.createElement(Checkbox, { size: settings.dataTable.sizes.body.checkboxMap[props.size], rawProps: { 'aria-label': 'Select All' }, ...props.selectAll, cx: uuiCore.cx(css$v.checkbox, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCheckbox) }));
|
|
4508
4522
|
}
|
|
4509
|
-
|
|
4523
|
+
};
|
|
4524
|
+
const renderFoldAllIcon = () => {
|
|
4525
|
+
if (props.isFirstColumn && props.showFoldAll) {
|
|
4526
|
+
return (React__namespace.default.createElement(Tooltip, { content: props.areAllFolded
|
|
4527
|
+
? i18n.tables.columnHeader.expandAllTooltip
|
|
4528
|
+
: i18n.tables.columnHeader.collapseAllTooltip },
|
|
4529
|
+
React__namespace.default.createElement(uuiComponents.ControlIcon, { cx: uuiCore.cx(css$v.icon, css$v.foldAllIcon, uuiCore.uuiDataTableHeaderCell.uuiTableHeaderFoldAllIcon), icon: settings.dataTable.icons.header[props.areAllFolded ? 'unfoldIcon' : 'foldIcon'], onClick: props.onFoldAll, rawProps: {
|
|
4530
|
+
'aria-label': props.areAllFolded ? 'Expand All' : 'Collapse All',
|
|
4531
|
+
'aria-expanded': !!props.areAllFolded,
|
|
4532
|
+
} })));
|
|
4533
|
+
}
|
|
4534
|
+
};
|
|
4535
|
+
const renderResizingMarker = (contentProps) => {
|
|
4536
|
+
return (React__namespace.default.createElement("div", { role: "separator", onMouseDown: contentProps.onResizeStart, className: uuiCore.cx(css$v.resizingMarker, uuiCore.uuiMarkers.draggable, uuiCore.uuiMarkers.clickable) }));
|
|
4537
|
+
};
|
|
4538
|
+
const getLeftPadding = () => {
|
|
4539
|
+
const { columnsGap, isFirstColumn } = props;
|
|
4540
|
+
if (columnsGap)
|
|
4541
|
+
return isFirstColumn ? `${columnsGap}px` : `${+columnsGap / 2}px`;
|
|
4542
|
+
return `var(--uui-dt-header-cell-padding${isFirstColumn ? '-edge' : ''})`;
|
|
4543
|
+
};
|
|
4544
|
+
const getRightPadding = () => {
|
|
4545
|
+
const { columnsGap, isLastColumn } = props;
|
|
4546
|
+
if (columnsGap)
|
|
4547
|
+
return isLastColumn ? `${columnsGap}px` : `${+columnsGap / 2}px`;
|
|
4548
|
+
return `var(--uui-dt-header-cell-padding${isLastColumn ? '-edge' : ''})`;
|
|
4549
|
+
};
|
|
4550
|
+
const getResizingMarkerWidth = () => {
|
|
4551
|
+
const { columnsGap } = props;
|
|
4552
|
+
return columnsGap ? `${+columnsGap / 2}px` : 'var(--uui-resize-marker-width)';
|
|
4553
|
+
};
|
|
4554
|
+
const renderCellContent = (contentProps, dropdownProps) => {
|
|
4555
|
+
const isResizable = props.column.allowResizing ?? props.allowColumnsResizing;
|
|
4556
|
+
const onClickEvent = !contentProps.isResizing && (!props.column.renderFilter ? contentProps.toggleSort : dropdownProps?.onClick);
|
|
4557
|
+
const computeStyles = {
|
|
4558
|
+
'--uui-dt-header-cell-icon-size': `${settings.dataTable.sizes.header.iconMap[props.size || settings.dataTable.sizes.header.row]}px`,
|
|
4559
|
+
'--uui-dt-header-cell-padding-start': getLeftPadding(),
|
|
4560
|
+
'--uui-dt-header-cell-padding-end': getRightPadding(),
|
|
4561
|
+
'--uui-dt-header-cell-resizing-marker-width': getResizingMarkerWidth(),
|
|
4562
|
+
};
|
|
4563
|
+
return (React__namespace.default.createElement(uuiComponents.DataTableCellContainer, { column: props.column, ref: (ref) => {
|
|
4564
|
+
contentProps.ref(ref);
|
|
4565
|
+
dropdownProps?.ref?.(ref);
|
|
4566
|
+
}, cx: uuiCore.cx(uuiCore.uuiDataTableHeaderCell.uuiTableHeaderCell, (props.column.isSortable || props.isDropdown) && uuiCore.uuiMarkers.clickable, css$v.root, `uui-size-${props.size || settings.dataTable.sizes.header.row}`, props.isFirstColumn && 'uui-dt-header-first-column', props.isLastColumn && 'uui-dt-header-last-column', props.column.fix && css$v['pinned-' + props.column.fix], isResizable && uuiCore.uuiMarkers.resizable, contentProps.isDraggable && css$v.draggable, contentProps.isDragGhost && css$v.ghost, contentProps.isDraggedOut && css$v.isDraggedOut, contentProps.isDndInProgress && css$v['dnd-marker-' + contentProps.position]), onClick: onClickEvent, rawProps: {
|
|
4567
|
+
role: 'columnheader',
|
|
4568
|
+
'aria-sort': props.sortDirection === 'asc' ? 'ascending' : props.sortDirection ? 'descending' : 'none',
|
|
4569
|
+
...contentProps.eventHandlers,
|
|
4570
|
+
}, style: computeStyles },
|
|
4571
|
+
renderHeaderCheckbox(),
|
|
4572
|
+
renderFoldAllIcon(),
|
|
4573
|
+
getColumnCaption(contentProps, dropdownProps),
|
|
4574
|
+
isResizable && renderResizingMarker(contentProps)));
|
|
4575
|
+
};
|
|
4576
|
+
const renderCellWithFilter = (contentProps) => (React__namespace.default.createElement(ColumnHeaderDropdown, { isOpen: isDropdownOpen, isSortable: props.column.isSortable, renderTarget: (dropdownProps) => renderCellContent(contentProps, dropdownProps), renderFilter: props.renderFilter, onSort: props.onSort, sortDirection: props.sortDirection, onOpenChange: setIsDropdownOpen, title: props.column.caption }));
|
|
4577
|
+
if (props.column.renderHeaderCell) {
|
|
4578
|
+
return props.column.renderHeaderCell(props);
|
|
4510
4579
|
}
|
|
4580
|
+
return (React__namespace.default.createElement(uuiComponents.DataTableHeaderCell, { ...props, renderCellContent: props.column.renderFilter ? renderCellWithFilter : renderCellContent }));
|
|
4511
4581
|
}
|
|
4512
4582
|
|
|
4513
|
-
var css$u = {"root":"
|
|
4583
|
+
var css$u = {"root":"_2uQD0I","caption-wrapper":"DCW1wE","captionWrapper":"DCW1wE","align-center":"OOZAi0","alignCenter":"OOZAi0","caption":"RJC3aU","truncate":"Ik27Fy","upper-case":"h7yYCr","upperCase":"h7yYCr","group-cell-tooltip":"Gtpssv","groupCellTooltip":"Gtpssv","group-cell-tooltip-wrapper":"Mx2RxI","groupCellTooltipWrapper":"Mx2RxI","group-cell-tooltip-text":"Rd2QDK","groupCellTooltipText":"Rd2QDK","tooltip-caption":"lj18gK","tooltipCaption":"lj18gK","tooltip-info":"_8tibXu","tooltipInfo":"_8tibXu"};
|
|
4514
4584
|
|
|
4515
4585
|
class DataTableHeaderGroupCell extends React__namespace.Component {
|
|
4516
4586
|
constructor() {
|
|
@@ -4550,7 +4620,7 @@ class DataTableHeaderGroupCell extends React__namespace.Component {
|
|
|
4550
4620
|
}
|
|
4551
4621
|
}
|
|
4552
4622
|
|
|
4553
|
-
var css$t = {"root":"
|
|
4623
|
+
var css$t = {"root":"_5cSIAT"};
|
|
4554
4624
|
|
|
4555
4625
|
const DataTableHeaderRow = /* @__PURE__ */uuiCore.withMods(uuiComponents.DataTableHeaderRow, () => [css$t.root, 'uui-dt-vars'], (mods) => {
|
|
4556
4626
|
return ({
|
|
@@ -4562,6 +4632,20 @@ const DataTableHeaderRow = /* @__PURE__ */uuiCore.withMods(uuiComponents.DataTab
|
|
|
4562
4632
|
});
|
|
4563
4633
|
});
|
|
4564
4634
|
|
|
4635
|
+
/**
|
|
4636
|
+
* Checks if the value is a range object with at least one boundary property defined
|
|
4637
|
+
*/
|
|
4638
|
+
const isValidRangeValue = (range) => {
|
|
4639
|
+
return range != null && (range.from != null || range.to != null);
|
|
4640
|
+
};
|
|
4641
|
+
const isFilledArray = (arr) => {
|
|
4642
|
+
return Array.isArray(arr) && arr.length > 0;
|
|
4643
|
+
};
|
|
4644
|
+
const hasSomeNullishProp = (obj) => {
|
|
4645
|
+
return Object.keys(obj).some((prop) => obj[prop] == null);
|
|
4646
|
+
};
|
|
4647
|
+
const isValidArrayValue = isFilledArray;
|
|
4648
|
+
const hasSomeNullishPredicate = hasSomeNullishProp;
|
|
4565
4649
|
const normalizeFilterWithPredicates = (filter) => {
|
|
4566
4650
|
if (!filter) {
|
|
4567
4651
|
return {};
|
|
@@ -4579,27 +4663,21 @@ const normalizeFilterWithPredicates = (filter) => {
|
|
|
4579
4663
|
if ('from' in filterValue && 'to' in filterValue) {
|
|
4580
4664
|
continue;
|
|
4581
4665
|
}
|
|
4582
|
-
if ('in' in filterValue &&
|
|
4666
|
+
if ('in' in filterValue && !isValidArrayValue(filterValue.in)) {
|
|
4583
4667
|
delete filter[key];
|
|
4584
4668
|
}
|
|
4585
|
-
if ('nin' in filterValue &&
|
|
4669
|
+
if ('nin' in filterValue && !isValidArrayValue(filterValue.nin)) {
|
|
4586
4670
|
delete filter[key];
|
|
4587
4671
|
}
|
|
4588
|
-
if ('inRange' in filterValue) {
|
|
4589
|
-
|
|
4590
|
-
delete filter[key];
|
|
4591
|
-
}
|
|
4672
|
+
if ('inRange' in filterValue && !isValidRangeValue(filterValue.inRange)) {
|
|
4673
|
+
delete filter[key];
|
|
4592
4674
|
}
|
|
4593
|
-
if ('notInRange' in filterValue) {
|
|
4594
|
-
|
|
4595
|
-
|
|
4596
|
-
|
|
4675
|
+
if ('notInRange' in filterValue && !isValidRangeValue(filterValue.notInRange)) {
|
|
4676
|
+
delete filter[key];
|
|
4677
|
+
}
|
|
4678
|
+
if (hasSomeNullishPredicate(filterValue)) {
|
|
4679
|
+
delete filter[key];
|
|
4597
4680
|
}
|
|
4598
|
-
Object.keys(filterValue).forEach((predicate) => {
|
|
4599
|
-
if (filterValue[predicate] === null || filterValue[predicate] === undefined) {
|
|
4600
|
-
delete filter[key];
|
|
4601
|
-
}
|
|
4602
|
-
});
|
|
4603
4681
|
}
|
|
4604
4682
|
}
|
|
4605
4683
|
return result;
|
|
@@ -4650,7 +4728,7 @@ const UUI_FILTERS_PANEL_ITEM_TOGGLER_SELECTION = 'uui-filters-panel-item-toggler
|
|
|
4650
4728
|
const UUI_FILTERS_PANEL_ITEM_TOGGLER_POSTFIX = 'uui-filters-panel-item-toggler-postfix';
|
|
4651
4729
|
const UUI_FILTERS_PANEL_BODY_FOOTER = 'uui-filters-panel-item-footer';
|
|
4652
4730
|
|
|
4653
|
-
var css$s = {"body":"
|
|
4731
|
+
var css$s = {"body":"Oeq3L5","header":"eMTe8I","title":"q4z-t1","removeButton":"-mPrB9","with-search":"_5ZXgMR","withSearch":"_5ZXgMR"};
|
|
4654
4732
|
|
|
4655
4733
|
function FilterColumnBody(props) {
|
|
4656
4734
|
const [predicate, setPredicate] = React.useState(getDefaultPredicate(props.predicates, props.value));
|
|
@@ -4711,7 +4789,7 @@ const useColumnsWithFilters = (initialColumns, filters) => {
|
|
|
4711
4789
|
return columns;
|
|
4712
4790
|
};
|
|
4713
4791
|
|
|
4714
|
-
var css$r = {"unpin-icon":"
|
|
4792
|
+
var css$r = {"unpin-icon":"BnhK--","unpinIcon":"BnhK--","pin-toggler-icon":"d2W-Dd","pinTogglerIcon":"d2W-Dd"};
|
|
4715
4793
|
|
|
4716
4794
|
function PinIconButton(props) {
|
|
4717
4795
|
const i18nLocal = i18n.tables.columnsConfigurationModal;
|
|
@@ -4762,7 +4840,7 @@ function getUnpinIcon(params) {
|
|
|
4762
4840
|
}
|
|
4763
4841
|
}
|
|
4764
4842
|
|
|
4765
|
-
var css$q = {"row-wrapper":"
|
|
4843
|
+
var css$q = {"row-wrapper":"c9H8oz","rowWrapper":"c9H8oz","pin-icon-button":"yaZ9Zn","pinIconButton":"yaZ9Zn","not-pinned":"hpuUvH","notPinned":"hpuUvH","checkbox":"iJa3dS","drag-handle":"QzxqNA","dragHandle":"QzxqNA","dnd-disabled":"PZUp2w","dndDisabled":"PZUp2w"};
|
|
4766
4844
|
|
|
4767
4845
|
const ColumnRow = /* @__PURE__ */React__namespace.memo(function ColumnRow(props) {
|
|
4768
4846
|
const { column } = props;
|
|
@@ -4796,7 +4874,7 @@ const ColumnRow = /* @__PURE__ */React__namespace.memo(function ColumnRow(props)
|
|
|
4796
4874
|
return (React__namespace.createElement(uuiCore.DndActor, { key: column.key, srcData: isDndAllowed && data, dstData: data, canAcceptDrop: onCanAcceptDrop, onDrop: onDrop, render: renderContent }));
|
|
4797
4875
|
});
|
|
4798
4876
|
|
|
4799
|
-
var css$p = {"root":"
|
|
4877
|
+
var css$p = {"root":"I8e28f","main-panel":"w7Zcli","mainPanel":"w7Zcli","group":"-JPNp5","group-title":"L-MM9V","groupTitle":"L-MM9V","group-items":"uN10Jg","groupItems":"uN10Jg","no-data":"-l34C5","noData":"-l34C5","no-data-title":"C6xq4x","noDataTitle":"C6xq4x","no-data-sub-title":"mcfBS1","noDataSubTitle":"mcfBS1","h-divider":"_91tlWq","hDivider":"_91tlWq","search-area":"Mm3qTT","searchArea":"Mm3qTT","subgroup-accordion":"AALvgz","subgroupAccordion":"AALvgz","subgroup":"vsKUIZ","subgroup-title":"FiM4NP","subgroupTitle":"FiM4NP"};
|
|
4800
4878
|
|
|
4801
4879
|
const renderGroupTitle = (title, amount) => (React__namespace.createElement(FlexRow, { cx: css$p.group },
|
|
4802
4880
|
React__namespace.createElement(Text, { size: "none", cx: css$p.groupTitle }, title),
|
|
@@ -4899,7 +4977,7 @@ const getChildrenAndRest = (row, rows) => {
|
|
|
4899
4977
|
return [children, rest];
|
|
4900
4978
|
};
|
|
4901
4979
|
|
|
4902
|
-
var css$o = {"listContainer":"
|
|
4980
|
+
var css$o = {"listContainer":"-gBDgo","header":"uPVX4r","group":"Nlg0US","stickyHeader":"P-aC-C"};
|
|
4903
4981
|
|
|
4904
4982
|
function DataRowsGroup({ row, childRows, renderRow, top = 1, }) {
|
|
4905
4983
|
const rowRef = React.useRef(undefined);
|
|
@@ -4939,7 +5017,7 @@ function DataRowsContainer({ estimatedHeight, listContainerRef, offsetY, rows, r
|
|
|
4939
5017
|
React__namespace.default.createElement(DataRowsGroups, { rows: rows, renderRow: renderRow, top: headerRef?.current?.clientHeight }))));
|
|
4940
5018
|
}
|
|
4941
5019
|
|
|
4942
|
-
var css$n = {"root":"
|
|
5020
|
+
var css$n = {"root":"Rt6x9-","sticky-header":"qKF0-g","stickyHeader":"qKF0-g","no-results":"fSp-H-","noResults":"fSp-H-","icon":"EpGowY","title":"ImAAqn"};
|
|
4943
5021
|
|
|
4944
5022
|
function DataTable(props) {
|
|
4945
5023
|
const { uuiModals } = uuiCore.useUuiContext();
|
|
@@ -4981,6 +5059,7 @@ function DataTable(props) {
|
|
|
4981
5059
|
role: 'table',
|
|
4982
5060
|
'aria-colcount': columns.length,
|
|
4983
5061
|
'aria-rowcount': props.rowsCount,
|
|
5062
|
+
...props.rawProps,
|
|
4984
5063
|
};
|
|
4985
5064
|
return (React__namespace.createElement(uuiComponents.DataTableSelectionProvider, { onCopy: props.onCopy, rows: rows, columns: columns },
|
|
4986
5065
|
React__namespace.createElement(uuiComponents.DataTableFocusProvider, { dataTableFocusManager: props.dataTableFocusManager }, props.disableVirtualization === true
|
|
@@ -4988,7 +5067,7 @@ function DataTable(props) {
|
|
|
4988
5067
|
: (React__namespace.createElement(VirtualList, { value: props.value, onValueChange: props.onValueChange, onScroll: props.onScroll, rowsCount: props.rowsCount, renderRows: renderTableBody, cx: classes, isLoading: props.isReloading, rowsSelector: "[role=row]", rawProps: rawProps })))));
|
|
4989
5068
|
}
|
|
4990
5069
|
|
|
4991
|
-
var css$m = {"root":"
|
|
5070
|
+
var css$m = {"root":"bEq-Qb","title-wrapper":"iUPJXI","titleWrapper":"iUPJXI","title":"h6zCAh","text-wrapper":"AAQtxj","textWrapper":"AAQtxj","selection":"v2oaFP","postfix":"_5Ql-LF","selected":"O-rh-V"};
|
|
4992
5071
|
|
|
4993
5072
|
const FilterPanelItemToggler = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
4994
5073
|
const togglerPickerOpened = (e) => {
|
|
@@ -5213,9 +5292,10 @@ function FilterRangeDatePickerBody(props) {
|
|
|
5213
5292
|
renderFooter()));
|
|
5214
5293
|
}
|
|
5215
5294
|
|
|
5216
|
-
var css$l = {"container":"
|
|
5295
|
+
var css$l = {"container":"xeqrCL"};
|
|
5217
5296
|
|
|
5218
|
-
function FilterNumericBody(props) {
|
|
5297
|
+
function FilterNumericBody({ min, max, step, ...props }) {
|
|
5298
|
+
const numericInputProps = { min, max, step };
|
|
5219
5299
|
const isInRangePredicate = props?.selectedPredicate === 'inRange' || props?.selectedPredicate === 'notInRange';
|
|
5220
5300
|
const isWrongRange = (from, to) => {
|
|
5221
5301
|
if (!to && to !== 0)
|
|
@@ -5264,15 +5344,15 @@ function FilterNumericBody(props) {
|
|
|
5264
5344
|
return (React__namespace.default.createElement("div", null,
|
|
5265
5345
|
React__namespace.default.createElement(FlexRow, { padding: "12", alignItems: "center", columnGap: "12", borderBottom: true, cx: css$l.container },
|
|
5266
5346
|
React__namespace.default.createElement(FlexCell, { width: "100%" },
|
|
5267
|
-
React__namespace.default.createElement(NumericInput, { size: settings.filtersPanel.sizes.default, value: value?.from ?? null, onValueChange: rangeValueHandler('from'), placeholder: "Min", formatOptions: { maximumFractionDigits: 2 } })),
|
|
5347
|
+
React__namespace.default.createElement(NumericInput, { size: settings.filtersPanel.sizes.default, value: value?.from ?? null, onValueChange: rangeValueHandler('from'), placeholder: "Min", formatOptions: { maximumFractionDigits: 2 }, ...numericInputProps })),
|
|
5268
5348
|
React__namespace.default.createElement(FlexCell, { width: "100%" },
|
|
5269
|
-
React__namespace.default.createElement(NumericInput, { size: settings.filtersPanel.sizes.default, value: value?.to ?? null, onValueChange: rangeValueHandler('to'), placeholder: "Max", formatOptions: { maximumFractionDigits: 2 }, isInvalid: isWrongRange(value?.from, value?.to) }))),
|
|
5349
|
+
React__namespace.default.createElement(NumericInput, { size: settings.filtersPanel.sizes.default, value: value?.to ?? null, onValueChange: rangeValueHandler('to'), placeholder: "Max", formatOptions: { maximumFractionDigits: 2 }, isInvalid: isWrongRange(value?.from, value?.to), ...numericInputProps }))),
|
|
5270
5350
|
renderFooter()));
|
|
5271
5351
|
}
|
|
5272
5352
|
return (React__namespace.default.createElement("div", null,
|
|
5273
5353
|
React__namespace.default.createElement(FlexRow, { padding: "12", alignItems: "center", borderBottom: true, cx: css$l.container },
|
|
5274
5354
|
React__namespace.default.createElement(FlexCell, { width: 130 },
|
|
5275
|
-
React__namespace.default.createElement(NumericInput, { size: settings.filtersPanel.sizes.default, value: typeof props.value === 'number' ? props.value : null, onValueChange: props.onValueChange, placeholder: "Enter a number", formatOptions: { maximumFractionDigits: 2 } }))),
|
|
5355
|
+
React__namespace.default.createElement(NumericInput, { size: settings.filtersPanel.sizes.default, value: typeof props.value === 'number' ? props.value : null, onValueChange: props.onValueChange, placeholder: "Enter a number", formatOptions: { maximumFractionDigits: 2 }, ...numericInputProps }))),
|
|
5276
5356
|
renderFooter()));
|
|
5277
5357
|
}
|
|
5278
5358
|
|
|
@@ -5351,9 +5431,9 @@ function FiltersToolbarItemImpl(props) {
|
|
|
5351
5431
|
props.predicates ? (React__namespace.default.createElement(FilterPredicatePanel, { predicates: props.predicates, predicate: predicate, type: props.type, onValueChange: props.onValueChange, value: props.value, setPredicate: setPredicate })) : (!hideTitle && (React__namespace.default.createElement("div", { className: css$s.title }, props.title))),
|
|
5352
5432
|
!props?.isAlwaysVisible && (React__namespace.default.createElement(LinkButton, { cx: css$s.removeButton, caption: i18n.filterToolbar.datePicker.removeCaption, onClick: removeOnclickHandler, size: settings.filtersPanel.sizes.pickerBodyLinkButton, icon: settings.filtersPanel.icons.pickerBodyRemoveIcon }))));
|
|
5353
5433
|
const renderBody = (dropdownProps) => {
|
|
5354
|
-
return isPickersType ? (React__namespace.default.createElement(PickerBodyMobileView, { ...dropdownProps, rawProps: {
|
|
5434
|
+
return isPickersType ? (React__namespace.default.createElement(PickerBodyMobileView, { ...dropdownProps, rawProps: { 'aria-modal': true }, cx: [css$s.body, UUI_FILTERS_PANEL_ITEM_BODY], title: props.title, width: settings.filtersPanel.sizes.pickerBodyMinWidth, onClose: () => isOpenChange(false) },
|
|
5355
5435
|
renderHeader(hideHeaderTitle),
|
|
5356
|
-
React__namespace.default.createElement(FilterItemBody, { ...props, ...dropdownProps, selectedPredicate: predicate, value: getValue(predicate, props.value), onValueChange: onValueChange }))) : (React__namespace.default.createElement(DropdownContainer, { cx: [css$s.body, UUI_FILTERS_PANEL_ITEM_BODY], ...dropdownProps, rawProps: {
|
|
5436
|
+
React__namespace.default.createElement(FilterItemBody, { ...props, ...dropdownProps, selectedPredicate: predicate, value: getValue(predicate, props.value), onValueChange: onValueChange }))) : (React__namespace.default.createElement(DropdownContainer, { cx: [css$s.body, UUI_FILTERS_PANEL_ITEM_BODY], ...dropdownProps, rawProps: { 'aria-modal': true } },
|
|
5357
5437
|
renderHeader(hideHeaderTitle),
|
|
5358
5438
|
React__namespace.default.createElement(FilterItemBody, { ...props, ...dropdownProps, selectedPredicate: predicate, value: getValue(predicate, props.value), onValueChange: onValueChange })));
|
|
5359
5439
|
};
|
|
@@ -5524,7 +5604,7 @@ function FiltersToolbarImpl(props) {
|
|
|
5524
5604
|
}
|
|
5525
5605
|
const FiltersPanel = /* @__PURE__ */React__namespace.default.memo(FiltersToolbarImpl);
|
|
5526
5606
|
|
|
5527
|
-
var css$k = {"delete-button":"
|
|
5607
|
+
var css$k = {"delete-button":"frGXqP","deleteButton":"frGXqP","tab-button":"_5COuq7","tabButton":"_5COuq7","targetOpen":"zE5K4c"};
|
|
5528
5608
|
|
|
5529
5609
|
function PresetActionsDropdown(props) {
|
|
5530
5610
|
const { uuiNotifications } = uuiCore.useUuiContext();
|
|
@@ -5600,7 +5680,7 @@ const UUI_PRESETS_PANEL_MORE_BUTTON = 'uui-presets-panel-more-button';
|
|
|
5600
5680
|
const UUI_PRESETS_PANEL_INPUT = 'uui-presets-panel-input';
|
|
5601
5681
|
const UUI_PRESETS_PANEL_PRESET = 'uui-presets-panel-preset';
|
|
5602
5682
|
|
|
5603
|
-
var css$j = {"preset-input-cell":"
|
|
5683
|
+
var css$j = {"preset-input-cell":"CX--BX","presetInputCell":"CX--BX","preset-input":"Pc-ija","presetInput":"Pc-ija"};
|
|
5604
5684
|
|
|
5605
5685
|
function PresetInput(props) {
|
|
5606
5686
|
const [presetCaption, setPresetCaption] = React.useState(props.preset?.name || '');
|
|
@@ -5627,7 +5707,7 @@ function PresetInput(props) {
|
|
|
5627
5707
|
React__namespace.default.createElement(TextInput, { cx: css$j.presetInput, onValueChange: setPresetCaption, value: presetCaption, onCancel: cancelActionHandler, onAccept: acceptActionHandler, onBlur: newPresetOnBlurHandler, autoFocus: true, maxLength: 50, isReadonly: readonly })));
|
|
5628
5708
|
}
|
|
5629
5709
|
|
|
5630
|
-
var css$i = {"preset":"
|
|
5710
|
+
var css$i = {"preset":"_7-CwRy","activePreset":"I-Hd6X"};
|
|
5631
5711
|
|
|
5632
5712
|
function Preset(props) {
|
|
5633
5713
|
const [isRenamePreset, setIsRenamePreset] = React.useState(false);
|
|
@@ -5652,7 +5732,7 @@ function Preset(props) {
|
|
|
5652
5732
|
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$i.preset, isPresetActive && css$i.activePreset, UUI_PRESETS_PANEL_PRESET], size: settings.presetsPanel.sizes.tabButton, withNotify: isPresetActive && props.hasPresetChanged(props.preset), icon: PresetActionsDropdownComponent, iconPosition: "right", isActive: isPresetActive }))));
|
|
5653
5733
|
}
|
|
5654
5734
|
|
|
5655
|
-
var css$h = {"divider":"
|
|
5735
|
+
var css$h = {"divider":"eB2z47","dropdownDeleteIcon":"_8t-mZX","presetsWrapper":"xc27q1","addPresetContainer":"wrmFxW","dropContainer":"iqVuNd"};
|
|
5656
5736
|
|
|
5657
5737
|
function PresetsPanel(props) {
|
|
5658
5738
|
const [isAddingPreset, setIsAddingPreset] = React.useState(false);
|
|
@@ -5701,9 +5781,9 @@ function PresetsPanel(props) {
|
|
|
5701
5781
|
React__namespace.default.createElement(uuiComponents.AdaptivePanel, { items: getPanelItems() }))));
|
|
5702
5782
|
}
|
|
5703
5783
|
|
|
5704
|
-
var css$g = {"root":"
|
|
5784
|
+
var css$g = {"root":"LJp6vz"};
|
|
5705
5785
|
|
|
5706
|
-
var css$f = {"root":"
|
|
5786
|
+
var css$f = {"root":"_6gLsRs","burger-content":"rkuFY6","burgerContent":"rkuFY6"};
|
|
5707
5787
|
|
|
5708
5788
|
var _path$3;
|
|
5709
5789
|
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); }
|
|
@@ -5746,7 +5826,7 @@ var SvgNavigationArrowDownOutline = function SvgNavigationArrowDownOutline(props
|
|
|
5746
5826
|
};
|
|
5747
5827
|
var ForwardRef$2 = /*#__PURE__*/React.forwardRef(SvgNavigationArrowDownOutline);
|
|
5748
5828
|
|
|
5749
|
-
var css$e = {"root":"
|
|
5829
|
+
var css$e = {"root":"OZQczq","button-primary":"wx8yiu","buttonPrimary":"wx8yiu","button-secondary":"gy-75D","buttonSecondary":"gy-75D","hasIcon":"QjBofk","dropdown":"qLwDDX"};
|
|
5750
5830
|
|
|
5751
5831
|
function applyBurgerButtonMods(props) {
|
|
5752
5832
|
return [
|
|
@@ -5771,13 +5851,13 @@ const BurgerButton = /* @__PURE__ */React__namespace.default.forwardRef((props,
|
|
|
5771
5851
|
}, dropdownIcon: ForwardRef$2 }));
|
|
5772
5852
|
});
|
|
5773
5853
|
|
|
5774
|
-
var css$d = {"search-input":"
|
|
5854
|
+
var css$d = {"search-input":"gQLAWs","searchInput":"gQLAWs"};
|
|
5775
5855
|
|
|
5776
5856
|
function BurgerSearch(props) {
|
|
5777
5857
|
return (React__namespace.createElement(uuiComponents.TextInput, { cx: cx__default.default(css$d.searchInput, 'uui-main_menu-burger-search'), iconPosition: "left", icon: ForwardRef$M, placeholder: props.placeholder, value: props.value, onValueChange: props.onValueChange, onCancel: props.onCancel, cancelIcon: props.value && ForwardRef$Q }));
|
|
5778
5858
|
}
|
|
5779
5859
|
|
|
5780
|
-
var css$c = {"root":"
|
|
5860
|
+
var css$c = {"root":"w-S8L1","group-header":"YGKwqA","groupHeader":"YGKwqA","group-name":"mbcwfp","groupName":"mbcwfp","line":"YjM1L5"};
|
|
5781
5861
|
|
|
5782
5862
|
function BurgerGroupHeader(props) {
|
|
5783
5863
|
return (React__namespace.createElement("div", { className: cx__default.default(css$c.root, css$c.groupHeader, 'uui-burger-group-header') },
|
|
@@ -5785,7 +5865,7 @@ function BurgerGroupHeader(props) {
|
|
|
5785
5865
|
React__namespace.createElement("span", { className: css$c.groupName }, props.caption)));
|
|
5786
5866
|
}
|
|
5787
5867
|
|
|
5788
|
-
var css$b = {"root":"
|
|
5868
|
+
var css$b = {"root":"C1udgy","type-primary":"LMLYUT","typePrimary":"LMLYUT","type-secondary":"_1NwAKU","typeSecondary":"_1NwAKU"};
|
|
5789
5869
|
|
|
5790
5870
|
const MainMenuButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
5791
5871
|
const { type, ...clickableProps } = props;
|
|
@@ -5813,7 +5893,7 @@ const MainMenuButton = /* @__PURE__ */React__namespace.forwardRef((props, ref) =
|
|
|
5813
5893
|
props.isDropdown && (React__namespace.createElement(uuiComponents.IconContainer, { icon: ForwardRef$P, flipY: props.isOpen }))));
|
|
5814
5894
|
});
|
|
5815
5895
|
|
|
5816
|
-
var css$a = {"dropdown-body":"
|
|
5896
|
+
var css$a = {"dropdown-body":"PB-SfU","dropdownBody":"PB-SfU"};
|
|
5817
5897
|
|
|
5818
5898
|
function MainMenuDropdown(props) {
|
|
5819
5899
|
const handleEscape = (e, onClose, isOpen) => {
|
|
@@ -5859,12 +5939,12 @@ var SvgNavigationGlobalMenuOutlineOutline = function SvgNavigationGlobalMenuOutl
|
|
|
5859
5939
|
};
|
|
5860
5940
|
var ForwardRef$1 = /*#__PURE__*/React.forwardRef(SvgNavigationGlobalMenuOutlineOutline);
|
|
5861
5941
|
|
|
5862
|
-
var css$9 = {"global-menu-btn":"
|
|
5942
|
+
var css$9 = {"global-menu-btn":"A39zfo","globalMenuBtn":"A39zfo","global-menu-icon":"iMqHXL","globalMenuIcon":"iMqHXL"};
|
|
5863
5943
|
|
|
5864
5944
|
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 },
|
|
5865
5945
|
React__namespace.createElement(uuiComponents.IconContainer, { size: 36, icon: ForwardRef$1, cx: css$9.globalMenuIcon }))));
|
|
5866
5946
|
|
|
5867
|
-
var css$8 = {"container":"
|
|
5947
|
+
var css$8 = {"container":"Vfxej-","open":"_6xCWfp","folding-arrow":"Vw00hX","foldingArrow":"Vw00hX"};
|
|
5868
5948
|
|
|
5869
5949
|
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 },
|
|
5870
5950
|
React__namespace.createElement(uuiComponents.Avatar, { size: "36", img: props.avatarUrl }),
|
|
@@ -5872,15 +5952,15 @@ const MainMenuAvatar = /* @__PURE__ */React__namespace.forwardRef((props, ref) =
|
|
|
5872
5952
|
props.isDropdown && (React__namespace.createElement("div", null,
|
|
5873
5953
|
React__namespace.createElement(uuiComponents.IconContainer, { size: 18, icon: ForwardRef$P, flipY: props.isOpen, cx: css$8.foldingArrow }))))));
|
|
5874
5954
|
|
|
5875
|
-
var css$7 = {"search-input":"
|
|
5955
|
+
var css$7 = {"search-input":"_67jSLc","searchInput":"_67jSLc"};
|
|
5876
5956
|
|
|
5877
5957
|
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$M, cancelIcon: props.value?.length > 0 && ForwardRef$Q, ...props, ...iEditable, ref: ref, cx: uuiCore.cx(css$7.searchInput, props.cx), ...props.rawProps })) })));
|
|
5878
5958
|
|
|
5879
|
-
var css$6 = {"container":"
|
|
5959
|
+
var css$6 = {"container":"CuJETf"};
|
|
5880
5960
|
|
|
5881
5961
|
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 })));
|
|
5882
5962
|
|
|
5883
|
-
var css$5 = {"root":"
|
|
5963
|
+
var css$5 = {"root":"b0P50j"};
|
|
5884
5964
|
|
|
5885
5965
|
const Anchor = /* @__PURE__ */uuiCore.withMods(uuiComponents.Anchor, () => [css$5.root]);
|
|
5886
5966
|
|
|
@@ -5938,7 +6018,7 @@ var SvgFileCloudUploadFill = function SvgFileCloudUploadFill(props, ref) {
|
|
|
5938
6018
|
};
|
|
5939
6019
|
var ForwardRef = /*#__PURE__*/React.forwardRef(SvgFileCloudUploadFill);
|
|
5940
6020
|
|
|
5941
|
-
var css$4 = {"root":"
|
|
6021
|
+
var css$4 = {"root":"s2hV5Q","drop-start":"B8kpCs","dropStart":"B8kpCs","drop-over":"MXcGrP","dropOver":"MXcGrP","link":"_1RYnw-","drop-area":"jz8iwH","dropArea":"jz8iwH","drop-caption":"_1IWZzH","dropCaption":"_1IWZzH","icon-blue":"rnKR0s","iconBlue":"rnKR0s"};
|
|
5942
6022
|
|
|
5943
6023
|
function DropSpot(props) {
|
|
5944
6024
|
const getInfoText = typeof props.infoText === 'string'
|
|
@@ -5956,7 +6036,7 @@ function DropSpot(props) {
|
|
|
5956
6036
|
return React__namespace.createElement(uuiComponents.DropSpot, { render: renderAttachmentArea, onFilesDropped: props.onUploadFiles });
|
|
5957
6037
|
}
|
|
5958
6038
|
|
|
5959
|
-
var css$3 = {"root":"
|
|
6039
|
+
var css$3 = {"root":"nksM9G"};
|
|
5960
6040
|
|
|
5961
6041
|
const SvgCircleProgress = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
5962
6042
|
const outsetRadius = props.size / 2 - 1;
|
|
@@ -5967,7 +6047,7 @@ const SvgCircleProgress = /* @__PURE__ */React__namespace.forwardRef((props, ref
|
|
|
5967
6047
|
React__namespace.createElement("circle", { strokeWidth: 1, fill: "transparent", r: outsetRadius, cx: props.size / 2, cy: props.size / 2 })));
|
|
5968
6048
|
});
|
|
5969
6049
|
|
|
5970
|
-
var css$2 = {"root":"
|
|
6050
|
+
var css$2 = {"root":"vLjTKy","file-name":"_6HkxLE","fileName":"_6HkxLE","default-color":"_2IV72d","defaultColor":"_2IV72d","doc-color":"jEY6Ye","docColor":"jEY6Ye","xls-color":"PNefNe","xlsColor":"PNefNe","pdf-color":"_-1OcsO","pdfColor":"_-1OcsO","movie-color":"CFmzjL","movieColor":"CFmzjL","img-color":"s7NiFu","imgColor":"s7NiFu","mov-color":"ZfaPOA","movColor":"ZfaPOA","error-block":"YS16lt","errorBlock":"YS16lt","icons-block":"sJWOvu","iconsBlock":"sJWOvu"};
|
|
5971
6051
|
|
|
5972
6052
|
const FileCard = /* @__PURE__ */React__namespace.forwardRef((props, ref) => {
|
|
5973
6053
|
const [isLoadingShow, setIsLoadingShow] = React__namespace.useState(true);
|
|
@@ -6087,7 +6167,7 @@ const getErrorPageConfig = () => ({
|
|
|
6087
6167
|
},
|
|
6088
6168
|
});
|
|
6089
6169
|
|
|
6090
|
-
var css$1 = {"container":"
|
|
6170
|
+
var css$1 = {"container":"p7VA34"};
|
|
6091
6171
|
|
|
6092
6172
|
const ErrorPage = (props) => {
|
|
6093
6173
|
const isMobileScreen = uuiCore.isMobile();
|
|
@@ -6099,7 +6179,7 @@ const ErrorPage = (props) => {
|
|
|
6099
6179
|
props?.supportLink && React__namespace.default.createElement("div", { className: "uui-error-support-link" }, props?.supportLink))));
|
|
6100
6180
|
};
|
|
6101
6181
|
|
|
6102
|
-
var css = {"recovery-spinner":"
|
|
6182
|
+
var css = {"recovery-spinner":"qpWq9b","recoverySpinner":"qpWq9b","recovery-message":"_8tB95V","recoveryMessage":"_8tB95V","modal-blocker":"DWNCZ1","modalBlocker":"DWNCZ1","modalFadeIn":"-rCBak"};
|
|
6103
6183
|
|
|
6104
6184
|
function ErrorHandler(props) {
|
|
6105
6185
|
const { uuiNotifications, uuiModals, uuiApi } = uuiCore.useUuiContext();
|