pallote-react 0.3.0 → 0.3.2

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 (9) hide show
  1. package/dist/components/Checkbox.js +10 -9
  2. package/dist/components/Checkboxes.js +22 -36
  3. package/dist/components/Input.js +30 -42
  4. package/dist/components/Radio.js +13 -9
  5. package/dist/components/RadioButtons.js +23 -37
  6. package/dist/components/Select.js +29 -31
  7. package/dist/components/Status.js +1 -1
  8. package/dist/components/Textarea.js +27 -30
  9. package/package.json +2 -2
package/dist/components/Checkbox.js CHANGED
@@ -8,8 +8,7 @@ exports.Checkbox = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _classnames = _interopRequireDefault(require("classnames"));
10
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
- var _Text = require("../utilities/Text");
12
- const _excluded = ["id", "value", "label", "checked", "disabled", "className"];
11
+ const _excluded = ["id", "value", "label", "checked", "disabled", "optional", "className"];
13
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
13
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
15
14
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -21,25 +20,26 @@ const Checkbox = _ref => {
21
20
  label,
22
21
  checked,
23
22
  disabled,
23
+ optional,
24
24
  className
25
25
  } = _ref,
26
26
  props = _objectWithoutProperties(_ref, _excluded);
27
27
  return /*#__PURE__*/_react.default.createElement("div", {
28
28
  className: (0, _classnames.default)(['checkbox', {
29
- 'checkbox--disabled': disabled
29
+ 'checkbox-disabled': disabled
30
30
  }, className])
31
31
  }, /*#__PURE__*/_react.default.createElement("input", _extends({
32
- className: (0, _classnames.default)('checkbox__control'),
32
+ className: (0, _classnames.default)('checkbox_control'),
33
33
  type: "checkbox",
34
34
  name: id,
35
35
  id: id,
36
36
  value: value,
37
37
  checked: checked,
38
- disabled: disabled
39
- }, props)), /*#__PURE__*/_react.default.createElement(_Text.Text, {
40
- className: (0, _classnames.default)('checkbox__label'),
41
- variant: "body",
42
- component: "label",
38
+ "aria-checked": checked,
39
+ disabled: disabled,
40
+ required: !(disabled || optional)
41
+ }, props)), /*#__PURE__*/_react.default.createElement("label", {
42
+ className: (0, _classnames.default)('checkbox_label'),
43
43
  htmlFor: id
44
44
  }, label));
45
45
  };
@@ -50,5 +50,6 @@ Checkbox.propTypes = {
50
50
  label: _propTypes.default.string,
51
51
  checked: _propTypes.default.bool,
52
52
  disabled: _propTypes.default.bool,
53
+ optional: _propTypes.default.bool,
53
54
  className: _propTypes.default.node
54
55
  };
package/dist/components/Checkboxes.js CHANGED
@@ -1,76 +1,62 @@
1
1
  "use strict";
2
2
 
3
- require("core-js/modules/es.weak-map.js");
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
7
6
  exports.Checkboxes = void 0;
8
- require("core-js/modules/web.dom-collections.iterator.js");
9
- var _react = _interopRequireWildcard(require("react"));
7
+ var _react = _interopRequireDefault(require("react"));
10
8
  var _classnames = _interopRequireDefault(require("classnames"));
11
9
  var _propTypes = _interopRequireDefault(require("prop-types"));
12
10
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
14
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
15
11
  const Checkboxes = _ref => {
16
12
  let {
17
13
  onChange,
18
14
  id,
19
15
  label,
20
- notice,
16
+ hint,
21
17
  error,
22
18
  disabled,
23
- required,
19
+ optional,
24
20
  direction,
25
- onFocus: _onFocus,
26
- onBlur: _onBlur,
27
21
  children,
28
22
  className
29
23
  } = _ref;
30
- const [isFocused, setFocused] = (0, _react.useState)(false);
31
- return /*#__PURE__*/_react.default.createElement("div", {
24
+ return /*#__PURE__*/_react.default.createElement("fieldset", {
32
25
  className: (0, _classnames.default)(['input', {
33
- 'input--focused': isFocused,
34
- 'js--error': error,
35
- 'input--disabled': disabled,
36
- 'input--required': required
26
+ 'js-error': error,
27
+ 'input-disabled': disabled,
28
+ 'input-optional': optional
37
29
  }, className]),
38
30
  onChange: onChange,
39
- onFocus: event => {
40
- setFocused(true);
41
- _onFocus && _onFocus(event);
42
- },
43
- onBlur: event => {
44
- setFocused(false);
45
- _onBlur && _onBlur(event);
46
- }
47
- }, label && /*#__PURE__*/_react.default.createElement("label", {
48
- className: 'input__label',
31
+ "aria-description": hint
32
+ }, label && /*#__PURE__*/_react.default.createElement("legend", {
33
+ className: 'input_label',
49
34
  htmlFor: id
50
- }, label), notice && /*#__PURE__*/_react.default.createElement("p", {
51
- className: 'input__notice'
52
- }, notice), /*#__PURE__*/_react.default.createElement("div", {
53
- className: (0, _classnames.default)(['input__control', 'radios', {
54
- ["radios--".concat(direction)]: direction
35
+ }, label), hint && /*#__PURE__*/_react.default.createElement("p", {
36
+ className: 'input_hint'
37
+ }, hint), /*#__PURE__*/_react.default.createElement("div", {
38
+ className: (0, _classnames.default)(['input_control', 'radios', {
39
+ ["radios-".concat(direction)]: direction
55
40
  }])
56
- }, children));
41
+ }, _react.default.Children.map(children, child => /*#__PURE__*/_react.default.isValidElement(child) ? /*#__PURE__*/_react.default.cloneElement(child, {
42
+ optional,
43
+ disabled
44
+ }) : child)));
57
45
  };
58
46
  exports.Checkboxes = Checkboxes;
59
47
  Checkboxes.propTypes = {
60
48
  onChange: _propTypes.default.func,
61
49
  id: _propTypes.default.string,
62
50
  label: _propTypes.default.string,
63
- notice: _propTypes.default.string,
51
+ hint: _propTypes.default.string,
64
52
  error: _propTypes.default.bool,
65
53
  disabled: _propTypes.default.bool,
66
- required: _propTypes.default.bool,
54
+ optional: _propTypes.default.bool,
67
55
  direction: _propTypes.default.oneOf(['portrait', 'landscape']),
68
- onFocus: _propTypes.default.func,
69
- onBlur: _propTypes.default.func,
70
56
  children: _propTypes.default.node,
71
57
  className: _propTypes.default.node
72
58
  };
73
59
  Checkboxes.defaultProps = {
74
60
  label: 'Label',
75
- direction: 'landscape'
61
+ direction: 'portrait'
76
62
  };
package/dist/components/Input.js CHANGED
@@ -2,16 +2,16 @@
2
2
 
3
3
  require("core-js/modules/es.object.assign.js");
4
4
  require("core-js/modules/es.weak-map.js");
5
+ require("core-js/modules/web.dom-collections.iterator.js");
5
6
  Object.defineProperty(exports, "__esModule", {
6
7
  value: true
7
8
  });
8
9
  exports.Input = void 0;
9
- require("core-js/modules/web.dom-collections.iterator.js");
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
  var _classnames = _interopRequireDefault(require("classnames"));
12
12
  var _propTypes = _interopRequireDefault(require("prop-types"));
13
13
  var _react2 = require("@phosphor-icons/react");
14
- const _excluded = ["onChange", "type", "id", "placeholder", "label", "notice", "icon", "error", "disabled", "required", "onFocus", "onBlur", "className"];
14
+ const _excluded = ["onChange", "type", "id", "placeholder", "label", "icon", "isFocused", "error", "disabled", "optional", "hint", "className"];
15
15
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
16
16
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
17
17
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -25,58 +25,47 @@ const Input = _ref => {
25
25
  id,
26
26
  placeholder,
27
27
  label,
28
- notice,
29
28
  icon,
29
+ isFocused,
30
30
  error,
31
31
  disabled,
32
- required,
33
- onFocus: _onFocus,
34
- onBlur: _onBlur,
32
+ optional,
33
+ hint,
35
34
  className
36
35
  } = _ref,
37
36
  props = _objectWithoutProperties(_ref, _excluded);
38
- const [isFocused, setFocused] = (0, _react.useState)(false);
39
- let customIcon;
40
- if (icon) {
41
- customIcon = icon;
42
- } else if (type === 'date') {
43
- customIcon = /*#__PURE__*/_react.default.createElement(_react2.CalendarBlank, null);
44
- } else if (type === 'time') {
45
- customIcon = /*#__PURE__*/_react.default.createElement(_react2.Clock, null);
46
- } else if (type === 'number') {
47
- customIcon = /*#__PURE__*/_react.default.createElement(_react2.CaretUpDown, null);
48
- }
37
+ const inputRef = (0, _react.useRef)(null);
38
+ (0, _react.useEffect)(() => {
39
+ if (isFocused && inputRef.current) {
40
+ inputRef.current.focus();
41
+ }
42
+ }, [isFocused]);
43
+ const customIcon = icon || type === 'date' && /*#__PURE__*/_react.default.createElement(_react2.CalendarBlank, null) || type === 'time' && /*#__PURE__*/_react.default.createElement(_react2.Clock, null) || type === 'number' && /*#__PURE__*/_react.default.createElement(_react2.CaretUpDown, null);
49
44
  return /*#__PURE__*/_react.default.createElement("div", {
50
45
  className: (0, _classnames.default)(['input', {
51
- 'input--focused': isFocused,
52
- 'js--error': error,
53
- 'input--disabled': disabled,
54
- 'input--required': required,
55
- 'input--withIcon': icon
46
+ 'js-error': error,
47
+ 'input-disabled': disabled,
48
+ 'input-optional': optional,
49
+ 'input-withIcon': icon
56
50
  }, className]),
57
- onChange: onChange,
58
- onFocus: event => {
59
- setFocused(true);
60
- _onFocus && _onFocus(event);
61
- },
62
- onBlur: event => {
63
- setFocused(false);
64
- _onBlur && _onBlur(event);
65
- }
51
+ onChange: onChange
66
52
  }, label && /*#__PURE__*/_react.default.createElement("label", {
67
- className: 'input__label',
53
+ className: 'input_label',
68
54
  htmlFor: id
69
- }, label), notice && /*#__PURE__*/_react.default.createElement("p", {
70
- className: 'input__notice'
71
- }, notice), customIcon && /*#__PURE__*/_react.default.createElement("div", {
72
- className: 'input__icon'
55
+ }, label), hint && /*#__PURE__*/_react.default.createElement("p", {
56
+ className: 'input_hint'
57
+ }, hint), customIcon && /*#__PURE__*/_react.default.createElement("div", {
58
+ className: 'input_icon'
73
59
  }, customIcon), /*#__PURE__*/_react.default.createElement("input", _extends({
60
+ ref: inputRef,
74
61
  type: type,
75
- className: 'input__control',
62
+ className: 'input_control',
76
63
  name: id,
77
64
  id: id,
78
65
  placeholder: placeholder,
79
- disabled: disabled
66
+ disabled: disabled,
67
+ required: !(disabled || optional),
68
+ "aria-description": hint
80
69
  }, props)));
81
70
  };
82
71
  exports.Input = Input;
@@ -86,13 +75,12 @@ Input.propTypes = {
86
75
  id: _propTypes.default.string,
87
76
  placeholder: _propTypes.default.string,
88
77
  label: _propTypes.default.string,
89
- notice: _propTypes.default.string,
90
78
  icon: _propTypes.default.node,
79
+ isFocused: _propTypes.default.bool,
91
80
  error: _propTypes.default.bool,
92
81
  disabled: _propTypes.default.bool,
93
- required: _propTypes.default.bool,
94
- onFocus: _propTypes.default.func,
95
- onBlur: _propTypes.default.func,
82
+ optional: _propTypes.default.bool,
83
+ hint: _propTypes.default.string,
96
84
  className: _propTypes.default.node
97
85
  };
98
86
  Input.defaultProps = {
package/dist/components/Radio.js CHANGED
@@ -8,8 +8,7 @@ exports.Radio = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _classnames = _interopRequireDefault(require("classnames"));
10
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
- var _Text = require("../utilities/Text");
12
- const _excluded = ["id", "name", "value", "label", "disabled", "className"];
11
+ const _excluded = ["id", "name", "value", "label", "checked", "disabled", "optional", "className"];
13
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
14
13
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
15
14
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -20,25 +19,28 @@ const Radio = _ref => {
20
19
  name,
21
20
  value,
22
21
  label,
22
+ checked,
23
23
  disabled,
24
+ optional,
24
25
  className
25
26
  } = _ref,
26
27
  props = _objectWithoutProperties(_ref, _excluded);
27
28
  return /*#__PURE__*/_react.default.createElement("div", {
28
29
  className: (0, _classnames.default)(['radio', {
29
- 'radio--disabled': disabled
30
+ 'radio-disabled': disabled
30
31
  }, className])
31
32
  }, /*#__PURE__*/_react.default.createElement("input", _extends({
32
- className: (0, _classnames.default)('radio__control'),
33
+ className: (0, _classnames.default)('radio_control'),
33
34
  type: "radio",
34
35
  id: id,
35
36
  name: name,
36
37
  value: value,
37
- disabled: disabled
38
- }, props)), /*#__PURE__*/_react.default.createElement(_Text.Text, {
39
- className: (0, _classnames.default)('radio__label'),
40
- variant: "body",
41
- component: "label",
38
+ checked: checked,
39
+ "aria-checked": checked,
40
+ disabled: disabled,
41
+ required: !(disabled || optional)
42
+ }, props)), /*#__PURE__*/_react.default.createElement("label", {
43
+ className: (0, _classnames.default)('radio_label'),
42
44
  htmlFor: id
43
45
  }, label));
44
46
  };
@@ -48,6 +50,8 @@ Radio.propTypes = {
48
50
  name: _propTypes.default.string,
49
51
  value: _propTypes.default.string,
50
52
  label: _propTypes.default.string,
53
+ checked: _propTypes.default.bool,
51
54
  disabled: _propTypes.default.bool,
55
+ optional: _propTypes.default.bool,
52
56
  className: _propTypes.default.node
53
57
  };
package/dist/components/RadioButtons.js CHANGED
@@ -1,76 +1,62 @@
1
1
  "use strict";
2
2
 
3
- require("core-js/modules/es.weak-map.js");
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
7
6
  exports.RadioButtons = void 0;
8
- require("core-js/modules/web.dom-collections.iterator.js");
9
- var _react = _interopRequireWildcard(require("react"));
7
+ var _react = _interopRequireDefault(require("react"));
10
8
  var _classnames = _interopRequireDefault(require("classnames"));
11
9
  var _propTypes = _interopRequireDefault(require("prop-types"));
12
10
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
- function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
14
- function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
15
11
  const RadioButtons = _ref => {
16
12
  let {
17
13
  onChange,
18
14
  id,
19
15
  label,
20
- notice,
16
+ hint,
21
17
  error,
22
18
  disabled,
23
- required,
19
+ optional,
24
20
  direction,
25
- onFocus: _onFocus,
26
- onBlur: _onBlur,
27
21
  children,
28
22
  className
29
23
  } = _ref;
30
- const [isFocused, setFocused] = (0, _react.useState)(false);
31
- return /*#__PURE__*/_react.default.createElement("div", {
24
+ return /*#__PURE__*/_react.default.createElement("fieldset", {
32
25
  className: (0, _classnames.default)(['input', {
33
- 'input--focused': isFocused,
34
- 'js--error': error,
35
- 'input--disabled': disabled,
36
- 'input--required': required
26
+ 'js-error': error,
27
+ 'input-disabled': disabled,
28
+ 'input-optional': optional
37
29
  }, className]),
38
30
  onChange: onChange,
39
- onFocus: event => {
40
- setFocused(true);
41
- _onFocus && _onFocus(event);
42
- },
43
- onBlur: event => {
44
- setFocused(false);
45
- _onBlur && _onBlur(event);
46
- }
47
- }, label && /*#__PURE__*/_react.default.createElement("label", {
48
- className: 'input__label',
31
+ "aria-description": hint
32
+ }, label && /*#__PURE__*/_react.default.createElement("legend", {
33
+ className: 'input_label',
49
34
  htmlFor: id
50
- }, label), notice && /*#__PURE__*/_react.default.createElement("p", {
51
- className: 'input__notice'
52
- }, notice), /*#__PURE__*/_react.default.createElement("div", {
53
- className: (0, _classnames.default)(['input__control', 'radios', {
54
- ["radios--".concat(direction)]: direction
35
+ }, label), hint && /*#__PURE__*/_react.default.createElement("p", {
36
+ className: 'input_hint'
37
+ }, hint), /*#__PURE__*/_react.default.createElement("div", {
38
+ className: (0, _classnames.default)(['input_control', 'radios', {
39
+ ["radios-".concat(direction)]: direction
55
40
  }])
56
- }, children));
41
+ }, _react.default.Children.map(children, child => /*#__PURE__*/_react.default.isValidElement(child) ? /*#__PURE__*/_react.default.cloneElement(child, {
42
+ optional,
43
+ disabled
44
+ }) : child)));
57
45
  };
58
46
  exports.RadioButtons = RadioButtons;
59
47
  RadioButtons.propTypes = {
60
48
  onChange: _propTypes.default.func,
61
49
  id: _propTypes.default.string,
62
50
  label: _propTypes.default.string,
63
- notice: _propTypes.default.string,
51
+ direction: _propTypes.default.oneOf(['portrait', 'landscape']),
64
52
  error: _propTypes.default.bool,
65
53
  disabled: _propTypes.default.bool,
66
- required: _propTypes.default.bool,
67
- direction: _propTypes.default.oneOf(['portrait', 'landscape']),
68
- onFocus: _propTypes.default.func,
69
- onBlur: _propTypes.default.func,
54
+ optional: _propTypes.default.bool,
55
+ hint: _propTypes.default.string,
70
56
  children: _propTypes.default.node,
71
57
  className: _propTypes.default.node
72
58
  };
73
59
  RadioButtons.defaultProps = {
74
60
  label: 'Label',
75
- direction: 'landscape'
61
+ direction: 'portrait'
76
62
  };
package/dist/components/Select.js CHANGED
@@ -2,15 +2,15 @@
2
2
 
3
3
  require("core-js/modules/es.object.assign.js");
4
4
  require("core-js/modules/es.weak-map.js");
5
+ require("core-js/modules/web.dom-collections.iterator.js");
5
6
  Object.defineProperty(exports, "__esModule", {
6
7
  value: true
7
8
  });
8
9
  exports.Select = void 0;
9
- require("core-js/modules/web.dom-collections.iterator.js");
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
  var _classnames = _interopRequireDefault(require("classnames"));
12
12
  var _propTypes = _interopRequireDefault(require("prop-types"));
13
- const _excluded = ["onChange", "id", "label", "notice", "error", "disabled", "required", "onFocus", "onBlur", "children", "className"];
13
+ const _excluded = ["onChange", "id", "label", "isFocused", "error", "disabled", "optional", "hint", "children", "className"];
14
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
15
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
16
16
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -22,43 +22,42 @@ const Select = _ref => {
22
22
  onChange,
23
23
  id,
24
24
  label,
25
- notice,
25
+ isFocused,
26
26
  error,
27
27
  disabled,
28
- required,
29
- onFocus: _onFocus,
30
- onBlur: _onBlur,
28
+ optional,
29
+ hint,
31
30
  children,
32
31
  className
33
32
  } = _ref,
34
33
  props = _objectWithoutProperties(_ref, _excluded);
35
- const [isFocused, setFocused] = (0, _react.useState)(false);
34
+ const inputRef = (0, _react.useRef)(null);
35
+ (0, _react.useEffect)(() => {
36
+ if (isFocused && inputRef.current) {
37
+ inputRef.current.focus();
38
+ }
39
+ }, [isFocused]);
36
40
  return /*#__PURE__*/_react.default.createElement("div", {
37
41
  className: (0, _classnames.default)(['input', 'select', {
38
- 'input--focused': isFocused,
39
- 'js--error': error,
40
- 'input--disabled': disabled,
41
- 'input--required': required
42
+ 'input-focused': isFocused,
43
+ 'js-error': error,
44
+ 'input-disabled': disabled,
45
+ 'input-optional': optional
42
46
  }, className]),
43
- onChange: onChange,
44
- onFocus: event => {
45
- setFocused(true);
46
- _onFocus && _onFocus(event);
47
- },
48
- onBlur: event => {
49
- setFocused(false);
50
- _onBlur && _onBlur(event);
51
- }
47
+ onChange: onChange
52
48
  }, label && /*#__PURE__*/_react.default.createElement("label", {
53
- className: 'input__label',
49
+ className: 'input_label',
54
50
  htmlFor: id
55
- }, label), notice && /*#__PURE__*/_react.default.createElement("p", {
56
- className: 'input__notice'
57
- }, notice), /*#__PURE__*/_react.default.createElement("select", _extends({
58
- className: 'input__control',
51
+ }, label), hint && /*#__PURE__*/_react.default.createElement("p", {
52
+ className: 'input_hint'
53
+ }, hint), /*#__PURE__*/_react.default.createElement("select", _extends({
54
+ ref: inputRef,
55
+ className: 'input_control',
59
56
  name: id,
60
57
  id: id,
61
- disabled: disabled
58
+ disabled: disabled,
59
+ required: !(disabled || optional),
60
+ "aria-description": hint
62
61
  }, props), children));
63
62
  };
64
63
  exports.Select = Select;
@@ -66,15 +65,14 @@ Select.propTypes = {
66
65
  onChange: _propTypes.default.func,
67
66
  id: _propTypes.default.string,
68
67
  label: _propTypes.default.string,
69
- notice: _propTypes.default.string,
68
+ isFocused: _propTypes.default.bool,
70
69
  error: _propTypes.default.bool,
71
70
  disabled: _propTypes.default.bool,
72
- required: _propTypes.default.bool,
73
- onFocus: _propTypes.default.func,
74
- onBlur: _propTypes.default.func,
71
+ optional: _propTypes.default.bool,
72
+ hint: _propTypes.default.string,
75
73
  children: _propTypes.default.any,
76
74
  className: _propTypes.default.node
77
75
  };
78
76
  Select.defaultProps = {
79
- label: 'Text input'
77
+ label: 'Select'
80
78
  };
package/dist/components/Status.js CHANGED
@@ -38,5 +38,5 @@ Status.propTypes = {
38
38
  };
39
39
  Status.defaultProps = {
40
40
  color: 'inactive',
41
- children: 'Status p'
41
+ children: 'Status'
42
42
  };
package/dist/components/Textarea.js CHANGED
@@ -2,15 +2,15 @@
2
2
 
3
3
  require("core-js/modules/es.object.assign.js");
4
4
  require("core-js/modules/es.weak-map.js");
5
+ require("core-js/modules/web.dom-collections.iterator.js");
5
6
  Object.defineProperty(exports, "__esModule", {
6
7
  value: true
7
8
  });
8
9
  exports.Textarea = void 0;
9
- require("core-js/modules/web.dom-collections.iterator.js");
10
10
  var _react = _interopRequireWildcard(require("react"));
11
11
  var _classnames = _interopRequireDefault(require("classnames"));
12
12
  var _propTypes = _interopRequireDefault(require("prop-types"));
13
- const _excluded = ["onChange", "id", "placeholder", "label", "notice", "error", "disabled", "required", "onFocus", "onBlur", "className"];
13
+ const _excluded = ["onChange", "id", "placeholder", "label", "isFocused", "error", "disabled", "optional", "hint", "className"];
14
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
15
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
16
16
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -23,44 +23,42 @@ const Textarea = _ref => {
23
23
  id,
24
24
  placeholder,
25
25
  label,
26
- notice,
26
+ isFocused,
27
27
  error,
28
28
  disabled,
29
- required,
30
- onFocus: _onFocus,
31
- onBlur: _onBlur,
29
+ optional,
30
+ hint,
32
31
  className
33
32
  } = _ref,
34
33
  props = _objectWithoutProperties(_ref, _excluded);
35
- const [isFocused, setFocused] = (0, _react.useState)(false);
34
+ const inputRef = (0, _react.useRef)(null);
35
+ (0, _react.useEffect)(() => {
36
+ if (isFocused && inputRef.current) {
37
+ inputRef.current.focus();
38
+ }
39
+ }, [isFocused]);
36
40
  return /*#__PURE__*/_react.default.createElement("div", {
37
41
  className: (0, _classnames.default)(['input', {
38
- 'input--focused': isFocused,
39
- 'js--error': error,
40
- 'input--disabled': disabled,
41
- 'input--required': required
42
+ 'js-error': error,
43
+ 'input-disabled': disabled,
44
+ 'input-optional': optional
42
45
  }, className]),
43
- onChange: onChange,
44
- onFocus: event => {
45
- setFocused(true);
46
- _onFocus && _onFocus(event);
47
- },
48
- onBlur: event => {
49
- setFocused(false);
50
- _onBlur && _onBlur(event);
51
- }
46
+ onChange: onChange
52
47
  }, label && /*#__PURE__*/_react.default.createElement("label", {
53
- className: 'input__label',
48
+ className: 'input_label',
54
49
  htmlFor: id
55
- }, label), notice && /*#__PURE__*/_react.default.createElement("p", {
56
- className: 'input__notice'
57
- }, notice), /*#__PURE__*/_react.default.createElement("textarea", _extends({
58
- className: 'input__control',
50
+ }, label), hint && /*#__PURE__*/_react.default.createElement("p", {
51
+ className: 'input_hint'
52
+ }, hint), /*#__PURE__*/_react.default.createElement("textarea", _extends({
53
+ ref: inputRef,
54
+ className: 'input_control',
59
55
  name: id,
60
56
  id: id,
61
57
  placeholder: placeholder,
62
58
  disabled: disabled,
63
- rows: 4
59
+ required: !(disabled || optional),
60
+ rows: 4,
61
+ "aria-description": hint
64
62
  }, props)));
65
63
  };
66
64
  exports.Textarea = Textarea;
@@ -69,12 +67,11 @@ Textarea.propTypes = {
69
67
  id: _propTypes.default.string,
70
68
  placeholder: _propTypes.default.string,
71
69
  label: _propTypes.default.string,
72
- notice: _propTypes.default.string,
70
+ isFocused: _propTypes.default.bool,
73
71
  error: _propTypes.default.bool,
74
72
  disabled: _propTypes.default.bool,
75
- required: _propTypes.default.bool,
76
- onFocus: _propTypes.default.func,
77
- onBlur: _propTypes.default.func,
73
+ optional: _propTypes.default.bool,
74
+ hint: _propTypes.default.string,
78
75
  className: _propTypes.default.node
79
76
  };
80
77
  Textarea.defaultProps = {
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "author": {
5
5
  "name": "arnymax"
6
6
  },
7
- "version": "0.3.0",
7
+ "version": "0.3.2",
8
8
  "private": false,
9
9
  "keywords": [
10
10
  "react",
@@ -30,7 +30,7 @@
30
30
  "@testing-library/user-event": "^13.5.0",
31
31
  "classnames": "^2.3.2",
32
32
  "eslint": "^8.48.0",
33
- "pallote-css": "^0.3.0",
33
+ "pallote-css": "^0.3.3",
34
34
  "react": "^18.2.0",
35
35
  "react-dom": "^18.2.0",
36
36
  "react-router-dom": "^6.15.0",