@gympass/yoga 7.81.3 → 7.82.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/cjs/Input/web/Input.js +52 -25
  2. package/esm/Input/web/Input.js +52 -26
  3. package/package.json +3 -3
package/cjs/Input/web/Input.js CHANGED
@@ -23,9 +23,9 @@ var _Legend = _interopRequireDefault(require("./Legend"));
23
23
 
24
24
  var _Label = _interopRequireDefault(require("./Label"));
25
25
 
26
- var _excluded = ["cleanable", "children", "disabled", "error", "full", "helper", "label", "maxLength", "readOnly", "style", "value", "onChange", "onClean", "hideMaxLength", "rightIcon", "a11yId", "includeAriaAttributes"];
26
+ var _excluded = ["cleanable", "children", "disabled", "error", "full", "helper", "label", "maxLength", "readOnly", "style", "value", "onChange", "onClean", "hideMaxLength", "rightIcon", "a11yId", "includeAriaAttributes", "leftElement"];
27
27
 
28
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
28
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
29
29
 
30
30
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
31
31
 
@@ -55,25 +55,31 @@ var IconWrapper = _styledComponents["default"].div(_templateObject3 || (_templat
55
55
  return (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: ", "px;\n\n padding-right: ", "px;\n padding-left: ", "px;\n\n height: ", "px;\n cursor: pointer;\n\n outline: none;\n\n &:hover svg,\n &:focus svg {\n fill: ", ";\n }\n\n svg {\n height: ", "px;\n width: 20px;\n fill: ", ";\n }\n\n ", "\n "])), hasIconRight ? spacing.large : 0, spacing.small, spacing.xxsmall, input.height, input.font.color.focus, input.height, input.font.color["default"], disabled ? "\n cursor: not-allowed;\n pointer-events: none;\n svg {\n fill: " + colors.text.disabled + ";\n }\n " : '');
56
56
  });
57
57
 
58
- var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, ref) {
59
- var cleanable = _ref3.cleanable,
60
- children = _ref3.children,
61
- disabled = _ref3.disabled,
62
- error = _ref3.error,
63
- full = _ref3.full,
64
- helper = _ref3.helper,
65
- label = _ref3.label,
66
- maxLength = _ref3.maxLength,
67
- readOnly = _ref3.readOnly,
68
- style = _ref3.style,
69
- value = _ref3.value,
70
- onChange = _ref3.onChange,
71
- onClean = _ref3.onClean,
72
- hideMaxLength = _ref3.hideMaxLength,
73
- rightIcon = _ref3.rightIcon,
74
- a11yId = _ref3.a11yId,
75
- includeAriaAttributes = _ref3.includeAriaAttributes,
76
- props = _objectWithoutPropertiesLoose(_ref3, _excluded);
58
+ var LeftElementWrapper = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref3) {
59
+ var spacing = _ref3.theme.yoga.spacing;
60
+ return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: ", "px;\n top: 50%;\n transform: translateY(-50%);\n "])), spacing.xxsmall);
61
+ });
62
+
63
+ var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref4, ref) {
64
+ var cleanable = _ref4.cleanable,
65
+ children = _ref4.children,
66
+ disabled = _ref4.disabled,
67
+ error = _ref4.error,
68
+ full = _ref4.full,
69
+ helper = _ref4.helper,
70
+ label = _ref4.label,
71
+ maxLength = _ref4.maxLength,
72
+ readOnly = _ref4.readOnly,
73
+ style = _ref4.style,
74
+ value = _ref4.value,
75
+ onChange = _ref4.onChange,
76
+ onClean = _ref4.onClean,
77
+ hideMaxLength = _ref4.hideMaxLength,
78
+ rightIcon = _ref4.rightIcon,
79
+ a11yId = _ref4.a11yId,
80
+ includeAriaAttributes = _ref4.includeAriaAttributes,
81
+ leftElement = _ref4.leftElement,
82
+ props = _objectWithoutPropertiesLoose(_ref4, _excluded);
77
83
 
78
84
  var inputRef = ref || (0, _react.useRef)(null);
79
85
 
@@ -103,6 +109,17 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, ref) {
103
109
  a11yFieldProps = {};
104
110
  }
105
111
 
112
+ var leftElementRef = (0, _react.useRef)(null);
113
+
114
+ var _useState = (0, _react.useState)(0),
115
+ leftElementTextIndent = _useState[0],
116
+ setLeftElementTextIndent = _useState[1];
117
+
118
+ (0, _react.useLayoutEffect)(function () {
119
+ if (leftElementRef.current) {
120
+ setLeftElementTextIndent(leftElementRef.current.offsetWidth + "px");
121
+ }
122
+ }, [leftElement]);
106
123
  return /*#__PURE__*/_react["default"].createElement(Control, {
107
124
  full: full
108
125
  }, /*#__PURE__*/_react["default"].createElement(_Fieldset["default"], {
@@ -112,7 +129,9 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, ref) {
112
129
  label: label,
113
130
  style: style,
114
131
  value: value
115
- }, !children ? /*#__PURE__*/_react["default"].createElement(_Field["default"], _extends({}, props, {
132
+ }, leftElement && /*#__PURE__*/_react["default"].createElement(LeftElementWrapper, {
133
+ ref: leftElementRef
134
+ }, leftElement), !children ? /*#__PURE__*/_react["default"].createElement(_Field["default"], _extends({}, props, {
116
135
  label: label,
117
136
  cleanable: cleanable,
118
137
  disabled: disabled,
@@ -123,7 +142,11 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, ref) {
123
142
  ref: inputRef,
124
143
  value: value,
125
144
  onChange: onChange
126
- }, a11yFieldProps)) : children, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
145
+ }, a11yFieldProps, {
146
+ style: leftElement ? {
147
+ textIndent: leftElementTextIndent
148
+ } : {}
149
+ })) : children, /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
127
150
  error: error,
128
151
  disabled: disabled
129
152
  }, labelA11yId && {
@@ -191,7 +214,10 @@ Input.propTypes = {
191
214
  a11yId: _propTypes.string,
192
215
 
193
216
  /** useful for components that extend the Input component and have their own ARIA attributes implementation (e.g. Dropdown) */
194
- includeAriaAttributes: _propTypes.bool
217
+ includeAriaAttributes: _propTypes.bool,
218
+
219
+ /** element on the left */
220
+ leftElement: _propTypes.node
195
221
  };
196
222
  Input.defaultProps = {
197
223
  className: undefined,
@@ -212,7 +238,8 @@ Input.defaultProps = {
212
238
  placeholder: undefined,
213
239
  rightIcon: undefined,
214
240
  a11yId: undefined,
215
- includeAriaAttributes: true
241
+ includeAriaAttributes: true,
242
+ leftElement: undefined
216
243
  };
217
244
  var _default = Input;
218
245
  exports["default"] = _default;
package/esm/Input/web/Input.js CHANGED
@@ -1,6 +1,6 @@
1
- var _excluded = ["cleanable", "children", "disabled", "error", "full", "helper", "label", "maxLength", "readOnly", "style", "value", "onChange", "onClean", "hideMaxLength", "rightIcon", "a11yId", "includeAriaAttributes"];
1
+ var _excluded = ["cleanable", "children", "disabled", "error", "full", "helper", "label", "maxLength", "readOnly", "style", "value", "onChange", "onClean", "hideMaxLength", "rightIcon", "a11yId", "includeAriaAttributes", "leftElement"];
2
2
 
3
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
3
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
4
4
 
5
5
  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); }
6
6
 
@@ -8,7 +8,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
8
8
 
9
9
  function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
10
10
 
11
- import React, { useRef } from 'react';
11
+ import React, { useRef, useLayoutEffect, useState } from 'react';
12
12
  import styled, { css } from 'styled-components';
13
13
  import { arrayOf, func, string, bool, number, shape, oneOfType, node } from 'prop-types';
14
14
  import { Close } from '@gympass/yoga-icons';
@@ -32,25 +32,30 @@ var IconWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemp
32
32
  input = _ref2$theme$yoga.components.input;
33
33
  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n right: ", "px;\n\n padding-right: ", "px;\n padding-left: ", "px;\n\n height: ", "px;\n cursor: pointer;\n\n outline: none;\n\n &:hover svg,\n &:focus svg {\n fill: ", ";\n }\n\n svg {\n height: ", "px;\n width: 20px;\n fill: ", ";\n }\n\n ", "\n "])), hasIconRight ? spacing.large : 0, spacing.small, spacing.xxsmall, input.height, input.font.color.focus, input.height, input.font.color["default"], disabled ? "\n cursor: not-allowed;\n pointer-events: none;\n svg {\n fill: " + colors.text.disabled + ";\n }\n " : '');
34
34
  });
35
- var Input = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
36
- var cleanable = _ref3.cleanable,
37
- children = _ref3.children,
38
- disabled = _ref3.disabled,
39
- error = _ref3.error,
40
- full = _ref3.full,
41
- helper = _ref3.helper,
42
- label = _ref3.label,
43
- maxLength = _ref3.maxLength,
44
- readOnly = _ref3.readOnly,
45
- style = _ref3.style,
46
- value = _ref3.value,
47
- onChange = _ref3.onChange,
48
- onClean = _ref3.onClean,
49
- hideMaxLength = _ref3.hideMaxLength,
50
- rightIcon = _ref3.rightIcon,
51
- a11yId = _ref3.a11yId,
52
- includeAriaAttributes = _ref3.includeAriaAttributes,
53
- props = _objectWithoutPropertiesLoose(_ref3, _excluded);
35
+ var LeftElementWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n ", "\n"])), function (_ref3) {
36
+ var spacing = _ref3.theme.yoga.spacing;
37
+ return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: ", "px;\n top: 50%;\n transform: translateY(-50%);\n "])), spacing.xxsmall);
38
+ });
39
+ var Input = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
40
+ var cleanable = _ref4.cleanable,
41
+ children = _ref4.children,
42
+ disabled = _ref4.disabled,
43
+ error = _ref4.error,
44
+ full = _ref4.full,
45
+ helper = _ref4.helper,
46
+ label = _ref4.label,
47
+ maxLength = _ref4.maxLength,
48
+ readOnly = _ref4.readOnly,
49
+ style = _ref4.style,
50
+ value = _ref4.value,
51
+ onChange = _ref4.onChange,
52
+ onClean = _ref4.onClean,
53
+ hideMaxLength = _ref4.hideMaxLength,
54
+ rightIcon = _ref4.rightIcon,
55
+ a11yId = _ref4.a11yId,
56
+ includeAriaAttributes = _ref4.includeAriaAttributes,
57
+ leftElement = _ref4.leftElement,
58
+ props = _objectWithoutPropertiesLoose(_ref4, _excluded);
54
59
 
55
60
  var inputRef = ref || useRef(null);
56
61
 
@@ -80,6 +85,17 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
80
85
  a11yFieldProps = {};
81
86
  }
82
87
 
88
+ var leftElementRef = useRef(null);
89
+
90
+ var _useState = useState(0),
91
+ leftElementTextIndent = _useState[0],
92
+ setLeftElementTextIndent = _useState[1];
93
+
94
+ useLayoutEffect(function () {
95
+ if (leftElementRef.current) {
96
+ setLeftElementTextIndent(leftElementRef.current.offsetWidth + "px");
97
+ }
98
+ }, [leftElement]);
83
99
  return /*#__PURE__*/React.createElement(Control, {
84
100
  full: full
85
101
  }, /*#__PURE__*/React.createElement(Fieldset, {
@@ -89,7 +105,9 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
89
105
  label: label,
90
106
  style: style,
91
107
  value: value
92
- }, !children ? /*#__PURE__*/React.createElement(Field, _extends({}, props, {
108
+ }, leftElement && /*#__PURE__*/React.createElement(LeftElementWrapper, {
109
+ ref: leftElementRef
110
+ }, leftElement), !children ? /*#__PURE__*/React.createElement(Field, _extends({}, props, {
93
111
  label: label,
94
112
  cleanable: cleanable,
95
113
  disabled: disabled,
@@ -100,7 +118,11 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
100
118
  ref: inputRef,
101
119
  value: value,
102
120
  onChange: onChange
103
- }, a11yFieldProps)) : children, /*#__PURE__*/React.createElement(Label, _extends({
121
+ }, a11yFieldProps, {
122
+ style: leftElement ? {
123
+ textIndent: leftElementTextIndent
124
+ } : {}
125
+ })) : children, /*#__PURE__*/React.createElement(Label, _extends({
104
126
  error: error,
105
127
  disabled: disabled
106
128
  }, labelA11yId && {
@@ -167,7 +189,10 @@ Input.propTypes = {
167
189
  a11yId: string,
168
190
 
169
191
  /** useful for components that extend the Input component and have their own ARIA attributes implementation (e.g. Dropdown) */
170
- includeAriaAttributes: bool
192
+ includeAriaAttributes: bool,
193
+
194
+ /** element on the left */
195
+ leftElement: node
171
196
  };
172
197
  Input.defaultProps = {
173
198
  className: undefined,
@@ -188,6 +213,7 @@ Input.defaultProps = {
188
213
  placeholder: undefined,
189
214
  rightIcon: undefined,
190
215
  a11yId: undefined,
191
- includeAriaAttributes: true
216
+ includeAriaAttributes: true,
217
+ leftElement: undefined
192
218
  };
193
219
  export default Input;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gympass/yoga",
3
- "version": "7.81.3",
3
+ "version": "7.82.1",
4
4
  "description": "Gympass component library",
5
5
  "main": "./cjs",
6
6
  "sideEffects": false,
@@ -27,7 +27,7 @@
27
27
  "dependencies": {
28
28
  "@gympass/yoga-common": "^1.2.0",
29
29
  "@gympass/yoga-helpers": "^1.0.3",
30
- "@gympass/yoga-icons": "^1.15.0",
30
+ "@gympass/yoga-icons": "^1.16.0",
31
31
  "@gympass/yoga-illustrations": "^0.5.1",
32
32
  "@gympass/yoga-system": "^0.11.0",
33
33
  "@gympass/yoga-tokens": "^3.2.0",
@@ -55,7 +55,7 @@
55
55
  "react-native": "0.72.3",
56
56
  "styled-components": "^4.4.0"
57
57
  },
58
- "gitHead": "e6e57da9321f8f47a3e83eb6359d5ec2dd04ce0f",
58
+ "gitHead": "d36f81a8328b12473195f27b2a6bc70f1c98b9de",
59
59
  "module": "./esm",
60
60
  "types": "./typings/index.d.ts",
61
61
  "private": false,