gdx-ui 1.15.3 → 2.0.1

package/components/editable/Editable.js

@@ -7,117 +7,127 @@ Object.defineProperty(exports, "__esModule", {
 exports.Editable = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactFontawesome = require("@fortawesome/react-fontawesome");
-var _freeRegularSvgIcons = require("@fortawesome/free-regular-svg-icons");
+var _excluded = ["children", "placeholder", "onChange", "className", "maxLength", "maxLenght"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _extends() { return _extends = 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.apply(null, arguments); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var toText = function toText(value) {
+  return value == null ? '' : String(value);
+};
+var moveCaretToEnd = function moveCaretToEnd(el) {
+  var range = document.createRange();
+  var selection = window.getSelection();
+  range.selectNodeContents(el);
+  range.collapse(false);
+  selection.removeAllRanges();
+  selection.addRange(range);
+};
 var Editable = exports.Editable = function Editable(_ref) {
-  var text = _ref.text,
-    _ref$minHeight = _ref.minHeight,
-    minHeight = _ref$minHeight === void 0 ? 20 : _ref$minHeight,
-    _ref$hint = _ref.hint,
-    hint = _ref$hint === void 0 ? false : _ref$hint,
-    onEdit = _ref.onEdit,
-    className = _ref.className;
-  var _useState = (0, _react.useState)(text),
+  var children = _ref.children,
+    placeholder = _ref.placeholder,
+    onChange = _ref.onChange,
+    className = _ref.className,
+    maxLength = _ref.maxLength,
+    maxLenght = _ref.maxLenght,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var ref = (0, _react.useRef)(null);
+  var lastChildrenRef = (0, _react.useRef)(toText(children));
+  var startEditValueRef = (0, _react.useRef)(toText(children));
+  var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
-    currentText = _useState2[0],
-    setCurrentText = _useState2[1];
-  var _useState3 = (0, _react.useState)({
-      width: 100,
-      height: 100
-    }),
+    isFocused = _useState2[0],
+    setIsFocused = _useState2[1];
+  var _useState3 = (0, _react.useState)(toText(children)),
     _useState4 = _slicedToArray(_useState3, 2),
-    dimentions = _useState4[0],
-    setDimentions = _useState4[1];
-  var _useState5 = (0, _react.useState)(text),
-    _useState6 = _slicedToArray(_useState5, 2),
-    lastText = _useState6[0],
-    setLastText = _useState6[1];
-  var _useState7 = (0, _react.useState)(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    editable = _useState8[0],
-    setEditable = _useState8[1];
-  var newRef = (0, _react.useRef)(null);
-  var wrapperRef = (0, _react.useRef)(null);
-  var editContent = function editContent() {
-    setEditable(true);
-    var h = wrapperRef.current.offsetHeight;
-    setDimentions({
-      width: wrapperRef.current.offsetWidth,
-      height: 30 + (h < minHeight ? minHeight : h)
-    });
-    setLastText(currentText);
-  };
-  var onChangeText = function onChangeText(_ref2) {
-    var target = _ref2.target;
-    var value = target.value;
-    setCurrentText(value);
-  };
-  var onKeyDown = function onKeyDown(_ref3) {
-    var key = _ref3.key;
-    switch (key) {
-      case 'Enter':
-        setEditable(false);
-        setCurrentText(currentText);
-        onEdit && onEdit({
-          value: currentText
-        });
-        break;
-      case 'Escape':
-        setEditable(false);
-        setCurrentText(lastText);
-        onEdit && {
-          value: lastText
-        };
-        break;
+    value = _useState4[0],
+    setValue = _useState4[1];
+  var limit = Number.isFinite(maxLength) ? maxLength : maxLenght;
+  (0, _react.useEffect)(function () {
+    var next = toText(children);
+    var didChildrenChange = lastChildrenRef.current !== next;
+    lastChildrenRef.current = next;
+    if (!didChildrenChange) {
+      return;
     }
-  };
-  var handleOutsideClick = function handleOutsideClick(e) {
-    if (newRef.current && !newRef.current.contains(e.target)) {
-      setEditable(false);
-      onEdit && onEdit({
-        value: currentText
-      });
+    setValue(next);
+    if (ref.current && !isFocused && ref.current.textContent !== next) {
+      ref.current.textContent = next;
     }
-  };
+  }, [children, isFocused]);
   (0, _react.useEffect)(function () {
-    document.addEventListener('mousedown', handleOutsideClick);
-    return function () {
-      document.removeEventListener('mousedown', handleOutsideClick);
-    };
-  });
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    ref: wrapperRef
-  }, editable ? /*#__PURE__*/_react["default"].createElement("input", {
-    ref: newRef,
-    type: "text",
-    onChange: onChangeText,
-    onKeyDown: onKeyDown,
-    value: currentText,
-    style: {
-      width: dimentions.width
+    if (!ref.current) return;
+    ref.current.setAttribute('data-empty', value.length === 0 ? 'true' : 'false');
+  }, [value]);
+  var handleInput = function handleInput(e) {
+    var nextValue = e.currentTarget.textContent || '';
+    if (Number.isFinite(limit) && limit >= 0 && nextValue.length > limit) {
+      nextValue = nextValue.slice(0, limit);
+      e.currentTarget.textContent = nextValue;
+      moveCaretToEnd(e.currentTarget);
     }
-  }) : /*#__PURE__*/_react["default"].createElement("div", {
-    className: className,
-    onDoubleClick: editContent
-  }, hint && /*#__PURE__*/_react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
-    className: "gray",
-    style: {
-      marginRight: '5px'
+    setValue(nextValue);
+    onChange && onChange(nextValue);
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      var previous = startEditValueRef.current;
+      if (e.currentTarget.textContent !== previous) {
+        e.currentTarget.textContent = previous;
+      }
+      setValue(previous);
+      onChange && onChange(previous);
+      e.currentTarget.blur();
+      return;
+    }
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      e.currentTarget.blur();
+    }
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", _extends({
+    ref: ref,
+    contentEditable: true,
+    role: "textbox",
+    suppressContentEditableWarning: true,
+    "aria-placeholder": placeholder,
+    "data-placeholder": placeholder,
+    "data-empty": value.length === 0 ? 'true' : 'false',
+    className: "editable ".concat(className || '').trim(),
+    onInput: handleInput,
+    onKeyDown: handleKeyDown,
+    onFocus: function onFocus(e) {
+      startEditValueRef.current = e.currentTarget.textContent || '';
+      setIsFocused(true);
     },
-    icon: _freeRegularSvgIcons.faEdit
-  }), currentText));
+    onBlur: function onBlur(e) {
+      var normalized = e.currentTarget.textContent || '';
+      setValue(normalized);
+      setIsFocused(false);
+    }
+  }, props));
 };
 Editable.propTypes = {
-  text: _propTypes["default"].string.isRequired,
-  hint: _propTypes["default"].bool,
-  minHeight: _propTypes["default"].number,
-  onEdit: _propTypes["default"].func
+  children: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  placeholder: _propTypes["default"].string,
+  onChange: _propTypes["default"].func,
+  className: _propTypes["default"].string,
+  maxLength: _propTypes["default"].number,
+  maxLenght: _propTypes["default"].number
+};
+Editable.defaultProps = {
+  children: '',
+  placeholder: '',
+  onChange: null,
+  className: '',
+  maxLength: undefined,
+  maxLenght: undefined
 };

package/components/editable/EditableArea.js

@@ -16,6 +16,9 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+/**
+ * @deprecated Use `Editable` component instead, with `multiline` prop set to `true`
+ */
 var EditableArea = exports.EditableArea = function EditableArea(_ref) {
   var _ref$text = _ref.text,
     text = _ref$text === void 0 ? 'Edit here' : _ref$text,

package/components/flex/Flex.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.FlexItem = exports.Flex = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _excluded = ["children", "className", "gap", "align", "valign", "wrap", "expand", "style", "inline"],
+var _excluded = ["children", "justify", "alignItems", "gap", "wrap", "expand", "columns", "phone", "tablet", "style", "className"],
   _excluded2 = ["children", "className", "style", "grow", "align"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _extends() { return _extends = 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.apply(null, arguments); }
@@ -20,50 +20,58 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 var Flex = exports.Flex = function Flex(_ref) {
   var children = _ref.children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$justify = _ref.justify,
+    justify = _ref$justify === void 0 ? 'left' : _ref$justify,
+    _ref$alignItems = _ref.alignItems,
+    alignItems = _ref$alignItems === void 0 ? 'center' : _ref$alignItems,
     _ref$gap = _ref.gap,
     gap = _ref$gap === void 0 ? 15 : _ref$gap,
-    _ref$align = _ref.align,
-    align = _ref$align === void 0 ? 'left' : _ref$align,
-    _ref$valign = _ref.valign,
-    valign = _ref$valign === void 0 ? 'top' : _ref$valign,
     _ref$wrap = _ref.wrap,
     wrap = _ref$wrap === void 0 ? true : _ref$wrap,
     _ref$expand = _ref.expand,
     expand = _ref$expand === void 0 ? false : _ref$expand,
+    columns = _ref.columns,
+    _ref$phone = _ref.phone,
+    phone = _ref$phone === void 0 ? 1 : _ref$phone,
+    _ref$tablet = _ref.tablet,
+    tablet = _ref$tablet === void 0 ? 2 : _ref$tablet,
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? {} : _ref$style,
-    _ref$inline = _ref.inline,
-    inline = _ref$inline === void 0 ? true : _ref$inline,
+    className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
-  // Si expand está activo, pasamos grow=1 a los hijos que no lo tengan
+  var isGrid = columns != null;
+
+  // if expand is true, we pass grow=1 to children that don't have it
   var childrenWithGrow = _react["default"].Children.map(children, function (child) {
     var _child$props$grow;
-    return expand && /*#__PURE__*/_react["default"].isValidElement(child) ? /*#__PURE__*/_react["default"].cloneElement(child, {
+    return expand && !isGrid && /*#__PURE__*/_react["default"].isValidElement(child) ? /*#__PURE__*/_react["default"].cloneElement(child, {
       grow: (_child$props$grow = child.props.grow) !== null && _child$props$grow !== void 0 ? _child$props$grow : 1
     }) : child;
   });
   return /*#__PURE__*/_react["default"].createElement("div", _extends({
-    className: "flex flex-align-".concat(align, " flex-valign-").concat(valign, " ").concat(className, " ").concat(inline ? 'inline-elements' : ''),
+    className: "flex \n        flex-justify-".concat(justify, " \n        flex-align-").concat(alignItems, " \n        ").concat(className || '', "\n      "),
+    "data-cols": isGrid ? '' : undefined,
     style: _objectSpread({
       flexWrap: wrap ? 'wrap' : 'nowrap',
-      gap: gap
+      gap: gap,
+      '--flex-cols': isGrid ? columns : undefined,
+      '--flex-phone-cols': isGrid ? phone : undefined,
+      '--flex-tablet-cols': isGrid ? tablet : undefined,
+      '--flex-gap': isGrid ? typeof gap === 'number' ? "".concat(gap, "px") : gap : undefined
     }, style)
   }, props), childrenWithGrow);
 };
 var FlexItem = exports.FlexItem = function FlexItem(_ref2) {
   var children = _ref2.children,
-    _ref2$className = _ref2.className,
-    className = _ref2$className === void 0 ? '' : _ref2$className,
+    className = _ref2.className,
     _ref2$style = _ref2.style,
     style = _ref2$style === void 0 ? {} : _ref2$style,
     grow = _ref2.grow,
     _ref2$align = _ref2.align,
-    align = _ref2$align === void 0 ? 'left' : _ref2$align,
+    align = _ref2$align === void 0 ? 'center' : _ref2$align,
     props = _objectWithoutProperties(_ref2, _excluded2);
   return /*#__PURE__*/_react["default"].createElement("div", _extends({
-    className: "flex-item ".concat(align, " ").concat(className),
+    className: "flex-item flex-align-".concat(align, " ").concat(className || ''),
     style: _objectSpread({
       flex: grow ? "".concat(grow, " 1 0") : undefined
     }, style)
@@ -71,18 +79,39 @@ var FlexItem = exports.FlexItem = function FlexItem(_ref2) {
 };
 Flex.propTypes = {
   children: _propTypes["default"].node,
-  className: _propTypes["default"].string,
+  /**
+   * justify the content horizontally. Options: 'center', 'right', 'left', 'between'
+   */
+  justify: _propTypes["default"].oneOf(['left', 'center', 'right', 'between']),
+  /**
+   * align the items vertically. Options: 'start', 'center', 'end', 'stretch', 'baseline'
+   */
+  alignItems: _propTypes["default"].oneOf(['start', 'center', 'end', 'stretch', 'baseline']),
+  /**
+   * gap between items, can be a number (px) or a string with units (e.g. '10px', '1rem')
+   */
   gap: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-  align: _propTypes["default"].oneOf(['left', 'center', 'right']),
-  valign: _propTypes["default"].oneOf(['top', 'center', 'bottom', 'stretch']),
   wrap: _propTypes["default"].bool,
   expand: _propTypes["default"].bool,
-  style: _propTypes["default"].object
+  /**
+   * Number of columns per row (desktop). Enables grid mode.
+   */
+  columns: _propTypes["default"].number,
+  /**
+   * Columns per row on phone screens (≤550px). Default: 1
+   */
+  phone: _propTypes["default"].number,
+  /**
+   * Columns per row on tablet screens (551px–1115px). Default: 2
+   */
+  tablet: _propTypes["default"].number,
+  style: _propTypes["default"].object,
+  className: _propTypes["default"].string
 };
 FlexItem.propTypes = {
   children: _propTypes["default"].node,
   className: _propTypes["default"].string,
   style: _propTypes["default"].object,
   grow: _propTypes["default"].number,
-  align: _propTypes["default"].oneOf(['left', 'center', 'right'])
+  align: _propTypes["default"].oneOf(['start', 'center', 'end', 'stretch', 'baseline'])
 };

package/components/forms/LabelInput.js

@@ -7,7 +7,7 @@ exports.LabelInput = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _editable = require("../editable");
-var _excluded = ["label", "value", "editable", "required", "error"];
+var _excluded = ["label", "value", "editable", "required", "error", "onEdit", "onChange"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _extends() { return _extends = 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.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
@@ -20,16 +20,23 @@ var LabelInput = exports.LabelInput = function LabelInput(_ref) {
     _ref$required = _ref.required,
     required = _ref$required === void 0 ? false : _ref$required,
     error = _ref.error,
+    onEdit = _ref.onEdit,
+    onChange = _ref.onChange,
     props = _objectWithoutProperties(_ref, _excluded);
+  var handleChange = function handleChange(nextValue) {
+    onChange && onChange(nextValue);
+    onEdit && onEdit({
+      value: nextValue
+    });
+  };
   return /*#__PURE__*/_react["default"].createElement("label", {
     className: "form-element"
   }, label && /*#__PURE__*/_react["default"].createElement("div", {
     className: "input-label"
   }, required ? '*' : '', " ", label), editable ? /*#__PURE__*/_react["default"].createElement(_editable.Editable, _extends({
-    hint: true,
     className: "editable-input",
-    text: value
-  }, props)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, value), error && /*#__PURE__*/_react["default"].createElement("div", {
+    onChange: handleChange
+  }, props), value) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, value), error && /*#__PURE__*/_react["default"].createElement("div", {
     className: "input-label-alert"
   }, error));
 };
@@ -39,5 +46,7 @@ LabelInput.propTypes = {
   expanded: _propTypes["default"].bool,
   label: _propTypes["default"].string,
   required: _propTypes["default"].bool,
+  onEdit: _propTypes["default"].func,
+  onChange: _propTypes["default"].func,
   value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
 };

package/components/forms/LabelValue.js

@@ -7,7 +7,7 @@ exports.LabelValue = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _editable = require("../editable");
-var _excluded = ["label", "value", "editable", "required", "error"];
+var _excluded = ["label", "value", "editable", "required", "error", "onEdit", "onChange"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _extends() { return _extends = 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.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
@@ -20,16 +20,23 @@ var LabelValue = exports.LabelValue = function LabelValue(_ref) {
     _ref$required = _ref.required,
     required = _ref$required === void 0 ? false : _ref$required,
     error = _ref.error,
+    onEdit = _ref.onEdit,
+    onChange = _ref.onChange,
     props = _objectWithoutProperties(_ref, _excluded);
+  var handleChange = function handleChange(nextValue) {
+    onChange && onChange(nextValue);
+    onEdit && onEdit({
+      value: nextValue
+    });
+  };
   return /*#__PURE__*/_react["default"].createElement("label", {
     className: "form-element"
   }, label && /*#__PURE__*/_react["default"].createElement("div", {
     className: "input-label"
   }, required ? '*' : '', " ", label), editable ? /*#__PURE__*/_react["default"].createElement(_editable.Editable, _extends({
-    hint: true,
     className: "editable-input",
-    text: value
-  }, props)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, value), error && /*#__PURE__*/_react["default"].createElement("div", {
+    onChange: handleChange
+  }, props), value) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, value), error && /*#__PURE__*/_react["default"].createElement("div", {
     className: "input-label-alert"
   }, error));
 };
@@ -39,5 +46,7 @@ LabelValue.propTypes = {
   expanded: _propTypes["default"].bool,
   label: _propTypes["default"].string,
   required: _propTypes["default"].bool,
+  onEdit: _propTypes["default"].func,
+  onChange: _propTypes["default"].func,
   value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
 };

package/components/images/CarouselImages.js

@@ -41,15 +41,6 @@ var CarouselImages = exports.CarouselImages = function CarouselImages(_ref) {
     }, 400);
     setCurrent((idx + data.length) % data.length);
   };
-  var autoNext = function autoNext() {
-    setAnimating(true);
-    setTimeout(function () {
-      return setAnimating(false);
-    }, 400);
-    setCurrent(function (prev) {
-      return (prev + 1) % data.length;
-    });
-  };
   var prev = function prev() {
     return goTo(current - 1);
   };
@@ -63,15 +54,23 @@ var CarouselImages = exports.CarouselImages = function CarouselImages(_ref) {
   // Auto-advance timer
   (0, _react.useEffect)(function () {
     if (interval <= 0) return;
+    var autoNext = function autoNext() {
+      setAnimating(true);
+      setTimeout(function () {
+        return setAnimating(false);
+      }, 400);
+      setCurrent(function (prev) {
+        return (prev + 1) % data.length;
+      });
+    };
     if (timerRef.current) clearTimeout(timerRef.current);
     timerRef.current = setTimeout(function () {
-      // setCurrent(prev => (prev + 1) % data.length);
       autoNext();
     }, interval * 1000);
     return function () {
       if (timerRef.current) clearTimeout(timerRef.current);
     };
-  }, [current]);
+  }, [animating, current, data.length, interval]);
 
   // Touch handlers
   var onTouchStart = function onTouchStart(e) {
@@ -88,7 +87,7 @@ var CarouselImages = exports.CarouselImages = function CarouselImages(_ref) {
     touchStart.current = null;
   };
 
-  // Reinicia timer en interacción de botones o dots
+  // Restart timer on button or dot interaction
   var handleUserGoTo = function handleUserGoTo(idx) {
     clearTimer();
     goTo(idx);

package/components/images/Img.js

@@ -1,23 +1,16 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Img = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _util = require("../util");
-var _excluded = ["src", "alt", "align", "className", "bordered"];
+var _useImageLoader2 = require("./useImageLoader");
+var _excluded = ["src", "alt", "align", "className", "expanded", "bordered"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _extends() { return _extends = 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.apply(null, arguments); }
-function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
-function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 var Img = exports.Img = function Img(_ref) {
@@ -27,30 +20,23 @@ var Img = exports.Img = function Img(_ref) {
     align = _ref$align === void 0 ? 'left' : _ref$align,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$expanded = _ref.expanded,
+    expanded = _ref$expanded === void 0 ? false : _ref$expanded,
     _ref$bordered = _ref.bordered,
     bordered = _ref$bordered === void 0 ? false : _ref$bordered,
     props = _objectWithoutProperties(_ref, _excluded);
-  // const [imageData, setImageData] = useState();
-  var _useState = (0, _react.useState)(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    isLoading = _useState2[0],
-    setIsLoading = _useState2[1];
-  (0, _react.useEffect)(function () {
-    var image = new Image();
-    image.src = src;
-    image.onload = function () {
-      // setImageData({ width: image.width, height: image.height });
-      setIsLoading(false);
-    };
-  }, [src]);
+  var _useImageLoader = (0, _useImageLoader2.useImageLoader)(src),
+    isLoading = _useImageLoader.isLoading,
+    hasError = _useImageLoader.hasError;
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "image image-".concat(align, " ").concat(className)
   }, isLoading ? /*#__PURE__*/_react["default"].createElement(_util.Loader, {
     inline: true
   }) : /*#__PURE__*/_react["default"].createElement("img", _extends({
     src: src,
-    alt: alt,
-    className: "".concat(bordered ? 'bordered' : '')
+    alt: alt || '',
+    className: "".concat(expanded ? 'expanded' : '', " ").concat(bordered ? 'bordered' : ''),
+    "aria-invalid": hasError
   }, props)));
 };
 Img.propTypes = {
@@ -58,5 +44,7 @@ Img.propTypes = {
   alt: _propTypes["default"].string,
   align: _propTypes["default"].oneOf(['left', 'center', 'right']),
   className: _propTypes["default"].string,
-  bordered: _propTypes["default"].bool
+  expanded: _propTypes["default"].bool,
+  bordered: _propTypes["default"].bool,
+  rounded: _propTypes["default"].bool
 };