linear-react-components-ui 1.1.25-beta.6 → 1.1.25-beta.7

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.
Files changed (59) hide show
  1. package/lib/{BaseMask-78847f45.d.ts → BaseMask-0c14ef51.d.ts} +1 -1
  2. package/lib/{Cnpj-8366781f.d.ts → Cnpj-53bfd6ab.d.ts} +2 -1
  3. package/lib/{Cpf-3dfd54eb.d.ts → Cpf-019b21e0.d.ts} +2 -1
  4. package/lib/{Phone-1962c0f2.d.ts → Phone-2bb0b397.d.ts} +1 -1
  5. package/lib/{ZipCode-be9c5b3b.d.ts → ZipCode-09460e18.d.ts} +1 -1
  6. package/lib/index-19761a50.d.ts +26 -0
  7. package/lib/{index-6fcf446c.d.ts → index-208e7f62.d.ts} +20 -2
  8. package/lib/{index-02a27c19.d.ts → index-3b70931d.d.ts} +20 -2
  9. package/lib/index-4bda404f.d.ts +42 -0
  10. package/lib/{index-25b80f32.d.ts → index-7dfa8924.d.ts} +1 -1
  11. package/lib/{index-6f5c772d.d.ts → index-9e576346.d.ts} +1 -1
  12. package/lib/{index-696662fe.d.ts → index-afb7b5a9.d.ts} +1 -1
  13. package/lib/inputs2/checkboxfield/index.d.ts +2 -3
  14. package/lib/inputs2/checkboxfield/index.js +125 -32
  15. package/lib/inputs2/colorfield/index.d.ts +5 -6
  16. package/lib/inputs2/date/datefield/index.js +322 -34
  17. package/lib/inputs2/date/datefield/types.d.ts +3 -5
  18. package/lib/inputs2/date/dateperiodfield/index.js +587 -34
  19. package/lib/inputs2/date/dateperiodfield/types.d.ts +3 -5
  20. package/lib/inputs2/filefield/index.d.ts +5 -6
  21. package/lib/inputs2/index.d.ts +15 -18
  22. package/lib/inputs2/mask/BaseMask.d.ts +5 -6
  23. package/lib/inputs2/mask/Cnpj.d.ts +6 -7
  24. package/lib/inputs2/mask/Cnpj.js +21 -18
  25. package/lib/inputs2/mask/Cpf.d.ts +6 -7
  26. package/lib/inputs2/mask/Cpf.js +19 -12
  27. package/lib/inputs2/mask/Phone.d.ts +6 -7
  28. package/lib/inputs2/mask/ZipCode.d.ts +6 -7
  29. package/lib/inputs2/numberfield/currency.d.ts +4 -5
  30. package/lib/inputs2/numberfield/decimal.d.ts +4 -5
  31. package/lib/inputs2/numberfield/index.d.ts +4 -5
  32. package/lib/inputs2/numberfield/types.d.ts +4 -5
  33. package/lib/inputs2/radiofield/index.d.ts +1 -1
  34. package/lib/inputs2/radiofield/index.js +126 -25
  35. package/lib/inputs2/radiofield/types.d.ts +4 -6
  36. package/lib/inputs2/selectfield/index.d.ts +1 -1
  37. package/lib/inputs2/selectfield/index.js +502 -35
  38. package/lib/inputs2/selectfield/types.d.ts +6 -8
  39. package/lib/inputs2/textareafield/index.d.ts +3 -4
  40. package/lib/inputs2/textareafield/index.js +154 -30
  41. package/lib/inputs2/textfield/index.d.ts +4 -5
  42. package/lib/inputs2/textfield/index.js +120 -30
  43. package/package.json +1 -1
  44. package/lib/index-053f615b.d.ts +0 -26
  45. package/lib/index-7159df18.d.ts +0 -21
  46. package/lib/inputs2/checkboxfield/base.d.ts +0 -29
  47. package/lib/inputs2/checkboxfield/base.js +0 -134
  48. package/lib/inputs2/date/datefield/base.d.ts +0 -13
  49. package/lib/inputs2/date/datefield/base.js +0 -330
  50. package/lib/inputs2/date/dateperiodfield/base.d.ts +0 -13
  51. package/lib/inputs2/date/dateperiodfield/base.js +0 -595
  52. package/lib/inputs2/radiofield/base.d.ts +0 -12
  53. package/lib/inputs2/radiofield/base.js +0 -156
  54. package/lib/inputs2/selectfield/base.d.ts +0 -11
  55. package/lib/inputs2/selectfield/base.js +0 -513
  56. package/lib/inputs2/textareafield/base.d.ts +0 -26
  57. package/lib/inputs2/textareafield/base.js +0 -166
  58. package/lib/inputs2/textfield/base.d.ts +0 -26
  59. package/lib/inputs2/textfield/base.js +0 -131
@@ -18,30 +18,49 @@ Object.defineProperty(exports, "RightSlot", {
18
18
  });
19
19
  require("../../assets/styles/textfield.scss");
20
20
  var _react = _interopRequireDefault(require("react"));
21
+ var _lodash = _interopRequireDefault(require("lodash"));
21
22
  var _gridlayout = _interopRequireDefault(require("../../gridlayout"));
23
+ var _hint = _interopRequireDefault(require("../../hint"));
24
+ var _tooltip = require("../../tooltip");
25
+ var _textContent = _interopRequireDefault(require("../../textContent"));
26
+ var _helpers = require("../../form2/helpers");
27
+ var _popover = _interopRequireWildcard(require("../../popover"));
22
28
  var _permissionValidations = require("../../permissionValidations");
23
29
  var _slot = require("../slot");
24
- var _base = require("./base");
25
- const _excluded = ["readOnly", "disabled", "onDeniedActions", "permissionAttr", "gridLayout"];
30
+ const _excluded = ["name", "label", "errors", "children", "maxLength", "onDeniedActions", "permissionAttr", "customClass", "customClassLabel", "customClassWrapper", "customClassInputContainer", "textAlign", "labelUppercase", "skeletonize", "hintPosition", "gridLayout", "themePopover", "popoverAlign", "tooltip", "tooltipPosition", "tooltipWidth", "hint"];
31
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (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 (const 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); }
26
32
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
27
33
  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); }
28
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
29
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
30
- function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
31
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
32
- 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); }
33
34
  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; }
34
35
  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; }
35
36
  const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible, _permissionValidations.OPTIONS_ON_DENIED.readOnly, _permissionValidations.OPTIONS_ON_DENIED.hideContent];
36
- const Input = exports.Input = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
37
- let {
38
- readOnly,
39
- disabled,
37
+ const Input = exports.Input = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
38
+ var _props$hint;
39
+ const {
40
+ name,
41
+ label,
42
+ errors,
43
+ children,
44
+ maxLength = undefined,
40
45
  onDeniedActions = undefined,
41
46
  permissionAttr = undefined,
42
- gridLayout
43
- } = _ref,
44
- props = _objectWithoutProperties(_ref, _excluded);
47
+ customClass = '',
48
+ customClassLabel = '',
49
+ customClassWrapper = '',
50
+ customClassInputContainer = '',
51
+ textAlign = 'left',
52
+ labelUppercase = false,
53
+ skeletonize = false,
54
+ hintPosition = 'below',
55
+ gridLayout = undefined,
56
+ themePopover = 'light',
57
+ popoverAlign = 'left',
58
+ tooltip,
59
+ tooltipPosition,
60
+ tooltipWidth,
61
+ hint
62
+ } = props,
63
+ rest = _objectWithoutProperties(props, _excluded);
45
64
  const onDenied = _react.default.useMemo(() => {
46
65
  return onDeniedActions || (0, _permissionValidations.actionsOnPermissionDenied)(options, permissionAttr);
47
66
  }, [onDeniedActions, permissionAttr]);
@@ -49,22 +68,127 @@ const Input = exports.Input = /*#__PURE__*/_react.default.forwardRef((_ref, ref)
49
68
  hideContent,
50
69
  unvisible
51
70
  } = onDenied;
52
- const isReadOnly = Boolean(readOnly || onDenied.readOnly);
53
- const isDisabled = Boolean(disabled || onDenied.disabled);
54
- const inputProps = _objectSpread({
55
- readOnly: isReadOnly,
56
- disabled: isDisabled
57
- }, props);
71
+ const inputRef = _react.default.useRef(null);
72
+ const counterRef = _react.default.useRef(null);
73
+ const textAreaInternalRef = _react.default.useRef(null);
74
+ const hasLabel = !_lodash.default.isEmpty(props === null || props === void 0 ? void 0 : props.label);
75
+ const isReadOnly = Boolean(props.readOnly || onDenied.readOnly);
76
+ const isDisabled = Boolean(props.disabled || onDenied.disabled);
77
+ const hasHintMessages = Boolean((_props$hint = props.hint) === null || _props$hint === void 0 ? void 0 : _props$hint.length);
78
+ const hintMustBeOnLabel = hintPosition === 'onLabelRight';
79
+ const hasValidationErrors = Boolean(errors === null || errors === void 0 ? void 0 : errors.length);
80
+ const hasMaxLengthCondition = Boolean(maxLength);
81
+ const {
82
+ leftSlotElements,
83
+ rightSlotElements
84
+ } = _react.default.useMemo(() => {
85
+ const left = [];
86
+ const right = [];
87
+ _react.default.Children.map(children, (childElement, index) => {
88
+ if (/*#__PURE__*/_react.default.isValidElement(childElement)) {
89
+ var _childElement$key;
90
+ const clonedChild = /*#__PURE__*/_react.default.cloneElement(childElement, {
91
+ key: (_childElement$key = childElement.key) !== null && _childElement$key !== void 0 ? _childElement$key : "slot-".concat(index),
92
+ disabled: isDisabled,
93
+ 'aria-disabled': isDisabled
94
+ });
95
+ if (childElement.type === _slot.LeftSlot) left.push(clonedChild);
96
+ if (childElement.type === _slot.RightSlot) right.push(clonedChild);
97
+ }
98
+ });
99
+ return {
100
+ leftSlotElements: left,
101
+ rightSlotElements: right
102
+ };
103
+ }, [children, isDisabled]);
104
+ const hasLeftSlotElements = Boolean(leftSlotElements === null || leftSlotElements === void 0 ? void 0 : leftSlotElements.length);
105
+ const hasRightSlotElements = Boolean(rightSlotElements === null || rightSlotElements === void 0 ? void 0 : rightSlotElements.length);
106
+ const handleOnInputData = event => {
107
+ const target = event.target;
108
+ const currentLength = target.value.length;
109
+ if (counterRef.current) {
110
+ counterRef.current.textContent = "".concat(currentLength, "/").concat(maxLength);
111
+ /**
112
+ * Cálculo faz referência ao tamanho do espaço ocupado do contador de caracteres.
113
+ * Isso evita quebra de layout da interface.
114
+ */
115
+ counterRef.current.style.width = "".concat(_lodash.default.toNumber(maxLength === null || maxLength === void 0 ? void 0 : maxLength.toString().length) * 7 * 2 + 6, "px");
116
+ }
117
+ };
118
+ _react.default.useEffect(() => {
119
+ var _textAreaInternalRef$;
120
+ textAreaInternalRef === null || textAreaInternalRef === void 0 ? void 0 : (_textAreaInternalRef$ = textAreaInternalRef.current) === null || _textAreaInternalRef$ === void 0 ? void 0 : _textAreaInternalRef$.addEventListener('input', handleOnInputData);
121
+ return () => {
122
+ var _textAreaInternalRef$2;
123
+ textAreaInternalRef === null || textAreaInternalRef === void 0 ? void 0 : (_textAreaInternalRef$2 = textAreaInternalRef.current) === null || _textAreaInternalRef$2 === void 0 ? void 0 : _textAreaInternalRef$2.removeEventListener('input', handleOnInputData);
124
+ };
125
+ }, []);
58
126
  if (unvisible || hideContent) return null;
59
- if (gridLayout) {
60
- return /*#__PURE__*/_react.default.createElement(_gridlayout.default, {
61
- cols: gridLayout
62
- }, /*#__PURE__*/_react.default.createElement(_base.InputBase, _extends({
63
- ref: ref
64
- }, inputProps)));
65
- }
66
- return /*#__PURE__*/_react.default.createElement(_base.InputBase, _extends({
67
- ref: ref
68
- }, inputProps));
127
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_gridlayout.default, {
128
+ cols: gridLayout
129
+ }, /*#__PURE__*/_react.default.createElement("div", {
130
+ ref: inputRef,
131
+ className: "text-field-root ".concat(customClassWrapper),
132
+ "data-state-error": hasValidationErrors
133
+ }, hasLabel && /*#__PURE__*/_react.default.createElement("span", {
134
+ className: "root-label ".concat(customClassLabel),
135
+ "data-state-skeletonize": skeletonize
136
+ }, /*#__PURE__*/_react.default.createElement("label", {
137
+ className: "label",
138
+ title: label,
139
+ htmlFor: name,
140
+ "data-state-disabled": isDisabled,
141
+ "data-state-read-only": isReadOnly,
142
+ "data-state-input-required": props.required,
143
+ "data-state-label-uppercase": labelUppercase
144
+ }, label), hint && hintPosition === 'onLabelRight' && !skeletonize && /*#__PURE__*/_react.default.createElement(_popover.default, {
145
+ customClass: "label-popover",
146
+ theme: themePopover,
147
+ align: popoverAlign,
148
+ iconColor: "#03bde2"
149
+ }, /*#__PURE__*/_react.default.createElement(_popover.PopoverText, {
150
+ text: hint
151
+ }))), /*#__PURE__*/_react.default.createElement("div", {
152
+ "data-state-skeletonize": skeletonize,
153
+ className: "container ".concat(customClassInputContainer)
154
+ }, hasLeftSlotElements && !skeletonize && leftSlotElements, /*#__PURE__*/_react.default.createElement("textarea", _extends({
155
+ ref: (0, _helpers.mergeRefs)(ref, textAreaInternalRef),
156
+ id: name,
157
+ readOnly: isReadOnly,
158
+ disabled: isDisabled,
159
+ maxLength: maxLength,
160
+ className: "input ".concat(customClass),
161
+ tabIndex: !isReadOnly ? 0 : -1,
162
+ placeholder: rest.placeholder,
163
+ "data-state-error": hasValidationErrors,
164
+ "data-state-read-only": isReadOnly,
165
+ "data-state-text-align": textAlign,
166
+ "data-state-skeletonize": skeletonize
167
+ }, rest)), hasRightSlotElements && !skeletonize && rightSlotElements), /*#__PURE__*/_react.default.createElement("div", {
168
+ className: "footer",
169
+ "data-state-has-max-length": hasMaxLengthCondition,
170
+ "data-state-has-hint": hasHintMessages && !hintMustBeOnLabel
171
+ }, /*#__PURE__*/_react.default.createElement(_hint.default, {
172
+ customClass: "hint",
173
+ description: hint,
174
+ disabled: isDisabled,
175
+ skeletonize: skeletonize,
176
+ visible: !hintMustBeOnLabel && hasHintMessages
177
+ }), hasMaxLengthCondition && /*#__PURE__*/_react.default.createElement(_textContent.default, {
178
+ ref: counterRef,
179
+ as: "span",
180
+ className: "max-length-counter"
181
+ }, "0/", _lodash.default.toNumber(maxLength))), hasValidationErrors && /*#__PURE__*/_react.default.createElement("span", {
182
+ className: "error",
183
+ "data-state-skeletonize": skeletonize,
184
+ "aria-describedby": String(name).concat('-errors')
185
+ }, errors === null || errors === void 0 ? void 0 : errors.map((error, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
186
+ key: "".concat(index + 1, "-").concat(error)
187
+ }, error, "\xA0"))))), /*#__PURE__*/_react.default.createElement(_tooltip.Tooltip, {
188
+ targetRef: inputRef,
189
+ text: tooltip,
190
+ width: tooltipWidth,
191
+ position: tooltipPosition
192
+ }));
69
193
  });
70
194
  Input.displayName = 'TextAreaFieldInput';
@@ -1,9 +1,8 @@
1
1
  import 'react';
2
+ import '../../@types/Align.js';
3
+ import '../../@types/ColorStyles.js';
4
+ import '../../@types/Position.js';
2
5
  import '../../@types/PermissionAttr.js';
3
6
  export { LeftSlot, RightSlot } from '../slot/index.js';
4
- import './base.js';
5
- export { I as Input, T as TextFieldInputProps } from '../../index-02a27c19.js';
6
7
  import '../../tooltip/types.js';
7
- import '../../@types/Position.js';
8
- import '../../@types/Align.js';
9
- import '../../@types/ColorStyles.js';
8
+ export { I as Input, T as TextFieldInputProps } from '../../index-3b70931d.js';
@@ -17,31 +17,48 @@ Object.defineProperty(exports, "RightSlot", {
17
17
  }
18
18
  });
19
19
  require("../../assets/styles/textfield.scss");
20
- var _react = _interopRequireDefault(require("react"));
20
+ var _react = _interopRequireWildcard(require("react"));
21
+ var _lodash = _interopRequireDefault(require("lodash"));
21
22
  var _gridlayout = _interopRequireDefault(require("../../gridlayout"));
23
+ var _popover = _interopRequireWildcard(require("../../popover"));
22
24
  var _permissionValidations = require("../../permissionValidations");
25
+ var _hint = _interopRequireDefault(require("../../hint"));
23
26
  var _slot = require("../slot");
24
- var _base = require("./base");
25
- const _excluded = ["onDeniedActions", "permissionAttr", "gridLayout", "readOnly", "disabled"];
27
+ var _tooltip = require("../../tooltip");
28
+ const _excluded = ["type", "name", "label", "errors", "children", "onDeniedActions", "permissionAttr", "customClass", "customClassLabel", "customClassWrapper", "customClassInputContainer", "textAlign", "labelUppercase", "skeletonize", "hintPosition", "gridLayout", "themePopover", "popoverAlign", "tooltip", "tooltipPosition", "tooltipWidth", "hint"];
26
29
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
30
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (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 (const 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); }
27
31
  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); }
28
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
29
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
30
- function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
31
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
32
- 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); }
33
32
  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; }
34
33
  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; }
35
34
  const options = [_permissionValidations.OPTIONS_ON_DENIED.disabled, _permissionValidations.OPTIONS_ON_DENIED.unvisible, _permissionValidations.OPTIONS_ON_DENIED.readOnly, _permissionValidations.OPTIONS_ON_DENIED.hideContent];
36
- const Input = exports.Input = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
37
- let {
35
+ const Input = exports.Input = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
36
+ var _props$hint;
37
+ const {
38
+ type = 'text',
39
+ name,
40
+ label,
41
+ errors,
42
+ children,
38
43
  onDeniedActions = undefined,
39
44
  permissionAttr = undefined,
45
+ customClass = '',
46
+ customClassLabel = '',
47
+ customClassWrapper = '',
48
+ customClassInputContainer = '',
49
+ textAlign = 'left',
50
+ labelUppercase = false,
51
+ skeletonize = false,
52
+ hintPosition = 'below',
40
53
  gridLayout = undefined,
41
- readOnly,
42
- disabled
43
- } = _ref,
44
- props = _objectWithoutProperties(_ref, _excluded);
54
+ themePopover = 'light',
55
+ popoverAlign = 'left',
56
+ tooltip,
57
+ tooltipPosition,
58
+ tooltipWidth,
59
+ hint
60
+ } = props,
61
+ rest = _objectWithoutProperties(props, _excluded);
45
62
  const onDenied = _react.default.useMemo(() => {
46
63
  return onDeniedActions || (0, _permissionValidations.actionsOnPermissionDenied)(options, permissionAttr);
47
64
  }, [onDeniedActions, permissionAttr]);
@@ -49,22 +66,95 @@ const Input = exports.Input = /*#__PURE__*/_react.default.forwardRef((_ref, ref)
49
66
  hideContent,
50
67
  unvisible
51
68
  } = onDenied;
52
- const isReadOnly = Boolean(readOnly || onDenied.readOnly);
53
- const isDisabled = Boolean(disabled || onDenied.disabled);
54
- const inputProps = _objectSpread({
55
- readOnly: isReadOnly,
56
- disabled: isDisabled
57
- }, props);
69
+ const inputRef = (0, _react.useRef)(null);
70
+ const hasLabel = !_lodash.default.isEmpty(props === null || props === void 0 ? void 0 : props.label);
71
+ const isReadOnly = Boolean(props.readOnly || onDenied.readOnly);
72
+ const isDisabled = Boolean(props.disabled || onDenied.disabled);
73
+ const hasHintMessages = Boolean((_props$hint = props.hint) === null || _props$hint === void 0 ? void 0 : _props$hint.length);
74
+ const hasValidationErrors = Boolean(errors === null || errors === void 0 ? void 0 : errors.length);
75
+ const {
76
+ leftSlotElements,
77
+ rightSlotElements
78
+ } = _react.default.useMemo(() => {
79
+ const left = [];
80
+ const right = [];
81
+ _react.default.Children.map(children, (childElement, index) => {
82
+ if (/*#__PURE__*/_react.default.isValidElement(childElement)) {
83
+ var _childElement$key;
84
+ const clonedChild = /*#__PURE__*/_react.default.cloneElement(childElement, {
85
+ key: (_childElement$key = childElement.key) !== null && _childElement$key !== void 0 ? _childElement$key : "slot-".concat(index),
86
+ disabled: isDisabled,
87
+ 'aria-disabled': isDisabled
88
+ });
89
+ if (childElement.type === _slot.LeftSlot) left.push(clonedChild);
90
+ if (childElement.type === _slot.RightSlot) right.push(clonedChild);
91
+ }
92
+ });
93
+ return {
94
+ leftSlotElements: left,
95
+ rightSlotElements: right
96
+ };
97
+ }, [children, isDisabled]);
98
+ const hasLeftSlotElements = Boolean(leftSlotElements === null || leftSlotElements === void 0 ? void 0 : leftSlotElements.length);
99
+ const hasRightSlotElements = Boolean(rightSlotElements === null || rightSlotElements === void 0 ? void 0 : rightSlotElements.length);
58
100
  if (unvisible || hideContent) return null;
59
- if (gridLayout) {
60
- return /*#__PURE__*/_react.default.createElement(_gridlayout.default, {
61
- cols: gridLayout
62
- }, /*#__PURE__*/_react.default.createElement(_base.InputBase, _extends({
63
- ref: ref
64
- }, inputProps)));
65
- }
66
- return /*#__PURE__*/_react.default.createElement(_base.InputBase, _extends({
67
- ref: ref
68
- }, inputProps));
101
+ return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_gridlayout.default, {
102
+ cols: gridLayout
103
+ }, /*#__PURE__*/_react.default.createElement("div", {
104
+ ref: inputRef,
105
+ className: "text-field-root ".concat(customClassWrapper),
106
+ "data-state-error": hasValidationErrors
107
+ }, hasLabel && /*#__PURE__*/_react.default.createElement("span", {
108
+ className: "root-label ".concat(customClassLabel),
109
+ "data-state-skeletonize": skeletonize
110
+ }, /*#__PURE__*/_react.default.createElement("label", {
111
+ className: "label",
112
+ title: label,
113
+ htmlFor: name,
114
+ "data-state-disabled": isDisabled,
115
+ "data-state-read-only": isReadOnly,
116
+ "data-state-input-required": props.required,
117
+ "data-state-label-uppercase": labelUppercase
118
+ }, label), hint && hintPosition === 'onLabelRight' && !skeletonize && /*#__PURE__*/_react.default.createElement(_popover.default, {
119
+ customClass: "label-popover",
120
+ theme: themePopover,
121
+ align: popoverAlign,
122
+ iconColor: "#03bde2"
123
+ }, /*#__PURE__*/_react.default.createElement(_popover.PopoverText, {
124
+ text: hint
125
+ }))), /*#__PURE__*/_react.default.createElement("div", {
126
+ "data-state-skeletonize": skeletonize,
127
+ className: "container ".concat(customClassInputContainer)
128
+ }, hasLeftSlotElements && !skeletonize && leftSlotElements, /*#__PURE__*/_react.default.createElement("input", _extends({
129
+ ref: ref,
130
+ id: name,
131
+ type: type,
132
+ readOnly: isReadOnly,
133
+ disabled: isDisabled,
134
+ className: "input ".concat(customClass),
135
+ tabIndex: !isReadOnly ? 0 : -1,
136
+ placeholder: rest.placeholder,
137
+ "data-state-error": hasValidationErrors,
138
+ "data-state-read-only": isReadOnly,
139
+ "data-state-text-align": textAlign,
140
+ "data-state-skeletonize": skeletonize
141
+ }, rest)), hasRightSlotElements && !skeletonize && rightSlotElements), hintPosition === 'below' && /*#__PURE__*/_react.default.createElement(_hint.default, {
142
+ customClass: "hint",
143
+ description: hint,
144
+ disabled: isDisabled,
145
+ skeletonize: skeletonize,
146
+ visible: hasHintMessages
147
+ }), hasValidationErrors && /*#__PURE__*/_react.default.createElement("span", {
148
+ className: "error",
149
+ "data-state-skeletonize": skeletonize,
150
+ "aria-describedby": String(name).concat('-errors')
151
+ }, errors === null || errors === void 0 ? void 0 : errors.map((error, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
152
+ key: "".concat(index + 1, "-").concat(error)
153
+ }, error, "\xA0"))))), /*#__PURE__*/_react.default.createElement(_tooltip.Tooltip, {
154
+ targetRef: inputRef,
155
+ text: tooltip,
156
+ width: tooltipWidth,
157
+ position: tooltipPosition
158
+ }));
69
159
  });
70
160
  Input.displayName = 'TextFieldInput';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "linear-react-components-ui",
3
- "version": "1.1.25-beta.6",
3
+ "version": "1.1.25-beta.7",
4
4
  "description": "Linear Sistemas ReactJs Components",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib/index.cjs",
@@ -1,26 +0,0 @@
1
- import React__default from 'react';
2
- import { LeftSlot, RightSlot } from './inputs2/slot/index.js';
3
- import { Options } from './inputs2/selectfield/options.js';
4
- import { Item } from './inputs2/selectfield/item.js';
5
- import { SelectFieldInputProps } from './inputs2/selectfield/types.js';
6
-
7
- declare const Input: React__default.ForwardRefExoticComponent<SelectFieldInputProps & React__default.RefAttributes<HTMLInputElement>>;
8
-
9
- declare const index_Input: typeof Input;
10
- declare const index_Item: typeof Item;
11
- declare const index_LeftSlot: typeof LeftSlot;
12
- declare const index_Options: typeof Options;
13
- declare const index_RightSlot: typeof RightSlot;
14
- declare const index_SelectFieldInputProps: typeof SelectFieldInputProps;
15
- declare namespace index {
16
- export {
17
- index_Input as Input,
18
- index_Item as Item,
19
- index_LeftSlot as LeftSlot,
20
- index_Options as Options,
21
- index_RightSlot as RightSlot,
22
- index_SelectFieldInputProps as SelectFieldInputProps,
23
- };
24
- }
25
-
26
- export { Input as I, index as i };
@@ -1,21 +0,0 @@
1
- import React__default from 'react';
2
- import { PermissionAttr, OnDenied } from './@types/PermissionAttr.js';
3
- import { CheckboxFieldInputBaseProps } from './inputs2/checkboxfield/base.js';
4
-
5
- interface CheckboxFieldInputProps extends CheckboxFieldInputBaseProps {
6
- gridLayout?: string;
7
- permissionAttr?: PermissionAttr;
8
- onDeniedActions?: OnDenied;
9
- }
10
- declare const Input: React__default.ForwardRefExoticComponent<CheckboxFieldInputProps & React__default.RefAttributes<HTMLInputElement>>;
11
-
12
- type index_CheckboxFieldInputProps = CheckboxFieldInputProps;
13
- declare const index_Input: typeof Input;
14
- declare namespace index {
15
- export {
16
- index_CheckboxFieldInputProps as CheckboxFieldInputProps,
17
- index_Input as Input,
18
- };
19
- }
20
-
21
- export { CheckboxFieldInputProps as C, Input as I, index as i };
@@ -1,29 +0,0 @@
1
- import React__default from 'react';
2
- import { Size } from '../../@types/Size.js';
3
- import { ColorTheme } from '../../@types/ColorStyles.js';
4
- import { ITooltipCommonProps } from '../../tooltip/types.js';
5
- import { HintPosition, Position } from '../../@types/Position.js';
6
-
7
- type InputHTMLProps = Omit<React__default.ComponentPropsWithoutRef<'input'>, 'size' | 'type'>;
8
- interface CheckboxFieldInputBaseProps extends InputHTMLProps, ITooltipCommonProps {
9
- hint?: string;
10
- label?: string;
11
- size?: Exclude<Size, 'mini'>;
12
- variant?: 'default' | 'secondary';
13
- errors?: string[];
14
- customClass?: string;
15
- customClassLabel?: string;
16
- customClassWrapper?: string;
17
- customClassInputContainer?: string;
18
- rounded?: boolean;
19
- readOnly?: boolean;
20
- skeletonize?: boolean;
21
- labelUppercase?: boolean;
22
- hintPosition?: HintPosition;
23
- themePopover?: ColorTheme;
24
- popoverAlign?: Extract<Position, 'left' | 'right'>;
25
- tabIndex?: number;
26
- }
27
- declare const InputBase: React__default.ForwardRefExoticComponent<CheckboxFieldInputBaseProps & React__default.RefAttributes<HTMLInputElement>>;
28
-
29
- export { CheckboxFieldInputBaseProps, InputBase };
@@ -1,134 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.InputBase = void 0;
7
- require("../../assets/styles/checkbox2.scss");
8
- var _react = _interopRequireDefault(require("react"));
9
- var _lodash = _interopRequireDefault(require("lodash"));
10
- var _hint = _interopRequireDefault(require("../../hint"));
11
- var _icons = _interopRequireDefault(require("../../icons"));
12
- var _popover = _interopRequireWildcard(require("../../popover"));
13
- var _tooltip = require("../../tooltip");
14
- const _excluded = ["name", "label", "errors", "onChange", "size", "tooltip", "tooltipPosition", "tooltipWidth", "tabIndex", "variant", "customClass", "customClassLabel", "customClassWrapper", "labelUppercase", "rounded", "customClassInputContainer", "skeletonize", "hintPosition", "themePopover", "popoverAlign", "disabled", "readOnly"];
15
- function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (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 (const 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); }
16
- function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
17
- 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); }
18
- 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; }
19
- 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; }
20
- const InputBase = exports.InputBase = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
21
- var _props$checked, _props$hint;
22
- const {
23
- name,
24
- label,
25
- errors,
26
- onChange,
27
- size = 'default',
28
- tooltip,
29
- tooltipPosition,
30
- tooltipWidth,
31
- tabIndex = 0,
32
- variant = 'default',
33
- customClass = '',
34
- customClassLabel = '',
35
- customClassWrapper = '',
36
- labelUppercase = false,
37
- rounded = false,
38
- customClassInputContainer = '',
39
- skeletonize = false,
40
- hintPosition = 'below',
41
- themePopover = 'light',
42
- popoverAlign = 'left',
43
- disabled,
44
- readOnly
45
- } = props,
46
- rest = _objectWithoutProperties(props, _excluded);
47
- const inputId = _react.default.useMemo(() => props.id || "checkboxfield-".concat(name), [props.id, name]);
48
- const inputRootRef = _react.default.useRef(null);
49
- const isChecked = (_props$checked = props.checked) !== null && _props$checked !== void 0 ? _props$checked : Boolean(props.value);
50
- const hasLabel = !_lodash.default.isEmpty(props === null || props === void 0 ? void 0 : props.label);
51
- const hasHintMessages = Boolean((_props$hint = props.hint) === null || _props$hint === void 0 ? void 0 : _props$hint.length);
52
- const hasValidationErrors = Boolean(errors === null || errors === void 0 ? void 0 : errors.length);
53
- const handleOnChange = _react.default.useCallback(event => {
54
- if (readOnly || disabled) return;
55
- Object.defineProperty(event.target, 'value', {
56
- value: event.target.checked,
57
- writable: true,
58
- enumerable: true,
59
- configurable: true
60
- });
61
- onChange === null || onChange === void 0 ? void 0 : onChange(event);
62
- }, [readOnly, disabled, onChange]);
63
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
64
- ref: inputRootRef,
65
- "data-testid": "test-chebox-field-root",
66
- className: "checkbox-field-root ".concat(customClassWrapper),
67
- "data-state-error": hasValidationErrors
68
- }, /*#__PURE__*/_react.default.createElement("div", {
69
- "data-state-skeletonize": skeletonize,
70
- className: "container ".concat(customClassInputContainer)
71
- }, /*#__PURE__*/_react.default.createElement("div", {
72
- className: "input-root"
73
- }, /*#__PURE__*/_react.default.createElement("input", _extends({
74
- ref: ref,
75
- id: inputId,
76
- name: name,
77
- readOnly: readOnly,
78
- disabled: disabled,
79
- className: "input ".concat(customClass),
80
- tabIndex: !readOnly && !tabIndex ? 0 : -1,
81
- "data-testid": "test-checkbox-field-input",
82
- "data-state-size": size,
83
- "data-state-error": hasValidationErrors,
84
- "data-state-variant": variant,
85
- "data-state-rounded": rounded,
86
- "data-state-read-only": readOnly,
87
- "data-state-skeletonize": skeletonize
88
- }, rest, {
89
- type: "checkbox",
90
- checked: isChecked,
91
- onChange: handleOnChange
92
- })), /*#__PURE__*/_react.default.createElement(_icons.default, {
93
- customClass: "checkmark",
94
- name: "checkmark",
95
- colorStyle: "default"
96
- })), hasLabel && /*#__PURE__*/_react.default.createElement("label", {
97
- className: "label ".concat(customClassLabel),
98
- title: label,
99
- htmlFor: inputId,
100
- "aria-readonly": readOnly,
101
- "aria-disabled": disabled,
102
- "data-testid": "test-checkbox-field-label",
103
- "data-state-skeletonize": skeletonize,
104
- "data-state-disabled": disabled,
105
- "data-state-read-only": readOnly,
106
- "data-state-uppercase": labelUppercase,
107
- "data-state-input-required": props.required
108
- }, label), hasLabel && hasHintMessages && hintPosition === 'onLabelRight' && !skeletonize && /*#__PURE__*/_react.default.createElement(_popover.default, {
109
- customClass: "label-popover",
110
- theme: themePopover,
111
- align: popoverAlign,
112
- iconColor: "#03bde2"
113
- }, /*#__PURE__*/_react.default.createElement(_popover.PopoverText, {
114
- text: props === null || props === void 0 ? void 0 : props.hint
115
- }))), hintPosition === 'below' && /*#__PURE__*/_react.default.createElement(_hint.default, {
116
- customClass: "hint",
117
- description: props.hint,
118
- disabled: disabled,
119
- skeletonize: skeletonize,
120
- visible: hasHintMessages
121
- }), hasValidationErrors && /*#__PURE__*/_react.default.createElement("span", {
122
- className: "error",
123
- "data-state-skeletonize": skeletonize,
124
- "aria-describedby": String(name).concat('-errors')
125
- }, errors === null || errors === void 0 ? void 0 : errors.map((error, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
126
- key: "".concat(index + 1, "-").concat(error)
127
- }, error, "\xA0")))), /*#__PURE__*/_react.default.createElement(_tooltip.Tooltip, {
128
- targetRef: inputRootRef,
129
- text: tooltip,
130
- width: tooltipWidth,
131
- position: tooltipPosition
132
- }));
133
- });
134
- InputBase.displayName = 'CheckboxFieldInputBase';
@@ -1,13 +0,0 @@
1
- import React__default from 'react';
2
- import { DateFieldInputBaseProps } from './types.js';
3
- import 'moment';
4
- import '../../../@types/Align.js';
5
- import '../../../@types/ColorStyles.js';
6
- import '../../../tooltip/types.js';
7
- import '../../../@types/Position.js';
8
- import '../../../@types/PermissionAttr.js';
9
- import '../types.js';
10
-
11
- declare const InputBase: React__default.ForwardRefExoticComponent<DateFieldInputBaseProps & React__default.RefAttributes<HTMLInputElement>>;
12
-
13
- export { InputBase };