@carto/meridian-ds 1.4.5 → 1.4.6

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 CHANGED
@@ -4,6 +4,11 @@
4
4
 
5
5
  ## 1.0
6
6
 
7
+ ### 1.4.6
8
+
9
+ - Fix tooltips in ChartLegend pagination buttons [201](https://github.com/CartoDB/meridian-ds/pull/201)
10
+ - Remove `scrollIntoView` from Category Widget [203](https://github.com/CartoDB/meridian-ds/pull/203)
11
+
7
12
  ### 1.4.5
8
13
 
9
14
  - Fix Icon shapes size [#194](https://github.com/CartoDB/meridian-ds/pull/194)
@@ -1,8 +1,66 @@
1
1
  "use strict";
2
2
  const jsxRuntime = require("react/jsx-runtime");
3
- const TablePaginationActions = require("./TablePaginationActions-CFGXm44W.cjs");
4
- const material = require("@mui/material");
5
3
  const React = require("react");
4
+ const material = require("@mui/material");
5
+ const TablePaginationActions = require("./TablePaginationActions-CFGXm44W.cjs");
6
+ const Option = material.styled("div")(({ theme }) => ({
7
+ position: "relative",
8
+ display: "inline-flex",
9
+ // TODO: Remove this once we have a better way to handle the spacing between icon buttons:
10
+ // https://app.shortcut.com/cartoteam/story/471284/create-iconbuttongroup-component-to-properly-group-several-icons
11
+ "& + &, & + .optionIconButton": {
12
+ marginLeft: theme.spacing(0.5)
13
+ }
14
+ }));
15
+ const StyledIconButton = material.styled(material.IconButton, {
16
+ shouldForwardProp: (prop) => !["active"].includes(prop)
17
+ })(({ active, theme }) => ({
18
+ ...active && {
19
+ color: theme.palette.primary.main,
20
+ backgroundColor: theme.palette.primary.background,
21
+ "& svg:not(.doNotFillIcon) path": {
22
+ fill: theme.palette.primary.main
23
+ }
24
+ }
25
+ }));
26
+ function _IconButton({
27
+ tooltip,
28
+ tooltipPlacement = "top",
29
+ icon,
30
+ size = "medium",
31
+ variant = "icon",
32
+ color = "default",
33
+ sx,
34
+ className,
35
+ loading,
36
+ disabled,
37
+ active,
38
+ ...props
39
+ }, ref) {
40
+ return /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { placement: tooltipPlacement, title: tooltip ?? "", children: /* @__PURE__ */ jsxRuntime.jsx(
41
+ Option,
42
+ {
43
+ className: `optionIconButton ${className ?? ""}`,
44
+ sx,
45
+ "data-testid": "icon-button",
46
+ children: /* @__PURE__ */ jsxRuntime.jsx(
47
+ StyledIconButton,
48
+ {
49
+ ...props,
50
+ ref,
51
+ size,
52
+ variant,
53
+ color,
54
+ active,
55
+ disabled: disabled || loading,
56
+ role: "button",
57
+ children: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" }) : icon
58
+ }
59
+ )
60
+ }
61
+ ) });
62
+ }
63
+ const IconButton = React.forwardRef(_IconButton);
6
64
  const StyledAlert = material.styled(material.Alert, {
7
65
  shouldForwardProp: (prop) => ![
8
66
  "isNeutral",
@@ -131,3 +189,4 @@ function _Alert({
131
189
  }
132
190
  const Alert = React.forwardRef(_Alert);
133
191
  exports.Alert = Alert;
192
+ exports.IconButton = IconButton;
@@ -1,7 +1,65 @@
1
1
  import { jsx, jsxs } from "react/jsx-runtime";
2
- import { b as ICON_SIZE_MEDIUM, T as Typography } from "./TablePaginationActions-KpTvhN4Y.js";
3
- import { styled, Alert as Alert$1, Fade, AlertTitle } from "@mui/material";
4
2
  import { forwardRef, useState } from "react";
3
+ import { styled, IconButton as IconButton$1, Tooltip, CircularProgress, Alert as Alert$1, Fade, AlertTitle } from "@mui/material";
4
+ import { b as ICON_SIZE_MEDIUM, T as Typography } from "./TablePaginationActions-KpTvhN4Y.js";
5
+ const Option = styled("div")(({ theme }) => ({
6
+ position: "relative",
7
+ display: "inline-flex",
8
+ // TODO: Remove this once we have a better way to handle the spacing between icon buttons:
9
+ // https://app.shortcut.com/cartoteam/story/471284/create-iconbuttongroup-component-to-properly-group-several-icons
10
+ "& + &, & + .optionIconButton": {
11
+ marginLeft: theme.spacing(0.5)
12
+ }
13
+ }));
14
+ const StyledIconButton = styled(IconButton$1, {
15
+ shouldForwardProp: (prop) => !["active"].includes(prop)
16
+ })(({ active, theme }) => ({
17
+ ...active && {
18
+ color: theme.palette.primary.main,
19
+ backgroundColor: theme.palette.primary.background,
20
+ "& svg:not(.doNotFillIcon) path": {
21
+ fill: theme.palette.primary.main
22
+ }
23
+ }
24
+ }));
25
+ function _IconButton({
26
+ tooltip,
27
+ tooltipPlacement = "top",
28
+ icon,
29
+ size = "medium",
30
+ variant = "icon",
31
+ color = "default",
32
+ sx,
33
+ className,
34
+ loading,
35
+ disabled,
36
+ active,
37
+ ...props
38
+ }, ref) {
39
+ return /* @__PURE__ */ jsx(Tooltip, { placement: tooltipPlacement, title: tooltip ?? "", children: /* @__PURE__ */ jsx(
40
+ Option,
41
+ {
42
+ className: `optionIconButton ${className ?? ""}`,
43
+ sx,
44
+ "data-testid": "icon-button",
45
+ children: /* @__PURE__ */ jsx(
46
+ StyledIconButton,
47
+ {
48
+ ...props,
49
+ ref,
50
+ size,
51
+ variant,
52
+ color,
53
+ active,
54
+ disabled: disabled || loading,
55
+ role: "button",
56
+ children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 18, color: "inherit" }) : icon
57
+ }
58
+ )
59
+ }
60
+ ) });
61
+ }
62
+ const IconButton = forwardRef(_IconButton);
5
63
  const StyledAlert = styled(Alert$1, {
6
64
  shouldForwardProp: (prop) => ![
7
65
  "isNeutral",
@@ -130,5 +188,6 @@ function _Alert({
130
188
  }
131
189
  const Alert = forwardRef(_Alert);
132
190
  export {
133
- Alert as A
191
+ Alert as A,
192
+ IconButton as I
134
193
  };
@@ -6,7 +6,7 @@ const material = require("@mui/material");
6
6
  const TablePaginationActions = require("../TablePaginationActions-CFGXm44W.cjs");
7
7
  const reactIntl = require("react-intl");
8
8
  const iconsMaterial = require("@mui/icons-material");
9
- const Alert$1 = require("../Alert-zqtoWsBL.cjs");
9
+ const Alert$1 = require("../Alert-BiOR9aar.cjs");
10
10
  require("cartocolor");
11
11
  const MenuItem = require("../MenuItem-Br2jY2lt.cjs");
12
12
  const ArrowDown = require("../ArrowDown-8fLj23Ge.cjs");
@@ -381,64 +381,6 @@ function ToggleButtonGroup({
381
381
  }
382
382
  );
383
383
  }
384
- const Option = material.styled("div")(({ theme }) => ({
385
- position: "relative",
386
- display: "inline-flex",
387
- // TODO: Remove this once we have a better way to handle the spacing between icon buttons:
388
- // https://app.shortcut.com/cartoteam/story/471284/create-iconbuttongroup-component-to-properly-group-several-icons
389
- "& + &, & + .optionIconButton": {
390
- marginLeft: theme.spacing(0.5)
391
- }
392
- }));
393
- const StyledIconButton = material.styled(material.IconButton, {
394
- shouldForwardProp: (prop) => !["active"].includes(prop)
395
- })(({ active, theme }) => ({
396
- ...active && {
397
- color: theme.palette.primary.main,
398
- backgroundColor: theme.palette.primary.background,
399
- "& svg:not(.doNotFillIcon) path": {
400
- fill: theme.palette.primary.main
401
- }
402
- }
403
- }));
404
- function _IconButton({
405
- tooltip,
406
- tooltipPlacement = "top",
407
- icon,
408
- size = "medium",
409
- variant = "icon",
410
- color = "default",
411
- sx,
412
- className,
413
- loading,
414
- disabled,
415
- active,
416
- ...props
417
- }, ref) {
418
- return /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { placement: tooltipPlacement, title: tooltip ?? "", children: /* @__PURE__ */ jsxRuntime.jsx(
419
- Option,
420
- {
421
- className: `optionIconButton ${className ?? ""}`,
422
- sx,
423
- "data-testid": "icon-button",
424
- children: /* @__PURE__ */ jsxRuntime.jsx(
425
- StyledIconButton,
426
- {
427
- ...props,
428
- ref,
429
- size,
430
- variant,
431
- color,
432
- active,
433
- disabled: disabled || loading,
434
- role: "button",
435
- children: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 18, color: "inherit" }) : icon
436
- }
437
- )
438
- }
439
- ) });
440
- }
441
- const IconButton = React.forwardRef(_IconButton);
442
384
  const StyledMenu = material.styled(material.Menu, {
443
385
  shouldForwardProp: (prop) => !["extended", "width", "height"].includes(prop)
444
386
  })(({ theme, extended, width, height }) => ({
@@ -1480,7 +1422,7 @@ const _CopiableComponent = ({
1480
1422
  children: [
1481
1423
  children,
1482
1424
  button && /* @__PURE__ */ jsxRuntime.jsx(
1483
- IconButton,
1425
+ Alert$1.IconButton,
1484
1426
  {
1485
1427
  ...buttonProps,
1486
1428
  disabled,
@@ -1739,7 +1681,7 @@ function Snackbar({
1739
1681
  }
1740
1682
  ),
1741
1683
  closeable && /* @__PURE__ */ jsxRuntime.jsx(CloseButtonWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
1742
- IconButton,
1684
+ Alert$1.IconButton,
1743
1685
  {
1744
1686
  color: "default",
1745
1687
  onClick: (e) => onClose(e, "timeout"),
@@ -2989,7 +2931,7 @@ function CodeAreaHeader({
2989
2931
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
2990
2932
  /* @__PURE__ */ jsxRuntime.jsxs(Header, { size, "data-size": size, "data-name": "code-area-header", children: [
2991
2933
  /* @__PURE__ */ jsxRuntime.jsx(
2992
- IconButton,
2934
+ Alert$1.IconButton,
2993
2935
  {
2994
2936
  color: "default",
2995
2937
  size,
@@ -3053,7 +2995,7 @@ function CodeAreaHeader({
3053
2995
  }
3054
2996
  ),
3055
2997
  showExpandButton && /* @__PURE__ */ jsxRuntime.jsx(
3056
- IconButton,
2998
+ Alert$1.IconButton,
3057
2999
  {
3058
3000
  color: "default",
3059
3001
  size,
@@ -4543,6 +4485,7 @@ function CodeAreaDialog({
4543
4485
  exports.TablePaginationActions = TablePaginationActions.TablePaginationActions;
4544
4486
  exports.Typography = TablePaginationActions.Typography;
4545
4487
  exports.Alert = Alert$1.Alert;
4488
+ exports.IconButton = Alert$1.IconButton;
4546
4489
  exports.MenuItem = MenuItem.MenuItem;
4547
4490
  exports.AccordionGroup = AccordionGroup;
4548
4491
  exports.AppBar = AppBar;
@@ -4572,7 +4515,6 @@ exports.DialogFooter = DialogFooter;
4572
4515
  exports.DialogHeader = DialogHeader;
4573
4516
  exports.DialogPaper = DialogPaper;
4574
4517
  exports.DialogStepper = DialogStepper;
4575
- exports.IconButton = IconButton;
4576
4518
  exports.LabelWithIndicator = LabelWithIndicator;
4577
4519
  exports.Menu = Menu$1;
4578
4520
  exports.MenuItemFilter = MenuItemFilter;
@@ -1,11 +1,11 @@
1
1
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
2
  import { forwardRef, useState, useEffect, useMemo, useRef, Fragment as Fragment$1, useImperativeHandle, useCallback } from "react";
3
- import { styled, Box, Button as Button$1, CircularProgress, TextField, InputAdornment, IconButton as IconButton$1, Tooltip, Select, MenuItem, FormControl, InputLabel, FormHelperText, ToggleButtonGroup as ToggleButtonGroup$1, Menu as Menu$2, MenuList as MenuList$1, Link, Checkbox, ListItemText, Autocomplete as Autocomplete$1, Divider, ListItemIcon, createFilterOptions, Accordion, AccordionSummary, AccordionDetails, Avatar as Avatar$1, Snackbar as Snackbar$1, Portal, Fade, Slide, alpha, useTheme, Toolbar, AppBar as AppBar$1, Paper, Dialog as Dialog$1, DialogTitle as DialogTitle$1, Chip, DialogContent as DialogContent$1, DialogActions as DialogActions$1 } from "@mui/material";
3
+ import { styled, Box, Button as Button$1, CircularProgress, TextField, InputAdornment, IconButton, Tooltip, Select, MenuItem, FormControl, InputLabel, FormHelperText, ToggleButtonGroup as ToggleButtonGroup$1, Menu as Menu$2, MenuList as MenuList$1, Link, Checkbox, ListItemText, Autocomplete as Autocomplete$1, Divider, ListItemIcon, createFilterOptions, Accordion, AccordionSummary, AccordionDetails, Avatar as Avatar$1, Snackbar as Snackbar$1, Portal, Fade, Slide, alpha, useTheme, Toolbar, AppBar as AppBar$1, Paper, Dialog as Dialog$1, DialogTitle as DialogTitle$1, Chip, DialogContent as DialogContent$1, DialogActions as DialogActions$1 } from "@mui/material";
4
4
  import { T as Typography, c as ICON_SIZE_SMALL, u as useImperativeIntl, N as NOTIFICATION_DURATION_IN_MS, A as APPBAR_SIZE } from "../TablePaginationActions-KpTvhN4Y.js";
5
5
  import { a } from "../TablePaginationActions-KpTvhN4Y.js";
6
6
  import { useIntl } from "react-intl";
7
7
  import { VisibilityOffOutlined, VisibilityOutlined, Cancel, AddCircleOutlineOutlined, ContentCopyOutlined, CloseOutlined, MenuOutlined, HelpOutline, TodayOutlined, MoreVertOutlined, ErrorOutline, Check } from "@mui/icons-material";
8
- import { A as Alert$1 } from "../Alert-D8jI1sG4.js";
8
+ import { I as IconButton$1, A as Alert$1 } from "../Alert-CywtIMOj.js";
9
9
  import "cartocolor";
10
10
  import { M as MenuItem$1 } from "../MenuItem-CXnnE5lK.js";
11
11
  import { A as ArrowDown } from "../ArrowDown-CY_wMVJT.js";
@@ -158,7 +158,7 @@ function _PasswordField({ InputProps, size = "small", ...otherProps }, ref) {
158
158
  size,
159
159
  InputProps: {
160
160
  ...InputProps,
161
- endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(IconButton$1, { size, onClick: handleClickShowPassword, children: /* @__PURE__ */ jsx(
161
+ endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(IconButton, { size, onClick: handleClickShowPassword, children: /* @__PURE__ */ jsx(
162
162
  Tooltip,
163
163
  {
164
164
  title: intlConfig.formatMessage({
@@ -380,64 +380,6 @@ function ToggleButtonGroup({
380
380
  }
381
381
  );
382
382
  }
383
- const Option = styled("div")(({ theme }) => ({
384
- position: "relative",
385
- display: "inline-flex",
386
- // TODO: Remove this once we have a better way to handle the spacing between icon buttons:
387
- // https://app.shortcut.com/cartoteam/story/471284/create-iconbuttongroup-component-to-properly-group-several-icons
388
- "& + &, & + .optionIconButton": {
389
- marginLeft: theme.spacing(0.5)
390
- }
391
- }));
392
- const StyledIconButton = styled(IconButton$1, {
393
- shouldForwardProp: (prop) => !["active"].includes(prop)
394
- })(({ active, theme }) => ({
395
- ...active && {
396
- color: theme.palette.primary.main,
397
- backgroundColor: theme.palette.primary.background,
398
- "& svg:not(.doNotFillIcon) path": {
399
- fill: theme.palette.primary.main
400
- }
401
- }
402
- }));
403
- function _IconButton({
404
- tooltip,
405
- tooltipPlacement = "top",
406
- icon,
407
- size = "medium",
408
- variant = "icon",
409
- color = "default",
410
- sx,
411
- className,
412
- loading,
413
- disabled,
414
- active,
415
- ...props
416
- }, ref) {
417
- return /* @__PURE__ */ jsx(Tooltip, { placement: tooltipPlacement, title: tooltip ?? "", children: /* @__PURE__ */ jsx(
418
- Option,
419
- {
420
- className: `optionIconButton ${className ?? ""}`,
421
- sx,
422
- "data-testid": "icon-button",
423
- children: /* @__PURE__ */ jsx(
424
- StyledIconButton,
425
- {
426
- ...props,
427
- ref,
428
- size,
429
- variant,
430
- color,
431
- active,
432
- disabled: disabled || loading,
433
- role: "button",
434
- children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: 18, color: "inherit" }) : icon
435
- }
436
- )
437
- }
438
- ) });
439
- }
440
- const IconButton = forwardRef(_IconButton);
441
383
  const StyledMenu = styled(Menu$2, {
442
384
  shouldForwardProp: (prop) => !["extended", "width", "height"].includes(prop)
443
385
  })(({ theme, extended, width, height }) => ({
@@ -745,7 +687,7 @@ function _MultipleSelectField({
745
687
  onChange: handleChange,
746
688
  size,
747
689
  variant,
748
- endAdornment: showFilters && areAnySelected && /* @__PURE__ */ jsx(UnselectButton, { position: "end", size, children: /* @__PURE__ */ jsx(IconButton$1, { onClick: unselectAll, size, children: /* @__PURE__ */ jsx(Cancel, {}) }) }),
690
+ endAdornment: showFilters && areAnySelected && /* @__PURE__ */ jsx(UnselectButton, { position: "end", size, children: /* @__PURE__ */ jsx(IconButton, { onClick: unselectAll, size, children: /* @__PURE__ */ jsx(Cancel, {}) }) }),
749
691
  menuProps: {
750
692
  PaperProps: {
751
693
  sx: {
@@ -839,7 +781,7 @@ function FilesAction({
839
781
  handleOpen,
840
782
  inProgress
841
783
  }) {
842
- return /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: inProgress ? /* @__PURE__ */ jsx(IconButton$1, { "aria-label": "Loading", disabled: true, size, children: /* @__PURE__ */ jsx(CircularProgress, { size: 18 }) }) : !hasFiles ? /* @__PURE__ */ jsx(
784
+ return /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: inProgress ? /* @__PURE__ */ jsx(IconButton, { "aria-label": "Loading", disabled: true, size, children: /* @__PURE__ */ jsx(CircularProgress, { size: 18 }) }) : !hasFiles ? /* @__PURE__ */ jsx(
843
785
  Button$1,
844
786
  {
845
787
  onClick: handleOpen,
@@ -850,7 +792,7 @@ function FilesAction({
850
792
  children: buttonText
851
793
  }
852
794
  ) : /* @__PURE__ */ jsx(
853
- IconButton$1,
795
+ IconButton,
854
796
  {
855
797
  onClick: handleReset,
856
798
  size,
@@ -1479,7 +1421,7 @@ const _CopiableComponent = ({
1479
1421
  children: [
1480
1422
  children,
1481
1423
  button && /* @__PURE__ */ jsx(
1482
- IconButton,
1424
+ IconButton$1,
1483
1425
  {
1484
1426
  ...buttonProps,
1485
1427
  disabled,
@@ -1738,7 +1680,7 @@ function Snackbar({
1738
1680
  }
1739
1681
  ),
1740
1682
  closeable && /* @__PURE__ */ jsx(CloseButtonWrapper, { children: /* @__PURE__ */ jsx(
1741
- IconButton,
1683
+ IconButton$1,
1742
1684
  {
1743
1685
  color: "default",
1744
1686
  onClick: (e) => onClose(e, "timeout"),
@@ -1949,7 +1891,7 @@ const Menu = styled("div")(({ theme }) => ({
1949
1891
  height: APPBAR_SIZE,
1950
1892
  marginRight: theme.spacing(1.5)
1951
1893
  }));
1952
- const MenuButton = styled(IconButton$1)(({ theme }) => ({
1894
+ const MenuButton = styled(IconButton)(({ theme }) => ({
1953
1895
  marginRight: theme.spacing(1),
1954
1896
  "&.MuiButtonBase-root svg path": {
1955
1897
  fill: theme.palette.brand.appBarContrastText
@@ -2101,7 +2043,7 @@ function ClearButton({
2101
2043
  const intl = useIntl();
2102
2044
  const intlConfig = useImperativeIntl(intl);
2103
2045
  return /* @__PURE__ */ jsx(Container, { size, variant, children: /* @__PURE__ */ jsx(
2104
- IconButton$1,
2046
+ IconButton,
2105
2047
  {
2106
2048
  ...props,
2107
2049
  size,
@@ -2218,7 +2160,7 @@ function DatePicker({
2218
2160
  slots: {
2219
2161
  clearButton: (props2) => /* @__PURE__ */ jsx(ClearButton, { ...props2, size, variant }),
2220
2162
  openPickerButton: (props2) => /* @__PURE__ */ jsx(
2221
- IconButton$1,
2163
+ IconButton,
2222
2164
  {
2223
2165
  ...props2,
2224
2166
  size,
@@ -2718,7 +2660,7 @@ function TimePicker({
2718
2660
  slots: {
2719
2661
  clearButton: (props2) => /* @__PURE__ */ jsx(ClearButton, { ...props2, size, variant }),
2720
2662
  openPickerButton: (props2) => /* @__PURE__ */ jsx(
2721
- IconButton$1,
2663
+ IconButton,
2722
2664
  {
2723
2665
  ...props2,
2724
2666
  size,
@@ -2804,7 +2746,7 @@ function DateTimePicker({
2804
2746
  slots: {
2805
2747
  clearButton: (props2) => /* @__PURE__ */ jsx(ClearButton, { ...props2, size, variant }),
2806
2748
  openPickerButton: (props2) => /* @__PURE__ */ jsx(
2807
- IconButton$1,
2749
+ IconButton,
2808
2750
  {
2809
2751
  ...props2,
2810
2752
  size,
@@ -2988,7 +2930,7 @@ function CodeAreaHeader({
2988
2930
  return /* @__PURE__ */ jsxs(Fragment, { children: [
2989
2931
  /* @__PURE__ */ jsxs(Header, { size, "data-size": size, "data-name": "code-area-header", children: [
2990
2932
  /* @__PURE__ */ jsx(
2991
- IconButton,
2933
+ IconButton$1,
2992
2934
  {
2993
2935
  color: "default",
2994
2936
  size,
@@ -3052,7 +2994,7 @@ function CodeAreaHeader({
3052
2994
  }
3053
2995
  ),
3054
2996
  showExpandButton && /* @__PURE__ */ jsx(
3055
- IconButton,
2997
+ IconButton$1,
3056
2998
  {
3057
2999
  color: "default",
3058
3000
  size,
@@ -4000,7 +3942,7 @@ function DialogHeader({
4000
3942
  {
4001
3943
  title: intlConfig.formatMessage({ id: "c4r.button.close" }),
4002
3944
  placement: "left",
4003
- children: /* @__PURE__ */ jsx(IconButton$1, { onClick: onClose, children: closeIcon || /* @__PURE__ */ jsx(CloseIcon, { "data-testid": "CloseIcon" }) })
3945
+ children: /* @__PURE__ */ jsx(IconButton, { onClick: onClose, children: closeIcon || /* @__PURE__ */ jsx(CloseIcon, { "data-testid": "CloseIcon" }) })
4004
3946
  }
4005
3947
  )
4006
3948
  ] })
@@ -4569,7 +4511,7 @@ export {
4569
4511
  DialogHeader,
4570
4512
  DialogPaper,
4571
4513
  DialogStepper,
4572
- IconButton,
4514
+ IconButton$1 as IconButton,
4573
4515
  LabelWithIndicator,
4574
4516
  Menu$1 as Menu,
4575
4517
  MenuItem$1 as MenuItem,
@@ -1 +1 @@
1
- {"version":3,"file":"CategoryWidgetUI.d.ts","sourceRoot":"","sources":["../../../../src/widgets/CategoryWidgetUI/CategoryWidgetUI.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAE,SAAS,EAAW,MAAM,YAAY,CAAA;AAkB/C,OAAO,EAAE,UAAU,EAAiB,MAAM,wBAAwB,CAAA;AAClE,OAAO,EAAwB,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAI7E,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;AAChD,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,IAAI,EAAE,QAAQ,CAAA;CACf,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,IAAI,EAAE,YAAY,EAAE,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC/B,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,cAAc,CAAA;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,CAAA;IAC/B,0BAA0B,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAA;CAC9D,CAAA;AAOD,iBAAS,gBAAgB,CAAC,EACxB,IAAI,EACJ,SAAoB,EACpB,MAAkB,EAClB,QAAY,EACZ,WAAW,EACX,KAA0B,EAC1B,kBAA8B,EAC9B,0BAAqC,EACrC,SAAgB,EAChB,UAAiB,EACjB,UAAiB,EACjB,SAAS,GACV,EAAE,qBAAqB,2CAklBvB;AAED,eAAe,gBAAgB,CAAA"}
1
+ {"version":3,"file":"CategoryWidgetUI.d.ts","sourceRoot":"","sources":["../../../../src/widgets/CategoryWidgetUI/CategoryWidgetUI.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAE,SAAS,EAAW,MAAM,YAAY,CAAA;AAkB/C,OAAO,EAAE,UAAU,EAAiB,MAAM,wBAAwB,CAAA;AAClE,OAAO,EAAwB,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAI7E,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;AAChD,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,IAAI,EAAE,QAAQ,CAAA;CACf,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,IAAI,EAAE,YAAY,EAAE,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC/B,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,cAAc,CAAA;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,CAAA;IAC/B,0BAA0B,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAA;CAC9D,CAAA;AAOD,iBAAS,gBAAgB,CAAC,EACxB,IAAI,EACJ,SAAoB,EACpB,MAAkB,EAClB,QAAY,EACZ,WAAW,EACX,KAA0B,EAC1B,kBAA8B,EAC9B,0BAAqC,EACrC,SAAgB,EAChB,UAAiB,EACjB,UAAiB,EACjB,SAAS,GACV,EAAE,qBAAqB,2CA6kBvB;AAED,eAAe,gBAAgB,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"ChartLegend.d.ts","sourceRoot":"","sources":["../../../src/widgets/ChartLegend.tsx"],"names":[],"mappings":"AAiEA,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,MAAM,EACN,kBAAkB,EAClB,eAAe,GAChB,EAAE;IACD,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IACzD,kBAAkB,EAAE,MAAM,EAAE,CAAA;IAC5B,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAA;CACjD,2CAqJA"}
1
+ {"version":3,"file":"ChartLegend.d.ts","sourceRoot":"","sources":["../../../src/widgets/ChartLegend.tsx"],"names":[],"mappings":"AAkEA,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,MAAM,EACN,kBAAkB,EAClB,eAAe,GAChB,EAAE;IACD,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IACzD,kBAAkB,EAAE,MAAM,EAAE,CAAA;IAC5B,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAA;CACjD,2CA+IA"}
@@ -9,7 +9,7 @@ const _ReactEcharts = require("echarts-for-react");
9
9
  const reactWindow = require("react-window");
10
10
  const SwatchSquare = require("../SwatchSquare-benaO55C.cjs");
11
11
  const iconsMaterial = require("@mui/icons-material");
12
- const Alert = require("../Alert-zqtoWsBL.cjs");
12
+ const Alert = require("../Alert-BiOR9aar.cjs");
13
13
  const paletteUtils = require("../paletteUtils-B9ybmwiI.cjs");
14
14
  function detectTouchscreen() {
15
15
  let result = false;
@@ -901,9 +901,6 @@ function CategoryWidgetUI({
901
901
  setTempBlockedCategories(categories);
902
902
  }
903
903
  };
904
- const handleSearchFocus = (event) => {
905
- event.currentTarget.scrollIntoView();
906
- };
907
904
  const handleSearchChange = (event) => {
908
905
  setSearchValue(event.currentTarget.value);
909
906
  };
@@ -1226,7 +1223,6 @@ function CategoryWidgetUI({
1226
1223
  id: "c4r.widgets.category.search"
1227
1224
  }),
1228
1225
  onChange: handleSearchChange,
1229
- onFocus: handleSearchFocus,
1230
1226
  InputProps: {
1231
1227
  startAdornment: /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "start", children: /* @__PURE__ */ jsxRuntime.jsx(SwatchSquare.Search, {}) })
1232
1228
  },
@@ -2171,37 +2167,29 @@ function ChartLegend({
2171
2167
  (overflowing || offset > 0) && /* @__PURE__ */ jsxRuntime.jsxs(ShowMoreButtons, { ref: showMoreButtonsRef, children: [
2172
2168
  /* @__PURE__ */ jsxRuntime.jsx(OverflowVeil, {}),
2173
2169
  /* @__PURE__ */ jsxRuntime.jsx(
2174
- material.Tooltip,
2170
+ Alert.IconButton,
2175
2171
  {
2176
- title: intlConfig.formatMessage({
2177
- id: "c4r.widgets.chartLegend.next"
2178
- }),
2179
- children: /* @__PURE__ */ jsxRuntime.jsx(
2180
- material.IconButton,
2181
- {
2182
- size: "small",
2183
- disabled: offset === 0,
2184
- onClick: handleClickLeft,
2185
- children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ChevronLeft, {})
2186
- }
2187
- )
2172
+ icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ChevronLeft, {}),
2173
+ component: "span",
2174
+ size: "small",
2175
+ disabled: offset === 0,
2176
+ onClick: handleClickLeft,
2177
+ tooltip: intlConfig.formatMessage({
2178
+ id: "c4r.widgets.chartLegend.prev"
2179
+ })
2188
2180
  }
2189
2181
  ),
2190
2182
  /* @__PURE__ */ jsxRuntime.jsx(
2191
- material.Tooltip,
2183
+ Alert.IconButton,
2192
2184
  {
2193
- title: intlConfig.formatMessage({
2194
- id: "c4r.widgets.chartLegend.prev"
2195
- }),
2196
- children: /* @__PURE__ */ jsxRuntime.jsx(
2197
- material.IconButton,
2198
- {
2199
- size: "small",
2200
- disabled: !overflowing,
2201
- onClick: handleClickRight,
2202
- children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ChevronRight, {})
2203
- }
2204
- )
2185
+ icon: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ChevronRight, {}),
2186
+ component: "span",
2187
+ size: "small",
2188
+ disabled: !overflowing,
2189
+ onClick: handleClickRight,
2190
+ tooltip: intlConfig.formatMessage({
2191
+ id: "c4r.widgets.chartLegend.next"
2192
+ })
2205
2193
  }
2206
2194
  )
2207
2195
  ] })
@@ -1,13 +1,13 @@
1
1
  import { jsxs, Fragment, jsx } from "react/jsx-runtime";
2
2
  import React, { useMemo, useState, useEffect, useCallback, useRef, forwardRef, createContext, useContext, useLayoutEffect, createRef } from "react";
3
- import { useTheme, styled, Box, Skeleton, Grid, Link, darken, Button, Divider, TextField, InputAdornment, Checkbox, Tooltip, IconButton, debounce, Slider, TableCell, Table, TableHead, TableRow, TableBody, TableContainer, TableSortLabel, TablePagination, Menu, MenuItem, SvgIcon, lighten, Typography as Typography$1, ClickAwayListener, ToggleButton, capitalize, ListItem, Chip, List, Paper, Popover, Select, ListItemText, Collapse, Drawer, Icon, LinearProgress } from "@mui/material";
3
+ import { useTheme, styled, Box, Skeleton, Grid, Link, darken, Button, Divider, TextField, InputAdornment, Checkbox, Tooltip, debounce, Slider, TableCell, Table, TableHead, TableRow, TableBody, TableContainer, TableSortLabel, TablePagination, IconButton as IconButton$1, Menu, MenuItem, SvgIcon, lighten, Typography as Typography$1, ClickAwayListener, ToggleButton, capitalize, ListItem, Chip, List, Paper, Popover, Select, ListItemText, Collapse, Drawer, Icon, LinearProgress } from "@mui/material";
4
4
  import { useIntl } from "react-intl";
5
5
  import { d as getDefaultExportFromCjs, u as useImperativeIntl, T as Typography, S as SPACING, B as BREAKPOINTS, a as TablePaginationActions, b as ICON_SIZE_MEDIUM } from "../TablePaginationActions-KpTvhN4Y.js";
6
6
  import _ReactEcharts from "echarts-for-react";
7
7
  import { FixedSizeList } from "react-window";
8
8
  import { S as Search, a as SwatchSquare } from "../SwatchSquare-DhaaXt53.js";
9
9
  import { ChevronLeft, ChevronRight, KeyboardArrowDown, ErrorOutline, Cancel, VisibilityOutlined, VisibilityOffOutlined, ExpandLess, ExpandMore, Close, LayersOutlined, MoreVert } from "@mui/icons-material";
10
- import { A as Alert } from "../Alert-D8jI1sG4.js";
10
+ import { I as IconButton, A as Alert } from "../Alert-CywtIMOj.js";
11
11
  import { a as getColorByCategory, c as commonPalette, b as getPalette } from "../paletteUtils-BHqJlHm9.js";
12
12
  function detectTouchscreen() {
13
13
  let result = false;
@@ -899,9 +899,6 @@ function CategoryWidgetUI({
899
899
  setTempBlockedCategories(categories);
900
900
  }
901
901
  };
902
- const handleSearchFocus = (event) => {
903
- event.currentTarget.scrollIntoView();
904
- };
905
902
  const handleSearchChange = (event) => {
906
903
  setSearchValue(event.currentTarget.value);
907
904
  };
@@ -1224,7 +1221,6 @@ function CategoryWidgetUI({
1224
1221
  id: "c4r.widgets.category.search"
1225
1222
  }),
1226
1223
  onChange: handleSearchChange,
1227
- onFocus: handleSearchFocus,
1228
1224
  InputProps: {
1229
1225
  startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(Search, {}) })
1230
1226
  },
@@ -2169,37 +2165,29 @@ function ChartLegend({
2169
2165
  (overflowing || offset > 0) && /* @__PURE__ */ jsxs(ShowMoreButtons, { ref: showMoreButtonsRef, children: [
2170
2166
  /* @__PURE__ */ jsx(OverflowVeil, {}),
2171
2167
  /* @__PURE__ */ jsx(
2172
- Tooltip,
2168
+ IconButton,
2173
2169
  {
2174
- title: intlConfig.formatMessage({
2175
- id: "c4r.widgets.chartLegend.next"
2176
- }),
2177
- children: /* @__PURE__ */ jsx(
2178
- IconButton,
2179
- {
2180
- size: "small",
2181
- disabled: offset === 0,
2182
- onClick: handleClickLeft,
2183
- children: /* @__PURE__ */ jsx(ChevronLeft, {})
2184
- }
2185
- )
2170
+ icon: /* @__PURE__ */ jsx(ChevronLeft, {}),
2171
+ component: "span",
2172
+ size: "small",
2173
+ disabled: offset === 0,
2174
+ onClick: handleClickLeft,
2175
+ tooltip: intlConfig.formatMessage({
2176
+ id: "c4r.widgets.chartLegend.prev"
2177
+ })
2186
2178
  }
2187
2179
  ),
2188
2180
  /* @__PURE__ */ jsx(
2189
- Tooltip,
2181
+ IconButton,
2190
2182
  {
2191
- title: intlConfig.formatMessage({
2192
- id: "c4r.widgets.chartLegend.prev"
2193
- }),
2194
- children: /* @__PURE__ */ jsx(
2195
- IconButton,
2196
- {
2197
- size: "small",
2198
- disabled: !overflowing,
2199
- onClick: handleClickRight,
2200
- children: /* @__PURE__ */ jsx(ChevronRight, {})
2201
- }
2202
- )
2183
+ icon: /* @__PURE__ */ jsx(ChevronRight, {}),
2184
+ component: "span",
2185
+ size: "small",
2186
+ disabled: !overflowing,
2187
+ onClick: handleClickRight,
2188
+ tooltip: intlConfig.formatMessage({
2189
+ id: "c4r.widgets.chartLegend.next"
2190
+ })
2203
2191
  }
2204
2192
  )
2205
2193
  ] })
@@ -4229,7 +4217,7 @@ function TimeSeriesControls({
4229
4217
  };
4230
4218
  return /* @__PURE__ */ jsxs(Fragment, { children: [
4231
4219
  /* @__PURE__ */ jsx(
4232
- IconButton,
4220
+ IconButton$1,
4233
4221
  {
4234
4222
  size: "small",
4235
4223
  color: "default",
@@ -4263,7 +4251,7 @@ function TimeSeriesControls({
4263
4251
  }
4264
4252
  ),
4265
4253
  /* @__PURE__ */ jsx(Box, { mt: 2, children: /* @__PURE__ */ jsx(
4266
- IconButton,
4254
+ IconButton$1,
4267
4255
  {
4268
4256
  size: "small",
4269
4257
  color: "primary",
@@ -4274,7 +4262,7 @@ function TimeSeriesControls({
4274
4262
  }
4275
4263
  ) }),
4276
4264
  /* @__PURE__ */ jsx(Box, { mt: 0.75, children: /* @__PURE__ */ jsx(
4277
- IconButton,
4265
+ IconButton$1,
4278
4266
  {
4279
4267
  "data-testid": "play-pause",
4280
4268
  size: "small",
@@ -5730,7 +5718,7 @@ function FeatureSelectionUIToggleButton({
5730
5718
  }
5731
5719
  ) });
5732
5720
  }
5733
- const ArrowButton = styled(IconButton, {
5721
+ const ArrowButton = styled(IconButton$1, {
5734
5722
  shouldForwardProp: (prop) => prop !== "isOpen"
5735
5723
  })(({ isOpen, theme }) => ({
5736
5724
  color: theme.palette.text.secondary,
@@ -6161,7 +6149,7 @@ function LegendOpacityControl({
6161
6149
  {
6162
6150
  title: intlConfig.formatMessage({ id: "c4r.widgets.legend.opacity" }),
6163
6151
  children: /* @__PURE__ */ jsx(
6164
- IconButton,
6152
+ IconButton$1,
6165
6153
  {
6166
6154
  size: "small",
6167
6155
  color: open ? "primary" : "default",
@@ -6742,7 +6730,7 @@ function LegendLayer({
6742
6730
  return /* @__PURE__ */ jsxs(LegendLayerWrapper, { "data-testid": "legend-layer", "aria-label": title, children: [
6743
6731
  /* @__PURE__ */ jsxs(LegendItemHeader, { ref: menuAnchorRef, children: [
6744
6732
  collapsible && /* @__PURE__ */ jsx(
6745
- IconButton,
6733
+ IconButton$1,
6746
6734
  {
6747
6735
  size: "small",
6748
6736
  "aria-label": intlConfig.formatMessage({
@@ -6798,7 +6786,7 @@ function LegendLayer({
6798
6786
  id: visible ? "c4r.widgets.legend.hideLayer" : "c4r.widgets.legend.showLayer"
6799
6787
  }),
6800
6788
  children: /* @__PURE__ */ jsx(
6801
- IconButton,
6789
+ IconButton$1,
6802
6790
  {
6803
6791
  size: "small",
6804
6792
  onClick: () => onChangeVisibility({
@@ -6888,7 +6876,7 @@ function LegendWidgetUI({
6888
6876
  Tooltip,
6889
6877
  {
6890
6878
  title: intlConfig.formatMessage({ id: "c4r.widgets.legend.close" }),
6891
- children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => onChangeCollapsed(true), children: /* @__PURE__ */ jsx(Close, {}) })
6879
+ children: /* @__PURE__ */ jsx(IconButton$1, { size: "small", onClick: () => onChangeCollapsed(true), children: /* @__PURE__ */ jsx(Close, {}) })
6892
6880
  }
6893
6881
  )
6894
6882
  ] });
@@ -6896,7 +6884,7 @@ function LegendWidgetUI({
6896
6884
  Tooltip,
6897
6885
  {
6898
6886
  title: intlConfig.formatMessage({ id: "c4r.widgets.legend.open" }),
6899
- children: /* @__PURE__ */ jsx(IconButton, { "aria-label": title, onClick: () => onChangeCollapsed(false), children: /* @__PURE__ */ jsx(LayersOutlined, {}) })
6887
+ children: /* @__PURE__ */ jsx(IconButton$1, { "aria-label": title, onClick: () => onChangeCollapsed(false), children: /* @__PURE__ */ jsx(LayersOutlined, {}) })
6900
6888
  }
6901
6889
  );
6902
6890
  return /* @__PURE__ */ jsx(LegendRoot, { sx, elevation: 3, collapsed: collapsed || !!isMobile, children: isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -7051,7 +7039,7 @@ const HeaderItems = styled(Grid)(({ theme }) => ({
7051
7039
  marginRight: theme.spacing(-0.5),
7052
7040
  marginLeft: theme.spacing(1)
7053
7041
  }));
7054
- const IconActionButton = styled(IconButton)(({ theme }) => ({
7042
+ const IconActionButton = styled(IconButton$1)(({ theme }) => ({
7055
7043
  color: theme.palette.text.secondary
7056
7044
  }));
7057
7045
  const PaperMenu = styled(Menu)(({ theme }) => ({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@carto/meridian-ds",
3
- "version": "1.4.5",
3
+ "version": "1.4.6",
4
4
  "description": "CARTO Meridian Design System",
5
5
  "type": "module",
6
6
  "scripts": {