@widergy/energy-ui 3.166.1 → 3.167.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 +18 -2
- package/dist/components/UTDatePicker/assets/calendar.svg +3 -13
- package/dist/components/UTDatePicker/versions/V0/assets/calendar.svg +3 -13
- package/dist/components/UTDatePicker/versions/V0/index.js +3 -10
- package/dist/components/UTDatePicker/versions/V1/index.js +2 -1
- package/dist/components/UTDotMenu/README.md +1 -0
- package/dist/components/UTDotMenu/index.js +3 -0
- package/dist/components/UTDotMenu/stories/UTDotMenu.stories.js +27 -1
- package/dist/esm/components/UTDatePicker/assets/calendar.svg +3 -13
- package/dist/esm/components/UTDatePicker/versions/V0/assets/calendar.svg +3 -13
- package/dist/esm/components/UTDatePicker/versions/V0/index.js +3 -10
- package/dist/esm/components/UTDatePicker/versions/V1/index.js +2 -1
- package/dist/esm/components/UTDotMenu/README.md +1 -0
- package/dist/esm/components/UTDotMenu/index.js +4 -1
- package/dist/esm/components/UTDotMenu/stories/UTDotMenu.stories.js +26 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,25 @@
|
|
|
1
|
-
## [3.
|
|
1
|
+
## [3.167.1](https://github.com/widergy/energy-ui/compare/v3.167.0...v3.167.1) (2026-06-18)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Bug Fixes
|
|
5
5
|
|
|
6
|
-
*
|
|
6
|
+
* multiple fixes ([#822](https://github.com/widergy/energy-ui/issues/822)) ([c6ce17d](https://github.com/widergy/energy-ui/commit/c6ce17d96fc15531bbde7a390960bcf22e709da4))
|
|
7
|
+
|
|
8
|
+
# [3.167.0](https://github.com/widergy/energy-ui/compare/v3.166.1...v3.167.0) (2026-06-17)
|
|
9
|
+
|
|
10
|
+
### Novedades y Mejoras
|
|
11
|
+
|
|
12
|
+
* El menú de opciones ahora puede mostrarse deshabilitado cuando la acción no está disponible para el usuario. [#819](https://github.com/widergy/Energy-UI/pull/819) [AXCH-1778](https://widergy.atlassian.net/browse/AXCH-1778)
|
|
13
|
+
|
|
14
|
+
### Correcciones
|
|
15
|
+
|
|
16
|
+
* Mejoras internas de la plataforma. [`da99fe2`](https://github.com/widergy/Energy-UI/commit/da99fe2)
|
|
17
|
+
|
|
18
|
+
## [3.166.1](https://github.com/widergy/energy-ui/compare/v3.166.0...v3.166.1) (2026-06-16)
|
|
19
|
+
|
|
20
|
+
### Correcciones
|
|
21
|
+
|
|
22
|
+
* Se corrigió un problema que causaba que ciertos íconos de estado se mostraran sin tamaño visible en versiones anteriores del navegador Chromium. [#817](https://github.com/widergy/Energy-UI/pull/817) [CX-2433](https://widergy.atlassian.net/browse/CX-2433)
|
|
7
23
|
|
|
8
24
|
# [3.166.0](https://github.com/widergy/energy-ui/compare/v3.165.1...v3.166.0) (2026-06-12)
|
|
9
25
|
|
|
@@ -1,14 +1,4 @@
|
|
|
1
1
|
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
-
<svg width="
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
</defs>
|
|
6
|
-
<g id="Final" stroke="none" stroke-width="1" fill="current" fill-rule="evenodd">
|
|
7
|
-
<g id="Group" transform="translate(-3.000000, -2.000000)">
|
|
8
|
-
<mask id="mask-2" fill="white">
|
|
9
|
-
<use xlink:href="#calendario"></use>
|
|
10
|
-
</mask>
|
|
11
|
-
<use id="🎨-Icon-Сolor" fill="current" fill-rule="nonzero" xlink:href="#calendario"></use>
|
|
12
|
-
</g>
|
|
13
|
-
</g>
|
|
14
|
-
</svg>
|
|
2
|
+
<svg width="18" height="20" viewBox="0 0 18 20" xmlns="http://www.w3.org/2000/svg">
|
|
3
|
+
<path fill-rule="nonzero" transform="translate(-3 -2)" d="M8,15 C8.55,15 9,15.45 9,16 C9,16.55 8.55,17 8,17 C7.45,17 7,16.55 7,16 C7,15.45 7.45,15 8,15 Z M16,15 C16.55,15 17,15.45 17,16 C17,16.55 16.55,17 16,17 L16,17 L12,17 C11.45,17 11,16.55 11,16 C11,15.45 11.45,15 12,15 L12,15 Z M18,20 L6,20 C5.449,20 5,19.551 5,19 L5,13 L19,13 L19,19 C19,19.551 18.551,20 18,20 M6,6 L7,6 L7,7 C7,7.55 7.45,8 8,8 C8.55,8 9,7.55 9,7 L9,6 L15,6 L15,7 C15,7.55 15.45,8 16,8 C16.55,8 17,7.55 17,7 L17,6 L18,6 C18.551,6 19,6.449 19,7 L19,11 L5,11 L5,7 C5,6.449 5.449,6 6,6 M18,4 L17,4 L17,3 C17,2.45 16.55,2 16,2 C15.45,2 15,2.45 15,3 L15,4 L9,4 L9,3 C9,2.45 8.55,2 8,2 C7.45,2 7,2.45 7,3 L7,4 L6,4 C4.346,4 3,5.346 3,7 L3,19 C3,20.654 4.346,22 6,22 L18,22 C19.654,22 21,20.654 21,19 L21,7 C21,5.346 19.654,4 18,4"/>
|
|
4
|
+
</svg>
|
|
@@ -1,14 +1,4 @@
|
|
|
1
1
|
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
-
<svg width="
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
</defs>
|
|
6
|
-
<g id="Final" stroke="none" stroke-width="1" fill="current" fill-rule="evenodd">
|
|
7
|
-
<g id="Group" transform="translate(-3.000000, -2.000000)">
|
|
8
|
-
<mask id="mask-2" fill="white">
|
|
9
|
-
<use xlink:href="#calendario"></use>
|
|
10
|
-
</mask>
|
|
11
|
-
<use id="🎨-Icon-Сolor" fill="current" fill-rule="nonzero" xlink:href="#calendario"></use>
|
|
12
|
-
</g>
|
|
13
|
-
</g>
|
|
14
|
-
</svg>
|
|
2
|
+
<svg width="18" height="20" viewBox="0 0 18 20" xmlns="http://www.w3.org/2000/svg">
|
|
3
|
+
<path fill-rule="nonzero" transform="translate(-3 -2)" d="M8,15 C8.55,15 9,15.45 9,16 C9,16.55 8.55,17 8,17 C7.45,17 7,16.55 7,16 C7,15.45 7.45,15 8,15 Z M16,15 C16.55,15 17,15.45 17,16 C17,16.55 16.55,17 16,17 L16,17 L12,17 C11.45,17 11,16.55 11,16 C11,15.45 11.45,15 12,15 L12,15 Z M18,20 L6,20 C5.449,20 5,19.551 5,19 L5,13 L19,13 L19,19 C19,19.551 18.551,20 18,20 M6,6 L7,6 L7,7 C7,7.55 7.45,8 8,8 C8.55,8 9,7.55 9,7 L9,6 L15,6 L15,7 C15,7.55 15.45,8 16,8 C16.55,8 17,7.55 17,7 L17,6 L18,6 C18.551,6 19,6.449 19,7 L19,11 L5,11 L5,7 C5,6.449 5.449,6 6,6 M18,4 L17,4 L17,3 C17,2.45 16.55,2 16,2 C15.45,2 15,2.45 15,3 L15,4 L9,4 L9,3 C9,2.45 8.55,2 8,2 C7.45,2 7,2.45 7,3 L7,4 L6,4 C4.346,4 3,5.346 3,7 L3,19 C3,20.654 4.346,22 6,22 L18,22 C19.654,22 21,20.654 21,19 L21,7 C21,5.346 19.654,4 18,4"/>
|
|
4
|
+
</svg>
|
|
@@ -34,22 +34,15 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
|
|
|
34
34
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
35
35
|
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
36
36
|
var CalendarIcon = function CalendarIcon(props) {
|
|
37
|
-
return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("
|
|
38
|
-
d: "
|
|
39
|
-
id: "a"
|
|
40
|
-
})), /*#__PURE__*/_react.default.createElement("use", {
|
|
41
|
-
fillRule: "nonzero",
|
|
42
|
-
xlinkHref: "#a",
|
|
43
|
-
transform: "translate(-3 -2)",
|
|
44
|
-
fill: "current"
|
|
37
|
+
return /*#__PURE__*/_react.default.createElement("svg", props, /*#__PURE__*/_react.default.createElement("path", {
|
|
38
|
+
d: "M5 13c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1Zm8 0c.55 0 1 .45 1 1s-.45 1-1 1H9c-.55 0-1-.45-1-1s.45-1 1-1Zm2 5H3c-.551 0-1-.449-1-1v-6h14v6c0 .551-.449 1-1 1M3 4h1v1c0 .55.45 1 1 1s1-.45 1-1V4h6v1c0 .55.45 1 1 1s1-.45 1-1V4h1c.551 0 1 .449 1 1v4H2V5c0-.551.449-1 1-1m12-2h-1V1c0-.55-.45-1-1-1s-1 .45-1 1v1H6V1c0-.55-.45-1-1-1S4 .45 4 1v1H3C1.346 2 0 3.346 0 5v12c0 1.654 1.346 3 3 3h12c1.654 0 3-1.346 3-3V5c0-1.654-1.346-3-3-3"
|
|
45
39
|
}));
|
|
46
40
|
};
|
|
47
41
|
CalendarIcon.defaultProps = {
|
|
48
42
|
width: "18",
|
|
49
43
|
height: "20",
|
|
50
44
|
viewBox: "0 0 18 20",
|
|
51
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
52
|
-
xmlnsXlink: "http://www.w3.org/1999/xlink"
|
|
45
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
53
46
|
};
|
|
54
47
|
_dayjs2.default.extend(_customParseFormat.default);
|
|
55
48
|
_dayjs2.default.extend(_isBetween.default);
|
|
@@ -8,6 +8,7 @@ Botón de tres puntos verticales que despliega un menú de opciones. Soporta íc
|
|
|
8
8
|
|------|------|---------|-------------|
|
|
9
9
|
| `className` | `string` | `undefined` | Clase CSS aplicada al contenedor raíz. |
|
|
10
10
|
| `classNames` | `shape({ button, icon })` | `{}` | Clases personalizadas para el botón trigger. |
|
|
11
|
+
| `disabled` | `bool` | `undefined` | Deshabilita el botón trigger. Cuando es `true`, el menú no puede abrirse. |
|
|
11
12
|
| `Icon` | `elementType \| string` | `MoreVertIcon` | Ícono del botón trigger. Acepta un componente React o un nombre de ícono de Tabler (ej: `'IconDotsVertical'`). |
|
|
12
13
|
| `menuItemProps` | `object` | `undefined` | Props pasadas a cada `MenuItem` de MUI. Útil para sobreescribir estilos (ej: `{ style: { minHeight: 'auto' } }`). |
|
|
13
14
|
| `menuProps` | `object` | `undefined` | Props pasadas al componente `Menu` de MUI. El `borderRadius` del Paper es `8px` por defecto y se puede sobreescribir vía `menuProps.PaperProps`. |
|
|
@@ -20,6 +20,7 @@ const UTDotMenu = _ref => {
|
|
|
20
20
|
let {
|
|
21
21
|
className,
|
|
22
22
|
classNames = _constants.DEFAULT_PROPS.classNames,
|
|
23
|
+
disabled,
|
|
23
24
|
Icon = _constants.DEFAULT_PROPS.Icon,
|
|
24
25
|
menuItemProps,
|
|
25
26
|
menuProps,
|
|
@@ -34,6 +35,7 @@ const UTDotMenu = _ref => {
|
|
|
34
35
|
icon: classNames.icon,
|
|
35
36
|
root: classNames.button
|
|
36
37
|
},
|
|
38
|
+
disabled: disabled,
|
|
37
39
|
Icon: Icon,
|
|
38
40
|
onClick: event => setAnchorEl(event.currentTarget),
|
|
39
41
|
size: size,
|
|
@@ -76,6 +78,7 @@ UTDotMenu.propTypes = {
|
|
|
76
78
|
button: _propTypes.string,
|
|
77
79
|
icon: _propTypes.string
|
|
78
80
|
}),
|
|
81
|
+
disabled: _propTypes.bool,
|
|
79
82
|
Icon: (0, _propTypes.oneOfType)([_propTypes.elementType, _propTypes.string]),
|
|
80
83
|
menuItemProps: _propTypes.object,
|
|
81
84
|
menuProps: _propTypes.object,
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.Small = exports.Playground = exports.IconoPersonalizado = exports.Default = exports.ConIconos = exports.ConIconProps = exports.AccionDestructiva = void 0;
|
|
6
|
+
exports.default = exports.Small = exports.Playground = exports.IconoPersonalizado = exports.Default = exports.ConIconos = exports.ConIconProps = exports.BotonDeshabilitado = exports.AccionDestructiva = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _ = _interopRequireDefault(require(".."));
|
|
9
9
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -62,6 +62,18 @@ var _default = exports.default = {
|
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
64
|
},
|
|
65
|
+
disabled: {
|
|
66
|
+
control: 'boolean',
|
|
67
|
+
description: 'Deshabilita el botón trigger. Cuando es `true`, el menú no puede abrirse.',
|
|
68
|
+
table: {
|
|
69
|
+
defaultValue: {
|
|
70
|
+
summary: 'undefined'
|
|
71
|
+
},
|
|
72
|
+
type: {
|
|
73
|
+
summary: 'bool'
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
},
|
|
65
77
|
Icon: {
|
|
66
78
|
control: 'text',
|
|
67
79
|
description: 'Ícono del botón trigger. Acepta un nombre de ícono de Tabler (string) o un componente React. Por defecto muestra el ícono de tres puntos verticales (MoreVertIcon).',
|
|
@@ -250,6 +262,20 @@ const ConIconProps = exports.ConIconProps = {
|
|
|
250
262
|
}
|
|
251
263
|
}
|
|
252
264
|
};
|
|
265
|
+
const BotonDeshabilitado = exports.BotonDeshabilitado = {
|
|
266
|
+
args: {
|
|
267
|
+
disabled: true,
|
|
268
|
+
options: BASIC_OPTIONS
|
|
269
|
+
},
|
|
270
|
+
name: 'Botón deshabilitado',
|
|
271
|
+
parameters: {
|
|
272
|
+
docs: {
|
|
273
|
+
description: {
|
|
274
|
+
story: '`disabled={true}` deshabilita el botón trigger. El menú no puede abrirse.'
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
};
|
|
253
279
|
const IconoPersonalizado = exports.IconoPersonalizado = {
|
|
254
280
|
args: {
|
|
255
281
|
Icon: () => /*#__PURE__*/_react.default.createElement("span", {
|
|
@@ -1,14 +1,4 @@
|
|
|
1
1
|
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
-
<svg width="
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
</defs>
|
|
6
|
-
<g id="Final" stroke="none" stroke-width="1" fill="current" fill-rule="evenodd">
|
|
7
|
-
<g id="Group" transform="translate(-3.000000, -2.000000)">
|
|
8
|
-
<mask id="mask-2" fill="white">
|
|
9
|
-
<use xlink:href="#calendario"></use>
|
|
10
|
-
</mask>
|
|
11
|
-
<use id="🎨-Icon-Сolor" fill="current" fill-rule="nonzero" xlink:href="#calendario"></use>
|
|
12
|
-
</g>
|
|
13
|
-
</g>
|
|
14
|
-
</svg>
|
|
2
|
+
<svg width="18" height="20" viewBox="0 0 18 20" xmlns="http://www.w3.org/2000/svg">
|
|
3
|
+
<path fill-rule="nonzero" transform="translate(-3 -2)" d="M8,15 C8.55,15 9,15.45 9,16 C9,16.55 8.55,17 8,17 C7.45,17 7,16.55 7,16 C7,15.45 7.45,15 8,15 Z M16,15 C16.55,15 17,15.45 17,16 C17,16.55 16.55,17 16,17 L16,17 L12,17 C11.45,17 11,16.55 11,16 C11,15.45 11.45,15 12,15 L12,15 Z M18,20 L6,20 C5.449,20 5,19.551 5,19 L5,13 L19,13 L19,19 C19,19.551 18.551,20 18,20 M6,6 L7,6 L7,7 C7,7.55 7.45,8 8,8 C8.55,8 9,7.55 9,7 L9,6 L15,6 L15,7 C15,7.55 15.45,8 16,8 C16.55,8 17,7.55 17,7 L17,6 L18,6 C18.551,6 19,6.449 19,7 L19,11 L5,11 L5,7 C5,6.449 5.449,6 6,6 M18,4 L17,4 L17,3 C17,2.45 16.55,2 16,2 C15.45,2 15,2.45 15,3 L15,4 L9,4 L9,3 C9,2.45 8.55,2 8,2 C7.45,2 7,2.45 7,3 L7,4 L6,4 C4.346,4 3,5.346 3,7 L3,19 C3,20.654 4.346,22 6,22 L18,22 C19.654,22 21,20.654 21,19 L21,7 C21,5.346 19.654,4 18,4"/>
|
|
4
|
+
</svg>
|
|
@@ -1,14 +1,4 @@
|
|
|
1
1
|
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
-
<svg width="
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
</defs>
|
|
6
|
-
<g id="Final" stroke="none" stroke-width="1" fill="current" fill-rule="evenodd">
|
|
7
|
-
<g id="Group" transform="translate(-3.000000, -2.000000)">
|
|
8
|
-
<mask id="mask-2" fill="white">
|
|
9
|
-
<use xlink:href="#calendario"></use>
|
|
10
|
-
</mask>
|
|
11
|
-
<use id="🎨-Icon-Сolor" fill="current" fill-rule="nonzero" xlink:href="#calendario"></use>
|
|
12
|
-
</g>
|
|
13
|
-
</g>
|
|
14
|
-
</svg>
|
|
2
|
+
<svg width="18" height="20" viewBox="0 0 18 20" xmlns="http://www.w3.org/2000/svg">
|
|
3
|
+
<path fill-rule="nonzero" transform="translate(-3 -2)" d="M8,15 C8.55,15 9,15.45 9,16 C9,16.55 8.55,17 8,17 C7.45,17 7,16.55 7,16 C7,15.45 7.45,15 8,15 Z M16,15 C16.55,15 17,15.45 17,16 C17,16.55 16.55,17 16,17 L16,17 L12,17 C11.45,17 11,16.55 11,16 C11,15.45 11.45,15 12,15 L12,15 Z M18,20 L6,20 C5.449,20 5,19.551 5,19 L5,13 L19,13 L19,19 C19,19.551 18.551,20 18,20 M6,6 L7,6 L7,7 C7,7.55 7.45,8 8,8 C8.55,8 9,7.55 9,7 L9,6 L15,6 L15,7 C15,7.55 15.45,8 16,8 C16.55,8 17,7.55 17,7 L17,6 L18,6 C18.551,6 19,6.449 19,7 L19,11 L5,11 L5,7 C5,6.449 5.449,6 6,6 M18,4 L17,4 L17,3 C17,2.45 16.55,2 16,2 C15.45,2 15,2.45 15,3 L15,4 L9,4 L9,3 C9,2.45 8.55,2 8,2 C7.45,2 7,2.45 7,3 L7,4 L6,4 C4.346,4 3,5.346 3,7 L3,19 C3,20.654 4.346,22 6,22 L18,22 C19.654,22 21,20.654 21,19 L21,7 C21,5.346 19.654,4 18,4"/>
|
|
4
|
+
</svg>
|
|
@@ -21,22 +21,15 @@ import { mergeClasses } from '../../../../utils/classesUtils';
|
|
|
21
21
|
import UTValidation from '../../../UTValidation';
|
|
22
22
|
import { formatErrorToValidation } from '../../../UTValidation/utils';
|
|
23
23
|
var CalendarIcon = function CalendarIcon(props) {
|
|
24
|
-
return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("
|
|
25
|
-
d: "
|
|
26
|
-
id: "a"
|
|
27
|
-
})), /*#__PURE__*/React.createElement("use", {
|
|
28
|
-
fillRule: "nonzero",
|
|
29
|
-
xlinkHref: "#a",
|
|
30
|
-
transform: "translate(-3 -2)",
|
|
31
|
-
fill: "current"
|
|
24
|
+
return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
|
|
25
|
+
d: "M5 13c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1Zm8 0c.55 0 1 .45 1 1s-.45 1-1 1H9c-.55 0-1-.45-1-1s.45-1 1-1Zm2 5H3c-.551 0-1-.449-1-1v-6h14v6c0 .551-.449 1-1 1M3 4h1v1c0 .55.45 1 1 1s1-.45 1-1V4h6v1c0 .55.45 1 1 1s1-.45 1-1V4h1c.551 0 1 .449 1 1v4H2V5c0-.551.449-1 1-1m12-2h-1V1c0-.55-.45-1-1-1s-1 .45-1 1v1H6V1c0-.55-.45-1-1-1S4 .45 4 1v1H3C1.346 2 0 3.346 0 5v12c0 1.654 1.346 3 3 3h12c1.654 0 3-1.346 3-3V5c0-1.654-1.346-3-3-3"
|
|
32
26
|
}));
|
|
33
27
|
};
|
|
34
28
|
CalendarIcon.defaultProps = {
|
|
35
29
|
width: "18",
|
|
36
30
|
height: "20",
|
|
37
31
|
viewBox: "0 0 18 20",
|
|
38
|
-
xmlns: "http://www.w3.org/2000/svg"
|
|
39
|
-
xmlnsXlink: "http://www.w3.org/1999/xlink"
|
|
32
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
40
33
|
};
|
|
41
34
|
import Day from './components/Day';
|
|
42
35
|
import { retrieveStyle, materialTheme } from './theme';
|
|
@@ -8,6 +8,7 @@ Botón de tres puntos verticales que despliega un menú de opciones. Soporta íc
|
|
|
8
8
|
|------|------|---------|-------------|
|
|
9
9
|
| `className` | `string` | `undefined` | Clase CSS aplicada al contenedor raíz. |
|
|
10
10
|
| `classNames` | `shape({ button, icon })` | `{}` | Clases personalizadas para el botón trigger. |
|
|
11
|
+
| `disabled` | `bool` | `undefined` | Deshabilita el botón trigger. Cuando es `true`, el menú no puede abrirse. |
|
|
11
12
|
| `Icon` | `elementType \| string` | `MoreVertIcon` | Ícono del botón trigger. Acepta un componente React o un nombre de ícono de Tabler (ej: `'IconDotsVertical'`). |
|
|
12
13
|
| `menuItemProps` | `object` | `undefined` | Props pasadas a cada `MenuItem` de MUI. Útil para sobreescribir estilos (ej: `{ style: { minHeight: 'auto' } }`). |
|
|
13
14
|
| `menuProps` | `object` | `undefined` | Props pasadas al componente `Menu` de MUI. El `borderRadius` del Paper es `8px` por defecto y se puede sobreescribir vía `menuProps.PaperProps`. |
|
|
@@ -2,7 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
|
|
|
2
2
|
import React, { useState } from 'react';
|
|
3
3
|
import Menu from '@material-ui/core/Menu';
|
|
4
4
|
import MenuItem from '@material-ui/core/MenuItem';
|
|
5
|
-
import { arrayOf, elementType, func, object, oneOfType, shape, string } from 'prop-types';
|
|
5
|
+
import { arrayOf, bool, elementType, func, object, oneOfType, shape, string } from 'prop-types';
|
|
6
6
|
import UTButton from '../UTButton';
|
|
7
7
|
import UTIcon from '../UTIcon';
|
|
8
8
|
import UTLabel from '../UTLabel';
|
|
@@ -12,6 +12,7 @@ const UTDotMenu = _ref => {
|
|
|
12
12
|
let {
|
|
13
13
|
className,
|
|
14
14
|
classNames = DEFAULT_PROPS.classNames,
|
|
15
|
+
disabled,
|
|
15
16
|
Icon = DEFAULT_PROPS.Icon,
|
|
16
17
|
menuItemProps,
|
|
17
18
|
menuProps,
|
|
@@ -26,6 +27,7 @@ const UTDotMenu = _ref => {
|
|
|
26
27
|
icon: classNames.icon,
|
|
27
28
|
root: classNames.button
|
|
28
29
|
},
|
|
30
|
+
disabled: disabled,
|
|
29
31
|
Icon: Icon,
|
|
30
32
|
onClick: event => setAnchorEl(event.currentTarget),
|
|
31
33
|
size: size,
|
|
@@ -68,6 +70,7 @@ UTDotMenu.propTypes = {
|
|
|
68
70
|
button: string,
|
|
69
71
|
icon: string
|
|
70
72
|
}),
|
|
73
|
+
disabled: bool,
|
|
71
74
|
Icon: oneOfType([elementType, string]),
|
|
72
75
|
menuItemProps: object,
|
|
73
76
|
menuProps: object,
|
|
@@ -54,6 +54,18 @@ export default {
|
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
|
+
disabled: {
|
|
58
|
+
control: 'boolean',
|
|
59
|
+
description: 'Deshabilita el botón trigger. Cuando es `true`, el menú no puede abrirse.',
|
|
60
|
+
table: {
|
|
61
|
+
defaultValue: {
|
|
62
|
+
summary: 'undefined'
|
|
63
|
+
},
|
|
64
|
+
type: {
|
|
65
|
+
summary: 'bool'
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
},
|
|
57
69
|
Icon: {
|
|
58
70
|
control: 'text',
|
|
59
71
|
description: 'Ícono del botón trigger. Acepta un nombre de ícono de Tabler (string) o un componente React. Por defecto muestra el ícono de tres puntos verticales (MoreVertIcon).',
|
|
@@ -242,6 +254,20 @@ export const ConIconProps = {
|
|
|
242
254
|
}
|
|
243
255
|
}
|
|
244
256
|
};
|
|
257
|
+
export const BotonDeshabilitado = {
|
|
258
|
+
args: {
|
|
259
|
+
disabled: true,
|
|
260
|
+
options: BASIC_OPTIONS
|
|
261
|
+
},
|
|
262
|
+
name: 'Botón deshabilitado',
|
|
263
|
+
parameters: {
|
|
264
|
+
docs: {
|
|
265
|
+
description: {
|
|
266
|
+
story: '`disabled={true}` deshabilita el botón trigger. El menú no puede abrirse.'
|
|
267
|
+
}
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
};
|
|
245
271
|
export const IconoPersonalizado = {
|
|
246
272
|
args: {
|
|
247
273
|
Icon: () => /*#__PURE__*/React.createElement("span", {
|