@laerdal/life-react-components 1.9.8-dev.9.full → 1.9.9

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.
Files changed (93) hide show
  1. package/dist/Card/{VerticalCard/Card.cjs → Card.cjs} +9 -32
  2. package/dist/Card/Card.cjs.map +1 -0
  3. package/dist/Card/{VerticalCard/Card.d.ts → Card.d.ts} +1 -2
  4. package/dist/Card/{VerticalCard/Card.js → Card.js} +8 -29
  5. package/dist/Card/Card.js.map +1 -0
  6. package/dist/Card/{VerticalCard/CardBottomSection.cjs → CardBottomSection.cjs} +25 -40
  7. package/dist/Card/CardBottomSection.cjs.map +1 -0
  8. package/dist/Card/{VerticalCard/CardBottomSection.d.ts → CardBottomSection.d.ts} +4 -4
  9. package/dist/Card/{VerticalCard/CardBottomSection.js → CardBottomSection.js} +11 -25
  10. package/dist/Card/CardBottomSection.js.map +1 -0
  11. package/dist/Card/{VerticalCard/CardMiddleSection.cjs → CardMiddleSection.cjs} +13 -13
  12. package/dist/Card/CardMiddleSection.cjs.map +1 -0
  13. package/dist/Card/{VerticalCard/CardMiddleSection.d.ts → CardMiddleSection.d.ts} +2 -2
  14. package/dist/Card/{VerticalCard/CardMiddleSection.js → CardMiddleSection.js} +2 -2
  15. package/dist/Card/CardMiddleSection.js.map +1 -0
  16. package/dist/Card/{VerticalCard/CardTopSection.cjs → CardTopSection.cjs} +12 -11
  17. package/dist/Card/CardTopSection.cjs.map +1 -0
  18. package/dist/Card/{VerticalCard/CardTopSection.d.ts → CardTopSection.d.ts} +5 -5
  19. package/dist/Card/{VerticalCard/CardTopSection.js → CardTopSection.js} +10 -9
  20. package/dist/Card/CardTopSection.js.map +1 -0
  21. package/dist/Card/index.cjs +64 -8
  22. package/dist/Card/index.cjs.map +1 -1
  23. package/dist/Card/index.d.ts +7 -2
  24. package/dist/Card/index.js +7 -2
  25. package/dist/Card/index.js.map +1 -1
  26. package/dist/Dropdown/DropdownButton.cjs +3 -3
  27. package/dist/Dropdown/DropdownButton.cjs.map +1 -1
  28. package/dist/Dropdown/DropdownButton.d.ts +1 -5
  29. package/dist/Dropdown/DropdownButton.js +4 -3
  30. package/dist/Dropdown/DropdownButton.js.map +1 -1
  31. package/dist/InputFields/NumberField.cjs +63 -139
  32. package/dist/InputFields/NumberField.cjs.map +1 -1
  33. package/dist/InputFields/NumberField.d.ts +1 -4
  34. package/dist/InputFields/NumberField.js +63 -138
  35. package/dist/InputFields/NumberField.js.map +1 -1
  36. package/dist/List/ListRow.cjs +3 -24
  37. package/dist/List/ListRow.cjs.map +1 -1
  38. package/dist/List/ListRow.d.ts +0 -3
  39. package/dist/List/ListRow.js +3 -22
  40. package/dist/List/ListRow.js.map +1 -1
  41. package/dist/Toggles/ToggleButton.cjs +2 -3
  42. package/dist/Toggles/ToggleButton.cjs.map +1 -1
  43. package/dist/Toggles/ToggleButton.d.ts +1 -1
  44. package/dist/Toggles/ToggleButton.js +2 -3
  45. package/dist/Toggles/ToggleButton.js.map +1 -1
  46. package/dist/common/ActionWithin.cjs.map +1 -1
  47. package/dist/common/ActionWithin.js.map +1 -1
  48. package/dist/index.cjs.map +1 -1
  49. package/dist/index.js.map +1 -1
  50. package/package.json +1 -1
  51. package/dist/Card/HorizontalCard/HorizontalCard.cjs +0 -97
  52. package/dist/Card/HorizontalCard/HorizontalCard.cjs.map +0 -1
  53. package/dist/Card/HorizontalCard/HorizontalCard.d.ts +0 -4
  54. package/dist/Card/HorizontalCard/HorizontalCard.js +0 -74
  55. package/dist/Card/HorizontalCard/HorizontalCard.js.map +0 -1
  56. package/dist/Card/HorizontalCard/HorizontalCardActions.cjs +0 -124
  57. package/dist/Card/HorizontalCard/HorizontalCardActions.cjs.map +0 -1
  58. package/dist/Card/HorizontalCard/HorizontalCardActions.d.ts +0 -5
  59. package/dist/Card/HorizontalCard/HorizontalCardActions.js +0 -98
  60. package/dist/Card/HorizontalCard/HorizontalCardActions.js.map +0 -1
  61. package/dist/Card/HorizontalCard/HorizontalCardBody.cjs +0 -60
  62. package/dist/Card/HorizontalCard/HorizontalCardBody.cjs.map +0 -1
  63. package/dist/Card/HorizontalCard/HorizontalCardBody.d.ts +0 -5
  64. package/dist/Card/HorizontalCard/HorizontalCardBody.js +0 -40
  65. package/dist/Card/HorizontalCard/HorizontalCardBody.js.map +0 -1
  66. package/dist/Card/HorizontalCard/HorizontalCardThumbnail.cjs +0 -49
  67. package/dist/Card/HorizontalCard/HorizontalCardThumbnail.cjs.map +0 -1
  68. package/dist/Card/HorizontalCard/HorizontalCardThumbnail.d.ts +0 -5
  69. package/dist/Card/HorizontalCard/HorizontalCardThumbnail.js +0 -33
  70. package/dist/Card/HorizontalCard/HorizontalCardThumbnail.js.map +0 -1
  71. package/dist/Card/HorizontalCard/index.cjs +0 -33
  72. package/dist/Card/HorizontalCard/index.cjs.map +0 -1
  73. package/dist/Card/HorizontalCard/index.d.ts +0 -2
  74. package/dist/Card/HorizontalCard/index.js +0 -3
  75. package/dist/Card/HorizontalCard/index.js.map +0 -1
  76. package/dist/Card/HorizontalCard/types.cjs +0 -6
  77. package/dist/Card/HorizontalCard/types.cjs.map +0 -1
  78. package/dist/Card/HorizontalCard/types.d.ts +0 -40
  79. package/dist/Card/HorizontalCard/types.js +0 -2
  80. package/dist/Card/HorizontalCard/types.js.map +0 -1
  81. package/dist/Card/VerticalCard/Card.cjs.map +0 -1
  82. package/dist/Card/VerticalCard/Card.js.map +0 -1
  83. package/dist/Card/VerticalCard/CardBottomSection.cjs.map +0 -1
  84. package/dist/Card/VerticalCard/CardBottomSection.js.map +0 -1
  85. package/dist/Card/VerticalCard/CardMiddleSection.cjs.map +0 -1
  86. package/dist/Card/VerticalCard/CardMiddleSection.js.map +0 -1
  87. package/dist/Card/VerticalCard/CardTopSection.cjs.map +0 -1
  88. package/dist/Card/VerticalCard/CardTopSection.js.map +0 -1
  89. package/dist/Card/VerticalCard/index.cjs +0 -88
  90. package/dist/Card/VerticalCard/index.cjs.map +0 -1
  91. package/dist/Card/VerticalCard/index.d.ts +0 -7
  92. package/dist/Card/VerticalCard/index.js +0 -8
  93. package/dist/Card/VerticalCard/index.js.map +0 -1
@@ -2,19 +2,17 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
2
2
  import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
3
3
  import _pt from "prop-types";
4
4
 
5
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
5
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
6
6
 
7
7
  import * as React from 'react';
8
8
  import styled from 'styled-components';
9
9
  import { IconButton } from '../Button';
10
- import { useFocusVisibleRef } from '../common';
11
10
  import { SystemIcons } from '../icons';
12
- import { COLORS, focusStyles, Z_INDEXES } from '../styles';
11
+ import { COLORS } from '../styles';
13
12
  import { ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXXSStyling, ComponentXSStyling } from '../styles/typography';
14
13
  import { Size } from '../types';
15
14
  import { jsx as _jsx } from "react/jsx-runtime";
16
15
  import { jsxs as _jsxs } from "react/jsx-runtime";
17
- import { Fragment as _Fragment } from "react/jsx-runtime";
18
16
  var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
19
17
  var LabelContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n margin-bottom: 4px;\n color: ", ";\n display: flex;\n ", "\n"])), COLORS.neutral_500, function (props) {
20
18
  return props.size === Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, null) : ComponentXSStyling(ComponentTextStyle.Regular, null);
@@ -23,45 +21,34 @@ var LabelText = styled.div(_templateObject3 || (_templateObject3 = _taggedTempla
23
21
  var LabelIcon = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n margin-right: ", ";\n svg {\n height: 9px;\n width: 9px;\n }\n"])), function (props) {
24
22
  return props.size === Size.Small ? '6px' : '8px';
25
23
  });
26
- var PrefixContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n width: ", ";\n height: ", ";\n color: ", ";\n ", "\n position: absolute;\n padding: ", ";\n"])), function (props) {
24
+ var InputWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n margin: ", ";\n display: flex;\n flex-grow: 1;\n"])), function (props) {
25
+ return props.size === Size.Small ? '14px 0 14px 16px' : '16px 0 16px 16px';
26
+ });
27
+ var PrefixContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n margin-right: 4px;\n width: ", ";\n height: ", ";\n color: ", ";\n ", "\n"])), function (props) {
27
28
  return props.size === Size.Small ? '10px' : '11px';
28
29
  }, function (props) {
29
30
  return props.size === Size.Small ? '20px' : '24px';
30
- }, function (props) {
31
- return props.disabled ? COLORS.neutral_300 : COLORS.neutral_500;
32
- }, function (props) {
31
+ }, COLORS.neutral_500, function (props) {
33
32
  return props.size === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, null) : ComponentMStyling(ComponentTextStyle.Regular, null);
34
- }, function (props) {
35
- return props.size === Size.Small ? '14px 0 14px 16px' : '16px 0 16px 16px';
36
33
  });
37
- var OperatorWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n right:0;\n display: flex;\n margin:", ";\n svg {\n height: 14px;\n width: 14px;\n }\n .divider {\n margin: 16px 0;\n background: ", ";\n width: 1px;\n }\n"])), function (props) {
34
+ var OperatorWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n display: flex;\n margin:", ";\n svg {\n height: 14px;\n width: 14px;\n }\n .divider {\n margin: 16px 0;\n background: ", ";\n width: 1px;\n }\n"])), function (props) {
38
35
  return props.size === Size.Medium ? '4px 0' : '';
39
36
  }, COLORS.neutral_200);
40
- var NumberInput = styled.input(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n width: 100%; \n border: none;\n border-radius: 4px;\n box-shadow: inset 0px 0px 0px 1px ", ";\n outline: none;\n color: ", ";\n ", "\n\n ", "\n\n ", "\n\n &::placeholder {\n ", "\n }\n\n &:focus:not(.focus-visible):not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n \n &.focus-visible {\n ", "\n }\n\n &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &.disabled {\n box-shadow: inset 0px 0px 0px 1px ", ";\n cursor: not-allowed;\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n\n &::placeholder {\n color: ", ";\n }\n }\n\n &.readOnly {\n background: ", ";\n box-shadow: inset 0px 0px 0px 1px ", ";\n cursor: not-allowed;\n background: ", ";\n cursor: not-allowed;\n pointer-events: none;\n color: ", ";\n }\n\n &.valid {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &.invalid {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n"])), COLORS.neutral_400, COLORS.neutral_500, function (props) {
37
+ var NumberInput = styled.input(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n width: 100%; \n height: ", "; \n border: none;\n color: ", ";\n padding: 0; \n ", "\n\n &:hover, &:focus, &:active {\n outline: none;\n }\n\n &::placeholder {\n ", "\n }\n"])), function (props) {
38
+ return props.fieldSize === Size.Small ? '20px' : '24px';
39
+ }, COLORS.neutral_500, function (props) {
41
40
  return props.fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.black) : ComponentMStyling(ComponentTextStyle.Regular, COLORS.black);
42
- }, function (props) {
43
- return props.type === 'NumberField' ? "\n padding: ".concat(props.fieldSize === Size.Small ? '14px 97px 14px 16px' : '16px 97px 16px 16px', ";\n padding-left: ").concat(props.hasPrefix ? '30px' : '', ";\n ") : '';
44
- }, function (props) {
45
- return props.type === 'NumberInput' ? "\n padding: ".concat(props.fieldSize === Size.Small ? '14px 48px' : '16px 48px', ";\n ") : '';
46
41
  }, function (props) {
47
42
  return props.fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Italic, null) : ComponentMStyling(ComponentTextStyle.Italic, null);
48
- }, COLORS.primary_800, focusStyles, COLORS.primary_700, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_100, COLORS.neutral_500, COLORS.correct_400, COLORS.critical_400);
49
- var NoteLabel = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n color: ", ";\n ", " \n"])), COLORS.neutral_500, function (props) {
43
+ });
44
+ var NoteLabel = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n color: ", ";\n ", " \n"])), COLORS.neutral_500, function (props) {
50
45
  return props.size === Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, null) : ComponentXSStyling(ComponentTextStyle.Regular, null);
51
46
  });
52
- var NoteIcon = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n svg {\n height: 16px;\n }\n"])));
53
- var NoteContainer = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n display: flex;\n margin-top: 5px;\n\n &.valid {\n ", " {\n color: ", ";\n }\n\n ", " {\n svg path {\n fill: ", ";\n }\n }\n }\n\n &.invalid {\n ", " {\n color: ", ";\n }\n\n ", " {\n svg path {\n fill: ", ";\n }\n }\n }\n"])), NoteLabel, COLORS.correct_500, NoteIcon, COLORS.correct_500, NoteLabel, COLORS.critical_500, NoteIcon, COLORS.critical_500);
54
- var InputContainer = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n min-width: ", ";\n height: ", ";\n display: flex;\n position: relative;\n\n input.focus-visible ~ div.operator {\n z-index: ", ";\n }\n"])), function (props) {
55
- return props.type === 'NumberField' ? '160px' : '144px';
56
- }, function (props) {
47
+ var NoteIcon = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n svg {\n height: 16px;\n }\n"])));
48
+ var NoteContainer = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n display: flex;\n margin-top: 5px;\n\n &.valid {\n ", " {\n color: ", ";\n }\n\n ", " {\n svg path {\n fill: ", ";\n }\n }\n }\n\n &.invalid {\n ", " {\n color: ", ";\n }\n\n ", " {\n svg path {\n fill: ", ";\n }\n }\n }\n"])), NoteLabel, COLORS.correct_500, NoteIcon, COLORS.correct_500, NoteLabel, COLORS.critical_500, NoteIcon, COLORS.critical_500);
49
+ var InputContainer = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n min-width: 160px;\n height: ", ";\n display: flex;\n border: 0;\n border-radius: 4px;\n box-shadow: inset 0px 0px 0px 1px ", ";\n\n &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &:focus-within:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &:active:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &.disabled {\n box-shadow: inset 0px 0px 0px 1px ", ";\n cursor: not-allowed;\n \n ", "{\n color: ", ";\n }\n\n ", "{\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n\n &::placeholder {\n color: ", ";\n }\n }\n }\n\n &.readOnly {\n background: ", ";\n box-shadow: inset 0px 0px 0px 1px ", ";\n cursor: not-allowed;\n\n ", "{\n background: ", ";\n cursor: not-allowed;\n pointer-events: none;\n color: ", ";\n }\n }\n\n &.valid {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &.invalid {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n"])), function (props) {
57
50
  return props.size === Size.Small ? '48px' : '56px';
58
- }, Z_INDEXES.focus);
59
- var LeftOperator = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n position: absolute;\n top: ", ";\n left: 0;\n"])), function (props) {
60
- return props.size === Size.Small ? '0' : '4px';
61
- });
62
- var RightOperator = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n position: absolute;\n top: ", ";\n right: 0;\n"])), function (props) {
63
- return props.size === Size.Small ? '0' : '4px';
64
- });
51
+ }, COLORS.neutral_400, COLORS.primary_700, COLORS.primary_800, COLORS.primary_800, COLORS.neutral_100, PrefixContainer, COLORS.neutral_300, NumberInput, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_100, COLORS.neutral_300, NumberInput, COLORS.neutral_100, COLORS.neutral_500, COLORS.correct_400, COLORS.critical_400);
65
52
 
66
53
  var NumberField = function NumberField(_ref) {
67
54
  var _ref$size = _ref.size,
@@ -82,23 +69,14 @@ var NumberField = function NumberField(_ref) {
82
69
  _ref$readOnly = _ref.readOnly,
83
70
  readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
84
71
  valid = _ref.valid,
85
- value = _ref.value,
86
- placeholder = _ref.placeholder,
87
- type = _ref.type,
88
- onChange = _ref.onChange;
72
+ defaultVal = _ref.defaultVal;
89
73
 
90
- var _React$useState = React.useState(value ? value.toString() : ''),
74
+ var _React$useState = React.useState(defaultVal ? defaultVal.toString() : ''),
91
75
  _React$useState2 = _slicedToArray(_React$useState, 2),
92
76
  userInput = _React$useState2[0],
93
77
  setUserInput = _React$useState2[1];
94
78
 
95
79
  var fieldState = valid !== undefined ? valid ? 'valid' : 'invalid' : undefined;
96
- var elementRef = useFocusVisibleRef();
97
-
98
- var setVal = function setVal(e) {
99
- setUserInput(e);
100
- onChange && onChange(e);
101
- };
102
80
 
103
81
  var handleKeyPress = function handleKeyPress(e) {
104
82
  switch (e.key) {
@@ -127,19 +105,19 @@ var NumberField = function NumberField(_ref) {
127
105
 
128
106
  if (val !== '') {
129
107
  if (allowNegative && decimalPrecision) {
130
- if (val.length === 1 && val.charAt(0) === '-') setVal(val);else {
131
- if ((negativeAndDecimalRegex.test(val) || decimalPrecisionRegex.test(val)) && isInRange(val, true)) setVal(val);else if ((negativeDecimalFormationRegEx.test(val) || decimalFormationRegEx.test(val)) && isInRange(val.replace('.', ''), true)) setVal(val);else if ((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val, true)) setVal(val);
108
+ if (val.length === 1 && val.charAt(0) === '-') setUserInput(val);else {
109
+ if ((negativeAndDecimalRegex.test(val) || decimalPrecisionRegex.test(val)) && isInRange(val, true)) setUserInput(val);else if ((negativeDecimalFormationRegEx.test(val) || decimalFormationRegEx.test(val)) && isInRange(val.replace('.', ''), true)) setUserInput(val);else if ((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val, true)) setUserInput(val);
132
110
  }
133
111
  } else if (allowNegative) {
134
- if (val.length === 1 && val.charAt(0) === '-') setVal(val);else if ((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val, false)) setVal(val);
112
+ if (val.length === 1 && val.charAt(0) === '-') setUserInput(val);else if ((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val, false)) setUserInput(val);
135
113
  } else if (decimalPrecision && val.indexOf('.') === val.lastIndexOf('.') && isInRange(val, true)) {
136
- if (decimalPrecisionRegex.test(val)) setVal(val);else if (decimalFormationRegEx.test(val)) setVal(val);else if (!val.includes('.') && simpleRegex.test(val)) setVal(val);
114
+ if (decimalPrecisionRegex.test(val)) setUserInput(val);else if (decimalFormationRegEx.test(val)) setUserInput(val);else if (!val.includes('.') && simpleRegex.test(val)) setUserInput(val);
137
115
  } else if (simpleRegex.test(val) && isInRange(val, false)) {
138
- setVal(val);
116
+ setUserInput(val);
139
117
  }
140
118
  }
141
119
 
142
- if (val === '') setVal('');
120
+ if (val === '') setUserInput('');
143
121
  };
144
122
 
145
123
  var isInRange = function isInRange(value, isDecimal) {
@@ -153,7 +131,7 @@ var NumberField = function NumberField(_ref) {
153
131
 
154
132
  if (!isNaN(val)) {
155
133
  if (decimalPrecision) val = Math.round((val + interval) * Math.pow(10, decimalPrecision)) / Math.pow(10, decimalPrecision);else val += 1;
156
- if (maxValue && maxValue >= val) setVal(val.toString());else if (!maxValue) setVal(val.toString());
134
+ if (maxValue && maxValue >= val) setUserInput(val.toString());else if (!maxValue) setUserInput(val.toString());
157
135
  }
158
136
  };
159
137
 
@@ -163,7 +141,7 @@ var NumberField = function NumberField(_ref) {
163
141
 
164
142
  if (!isNaN(val)) {
165
143
  if (decimalPrecision) val = Math.round((val - interval) * Math.pow(10, decimalPrecision)) / Math.pow(10, decimalPrecision);else val -= 1;
166
- if (minValue && minValue <= val) allowNegative ? setVal(val.toString()) : val >= 0 ? setVal(val.toString()) : undefined;else if (!minValue) allowNegative ? setVal(val.toString()) : val >= 0 ? setVal(val.toString()) : undefined;
144
+ if (minValue && minValue <= val) allowNegative ? setUserInput(val.toString()) : val >= 0 ? setUserInput(val.toString()) : undefined;else if (!minValue) allowNegative ? setUserInput(val.toString()) : val >= 0 ? setUserInput(val.toString()) : undefined;
167
145
  }
168
146
  };
169
147
 
@@ -177,19 +155,45 @@ var NumberField = function NumberField(_ref) {
177
155
  return operatorState;
178
156
  };
179
157
 
180
- var renderNumberFieldElements = function renderNumberFieldElements() {
181
- return /*#__PURE__*/_jsxs(_Fragment, {
182
- children: [prefix && /*#__PURE__*/_jsx(PrefixContainer, {
158
+ return /*#__PURE__*/_jsxs(Container, {
159
+ children: [/*#__PURE__*/_jsxs(LabelContainer, {
160
+ size: size,
161
+ children: [required && /*#__PURE__*/_jsx(LabelIcon, {
162
+ size: size,
163
+ "data-testid": 'labelIcon',
164
+ children: /*#__PURE__*/_jsx(SystemIcons.Asterisk, {
165
+ color: COLORS.critical_500
166
+ })
167
+ }), /*#__PURE__*/_jsx(LabelText, {
168
+ children: label
169
+ })]
170
+ }), /*#__PURE__*/_jsxs(InputContainer, {
171
+ size: size,
172
+ "data-testid": 'inputContainer',
173
+ tabIndex: -1,
174
+ className: 'numberField'.concat(disabled ? ' disabled' : '').concat(readOnly ? ' readOnly' : '').concat(fieldState ? " ".concat(fieldState) : ''),
175
+ children: [/*#__PURE__*/_jsxs(InputWrapper, {
183
176
  size: size,
184
- disabled: disabled,
185
- className: "operator",
186
- children: prefix
177
+ children: [prefix && /*#__PURE__*/_jsx(PrefixContainer, {
178
+ size: size,
179
+ children: prefix
180
+ }), /*#__PURE__*/_jsx(NumberInput, {
181
+ fieldSize: size,
182
+ placeholder: "Enter number",
183
+ value: userInput,
184
+ tabIndex: disabled || readOnly ? -1 : 0,
185
+ onChange: function onChange(e) {
186
+ return handleInput(e);
187
+ },
188
+ onKeyDown: function onKeyDown(e) {
189
+ return handleKeyPress(e);
190
+ }
191
+ })]
187
192
  }), /*#__PURE__*/_jsxs(OperatorWrapper, {
188
193
  "data-testid": 'operators',
189
194
  size: size,
190
- className: "operator",
191
195
  children: [/*#__PURE__*/_jsx(IconButton, {
192
- tabIndex: 0,
196
+ tabIndex: -1,
193
197
  variant: "secondary",
194
198
  shape: "square",
195
199
  action: function action() {
@@ -203,7 +207,7 @@ var NumberField = function NumberField(_ref) {
203
207
  }), /*#__PURE__*/_jsx("div", {
204
208
  className: "divider"
205
209
  }), /*#__PURE__*/_jsx(IconButton, {
206
- tabIndex: 0,
210
+ tabIndex: -1,
207
211
  variant: "secondary",
208
212
  shape: "square",
209
213
  action: function action() {
@@ -216,82 +220,6 @@ var NumberField = function NumberField(_ref) {
216
220
  })
217
221
  })]
218
222
  })]
219
- });
220
- };
221
-
222
- var renderNumberInputElements = function renderNumberInputElements() {
223
- return /*#__PURE__*/_jsxs(_Fragment, {
224
- children: [/*#__PURE__*/_jsx(LeftOperator, {
225
- "data-testid": 'leftOperator',
226
- size: size,
227
- className: "operator",
228
- children: /*#__PURE__*/_jsx(IconButton, {
229
- tabIndex: 0,
230
- variant: "secondary",
231
- shape: "square",
232
- action: function action() {
233
- return subtractInterval();
234
- },
235
- useTransparentBackground: true,
236
- disabled: disabled || readOnly || isLocked(userInput, 'subtract'),
237
- children: /*#__PURE__*/_jsx(SystemIcons.Minus, {
238
- size: "14px"
239
- })
240
- })
241
- }), /*#__PURE__*/_jsx(RightOperator, {
242
- "data-testid": 'rightOperator',
243
- size: size,
244
- className: "operator",
245
- children: /*#__PURE__*/_jsx(IconButton, {
246
- tabIndex: 0,
247
- variant: "secondary",
248
- shape: "square",
249
- action: function action() {
250
- return addInterval();
251
- },
252
- useTransparentBackground: true,
253
- disabled: disabled || readOnly || isLocked(userInput, 'add'),
254
- children: /*#__PURE__*/_jsx(SystemIcons.Plus, {
255
- size: "14px"
256
- })
257
- })
258
- })]
259
- });
260
- };
261
-
262
- return /*#__PURE__*/_jsxs(Container, {
263
- children: [/*#__PURE__*/_jsxs(LabelContainer, {
264
- size: size,
265
- children: [required && /*#__PURE__*/_jsx(LabelIcon, {
266
- size: size,
267
- "data-testid": 'labelIcon',
268
- children: /*#__PURE__*/_jsx(SystemIcons.Asterisk, {
269
- color: COLORS.critical_500
270
- })
271
- }), /*#__PURE__*/_jsx(LabelText, {
272
- children: label
273
- })]
274
- }), /*#__PURE__*/_jsxs(InputContainer, {
275
- type: type,
276
- size: size,
277
- tabIndex: -1,
278
- children: [/*#__PURE__*/_jsx(NumberInput, {
279
- type: type,
280
- "data-testid": 'numberInput',
281
- fieldSize: size,
282
- hasPrefix: !!prefix,
283
- placeholder: placeholder ? placeholder : 'Enter number',
284
- value: userInput,
285
- ref: elementRef,
286
- tabIndex: disabled || readOnly ? -1 : 0,
287
- onChange: function onChange(e) {
288
- return handleInput(e);
289
- },
290
- onKeyDown: function onKeyDown(e) {
291
- return handleKeyPress(e);
292
- },
293
- className: 'numberField'.concat(disabled ? ' disabled' : '').concat(readOnly ? ' readOnly' : '').concat(fieldState ? " ".concat(fieldState) : '')
294
- }), type === 'NumberField' && renderNumberFieldElements(), type === 'NumberInput' && renderNumberInputElements()]
295
223
  }), note && /*#__PURE__*/_jsxs(NoteContainer, {
296
224
  className: 'noteField'.concat(fieldState ? " ".concat(fieldState) : ''),
297
225
  children: [/*#__PURE__*/_jsx(NoteIcon, {
@@ -318,10 +246,7 @@ NumberField.propTypes = {
318
246
  disabled: _pt.bool,
319
247
  readOnly: _pt.bool,
320
248
  valid: _pt.bool,
321
- value: _pt.number,
322
- placeholder: _pt.string,
323
- type: _pt.oneOf(['NumberField', 'NumberInput']).isRequired,
324
- onChange: _pt.func
249
+ defaultVal: _pt.number
325
250
  };
326
251
  export default NumberField;
327
252
  //# sourceMappingURL=NumberField.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/InputFields/NumberField.tsx"],"names":["React","styled","IconButton","useFocusVisibleRef","SystemIcons","COLORS","focusStyles","Z_INDEXES","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXXSStyling","ComponentXSStyling","Size","Container","div","LabelContainer","neutral_500","props","size","Small","Regular","LabelText","LabelIcon","PrefixContainer","disabled","neutral_300","OperatorWrapper","Medium","neutral_200","NumberInput","input","neutral_400","fieldSize","black","type","hasPrefix","Italic","primary_800","primary_700","neutral_100","correct_400","critical_400","NoteLabel","NoteIcon","NoteContainer","correct_500","critical_500","InputContainer","focus","LeftOperator","RightOperator","NumberField","label","note","noteIcon","required","prefix","interval","minValue","maxValue","allowNegative","decimalPrecision","readOnly","valid","value","placeholder","onChange","useState","toString","userInput","setUserInput","fieldState","undefined","elementRef","setVal","e","handleKeyPress","key","addInterval","subtractInterval","handleInput","preventDefault","simpleRegex","RegExp","decimalFormationRegEx","negativeDecimalFormationRegEx","allowNegativeRegex","decimalPrecisionRegex","negativeAndDecimalRegex","val","target","length","charAt","test","isInRange","replace","indexOf","lastIndexOf","includes","isDecimal","x","parseFloat","toFixed","parseInt","isNaN","Math","round","pow","isLocked","operator","operatorState","renderNumberFieldElements","renderNumberInputElements","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { IconButton } from '../Button';\nimport { useFocusVisibleRef } from '../common';\nimport { SystemIcons } from '../icons';\nimport { COLORS, focusStyles, Z_INDEXES } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXXSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Size } from '../types';\n\nconst Container = styled.div``;\n\nconst LabelContainer = styled.div<{size: Size}>`\n margin-bottom: 4px;\n color: ${COLORS.neutral_500};\n display: flex;\n ${props=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular,null) : ComponentXSStyling(ComponentTextStyle.Regular,null)}\n`;\n\nconst LabelText = styled.div``;\n\nconst LabelIcon = styled.div<{size: Size}>`\n margin-right: ${props => props.size === Size.Small?'6px':'8px'};\n svg {\n height: 9px;\n width: 9px;\n }\n`;\n\nconst PrefixContainer = styled.div<{size: Size, disabled: boolean}>`\n width: ${props => props.size === Size.Small?'10px':'11px'};\n height: ${props => props.size === Size.Small?'20px':'24px'};\n color: ${props => props.disabled ? COLORS.neutral_300 : COLORS.neutral_500};\n ${props=>props.size===Size.Small?ComponentSStyling(ComponentTextStyle.Regular,null):ComponentMStyling(ComponentTextStyle.Regular,null)}\n position: absolute;\n padding: ${props => props.size === Size.Small?'14px 0 14px 16px':'16px 0 16px 16px'};\n`;\n\nconst OperatorWrapper = styled.div<{size: Size}>`\n position: absolute;\n top: 0;\n right:0;\n display: flex;\n margin:${props => props.size === Size.Medium?'4px 0':''};\n svg {\n height: 14px;\n width: 14px;\n }\n .divider {\n margin: 16px 0;\n background: ${COLORS.neutral_200};\n width: 1px;\n }\n`;\n\nconst NumberInput = styled.input<{fieldSize: Size, hasPrefix: boolean, type: string}>`\n width: 100%; \n border: none;\n border-radius: 4px;\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n outline: none;\n color: ${COLORS.neutral_500};\n ${props => props.fieldSize === Size.Small?ComponentSStyling(ComponentTextStyle.Regular, COLORS.black):ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n ${props => props.type === 'NumberField' ? `\n padding: ${props.fieldSize === Size.Small?'14px 97px 14px 16px':'16px 97px 16px 16px'};\n padding-left: ${props.hasPrefix ? '30px':''};\n ` : ''}\n\n ${props => props.type === 'NumberInput' ? `\n padding: ${props.fieldSize === Size.Small?'14px 48px':'16px 48px'};\n ` : ''}\n\n &::placeholder {\n ${props => props.fieldSize === Size.Small?ComponentSStyling(ComponentTextStyle.Italic, null):ComponentMStyling(ComponentTextStyle.Italic, null)}\n }\n\n &:focus:not(.focus-visible):not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n \n &.focus-visible {\n ${focusStyles}\n }\n\n &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n }\n\n &.disabled {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n cursor: not-allowed;\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n\n &::placeholder {\n color: ${COLORS.neutral_300};\n }\n }\n\n &.readOnly {\n background: ${COLORS.neutral_100};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n cursor: not-allowed;\n background: ${COLORS.neutral_100};\n cursor: not-allowed;\n pointer-events: none;\n color: ${COLORS.neutral_500};\n }\n\n &.valid {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_400};\n }\n\n &.invalid {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n }\n`;\n\nconst NoteLabel = styled.div<{size: Size}>`\n color: ${COLORS.neutral_500};\n ${props=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular,null) : ComponentXSStyling(ComponentTextStyle.Regular,null)} \n`;\n\nconst NoteIcon = styled.div`\n svg {\n height: 16px;\n }\n`;\n\nconst NoteContainer = styled.div`\n display: flex;\n margin-top: 5px;\n\n &.valid {\n ${NoteLabel} {\n color: ${COLORS.correct_500};\n }\n\n ${NoteIcon} {\n svg path {\n fill: ${COLORS.correct_500};\n }\n }\n }\n\n &.invalid {\n ${NoteLabel} {\n color: ${COLORS.critical_500};\n }\n\n ${NoteIcon} {\n svg path {\n fill: ${COLORS.critical_500};\n }\n }\n }\n`;\n\nconst InputContainer = styled.div<{size: Size, type:string}>`\n min-width: ${props => props.type === 'NumberField' ? '160px' : '144px'};\n height: ${props => props.size === Size.Small?'48px':'56px'};\n display: flex;\n position: relative;\n\n input.focus-visible ~ div.operator {\n z-index: ${Z_INDEXES.focus};\n }\n`;\n\nconst LeftOperator = styled.div<{size: Size}>`\n position: absolute;\n top: ${props => props.size === Size.Small ? '0' : '4px'};\n left: 0;\n`;\n\nconst RightOperator = styled.div<{size: Size}>`\n position: absolute;\n top: ${props => props.size === Size.Small ? '0' : '4px'};\n right: 0;\n`;\n\ntype NumberFieldProps = {\n size: Size.Small | Size.Medium;\n prefix?: string;\n interval?: number;\n label: string;\n note?: string;\n noteIcon?: React.ReactNode;\n required?: boolean;\n minValue?: number;\n maxValue?: number;\n allowNegative?: boolean;\n decimalPrecision?: number;\n disabled?: boolean;\n readOnly?: boolean;\n valid?: boolean;\n value?: number;\n placeholder?: string;\n type: 'NumberField' | 'NumberInput';\n onChange?: (e: string) => void;\n}\n\nconst NumberField: React.FunctionComponent<NumberFieldProps> = (\n {size=Size.Small, \n label,\n note, \n noteIcon, \n required, \n prefix,\n interval=1, \n minValue, \n maxValue, \n allowNegative, \n decimalPrecision, \n disabled=false, \n readOnly=false, \n valid,\n value,\n placeholder,\n type,\n onChange}) => {\n const [userInput, setUserInput] = React.useState(value?value.toString():'');\n let fieldState = (valid!==undefined) ? (valid?'valid':'invalid') : undefined;\n\n const elementRef = useFocusVisibleRef();\n\n const setVal = (e: string) => {\n setUserInput(e);\n onChange && onChange(e);\n }\n\n const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\n switch(e.key){\n case 'ArrowUp': addInterval();\n break;\n case 'ArrowDown': subtractInterval();\n break;\n default: break;\n }\n }\n\n const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {\n e.preventDefault();\n let simpleRegex = new RegExp(/^[0-9]\\d*$/);\n let decimalFormationRegEx = new RegExp(/^[0-9]\\d*\\.$/); \n let negativeDecimalFormationRegEx = new RegExp(/^[-][0-9]\\d*\\.$/);\n \n let allowNegativeRegex = new RegExp(/^[-][0-9]\\d*$/); \n let decimalPrecisionRegex = decimalPrecision ? new RegExp(`^[0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`) : undefined;\n let negativeAndDecimalRegex = (decimalPrecision && allowNegative) ? new RegExp(`^[-][0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`): undefined;\n \n let val = e.target.value; \n if(val!==''){\n if(allowNegative && decimalPrecision){\n if(val.length===1 && val.charAt(0)==='-')\n setVal(val);\n else{\n if((negativeAndDecimalRegex!.test(val) || decimalPrecisionRegex!.test(val)) && isInRange(val,true))\n setVal(val);\n\n else if((negativeDecimalFormationRegEx.test(val) || decimalFormationRegEx.test(val)) && isInRange(val.replace('.',''),true))\n setVal(val);\n \n else if((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val,true))\n setVal(val);\n }\n }\n\n else if(allowNegative){\n if(val.length===1 && val.charAt(0)==='-')\n setVal(val);\n else if((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val,false))\n setVal(val);\n }\n\n else if(decimalPrecision && (val.indexOf('.')===val.lastIndexOf('.')) && isInRange(val,true)){\n if(decimalPrecisionRegex!.test(val))\n setVal(val);\n else if(decimalFormationRegEx.test(val))\n setVal(val);\n else if(!val.includes('.') && simpleRegex.test(val))\n setVal(val);\n }\n\n else if(simpleRegex.test(val) && isInRange(val, false)){\n setVal(val);\n }\n }\n\n if(val==='')\n setVal('');\n }\n\n const isInRange = (value: string, isDecimal: boolean): boolean => {\n let x = isDecimal ? parseFloat(value).toFixed(decimalPrecision) : parseInt(value);\n if(minValue && minValue>x)\n return false;\n else if(maxValue && maxValue<x)\n return false;\n else\n return true;\n }\n\n const addInterval = () => {\n let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\n val = isNaN(val) && userInput === '' ? (minValue ? minValue-1 : 0) : val;\n if(!isNaN(val)){\n if(decimalPrecision)\n val = Math.round((val+interval)*Math.pow(10,decimalPrecision!))/Math.pow(10,decimalPrecision!);\n else\n val +=1;\n\n if(maxValue && maxValue>=val)\n setVal(val.toString());\n else if(!maxValue)\n setVal(val.toString());\n }\n }\n\n const subtractInterval = () => {\n let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\n val = isNaN(val) && userInput === '' ? (maxValue ? maxValue+1 : 0) : val;\n if(!isNaN(val)){\n if(decimalPrecision)\n val = Math.round((val-interval)*Math.pow(10,decimalPrecision!))/Math.pow(10,decimalPrecision!);\n else\n val -=1;\n \n if(minValue && minValue<=val)\n allowNegative ? setVal(val.toString()) : (val>=0 ? setVal(val.toString()) : undefined);\n else if(!minValue)\n allowNegative ? setVal(val.toString()) : (val>=0 ? setVal(val.toString()) : undefined);\n }\n }\n\n const isLocked = (input: string, operator: string): boolean => {\n let val = decimalPrecision ? parseFloat(input) : parseInt(input);\n val = isNaN(val) && userInput === '' ? 0 : val;\n let operatorState = false;\n if(operator === 'add' && maxValue)\n operatorState = val < maxValue ? false : true;\n \n if(operator === 'subtract' && minValue)\n operatorState = val > minValue ? false : true;\n\n if(operator === 'subtract' && !minValue && !allowNegative)\n operatorState = val > 0 ? false : true;\n\n return operatorState;\n }\n\n const renderNumberFieldElements = () => {\n return(\n <>\n {prefix && <PrefixContainer size={size} disabled={disabled} className='operator'>\n {prefix}\n </PrefixContainer>}\n\n <OperatorWrapper data-testid={'operators'} size={size} className='operator'>\n <IconButton tabIndex={0} variant='secondary' shape='square' action={()=>subtractInterval()} useTransparentBackground disabled={disabled || readOnly || isLocked(userInput,'subtract')}>\n <SystemIcons.Minus size='14px'/>\n </IconButton> \n <div className='divider'></div>\n <IconButton tabIndex={0} variant='secondary' shape='square' action={()=>addInterval()} useTransparentBackground disabled={disabled || readOnly || isLocked(userInput,'add')}>\n <SystemIcons.Plus size='14px'/>\n </IconButton>\n </OperatorWrapper>\n </>)\n }\n\n const renderNumberInputElements = () => {\n return(\n <>\n <LeftOperator data-testid={'leftOperator'} size={size} className='operator'>\n <IconButton tabIndex={0} variant='secondary' shape='square' action={()=>subtractInterval()} useTransparentBackground disabled={disabled || readOnly || isLocked(userInput,'subtract')}>\n <SystemIcons.Minus size='14px'/>\n </IconButton>\n </LeftOperator>\n <RightOperator data-testid={'rightOperator'} size={size} className='operator'>\n <IconButton tabIndex={0} variant='secondary' shape='square' action={()=>addInterval()} useTransparentBackground disabled={disabled || readOnly || isLocked(userInput,'add')}>\n <SystemIcons.Plus size='14px'/>\n </IconButton>\n </RightOperator>\n </>)\n }\n\n return (\n <Container>\n <LabelContainer size={size}>\n {required && <LabelIcon size={size} data-testid={'labelIcon'}>\n <SystemIcons.Asterisk color={COLORS.critical_500}/>\n </LabelIcon>\n }\n <LabelText>\n {label}\n </LabelText>\n </LabelContainer>\n\n <InputContainer type={type} size={size} tabIndex={-1}>\n <NumberInput type={type} data-testid={'numberInput'} fieldSize={size} hasPrefix={!!prefix} placeholder={placeholder ? placeholder : 'Enter number'}\n value={userInput} ref={elementRef}\n tabIndex={(disabled || readOnly) ? -1 : 0} onChange={e=>handleInput(e)} onKeyDown={e=>handleKeyPress(e)}\n className={'numberField'.concat(disabled?' disabled':'')\n .concat(readOnly?' readOnly':'')\n .concat(fieldState?` ${fieldState}`:'')}/>\n \n {type === 'NumberField' && renderNumberFieldElements()}\n {type === 'NumberInput' && renderNumberInputElements()}\n </InputContainer>\n\n {note && <NoteContainer className={'noteField'.concat(fieldState?` ${fieldState}`:'')}>\n <NoteIcon>\n {noteIcon}\n </NoteIcon>\n <NoteLabel size={size}>\n {note}\n </NoteLabel> \n </NoteContainer>\n }\n </Container>\n ); \n}\n\nexport default NumberField;\n"],"file":"NumberField.js"}
1
+ {"version":3,"sources":["../../src/InputFields/NumberField.tsx"],"names":["React","styled","IconButton","SystemIcons","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXXSStyling","ComponentXSStyling","Size","Container","div","LabelContainer","neutral_500","props","size","Small","Regular","LabelText","LabelIcon","InputWrapper","PrefixContainer","OperatorWrapper","Medium","neutral_200","NumberInput","input","fieldSize","black","Italic","NoteLabel","NoteIcon","NoteContainer","correct_500","critical_500","InputContainer","neutral_400","primary_700","primary_800","neutral_100","neutral_300","correct_400","critical_400","NumberField","label","note","noteIcon","required","prefix","interval","minValue","maxValue","allowNegative","decimalPrecision","disabled","readOnly","valid","defaultVal","useState","toString","userInput","setUserInput","fieldState","undefined","handleKeyPress","e","key","addInterval","subtractInterval","handleInput","preventDefault","simpleRegex","RegExp","decimalFormationRegEx","negativeDecimalFormationRegEx","allowNegativeRegex","decimalPrecisionRegex","negativeAndDecimalRegex","val","target","value","length","charAt","test","isInRange","replace","indexOf","lastIndexOf","includes","isDecimal","x","parseFloat","toFixed","parseInt","isNaN","Math","round","pow","isLocked","operator","operatorState","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { COLORS } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXXSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Size } from '../types';\n\nconst Container = styled.div``;\n\nconst LabelContainer = styled.div<{size: Size}>`\n margin-bottom: 4px;\n color: ${COLORS.neutral_500};\n display: flex;\n ${props=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular,null) : ComponentXSStyling(ComponentTextStyle.Regular,null)}\n`;\n\nconst LabelText = styled.div``;\n\nconst LabelIcon = styled.div<{size: Size}>`\n margin-right: ${props => props.size === Size.Small?'6px':'8px'};\n svg {\n height: 9px;\n width: 9px;\n }\n`;\n\nconst InputWrapper = styled.div<{size: Size}>`\n margin: ${props => props.size === Size.Small?'14px 0 14px 16px':'16px 0 16px 16px'};\n display: flex;\n flex-grow: 1;\n`;\n\nconst PrefixContainer = styled.div<{size: Size}>`\n margin-right: 4px;\n width: ${props => props.size === Size.Small?'10px':'11px'};\n height: ${props => props.size === Size.Small?'20px':'24px'};\n color: ${COLORS.neutral_500};\n ${props=>props.size===Size.Small?ComponentSStyling(ComponentTextStyle.Regular,null):ComponentMStyling(ComponentTextStyle.Regular,null)}\n`;\n\nconst OperatorWrapper = styled.div<{size: Size}>`\n display: flex;\n margin:${props => props.size === Size.Medium?'4px 0':''};\n svg {\n height: 14px;\n width: 14px;\n }\n .divider {\n margin: 16px 0;\n background: ${COLORS.neutral_200};\n width: 1px;\n }\n`;\n\nconst NumberInput = styled.input<{fieldSize: Size}>`\n width: 100%; \n height: ${props => props.fieldSize === Size.Small?'20px':'24px'}; \n border: none;\n color: ${COLORS.neutral_500};\n padding: 0; \n ${props => props.fieldSize === Size.Small?ComponentSStyling(ComponentTextStyle.Regular, COLORS.black):ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n &:hover, &:focus, &:active {\n outline: none;\n }\n\n &::placeholder {\n ${props => props.fieldSize === Size.Small?ComponentSStyling(ComponentTextStyle.Italic, null):ComponentMStyling(ComponentTextStyle.Italic, null)}\n }\n`;\n\nconst NoteLabel = styled.div<{size: Size}>`\n color: ${COLORS.neutral_500};\n ${props=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular,null) : ComponentXSStyling(ComponentTextStyle.Regular,null)} \n`;\n\nconst NoteIcon = styled.div`\n svg {\n height: 16px;\n }\n`;\n\nconst NoteContainer = styled.div`\n display: flex;\n margin-top: 5px;\n\n &.valid {\n ${NoteLabel} {\n color: ${COLORS.correct_500};\n }\n\n ${NoteIcon} {\n svg path {\n fill: ${COLORS.correct_500};\n }\n }\n }\n\n &.invalid {\n ${NoteLabel} {\n color: ${COLORS.critical_500};\n }\n\n ${NoteIcon} {\n svg path {\n fill: ${COLORS.critical_500};\n }\n }\n }\n`;\n\nconst InputContainer = styled.div<{size: Size}>`\n min-width: 160px;\n height: ${props => props.size === Size.Small?'48px':'56px'};\n display: flex;\n border: 0;\n border-radius: 4px;\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n\n &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n }\n\n &:focus-within:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n\n &:active:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n\n &.disabled {\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n cursor: not-allowed;\n \n ${PrefixContainer}{\n color: ${COLORS.neutral_300};\n }\n\n ${NumberInput}{\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n\n &::placeholder {\n color: ${COLORS.neutral_300};\n }\n }\n }\n\n &.readOnly {\n background: ${COLORS.neutral_100};\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n cursor: not-allowed;\n\n ${NumberInput}{\n background: ${COLORS.neutral_100};\n cursor: not-allowed;\n pointer-events: none;\n color: ${COLORS.neutral_500};\n }\n }\n\n &.valid {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_400};\n }\n\n &.invalid {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n }\n`;\n\ntype NumberFieldProps = {\n size: Size.Small | Size.Medium;\n prefix?: string;\n interval?: number;\n label: string;\n note?: string;\n noteIcon?: React.ReactNode;\n required?: boolean;\n minValue?: number;\n maxValue?: number;\n allowNegative?: boolean;\n decimalPrecision?: number;\n disabled?: boolean;\n readOnly?: boolean;\n valid?: boolean;\n defaultVal?: number;\n}\n\nconst NumberField: React.FunctionComponent<NumberFieldProps> = (\n {size=Size.Small, \n label,\n note, \n noteIcon, \n required, \n prefix,\n interval=1, \n minValue, \n maxValue, \n allowNegative, \n decimalPrecision, \n disabled=false, \n readOnly=false, \n valid,\n defaultVal}) => {\n const [userInput, setUserInput] = React.useState(defaultVal?defaultVal.toString():'');\n let fieldState = (valid!==undefined) ? (valid?'valid':'invalid') : undefined;\n\n const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\n switch(e.key){\n case 'ArrowUp': addInterval();\n break;\n case 'ArrowDown': subtractInterval();\n break;\n default: break;\n }\n }\n\n const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {\n e.preventDefault();\n let simpleRegex = new RegExp(/^[0-9]\\d*$/);\n let decimalFormationRegEx = new RegExp(/^[0-9]\\d*\\.$/); \n let negativeDecimalFormationRegEx = new RegExp(/^[-][0-9]\\d*\\.$/);\n \n let allowNegativeRegex = new RegExp(/^[-][0-9]\\d*$/); \n let decimalPrecisionRegex = decimalPrecision ? new RegExp(`^[0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`) : undefined;\n let negativeAndDecimalRegex = (decimalPrecision && allowNegative) ? new RegExp(`^[-][0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`): undefined;\n \n let val = e.target.value; \n if(val!==''){\n if(allowNegative && decimalPrecision){\n if(val.length===1 && val.charAt(0)==='-')\n setUserInput(val);\n else{\n if((negativeAndDecimalRegex!.test(val) || decimalPrecisionRegex!.test(val)) && isInRange(val,true))\n setUserInput(val);\n\n else if((negativeDecimalFormationRegEx.test(val) || decimalFormationRegEx.test(val)) && isInRange(val.replace('.',''),true))\n setUserInput(val);\n \n else if((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val,true))\n setUserInput(val);\n }\n }\n\n else if(allowNegative){\n if(val.length===1 && val.charAt(0)==='-')\n setUserInput(val);\n else if((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val,false))\n setUserInput(val);\n }\n\n else if(decimalPrecision && (val.indexOf('.')===val.lastIndexOf('.')) && isInRange(val,true)){\n if(decimalPrecisionRegex!.test(val))\n setUserInput(val);\n else if(decimalFormationRegEx.test(val))\n setUserInput(val);\n else if(!val.includes('.') && simpleRegex.test(val))\n setUserInput(val);\n }\n\n else if(simpleRegex.test(val) && isInRange(val, false)){\n setUserInput(val);\n }\n }\n\n if(val==='')\n setUserInput('');\n }\n\n const isInRange = (value: string, isDecimal: boolean): boolean => {\n let x = isDecimal ? parseFloat(value).toFixed(decimalPrecision) : parseInt(value);\n if(minValue && minValue>x)\n return false;\n else if(maxValue && maxValue<x)\n return false;\n else\n return true;\n }\n\n const addInterval = () => {\n let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\n val = isNaN(val) && userInput === '' ? (minValue ? minValue-1 : 0) : val;\n if(!isNaN(val)){\n if(decimalPrecision)\n val = Math.round((val+interval)*Math.pow(10,decimalPrecision!))/Math.pow(10,decimalPrecision!);\n else\n val +=1;\n\n if(maxValue && maxValue>=val)\n setUserInput(val.toString());\n else if(!maxValue)\n setUserInput(val.toString());\n }\n }\n\n const subtractInterval = () => {\n let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\n val = isNaN(val) && userInput === '' ? (maxValue ? maxValue+1 : 0) : val;\n if(!isNaN(val)){\n if(decimalPrecision)\n val = Math.round((val-interval)*Math.pow(10,decimalPrecision!))/Math.pow(10,decimalPrecision!);\n else\n val -=1;\n \n if(minValue && minValue<=val)\n allowNegative ? setUserInput(val.toString()) : (val>=0 ? setUserInput(val.toString()) : undefined);\n else if(!minValue)\n allowNegative ? setUserInput(val.toString()) : (val>=0 ? setUserInput(val.toString()) : undefined);\n }\n }\n\n const isLocked = (input: string, operator: string): boolean => {\n let val = decimalPrecision ? parseFloat(input) : parseInt(input);\n val = isNaN(val) && userInput === '' ? 0 : val;\n let operatorState = false;\n if(operator === 'add' && maxValue)\n operatorState = val < maxValue ? false : true;\n \n if(operator === 'subtract' && minValue)\n operatorState = val > minValue ? false : true;\n\n if(operator === 'subtract' && !minValue && !allowNegative)\n operatorState = val > 0 ? false : true;\n\n return operatorState;\n }\n\n return (\n <Container>\n <LabelContainer size={size}>\n {required && <LabelIcon size={size} data-testid={'labelIcon'}>\n <SystemIcons.Asterisk color={COLORS.critical_500}/>\n </LabelIcon>\n }\n <LabelText>\n {label}\n </LabelText>\n </LabelContainer>\n\n <InputContainer size={size} data-testid={'inputContainer'} tabIndex={-1} className={'numberField'.concat(disabled?' disabled':'')\n .concat(readOnly?' readOnly':'')\n .concat(fieldState?` ${fieldState}`:'')}>\n <InputWrapper size={size}>\n {prefix && <PrefixContainer size={size}>\n {prefix}\n </PrefixContainer>}\n <NumberInput fieldSize={size} placeholder='Enter number' value={userInput} tabIndex={(disabled || readOnly) ? -1 : 0} onChange={e=>handleInput(e)} onKeyDown={e=>handleKeyPress(e)}/>\n </InputWrapper>\n\n <OperatorWrapper data-testid={'operators'} size={size}>\n <IconButton tabIndex={-1} variant='secondary' shape='square' action={()=>subtractInterval()} useTransparentBackground disabled={disabled || readOnly || isLocked(userInput,'subtract')}>\n <SystemIcons.Minus size='14px'/>\n </IconButton> \n <div className='divider'></div>\n <IconButton tabIndex={-1} variant='secondary' shape='square' action={()=>addInterval()} useTransparentBackground disabled={disabled || readOnly || isLocked(userInput,'add')}>\n <SystemIcons.Plus size='14px'/>\n </IconButton>\n </OperatorWrapper>\n </InputContainer>\n\n {note && <NoteContainer className={'noteField'.concat(fieldState?` ${fieldState}`:'')}>\n <NoteIcon>\n {noteIcon}\n </NoteIcon>\n <NoteLabel size={size}>\n {note}\n </NoteLabel> \n </NoteContainer>\n }\n </Container>\n ); \n}\n\nexport default NumberField;\n"],"file":"NumberField.js"}
@@ -33,11 +33,9 @@ var _types = require("../types");
33
33
 
34
34
  var _common = require("../common");
35
35
 
36
- var _Button = require("../Button");
37
-
38
36
  var _jsxRuntime = require("react/jsx-runtime");
39
37
 
40
- var _templateObject, _templateObject2;
38
+ var _templateObject;
41
39
 
42
40
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
43
41
 
@@ -49,8 +47,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
49
47
 
50
48
  var Row = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n position: relative;\n\n color: ", ";\n background-color: ", ";\n\n\n cursor: default;\n\n &.interactive {\n cursor: pointer;\n }\n\n &.interactive.disabled {\n cursor: not-allowed;\n }\n\n &.interactive:hover:not(.in-action):not(.disabled) {\n background-color: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n &.interactive:active:not(.in-action):not(.disabled) {\n background-color: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n &.interactive:focus {\n ", "\n }\n\n &.disabled {\n .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n color: ", ";\n }\n }\n\n\n &.small {\n min-height: 48px;\n padding: 0 8px;\n\n .list-item-icon {\n margin-right: 8px;\n }\n\n .list-item-main-text {\n ", "\n }\n\n .list-item-actions {\n margin-right: -8px;\n }\n }\n\n &.medium {\n min-height: 56px;\n padding: 0 12px;\n\n .list-item-icon {\n margin-right: 12px;\n }\n\n .list-item-main-text {\n ", "\n }\n\n .list-item-actions {\n margin-right: -12px;\n }\n }\n\n &.large {\n min-height: 64px;\n padding: 0 16px;\n\n .list-item-icon {\n margin-right: 16px;\n }\n\n .list-item-main-text {\n ", "\n }\n\n .list-item-actions {\n margin-right: -16px;\n }\n }\n\n &.overlay {\n padding: 0 4px;\n\n .list-item-actions {\n margin-right: -4px;\n }\n }\n\n .list-item-icon {\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n .list-item-content {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n }\n\n .list-item-main-text {\n }\n\n .list-item-secondary-text {\n ", "\n }\n\n .list-item-note {\n color: ", ";\n word-break: initial;\n ", "\n }\n\n .list-item-note.with-tooltip {\n cursor: pointer;\n\n > div {\n text-decoration-line: underline;\n text-decoration-style: dashed;\n text-underline-offset: 1px;\n text-decoration-thickness: 1px;\n }\n }\n\n .list-item-actions {\n color: ", ";\n display: flex;\n align-items: center;\n\n button div {\n background-color: transparent;\n }\n }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_600, _styles.COLORS.white, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.Z_INDEXES.hover, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.Z_INDEXES.active, _styles.focusStyles, _styles.COLORS.neutral_300, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null), (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null), _styles.COLORS.neutral_600, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), _styles.COLORS.neutral_600);
51
49
 
52
- var RightIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)([""])));
53
-
54
50
  var ListRow = function ListRow(_ref) {
55
51
  var _ref$size = _ref.size,
56
52
  size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
@@ -64,10 +60,7 @@ var ListRow = function ListRow(_ref) {
64
60
  noteTooltip = _ref.noteTooltip,
65
61
  _ref$disabled = _ref.disabled,
66
62
  disabled = _ref$disabled === void 0 ? false : _ref$disabled,
67
- action = _ref.action,
68
- rightSideIcon = _ref.rightSideIcon,
69
- rightSideAction = _ref.rightSideAction,
70
- rightSideIconDisabled = _ref.rightSideIconDisabled;
63
+ action = _ref.action;
71
64
 
72
65
  var _React$useState = React.useState(false),
73
66
  _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -132,17 +125,6 @@ var ListRow = function ListRow(_ref) {
132
125
  disabled: disabled || dropdown.disabled,
133
126
  icon: variant === 'overlay' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ArrowDropDown, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.MoreVertical, {})
134
127
  }))
135
- }), !!rightSideIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(RightIcon, {
136
- className: 'list-item-actions',
137
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
138
- action: function action() {
139
- return !!rightSideAction && rightSideAction();
140
- },
141
- variant: "secondary",
142
- shape: "circular",
143
- disabled: disabled || rightSideIconDisabled,
144
- children: rightSideIcon
145
- })
146
128
  })]
147
129
  });
148
130
  };
@@ -155,10 +137,7 @@ ListRow.propTypes = {
155
137
  note: _propTypes.default.string,
156
138
  noteTooltip: _propTypes.default.string,
157
139
  disabled: _propTypes.default.bool,
158
- action: _propTypes.default.func,
159
- rightSideIcon: _propTypes.default.node,
160
- rightSideAction: _propTypes.default.func,
161
- rightSideIconDisabled: _propTypes.default.bool
140
+ action: _propTypes.default.func
162
141
  };
163
142
  var _default = ListRow;
164
143
  exports.default = _default;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/List/ListRow.tsx"],"names":["Row","styled","div","COLORS","neutral_100","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focusStyles","neutral_300","ComponentTextStyle","Regular","RightIcon","ListRow","size","Size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","rightSideIcon","rightSideAction","rightSideIconDisabled","React","useState","inAction","setInAction","handleKeyPress","e","key","rowClassName","concat","defaultOnMouseDownHandler","Large","Small","XSmall"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAUA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;;;;;AAEA,IAAMA,GAAG,GAAGC,0BAAOC,GAAV,y6EAKoBC,eAAOC,WAL3B,EASED,eAAOE,WATT,EAUaF,eAAOG,KAVpB,EAwBeH,eAAOI,UAxBtB,EAyBIJ,eAAOK,WAzBX,EA0BMC,kBAAUC,KA1BhB,EA8BeP,eAAOQ,WA9BtB,EA+BIR,eAAOS,WA/BX,EAgCMH,kBAAUI,MAhChB,EAoCHC,mBApCG,EAyCMX,eAAOY,WAzCb,EAuDD,+BAAkBC,2BAAmBC,OAArC,EAA8C,IAA9C,CAvDC,EAwED,+BAAkBD,2BAAmBC,OAArC,EAA8C,IAA9C,CAxEC,EAyFD,+BAAkBD,2BAAmBC,OAArC,EAA8C,IAA9C,CAzFC,EA6HH,iCAAoBD,2BAAmBC,OAAvC,EAAgD,IAAhD,CA7HG,EAiIId,eAAOE,WAjIX,EAmIH,gCAAmBW,2BAAmBC,OAAtC,EAA+C,IAA/C,CAnIG,EAkJId,eAAOE,WAlJX,CAAT;;AA4JA,IAAMa,SAAS,GAAGjB,0BAAOC,GAAV,qFAAf;;AAmBA,IAAMiB,OAAuC,GAAG,SAA1CA,OAA0C,OAcc;AAAA,uBAbXC,IAaW;AAAA,MAbXA,IAaW,0BAbJC,YAAKC,MAaD;AAAA,0BAZXC,OAYW;AAAA,MAZXA,OAYW,6BAZD,QAYC;AAAA,MAXXC,IAWW,QAXXA,IAWW;AAAA,MAVXC,QAUW,QAVXA,QAUW;AAAA,MATXC,aASW,QATXA,aASW;AAAA,MARXC,QAQW,QARXA,QAQW;AAAA,MAPXC,IAOW,QAPXA,IAOW;AAAA,MANXC,WAMW,QANXA,WAMW;AAAA,2BALXC,QAKW;AAAA,MALXA,QAKW,8BALA,KAKA;AAAA,MAJXC,MAIW,QAJXA,MAIW;AAAA,MAHXC,aAGW,QAHXA,aAGW;AAAA,MAFXC,eAEW,QAFXA,eAEW;AAAA,MADXC,qBACW,QADXA,qBACW;;AAE5D,wBAAgCC,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBC,WAAjB;;AAEA,MAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,CAAD,EAAY;AACjC,QAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBV,MAAAA,MAAM,IAAIA,MAAM,EAAhB;AACD;AACF,GAJD;;AAMA,MAAMW,YAAY,GAAG,CAACL,QAAQ,GAAG,YAAH,GAAkB,EAA3B,EAClBM,MADkB,CACXb,QAAQ,GAAG,WAAH,GAAiB,EADd,EAElBa,MAFkB,CAEX,CAAC,CAACZ,MAAF,GAAW,cAAX,GAA4B,EAFjB,EAGlBY,MAHkB,CAGX,gBAHW,EAIlBA,MAJkB,WAIRpB,OAJQ,QAKlBoB,MALkB,WAKRvB,IALQ,EAArB;AAOA,sBACE,sBAAC,GAAD;AAAK,IAAA,QAAQ,EAAE,CAACW,MAAD,IAAWD,QAAX,GAAsB,CAAC,CAAvB,GAA2B,CAA1C;AACK,IAAA,SAAS,EAAEY,YADhB;AAEK,IAAA,WAAW,EAAEE,iCAFlB;AAGK,IAAA,UAAU,EAAE,oBAACJ,CAAD;AAAA,aAAO,CAACV,QAAD,IAAaS,cAAc,CAACC,CAAD,CAAlC;AAAA,KAHjB;AAIK,IAAA,OAAO,EAAE,iBAAAA,CAAC,EAAI;AACZ,OAACV,QAAD,IAAaC,MAAb,IAAuBA,MAAM,EAA7B;AACD,KANN;AAOK,4BAPL;AAAA,eASI,CAAC,CAACP,IAAF,iBACA;AAAK,MAAA,SAAS,EAAE,gBAAhB;AAAA,gBAAmCA;AAAnC,MAVJ,eAYE;AAAK,MAAA,SAAS,EAAE,mBAAhB;AAAA,8BACE;AAAK,QAAA,SAAS,EAAE,qBAAhB;AAAA,kBAAwCC;AAAxC,QADF,EAEG,CAAC,CAACC,aAAF,iBAAmB;AAAK,QAAA,SAAS,EAAE,0BAAhB;AAAA,kBAA6CA;AAA7C,QAFtB;AAAA,MAZF,EAiBI,CAAC,CAACE,IAAF,iBACA;AAAA,iBAEI,CAAC,CAACC,WAAF,iBACA;AAAK,QAAA,SAAS,EAAE,6BAAhB;AAAA,+BACE,qBAAC,wBAAD;AAAgB,UAAA,KAAK,EAAEA,WAAvB;AACgB,UAAA,IAAI,EAAET,IAAI,KAAKC,YAAKwB,KAAd,GAAsBxB,YAAKC,MAA3B,GAAoCF,IAAI,KAAKC,YAAKyB,KAAd,GAAsBzB,YAAK0B,MAA3B,GAAoC1B,YAAKyB,KADnG;AAEgB,UAAA,QAAQ,EAAE,KAF1B;AAGgB,UAAA,QAAQ,EAAEhB,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAH1C;AAIgB,UAAA,SAAS,EAAE,IAJ3B;AAAA,oBAKGF;AALH;AADF,QAHJ,EAcI,CAACC,WAAD,iBACA;AAAK,QAAA,SAAS,EAAE,gBAAhB;AAAA,kBACGD;AADH,QAfJ;AAAA,MAlBJ,EAwCI,CAAC,CAACD,QAAF,iBACA;AAAK,MAAA,SAAS,EAAE,mBAAhB;AACK,MAAA,YAAY,EAAE;AAAA,eAAMW,WAAW,CAAC,EAACX,QAAD,aAACA,QAAD,eAACA,QAAQ,CAAEG,QAAX,CAAD,CAAjB;AAAA,OADnB;AAEK,MAAA,YAAY,EAAE;AAAA,eAAMQ,WAAW,CAAC,KAAD,CAAjB;AAAA,OAFnB;AAAA,6BAGE,qBAAC,wBAAD,kCAAoBX,QAApB;AACgB,QAAA,IAAI,EAAE,MADtB;AAEgB,QAAA,QAAQ,EAAEG,QAAQ,IAAIH,QAAQ,CAACG,QAF/C;AAGgB,QAAA,IAAI,EAAEP,OAAO,KAAK,SAAZ,gBACF,qBAAC,kBAAD,CAAa,aAAb,KADE,gBAEF,qBAAC,kBAAD,CAAa,YAAb;AALpB;AAHF,MAzCJ,EAsDI,CAAC,CAACS,aAAF,iBACA,qBAAC,SAAD;AAAW,MAAA,SAAS,EAAE,mBAAtB;AAAA,6BACE,qBAAC,kBAAD;AAAY,QAAA,MAAM,EAAE;AAAA,iBAAM,CAAC,CAACC,eAAF,IAAqBA,eAAe,EAA1C;AAAA,SAApB;AAAkE,QAAA,OAAO,EAAC,WAA1E;AAAsF,QAAA,KAAK,EAAC,UAA5F;AAAuG,QAAA,QAAQ,EAAEH,QAAQ,IAAII,qBAA7H;AAAA,kBACGF;AADH;AADF,MAvDJ;AAAA,IADF;AAgED,CA/FD;;;AAdET,EAAAA,O,4BAAU,Q,EAAW,S;AACrBC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,a;AAEAE,EAAAA,I;AACAC,EAAAA,W;AACAC,EAAAA,Q;AACAC,EAAAA,M;AACAC,EAAAA,a;AACAC,EAAAA,e;AACAC,EAAAA,qB;;eAoGaf,O","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\n\nimport {\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\nimport { IconButton } from '../Button';\n\nconst Row = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n border-bottom: 1px solid ${COLORS.neutral_100};\n box-sizing: border-box;\n position: relative;\n\n color: ${COLORS.neutral_600};\n background-color: ${COLORS.white};\n\n\n cursor: default;\n\n &.interactive {\n cursor: pointer;\n }\n\n &.interactive.disabled {\n cursor: not-allowed;\n }\n\n &.interactive:hover:not(.in-action):not(.disabled) {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n &.interactive:active:not(.in-action):not(.disabled) {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n z-index: ${Z_INDEXES.active};\n }\n\n &.interactive:focus {\n ${focusStyles}\n }\n\n &.disabled {\n .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n color: ${COLORS.neutral_300};\n }\n }\n\n\n &.small {\n min-height: 48px;\n padding: 0 8px;\n\n .list-item-icon {\n margin-right: 8px;\n }\n\n .list-item-main-text {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -8px;\n }\n }\n\n &.medium {\n min-height: 56px;\n padding: 0 12px;\n\n .list-item-icon {\n margin-right: 12px;\n }\n\n .list-item-main-text {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -12px;\n }\n }\n\n &.large {\n min-height: 64px;\n padding: 0 16px;\n\n .list-item-icon {\n margin-right: 16px;\n }\n\n .list-item-main-text {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -16px;\n }\n }\n\n &.overlay {\n padding: 0 4px;\n\n .list-item-actions {\n margin-right: -4px;\n }\n }\n\n .list-item-icon {\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n .list-item-content {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n }\n\n .list-item-main-text {\n }\n\n .list-item-secondary-text {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-note {\n color: ${COLORS.neutral_600};\n word-break: initial;\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-note.with-tooltip {\n cursor: pointer;\n\n > div {\n text-decoration-line: underline;\n text-decoration-style: dashed;\n text-underline-offset: 1px;\n text-decoration-thickness: 1px;\n }\n }\n\n .list-item-actions {\n color: ${COLORS.neutral_600};\n display: flex;\n align-items: center;\n\n button div {\n background-color: transparent;\n }\n }\n`;\n\nconst RightIcon = styled.div``;\n\n\ntype Props = {\n size?: Size;\n variant?: 'normal' | 'overlay';\n icon?: React.ReactNode;\n mainText: string;\n secondaryText?: string;\n dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n note?: string;\n noteTooltip?: string;\n disabled?: boolean;\n action?: () => void;\n rightSideIcon?: React.ReactNode;\n rightSideAction?: () => void;\n rightSideIconDisabled?: boolean;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n size = Size.Medium,\n variant = 'normal',\n icon,\n mainText,\n secondaryText,\n dropdown,\n note,\n noteTooltip,\n disabled = false,\n action,\n rightSideIcon,\n rightSideAction,\n rightSideIconDisabled\n }: Props) => {\n\n const [inAction, setInAction] = React.useState<Boolean>(false);\n\n const handleKeyPress = (e: any) => {\n if (e.key === 'Enter') {\n action && action()\n }\n }\n\n const rowClassName = (inAction ? 'in-action ' : '')\n .concat(disabled ? 'disabled ' : '')\n .concat(!!action ? 'interactive ' : '')\n .concat('list-item-row ')\n .concat(`${variant} `)\n .concat(`${size}`);\n\n return (\n <Row tabIndex={!action || disabled ? -1 : 0}\n className={rowClassName}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={(e) => !disabled && handleKeyPress(e)}\n onClick={e => {\n !disabled && action && action();\n }}\n data-hj-suppress>\n {\n !!icon &&\n <div className={'list-item-icon'}>{icon}</div>\n }\n <div className={'list-item-content'}>\n <div className={'list-item-main-text'}>{mainText}</div>\n {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n </div>\n {\n !!note &&\n <>\n {\n !!noteTooltip &&\n <div className={'list-item-note with-tooltip'}>\n <TooltipWrapper label={noteTooltip}\n size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n position={'top'}\n tabIndex={disabled ? -1 : 0}\n withArrow={true}>\n {note}\n </TooltipWrapper>\n </div>\n }\n {\n !noteTooltip &&\n <div className={'list-item-note'}>\n {note}\n </div>\n }\n </>\n }\n {\n !!dropdown &&\n <div className={'list-item-actions'}\n onMouseEnter={() => setInAction(!dropdown?.disabled)}\n onMouseLeave={() => setInAction(false)}>\n <DropdownButton {...dropdown}\n type={'icon'}\n disabled={disabled || dropdown.disabled}\n icon={variant === 'overlay'\n ? <SystemIcons.ArrowDropDown/>\n : <SystemIcons.MoreVertical/>}\n />\n </div>\n }\n {\n !!rightSideIcon &&\n <RightIcon className={'list-item-actions'}>\n <IconButton action={() => !!rightSideAction && rightSideAction()} variant='secondary' shape='circular' disabled={disabled || rightSideIconDisabled}>\n {rightSideIcon}\n </IconButton>\n </RightIcon>\n }\n </Row>\n );\n};\n\nexport default ListRow;\n\n"],"file":"ListRow.cjs"}
1
+ {"version":3,"sources":["../../src/List/ListRow.tsx"],"names":["Row","styled","div","COLORS","neutral_100","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focusStyles","neutral_300","ComponentTextStyle","Regular","ListRow","size","Size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","React","useState","inAction","setInAction","handleKeyPress","e","key","rowClassName","concat","defaultOnMouseDownHandler","Large","Small","XSmall"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\n\nimport {\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentXSStyling,\n ComponentXXSStyling\n} from '../styles';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst Row = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n border-bottom: 1px solid ${COLORS.neutral_100};\n box-sizing: border-box;\n position: relative;\n\n color: ${COLORS.neutral_600};\n background-color: ${COLORS.white};\n\n\n cursor: default;\n\n &.interactive {\n cursor: pointer;\n }\n\n &.interactive.disabled {\n cursor: not-allowed;\n }\n\n &.interactive:hover:not(.in-action):not(.disabled) {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n &.interactive:active:not(.in-action):not(.disabled) {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n z-index: ${Z_INDEXES.active};\n }\n\n &.interactive:focus {\n ${focusStyles}\n }\n\n &.disabled {\n .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n color: ${COLORS.neutral_300};\n }\n }\n\n\n &.small {\n min-height: 48px;\n padding: 0 8px;\n\n .list-item-icon {\n margin-right: 8px;\n }\n\n .list-item-main-text {\n ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -8px;\n }\n }\n\n &.medium {\n min-height: 56px;\n padding: 0 12px;\n\n .list-item-icon {\n margin-right: 12px;\n }\n\n .list-item-main-text {\n ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -12px;\n }\n }\n\n &.large {\n min-height: 64px;\n padding: 0 16px;\n\n .list-item-icon {\n margin-right: 16px;\n }\n\n .list-item-main-text {\n ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-actions {\n margin-right: -16px;\n }\n }\n\n &.overlay {\n padding: 0 4px;\n\n .list-item-actions {\n margin-right: -4px;\n }\n }\n\n .list-item-icon {\n width: 24px;\n height: 24px;\n\n svg {\n width: 24px;\n height: 24px;\n }\n }\n\n .list-item-content {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n }\n\n .list-item-main-text {\n }\n\n .list-item-secondary-text {\n ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-note {\n color: ${COLORS.neutral_600};\n word-break: initial;\n ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n }\n\n .list-item-note.with-tooltip {\n cursor: pointer;\n\n > div {\n text-decoration-line: underline;\n text-decoration-style: dashed;\n text-underline-offset: 1px;\n text-decoration-thickness: 1px;\n }\n }\n\n .list-item-actions {\n color: ${COLORS.neutral_600};\n display: flex;\n align-items: center;\n\n button div {\n background-color: transparent;\n }\n }\n`;\n\n\ntype Props = {\n size?: Size;\n variant?: 'normal' | 'overlay';\n icon?: React.ReactNode;\n mainText: string;\n secondaryText?: string;\n dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n note?: string;\n noteTooltip?: string;\n disabled?: boolean;\n action?: () => void;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n size = Size.Medium,\n variant = 'normal',\n icon,\n mainText,\n secondaryText,\n dropdown,\n note,\n noteTooltip,\n disabled = false,\n action\n }: Props) => {\n\n const [inAction, setInAction] = React.useState<Boolean>(false);\n\n const handleKeyPress = (e: any) => {\n if (e.key === 'Enter') {\n action && action()\n }\n }\n\n const rowClassName = (inAction ? 'in-action ' : '')\n .concat(disabled ? 'disabled ' : '')\n .concat(!!action ? 'interactive ' : '')\n .concat('list-item-row ')\n .concat(`${variant} `)\n .concat(`${size}`);\n\n return (\n <Row tabIndex={!action || disabled ? -1 : 0}\n className={rowClassName}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={(e) => !disabled && handleKeyPress(e)}\n onClick={e => {\n !disabled && action && action();\n }}\n data-hj-suppress>\n {\n !!icon &&\n <div className={'list-item-icon'}>{icon}</div>\n }\n <div className={'list-item-content'}>\n <div className={'list-item-main-text'}>{mainText}</div>\n {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n </div>\n {\n !!note &&\n <>\n {\n !!noteTooltip &&\n <div className={'list-item-note with-tooltip'}>\n <TooltipWrapper label={noteTooltip}\n size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n position={'top'}\n tabIndex={disabled ? -1 : 0}\n withArrow={true}>\n {note}\n </TooltipWrapper>\n </div>\n }\n {\n !noteTooltip &&\n <div className={'list-item-note'}>\n {note}\n </div>\n }\n </>\n }\n {\n !!dropdown &&\n <div className={'list-item-actions'}\n onMouseEnter={() => setInAction(!dropdown?.disabled)}\n onMouseLeave={() => setInAction(false)}>\n <DropdownButton {...dropdown}\n type={'icon'}\n disabled={disabled || dropdown.disabled}\n icon={variant === 'overlay'\n ? <SystemIcons.ArrowDropDown/>\n : <SystemIcons.MoreVertical/>}\n />\n </div>\n }\n </Row>\n );\n};\n\nexport default ListRow;\n\n"],"file":"ListRow.cjs"}
@@ -12,9 +12,6 @@ declare type Props = {
12
12
  noteTooltip?: string;
13
13
  disabled?: boolean;
14
14
  action?: () => void;
15
- rightSideIcon?: React.ReactNode;
16
- rightSideAction?: () => void;
17
- rightSideIconDisabled?: boolean;
18
15
  };
19
16
  declare const ListRow: React.FunctionComponent<Props>;
20
17
  export default ListRow;