glints-aries 4.0.143 → 4.0.144

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 (7) hide show
  1. package/es/Input/PhoneNumberInput/PhoneNumberInput.d.ts +4 -2
  2. package/es/Input/PhoneNumberInput/PhoneNumberInput.js +11 -4
  3. package/es/Input/PhoneNumberInput/PhoneNumberInput.stories.js +2 -1
  4. package/lib/Input/PhoneNumberInput/PhoneNumberInput.d.ts +4 -2
  5. package/lib/Input/PhoneNumberInput/PhoneNumberInput.js +11 -4
  6. package/lib/Input/PhoneNumberInput/PhoneNumberInput.stories.js +2 -1
  7. package/package.json +1 -1
package/es/Input/PhoneNumberInput/PhoneNumberInput.d.ts CHANGED
@@ -1,8 +1,10 @@
1
- import { ReactNode } from 'react';
2
- export declare const PhoneNumberInput: ({ value, onChange, callingCodeOptions: callingCodeOptionsExternal, onInputChange, filterValue, isLoadingCallingCodeOptions, label, featuredOptionsLabel, otherOptionsLabel, callingCodeFilterInputPlaceholder, callingCodeNoOptionsLabel, error, addon, ...restProps }: Props) => JSX.Element;
1
+ import React, { ReactNode } from 'react';
2
+ export declare const PhoneNumberInput: ({ value, onChange, onFocus, onBlur, callingCodeOptions: callingCodeOptionsExternal, onInputChange, filterValue, isLoadingCallingCodeOptions, label, featuredOptionsLabel, otherOptionsLabel, callingCodeFilterInputPlaceholder, callingCodeNoOptionsLabel, error, addon, ...restProps }: Props) => JSX.Element;
3
3
  export interface Props {
4
4
  value: PhoneNumber;
5
5
  onChange: (value: PhoneNumber) => void;
6
+ onFocus?: React.FocusEventHandler<HTMLInputElement>;
7
+ onBlur?: React.FocusEventHandler<HTMLInputElement>;
6
8
  error?: ReactNode;
7
9
  addon?: ReactNode;
8
10
  callingCodeOptions: CallingCodeOption[];
package/es/Input/PhoneNumberInput/PhoneNumberInput.js CHANGED
@@ -23,6 +23,8 @@ var refErrorFix = {
23
23
  export var PhoneNumberInput = function PhoneNumberInput(_ref) {
24
24
  var value = _ref.value,
25
25
  _onChange = _ref.onChange,
26
+ onFocus = _ref.onFocus,
27
+ onBlur = _ref.onBlur,
26
28
  callingCodeOptionsExternal = _ref.callingCodeOptions,
27
29
  onInputChange = _ref.onInputChange,
28
30
  filterValue = _ref.filterValue,
@@ -34,7 +36,7 @@ export var PhoneNumberInput = function PhoneNumberInput(_ref) {
34
36
  callingCodeNoOptionsLabel = _ref.callingCodeNoOptionsLabel,
35
37
  error = _ref.error,
36
38
  addon = _ref.addon,
37
- restProps = _objectWithoutPropertiesLoose(_ref, ["value", "onChange", "callingCodeOptions", "onInputChange", "filterValue", "isLoadingCallingCodeOptions", "label", "featuredOptionsLabel", "otherOptionsLabel", "callingCodeFilterInputPlaceholder", "callingCodeNoOptionsLabel", "error", "addon"]);
39
+ restProps = _objectWithoutPropertiesLoose(_ref, ["value", "onChange", "onFocus", "onBlur", "callingCodeOptions", "onInputChange", "filterValue", "isLoadingCallingCodeOptions", "label", "featuredOptionsLabel", "otherOptionsLabel", "callingCodeFilterInputPlaceholder", "callingCodeNoOptionsLabel", "error", "addon"]);
38
40
 
39
41
  var _useState = useState(false),
40
42
  isCallingCodeInputOpen = _useState[0],
@@ -97,10 +99,11 @@ export var PhoneNumberInput = function PhoneNumberInput(_ref) {
97
99
  ref: containerRef
98
100
  }, restProps), /*#__PURE__*/React.createElement(S.TopRow, {
99
101
  "data-invalid": Boolean(error)
100
- }, /*#__PURE__*/React.createElement(S.CallingCodeInputToggle, {
102
+ }, /*#__PURE__*/React.createElement(S.CallingCodeInputToggle, _extends({}, getToggleButtonProps(), {
103
+ type: "button",
101
104
  onClick: toggleIsCallingCodeOpen,
102
105
  "data-testid": "calling-code-input-toggle"
103
- }, "+", value.callingCode, /*#__PURE__*/React.createElement(S.CallingCodeInputOpenIndicator, getToggleButtonProps(), isCallingCodeInputOpen ? /*#__PURE__*/React.createElement(ArrowDownIcon, null) : /*#__PURE__*/React.createElement(ArrowUpIcon, null))), /*#__PURE__*/React.createElement(S.SignificantNumberInput, {
106
+ }), "+", value.callingCode, /*#__PURE__*/React.createElement(S.CallingCodeInputOpenIndicator, null, isCallingCodeInputOpen ? /*#__PURE__*/React.createElement(ArrowDownIcon, null) : /*#__PURE__*/React.createElement(ArrowUpIcon, null))), /*#__PURE__*/React.createElement(S.SignificantNumberInput, {
104
107
  id: significantNumberInputId,
105
108
  "data-testid": "significant-number-input",
106
109
  type: "tel",
@@ -110,6 +113,8 @@ export var PhoneNumberInput = function PhoneNumberInput(_ref) {
110
113
  significantNumber: e.target.value
111
114
  }));
112
115
  },
116
+ onFocus: onFocus,
117
+ onBlur: onBlur,
113
118
  placeholder: label,
114
119
  "data-invalid": Boolean(error),
115
120
  "aria-label": label
@@ -125,7 +130,9 @@ export var PhoneNumberInput = function PhoneNumberInput(_ref) {
125
130
  placeholder: callingCodeFilterInputPlaceholder
126
131
  }, _objectSpread({}, refErrorFix)), {
127
132
  ref: callingCodeFilterInputRef,
128
- "data-testid": "calling-code-filter-input"
133
+ "data-testid": "calling-code-filter-input",
134
+ onFocus: onFocus,
135
+ onBlur: onBlur
129
136
  })), isLoadingCallingCodeOptions && /*#__PURE__*/React.createElement(S.CallingCodeInputLoading, {
130
137
  "data-testid": "calling-code-options-loading"
131
138
  })), /*#__PURE__*/React.createElement(S.CallingCodeOptionsList, getMenuProps(), callingCodeOptions.length > 0 ? callingCodeOptions.map(function (item, index) {
package/es/Input/PhoneNumberInput/PhoneNumberInput.stories.js CHANGED
@@ -105,7 +105,8 @@ var Template = function Template(args) {
105
105
  error: error
106
106
  }, args, {
107
107
  onChange: setValue,
108
- onInputChange: setFilterInput
108
+ onInputChange: setFilterInput,
109
+ onBlur: console.log
109
110
  })));
110
111
  };
111
112
 
package/lib/Input/PhoneNumberInput/PhoneNumberInput.d.ts CHANGED
@@ -1,8 +1,10 @@
1
- import { ReactNode } from 'react';
2
- export declare const PhoneNumberInput: ({ value, onChange, callingCodeOptions: callingCodeOptionsExternal, onInputChange, filterValue, isLoadingCallingCodeOptions, label, featuredOptionsLabel, otherOptionsLabel, callingCodeFilterInputPlaceholder, callingCodeNoOptionsLabel, error, addon, ...restProps }: Props) => JSX.Element;
1
+ import React, { ReactNode } from 'react';
2
+ export declare const PhoneNumberInput: ({ value, onChange, onFocus, onBlur, callingCodeOptions: callingCodeOptionsExternal, onInputChange, filterValue, isLoadingCallingCodeOptions, label, featuredOptionsLabel, otherOptionsLabel, callingCodeFilterInputPlaceholder, callingCodeNoOptionsLabel, error, addon, ...restProps }: Props) => JSX.Element;
3
3
  export interface Props {
4
4
  value: PhoneNumber;
5
5
  onChange: (value: PhoneNumber) => void;
6
+ onFocus?: React.FocusEventHandler<HTMLInputElement>;
7
+ onBlur?: React.FocusEventHandler<HTMLInputElement>;
6
8
  error?: ReactNode;
7
9
  addon?: ReactNode;
8
10
  callingCodeOptions: CallingCodeOption[];
package/lib/Input/PhoneNumberInput/PhoneNumberInput.js CHANGED
@@ -42,6 +42,8 @@ var refErrorFix = {
42
42
  var PhoneNumberInput = function PhoneNumberInput(_ref) {
43
43
  var value = _ref.value,
44
44
  _onChange = _ref.onChange,
45
+ onFocus = _ref.onFocus,
46
+ onBlur = _ref.onBlur,
45
47
  callingCodeOptionsExternal = _ref.callingCodeOptions,
46
48
  onInputChange = _ref.onInputChange,
47
49
  filterValue = _ref.filterValue,
@@ -53,7 +55,7 @@ var PhoneNumberInput = function PhoneNumberInput(_ref) {
53
55
  callingCodeNoOptionsLabel = _ref.callingCodeNoOptionsLabel,
54
56
  error = _ref.error,
55
57
  addon = _ref.addon,
56
- restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["value", "onChange", "callingCodeOptions", "onInputChange", "filterValue", "isLoadingCallingCodeOptions", "label", "featuredOptionsLabel", "otherOptionsLabel", "callingCodeFilterInputPlaceholder", "callingCodeNoOptionsLabel", "error", "addon"]);
58
+ restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["value", "onChange", "onFocus", "onBlur", "callingCodeOptions", "onInputChange", "filterValue", "isLoadingCallingCodeOptions", "label", "featuredOptionsLabel", "otherOptionsLabel", "callingCodeFilterInputPlaceholder", "callingCodeNoOptionsLabel", "error", "addon"]);
57
59
 
58
60
  var _useState = (0, _react.useState)(false),
59
61
  isCallingCodeInputOpen = _useState[0],
@@ -116,10 +118,11 @@ var PhoneNumberInput = function PhoneNumberInput(_ref) {
116
118
  ref: containerRef
117
119
  }, restProps), /*#__PURE__*/_react["default"].createElement(S.TopRow, {
118
120
  "data-invalid": Boolean(error)
119
- }, /*#__PURE__*/_react["default"].createElement(S.CallingCodeInputToggle, {
121
+ }, /*#__PURE__*/_react["default"].createElement(S.CallingCodeInputToggle, (0, _extends2["default"])({}, getToggleButtonProps(), {
122
+ type: "button",
120
123
  onClick: toggleIsCallingCodeOpen,
121
124
  "data-testid": "calling-code-input-toggle"
122
- }, "+", value.callingCode, /*#__PURE__*/_react["default"].createElement(S.CallingCodeInputOpenIndicator, getToggleButtonProps(), isCallingCodeInputOpen ? /*#__PURE__*/_react["default"].createElement(_.ArrowDownIcon, null) : /*#__PURE__*/_react["default"].createElement(_.ArrowUpIcon, null))), /*#__PURE__*/_react["default"].createElement(S.SignificantNumberInput, {
125
+ }), "+", value.callingCode, /*#__PURE__*/_react["default"].createElement(S.CallingCodeInputOpenIndicator, null, isCallingCodeInputOpen ? /*#__PURE__*/_react["default"].createElement(_.ArrowDownIcon, null) : /*#__PURE__*/_react["default"].createElement(_.ArrowUpIcon, null))), /*#__PURE__*/_react["default"].createElement(S.SignificantNumberInput, {
123
126
  id: significantNumberInputId,
124
127
  "data-testid": "significant-number-input",
125
128
  type: "tel",
@@ -129,6 +132,8 @@ var PhoneNumberInput = function PhoneNumberInput(_ref) {
129
132
  significantNumber: e.target.value
130
133
  }));
131
134
  },
135
+ onFocus: onFocus,
136
+ onBlur: onBlur,
132
137
  placeholder: label,
133
138
  "data-invalid": Boolean(error),
134
139
  "aria-label": label
@@ -144,7 +149,9 @@ var PhoneNumberInput = function PhoneNumberInput(_ref) {
144
149
  placeholder: callingCodeFilterInputPlaceholder
145
150
  }, _objectSpread({}, refErrorFix)), {
146
151
  ref: callingCodeFilterInputRef,
147
- "data-testid": "calling-code-filter-input"
152
+ "data-testid": "calling-code-filter-input",
153
+ onFocus: onFocus,
154
+ onBlur: onBlur
148
155
  })), isLoadingCallingCodeOptions && /*#__PURE__*/_react["default"].createElement(S.CallingCodeInputLoading, {
149
156
  "data-testid": "calling-code-options-loading"
150
157
  })), /*#__PURE__*/_react["default"].createElement(S.CallingCodeOptionsList, getMenuProps(), callingCodeOptions.length > 0 ? callingCodeOptions.map(function (item, index) {
package/lib/Input/PhoneNumberInput/PhoneNumberInput.stories.js CHANGED
@@ -120,7 +120,8 @@ var Template = function Template(args) {
120
120
  error: error
121
121
  }, args, {
122
122
  onChange: setValue,
123
- onInputChange: setFilterInput
123
+ onInputChange: setFilterInput,
124
+ onBlur: console.log
124
125
  })));
125
126
  };
126
127
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "glints-aries",
3
- "version": "4.0.143",
3
+ "version": "4.0.144",
4
4
  "description": "Glints ui-kit for frontend",
5
5
  "main": "./lib/index.js",
6
6
  "module": "./es/index.js",