@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
|
@@ -1663,8 +1663,8 @@ var css$C = ".Pagination_module_paginationWrapper__fb0017ac {\n font-family: va
|
|
|
1663
1663
|
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"};
|
|
1664
1664
|
n(css$C,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
|
|
1665
1665
|
|
|
1666
|
-
var css$B = ".
|
|
1667
|
-
var modules_23691de0 = {"sr-only":"
|
|
1666
|
+
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}";
|
|
1667
|
+
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"};
|
|
1668
1668
|
n(css$B,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
|
|
1669
1669
|
|
|
1670
1670
|
var _excluded$F = ["error", "className", "name", "style", "wrapperProps", "type", "labeledBy", "prefix", "suffix", "disabled", "onFocus", "onBlur"];
|
|
@@ -3664,8 +3664,8 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3664
3664
|
}), renderChildren());
|
|
3665
3665
|
});
|
|
3666
3666
|
|
|
3667
|
-
var css$g = ".
|
|
3668
|
-
var modules_bc06a1ad = {"sr-only":"
|
|
3667
|
+
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}";
|
|
3668
|
+
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"};
|
|
3669
3669
|
n(css$g,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
|
|
3670
3670
|
|
|
3671
3671
|
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}";
|
|
@@ -3713,8 +3713,8 @@ var FormGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3713
3713
|
})))));
|
|
3714
3714
|
});
|
|
3715
3715
|
|
|
3716
|
-
var css$e = ".
|
|
3717
|
-
var modules_e401a244 = {"floating-wrapper":"
|
|
3716
|
+
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}";
|
|
3717
|
+
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"};
|
|
3718
3718
|
n(css$e,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
|
|
3719
3719
|
|
|
3720
3720
|
var _excluded$h = ["children", "className", "error", "errorMessage", "errorId", "errorMessageIcon", "errorMessageIconPosition", "helperText", "helperId", "floatingLabel", "floatingLabelActive", "required", "helperProps", "helperIndent", "labelProps", "label", "disabled", "name", "innerClassName"];
|
|
@@ -3755,9 +3755,10 @@ var Wrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3755
3755
|
(labelProps == null ? void 0 : labelProps.className) && labelClasses.push(labelProps.className);
|
|
3756
3756
|
required && labelClasses.push(modules_e401a244["required"]);
|
|
3757
3757
|
error && labelClasses.push(modules_e401a244["error"]);
|
|
3758
|
+
disabled && labelClasses.push(modules_e401a244["disabled"]);
|
|
3758
3759
|
return React.createElement("div", _extends({}, rest, {
|
|
3759
3760
|
ref: ref,
|
|
3760
|
-
className: modules_e401a244.wrapper + " " + (className ? className : "")
|
|
3761
|
+
className: modules_e401a244.wrapper + " " + (className != null ? className : "")
|
|
3761
3762
|
}), React.createElement(FormGroup, {
|
|
3762
3763
|
error: error,
|
|
3763
3764
|
errorMessage: errorMessage,
|
|
@@ -3817,7 +3818,7 @@ var useWrapper = function useWrapper(value, placeholder, type) {
|
|
|
3817
3818
|
};
|
|
3818
3819
|
};
|
|
3819
3820
|
|
|
3820
|
-
var _excluded$g = ["type", "name", "inputProps", "helperText", "helperProps", "value", "className", "error", "onChange", "onBlur", "onFocus"];
|
|
3821
|
+
var _excluded$g = ["type", "name", "inputProps", "helperText", "helperProps", "value", "className", "error", "onChange", "onBlur", "onFocus", "disabled"];
|
|
3821
3822
|
|
|
3822
3823
|
var useLabelOffset = function useLabelOffset(input, floatingLabelActive, prefix) {
|
|
3823
3824
|
var _useState = useState({}),
|
|
@@ -3849,7 +3850,7 @@ var useLabelOffset = function useLabelOffset(input, floatingLabelActive, prefix)
|
|
|
3849
3850
|
};
|
|
3850
3851
|
|
|
3851
3852
|
var InputWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
3852
|
-
var
|
|
3853
|
+
var _inputProps$wrapperPr, _inputProps$wrapperPr2, _helperProps$classNam, _inputProps$className;
|
|
3853
3854
|
|
|
3854
3855
|
var type = _ref.type,
|
|
3855
3856
|
name = _ref.name,
|
|
@@ -3862,6 +3863,7 @@ var InputWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3862
3863
|
onChange = _ref.onChange,
|
|
3863
3864
|
_onBlur = _ref.onBlur,
|
|
3864
3865
|
_onFocus = _ref.onFocus,
|
|
3866
|
+
disabled = _ref.disabled,
|
|
3865
3867
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded$g);
|
|
3866
3868
|
|
|
3867
3869
|
var _useWrapper = useWrapper(value, inputProps == null ? void 0 : inputProps.placeholder, type),
|
|
@@ -3879,12 +3881,16 @@ var InputWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3879
3881
|
|
|
3880
3882
|
var input = useRef(null);
|
|
3881
3883
|
var hasValueOrActiveFloatingLabel = !!value || floatingLabelActive;
|
|
3882
|
-
var labelClasses = [modules_bc06a1ad["input-label"]];
|
|
3883
3884
|
|
|
3884
3885
|
var _useLabelOffset = useLabelOffset(inputProps && inputProps.ref || input, floatingLabelActive, prefix),
|
|
3885
3886
|
labelOffset = _useLabelOffset.labelOffset;
|
|
3886
3887
|
|
|
3888
|
+
var labelClasses = [modules_bc06a1ad["input-label"]];
|
|
3887
3889
|
hasFocus && labelClasses.push(modules_bc06a1ad["focus"]);
|
|
3890
|
+
var inputWrapperClasses = [];
|
|
3891
|
+
floatingLabelActive && inputWrapperClasses.push(modules_bc06a1ad["floating-label-active"]);
|
|
3892
|
+
(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);
|
|
3893
|
+
disabled && inputWrapperClasses.push(modules_bc06a1ad["disabled"]);
|
|
3888
3894
|
return React.createElement(Wrapper, _extends({}, rest, {
|
|
3889
3895
|
ref: ref,
|
|
3890
3896
|
name: name,
|
|
@@ -3902,12 +3908,13 @@ var InputWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3902
3908
|
helperProps: _extends({}, helperProps, {
|
|
3903
3909
|
className: modules_bc06a1ad["input-wrapper-helper"] + " " + ((_helperProps$classNam = helperProps == null ? void 0 : helperProps.className) != null ? _helperProps$classNam : "") + " "
|
|
3904
3910
|
}),
|
|
3905
|
-
helperIndent: 20
|
|
3911
|
+
helperIndent: 20,
|
|
3912
|
+
disabled: disabled
|
|
3906
3913
|
}), React.createElement(Input, _extends({}, inputProps, {
|
|
3907
3914
|
prefix: hasValueOrActiveFloatingLabel ? prefix : "",
|
|
3908
3915
|
suffix: hasValueOrActiveFloatingLabel ? suffix : "",
|
|
3909
3916
|
wrapperProps: {
|
|
3910
|
-
className: (
|
|
3917
|
+
className: inputWrapperClasses.join(" ")
|
|
3911
3918
|
},
|
|
3912
3919
|
ref: inputProps && inputProps.ref || input,
|
|
3913
3920
|
"aria-labelledby": labelId,
|