@onewelcome/react-lib-components 0.1.2-alpha → 0.1.3-alpha
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.
- package/dist/react-lib-components.cjs.development.js +17 -16
- package/dist/react-lib-components.cjs.development.js.map +1 -1
- package/dist/react-lib-components.cjs.production.min.js +1 -1
- package/dist/react-lib-components.cjs.production.min.js.map +1 -1
- package/dist/react-lib-components.esm.js +17 -16
- package/dist/react-lib-components.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/Form/FormGroup/FormGroup.tsx +1 -1
- package/src/Form/FormSelectorWrapper/FormSelectorWrapper.tsx +13 -12
- package/src/Form/Input/Input.module.scss +1 -0
- package/src/Form/Wrapper/InputWrapper/InputWrapper.module.scss +6 -1
- package/src/Form/Wrapper/InputWrapper/InputWrapper.tsx +10 -3
- package/src/Form/Wrapper/TextareaWrapper/TextareaWrapper.module.scss +2 -2
- package/src/Form/Wrapper/Wrapper/Wrapper.module.scss +1 -1
|
@@ -464,8 +464,8 @@ var Icon = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
464
464
|
}));
|
|
465
465
|
});
|
|
466
466
|
|
|
467
|
-
var css$A = ".
|
|
468
|
-
var modules_23691de0 = {"input-wrapper":"
|
|
467
|
+
var css$A = ".Input_module_inputWrapper__ca7df3b0 {\n position: relative;\n display: flex;\n align-items: center;\n padding: 0 1.25rem;\n background-color: var(--input-background-color);\n border-color: var(--input-border-color);\n border-style: var(--input-border-style);\n border-width: var(--input-border-width);\n border-radius: var(--input-border-radius);\n transition: all 0.2s ease-in-out;\n}\n.Input_module_inputWrapper__ca7df3b0:hover:not(:disabled) {\n border-color: var(--default);\n}\n.Input_module_inputWrapper__ca7df3b0.Input_module_disabled__ca7df3b0, .Input_module_inputWrapper__ca7df3b0.Input_module_disabled__ca7df3b0 input {\n background-color: var(--disabled);\n border-color: #fff;\n cursor: not-allowed;\n}\n.Input_module_inputWrapper__ca7df3b0.Input_module_error__ca7df3b0 {\n border-color: var(--error);\n}\n.Input_module_inputWrapper__ca7df3b0.Input_module_focus__ca7df3b0 {\n border-color: var(--color-primary);\n}\n\n.Input_module_input__ca7df3b0 {\n height: 4rem;\n border: 0;\n color: var(--greyed-out);\n font-size: var(--font-size);\n font-family: var(--font-family);\n width: 100%;\n box-sizing: border-box;\n padding: 0;\n}\n.Input_module_input__ca7df3b0:focus:not(:disabled) {\n outline: none;\n border-color: var(--color-primary);\n}\n\n.Input_module_error__ca7df3b0 input {\n color: var(--error);\n padding-right: 3.75rem;\n}\n.Input_module_error__ca7df3b0 input.Input_module_removeExtraIndent__ca7df3b0 {\n padding-right: 1.25rem;\n}\n\n.Input_module_warning__ca7df3b0 {\n color: var(--error);\n position: absolute;\n height: 100%;\n width: 1.25rem;\n right: 1.25rem;\n top: 0px;\n font-size: 1.125rem;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.Input_module_warning__ca7df3b0:before {\n height: 1.3125rem;\n}\n.Input_module_warning__ca7df3b0.Input_module_extraIndent__ca7df3b0 {\n right: 3.75rem;\n}\n\n.Input_module_inputWrapper__ca7df3b0 [data-prefix],\n.Input_module_inputWrapper__ca7df3b0 [data-suffix] {\n transition: all 0.2s ease-in-out;\n display: block;\n z-index: 1;\n}";
|
|
468
|
+
var modules_23691de0 = {"input-wrapper":"Input_module_inputWrapper__ca7df3b0","disabled":"Input_module_disabled__ca7df3b0","error":"Input_module_error__ca7df3b0","focus":"Input_module_focus__ca7df3b0","input":"Input_module_input__ca7df3b0","remove-extra-indent":"Input_module_removeExtraIndent__ca7df3b0","warning":"Input_module_warning__ca7df3b0","extra-indent":"Input_module_extraIndent__ca7df3b0"};
|
|
469
469
|
n(css$A,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
|
|
470
470
|
|
|
471
471
|
var _excluded$E = ["error", "className", "name", "style", "wrapperProps", "type", "labeledBy", "prefix", "suffix", "disabled", "onFocus", "onBlur"];
|
|
@@ -2581,11 +2581,11 @@ var FormSelectorWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
2581
2581
|
return React.createElement("div", _extends({}, rest, {
|
|
2582
2582
|
ref: ref,
|
|
2583
2583
|
className: (error ? modules_b6c89faa['error'] : '') + " " + (disabled ? modules_b6c89faa['disabled'] : '') + " " + (className != null ? className : '')
|
|
2584
|
-
}), React.createElement("div", _extends({}, containerProps), children), helperText && (!error || parentErrorId || !errorMessage) && React.createElement(FormHelperText, _extends({}, helperProps, {
|
|
2584
|
+
}), React.createElement("div", _extends({}, containerProps), children), (helperText || helperProps && helperProps.children) && (!error || parentErrorId || !errorMessage) && React.createElement(FormHelperText, _extends({}, helperProps, {
|
|
2585
2585
|
ref: helperRef,
|
|
2586
2586
|
id: "" + identifier,
|
|
2587
2587
|
className: modules_b6c89faa['helper-text'] + " " + ((_helperProps$classNam = helperProps == null ? void 0 : helperProps.className) != null ? _helperProps$classNam : '') + " " + (error ? modules_b6c89faa['error'] : '')
|
|
2588
|
-
}), helperText), errorMessage && !parentErrorId && error && React.createElement("span", {
|
|
2588
|
+
}), helperProps && helperProps.children || helperText), errorMessage && !parentErrorId && error && React.createElement("span", {
|
|
2589
2589
|
className: modules_b6c89faa['error-message']
|
|
2590
2590
|
}, React.createElement(Icon, {
|
|
2591
2591
|
className: modules_b6c89faa['error-icon'],
|
|
@@ -2924,8 +2924,8 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
2924
2924
|
}), renderChildren());
|
|
2925
2925
|
});
|
|
2926
2926
|
|
|
2927
|
-
var css$7 = ".
|
|
2928
|
-
var modules_bc06a1ad = {"input-label":"
|
|
2927
|
+
var css$7 = ".InputWrapper_module_inputLabel__eae3fa5c {\n left: calc(1.25rem + 2px);\n}\n.InputWrapper_module_inputLabel__eae3fa5c.InputWrapper_module_focus__eae3fa5c {\n color: var(--color-primary);\n}\n\ninput.InputWrapper_module_floatingLabel__eae3fa5c {\n padding-top: 0.625rem;\n}\n\n.InputWrapper_module_inputWrapperHelper__eae3fa5c {\n margin-top: 0.25rem;\n}\n\n.InputWrapper_module_inputWrapper__eae3fa5c [data-icon]:before {\n transition: 0.2s ease-in-out;\n transform: translateY(0px);\n font-size: 1.125rem;\n}\n\n.InputWrapper_module_inputWrapper__eae3fa5c .InputWrapper_module_floatingLabelActive__eae3fa5c [data-icon]:before {\n transform: translateY(5px);\n}\n\n.InputWrapper_module_inputWrapper__eae3fa5c [data-prefix],\n.InputWrapper_module_inputWrapper__eae3fa5c [data-suffix] {\n transform: translateY(-0.125rem);\n}\n\n.InputWrapper_module_floatingLabelActive__eae3fa5c [data-prefix],\n.InputWrapper_module_floatingLabelActive__eae3fa5c [data-suffix] {\n padding-top: 0.5rem;\n transform: translateY(0);\n}";
|
|
2928
|
+
var modules_bc06a1ad = {"input-label":"InputWrapper_module_inputLabel__eae3fa5c","focus":"InputWrapper_module_focus__eae3fa5c","floating-label":"InputWrapper_module_floatingLabel__eae3fa5c","input-wrapper-helper":"InputWrapper_module_inputWrapperHelper__eae3fa5c","input-wrapper":"InputWrapper_module_inputWrapper__eae3fa5c","floating-label-active":"InputWrapper_module_floatingLabelActive__eae3fa5c"};
|
|
2929
2929
|
n(css$7,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
|
|
2930
2930
|
|
|
2931
2931
|
var css$6 = ".FormGroup_module_formGroup__65001d8c {\n position: relative;\n}\n\n.FormGroup_module_error__65001d8c {\n color: var(--error);\n}\n\n.FormGroup_module_errorMessage__65001d8c {\n display: flex;\n align-items: flex-end;\n}\n\n.FormGroup_module_errorIcon__65001d8c {\n margin-right: 0.5rem;\n font-size: 1.25rem;\n}\n.FormGroup_module_errorIconBefore__65001d8c {\n margin-right: 0.5rem;\n}\n.FormGroup_module_errorIconAfter__65001d8c {\n margin-left: 0.5rem;\n}\n\n.FormGroup_module_defaultHelper__65001d8c {\n font-size: 0.75rem;\n}";
|
|
@@ -2959,7 +2959,7 @@ var FormGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
2959
2959
|
}, helperText && !error && React.createElement(FormHelperText, _extends({}, helperProps, {
|
|
2960
2960
|
className: '',
|
|
2961
2961
|
id: helperId
|
|
2962
|
-
}), helperText), error && errorMessage && React.createElement("span", {
|
|
2962
|
+
}), helperProps && helperProps.children || helperText), error && errorMessage && React.createElement("span", {
|
|
2963
2963
|
className: modules_8377bc0c['error-message']
|
|
2964
2964
|
}, React.createElement("span", {
|
|
2965
2965
|
className: modules_8377bc0c.message,
|
|
@@ -2973,8 +2973,8 @@ var FormGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
2973
2973
|
})))));
|
|
2974
2974
|
});
|
|
2975
2975
|
|
|
2976
|
-
var css$5 = ".
|
|
2977
|
-
var modules_e401a244 = {"floating-wrapper":"
|
|
2976
|
+
var css$5 = ".Wrapper_module_floatingWrapper__0b897a43 {\n position: relative;\n}\n\n.Wrapper_module_floatingLabel__0b897a43 {\n font-size: 1rem;\n position: absolute;\n z-index: 1;\n top: 1.3125rem;\n left: 1.35rem;\n transform-origin: left top;\n transition: all 0.2s ease-in-out;\n pointer-events: none;\n}\n.Wrapper_module_floatingLabel__0b897a43.Wrapper_module_floatingLabelActive__0b897a43 {\n font-size: 0.75rem;\n transform: translateY(-0.75rem);\n color: var(--default);\n}\n.Wrapper_module_floatingLabel__0b897a43.Wrapper_module_error__0b897a43 {\n color: var(--error);\n}\n\n.Wrapper_module_wrapper__0b897a43 + fieldset,\n.Wrapper_module_wrapper__0b897a43 + .Wrapper_module_wrapper__0b897a43 {\n margin-top: 1rem;\n}\n\n.Wrapper_module_required__0b897a43:after {\n content: \" *\";\n}";
|
|
2977
|
+
var modules_e401a244 = {"floating-wrapper":"Wrapper_module_floatingWrapper__0b897a43","floating-label":"Wrapper_module_floatingLabel__0b897a43","floating-label-active":"Wrapper_module_floatingLabelActive__0b897a43","error":"Wrapper_module_error__0b897a43","wrapper":"Wrapper_module_wrapper__0b897a43","required":"Wrapper_module_required__0b897a43"};
|
|
2978
2978
|
n(css$5,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
|
|
2979
2979
|
|
|
2980
2980
|
var _excluded$8 = ["children", "className", "error", "errorMessage", "errorId", "errorMessageIcon", "errorMessageIconPosition", "helperText", "helperId", "floatingLabel", "floatingLabelActive", "required", "helperProps", "helperIndent", "labelProps", "label", "disabled", "name", "innerClassName"];
|
|
@@ -3077,7 +3077,7 @@ var useWrapper = function useWrapper(value, placeholder, type) {
|
|
|
3077
3077
|
};
|
|
3078
3078
|
};
|
|
3079
3079
|
|
|
3080
|
-
var _excluded$7 = ["type", "name", "inputProps", "helperText", "helperProps", "value", "error", "onChange", "onBlur", "onFocus"];
|
|
3080
|
+
var _excluded$7 = ["type", "name", "inputProps", "helperText", "helperProps", "value", "className", "error", "onChange", "onBlur", "onFocus"];
|
|
3081
3081
|
|
|
3082
3082
|
var useLabelOffset = function useLabelOffset(wrapper, input, floatingLabelActive, prefix) {
|
|
3083
3083
|
var _useState = useState({}),
|
|
@@ -3108,7 +3108,7 @@ var useLabelOffset = function useLabelOffset(wrapper, input, floatingLabelActive
|
|
|
3108
3108
|
};
|
|
3109
3109
|
|
|
3110
3110
|
var InputWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
3111
|
-
var _helperProps$classNam;
|
|
3111
|
+
var _helperProps$classNam, _inputProps$wrapperPr, _inputProps$wrapperPr2, _inputProps$className;
|
|
3112
3112
|
|
|
3113
3113
|
var type = _ref.type,
|
|
3114
3114
|
name = _ref.name,
|
|
@@ -3116,6 +3116,7 @@ var InputWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3116
3116
|
helperText = _ref.helperText,
|
|
3117
3117
|
helperProps = _ref.helperProps,
|
|
3118
3118
|
value = _ref.value,
|
|
3119
|
+
className = _ref.className,
|
|
3119
3120
|
error = _ref.error,
|
|
3120
3121
|
onChange = _ref.onChange,
|
|
3121
3122
|
_onBlur = _ref.onBlur,
|
|
@@ -3147,7 +3148,7 @@ var InputWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3147
3148
|
return React.createElement(Wrapper, _extends({}, rest, {
|
|
3148
3149
|
ref: ref || wrapper,
|
|
3149
3150
|
name: name,
|
|
3150
|
-
className: modules_bc06a1ad['input-wrapper'],
|
|
3151
|
+
className: modules_bc06a1ad['input-wrapper'] + " " + (className != null ? className : ''),
|
|
3151
3152
|
labelProps: {
|
|
3152
3153
|
id: labelId,
|
|
3153
3154
|
className: labelClasses.join(' '),
|
|
@@ -3166,7 +3167,7 @@ var InputWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3166
3167
|
prefix: hasValueOrActiveFloatingLabel ? prefix : '',
|
|
3167
3168
|
suffix: hasValueOrActiveFloatingLabel ? suffix : '',
|
|
3168
3169
|
wrapperProps: {
|
|
3169
|
-
className: floatingLabelActive ? modules_bc06a1ad['floating-label-active'] : ''
|
|
3170
|
+
className: (floatingLabelActive ? modules_bc06a1ad['floating-label-active'] : '') + " " + ((_inputProps$wrapperPr = inputProps == null ? void 0 : (_inputProps$wrapperPr2 = inputProps.wrapperProps) == null ? void 0 : _inputProps$wrapperPr2.className) != null ? _inputProps$wrapperPr : '')
|
|
3170
3171
|
},
|
|
3171
3172
|
ref: inputProps && inputProps.ref || input,
|
|
3172
3173
|
"aria-labelledby": labelId,
|
|
@@ -3184,7 +3185,7 @@ var InputWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3184
3185
|
setHasFocus(false);
|
|
3185
3186
|
e.target.value || e.target.placeholder || inputProps != null && (_inputProps$placehold = inputProps.placeholder) != null && _inputProps$placehold.length || type === 'datetime-local' || type === 'time' ? setFloatingLabelActive(true) : setFloatingLabelActive(false);
|
|
3186
3187
|
},
|
|
3187
|
-
className: floatingLabelActive ? modules_bc06a1ad['floating-label'] : '',
|
|
3188
|
+
className: (floatingLabelActive ? modules_bc06a1ad['floating-label'] : '') + " " + ((_inputProps$className = inputProps == null ? void 0 : inputProps.className) != null ? _inputProps$className : ''),
|
|
3188
3189
|
name: name,
|
|
3189
3190
|
error: error,
|
|
3190
3191
|
id: name,
|
|
@@ -3242,8 +3243,8 @@ var SelectWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3242
3243
|
}), children));
|
|
3243
3244
|
});
|
|
3244
3245
|
|
|
3245
|
-
var css$3 = ".
|
|
3246
|
-
var modules_3c8e9c33 = {"textarea-label":"
|
|
3246
|
+
var css$3 = ".TextareaWrapper_module_textareaLabel__453887a8 {\n left: calc(1.25rem + 1px);\n}\n.TextareaWrapper_module_textareaLabel__453887a8.TextareaWrapper_module_focus__453887a8 {\n color: var(--color-primary);\n}\n\n.TextareaWrapper_module_textarea__453887a8 {\n padding-top: 1.625rem;\n}\n.TextareaWrapper_module_textarea__453887a8:active:not(:disabled) {\n border-color: var(--color-primary);\n}\n.TextareaWrapper_module_textarea__453887a8:hover:not(:disabled) {\n border-color: var(--default);\n}\n.TextareaWrapper_module_textarea__453887a8:focus:not(:disabled) {\n outline: none;\n}\n\n.TextareaWrapper_module_textareaHelperText__453887a8 {\n margin-top: 0.25rem;\n margin-left: 1.25rem;\n}\n\n.TextareaWrapper_module_textareaWrapper__453887a8 {\n padding-top: 1.75rem;\n padding-right: 3.75rem;\n padding-bottom: 0.75rem;\n border-color: var(--input-border-color);\n border-style: var(--input-border-style);\n border-width: var(--input-border-width);\n border-radius: var(--input-border-radius);\n}\n.TextareaWrapper_module_textareaWrapper__453887a8.TextareaWrapper_module_error__453887a8 {\n border-color: var(--error);\n}\n.TextareaWrapper_module_textareaWrapper__453887a8.TextareaWrapper_module_hover__453887a8 {\n border-color: var(--default);\n}\n.TextareaWrapper_module_textareaWrapper__453887a8.TextareaWrapper_module_focus__453887a8 {\n border-color: var(--color-primary);\n}\n.TextareaWrapper_module_textareaWrapper__453887a8.TextareaWrapper_module_disabled__453887a8 {\n color: var(--greyed-out);\n background-color: var(--disabled);\n border-color: #fff;\n cursor: not-allowed;\n}\n\n.TextareaWrapper_module_errorIcon__453887a8 {\n top: 1.75rem;\n}";
|
|
3247
|
+
var modules_3c8e9c33 = {"textarea-label":"TextareaWrapper_module_textareaLabel__453887a8","focus":"TextareaWrapper_module_focus__453887a8","textarea":"TextareaWrapper_module_textarea__453887a8","textarea-helper-text":"TextareaWrapper_module_textareaHelperText__453887a8","textarea-wrapper":"TextareaWrapper_module_textareaWrapper__453887a8","error":"TextareaWrapper_module_error__453887a8","hover":"TextareaWrapper_module_hover__453887a8","disabled":"TextareaWrapper_module_disabled__453887a8","error-icon":"TextareaWrapper_module_errorIcon__453887a8"};
|
|
3247
3248
|
n(css$3,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
|
|
3248
3249
|
|
|
3249
3250
|
var _excluded$5 = ["name", "error", "value", "label", "placeholder", "textareaProps", "helperProps", "onChange", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "disabled"];
|