@mailstep/design-system 0.1.17 → 0.1.18
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/package.json +1 -1
- package/ui/Elements/Button/styles.js +5 -5
- package/ui/Elements/Button/styles.js.map +1 -1
- package/ui/Elements/Button/types.d.ts +4 -4
- package/ui/Forms/Input/Input.js +4 -1
- package/ui/Forms/Input/Input.js.map +1 -1
- package/ui/dts/Elements/Button/styles.d.ts +4 -4
- package/ui/dts/Elements/Button/types.d.ts +4 -4
package/package.json
CHANGED
|
@@ -12,21 +12,21 @@ var StyledIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __makeTemp
|
|
|
12
12
|
var $addMargin = _a.$addMargin;
|
|
13
13
|
return ($addMargin ? '0.5em' : '0');
|
|
14
14
|
});
|
|
15
|
-
var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n ", "
|
|
15
|
+
var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n height: 2.5em;\n border: slim;\n text-align: center;\n text-decoration: none;\n display: ", ";\n flex-direction: ", ";\n align-items: ", ";\n font-family: ", ";\n font-weight: semiBold;\n border-radius: lg;\n cursor: pointer;\n transition-duration: 0.1s;\n align-items: center;\n justify-content: center;\n transition: all 300ms ease-out;\n pointer-events: ", ";\n opacity: ", ";\n\n :disabled {\n color: lightGray5;\n }\n\n :focus {\n outline: none;\n }\n\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n border-color: red1;\n\n @media (hover: hover) {\n &:hover {\n background-color: white;\n color: red1;\n border-color: red1;\n }\n }\n\n :active {\n background-color: red1;\n color: red1;\n border: none;\n }\n\n :disabled {\n background-color: bgLightGray;\n border-color: lightGray5;\n color: gray3;\n }\n }\n\n &[data-appearance='primaryLight'] {\n color: red1;\n background-color: red20;\n border-color: red20;\n\n @media (hover: hover) {\n &:hover {\n background-color: red1;\n color: white;\n border-color: red1;\n }\n }\n\n :active {\n background-color: red1;\n color: white;\n border-color: red1;\n }\n\n :disabled {\n background-color: bgLightGray;\n border-color: lightGray5;\n color: gray3;\n }\n }\n\n &[data-appearance='success'] {\n background-color: successColor;\n color: white;\n border-color: successColor;\n\n @media (hover: hover) {\n &:hover {\n background-color: white;\n color: successColor;\n }\n }\n\n :active {\n background-color: white;\n color: successColor;\n }\n\n :disabled {\n background-color: bgLightGray;\n border-color: lightGray5;\n color: gray3;\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: white;\n color: red1;\n border-color: red1;\n\n @media (hover: hover) {\n &:hover {\n background-color: red1;\n color: white;\n border-color: red1;\n }\n }\n\n :active {\n background-color: red1;\n color: red1;\n border-color: red1;\n }\n\n :disabled {\n background-color: white;\n border-color: lightGray7;\n }\n }\n\n &[data-appearance='secondaryLg'] {\n background-color: white;\n color: typoPrimary;\n border-color: blue2;\n\n @media (hover: hover) {\n &:hover {\n background-color: blue2;\n color: white;\n border-color: blue2;\n }\n }\n\n :active {\n background-color: gray;\n color: white;\n border: none;\n }\n\n :disabled {\n background-color: white;\n border-color: bgLightGray1;\n }\n }\n\n &[data-appearance='primaryLg'] {\n background-color: blue2;\n color: white;\n border-color: blue2;\n\n @media (hover: hover) {\n &:hover {\n background-color: white;\n color: typoPrimary;\n border-color: blue2;\n }\n }\n\n :active {\n background-color: gray;\n color: white;\n border: none;\n }\n\n :disabled {\n background-color: bgLightGray1;\n border-color: bgLightGray1;\n }\n }\n\n &[data-appearance='minimal'] {\n background-color: transparent;\n border: none !important;\n color: blue2;\n\n :disabled {\n color: blue2;\n }\n }\n\n &[data-appearance='minimalRed'] {\n background-color: transparent;\n border: none !important;\n color: red1;\n\n @media (hover: hover) {\n &:hover {\n color: red3;\n svg {\n fill: red3 !important;\n }\n }\n }\n\n :disabled,\n :active {\n color: red3;\n svg {\n fill: red3 !important;\n }\n }\n }\n\n &[data-sizing='icon'] {\n aspect-ratio: 4 / 3;\n padding: 0.5em 0.875em;\n }\n\n &[data-sizing='iconLg'] {\n min-width: 42px;\n min-height: 38px;\n padding: 0.5em 0.875em;\n svg {\n height: 16px;\n }\n }\n\n &[data-sizing='normal'] {\n min-width: 7rem;\n padding: 12px 18px;\n min-height: 38px;\n line-height: 14px;\n font-size: 14px;\n }\n\n &[data-sizing='large'] {\n min-width: 12rem;\n padding: 0.75em 1.5em;\n min-height: 34px;\n font-size: 12px;\n }\n\n &[data-sizing='grid'] {\n min-width: 5rem;\n padding: 0.5em 1.25em;\n font-size: 10px;\n border-radius: 5px;\n }\n"], ["\n width: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n height: 2.5em;\n border: slim;\n text-align: center;\n text-decoration: none;\n display: ", ";\n flex-direction: ", ";\n align-items: ", ";\n font-family: ", ";\n font-weight: semiBold;\n border-radius: lg;\n cursor: pointer;\n transition-duration: 0.1s;\n align-items: center;\n justify-content: center;\n transition: all 300ms ease-out;\n pointer-events: ", ";\n opacity: ", ";\n\n :disabled {\n color: lightGray5;\n }\n\n :focus {\n outline: none;\n }\n\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n border-color: red1;\n\n @media (hover: hover) {\n &:hover {\n background-color: white;\n color: red1;\n border-color: red1;\n }\n }\n\n :active {\n background-color: red1;\n color: red1;\n border: none;\n }\n\n :disabled {\n background-color: bgLightGray;\n border-color: lightGray5;\n color: gray3;\n }\n }\n\n &[data-appearance='primaryLight'] {\n color: red1;\n background-color: red20;\n border-color: red20;\n\n @media (hover: hover) {\n &:hover {\n background-color: red1;\n color: white;\n border-color: red1;\n }\n }\n\n :active {\n background-color: red1;\n color: white;\n border-color: red1;\n }\n\n :disabled {\n background-color: bgLightGray;\n border-color: lightGray5;\n color: gray3;\n }\n }\n\n &[data-appearance='success'] {\n background-color: successColor;\n color: white;\n border-color: successColor;\n\n @media (hover: hover) {\n &:hover {\n background-color: white;\n color: successColor;\n }\n }\n\n :active {\n background-color: white;\n color: successColor;\n }\n\n :disabled {\n background-color: bgLightGray;\n border-color: lightGray5;\n color: gray3;\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: white;\n color: red1;\n border-color: red1;\n\n @media (hover: hover) {\n &:hover {\n background-color: red1;\n color: white;\n border-color: red1;\n }\n }\n\n :active {\n background-color: red1;\n color: red1;\n border-color: red1;\n }\n\n :disabled {\n background-color: white;\n border-color: lightGray7;\n }\n }\n\n &[data-appearance='secondaryLg'] {\n background-color: white;\n color: typoPrimary;\n border-color: blue2;\n\n @media (hover: hover) {\n &:hover {\n background-color: blue2;\n color: white;\n border-color: blue2;\n }\n }\n\n :active {\n background-color: gray;\n color: white;\n border: none;\n }\n\n :disabled {\n background-color: white;\n border-color: bgLightGray1;\n }\n }\n\n &[data-appearance='primaryLg'] {\n background-color: blue2;\n color: white;\n border-color: blue2;\n\n @media (hover: hover) {\n &:hover {\n background-color: white;\n color: typoPrimary;\n border-color: blue2;\n }\n }\n\n :active {\n background-color: gray;\n color: white;\n border: none;\n }\n\n :disabled {\n background-color: bgLightGray1;\n border-color: bgLightGray1;\n }\n }\n\n &[data-appearance='minimal'] {\n background-color: transparent;\n border: none !important;\n color: blue2;\n\n :disabled {\n color: blue2;\n }\n }\n\n &[data-appearance='minimalRed'] {\n background-color: transparent;\n border: none !important;\n color: red1;\n\n @media (hover: hover) {\n &:hover {\n color: red3;\n svg {\n fill: red3 !important;\n }\n }\n }\n\n :disabled,\n :active {\n color: red3;\n svg {\n fill: red3 !important;\n }\n }\n }\n\n &[data-sizing='icon'] {\n aspect-ratio: 4 / 3;\n padding: 0.5em 0.875em;\n }\n\n &[data-sizing='iconLg'] {\n min-width: 42px;\n min-height: 38px;\n padding: 0.5em 0.875em;\n svg {\n height: 16px;\n }\n }\n\n &[data-sizing='normal'] {\n min-width: 7rem;\n padding: 12px 18px;\n min-height: 38px;\n line-height: 14px;\n font-size: 14px;\n }\n\n &[data-sizing='large'] {\n min-width: 12rem;\n padding: 0.75em 1.5em;\n min-height: 34px;\n font-size: 12px;\n }\n\n &[data-sizing='grid'] {\n min-width: 5rem;\n padding: 0.5em 1.25em;\n font-size: 10px;\n border-radius: 5px;\n }\n"])), function (_a) {
|
|
16
16
|
var fullWidth = _a.fullWidth;
|
|
17
17
|
return (fullWidth ? '100%' : 'initial');
|
|
18
18
|
}, function (_a) {
|
|
19
19
|
var mt = _a.mt;
|
|
20
|
-
return
|
|
20
|
+
return mt || 0;
|
|
21
21
|
}, function (_a) {
|
|
22
22
|
var mr = _a.mr;
|
|
23
|
-
return
|
|
23
|
+
return mr || 0;
|
|
24
24
|
}, function (_a) {
|
|
25
25
|
var mb = _a.mb;
|
|
26
|
-
return
|
|
26
|
+
return mb || 0;
|
|
27
27
|
}, function (_a) {
|
|
28
28
|
var ml = _a.ml;
|
|
29
|
-
return
|
|
29
|
+
return ml || 0;
|
|
30
30
|
}, function (_a) {
|
|
31
31
|
var columnAlign = _a.columnAlign;
|
|
32
32
|
return (columnAlign ? 'flex' : 'inline-flex');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sources":["../../../../packages/ui/Elements/Button/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport { th } from '@xstyled/styled-components';\nimport styled from '@xstyled/styled-components';\nimport { Icon } from '../Icon';\nexport var StyledWrapper = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n\"], [\"\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n\"])));\nexport var LoadingIconWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n & svg {\\n margin-right: \", \";\\n }\\n\"], [\"\\n & svg {\\n margin-right: \", \";\\n }\\n\"])), function (_a) {\n var $addMargin = _a.$addMargin;\n return ($addMargin ? '0.5em' : '0');\n});\nexport var StyledIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __makeTemplateObject([\"\\n & svg {\\n height: 1em;\\n margin-right: \", \";\\n }\\n\"], [\"\\n & svg {\\n height: 1em;\\n margin-right: \", \";\\n }\\n\"])), function (_a) {\n var $addMargin = _a.$addMargin;\n return ($addMargin ? '0.5em' : '0');\n});\nexport var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject([\"\\n width: \", \";\\n \", \"\\n \", \"\\n \", \"\\n \", \"\\n height: 2.5em;\\n border: slim;\\n text-align: center;\\n text-decoration: none;\\n display: \", \";\\n flex-direction: \", \";\\n align-items: \", \";\\n font-family: \", \";\\n font-weight: semiBold;\\n border-radius: lg;\\n cursor: pointer;\\n transition-duration: 0.1s;\\n align-items: center;\\n justify-content: center;\\n transition: all 300ms ease-out;\\n pointer-events: \", \";\\n opacity: \", \";\\n\\n :disabled {\\n color: lightGray5;\\n }\\n\\n :focus {\\n outline: none;\\n }\\n\\n &[data-appearance='primary'] {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: white;\\n color: red1;\\n border-color: red1;\\n }\\n }\\n\\n :active {\\n background-color: red1;\\n color: red1;\\n border: none;\\n }\\n\\n :disabled {\\n background-color: bgLightGray;\\n border-color: lightGray5;\\n color: gray3;\\n }\\n }\\n\\n &[data-appearance='primaryLight'] {\\n color: red1;\\n background-color: red20;\\n border-color: red20;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n }\\n }\\n\\n :active {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n }\\n\\n :disabled {\\n background-color: bgLightGray;\\n border-color: lightGray5;\\n color: gray3;\\n }\\n }\\n\\n &[data-appearance='success'] {\\n background-color: successColor;\\n color: white;\\n border-color: successColor;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: white;\\n color: successColor;\\n }\\n }\\n\\n :active {\\n background-color: white;\\n color: successColor;\\n }\\n\\n :disabled {\\n background-color: bgLightGray;\\n border-color: lightGray5;\\n color: gray3;\\n }\\n }\\n\\n &[data-appearance='secondary'] {\\n background-color: white;\\n color: red1;\\n border-color: red1;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n }\\n }\\n\\n :active {\\n background-color: red1;\\n color: red1;\\n border-color: red1;\\n }\\n\\n :disabled {\\n background-color: white;\\n border-color: lightGray7;\\n }\\n }\\n\\n &[data-appearance='secondaryLg'] {\\n background-color: white;\\n color: typoPrimary;\\n border-color: blue2;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: blue2;\\n color: white;\\n border-color: blue2;\\n }\\n }\\n\\n :active {\\n background-color: gray;\\n color: white;\\n border: none;\\n }\\n\\n :disabled {\\n background-color: white;\\n border-color: bgLightGray1;\\n }\\n }\\n\\n &[data-appearance='primaryLg'] {\\n background-color: blue2;\\n color: white;\\n border-color: blue2;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: white;\\n color: typoPrimary;\\n border-color: blue2;\\n }\\n }\\n\\n :active {\\n background-color: gray;\\n color: white;\\n border: none;\\n }\\n\\n :disabled {\\n background-color: bgLightGray1;\\n border-color: bgLightGray1;\\n }\\n }\\n\\n &[data-appearance='minimal'] {\\n background-color: transparent;\\n border: none !important;\\n color: blue2;\\n\\n :disabled {\\n color: blue2;\\n }\\n }\\n\\n &[data-appearance='minimalRed'] {\\n background-color: transparent;\\n border: none !important;\\n color: red1;\\n\\n @media (hover: hover) {\\n &:hover {\\n color: red3;\\n svg {\\n fill: red3 !important;\\n }\\n }\\n }\\n \\n :disabled,\\n :active {\\n color: red3;\\n svg {\\n fill: red3 !important;\\n }\\n }\\n }\\n\\n &[data-sizing='icon'] {\\n aspect-ratio: 4 / 3;\\n padding: 0.5em 0.875em;\\n }\\n\\n &[data-sizing='iconLg'] {\\n min-width: 42px;\\n min-height: 38px;\\n padding: 0.5em 0.875em;\\n svg {\\n height: 16px;\\n }\\n }\\n\\n &[data-sizing='normal'] {\\n min-width: 7rem;\\n padding: 12px 18px;\\n min-height: 38px;\\n line-height: 14px;\\n font-size: 14px;\\n }\\n\\n &[data-sizing='large'] {\\n min-width: 12rem;\\n padding: 0.75em 1.5em;\\n min-height: 34px;\\n font-size: 12px;\\n }\\n\\n &[data-sizing='grid'] {\\n min-width: 5rem;\\n padding: 0.5em 1.25em;\\n font-size: 10px;\\n border-radius: 5px;\\n }\\n\"], [\"\\n width: \", \";\\n \", \"\\n \", \"\\n \", \"\\n \", \"\\n height: 2.5em;\\n border: slim;\\n text-align: center;\\n text-decoration: none;\\n display: \", \";\\n flex-direction: \", \";\\n align-items: \", \";\\n font-family: \", \";\\n font-weight: semiBold;\\n border-radius: lg;\\n cursor: pointer;\\n transition-duration: 0.1s;\\n align-items: center;\\n justify-content: center;\\n transition: all 300ms ease-out;\\n pointer-events: \", \";\\n opacity: \", \";\\n\\n :disabled {\\n color: lightGray5;\\n }\\n\\n :focus {\\n outline: none;\\n }\\n\\n &[data-appearance='primary'] {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: white;\\n color: red1;\\n border-color: red1;\\n }\\n }\\n\\n :active {\\n background-color: red1;\\n color: red1;\\n border: none;\\n }\\n\\n :disabled {\\n background-color: bgLightGray;\\n border-color: lightGray5;\\n color: gray3;\\n }\\n }\\n\\n &[data-appearance='primaryLight'] {\\n color: red1;\\n background-color: red20;\\n border-color: red20;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n }\\n }\\n\\n :active {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n }\\n\\n :disabled {\\n background-color: bgLightGray;\\n border-color: lightGray5;\\n color: gray3;\\n }\\n }\\n\\n &[data-appearance='success'] {\\n background-color: successColor;\\n color: white;\\n border-color: successColor;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: white;\\n color: successColor;\\n }\\n }\\n\\n :active {\\n background-color: white;\\n color: successColor;\\n }\\n\\n :disabled {\\n background-color: bgLightGray;\\n border-color: lightGray5;\\n color: gray3;\\n }\\n }\\n\\n &[data-appearance='secondary'] {\\n background-color: white;\\n color: red1;\\n border-color: red1;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n }\\n }\\n\\n :active {\\n background-color: red1;\\n color: red1;\\n border-color: red1;\\n }\\n\\n :disabled {\\n background-color: white;\\n border-color: lightGray7;\\n }\\n }\\n\\n &[data-appearance='secondaryLg'] {\\n background-color: white;\\n color: typoPrimary;\\n border-color: blue2;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: blue2;\\n color: white;\\n border-color: blue2;\\n }\\n }\\n\\n :active {\\n background-color: gray;\\n color: white;\\n border: none;\\n }\\n\\n :disabled {\\n background-color: white;\\n border-color: bgLightGray1;\\n }\\n }\\n\\n &[data-appearance='primaryLg'] {\\n background-color: blue2;\\n color: white;\\n border-color: blue2;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: white;\\n color: typoPrimary;\\n border-color: blue2;\\n }\\n }\\n\\n :active {\\n background-color: gray;\\n color: white;\\n border: none;\\n }\\n\\n :disabled {\\n background-color: bgLightGray1;\\n border-color: bgLightGray1;\\n }\\n }\\n\\n &[data-appearance='minimal'] {\\n background-color: transparent;\\n border: none !important;\\n color: blue2;\\n\\n :disabled {\\n color: blue2;\\n }\\n }\\n\\n &[data-appearance='minimalRed'] {\\n background-color: transparent;\\n border: none !important;\\n color: red1;\\n\\n @media (hover: hover) {\\n &:hover {\\n color: red3;\\n svg {\\n fill: red3 !important;\\n }\\n }\\n }\\n \\n :disabled,\\n :active {\\n color: red3;\\n svg {\\n fill: red3 !important;\\n }\\n }\\n }\\n\\n &[data-sizing='icon'] {\\n aspect-ratio: 4 / 3;\\n padding: 0.5em 0.875em;\\n }\\n\\n &[data-sizing='iconLg'] {\\n min-width: 42px;\\n min-height: 38px;\\n padding: 0.5em 0.875em;\\n svg {\\n height: 16px;\\n }\\n }\\n\\n &[data-sizing='normal'] {\\n min-width: 7rem;\\n padding: 12px 18px;\\n min-height: 38px;\\n line-height: 14px;\\n font-size: 14px;\\n }\\n\\n &[data-sizing='large'] {\\n min-width: 12rem;\\n padding: 0.75em 1.5em;\\n min-height: 34px;\\n font-size: 12px;\\n }\\n\\n &[data-sizing='grid'] {\\n min-width: 5rem;\\n padding: 0.5em 1.25em;\\n font-size: 10px;\\n border-radius: 5px;\\n }\\n\"])), function (_a) {\n var fullWidth = _a.fullWidth;\n return (fullWidth ? '100%' : 'initial');\n}, function (_a) {\n var mt = _a.mt;\n return (mt ? 'margin-top: 0;' : '');\n}, function (_a) {\n var mr = _a.mr;\n return (mr ? 'margin-right: 0;' : '');\n}, function (_a) {\n var mb = _a.mb;\n return (mb ? 'margin-bottom: 0;' : '');\n}, function (_a) {\n var ml = _a.ml;\n return (ml ? 'margin-left: 0;' : '');\n}, function (_a) {\n var columnAlign = _a.columnAlign;\n return (columnAlign ? 'flex' : 'inline-flex');\n}, function (_a) {\n var columnAlign = _a.columnAlign;\n return (columnAlign ? 'column' : 'auto');\n}, function (_a) {\n var columnAlign = _a.columnAlign;\n return (columnAlign ? 'center' : 'auto');\n}, th('fonts.primary'), function (_a) {\n var disabled = _a.disabled;\n return (disabled ? 'none' : 'auto');\n}, function (_a) {\n var disabled = _a.disabled;\n return (disabled ? '0.6' : '1');\n});\nvar templateObject_1, templateObject_2, templateObject_3, templateObject_4;\n//# sourceMappingURL=styles.js.map"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../../packages/ui/Elements/Button/styles.ts"],"sourcesContent":["import { __makeTemplateObject } from \"tslib\";\nimport { th } from '@xstyled/styled-components';\nimport styled from '@xstyled/styled-components';\nimport { Icon } from '../Icon';\nexport var StyledWrapper = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject([\"\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n\"], [\"\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n\"])));\nexport var LoadingIconWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject([\"\\n & svg {\\n margin-right: \", \";\\n }\\n\"], [\"\\n & svg {\\n margin-right: \", \";\\n }\\n\"])), function (_a) {\n var $addMargin = _a.$addMargin;\n return ($addMargin ? '0.5em' : '0');\n});\nexport var StyledIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __makeTemplateObject([\"\\n & svg {\\n height: 1em;\\n margin-right: \", \";\\n }\\n\"], [\"\\n & svg {\\n height: 1em;\\n margin-right: \", \";\\n }\\n\"])), function (_a) {\n var $addMargin = _a.$addMargin;\n return ($addMargin ? '0.5em' : '0');\n});\nexport var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject([\"\\n width: \", \";\\n margin-top: \", \";\\n margin-right: \", \";\\n margin-bottom: \", \";\\n margin-left: \", \";\\n height: 2.5em;\\n border: slim;\\n text-align: center;\\n text-decoration: none;\\n display: \", \";\\n flex-direction: \", \";\\n align-items: \", \";\\n font-family: \", \";\\n font-weight: semiBold;\\n border-radius: lg;\\n cursor: pointer;\\n transition-duration: 0.1s;\\n align-items: center;\\n justify-content: center;\\n transition: all 300ms ease-out;\\n pointer-events: \", \";\\n opacity: \", \";\\n\\n :disabled {\\n color: lightGray5;\\n }\\n\\n :focus {\\n outline: none;\\n }\\n\\n &[data-appearance='primary'] {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: white;\\n color: red1;\\n border-color: red1;\\n }\\n }\\n\\n :active {\\n background-color: red1;\\n color: red1;\\n border: none;\\n }\\n\\n :disabled {\\n background-color: bgLightGray;\\n border-color: lightGray5;\\n color: gray3;\\n }\\n }\\n\\n &[data-appearance='primaryLight'] {\\n color: red1;\\n background-color: red20;\\n border-color: red20;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n }\\n }\\n\\n :active {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n }\\n\\n :disabled {\\n background-color: bgLightGray;\\n border-color: lightGray5;\\n color: gray3;\\n }\\n }\\n\\n &[data-appearance='success'] {\\n background-color: successColor;\\n color: white;\\n border-color: successColor;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: white;\\n color: successColor;\\n }\\n }\\n\\n :active {\\n background-color: white;\\n color: successColor;\\n }\\n\\n :disabled {\\n background-color: bgLightGray;\\n border-color: lightGray5;\\n color: gray3;\\n }\\n }\\n\\n &[data-appearance='secondary'] {\\n background-color: white;\\n color: red1;\\n border-color: red1;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n }\\n }\\n\\n :active {\\n background-color: red1;\\n color: red1;\\n border-color: red1;\\n }\\n\\n :disabled {\\n background-color: white;\\n border-color: lightGray7;\\n }\\n }\\n\\n &[data-appearance='secondaryLg'] {\\n background-color: white;\\n color: typoPrimary;\\n border-color: blue2;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: blue2;\\n color: white;\\n border-color: blue2;\\n }\\n }\\n\\n :active {\\n background-color: gray;\\n color: white;\\n border: none;\\n }\\n\\n :disabled {\\n background-color: white;\\n border-color: bgLightGray1;\\n }\\n }\\n\\n &[data-appearance='primaryLg'] {\\n background-color: blue2;\\n color: white;\\n border-color: blue2;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: white;\\n color: typoPrimary;\\n border-color: blue2;\\n }\\n }\\n\\n :active {\\n background-color: gray;\\n color: white;\\n border: none;\\n }\\n\\n :disabled {\\n background-color: bgLightGray1;\\n border-color: bgLightGray1;\\n }\\n }\\n\\n &[data-appearance='minimal'] {\\n background-color: transparent;\\n border: none !important;\\n color: blue2;\\n\\n :disabled {\\n color: blue2;\\n }\\n }\\n\\n &[data-appearance='minimalRed'] {\\n background-color: transparent;\\n border: none !important;\\n color: red1;\\n\\n @media (hover: hover) {\\n &:hover {\\n color: red3;\\n svg {\\n fill: red3 !important;\\n }\\n }\\n }\\n\\n :disabled,\\n :active {\\n color: red3;\\n svg {\\n fill: red3 !important;\\n }\\n }\\n }\\n\\n &[data-sizing='icon'] {\\n aspect-ratio: 4 / 3;\\n padding: 0.5em 0.875em;\\n }\\n\\n &[data-sizing='iconLg'] {\\n min-width: 42px;\\n min-height: 38px;\\n padding: 0.5em 0.875em;\\n svg {\\n height: 16px;\\n }\\n }\\n\\n &[data-sizing='normal'] {\\n min-width: 7rem;\\n padding: 12px 18px;\\n min-height: 38px;\\n line-height: 14px;\\n font-size: 14px;\\n }\\n\\n &[data-sizing='large'] {\\n min-width: 12rem;\\n padding: 0.75em 1.5em;\\n min-height: 34px;\\n font-size: 12px;\\n }\\n\\n &[data-sizing='grid'] {\\n min-width: 5rem;\\n padding: 0.5em 1.25em;\\n font-size: 10px;\\n border-radius: 5px;\\n }\\n\"], [\"\\n width: \", \";\\n margin-top: \", \";\\n margin-right: \", \";\\n margin-bottom: \", \";\\n margin-left: \", \";\\n height: 2.5em;\\n border: slim;\\n text-align: center;\\n text-decoration: none;\\n display: \", \";\\n flex-direction: \", \";\\n align-items: \", \";\\n font-family: \", \";\\n font-weight: semiBold;\\n border-radius: lg;\\n cursor: pointer;\\n transition-duration: 0.1s;\\n align-items: center;\\n justify-content: center;\\n transition: all 300ms ease-out;\\n pointer-events: \", \";\\n opacity: \", \";\\n\\n :disabled {\\n color: lightGray5;\\n }\\n\\n :focus {\\n outline: none;\\n }\\n\\n &[data-appearance='primary'] {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: white;\\n color: red1;\\n border-color: red1;\\n }\\n }\\n\\n :active {\\n background-color: red1;\\n color: red1;\\n border: none;\\n }\\n\\n :disabled {\\n background-color: bgLightGray;\\n border-color: lightGray5;\\n color: gray3;\\n }\\n }\\n\\n &[data-appearance='primaryLight'] {\\n color: red1;\\n background-color: red20;\\n border-color: red20;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n }\\n }\\n\\n :active {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n }\\n\\n :disabled {\\n background-color: bgLightGray;\\n border-color: lightGray5;\\n color: gray3;\\n }\\n }\\n\\n &[data-appearance='success'] {\\n background-color: successColor;\\n color: white;\\n border-color: successColor;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: white;\\n color: successColor;\\n }\\n }\\n\\n :active {\\n background-color: white;\\n color: successColor;\\n }\\n\\n :disabled {\\n background-color: bgLightGray;\\n border-color: lightGray5;\\n color: gray3;\\n }\\n }\\n\\n &[data-appearance='secondary'] {\\n background-color: white;\\n color: red1;\\n border-color: red1;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: red1;\\n color: white;\\n border-color: red1;\\n }\\n }\\n\\n :active {\\n background-color: red1;\\n color: red1;\\n border-color: red1;\\n }\\n\\n :disabled {\\n background-color: white;\\n border-color: lightGray7;\\n }\\n }\\n\\n &[data-appearance='secondaryLg'] {\\n background-color: white;\\n color: typoPrimary;\\n border-color: blue2;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: blue2;\\n color: white;\\n border-color: blue2;\\n }\\n }\\n\\n :active {\\n background-color: gray;\\n color: white;\\n border: none;\\n }\\n\\n :disabled {\\n background-color: white;\\n border-color: bgLightGray1;\\n }\\n }\\n\\n &[data-appearance='primaryLg'] {\\n background-color: blue2;\\n color: white;\\n border-color: blue2;\\n\\n @media (hover: hover) {\\n &:hover {\\n background-color: white;\\n color: typoPrimary;\\n border-color: blue2;\\n }\\n }\\n\\n :active {\\n background-color: gray;\\n color: white;\\n border: none;\\n }\\n\\n :disabled {\\n background-color: bgLightGray1;\\n border-color: bgLightGray1;\\n }\\n }\\n\\n &[data-appearance='minimal'] {\\n background-color: transparent;\\n border: none !important;\\n color: blue2;\\n\\n :disabled {\\n color: blue2;\\n }\\n }\\n\\n &[data-appearance='minimalRed'] {\\n background-color: transparent;\\n border: none !important;\\n color: red1;\\n\\n @media (hover: hover) {\\n &:hover {\\n color: red3;\\n svg {\\n fill: red3 !important;\\n }\\n }\\n }\\n\\n :disabled,\\n :active {\\n color: red3;\\n svg {\\n fill: red3 !important;\\n }\\n }\\n }\\n\\n &[data-sizing='icon'] {\\n aspect-ratio: 4 / 3;\\n padding: 0.5em 0.875em;\\n }\\n\\n &[data-sizing='iconLg'] {\\n min-width: 42px;\\n min-height: 38px;\\n padding: 0.5em 0.875em;\\n svg {\\n height: 16px;\\n }\\n }\\n\\n &[data-sizing='normal'] {\\n min-width: 7rem;\\n padding: 12px 18px;\\n min-height: 38px;\\n line-height: 14px;\\n font-size: 14px;\\n }\\n\\n &[data-sizing='large'] {\\n min-width: 12rem;\\n padding: 0.75em 1.5em;\\n min-height: 34px;\\n font-size: 12px;\\n }\\n\\n &[data-sizing='grid'] {\\n min-width: 5rem;\\n padding: 0.5em 1.25em;\\n font-size: 10px;\\n border-radius: 5px;\\n }\\n\"])), function (_a) {\n var fullWidth = _a.fullWidth;\n return (fullWidth ? '100%' : 'initial');\n}, function (_a) {\n var mt = _a.mt;\n return mt || 0;\n}, function (_a) {\n var mr = _a.mr;\n return mr || 0;\n}, function (_a) {\n var mb = _a.mb;\n return mb || 0;\n}, function (_a) {\n var ml = _a.ml;\n return ml || 0;\n}, function (_a) {\n var columnAlign = _a.columnAlign;\n return (columnAlign ? 'flex' : 'inline-flex');\n}, function (_a) {\n var columnAlign = _a.columnAlign;\n return (columnAlign ? 'column' : 'auto');\n}, function (_a) {\n var columnAlign = _a.columnAlign;\n return (columnAlign ? 'center' : 'auto');\n}, th('fonts.primary'), function (_a) {\n var disabled = _a.disabled;\n return (disabled ? 'none' : 'auto');\n}, function (_a) {\n var disabled = _a.disabled;\n return (disabled ? '0.6' : '1');\n});\nvar templateObject_1, templateObject_2, templateObject_3, templateObject_4;\n//# sourceMappingURL=styles.js.map"],"names":[],"mappings":"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"}
|
|
@@ -14,10 +14,10 @@ type Props = React.HTMLProps<HTMLButtonElement> & {
|
|
|
14
14
|
icon?: string | JSX.Element;
|
|
15
15
|
type?: 'button' | 'submit' | 'reset';
|
|
16
16
|
fullWidth?: boolean;
|
|
17
|
-
mt?: string
|
|
18
|
-
mr?: string
|
|
19
|
-
mb?: string
|
|
20
|
-
ml?: string
|
|
17
|
+
mt?: string;
|
|
18
|
+
mr?: string;
|
|
19
|
+
mb?: string;
|
|
20
|
+
ml?: string;
|
|
21
21
|
};
|
|
22
22
|
|
|
23
23
|
export { AppearanceValue, Props, SizingValue };
|
package/ui/Forms/Input/Input.js
CHANGED
|
@@ -28,7 +28,10 @@ var Input = function (_a) {
|
|
|
28
28
|
var handleBlur = useCallback(function (event) {
|
|
29
29
|
var _a, _b, _c, _d, _e;
|
|
30
30
|
onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
|
|
31
|
-
|
|
31
|
+
// If the related target is not an input element or its input type is not included in the allowed input types, keep the focus on the input with forceFocus
|
|
32
|
+
if (forceFocus &&
|
|
33
|
+
(((_b = (_a = event.relatedTarget) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) !== 'input' ||
|
|
34
|
+
!allowedInputTypes.includes((_d = (_c = event.relatedTarget) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.toLowerCase()))) {
|
|
32
35
|
(_e = event.target) === null || _e === void 0 ? void 0 : _e.focus();
|
|
33
36
|
}
|
|
34
37
|
}, [forceFocus, onBlur]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sources":["../../../../packages/ui/Forms/Input/Input.tsx"],"sourcesContent":["import { __assign, __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useCallback, useEffect, useRef } from 'react';\nimport { IconsController, IconWrapper, InputIcon, InputRow, InputWrap, StyledInput, Suffix, Tooltip } from './styles';\nimport { FieldLabel } from '../../Elements/Label';\nimport { SpaceAroundWrap } from '../../Elements/SpaceAround';\nimport { ErrorMessage } from '../../Elements/ErrorMessage';\nimport { Icon } from '../../Elements/Icon';\nimport { Spinner } from '../../Elements/Spinner';\nvar allowedInputTypes = ['text', 'number'];\nexport var Input = function (_a) {\n var _b = _a.appearance, appearance = _b === void 0 ? 'primary' : _b, type = _a.type, name = _a.name, label = _a.label, value = _a.value, icon = _a.icon, disabled = _a.disabled, error = _a.error, _c = _a.isInvalid, isInvalid = _c === void 0 ? undefined : _c, _d = _a.spaceAround, spaceAround = _d === void 0 ? false : _d, inputRef = _a.inputRef, autoComplete = _a.autoComplete, isLoading = _a.isLoading, className = _a.className, suffix = _a.suffix, suffixOnClick = _a.suffixOnClick, errorAppearance = _a.errorAppearance, _e = _a.iconPlacement, iconPlacement = _e === void 0 ? 'left' : _e, iconOnClick = _a.iconOnClick, iconTooltip = _a.iconTooltip, big = _a.big, _f = _a.showArrowsController, showArrowsController = _f === void 0 ? false : _f, onClear = _a.onClear, alwaysShowClear = _a.alwaysShowClear, setNumber = _a.setNumber, onEnter = _a.onEnter, _g = _a.forceFocus, forceFocus = _g === void 0 ? false : _g, _h = _a.autoFocus, autoFocus = _h === void 0 ? false : _h, onBlur = _a.onBlur, rest = __rest(_a, [\"appearance\", \"type\", \"name\", \"label\", \"value\", \"icon\", \"disabled\", \"error\", \"isInvalid\", \"spaceAround\", \"inputRef\", \"autoComplete\", \"isLoading\", \"className\", \"suffix\", \"suffixOnClick\", \"errorAppearance\", \"iconPlacement\", \"iconOnClick\", \"iconTooltip\", \"big\", \"showArrowsController\", \"onClear\", \"alwaysShowClear\", \"setNumber\", \"onEnter\", \"forceFocus\", \"autoFocus\", \"onBlur\"]);\n var $isInvalid = isInvalid !== undefined ? isInvalid : !!error;\n var $isClearable = !!onClear && (!!value || alwaysShowClear) && !disabled && !isLoading;\n var $hasSuffix = !!suffix;\n var checkIconPlacement = showArrowsController ? 'left' : iconPlacement;\n var onAddItem = useCallback(function () { return setNumber && setNumber(function (base) { return base + 1; }); }, [setNumber]);\n var onRemoveItem = useCallback(function () {\n setNumber && setNumber(function (base) { return (base > 1 ? base - 1 : 1); });\n }, [setNumber]);\n var internalRef = useRef();\n var ref = (inputRef || internalRef);\n useEffect(function () {\n var _a;\n forceFocus && !disabled && !isLoading && ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.focus());\n }, [disabled, forceFocus, isLoading]);\n var handleBlur = useCallback(function (event) {\n var _a, _b, _c, _d, _e;\n onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);\n if (forceFocus && (((_b = (_a = event.relatedTarget) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) !== 'input' || !allowedInputTypes.includes((_d = (_c = event.relatedTarget) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.toLowerCase()))) {\n (_e = event.target) === null || _e === void 0 ? void 0 : _e.focus();\n }\n }, [forceFocus, onBlur]);\n var handleKeyDown = useCallback(function (event) {\n if (event.key === 'Enter') {\n onEnter === null || onEnter === void 0 ? void 0 : onEnter();\n }\n }, [onEnter]);\n return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(InputWrap, { children: [label && (_jsx(FieldLabel, { htmlFor: name, \"$isInvalid\": $isInvalid, children: label })), _jsxs(InputRow, { hasValue: !!value, \"$isInvalid\": $isInvalid, disabled: !!disabled, \"$icon\": icon, children: [_jsx(StyledInput, __assign({ autoFocus: autoFocus, className: \"\".concat(appearance, \" \").concat(checkIconPlacement), type: type, name: name, \"data-cy\": \"\".concat(name, \"Inp\"), value: value, \"$isInvalid\": $isInvalid, \"$isClearable\": $isClearable, \"$hasSuffix\": $hasSuffix, disabled: disabled || isLoading, ref: ref, autoComplete: autoComplete, onKeyDown: handleKeyDown, big: big, onBlur: handleBlur }, rest)), icon && (_jsx(InputIcon, { right: showArrowsController ? false : iconPlacement === 'right', onClick: iconOnClick, children: _jsxs(Tooltip, { children: [_jsx(Icon, { icon: icon }), iconTooltip && _jsx(\"span\", { children: iconTooltip })] }) })), showArrowsController && (_jsxs(IconsController, { children: [_jsx(IconWrapper, { onClick: onAddItem, children: _jsx(Icon, { icon: \"goUp\", fill: \"gray1\" }) }), _jsx(IconWrapper, { onClick: onRemoveItem, children: _jsx(Icon, { icon: \"goDown\", fill: \"gray1\" }) })] })), $isClearable && (_jsx(InputIcon, { right: true, onClick: onClear, children: _jsx(Icon, { icon: \"deleteX\", size: \"16px\", fill: \"lightGray3\" }) })), suffix && (_jsx(Suffix, { onClick: suffixOnClick, \"$isPointer\": !!suffixOnClick, \"$isInvalid\": $isInvalid, children: suffix })), isLoading && (_jsx(InputIcon, { right: true, children: _jsx(Spinner, { variant: \"sm\" }) }))] })] }), error && _jsx(ErrorMessage, { appearance: errorAppearance, children: error })] }));\n};\n//# sourceMappingURL=Input.js.map"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Input.js","sources":["../../../../packages/ui/Forms/Input/Input.tsx"],"sourcesContent":["import { __assign, __rest } from \"tslib\";\nimport { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useCallback, useEffect, useRef } from 'react';\nimport { IconsController, IconWrapper, InputIcon, InputRow, InputWrap, StyledInput, Suffix, Tooltip } from './styles';\nimport { FieldLabel } from '../../Elements/Label';\nimport { SpaceAroundWrap } from '../../Elements/SpaceAround';\nimport { ErrorMessage } from '../../Elements/ErrorMessage';\nimport { Icon } from '../../Elements/Icon';\nimport { Spinner } from '../../Elements/Spinner';\nvar allowedInputTypes = ['text', 'number'];\nexport var Input = function (_a) {\n var _b = _a.appearance, appearance = _b === void 0 ? 'primary' : _b, type = _a.type, name = _a.name, label = _a.label, value = _a.value, icon = _a.icon, disabled = _a.disabled, error = _a.error, _c = _a.isInvalid, isInvalid = _c === void 0 ? undefined : _c, _d = _a.spaceAround, spaceAround = _d === void 0 ? false : _d, inputRef = _a.inputRef, autoComplete = _a.autoComplete, isLoading = _a.isLoading, className = _a.className, suffix = _a.suffix, suffixOnClick = _a.suffixOnClick, errorAppearance = _a.errorAppearance, _e = _a.iconPlacement, iconPlacement = _e === void 0 ? 'left' : _e, iconOnClick = _a.iconOnClick, iconTooltip = _a.iconTooltip, big = _a.big, _f = _a.showArrowsController, showArrowsController = _f === void 0 ? false : _f, onClear = _a.onClear, alwaysShowClear = _a.alwaysShowClear, setNumber = _a.setNumber, onEnter = _a.onEnter, _g = _a.forceFocus, forceFocus = _g === void 0 ? false : _g, _h = _a.autoFocus, autoFocus = _h === void 0 ? false : _h, onBlur = _a.onBlur, rest = __rest(_a, [\"appearance\", \"type\", \"name\", \"label\", \"value\", \"icon\", \"disabled\", \"error\", \"isInvalid\", \"spaceAround\", \"inputRef\", \"autoComplete\", \"isLoading\", \"className\", \"suffix\", \"suffixOnClick\", \"errorAppearance\", \"iconPlacement\", \"iconOnClick\", \"iconTooltip\", \"big\", \"showArrowsController\", \"onClear\", \"alwaysShowClear\", \"setNumber\", \"onEnter\", \"forceFocus\", \"autoFocus\", \"onBlur\"]);\n var $isInvalid = isInvalid !== undefined ? isInvalid : !!error;\n var $isClearable = !!onClear && (!!value || alwaysShowClear) && !disabled && !isLoading;\n var $hasSuffix = !!suffix;\n var checkIconPlacement = showArrowsController ? 'left' : iconPlacement;\n var onAddItem = useCallback(function () { return setNumber && setNumber(function (base) { return base + 1; }); }, [setNumber]);\n var onRemoveItem = useCallback(function () {\n setNumber && setNumber(function (base) { return (base > 1 ? base - 1 : 1); });\n }, [setNumber]);\n var internalRef = useRef();\n var ref = (inputRef || internalRef);\n useEffect(function () {\n var _a;\n forceFocus && !disabled && !isLoading && ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.focus());\n }, [disabled, forceFocus, isLoading]);\n var handleBlur = useCallback(function (event) {\n var _a, _b, _c, _d, _e;\n onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);\n // If the related target is not an input element or its input type is not included in the allowed input types, keep the focus on the input with forceFocus\n if (forceFocus &&\n (((_b = (_a = event.relatedTarget) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) !== 'input' ||\n !allowedInputTypes.includes((_d = (_c = event.relatedTarget) === null || _c === void 0 ? void 0 : _c.type) === null || _d === void 0 ? void 0 : _d.toLowerCase()))) {\n (_e = event.target) === null || _e === void 0 ? void 0 : _e.focus();\n }\n }, [forceFocus, onBlur]);\n var handleKeyDown = useCallback(function (event) {\n if (event.key === 'Enter') {\n onEnter === null || onEnter === void 0 ? void 0 : onEnter();\n }\n }, [onEnter]);\n return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(InputWrap, { children: [label && (_jsx(FieldLabel, { htmlFor: name, \"$isInvalid\": $isInvalid, children: label })), _jsxs(InputRow, { hasValue: !!value, \"$isInvalid\": $isInvalid, disabled: !!disabled, \"$icon\": icon, children: [_jsx(StyledInput, __assign({ autoFocus: autoFocus, className: \"\".concat(appearance, \" \").concat(checkIconPlacement), type: type, name: name, \"data-cy\": \"\".concat(name, \"Inp\"), value: value, \"$isInvalid\": $isInvalid, \"$isClearable\": $isClearable, \"$hasSuffix\": $hasSuffix, disabled: disabled || isLoading, ref: ref, autoComplete: autoComplete, onKeyDown: handleKeyDown, big: big, onBlur: handleBlur }, rest)), icon && (_jsx(InputIcon, { right: showArrowsController ? false : iconPlacement === 'right', onClick: iconOnClick, children: _jsxs(Tooltip, { children: [_jsx(Icon, { icon: icon }), iconTooltip && _jsx(\"span\", { children: iconTooltip })] }) })), showArrowsController && (_jsxs(IconsController, { children: [_jsx(IconWrapper, { onClick: onAddItem, children: _jsx(Icon, { icon: \"goUp\", fill: \"gray1\" }) }), _jsx(IconWrapper, { onClick: onRemoveItem, children: _jsx(Icon, { icon: \"goDown\", fill: \"gray1\" }) })] })), $isClearable && (_jsx(InputIcon, { right: true, onClick: onClear, children: _jsx(Icon, { icon: \"deleteX\", size: \"16px\", fill: \"lightGray3\" }) })), suffix && (_jsx(Suffix, { onClick: suffixOnClick, \"$isPointer\": !!suffixOnClick, \"$isInvalid\": $isInvalid, children: suffix })), isLoading && (_jsx(InputIcon, { right: true, children: _jsx(Spinner, { variant: \"sm\" }) }))] })] }), error && _jsx(ErrorMessage, { appearance: errorAppearance, children: error })] }));\n};\n//# sourceMappingURL=Input.js.map"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -12,8 +12,8 @@ export declare const StyledButton: import("styled-components").StyledComponent<"
|
|
|
12
12
|
children?: any;
|
|
13
13
|
onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
|
|
14
14
|
fullWidth: boolean;
|
|
15
|
-
mt?: string |
|
|
16
|
-
mr?: string |
|
|
17
|
-
mb?: string |
|
|
18
|
-
ml?: string |
|
|
15
|
+
mt?: string | undefined;
|
|
16
|
+
mr?: string | undefined;
|
|
17
|
+
mb?: string | undefined;
|
|
18
|
+
ml?: string | undefined;
|
|
19
19
|
}, never>;
|
|
@@ -15,8 +15,8 @@ export type Props = React.HTMLProps<HTMLButtonElement> & {
|
|
|
15
15
|
icon?: string | JSX.Element;
|
|
16
16
|
type?: 'button' | 'submit' | 'reset';
|
|
17
17
|
fullWidth?: boolean;
|
|
18
|
-
mt?: string
|
|
19
|
-
mr?: string
|
|
20
|
-
mb?: string
|
|
21
|
-
ml?: string
|
|
18
|
+
mt?: string;
|
|
19
|
+
mr?: string;
|
|
20
|
+
mb?: string;
|
|
21
|
+
ml?: string;
|
|
22
22
|
};
|