@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
|
@@ -472,8 +472,8 @@ var Icon = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref
|
|
|
472
472
|
}));
|
|
473
473
|
});
|
|
474
474
|
|
|
475
|
-
var css$A = ".
|
|
476
|
-
var modules_23691de0 = {"input-wrapper":"
|
|
475
|
+
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}";
|
|
476
|
+
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"};
|
|
477
477
|
n(css$A,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
|
|
478
478
|
|
|
479
479
|
var _excluded$E = ["error", "className", "name", "style", "wrapperProps", "type", "labeledBy", "prefix", "suffix", "disabled", "onFocus", "onBlur"];
|
|
@@ -2589,11 +2589,11 @@ var FormSelectorWrapper = /*#__PURE__*/React__default["default"].forwardRef(func
|
|
|
2589
2589
|
return React__default["default"].createElement("div", _extends({}, rest, {
|
|
2590
2590
|
ref: ref,
|
|
2591
2591
|
className: (error ? modules_b6c89faa['error'] : '') + " " + (disabled ? modules_b6c89faa['disabled'] : '') + " " + (className != null ? className : '')
|
|
2592
|
-
}), React__default["default"].createElement("div", _extends({}, containerProps), children), helperText && (!error || parentErrorId || !errorMessage) && React__default["default"].createElement(FormHelperText, _extends({}, helperProps, {
|
|
2592
|
+
}), React__default["default"].createElement("div", _extends({}, containerProps), children), (helperText || helperProps && helperProps.children) && (!error || parentErrorId || !errorMessage) && React__default["default"].createElement(FormHelperText, _extends({}, helperProps, {
|
|
2593
2593
|
ref: helperRef,
|
|
2594
2594
|
id: "" + identifier,
|
|
2595
2595
|
className: modules_b6c89faa['helper-text'] + " " + ((_helperProps$classNam = helperProps == null ? void 0 : helperProps.className) != null ? _helperProps$classNam : '') + " " + (error ? modules_b6c89faa['error'] : '')
|
|
2596
|
-
}), helperText), errorMessage && !parentErrorId && error && React__default["default"].createElement("span", {
|
|
2596
|
+
}), helperProps && helperProps.children || helperText), errorMessage && !parentErrorId && error && React__default["default"].createElement("span", {
|
|
2597
2597
|
className: modules_b6c89faa['error-message']
|
|
2598
2598
|
}, React__default["default"].createElement(Icon, {
|
|
2599
2599
|
className: modules_b6c89faa['error-icon'],
|
|
@@ -2932,8 +2932,8 @@ var FormControl = /*#__PURE__*/React__default["default"].forwardRef(function (_r
|
|
|
2932
2932
|
}), renderChildren());
|
|
2933
2933
|
});
|
|
2934
2934
|
|
|
2935
|
-
var css$7 = ".
|
|
2936
|
-
var modules_bc06a1ad = {"input-label":"
|
|
2935
|
+
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}";
|
|
2936
|
+
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"};
|
|
2937
2937
|
n(css$7,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
|
|
2938
2938
|
|
|
2939
2939
|
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}";
|
|
@@ -2967,7 +2967,7 @@ var FormGroup = /*#__PURE__*/React__default["default"].forwardRef(function (_ref
|
|
|
2967
2967
|
}, helperText && !error && React__default["default"].createElement(FormHelperText, _extends({}, helperProps, {
|
|
2968
2968
|
className: '',
|
|
2969
2969
|
id: helperId
|
|
2970
|
-
}), helperText), error && errorMessage && React__default["default"].createElement("span", {
|
|
2970
|
+
}), helperProps && helperProps.children || helperText), error && errorMessage && React__default["default"].createElement("span", {
|
|
2971
2971
|
className: modules_8377bc0c['error-message']
|
|
2972
2972
|
}, React__default["default"].createElement("span", {
|
|
2973
2973
|
className: modules_8377bc0c.message,
|
|
@@ -2981,8 +2981,8 @@ var FormGroup = /*#__PURE__*/React__default["default"].forwardRef(function (_ref
|
|
|
2981
2981
|
})))));
|
|
2982
2982
|
});
|
|
2983
2983
|
|
|
2984
|
-
var css$5 = ".
|
|
2985
|
-
var modules_e401a244 = {"floating-wrapper":"
|
|
2984
|
+
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}";
|
|
2985
|
+
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"};
|
|
2986
2986
|
n(css$5,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
|
|
2987
2987
|
|
|
2988
2988
|
var _excluded$8 = ["children", "className", "error", "errorMessage", "errorId", "errorMessageIcon", "errorMessageIconPosition", "helperText", "helperId", "floatingLabel", "floatingLabelActive", "required", "helperProps", "helperIndent", "labelProps", "label", "disabled", "name", "innerClassName"];
|
|
@@ -3085,7 +3085,7 @@ var useWrapper = function useWrapper(value, placeholder, type) {
|
|
|
3085
3085
|
};
|
|
3086
3086
|
};
|
|
3087
3087
|
|
|
3088
|
-
var _excluded$7 = ["type", "name", "inputProps", "helperText", "helperProps", "value", "error", "onChange", "onBlur", "onFocus"];
|
|
3088
|
+
var _excluded$7 = ["type", "name", "inputProps", "helperText", "helperProps", "value", "className", "error", "onChange", "onBlur", "onFocus"];
|
|
3089
3089
|
|
|
3090
3090
|
var useLabelOffset = function useLabelOffset(wrapper, input, floatingLabelActive, prefix) {
|
|
3091
3091
|
var _useState = React.useState({}),
|
|
@@ -3116,7 +3116,7 @@ var useLabelOffset = function useLabelOffset(wrapper, input, floatingLabelActive
|
|
|
3116
3116
|
};
|
|
3117
3117
|
|
|
3118
3118
|
var InputWrapper = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
|
3119
|
-
var _helperProps$classNam;
|
|
3119
|
+
var _helperProps$classNam, _inputProps$wrapperPr, _inputProps$wrapperPr2, _inputProps$className;
|
|
3120
3120
|
|
|
3121
3121
|
var type = _ref.type,
|
|
3122
3122
|
name = _ref.name,
|
|
@@ -3124,6 +3124,7 @@ var InputWrapper = /*#__PURE__*/React__default["default"].forwardRef(function (_
|
|
|
3124
3124
|
helperText = _ref.helperText,
|
|
3125
3125
|
helperProps = _ref.helperProps,
|
|
3126
3126
|
value = _ref.value,
|
|
3127
|
+
className = _ref.className,
|
|
3127
3128
|
error = _ref.error,
|
|
3128
3129
|
onChange = _ref.onChange,
|
|
3129
3130
|
_onBlur = _ref.onBlur,
|
|
@@ -3155,7 +3156,7 @@ var InputWrapper = /*#__PURE__*/React__default["default"].forwardRef(function (_
|
|
|
3155
3156
|
return React__default["default"].createElement(Wrapper, _extends({}, rest, {
|
|
3156
3157
|
ref: ref || wrapper,
|
|
3157
3158
|
name: name,
|
|
3158
|
-
className: modules_bc06a1ad['input-wrapper'],
|
|
3159
|
+
className: modules_bc06a1ad['input-wrapper'] + " " + (className != null ? className : ''),
|
|
3159
3160
|
labelProps: {
|
|
3160
3161
|
id: labelId,
|
|
3161
3162
|
className: labelClasses.join(' '),
|
|
@@ -3174,7 +3175,7 @@ var InputWrapper = /*#__PURE__*/React__default["default"].forwardRef(function (_
|
|
|
3174
3175
|
prefix: hasValueOrActiveFloatingLabel ? prefix : '',
|
|
3175
3176
|
suffix: hasValueOrActiveFloatingLabel ? suffix : '',
|
|
3176
3177
|
wrapperProps: {
|
|
3177
|
-
className: floatingLabelActive ? modules_bc06a1ad['floating-label-active'] : ''
|
|
3178
|
+
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 : '')
|
|
3178
3179
|
},
|
|
3179
3180
|
ref: inputProps && inputProps.ref || input,
|
|
3180
3181
|
"aria-labelledby": labelId,
|
|
@@ -3192,7 +3193,7 @@ var InputWrapper = /*#__PURE__*/React__default["default"].forwardRef(function (_
|
|
|
3192
3193
|
setHasFocus(false);
|
|
3193
3194
|
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);
|
|
3194
3195
|
},
|
|
3195
|
-
className: floatingLabelActive ? modules_bc06a1ad['floating-label'] : '',
|
|
3196
|
+
className: (floatingLabelActive ? modules_bc06a1ad['floating-label'] : '') + " " + ((_inputProps$className = inputProps == null ? void 0 : inputProps.className) != null ? _inputProps$className : ''),
|
|
3196
3197
|
name: name,
|
|
3197
3198
|
error: error,
|
|
3198
3199
|
id: name,
|
|
@@ -3250,8 +3251,8 @@ var SelectWrapper = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
|
3250
3251
|
}), children));
|
|
3251
3252
|
});
|
|
3252
3253
|
|
|
3253
|
-
var css$3 = ".
|
|
3254
|
-
var modules_3c8e9c33 = {"textarea-label":"
|
|
3254
|
+
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}";
|
|
3255
|
+
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"};
|
|
3255
3256
|
n(css$3,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
|
|
3256
3257
|
|
|
3257
3258
|
var _excluded$5 = ["name", "error", "value", "label", "placeholder", "textareaProps", "helperProps", "onChange", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "disabled"];
|