@carto/meridian-ds 2.6.0-alpha-searchfield.1 → 2.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +5 -2
- package/dist/{Alert-C1VgP3N1.js → Alert-DHd9hCGz.js} +1 -1
- package/dist/{Alert-F8G9P271.cjs → Alert-DOeOwxOe.cjs} +1 -1
- package/dist/{MenuItem-Bssr5qGq.cjs → MenuItem-CYJN2OVU.cjs} +1 -1
- package/dist/{MenuItem-COajCLkS.js → MenuItem-MUmADf3e.js} +1 -1
- package/dist/{Search-CMWbM9nD.cjs → SwatchSquare-B8PIY3Rd.cjs} +22 -3
- package/dist/{Search-C7wkXu3f.js → SwatchSquare-CaaLsjAC.js} +23 -4
- package/dist/components/index.cjs +3 -151
- package/dist/components/index.js +5 -153
- package/dist/{css-utils-CqIN_t7x.cjs → css-utils-CCi3p7os.cjs} +0 -3
- package/dist/{css-utils-hxI-qUxK.js → css-utils-WejOmkiI.js} +0 -3
- package/dist/custom-icons/index.cjs +642 -559
- package/dist/custom-icons/index.js +642 -559
- package/dist/theme/index.cjs +4 -3
- package/dist/theme/index.js +5 -4
- package/dist/types/components/index.d.ts +0 -2
- package/dist/types/components/index.d.ts.map +1 -1
- package/dist/types/custom-icons/FoldersStackedOutlined.d.ts +4 -0
- package/dist/types/custom-icons/FoldersStackedOutlined.d.ts.map +1 -0
- package/dist/types/custom-icons/RedoAlt.d.ts +4 -0
- package/dist/types/custom-icons/RedoAlt.d.ts.map +1 -0
- package/dist/types/custom-icons/SelectFeature.d.ts.map +1 -1
- package/dist/types/custom-icons/UndoAlt.d.ts +4 -0
- package/dist/types/custom-icons/UndoAlt.d.ts.map +1 -0
- package/dist/types/custom-icons/index.d.ts +3 -0
- package/dist/types/custom-icons/index.d.ts.map +1 -1
- package/dist/types/localization/en.d.ts +0 -1
- package/dist/types/localization/en.d.ts.map +1 -1
- package/dist/types/localization/es.d.ts +0 -1
- package/dist/types/localization/es.d.ts.map +1 -1
- package/dist/types/localization/id.d.ts +0 -1
- package/dist/types/localization/id.d.ts.map +1 -1
- package/dist/types/localization/index.d.ts +0 -3
- package/dist/types/localization/index.d.ts.map +1 -1
- package/dist/types/theme/components/navigation.d.ts.map +1 -1
- package/dist/widgets/index.cjs +7 -8
- package/dist/widgets/index.js +3 -4
- package/package.json +1 -1
- package/dist/SwatchSquare-B6KYVoqV.js +0 -24
- package/dist/SwatchSquare-DuXPIL7t.cjs +0 -23
- package/dist/types/components/SearchField/SearchField.d.ts +0 -32
- package/dist/types/components/SearchField/SearchField.d.ts.map +0 -1
- package/dist/types/components/SearchField/SearchField.stories.d.ts +0 -123
- package/dist/types/components/SearchField/SearchField.stories.d.ts.map +0 -1
- package/dist/types/components/SearchField/index.d.ts +0 -3
- package/dist/types/components/SearchField/index.d.ts.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,10 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
## Unreleased
|
|
4
4
|
|
|
5
|
-
- New SearchField component [#308](https://github.com/CartoDB/meridian-ds/pull/308)
|
|
6
|
-
|
|
7
5
|
## 2.0
|
|
8
6
|
|
|
7
|
+
### 2.6.1
|
|
8
|
+
|
|
9
|
+
- Custom Icons: FoldersStackedOutlined,RedoAlt,UndoAlt [#317](https://github.com/CartoDB/meridian-ds/pull/317)
|
|
10
|
+
- Tabs: remove box-shadow in vertical mode[#302](https://github.com/CartoDB/meridian-ds/pull/302)
|
|
11
|
+
|
|
9
12
|
### 2.6.0
|
|
10
13
|
|
|
11
14
|
- New EllipsisWithTooltip component [#299](https://github.com/CartoDB/meridian-ds/pull/299)
|
|
@@ -3,7 +3,7 @@ import { forwardRef, useState } from "react";
|
|
|
3
3
|
import { styled, Link as Link$1, Alert as Alert$1, Fade, AlertTitle } from "@mui/material";
|
|
4
4
|
import { OpenInNewOutlined } from "@mui/icons-material";
|
|
5
5
|
import "cartocolor";
|
|
6
|
-
import { u as useImperativeIntl, c as ICON_SIZE_SMALL, b as ICON_SIZE_MEDIUM, T as Typography } from "./css-utils-
|
|
6
|
+
import { u as useImperativeIntl, c as ICON_SIZE_SMALL, b as ICON_SIZE_MEDIUM, T as Typography } from "./css-utils-WejOmkiI.js";
|
|
7
7
|
import { useIntl } from "react-intl";
|
|
8
8
|
const ScreenReaderOnly = styled("span")(() => ({
|
|
9
9
|
position: "absolute",
|
|
@@ -4,7 +4,7 @@ const React = require("react");
|
|
|
4
4
|
const material = require("@mui/material");
|
|
5
5
|
const iconsMaterial = require("@mui/icons-material");
|
|
6
6
|
require("cartocolor");
|
|
7
|
-
const cssUtils = require("./css-utils-
|
|
7
|
+
const cssUtils = require("./css-utils-CCi3p7os.cjs");
|
|
8
8
|
const reactIntl = require("react-intl");
|
|
9
9
|
const ScreenReaderOnly = material.styled("span")(() => ({
|
|
10
10
|
position: "absolute",
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
const jsxRuntime = require("react/jsx-runtime");
|
|
3
3
|
const React = require("react");
|
|
4
4
|
const material = require("@mui/material");
|
|
5
|
-
const cssUtils = require("./css-utils-
|
|
5
|
+
const cssUtils = require("./css-utils-CCi3p7os.cjs");
|
|
6
6
|
const StyledMenuItem = material.styled(material.MenuItem, {
|
|
7
7
|
shouldForwardProp: (prop) => !["subtitle", "destructive", "extended", "fixed", "iconColor"].includes(
|
|
8
8
|
prop
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
3
|
import { styled, MenuItem as MenuItem$1 } from "@mui/material";
|
|
4
|
-
import { f as MENU_ITEM_SIZE_DENSE, h as MENU_ITEM_SIZE_EXTENDED } from "./css-utils-
|
|
4
|
+
import { f as MENU_ITEM_SIZE_DENSE, h as MENU_ITEM_SIZE_EXTENDED } from "./css-utils-WejOmkiI.js";
|
|
5
5
|
const StyledMenuItem = styled(MenuItem$1, {
|
|
6
6
|
shouldForwardProp: (prop) => !["subtitle", "destructive", "extended", "fixed", "iconColor"].includes(
|
|
7
7
|
prop
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
const jsxRuntime = require("react/jsx-runtime");
|
|
3
3
|
const React = require("react");
|
|
4
4
|
const material = require("@mui/material");
|
|
5
|
-
const Icon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5
|
+
const Icon$1 = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
6
6
|
"path",
|
|
7
7
|
{
|
|
8
8
|
fill: "currentColor",
|
|
@@ -11,10 +11,10 @@ const Icon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3
|
|
|
11
11
|
clipRule: "evenodd"
|
|
12
12
|
}
|
|
13
13
|
) });
|
|
14
|
-
const BaseSvgIcon = material.createSvgIcon(Icon(), "Search");
|
|
14
|
+
const BaseSvgIcon$1 = material.createSvgIcon(Icon$1(), "Search");
|
|
15
15
|
function Search({ width, height, sx, ...props }, ref) {
|
|
16
16
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
17
|
-
BaseSvgIcon,
|
|
17
|
+
BaseSvgIcon$1,
|
|
18
18
|
{
|
|
19
19
|
ref,
|
|
20
20
|
viewBox: "0 0 24 24",
|
|
@@ -28,4 +28,23 @@ function Search({ width, height, sx, ...props }, ref) {
|
|
|
28
28
|
);
|
|
29
29
|
}
|
|
30
30
|
const Search$1 = React.forwardRef(Search);
|
|
31
|
+
const Icon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: 16, height: 16, x: 4, y: 4, fill: "currentColor", rx: 2 }) });
|
|
32
|
+
const BaseSvgIcon = material.createSvgIcon(Icon(), "SwatchSquare");
|
|
33
|
+
function SwatchSquare({ width, height, sx, ...props }, ref) {
|
|
34
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
35
|
+
BaseSvgIcon,
|
|
36
|
+
{
|
|
37
|
+
ref,
|
|
38
|
+
viewBox: "0 0 24 24",
|
|
39
|
+
sx: {
|
|
40
|
+
width,
|
|
41
|
+
height: height || width,
|
|
42
|
+
...sx
|
|
43
|
+
},
|
|
44
|
+
...props
|
|
45
|
+
}
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
const SwatchSquare$1 = React.forwardRef(SwatchSquare);
|
|
31
49
|
exports.Search = Search$1;
|
|
50
|
+
exports.SwatchSquare = SwatchSquare$1;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from "react";
|
|
3
3
|
import { createSvgIcon } from "@mui/material";
|
|
4
|
-
const Icon = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx(
|
|
4
|
+
const Icon$1 = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx(
|
|
5
5
|
"path",
|
|
6
6
|
{
|
|
7
7
|
fill: "currentColor",
|
|
@@ -10,10 +10,10 @@ const Icon = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/s
|
|
|
10
10
|
clipRule: "evenodd"
|
|
11
11
|
}
|
|
12
12
|
) });
|
|
13
|
-
const BaseSvgIcon = createSvgIcon(Icon(), "Search");
|
|
13
|
+
const BaseSvgIcon$1 = createSvgIcon(Icon$1(), "Search");
|
|
14
14
|
function Search({ width, height, sx, ...props }, ref) {
|
|
15
15
|
return /* @__PURE__ */ jsx(
|
|
16
|
-
BaseSvgIcon,
|
|
16
|
+
BaseSvgIcon$1,
|
|
17
17
|
{
|
|
18
18
|
ref,
|
|
19
19
|
viewBox: "0 0 24 24",
|
|
@@ -27,6 +27,25 @@ function Search({ width, height, sx, ...props }, ref) {
|
|
|
27
27
|
);
|
|
28
28
|
}
|
|
29
29
|
const Search$1 = forwardRef(Search);
|
|
30
|
+
const Icon = () => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", children: /* @__PURE__ */ jsx("rect", { width: 16, height: 16, x: 4, y: 4, fill: "currentColor", rx: 2 }) });
|
|
31
|
+
const BaseSvgIcon = createSvgIcon(Icon(), "SwatchSquare");
|
|
32
|
+
function SwatchSquare({ width, height, sx, ...props }, ref) {
|
|
33
|
+
return /* @__PURE__ */ jsx(
|
|
34
|
+
BaseSvgIcon,
|
|
35
|
+
{
|
|
36
|
+
ref,
|
|
37
|
+
viewBox: "0 0 24 24",
|
|
38
|
+
sx: {
|
|
39
|
+
width,
|
|
40
|
+
height: height || width,
|
|
41
|
+
...sx
|
|
42
|
+
},
|
|
43
|
+
...props
|
|
44
|
+
}
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
const SwatchSquare$1 = forwardRef(SwatchSquare);
|
|
30
48
|
export {
|
|
31
|
-
Search$1 as S
|
|
49
|
+
Search$1 as S,
|
|
50
|
+
SwatchSquare$1 as a
|
|
32
51
|
};
|
|
@@ -4,12 +4,12 @@ const jsxRuntime = require("react/jsx-runtime");
|
|
|
4
4
|
const React = require("react");
|
|
5
5
|
const material = require("@mui/material");
|
|
6
6
|
const iconsMaterial = require("@mui/icons-material");
|
|
7
|
-
const Alert$1 = require("../Alert-
|
|
8
|
-
const cssUtils = require("../css-utils-
|
|
7
|
+
const Alert$1 = require("../Alert-DOeOwxOe.cjs");
|
|
8
|
+
const cssUtils = require("../css-utils-CCi3p7os.cjs");
|
|
9
9
|
const ArrowDown = require("../ArrowDown-DJ0vhbsw.cjs");
|
|
10
10
|
const OpenDiagonallyRight = require("../OpenDiagonallyRight-CpL4ROwg.cjs");
|
|
11
11
|
const reactIntl = require("react-intl");
|
|
12
|
-
const MenuItem = require("../MenuItem-
|
|
12
|
+
const MenuItem = require("../MenuItem-CYJN2OVU.cjs");
|
|
13
13
|
require("cartocolor");
|
|
14
14
|
const reactWindow = require("react-window");
|
|
15
15
|
const reactCodemirror2 = require("react-codemirror2");
|
|
@@ -41,7 +41,6 @@ const DatePicker$1 = require("@mui/x-date-pickers/DatePicker");
|
|
|
41
41
|
const xDatePickers = require("@mui/x-date-pickers");
|
|
42
42
|
const TimePicker$1 = require("@mui/x-date-pickers/TimePicker");
|
|
43
43
|
const DateTimePicker$1 = require("@mui/x-date-pickers/DateTimePicker");
|
|
44
|
-
const Search = require("../Search-CMWbM9nD.cjs");
|
|
45
44
|
const DOMPurify = require("dompurify");
|
|
46
45
|
const IndicatorIcon = material.styled(material.Box)({
|
|
47
46
|
position: "absolute",
|
|
@@ -4947,152 +4946,6 @@ function _FilterDropdown({
|
|
|
4947
4946
|
const FilterDropdown = React.forwardRef(
|
|
4948
4947
|
_FilterDropdown
|
|
4949
4948
|
);
|
|
4950
|
-
const SearchIcon = material.styled(Search.Search, {
|
|
4951
|
-
shouldForwardProp: (prop) => prop !== "minimized" && prop !== "disabled"
|
|
4952
|
-
})(
|
|
4953
|
-
({ theme, minimized, disabled }) => ({
|
|
4954
|
-
cursor: !disabled && minimized ? "pointer" : "inherit",
|
|
4955
|
-
width: cssUtils.ICON_SIZE_MEDIUM,
|
|
4956
|
-
height: cssUtils.ICON_SIZE_MEDIUM,
|
|
4957
|
-
path: {
|
|
4958
|
-
fillOpacity: 1,
|
|
4959
|
-
fill: disabled ? theme.palette.text.disabled : theme.palette.text.secondary
|
|
4960
|
-
}
|
|
4961
|
-
})
|
|
4962
|
-
);
|
|
4963
|
-
const CancelIcon = material.styled(iconsMaterial.Cancel)(({ theme }) => ({
|
|
4964
|
-
fill: theme.palette.text.hint,
|
|
4965
|
-
cursor: "pointer"
|
|
4966
|
-
}));
|
|
4967
|
-
const CircularProgressIcon = material.styled(material.CircularProgress)(({ theme }) => ({
|
|
4968
|
-
svg: {
|
|
4969
|
-
color: theme.palette.primary.main
|
|
4970
|
-
}
|
|
4971
|
-
}));
|
|
4972
|
-
const SearchFieldBase = material.styled(material.TextField, {
|
|
4973
|
-
shouldForwardProp: (prop) => prop !== "minimized" && prop !== "isInputFocused"
|
|
4974
|
-
})(
|
|
4975
|
-
({ theme, disabled, minimized, isInputFocused }) => ({
|
|
4976
|
-
"& .MuiInputBase-input": {
|
|
4977
|
-
cursor: disabled ? "not-allowed" : "text",
|
|
4978
|
-
pointerEvents: isInputFocused ? "auto" : "none"
|
|
4979
|
-
// Fix Chrome scroll issue https://issues.chromium.org/issues/41245282
|
|
4980
|
-
},
|
|
4981
|
-
"&.MuiTextField-root .MuiInputBase-root": {
|
|
4982
|
-
paddingRight: theme.spacing(1),
|
|
4983
|
-
"&.MuiInputBase-sizeSmall": {
|
|
4984
|
-
paddingRight: theme.spacing(0.5)
|
|
4985
|
-
},
|
|
4986
|
-
"&:before": {
|
|
4987
|
-
border: `none !important`,
|
|
4988
|
-
"&:hover": {
|
|
4989
|
-
border: `none !important`
|
|
4990
|
-
}
|
|
4991
|
-
},
|
|
4992
|
-
width: minimized ? theme.spacing(4) : "100%",
|
|
4993
|
-
transition: theme.transitions.create("width", {
|
|
4994
|
-
easing: theme.transitions.easing.easeInOut,
|
|
4995
|
-
duration: theme.transitions.duration.shortest
|
|
4996
|
-
})
|
|
4997
|
-
},
|
|
4998
|
-
// Input Adornment
|
|
4999
|
-
"& .MuiInputAdornment-positionStart": {
|
|
5000
|
-
marginLeft: minimized ? theme.spacing(0.125) : void 0
|
|
5001
|
-
},
|
|
5002
|
-
"& .MuiInputAdornment-positionEnd": {
|
|
5003
|
-
minWidth: theme.spacing(4),
|
|
5004
|
-
"&.MuiInputAdornment-sizeSmall": {
|
|
5005
|
-
minWidth: theme.spacing(3)
|
|
5006
|
-
}
|
|
5007
|
-
},
|
|
5008
|
-
// Variants
|
|
5009
|
-
"& .MuiFilledInput-root": {
|
|
5010
|
-
transition: theme.transitions.create("background-color", {
|
|
5011
|
-
easing: theme.transitions.easing.easeInOut,
|
|
5012
|
-
duration: theme.transitions.duration.shortest
|
|
5013
|
-
}),
|
|
5014
|
-
backgroundColor: `${minimized ? "inherit" : theme.palette.default.background} !important`,
|
|
5015
|
-
"&:hover": {
|
|
5016
|
-
backgroundColor: `${disabled ? "inherit" : theme.palette.action.hover} !important`
|
|
5017
|
-
}
|
|
5018
|
-
}
|
|
5019
|
-
})
|
|
5020
|
-
);
|
|
5021
|
-
function _SearchField({
|
|
5022
|
-
value,
|
|
5023
|
-
defaultValue,
|
|
5024
|
-
placeholder,
|
|
5025
|
-
onChange,
|
|
5026
|
-
onClick,
|
|
5027
|
-
onResetSearch,
|
|
5028
|
-
disabled,
|
|
5029
|
-
minimized = false,
|
|
5030
|
-
loading = false,
|
|
5031
|
-
variant = "filled",
|
|
5032
|
-
size = "small",
|
|
5033
|
-
InputProps,
|
|
5034
|
-
startAdornment,
|
|
5035
|
-
endAdornment,
|
|
5036
|
-
onFocus,
|
|
5037
|
-
onBlur,
|
|
5038
|
-
clearTextLabel,
|
|
5039
|
-
...otherProps
|
|
5040
|
-
}, ref) {
|
|
5041
|
-
const [isInputFocused, setIsInputFocused] = React.useState(false);
|
|
5042
|
-
const clearTextLabelValue = Alert$1.useTranslationFallback(
|
|
5043
|
-
"c4r.button.clear",
|
|
5044
|
-
clearTextLabel
|
|
5045
|
-
);
|
|
5046
|
-
const handleFocus = (event) => {
|
|
5047
|
-
setIsInputFocused(true);
|
|
5048
|
-
onFocus == null ? void 0 : onFocus(event);
|
|
5049
|
-
};
|
|
5050
|
-
const handleBlur = (event) => {
|
|
5051
|
-
setIsInputFocused(false);
|
|
5052
|
-
onBlur == null ? void 0 : onBlur(event);
|
|
5053
|
-
};
|
|
5054
|
-
const handleClearText = () => {
|
|
5055
|
-
onResetSearch == null ? void 0 : onResetSearch();
|
|
5056
|
-
onChange == null ? void 0 : onChange({ target: { value: "" } });
|
|
5057
|
-
};
|
|
5058
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
5059
|
-
SearchFieldBase,
|
|
5060
|
-
{
|
|
5061
|
-
value: minimized ? "" : value,
|
|
5062
|
-
defaultValue,
|
|
5063
|
-
placeholder: minimized ? "" : placeholder,
|
|
5064
|
-
onChange,
|
|
5065
|
-
onClick,
|
|
5066
|
-
variant,
|
|
5067
|
-
size,
|
|
5068
|
-
focused: false,
|
|
5069
|
-
isInputFocused,
|
|
5070
|
-
disabled,
|
|
5071
|
-
minimized,
|
|
5072
|
-
InputProps: {
|
|
5073
|
-
onFocus: handleFocus,
|
|
5074
|
-
onBlur: handleBlur,
|
|
5075
|
-
startAdornment: /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "start", children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "inline-flex", ml: minimized ? -0.75 : 0 }, children: loading && minimized ? /* @__PURE__ */ jsxRuntime.jsx(CircularProgressIcon, { size: cssUtils.ICON_SIZE_MEDIUM }) : startAdornment || /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { disabled, minimized }) }) }),
|
|
5076
|
-
endAdornment: /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "end", children: loading ? /* @__PURE__ */ jsxRuntime.jsx(CircularProgressIcon, { size: cssUtils.ICON_SIZE_MEDIUM }) : !disabled && !minimized && (value ?? defaultValue) ? endAdornment || /* @__PURE__ */ jsxRuntime.jsx(
|
|
5077
|
-
cssUtils.IconButton,
|
|
5078
|
-
{
|
|
5079
|
-
icon: /* @__PURE__ */ jsxRuntime.jsx(CancelIcon, {}),
|
|
5080
|
-
onClick: handleClearText,
|
|
5081
|
-
size,
|
|
5082
|
-
color: "default",
|
|
5083
|
-
disabled,
|
|
5084
|
-
tooltip: clearTextLabelValue
|
|
5085
|
-
}
|
|
5086
|
-
) : void 0 }),
|
|
5087
|
-
...InputProps
|
|
5088
|
-
},
|
|
5089
|
-
"data-name": "search-field",
|
|
5090
|
-
ref,
|
|
5091
|
-
...otherProps
|
|
5092
|
-
}
|
|
5093
|
-
);
|
|
5094
|
-
}
|
|
5095
|
-
const SearchField = React.forwardRef(_SearchField);
|
|
5096
4949
|
const MAX_WIDTH = 480;
|
|
5097
4950
|
const SnackbarRoot = material.styled(material.Snackbar)(({ theme }) => ({
|
|
5098
4951
|
bottom: theme.spacing(2),
|
|
@@ -5916,7 +5769,6 @@ exports.MenuList = MenuList;
|
|
|
5916
5769
|
exports.MultipleAutocomplete = MultipleAutocomplete;
|
|
5917
5770
|
exports.MultipleSelectField = MultipleSelectField;
|
|
5918
5771
|
exports.PasswordField = PasswordField;
|
|
5919
|
-
exports.SearchField = SearchField;
|
|
5920
5772
|
exports.SelectField = SelectField;
|
|
5921
5773
|
exports.Snackbar = Snackbar;
|
|
5922
5774
|
exports.SplitButton = SplitButton;
|
package/dist/components/index.js
CHANGED
|
@@ -2,14 +2,14 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
|
2
2
|
import React, { forwardRef, useState, useRef, useEffect, useMemo, createElement, Fragment as Fragment$1, useCallback, useImperativeHandle } from "react";
|
|
3
3
|
import { styled, Box, Button as Button$1, CircularProgress, Popper, Grow, Paper, ClickAwayListener, MenuList as MenuList$1, MenuItem, ButtonGroup as ButtonGroup$1, TextField, InputAdornment, Select, FormControl, InputLabel, FormHelperText, Link, Checkbox, IconButton as IconButton$1, ListItemText, Tooltip, ToggleButtonGroup as ToggleButtonGroup$1, Autocomplete as Autocomplete$1, Divider, ListItemIcon, createFilterOptions, alpha, useTheme, AppBar as AppBar$1, Toolbar, Dialog as Dialog$1, DialogTitle as DialogTitle$1, Chip, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Slide, Accordion, AccordionSummary, AccordionDetails, Avatar as Avatar$1, Menu as Menu$2, useMediaQuery, Snackbar as Snackbar$1, Portal, Fade } from "@mui/material";
|
|
4
4
|
import { OpenInNewOutlined, VisibilityOffOutlined, VisibilityOutlined, Cancel, ContentCopyOutlined, AddCircleOutlineOutlined, MenuOutlined, MoreVertOutlined, HelpOutline, ErrorOutline, CloseOutlined, Check, TodayOutlined } from "@mui/icons-material";
|
|
5
|
-
import { u as useTranslationFallback, S as ScreenReaderOnly, A as Alert$1 } from "../Alert-
|
|
6
|
-
import { L } from "../Alert-
|
|
7
|
-
import { T as Typography, c as ICON_SIZE_SMALL, u as useImperativeIntl, i as IconButton, f as MENU_ITEM_SIZE_DENSE, d as MENU_LIST_MAX_SIZE, h as MENU_ITEM_SIZE_EXTENDED, M as MENU_ITEM_SIZE_DEFAULT, A as APPBAR_SIZE,
|
|
8
|
-
import { a } from "../css-utils-
|
|
5
|
+
import { u as useTranslationFallback, S as ScreenReaderOnly, A as Alert$1 } from "../Alert-DHd9hCGz.js";
|
|
6
|
+
import { L } from "../Alert-DHd9hCGz.js";
|
|
7
|
+
import { T as Typography, c as ICON_SIZE_SMALL, u as useImperativeIntl, i as IconButton, f as MENU_ITEM_SIZE_DENSE, d as MENU_LIST_MAX_SIZE, h as MENU_ITEM_SIZE_EXTENDED, M as MENU_ITEM_SIZE_DEFAULT, A as APPBAR_SIZE, N as NOTIFICATION_DURATION_IN_MS, e as ellipsisStyles } from "../css-utils-WejOmkiI.js";
|
|
8
|
+
import { a } from "../css-utils-WejOmkiI.js";
|
|
9
9
|
import { A as ArrowDown } from "../ArrowDown-d6bxUL0F.js";
|
|
10
10
|
import { A as ArrowUp, O as OpenDiagonallyRight, C as CloseDiagonallyRight } from "../OpenDiagonallyRight-CGdCEXlF.js";
|
|
11
11
|
import { useIntl } from "react-intl";
|
|
12
|
-
import { M as MenuItem$1 } from "../MenuItem-
|
|
12
|
+
import { M as MenuItem$1 } from "../MenuItem-MUmADf3e.js";
|
|
13
13
|
import "cartocolor";
|
|
14
14
|
import { FixedSizeList } from "react-window";
|
|
15
15
|
import { Controlled, UnControlled } from "react-codemirror2";
|
|
@@ -41,7 +41,6 @@ import { DatePicker as DatePicker$1 } from "@mui/x-date-pickers/DatePicker";
|
|
|
41
41
|
import { PickersDay as PickersDay$1 } from "@mui/x-date-pickers";
|
|
42
42
|
import { TimePicker as TimePicker$1 } from "@mui/x-date-pickers/TimePicker";
|
|
43
43
|
import { DateTimePicker as DateTimePicker$1 } from "@mui/x-date-pickers/DateTimePicker";
|
|
44
|
-
import { S as Search } from "../Search-C7wkXu3f.js";
|
|
45
44
|
import DOMPurify from "dompurify";
|
|
46
45
|
const IndicatorIcon = styled(Box)({
|
|
47
46
|
position: "absolute",
|
|
@@ -4947,152 +4946,6 @@ function _FilterDropdown({
|
|
|
4947
4946
|
const FilterDropdown = forwardRef(
|
|
4948
4947
|
_FilterDropdown
|
|
4949
4948
|
);
|
|
4950
|
-
const SearchIcon = styled(Search, {
|
|
4951
|
-
shouldForwardProp: (prop) => prop !== "minimized" && prop !== "disabled"
|
|
4952
|
-
})(
|
|
4953
|
-
({ theme, minimized, disabled }) => ({
|
|
4954
|
-
cursor: !disabled && minimized ? "pointer" : "inherit",
|
|
4955
|
-
width: ICON_SIZE_MEDIUM,
|
|
4956
|
-
height: ICON_SIZE_MEDIUM,
|
|
4957
|
-
path: {
|
|
4958
|
-
fillOpacity: 1,
|
|
4959
|
-
fill: disabled ? theme.palette.text.disabled : theme.palette.text.secondary
|
|
4960
|
-
}
|
|
4961
|
-
})
|
|
4962
|
-
);
|
|
4963
|
-
const CancelIcon = styled(Cancel)(({ theme }) => ({
|
|
4964
|
-
fill: theme.palette.text.hint,
|
|
4965
|
-
cursor: "pointer"
|
|
4966
|
-
}));
|
|
4967
|
-
const CircularProgressIcon = styled(CircularProgress)(({ theme }) => ({
|
|
4968
|
-
svg: {
|
|
4969
|
-
color: theme.palette.primary.main
|
|
4970
|
-
}
|
|
4971
|
-
}));
|
|
4972
|
-
const SearchFieldBase = styled(TextField, {
|
|
4973
|
-
shouldForwardProp: (prop) => prop !== "minimized" && prop !== "isInputFocused"
|
|
4974
|
-
})(
|
|
4975
|
-
({ theme, disabled, minimized, isInputFocused }) => ({
|
|
4976
|
-
"& .MuiInputBase-input": {
|
|
4977
|
-
cursor: disabled ? "not-allowed" : "text",
|
|
4978
|
-
pointerEvents: isInputFocused ? "auto" : "none"
|
|
4979
|
-
// Fix Chrome scroll issue https://issues.chromium.org/issues/41245282
|
|
4980
|
-
},
|
|
4981
|
-
"&.MuiTextField-root .MuiInputBase-root": {
|
|
4982
|
-
paddingRight: theme.spacing(1),
|
|
4983
|
-
"&.MuiInputBase-sizeSmall": {
|
|
4984
|
-
paddingRight: theme.spacing(0.5)
|
|
4985
|
-
},
|
|
4986
|
-
"&:before": {
|
|
4987
|
-
border: `none !important`,
|
|
4988
|
-
"&:hover": {
|
|
4989
|
-
border: `none !important`
|
|
4990
|
-
}
|
|
4991
|
-
},
|
|
4992
|
-
width: minimized ? theme.spacing(4) : "100%",
|
|
4993
|
-
transition: theme.transitions.create("width", {
|
|
4994
|
-
easing: theme.transitions.easing.easeInOut,
|
|
4995
|
-
duration: theme.transitions.duration.shortest
|
|
4996
|
-
})
|
|
4997
|
-
},
|
|
4998
|
-
// Input Adornment
|
|
4999
|
-
"& .MuiInputAdornment-positionStart": {
|
|
5000
|
-
marginLeft: minimized ? theme.spacing(0.125) : void 0
|
|
5001
|
-
},
|
|
5002
|
-
"& .MuiInputAdornment-positionEnd": {
|
|
5003
|
-
minWidth: theme.spacing(4),
|
|
5004
|
-
"&.MuiInputAdornment-sizeSmall": {
|
|
5005
|
-
minWidth: theme.spacing(3)
|
|
5006
|
-
}
|
|
5007
|
-
},
|
|
5008
|
-
// Variants
|
|
5009
|
-
"& .MuiFilledInput-root": {
|
|
5010
|
-
transition: theme.transitions.create("background-color", {
|
|
5011
|
-
easing: theme.transitions.easing.easeInOut,
|
|
5012
|
-
duration: theme.transitions.duration.shortest
|
|
5013
|
-
}),
|
|
5014
|
-
backgroundColor: `${minimized ? "inherit" : theme.palette.default.background} !important`,
|
|
5015
|
-
"&:hover": {
|
|
5016
|
-
backgroundColor: `${disabled ? "inherit" : theme.palette.action.hover} !important`
|
|
5017
|
-
}
|
|
5018
|
-
}
|
|
5019
|
-
})
|
|
5020
|
-
);
|
|
5021
|
-
function _SearchField({
|
|
5022
|
-
value,
|
|
5023
|
-
defaultValue,
|
|
5024
|
-
placeholder,
|
|
5025
|
-
onChange,
|
|
5026
|
-
onClick,
|
|
5027
|
-
onResetSearch,
|
|
5028
|
-
disabled,
|
|
5029
|
-
minimized = false,
|
|
5030
|
-
loading = false,
|
|
5031
|
-
variant = "filled",
|
|
5032
|
-
size = "small",
|
|
5033
|
-
InputProps,
|
|
5034
|
-
startAdornment,
|
|
5035
|
-
endAdornment,
|
|
5036
|
-
onFocus,
|
|
5037
|
-
onBlur,
|
|
5038
|
-
clearTextLabel,
|
|
5039
|
-
...otherProps
|
|
5040
|
-
}, ref) {
|
|
5041
|
-
const [isInputFocused, setIsInputFocused] = useState(false);
|
|
5042
|
-
const clearTextLabelValue = useTranslationFallback(
|
|
5043
|
-
"c4r.button.clear",
|
|
5044
|
-
clearTextLabel
|
|
5045
|
-
);
|
|
5046
|
-
const handleFocus = (event) => {
|
|
5047
|
-
setIsInputFocused(true);
|
|
5048
|
-
onFocus == null ? void 0 : onFocus(event);
|
|
5049
|
-
};
|
|
5050
|
-
const handleBlur = (event) => {
|
|
5051
|
-
setIsInputFocused(false);
|
|
5052
|
-
onBlur == null ? void 0 : onBlur(event);
|
|
5053
|
-
};
|
|
5054
|
-
const handleClearText = () => {
|
|
5055
|
-
onResetSearch == null ? void 0 : onResetSearch();
|
|
5056
|
-
onChange == null ? void 0 : onChange({ target: { value: "" } });
|
|
5057
|
-
};
|
|
5058
|
-
return /* @__PURE__ */ jsx(
|
|
5059
|
-
SearchFieldBase,
|
|
5060
|
-
{
|
|
5061
|
-
value: minimized ? "" : value,
|
|
5062
|
-
defaultValue,
|
|
5063
|
-
placeholder: minimized ? "" : placeholder,
|
|
5064
|
-
onChange,
|
|
5065
|
-
onClick,
|
|
5066
|
-
variant,
|
|
5067
|
-
size,
|
|
5068
|
-
focused: false,
|
|
5069
|
-
isInputFocused,
|
|
5070
|
-
disabled,
|
|
5071
|
-
minimized,
|
|
5072
|
-
InputProps: {
|
|
5073
|
-
onFocus: handleFocus,
|
|
5074
|
-
onBlur: handleBlur,
|
|
5075
|
-
startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(Box, { sx: { display: "inline-flex", ml: minimized ? -0.75 : 0 }, children: loading && minimized ? /* @__PURE__ */ jsx(CircularProgressIcon, { size: ICON_SIZE_MEDIUM }) : startAdornment || /* @__PURE__ */ jsx(SearchIcon, { disabled, minimized }) }) }),
|
|
5076
|
-
endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: loading ? /* @__PURE__ */ jsx(CircularProgressIcon, { size: ICON_SIZE_MEDIUM }) : !disabled && !minimized && (value ?? defaultValue) ? endAdornment || /* @__PURE__ */ jsx(
|
|
5077
|
-
IconButton,
|
|
5078
|
-
{
|
|
5079
|
-
icon: /* @__PURE__ */ jsx(CancelIcon, {}),
|
|
5080
|
-
onClick: handleClearText,
|
|
5081
|
-
size,
|
|
5082
|
-
color: "default",
|
|
5083
|
-
disabled,
|
|
5084
|
-
tooltip: clearTextLabelValue
|
|
5085
|
-
}
|
|
5086
|
-
) : void 0 }),
|
|
5087
|
-
...InputProps
|
|
5088
|
-
},
|
|
5089
|
-
"data-name": "search-field",
|
|
5090
|
-
ref,
|
|
5091
|
-
...otherProps
|
|
5092
|
-
}
|
|
5093
|
-
);
|
|
5094
|
-
}
|
|
5095
|
-
const SearchField = forwardRef(_SearchField);
|
|
5096
4949
|
const MAX_WIDTH = 480;
|
|
5097
4950
|
const SnackbarRoot = styled(Snackbar$1)(({ theme }) => ({
|
|
5098
4951
|
bottom: theme.spacing(2),
|
|
@@ -5915,7 +5768,6 @@ export {
|
|
|
5915
5768
|
MultipleSelectField,
|
|
5916
5769
|
PasswordField,
|
|
5917
5770
|
ScreenReaderOnly,
|
|
5918
|
-
SearchField,
|
|
5919
5771
|
SelectField,
|
|
5920
5772
|
Snackbar,
|
|
5921
5773
|
SplitButton,
|
|
@@ -818,7 +818,6 @@ const en = {
|
|
|
818
818
|
copy: "Copy",
|
|
819
819
|
save: "Save",
|
|
820
820
|
add: "Add",
|
|
821
|
-
clear: "Clear",
|
|
822
821
|
showOptions: "Show options",
|
|
823
822
|
hide: "Hide",
|
|
824
823
|
show: "Show",
|
|
@@ -968,7 +967,6 @@ const es = {
|
|
|
968
967
|
copy: "Copiar",
|
|
969
968
|
save: "Guardar",
|
|
970
969
|
add: "Añadir",
|
|
971
|
-
clear: "Borrar",
|
|
972
970
|
showOptions: "Mostrar opciones",
|
|
973
971
|
hide: "Ocultar",
|
|
974
972
|
show: "Mostrar",
|
|
@@ -1116,7 +1114,6 @@ const id = {
|
|
|
1116
1114
|
copy: "Salin",
|
|
1117
1115
|
save: "Simpan",
|
|
1118
1116
|
add: "Tambah",
|
|
1119
|
-
clear: "Bersihkan",
|
|
1120
1117
|
showOptions: "Tampilkan opsi",
|
|
1121
1118
|
hide: "Sembunyikan",
|
|
1122
1119
|
show: "Tampilkan",
|
|
@@ -817,7 +817,6 @@ const en = {
|
|
|
817
817
|
copy: "Copy",
|
|
818
818
|
save: "Save",
|
|
819
819
|
add: "Add",
|
|
820
|
-
clear: "Clear",
|
|
821
820
|
showOptions: "Show options",
|
|
822
821
|
hide: "Hide",
|
|
823
822
|
show: "Show",
|
|
@@ -967,7 +966,6 @@ const es = {
|
|
|
967
966
|
copy: "Copiar",
|
|
968
967
|
save: "Guardar",
|
|
969
968
|
add: "Añadir",
|
|
970
|
-
clear: "Borrar",
|
|
971
969
|
showOptions: "Mostrar opciones",
|
|
972
970
|
hide: "Ocultar",
|
|
973
971
|
show: "Mostrar",
|
|
@@ -1115,7 +1113,6 @@ const id = {
|
|
|
1115
1113
|
copy: "Salin",
|
|
1116
1114
|
save: "Simpan",
|
|
1117
1115
|
add: "Tambah",
|
|
1118
|
-
clear: "Bersihkan",
|
|
1119
1116
|
showOptions: "Tampilkan opsi",
|
|
1120
1117
|
hide: "Sembunyikan",
|
|
1121
1118
|
show: "Tampilkan",
|