@onewelcome/react-lib-components 0.2.5 → 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/ContextMenu/ContextMenu.d.ts +2 -1
- package/dist/react-lib-components.cjs.development.js +27 -17
- 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 +27 -17
- package/dist/react-lib-components.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/ContextMenu/ContextMenu.module.scss +8 -0
- package/src/ContextMenu/ContextMenu.test.tsx +43 -0
- package/src/ContextMenu/ContextMenu.tsx +11 -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
|
@@ -686,8 +686,8 @@ var Popover = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
686
686
|
}, children));
|
|
687
687
|
});
|
|
688
688
|
|
|
689
|
-
var css$Q = ".
|
|
690
|
-
var modules_846e6042 = {"context-menu":"
|
|
689
|
+
var css$Q = ".ContextMenu_module_contextMenu__1be8f447 {\n position: relative;\n display: inline-block;\n box-sizing: border-box;\n}\n\n.ContextMenu_module_menu__1be8f447 {\n white-space: nowrap;\n margin: 1rem 0;\n list-style: none;\n padding: 0;\n min-width: 200px;\n}\n.ContextMenu_module_menu__1be8f447.ContextMenu_module_noMarginTop__1be8f447 {\n margin: 0 0 1rem;\n}\n.ContextMenu_module_menu__1be8f447 button {\n text-align: left;\n}\n\n.ContextMenu_module_decorativeElement__1be8f447 {\n margin-top: 1rem;\n}";
|
|
690
|
+
var modules_846e6042 = {"context-menu":"ContextMenu_module_contextMenu__1be8f447","menu":"ContextMenu_module_menu__1be8f447","no-margin-top":"ContextMenu_module_noMarginTop__1be8f447","decorative-element":"ContextMenu_module_decorativeElement__1be8f447"};
|
|
691
691
|
n(css$Q,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
|
|
692
692
|
|
|
693
693
|
var useBodyClick = function useBodyClick(checkFunction, callbackFunction, dependingStateVariable) {
|
|
@@ -705,10 +705,11 @@ var useBodyClick = function useBodyClick(checkFunction, callbackFunction, depend
|
|
|
705
705
|
}, [dependingStateVariable]);
|
|
706
706
|
};
|
|
707
707
|
|
|
708
|
-
var _excluded$S = ["trigger", "children", "id", "show", "onShow", "onClose", "placement", "offset", "transformOrigin", "domRoot"];
|
|
708
|
+
var _excluded$S = ["trigger", "children", "decorativeElement", "id", "show", "onShow", "onClose", "placement", "offset", "transformOrigin", "domRoot"];
|
|
709
709
|
var ContextMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
710
710
|
var trigger = _ref.trigger,
|
|
711
711
|
children = _ref.children,
|
|
712
|
+
decorativeElement = _ref.decorativeElement,
|
|
712
713
|
id = _ref.id,
|
|
713
714
|
_ref$show = _ref.show,
|
|
714
715
|
show = _ref$show === void 0 ? false : _ref$show,
|
|
@@ -881,8 +882,10 @@ var ContextMenu = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
881
882
|
offset: offset,
|
|
882
883
|
anchorEl: anchorEl,
|
|
883
884
|
show: showContextMenu
|
|
884
|
-
}, React.createElement("
|
|
885
|
-
className: modules_846e6042["
|
|
885
|
+
}, decorativeElement && React.createElement("div", {
|
|
886
|
+
className: modules_846e6042["decorative-element"]
|
|
887
|
+
}, decorativeElement), React.createElement("ul", {
|
|
888
|
+
className: modules_846e6042["menu"] + " " + (decorativeElement ? modules_846e6042["no-margin-top"] : ""),
|
|
886
889
|
id: id + "-menu",
|
|
887
890
|
"aria-describedby": id,
|
|
888
891
|
role: "menu"
|
|
@@ -1660,8 +1663,8 @@ var css$C = ".Pagination_module_paginationWrapper__fb0017ac {\n font-family: va
|
|
|
1660
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"};
|
|
1661
1664
|
n(css$C,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
|
|
1662
1665
|
|
|
1663
|
-
var css$B = ".
|
|
1664
|
-
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"};
|
|
1665
1668
|
n(css$B,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
|
|
1666
1669
|
|
|
1667
1670
|
var _excluded$F = ["error", "className", "name", "style", "wrapperProps", "type", "labeledBy", "prefix", "suffix", "disabled", "onFocus", "onBlur"];
|
|
@@ -3661,8 +3664,8 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3661
3664
|
}), renderChildren());
|
|
3662
3665
|
});
|
|
3663
3666
|
|
|
3664
|
-
var css$g = ".
|
|
3665
|
-
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"};
|
|
3666
3669
|
n(css$g,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
|
|
3667
3670
|
|
|
3668
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}";
|
|
@@ -3710,8 +3713,8 @@ var FormGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3710
3713
|
})))));
|
|
3711
3714
|
});
|
|
3712
3715
|
|
|
3713
|
-
var css$e = ".
|
|
3714
|
-
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"};
|
|
3715
3718
|
n(css$e,{"attributes":{"nonce":"DsPHCoJqXm4vKCqFrm03y1"}});
|
|
3716
3719
|
|
|
3717
3720
|
var _excluded$h = ["children", "className", "error", "errorMessage", "errorId", "errorMessageIcon", "errorMessageIconPosition", "helperText", "helperId", "floatingLabel", "floatingLabelActive", "required", "helperProps", "helperIndent", "labelProps", "label", "disabled", "name", "innerClassName"];
|
|
@@ -3752,9 +3755,10 @@ var Wrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3752
3755
|
(labelProps == null ? void 0 : labelProps.className) && labelClasses.push(labelProps.className);
|
|
3753
3756
|
required && labelClasses.push(modules_e401a244["required"]);
|
|
3754
3757
|
error && labelClasses.push(modules_e401a244["error"]);
|
|
3758
|
+
disabled && labelClasses.push(modules_e401a244["disabled"]);
|
|
3755
3759
|
return React.createElement("div", _extends({}, rest, {
|
|
3756
3760
|
ref: ref,
|
|
3757
|
-
className: modules_e401a244.wrapper + " " + (className ? className : "")
|
|
3761
|
+
className: modules_e401a244.wrapper + " " + (className != null ? className : "")
|
|
3758
3762
|
}), React.createElement(FormGroup, {
|
|
3759
3763
|
error: error,
|
|
3760
3764
|
errorMessage: errorMessage,
|
|
@@ -3814,7 +3818,7 @@ var useWrapper = function useWrapper(value, placeholder, type) {
|
|
|
3814
3818
|
};
|
|
3815
3819
|
};
|
|
3816
3820
|
|
|
3817
|
-
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"];
|
|
3818
3822
|
|
|
3819
3823
|
var useLabelOffset = function useLabelOffset(input, floatingLabelActive, prefix) {
|
|
3820
3824
|
var _useState = useState({}),
|
|
@@ -3846,7 +3850,7 @@ var useLabelOffset = function useLabelOffset(input, floatingLabelActive, prefix)
|
|
|
3846
3850
|
};
|
|
3847
3851
|
|
|
3848
3852
|
var InputWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
3849
|
-
var
|
|
3853
|
+
var _inputProps$wrapperPr, _inputProps$wrapperPr2, _helperProps$classNam, _inputProps$className;
|
|
3850
3854
|
|
|
3851
3855
|
var type = _ref.type,
|
|
3852
3856
|
name = _ref.name,
|
|
@@ -3859,6 +3863,7 @@ var InputWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3859
3863
|
onChange = _ref.onChange,
|
|
3860
3864
|
_onBlur = _ref.onBlur,
|
|
3861
3865
|
_onFocus = _ref.onFocus,
|
|
3866
|
+
disabled = _ref.disabled,
|
|
3862
3867
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded$g);
|
|
3863
3868
|
|
|
3864
3869
|
var _useWrapper = useWrapper(value, inputProps == null ? void 0 : inputProps.placeholder, type),
|
|
@@ -3876,12 +3881,16 @@ var InputWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3876
3881
|
|
|
3877
3882
|
var input = useRef(null);
|
|
3878
3883
|
var hasValueOrActiveFloatingLabel = !!value || floatingLabelActive;
|
|
3879
|
-
var labelClasses = [modules_bc06a1ad["input-label"]];
|
|
3880
3884
|
|
|
3881
3885
|
var _useLabelOffset = useLabelOffset(inputProps && inputProps.ref || input, floatingLabelActive, prefix),
|
|
3882
3886
|
labelOffset = _useLabelOffset.labelOffset;
|
|
3883
3887
|
|
|
3888
|
+
var labelClasses = [modules_bc06a1ad["input-label"]];
|
|
3884
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"]);
|
|
3885
3894
|
return React.createElement(Wrapper, _extends({}, rest, {
|
|
3886
3895
|
ref: ref,
|
|
3887
3896
|
name: name,
|
|
@@ -3899,12 +3908,13 @@ var InputWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
|
3899
3908
|
helperProps: _extends({}, helperProps, {
|
|
3900
3909
|
className: modules_bc06a1ad["input-wrapper-helper"] + " " + ((_helperProps$classNam = helperProps == null ? void 0 : helperProps.className) != null ? _helperProps$classNam : "") + " "
|
|
3901
3910
|
}),
|
|
3902
|
-
helperIndent: 20
|
|
3911
|
+
helperIndent: 20,
|
|
3912
|
+
disabled: disabled
|
|
3903
3913
|
}), React.createElement(Input, _extends({}, inputProps, {
|
|
3904
3914
|
prefix: hasValueOrActiveFloatingLabel ? prefix : "",
|
|
3905
3915
|
suffix: hasValueOrActiveFloatingLabel ? suffix : "",
|
|
3906
3916
|
wrapperProps: {
|
|
3907
|
-
className: (
|
|
3917
|
+
className: inputWrapperClasses.join(" ")
|
|
3908
3918
|
},
|
|
3909
3919
|
ref: inputProps && inputProps.ref || input,
|
|
3910
3920
|
"aria-labelledby": labelId,
|