@onewelcome/react-lib-components 0.2.6 → 0.3.0
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 +19 -12
- 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 +19 -12
- package/dist/react-lib-components.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/Form/Input/Input.module.scss +1 -0
- package/src/Form/Wrapper/InputWrapper/InputWrapper.module.scss +18 -11
- package/src/Form/Wrapper/InputWrapper/InputWrapper.test.tsx +20 -0
- package/src/Form/Wrapper/InputWrapper/InputWrapper.tsx +10 -4
- package/src/Form/Wrapper/Wrapper/Wrapper.module.scss +4 -0
- package/src/Form/Wrapper/Wrapper/Wrapper.tsx +2 -1
|
@@ -1671,8 +1671,8 @@ var css$C = ".Pagination_module_paginationWrapper__fb0017ac {\n font-family: va
|
|
|
1671
1671
|
var modules_e3c5bce1 = {"pagination-wrapper":"Pagination_module_paginationWrapper__fb0017ac","form-element":"Pagination_module_formElement__fb0017ac","total":"Pagination_module_total__fb0017ac","pagination":"Pagination_module_pagination__fb0017ac","previous":"Pagination_module_previous__fb0017ac","next":"Pagination_module_next__fb0017ac","per-page":"Pagination_module_perPage__fb0017ac","page":"Pagination_module_page__fb0017ac","page-size-select":"Pagination_module_pageSizeSelect__fb0017ac","current-value-input":"Pagination_module_currentValueInput__fb0017ac"};
|
|
1672
1672
|
n(css$C,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
|
|
1673
1673
|
|
|
1674
|
-
var css$B = ".
|
|
1675
|
-
var modules_23691de0 = {"sr-only":"
|
|
1674
|
+
var css$B = ".Input_module_srOnly__b0539019 {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n.Input_module_hidden__b0539019 {\n display: none;\n}\n\n.Input_module_slideIn__b0539019 {\n animation: Input_module_slideIn__b0539019 0.5s forwards;\n}\n\n.Input_module_slideOut__b0539019 {\n animation: Input_module_slideOut__b0539019 0.5s forwards;\n}\n\n@keyframes Input_module_slideIn__b0539019 {\n 0% {\n transform: translateY(100vh);\n }\n 100% {\n transform: translateY(0%);\n }\n}\n@keyframes Input_module_slideOut__b0539019 {\n 0% {\n transform: translateY(0%);\n }\n 100% {\n transform: translateY(100vh);\n }\n}\n.Input_module_inputWrapper__b0539019 {\n position: relative;\n display: flex;\n align-items: center;\n height: 4rem;\n border: 0;\n border-radius: var(--input-border-radius);\n background-color: var(--input-background-color);\n padding: 0 1.25rem;\n transition: all 0.2s ease-in-out;\n}\n.Input_module_inputWrapper__b0539019:hover .Input_module_outline__b0539019 {\n border-color: var(--default);\n}\n.Input_module_inputWrapper__b0539019 .Input_module_outline__b0539019.Input_module_disabled__b0539019 {\n border-color: #fff;\n}\n.Input_module_inputWrapper__b0539019 .Input_module_outline__b0539019.Input_module_error__b0539019 {\n border-color: var(--error);\n}\n.Input_module_inputWrapper__b0539019 .Input_module_outline__b0539019.Input_module_focus__b0539019 {\n border-width: var(--input-border-width-focus);\n}\n.Input_module_inputWrapper__b0539019 .Input_module_outline__b0539019.Input_module_focus__b0539019:not(.Input_module_error__b0539019) {\n border-color: var(--color-primary);\n}\n\n.Input_module_input__b0539019 {\n padding: 0;\n height: 4rem;\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 border: 0;\n border-radius: var(--input-border-radius);\n transition: all 0.2s ease-in-out;\n}\n.Input_module_input__b0539019:disabled {\n background-color: var(--disabled);\n cursor: not-allowed;\n}\n.Input_module_input__b0539019:focus:not(:disabled) {\n outline: none;\n}\n\n.Input_module_outline__b0539019 {\n pointer-events: none;\n position: absolute;\n margin: 0;\n padding: 0;\n inset: 0;\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\n.Input_module_error__b0539019 input {\n color: var(--error);\n padding-right: 3.5rem;\n}\n.Input_module_error__b0539019 input.Input_module_removeExtraIndent__b0539019 {\n padding-right: 0rem;\n}\n\n.Input_module_warning__b0539019 {\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__b0539019:before {\n height: 1.3125rem;\n}\n.Input_module_warning__b0539019.Input_module_extraIndent__b0539019 {\n right: 3.75rem;\n}\n\n.Input_module_inputWrapper__b0539019 [data-prefix],\n.Input_module_inputWrapper__b0539019 [data-suffix] {\n transition: all 0.2s ease-in-out;\n display: block;\n z-index: 1;\n}";
|
|
1675
|
+
var modules_23691de0 = {"sr-only":"Input_module_srOnly__b0539019","hidden":"Input_module_hidden__b0539019","slide-in":"Input_module_slideIn__b0539019","slide-out":"Input_module_slideOut__b0539019","input-wrapper":"Input_module_inputWrapper__b0539019","outline":"Input_module_outline__b0539019","disabled":"Input_module_disabled__b0539019","error":"Input_module_error__b0539019","focus":"Input_module_focus__b0539019","input":"Input_module_input__b0539019","remove-extra-indent":"Input_module_removeExtraIndent__b0539019","warning":"Input_module_warning__b0539019","extra-indent":"Input_module_extraIndent__b0539019"};
|
|
1676
1676
|
n(css$B,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
|
|
1677
1677
|
|
|
1678
1678
|
var _excluded$F = ["error", "className", "name", "style", "wrapperProps", "type", "labeledBy", "prefix", "suffix", "disabled", "onFocus", "onBlur"];
|
|
@@ -3672,8 +3672,8 @@ var FormControl = /*#__PURE__*/React__default["default"].forwardRef(function (_r
|
|
|
3672
3672
|
}), renderChildren());
|
|
3673
3673
|
});
|
|
3674
3674
|
|
|
3675
|
-
var css$g = ".
|
|
3676
|
-
var modules_bc06a1ad = {"sr-only":"
|
|
3675
|
+
var css$g = ".InputWrapper_module_srOnly__080e0af7 {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n.InputWrapper_module_hidden__080e0af7 {\n display: none;\n}\n\n.InputWrapper_module_slideIn__080e0af7 {\n animation: InputWrapper_module_slideIn__080e0af7 0.5s forwards;\n}\n\n.InputWrapper_module_slideOut__080e0af7 {\n animation: InputWrapper_module_slideOut__080e0af7 0.5s forwards;\n}\n\n@keyframes InputWrapper_module_slideIn__080e0af7 {\n 0% {\n transform: translateY(100vh);\n }\n 100% {\n transform: translateY(0%);\n }\n}\n@keyframes InputWrapper_module_slideOut__080e0af7 {\n 0% {\n transform: translateY(0%);\n }\n 100% {\n transform: translateY(100vh);\n }\n}\nlabel.InputWrapper_module_inputLabel__080e0af7.InputWrapper_module_focus__080e0af7 {\n color: var(--color-primary);\n}\n\ninput.InputWrapper_module_floatingLabel__080e0af7 {\n padding-top: 0.625rem;\n}\n\n.InputWrapper_module_inputWrapperHelper__080e0af7 {\n margin-top: 0.25rem;\n}\n\n.InputWrapper_module_inputWrapper__080e0af7 [data-icon]:before {\n transition: 0.2s ease-in-out;\n transform: translateY(0px);\n font-size: 1.125rem;\n}\n.InputWrapper_module_inputWrapper__080e0af7 .InputWrapper_module_floatingLabelActive__080e0af7 [data-icon]:before {\n transform: translateY(5px);\n}\n.InputWrapper_module_inputWrapper__080e0af7 [data-prefix],\n.InputWrapper_module_inputWrapper__080e0af7 [data-suffix] {\n transform: translateY(-0.125rem);\n}\n.InputWrapper_module_inputWrapper__080e0af7 .InputWrapper_module_disabled__080e0af7 {\n background-color: var(--disabled);\n cursor: not-allowed;\n}\n\n.InputWrapper_module_floatingLabelActive__080e0af7 [data-prefix],\n.InputWrapper_module_floatingLabelActive__080e0af7 [data-suffix] {\n padding-top: 0.5rem;\n transform: translateY(0);\n}";
|
|
3676
|
+
var modules_bc06a1ad = {"sr-only":"InputWrapper_module_srOnly__080e0af7","hidden":"InputWrapper_module_hidden__080e0af7","slide-in":"InputWrapper_module_slideIn__080e0af7","slide-out":"InputWrapper_module_slideOut__080e0af7","input-label":"InputWrapper_module_inputLabel__080e0af7","focus":"InputWrapper_module_focus__080e0af7","floating-label":"InputWrapper_module_floatingLabel__080e0af7","input-wrapper-helper":"InputWrapper_module_inputWrapperHelper__080e0af7","input-wrapper":"InputWrapper_module_inputWrapper__080e0af7","floating-label-active":"InputWrapper_module_floatingLabelActive__080e0af7","disabled":"InputWrapper_module_disabled__080e0af7"};
|
|
3677
3677
|
n(css$g,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
|
|
3678
3678
|
|
|
3679
3679
|
var css$f = ".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}";
|
|
@@ -3721,8 +3721,8 @@ var FormGroup = /*#__PURE__*/React__default["default"].forwardRef(function (_ref
|
|
|
3721
3721
|
})))));
|
|
3722
3722
|
});
|
|
3723
3723
|
|
|
3724
|
-
var css$e = ".
|
|
3725
|
-
var modules_e401a244 = {"floating-wrapper":"
|
|
3724
|
+
var css$e = ".Wrapper_module_floatingWrapper__0b777b2e {\n position: relative;\n}\n\n.Wrapper_module_floatingLabel__0b777b2e {\n font-family: var(--font-family);\n font-size: 1rem;\n position: absolute;\n z-index: 1;\n top: 1.3125rem;\n left: 1.25rem;\n transform-origin: left top;\n transition: all 0.2s ease-in-out;\n pointer-events: none;\n}\n.Wrapper_module_floatingLabel__0b777b2e.Wrapper_module_floatingLabelActive__0b777b2e {\n font-size: 0.75rem;\n transform: translateY(-0.75rem);\n color: var(--default);\n}\n.Wrapper_module_floatingLabel__0b777b2e.Wrapper_module_error__0b777b2e {\n color: var(--error);\n}\n.Wrapper_module_floatingLabel__0b777b2e.Wrapper_module_disabled__0b777b2e {\n color: var(--greyed-out);\n}\n\n.Wrapper_module_wrapper__0b777b2e + fieldset,\n.Wrapper_module_wrapper__0b777b2e + .Wrapper_module_wrapper__0b777b2e {\n margin-top: 1rem;\n}\n\n.Wrapper_module_required__0b777b2e:after {\n content: \" *\";\n}";
|
|
3725
|
+
var modules_e401a244 = {"floating-wrapper":"Wrapper_module_floatingWrapper__0b777b2e","floating-label":"Wrapper_module_floatingLabel__0b777b2e","floating-label-active":"Wrapper_module_floatingLabelActive__0b777b2e","error":"Wrapper_module_error__0b777b2e","disabled":"Wrapper_module_disabled__0b777b2e","wrapper":"Wrapper_module_wrapper__0b777b2e","required":"Wrapper_module_required__0b777b2e"};
|
|
3726
3726
|
n(css$e,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
|
|
3727
3727
|
|
|
3728
3728
|
var _excluded$h = ["children", "className", "error", "errorMessage", "errorId", "errorMessageIcon", "errorMessageIconPosition", "helperText", "helperId", "floatingLabel", "floatingLabelActive", "required", "helperProps", "helperIndent", "labelProps", "label", "disabled", "name", "innerClassName"];
|
|
@@ -3763,9 +3763,10 @@ var Wrapper = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
|
|
|
3763
3763
|
(labelProps == null ? void 0 : labelProps.className) && labelClasses.push(labelProps.className);
|
|
3764
3764
|
required && labelClasses.push(modules_e401a244["required"]);
|
|
3765
3765
|
error && labelClasses.push(modules_e401a244["error"]);
|
|
3766
|
+
disabled && labelClasses.push(modules_e401a244["disabled"]);
|
|
3766
3767
|
return React__default["default"].createElement("div", _extends({}, rest, {
|
|
3767
3768
|
ref: ref,
|
|
3768
|
-
className: modules_e401a244.wrapper + " " + (className ? className : "")
|
|
3769
|
+
className: modules_e401a244.wrapper + " " + (className != null ? className : "")
|
|
3769
3770
|
}), React__default["default"].createElement(FormGroup, {
|
|
3770
3771
|
error: error,
|
|
3771
3772
|
errorMessage: errorMessage,
|
|
@@ -3825,7 +3826,7 @@ var useWrapper = function useWrapper(value, placeholder, type) {
|
|
|
3825
3826
|
};
|
|
3826
3827
|
};
|
|
3827
3828
|
|
|
3828
|
-
var _excluded$g = ["type", "name", "inputProps", "helperText", "helperProps", "value", "className", "error", "onChange", "onBlur", "onFocus"];
|
|
3829
|
+
var _excluded$g = ["type", "name", "inputProps", "helperText", "helperProps", "value", "className", "error", "onChange", "onBlur", "onFocus", "disabled"];
|
|
3829
3830
|
|
|
3830
3831
|
var useLabelOffset = function useLabelOffset(input, floatingLabelActive, prefix) {
|
|
3831
3832
|
var _useState = React.useState({}),
|
|
@@ -3857,7 +3858,7 @@ var useLabelOffset = function useLabelOffset(input, floatingLabelActive, prefix)
|
|
|
3857
3858
|
};
|
|
3858
3859
|
|
|
3859
3860
|
var InputWrapper = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
|
3860
|
-
var
|
|
3861
|
+
var _inputProps$wrapperPr, _inputProps$wrapperPr2, _helperProps$classNam, _inputProps$className;
|
|
3861
3862
|
|
|
3862
3863
|
var type = _ref.type,
|
|
3863
3864
|
name = _ref.name,
|
|
@@ -3870,6 +3871,7 @@ var InputWrapper = /*#__PURE__*/React__default["default"].forwardRef(function (_
|
|
|
3870
3871
|
onChange = _ref.onChange,
|
|
3871
3872
|
_onBlur = _ref.onBlur,
|
|
3872
3873
|
_onFocus = _ref.onFocus,
|
|
3874
|
+
disabled = _ref.disabled,
|
|
3873
3875
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded$g);
|
|
3874
3876
|
|
|
3875
3877
|
var _useWrapper = useWrapper(value, inputProps == null ? void 0 : inputProps.placeholder, type),
|
|
@@ -3887,12 +3889,16 @@ var InputWrapper = /*#__PURE__*/React__default["default"].forwardRef(function (_
|
|
|
3887
3889
|
|
|
3888
3890
|
var input = React.useRef(null);
|
|
3889
3891
|
var hasValueOrActiveFloatingLabel = !!value || floatingLabelActive;
|
|
3890
|
-
var labelClasses = [modules_bc06a1ad["input-label"]];
|
|
3891
3892
|
|
|
3892
3893
|
var _useLabelOffset = useLabelOffset(inputProps && inputProps.ref || input, floatingLabelActive, prefix),
|
|
3893
3894
|
labelOffset = _useLabelOffset.labelOffset;
|
|
3894
3895
|
|
|
3896
|
+
var labelClasses = [modules_bc06a1ad["input-label"]];
|
|
3895
3897
|
hasFocus && labelClasses.push(modules_bc06a1ad["focus"]);
|
|
3898
|
+
var inputWrapperClasses = [];
|
|
3899
|
+
floatingLabelActive && inputWrapperClasses.push(modules_bc06a1ad["floating-label-active"]);
|
|
3900
|
+
(inputProps == null ? void 0 : (_inputProps$wrapperPr = inputProps.wrapperProps) == null ? void 0 : _inputProps$wrapperPr.className) && inputWrapperClasses.push(inputProps == null ? void 0 : (_inputProps$wrapperPr2 = inputProps.wrapperProps) == null ? void 0 : _inputProps$wrapperPr2.className);
|
|
3901
|
+
disabled && inputWrapperClasses.push(modules_bc06a1ad["disabled"]);
|
|
3896
3902
|
return React__default["default"].createElement(Wrapper, _extends({}, rest, {
|
|
3897
3903
|
ref: ref,
|
|
3898
3904
|
name: name,
|
|
@@ -3910,12 +3916,13 @@ var InputWrapper = /*#__PURE__*/React__default["default"].forwardRef(function (_
|
|
|
3910
3916
|
helperProps: _extends({}, helperProps, {
|
|
3911
3917
|
className: modules_bc06a1ad["input-wrapper-helper"] + " " + ((_helperProps$classNam = helperProps == null ? void 0 : helperProps.className) != null ? _helperProps$classNam : "") + " "
|
|
3912
3918
|
}),
|
|
3913
|
-
helperIndent: 20
|
|
3919
|
+
helperIndent: 20,
|
|
3920
|
+
disabled: disabled
|
|
3914
3921
|
}), React__default["default"].createElement(Input, _extends({}, inputProps, {
|
|
3915
3922
|
prefix: hasValueOrActiveFloatingLabel ? prefix : "",
|
|
3916
3923
|
suffix: hasValueOrActiveFloatingLabel ? suffix : "",
|
|
3917
3924
|
wrapperProps: {
|
|
3918
|
-
className: (
|
|
3925
|
+
className: inputWrapperClasses.join(" ")
|
|
3919
3926
|
},
|
|
3920
3927
|
ref: inputProps && inputProps.ref || input,
|
|
3921
3928
|
"aria-labelledby": labelId,
|